/* Gedruckte Übungshefte: Seiten (Druck und Vorschau) und der Heft-Gestalter. Maße der Seiten in mm. */
@font-face { font-family: "Bricolage"; src: url("fonts/bricolage.woff2") format("woff2-variations"), url("fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("fonts/atkinson-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("fonts/atkinson-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Playpen"; src: url("fonts/playpen-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* ===================== Seite ===================== */
.hp { --hc: #3c78f0; --hc-soft: #e6eefe; --ink: #1a1d2b; --muted: #5d6478; --line: #d6dbe8;
  position: relative; width: 210mm; height: 297mm; overflow: hidden; background: #fff; color: var(--ink);
  font: 10.5pt/1.42 "Atkinson", "Verdana", sans-serif; box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.hp *, .hp *::before, .hp *::after { box-sizing: border-box; }
.hp.hp-a5 { width: 148mm; height: 210mm; font-size: 8.6pt; }
.hp.hc-gruen { --hc: #1f9e64; --hc-soft: #e1f5eb; } .hp.hc-rot { --hc: #e04441; --hc-soft: #fde8e7; }
.hp.hc-lila { --hc: #7a52dc; --hc-soft: #efe9fd; } .hp.hc-gelb { --hc: #d98a00; --hc-soft: #fff3d1; }
.hp.hc-pink { --hc: #e04b90; --hc-soft: #fde7f1; }
.hp h2, .hp h3, .hp h4 { font-family: "Bricolage", "Arial Narrow", sans-serif; letter-spacing: -.01em; margin: 0; color: var(--ink); }
.hp p { margin: 0; }
.hp-in { position: absolute; inset: 11mm 12mm 9mm 15mm; display: flex; flex-direction: column; }
.hp-a5 .hp-in { inset: 8mm 8mm 7mm 11mm; }
.hp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 6mm; padding-bottom: 2mm; border-bottom: .6mm solid var(--ink); font-size: .82em; }
.hp-brand { display: flex; align-items: center; gap: 1.6mm; font: 800 1.15em "Bricolage", sans-serif; }
.hp-logo { width: 5mm; height: 5mm; flex: none; }
.hp-name { color: var(--muted); display: flex; align-items: flex-end; gap: 1.5mm; }
.hp-name i { font: 600 1.25em "Playpen", cursive; color: var(--ink); min-width: 38mm; border-bottom: .3mm solid var(--ink); font-style: normal; padding: 0 1mm; }
.hp-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2.6mm; padding-top: 3.2mm; overflow: hidden; }
.hp-a5 .hp-body { gap: 2mm; padding-top: 2.4mm; }
.hp-foot { display: flex; justify-content: space-between; align-items: center; gap: 4mm; font-size: 6.6pt; color: var(--muted); padding-top: 2mm; border-top: .25mm solid var(--line); }
.hp-a5 .hp-foot { font-size: 5.6pt; }
.hp-pno { display: grid; place-items: center; width: 6.5mm; height: 6.5mm; border-radius: 50%; background: var(--hc); color: #fff; font: 800 8pt "Bricolage", sans-serif; flex: none; }
.hp-foot span:last-child { text-align: right; }

.hp-part { display: flex; align-items: baseline; justify-content: space-between; gap: 4mm; padding: 1.6mm 3mm 1.6mm 4mm; border-radius: 2.4mm; background: var(--hc-soft); border-left: 1.6mm solid var(--hc); }
.hp-part h3 { font-size: 1.32em; }
.hp-part small { color: var(--muted); font-size: .8em; text-align: right; }
.hp-round { display: flex; align-items: baseline; gap: 3mm; padding: 2.4mm 4mm; border-radius: 2.4mm; background: var(--ink); color: #fff; }
.hp-round span { font: 800 1.6em "Bricolage", sans-serif; }
.hp-round small { opacity: .75; }

.hp-karo { background-color: #fff; background-image: linear-gradient(#cdd6ec .2mm, transparent .2mm), linear-gradient(90deg, #cdd6ec .2mm, transparent .2mm);
  background-size: 5mm 5mm; background-position: -.1mm -.1mm; border: .25mm solid #b9c4e0; border-radius: 1.6mm; }
.hp-karo-full { flex: 1; }
.hp-fill { flex: 1; min-height: 12mm; position: relative; }
.hp-fill span { position: absolute; left: 3mm; top: 2mm; font: 600 7pt "Playpen", cursive; color: #8d97b5; background: #fff; padding: 0 1.4mm; border-radius: 1mm; }

/* Aufgabe */
.ht { display: grid; grid-template-columns: 8.5mm 1fr 21mm; gap: 2.6mm; padding: 2.6mm 3mm 2.6mm 2.4mm; border: .3mm solid var(--line); border-radius: 3mm; break-inside: avoid; background: #fff; }
.hp-a5 .ht { grid-template-columns: 7mm 1fr 16mm; gap: 2mm; padding: 2mm; }
.ht-nr { display: flex; flex-direction: column; align-items: center; gap: 1mm; }
.ht-nr span { display: grid; place-items: center; width: 7.5mm; height: 7.5mm; border-radius: 50%; background: var(--hc); color: #fff; font: 800 10.5pt "Bricolage", sans-serif; }
.hp-a5 .ht-nr span { width: 6mm; height: 6mm; font-size: 8.5pt; }
.ht-nr small { font-size: 6.4pt; color: var(--muted); white-space: nowrap; }
.ht-main { min-width: 0; display: flex; flex-direction: column; gap: 1.6mm; }
.ht-topic { font: 700 6.6pt "Atkinson", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--hc); }
.hp-a5 .ht-topic { font-size: 5.6pt; }
.ht-q { white-space: pre-line; }
.ht-work { height: 30mm; }
.hp-a5 .ht-work { height: 25mm; }
.ht-res { display: flex; align-items: flex-end; gap: 2mm; font-weight: 700; font-size: .92em; }
.ht-line { flex: 0 0 36mm; border-bottom: .3mm solid var(--ink); height: 4.5mm; }
.ht-opts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4mm 4mm; }
.ht-opts li { display: flex; align-items: flex-start; gap: 1.8mm; }
.ht-opts b { flex: none; display: grid; place-items: center; width: 4.6mm; height: 4.6mm; border-radius: 50%; border: .35mm solid var(--ink); font: 800 7pt "Bricolage", sans-serif; margin-top: .2mm; }
.hp-a5 .ht-opts b { width: 3.8mm; height: 3.8mm; font-size: 6pt; }
.ht-side { display: flex; flex-direction: column; align-items: center; gap: 1.6mm; }
.hq-wrap { display: grid; justify-items: center; gap: .8mm; text-decoration: none; color: var(--muted); text-align: center; }
.hq-wrap small { font-size: 5.8pt; line-height: 1.15; }
.hp-a5 .hq-wrap small { font-size: 5pt; }
.hq { display: block; width: 18mm; height: 18mm; }
.hp-a5 .hq { width: 13.5mm; height: 13.5mm; }
.hq svg { display: block; width: 100%; height: 100%; }
.hq:empty { background: repeating-linear-gradient(45deg, #eef1f8 0 1mm, #fff 1mm 2mm); border-radius: 1mm; }
.ht-done { display: flex; align-items: center; gap: 1mm; font-size: 6pt; color: var(--muted); }
.ht-done i, .hv-c i, .hx i { display: inline-block; width: 3.4mm; height: 3.4mm; border: .35mm solid var(--ink); border-radius: .8mm; }

/* Skizzen in Aufgaben */
.ht-fig { width: 56mm; }
.hp-a5 .ht-fig { width: 44mm; }
.ht-fig svg { display: block; width: 100%; height: auto; }
.ht-workrow { display: flex; gap: 3mm; align-items: stretch; }
.ht-workrow .ht-fig { flex: none; border: .25mm solid var(--line); border-radius: 1.6mm; padding: 1mm; background: #fff; }
.ht-workrow .ht-work { flex: 1; height: auto; min-height: 30mm; }
.hp-a5 .ht-workrow .ht-work { min-height: 25mm; }

/* Vokabeln */
.hv-head { display: flex; align-items: center; justify-content: space-between; gap: 4mm; }
.hv-head h4 { font-size: 1.5em; }
.hv-head h4 small { font: 400 .55em "Atkinson", sans-serif; color: var(--muted); }
.hq-row { grid-template-columns: auto auto; align-items: center; gap: 2mm; text-align: left; }
.hq-row small { max-width: 18mm; }
.hp .hq-row .hq { width: 15mm; height: 15mm; }
.hp-a5 .hq-row .hq { width: 12mm; height: 12mm; }
.hv { width: 100%; border-collapse: collapse; border: .45mm solid var(--ink); border-radius: 2mm; overflow: hidden; }
.hv th { background: var(--hc); color: #fff; text-align: left; font: 700 .9em "Bricolage", sans-serif; padding: 1.6mm 3mm; }
.hv td { padding: 0 3mm; height: 8.6mm; border-bottom: .25mm solid var(--line); vertical-align: middle; }
.hp-a5 .hv td { height: 7.6mm; padding: 0 2mm; }
.hv tr:nth-child(even) td { background: #f7f8fc; }
.hv td:first-child, .hv th:first-child { border-right: .45mm dashed var(--ink); width: 47%; font-weight: 700; }
.hv .hv-c { width: 9mm; text-align: center; padding: 0; border-left: .25mm solid var(--line); }
.hv-fold { font-size: .78em; color: var(--muted); text-align: center; }

/* Erste Innenseite */
.hi-hero { display: flex; align-items: center; gap: 4mm; }
.hi-kompi { width: 40mm; height: auto; flex: none; }
.hp-a5 .hi-kompi { width: 28mm; }
.hi-bubble { position: relative; background: var(--hc-soft); border-radius: 5mm; padding: 4mm 5mm; font: 600 1.1em/1.4 "Playpen", cursive; }
.hi-bubble::before { content: ""; position: absolute; left: -3mm; top: 50%; border: 3mm solid transparent; border-right-color: var(--hc-soft); border-left: 0; transform: translateY(-50%); }
.hi-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.4mm; counter-reset: s; }
.hi-steps li { counter-increment: s; display: grid; grid-template-columns: 8mm 1fr; gap: 3mm; align-items: start; }
.hi-steps li::before { content: counter(s); display: grid; place-items: center; width: 8mm; height: 8mm; border-radius: 2.4mm; background: var(--ink); color: #fff; font: 800 11pt "Bricolage", sans-serif; transform: rotate(-4deg); }
.hi-progress { border: .35mm dashed var(--hc); border-radius: 3mm; padding: 3mm 4mm; }
.hi-progress h4 { font-size: 1.2em; margin-bottom: 2mm; }
.hx-grid { display: flex; flex-wrap: wrap; gap: 1.6mm; }
.hx { display: inline-flex; align-items: center; gap: .8mm; padding: .6mm 1.4mm; border-radius: 1.6mm; background: #f4f6fb; font-size: .78em; }
.hx b { min-width: 4mm; text-align: right; }
.hi-foot { margin-top: auto; display: flex; gap: 4mm; align-items: center; padding: 3mm 4mm; border-radius: 3mm; background: #f4f6fb; font-size: .86em; }
.hi-foot .hq { width: 22mm; height: 22mm; }
.hp-a5 .hi-foot .hq { width: 16mm; height: 16mm; }

.hi-goal { display: grid; grid-template-columns: 1.4fr 1fr; gap: 5mm; }
.hi-goal div { display: flex; flex-direction: column; gap: 1mm; }
.hi-goal small { font-size: .78em; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.hi-goal span { height: 9mm; border-bottom: .35mm solid var(--ink); background: repeating-linear-gradient(90deg, transparent 0 4mm, #f2f4fa 4mm 4.3mm); }
.hi-tips { position: relative; border-radius: 4mm; padding: 4mm 5mm; background: var(--ink); color: #fff; overflow: hidden; }
.hi-tips::after { content: ""; position: absolute; right: -10mm; top: -10mm; width: 34mm; height: 34mm; border-radius: 50%; background: var(--hc); opacity: .45; }
.hi-tips h4 { color: #ffc23d; font-size: 1.2em; margin-bottom: 2.4mm; position: relative; }
.hi-tips ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; position: relative; }
.hp-a5 .hi-tips ul { grid-template-columns: 1fr; gap: 1.6mm; }
.hi-tips li { display: flex; gap: 2mm; font-size: .86em; line-height: 1.35; }
.hi-tips b { flex: none; display: grid; place-items: center; width: 6.5mm; height: 6.5mm; border-radius: 50%; background: #ffc23d; color: var(--ink); font-size: .95em; }

/* Lösungen, Abschluss */
.hs { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 6mm; font-size: .9em; }
.hp-a5 .hs { columns: 2; }
.hs li { display: flex; gap: 2mm; padding: 1.1mm 0; border-bottom: .25mm dotted var(--line); break-inside: avoid; }
.hs b { flex: none; width: 6mm; color: var(--hc); }
.hf { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 3mm; border: .8mm solid var(--hc); border-radius: 6mm; padding: 8mm; overflow: hidden; }
.hf::after { content: ""; position: absolute; inset: 2.4mm; border: .3mm solid var(--hc); border-radius: 4mm; pointer-events: none; }
.hf-burst { position: absolute; left: 50%; top: 34%; width: 170mm; height: 170mm; transform: translate(-50%, -50%); border-radius: 50%;
  background: repeating-conic-gradient(var(--hc-soft) 0 9deg, transparent 9deg 18deg); opacity: .9; }
.hf > *:not(.hf-burst) { position: relative; }
.hf-kompi { width: 62mm; height: auto; }
.hp-a5 .hf-kompi { width: 44mm; }
.hf h2 { font-size: 3.2em; color: var(--hc); }
.hf-name { font: 600 2em "Playpen", cursive; min-width: 70%; border-bottom: .4mm solid var(--ink); }
.hf-line { display: inline-block; width: 100%; height: 1em; }
.hf-sign { display: flex; gap: 12mm; margin-top: 8mm; width: 85%; }
.hf-sign span { flex: 1; border-top: .3mm solid var(--ink); padding-top: 1mm; font-size: .8em; color: var(--muted); }
.hf-stamp { position: absolute !important; right: 10mm; bottom: 12mm; width: 26mm; height: 26mm; border-radius: 50%; border: .8mm double var(--hc); display: grid; place-items: center;
  color: var(--hc); font: 800 9pt/1.05 "Bricolage", sans-serif; transform: rotate(-14deg); text-transform: uppercase; letter-spacing: .04em; }
.hp-a5 .hf-stamp { width: 19mm; height: 19mm; font-size: 6.6pt; right: 6mm; bottom: 8mm; }

/* ===================== Deckblatt ===================== */
.hp-cover { color: var(--ink); }
.cv-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.cv-band { position: absolute; left: 0; right: 0; top: 0; height: 3.4%; display: flex; }
.cv-band i { flex: 1; } .cv-band i:nth-child(1) { background: #3c78f0; } .cv-band i:nth-child(2) { background: #ffc23d; } .cv-band i:nth-child(3) { background: #ef5350; } .cv-band i:nth-child(4) { background: #27ae73; }
.cv-top { position: absolute; left: 8%; right: 8%; top: 6.5%; display: flex; justify-content: space-between; align-items: center; }
.cv-brand { display: flex; align-items: center; gap: .6em; font: 800 1.35em "Bricolage", sans-serif; background: #fff; padding: .35em .8em .35em .45em; border-radius: 999px; box-shadow: 0 1mm 0 rgba(26,33,64,.15); }
.cv-brand .hp-logo { width: 1.45em; height: 1.45em; }
.cv-badge { font: 800 1.5em "Bricolage", sans-serif; color: #fff; background: var(--ink); padding: .2em .65em; border-radius: .5em; transform: rotate(4deg); box-shadow: .6mm .8mm 0 var(--hc); }
.cv-title { position: absolute; left: 8%; right: 8%; top: 15%; background: #fff; border-radius: 5mm; padding: 5% 6% 5.5%; box-shadow: 0 1.2mm 0 rgba(26,33,64,.12), 0 6mm 12mm -6mm rgba(26,33,64,.35); border: .5mm solid var(--ink); }
.cv-title small { display: inline-block; font: 700 .8em "Atkinson", sans-serif; text-transform: uppercase; letter-spacing: .1em; color: var(--hc); }
.cv-title h2 { font-size: 2.9em; line-height: 1.02; margin: .15em 0 .25em; }
.hp-a5 .cv-title h2 { font-size: 2.6em; }
.cv-title p { color: var(--muted); }
.cv-kompi { position: absolute; right: 5%; bottom: 14%; width: 52%; height: auto; filter: drop-shadow(0 3mm 3mm rgba(0,0,0,.18)); }
.cv-sticker { position: absolute; left: 9%; top: 51%; width: 25%; aspect-ratio: 1; border-radius: 50%; background: #ffc23d; display: grid; place-content: center; text-align: center; transform: rotate(-10deg);
  box-shadow: 0 1mm 0 #c98a0b, 0 4mm 8mm -3mm rgba(0,0,0,.3); border: .6mm dashed rgba(26,33,64,.35); }
.cv-sticker b { font: 800 2.6em/1 "Bricolage", sans-serif; }
.cv-sticker span { font: 700 .9em/1.15 "Atkinson", sans-serif; }
.cv-plate { position: absolute; left: 8%; right: 8%; bottom: 5.5%; background: #fff; border: .5mm solid var(--ink); border-radius: 3mm; padding: 2.6% 4%; display: flex; flex-direction: column; box-shadow: 0 1.2mm 0 rgba(26,33,64,.15); }
.cv-plate small { font-size: .72em; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.cv-plate span { font: 600 2em/1.2 "Playpen", cursive; min-height: 1.2em; border-bottom: .3mm dashed var(--line); }
.cv-klar .cv-band { display: none; }
.cv-klar .cv-title { box-shadow: none; border-width: .3mm; }
.cv-klar .cv-sticker { background: #fff; box-shadow: none; border: .4mm solid var(--ink); }

/* ===================== Bildschirm: Seiten skalieren ===================== */
.hp-frame { width: calc(210mm * var(--s, .5)); height: calc(297mm * var(--s, .5)); position: relative; flex: none; }
.hp-frame.a5 { width: calc(148mm * var(--s, .5)); height: calc(210mm * var(--s, .5)); }
.hp-frame > .hp { position: absolute; left: 0; top: 0; transform: scale(var(--s, .5)); transform-origin: 0 0; }

/* Heft-Gestalter */
.hb-hero { position: relative; overflow: hidden; }
.hb-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; align-items: center; padding-block: 44px 56px; }
.hb-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1; margin: 0 0 14px; }
.hb-hero .lead { max-width: 52ch; }
.hb-points { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 8px; }
.hb-points li { display: flex; gap: 10px; align-items: center; font-weight: 700; color: var(--nacht); }
.hb-points .ic { color: var(--gruen); }
.hb-stack { position: relative; height: 430px; }
.hb-stack .hp-frame { position: absolute; --s: .43; border-radius: 6px; box-shadow: 0 2px 3px rgba(0,0,0,.08), 0 26px 40px -18px rgba(26,33,64,.55); transition: transform .5s cubic-bezier(.3,1.3,.5,1); overflow: hidden; }
.hb-stack .hp-frame:nth-child(1) { left: 2%; top: 46px; transform: rotate(-9deg); }
.hb-stack .hp-frame:nth-child(2) { left: 50%; top: 52px; transform: rotate(8deg); }
.hb-stack .hp-frame:nth-child(3) { left: 24%; top: 0; transform: rotate(-1deg); z-index: 2; }
.hb-stack:hover .hp-frame:nth-child(1) { transform: rotate(-14deg) translate(-16px, 6px); }
.hb-stack:hover .hp-frame:nth-child(2) { transform: rotate(13deg) translate(16px, 6px); }
.hb-stack:hover .hp-frame:nth-child(3) { transform: rotate(0) translateY(-8px); }
.hb-stack .hp-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0,0,0,.14) 0, transparent 4%, rgba(255,255,255,.18) 45%, transparent 60%); pointer-events: none; }
.hb-qrdemo { position: absolute; right: 0; bottom: 6px; z-index: 3; background: #fff; border-radius: 18px; padding: 10px 14px; box-shadow: var(--shadow-2, 0 10px 30px -10px rgba(26,33,64,.4)); display: flex; gap: 10px; align-items: center; font: 600 .95rem var(--f-hand); color: var(--tinte-dunkel, #1e2f8c); transform: rotate(2deg); max-width: 240px; }
.hb-qrdemo .hq { width: 54px; height: 54px; flex: none; }

.hb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 28px; align-items: start; }
.hb-form { display: grid; gap: 18px; }
.hb-step { background: #fff; border-radius: 22px; box-shadow: 0 0 0 1px var(--line), 0 10px 26px -20px rgba(26,33,64,.45); padding: 20px; }
.hb-step > h2 { display: flex; align-items: center; gap: 12px; font-size: 1.3rem; margin: 0 0 14px; }
.hb-step > h2 .n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--nacht); color: #fff; font-size: 1.05rem; transform: rotate(-5deg); flex: none; }
.hb-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hb-kind { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: center; padding: 12px; border-radius: 16px; border: 2px solid var(--line); cursor: pointer; background: #fff; transition: border-color .15s, transform .15s; }
.hb-kind:hover { transform: translateY(-2px); }
.hb-kind input { position: absolute; opacity: 0; pointer-events: none; }
.hb-kind .mini { width: 46px; height: 62px; border-radius: 5px; background: var(--c); position: relative; box-shadow: 2px 3px 0 rgba(26,33,64,.18); overflow: hidden; }
.hb-kind .mini::before { content: ""; position: absolute; left: 6px; right: 6px; top: 10px; height: 14px; border-radius: 3px; background: #fff; }
.hb-kind .mini::after { content: ""; position: absolute; right: 5px; bottom: 6px; width: 20px; height: 20px; border-radius: 50%; background: #ffc23d; box-shadow: inset -3px -3px 0 rgba(0,0,0,.12); }
.hb-kind b { display: block; color: var(--nacht); line-height: 1.2; }
.hb-kind small { color: var(--muted); font-size: .82rem; }
.hb-kind small { display: block; }
.hb-kind .from { display: inline-block; margin-top: 4px; font: 800 .85rem var(--f-display); color: var(--tinte); }
.hb-kind:has(input:checked) { border-color: var(--nacht); background: var(--sonne-soft, #fff3d1); box-shadow: 0 3px 0 var(--nacht); }
.hb-kind:has(input:focus-visible) { outline: 3px solid var(--tinte); outline-offset: 2px; }
.hb-sub { margin-top: 12px; display: grid; gap: 10px; }
.hb-sub[hidden] { display: none; }
.hb-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-seg label { position: relative; cursor: pointer; }
.hb-seg input { position: absolute; opacity: 0; pointer-events: none; }
.hb-seg span { display: block; padding: 9px 14px; border-radius: 12px; border: 2px solid var(--line); background: #fff; font-weight: 700; color: var(--nacht); line-height: 1.2; }
.hb-seg span small { display: block; font-weight: 400; color: var(--muted); font-size: .8rem; }
.hb-seg input:checked + span { background: var(--nacht); color: #fff; border-color: var(--nacht); }
.hb-seg input:checked + span small { color: rgba(255,255,255,.8); }
.hb-seg input:focus-visible + span { outline: 3px solid var(--tinte); outline-offset: 2px; }
.hb-covers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hb-cover { position: relative; cursor: pointer; text-align: center; font-weight: 700; color: var(--nacht); font-size: .9rem; }
.hb-cover input { position: absolute; opacity: 0; pointer-events: none; }
.hb-cover i { display: block; aspect-ratio: 1 / 1.1; border-radius: 12px; margin-bottom: 4px; border: 3px solid transparent; box-shadow: 0 0 0 1px var(--line); position: relative; overflow: hidden; }
.hb-cover input:checked ~ i { border-color: var(--nacht); box-shadow: 0 4px 0 var(--nacht); }
.hb-cover input:focus-visible ~ i { outline: 3px solid var(--tinte); outline-offset: 2px; }
.sw-kompass { background: #fffdf7 linear-gradient(#c9d5ef 1px, transparent 1px) 0 0 / 8px 8px, radial-gradient(circle at 60% 66%, #ffc23d 0 28%, transparent 30%), #fffdf7; }
.sw-kompass { background-image: radial-gradient(circle at 60% 66%, #ffc23d 0 26%, transparent 27%), linear-gradient(#c9d5ef 1px, transparent 1px), linear-gradient(90deg, #c9d5ef 1px, transparent 1px); background-size: auto, 8px 8px, 8px 8px; }
.sw-weltall { background: radial-gradient(circle at 72% 30%, #ffc23d 0 13%, transparent 14%), radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 40% 70%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 80% 80%, #fff 50%, transparent 51%), linear-gradient(#0d1230, #2d46c2); }
.sw-dschungel { background: radial-gradient(ellipse 60% 22% at 10% 10%, #145c3c 98%, transparent), radial-gradient(ellipse 60% 22% at 95% 90%, #0f4f33 98%, transparent), linear-gradient(135deg, #27ae73, #0f6b45); }
.sw-ozean { background: radial-gradient(circle at 30% 70%, transparent 0 5%, #fff 6% 8%, transparent 9%), repeating-radial-gradient(ellipse at 50% -40%, transparent 0 18px, rgba(255,255,255,.25) 19px 22px), linear-gradient(#7fd8e3, #1f4fb8); }
.sw-pixel { background: linear-gradient(90deg, rgba(255,255,255,.25) 50%, transparent 50%) 0 0 / 10px 10px, linear-gradient(135deg, #8a63e8, #ee5fa0); }
.sw-klar { background: repeating-radial-gradient(circle at 50% 55%, transparent 0 9px, rgba(45,70,194,.18) 10px 11px), #f6f7fb; }
.hb-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hb-kids { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hb-kids button { border: 0; background: var(--blau-soft, #e6eefe); color: var(--tinte-dunkel, #1e2f8c); border-radius: 999px; padding: 4px 12px; font-weight: 700; cursor: pointer; }
.hb-qty { display: inline-flex; align-items: center; border: 2px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.hb-qty button { width: 44px; height: 44px; border: 0; background: #f3f5fa; font-size: 1.3rem; font-weight: 800; cursor: pointer; color: var(--nacht); }
.hb-qty input { width: 54px; height: 44px; border: 0; text-align: center; font: 800 1.15rem var(--f-display); -moz-appearance: textfield; }
.hb-qty input::-webkit-outer-spin-button, .hb-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.hb-preview { position: sticky; top: 14px; display: grid; gap: 14px; }
.hb-desk { position: relative; border-radius: 26px; padding: 22px 18px 18px; background: radial-gradient(120% 90% at 30% 0%, #fdfbf3 0, #efe6d2 70%, #e3d6ba 100%); box-shadow: inset 0 0 0 1px rgba(120,90,40,.15), 0 18px 40px -26px rgba(60,40,10,.6); overflow: hidden; }
.hb-desk::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(92deg, rgba(150,110,60,.05) 0 3px, transparent 3px 22px); pointer-events: none; }
.hb-desk-top { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.hb-desk-top strong { font: 800 1.1rem var(--f-display); color: var(--nacht); }
.hb-toggle { display: inline-flex; background: rgba(255,255,255,.75); border-radius: 999px; padding: 3px; box-shadow: 0 0 0 1px rgba(26,33,64,.1); }
.hb-toggle button { border: 0; background: transparent; padding: 6px 12px; border-radius: 999px; font-weight: 700; color: var(--muted); cursor: pointer; }
.hb-toggle button[aria-pressed="true"] { background: var(--nacht); color: #fff; }
.hb-book { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 0; min-height: 200px; perspective: 1600px; }
.hb-book .hp-frame { box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 20px 30px -16px rgba(40,25,0,.55); background: #fff; animation: hbIn .35s ease; overflow: hidden; }
.hb-book.spread .hp-frame:first-child:not(:only-child) { border-radius: 4px 0 0 4px; box-shadow: inset -14px 0 18px -14px rgba(0,0,0,.35), 0 20px 30px -16px rgba(40,25,0,.55); }
.hb-book.spread .hp-frame:last-child:not(:only-child) { border-radius: 0 4px 4px 0; box-shadow: inset 14px 0 18px -14px rgba(0,0,0,.35), 0 20px 30px -16px rgba(40,25,0,.55); }
.hb-book.spiral::before { content: ""; position: absolute; top: 2%; bottom: 2%; left: 50%; width: 14px; margin-left: -7px; z-index: 3;
  background: repeating-linear-gradient(transparent 0 6px, #8d96ad 6px 9px, #e9ecf4 9px 11px, transparent 11px 15px); border-radius: 6px; }
.hb-book:not(.spread).spiral::before { left: 0; margin-left: 0; }
@keyframes hbIn { from { opacity: 0; transform: translateY(6px) rotateY(-6deg); } }
.hb-nav { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.hb-nav button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 2px 0 rgba(26,33,64,.18); font-size: 1.2rem; cursor: pointer; color: var(--nacht); }
.hb-nav button:disabled { opacity: .35; cursor: default; }
.hb-nav span { font-weight: 700; color: var(--nacht); }
.hb-thumbs { position: relative; display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 6px; scrollbar-width: thin; }
.hb-thumbs button { flex: none; border: 0; padding: 0; background: none; cursor: pointer; text-align: center; font-size: .7rem; color: var(--muted); }
.hb-thumbs .hp-frame { --s: .085; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.25); overflow: hidden; margin-bottom: 3px; pointer-events: none; }
.hb-thumbs .hp-frame.a5 { --s: .12; }
.hb-thumbs button[aria-current="true"] .hp-frame { outline: 3px solid var(--tinte); outline-offset: 2px; }
.hb-loading { opacity: .55; transition: opacity .2s; }
.hb-price { background: var(--nacht); color: #fff; border-radius: 22px; padding: 18px 20px; display: grid; gap: 8px; }
.hb-price .row { display: flex; justify-content: space-between; gap: 10px; font-size: .95rem; opacity: .9; }
.hb-price .sum { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed rgba(255,255,255,.35); padding-top: 10px; margin-top: 2px; }
.hb-price .sum strong { font: 800 2rem var(--f-display); color: var(--sonne, #ffc23d); }
.hb-price .hint { font-size: .85rem; opacity: .75; margin: 0; }
.hb-price .btn { margin-top: 6px; }
.hb-how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: h; }
.hb-how div { background: #fff; border-radius: 18px; padding: 18px; box-shadow: 0 0 0 1px var(--line); counter-increment: h; position: relative; }
.hb-how div::before { content: counter(h); position: absolute; top: -12px; left: 16px; width: 30px; height: 30px; border-radius: 10px; background: var(--sonne, #ffc23d); display: grid; place-items: center; font: 800 1rem var(--f-display); color: var(--nacht); transform: rotate(-6deg); }
.hb-how b { display: block; font-family: var(--f-display); color: var(--nacht); font-size: 1.08rem; margin: 6px 0 4px; }
.hb-how span { color: var(--muted); font-size: .94rem; }

/* QR-Zielseite (Handy) */
.hq-page { max-width: 640px; margin: 0 auto; }
.hq-card { background: #fff; border-radius: 22px; box-shadow: 0 0 0 1px var(--line), 0 14px 30px -24px rgba(26,33,64,.5); padding: 20px; }
.hq-top { display: flex; gap: 14px; align-items: center; }
.hq-top .kompi { width: 86px; height: auto; flex: none; }
.hq-q { font-size: 1.15rem; color: var(--nacht); white-space: pre-line; background: var(--papier, #fffdf7); border-radius: 16px; padding: 14px 16px; box-shadow: inset 0 0 0 1px var(--line); margin: 14px 0; }
.hq-step { display: none; margin-top: 12px; padding: 14px 16px; border-radius: 16px; background: var(--sonne-soft, #fff3d1); animation: hbIn .3s ease; }
.hq-step.on { display: block; }
.hq-step.sol { background: #e9f7f0; }
.hq-step ol { margin: 6px 0 0; padding-left: 22px; }
.hq-ans { margin-top: 10px; font: 800 1.2rem var(--f-display); color: var(--gruen-dark, #1b8656); }
.hq-opts { display: grid; gap: 8px; margin: 10px 0; }
.hq-opts button { text-align: left; border: 2px solid var(--line); background: #fff; border-radius: 14px; padding: 10px 14px; font: inherit; cursor: pointer; display: flex; gap: 10px; align-items: center; color: var(--nacht); }
.hq-opts button b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f1f3f8; flex: none; }
.hq-opts button.right { border-color: var(--gruen, #27ae73); background: #e9f7f0; }
.hq-opts button.wrong { border-color: var(--rot, #ef5350); background: #fde8e7; }
.hq-pager { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.hq-words { width: 100%; border-collapse: collapse; }
.hq-words td { padding: 8px 6px; border-bottom: 1px solid var(--line); }
.hq-words td:first-child { font-weight: 700; color: var(--nacht); }
.hq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hq-list a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line); text-decoration: none; color: var(--nacht); }
.hq-list a b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c, var(--tinte)); color: #fff; flex: none; font-family: var(--f-display); }
.hq-list small { color: var(--muted); display: block; }

/* Meine Hefte und Admin */
.hm-list { display: grid; gap: 14px; }
.hm-item { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; background: #fff; border-radius: 20px; padding: 14px 18px; box-shadow: 0 0 0 1px var(--line); }
.hm-item .hp-frame { --s: .2; border-radius: 3px; overflow: hidden; box-shadow: 0 6px 14px -8px rgba(26,33,64,.5); }
.hm-item .hp-frame.a5 { --s: .28; }
.hm-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: .85rem; background: #f1f3f8; color: var(--nacht); }
.hm-status.s-versendet { background: #e1f5eb; color: #0f5132; } .hm-status.s-bezahlt, .hm-status.s-im_druck { background: var(--sonne-soft, #fff3d1); color: #6b4a00; }
.hm-status.s-storniert { background: #fde8e7; color: #7a1d1b; }

/* Druckansicht */
.hp-print-body { margin: 0; background: #e9ebf2; font-family: "Atkinson", sans-serif; }
.hp-toolbar { position: sticky; top: 0; z-index: 5; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 16px; background: #1a2140; color: #fff; }
.hp-toolbar a { color: #fff; }
.hp-toolbar button { border: 0; border-radius: 10px; padding: 8px 14px; font-weight: 700; background: #ffc23d; color: #3b2a00; cursor: pointer; }
.hp-toolbar .lbl { background: #fff; color: #1a2140; border-radius: 10px; padding: 6px 12px; font-size: .9rem; }
.hp-sheets { display: grid; justify-content: center; gap: 10mm; padding: 10mm 0; }
.hp-sheets .hp { box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 16px 30px -14px rgba(26,33,64,.4); }

@media (max-width: 980px) {
  .hb-hero .wrap, .hb-grid { grid-template-columns: minmax(0, 1fr); }
  .hb-preview { position: static; order: -1; }
  .hb-how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb-stack { height: 360px; }
  .hb-stack .hp-frame { --s: .36; }
}
@media (max-width: 560px) {
  .hb-kinds, .hb-row { grid-template-columns: minmax(0, 1fr); }
  .hb-covers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hb-how { grid-template-columns: minmax(0, 1fr); }
  .hb-stack { height: 300px; }
  .hb-stack .hp-frame { --s: .28; }
  .hb-stack .hp-frame:nth-child(2) { left: 46%; }
  .hb-qrdemo { max-width: 200px; font-size: .85rem; }
  .hm-item { grid-template-columns: auto 1fr; }
  .hm-item > :last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .hb-book .hp-frame, .hq-step { animation: none; } .hb-stack .hp-frame { transition: none; } }

@media print {
  .hp-toolbar { display: none !important; }
  .hp-print-body { background: #fff; }
  .hp-sheets { display: block; padding: 0; }
  .hp-sheets .hp { box-shadow: none; break-after: page; page-break-after: always; margin: 0; }
}