/* Startseite schulwebseite.de: ein Schulbuch für Erwachsene.
   Weiße Buchseiten auf petrolfarbenem Einband, Griffmarken am rechten Rand. */

@font-face { font-family: "Barlow"; src: url(fonts/Barlow-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fonts/Barlow-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url(fonts/AtkinsonHyperlegibleNext.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Playwrite DE Grund"; src: url(fonts/PlaywriteDEGrund.ttf) format("truetype"); font-weight: 100 400; font-display: swap; }

:root {
  --einband: #0E7C86;
  --einband-tief: #0A5A62;
  --papier: #FFFFFF;
  --tinte: #1B1F23;
  --grau: #4A545C;
  --linie: #C9D0D6;
  --aufgabe: #E3F4F5;
  --merke: #FFF1A8;
  --marker: #FFE14D;
  --fueller: #1F3FA6;
  --rotstift: #C8102E;
  --bleistift: #5A6168;
  --k1: #C2185B;
  --k2: #F28C00;
  --k3: #5B4BB7;
  --k4: #257A36;
  --k5: #1B5FC1;
  --k6: #1B1F23;
  --k7: #FFE14D;
  --k8: #8FD9DE;
  --k9: #C8361F;
  --schule: #1D5A3A;
  --titel: "Barlow", "Segoe UI", Arial, sans-serif;
  --text: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --hand: "Playwrite DE Grund", "Segoe Print", "Comic Sans MS", cursive;
  --leicht: cubic-bezier(.16, 1, .3, 1);
  --haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M4 14c3 2 5 5 7 8 4-8 8-13 12-17' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scrollbar-color: var(--einband-tief) var(--einband); }
body { margin: 0; background: var(--einband); color: var(--tinte); font: 1.1875rem/1.55 var(--text); -webkit-text-size-adjust: 100%; }
::selection { background: var(--marker); color: var(--tinte); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; border-radius: 3px; }
input, select, button { font: inherit; color: inherit; caret-color: var(--k1); }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: absolute; left: 12px; top: -80px; z-index: 30; background: var(--papier); padding: 12px 18px; border-radius: 6px; font-weight: 700; }
.sprung:focus { top: 12px; }

/* ---------- Tisch, Buch, Griffmarken ---------- */
.leiste { display: none; }
.tisch { display: grid; grid-template-columns: minmax(0, 1fr) 152px; align-items: start; max-width: 1500px; margin: 0 auto; padding: 32px 0 0 32px; }
.buch { grid-column: 1; grid-row: 1; display: grid; gap: 48px; min-width: 0; }

.marken { grid-column: 2; grid-row: 1; position: sticky; top: 64px; margin-top: 76px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.marken a { display: flex; align-items: center; width: 124px; min-height: 52px; padding: 8px 8px 8px 14px; background: var(--c); color: #fff; font: 700 1.0625rem/1.15 var(--titel); text-decoration: none; border-radius: 0 10px 10px 0; box-shadow: inset 9px 0 9px -7px rgba(0, 0, 0, .32); transition: width .25s var(--leicht); }
.marken a.hell { color: var(--tinte); }
.marken .nur-schmal { display: none; }
.marken a:hover { width: 134px; }
.marken a[aria-current] { width: 144px; }
.marken a:focus-visible { outline-color: #fff; }

.bogen { --kf: #fff; position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--papier); border-radius: 5px; scroll-margin-top: 24px;
  box-shadow: 0 3px 0 #E6EAED, 0 4px 0 #B9C2C9, 0 7px 0 #F1F3F5, 0 8px 0 #B9C2C9, 0 22px 44px rgba(2, 40, 45, .38); }
.bogen::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 84px; margin-left: -42px; pointer-events: none;
  background: linear-gradient(90deg, rgba(20, 30, 40, 0), rgba(20, 30, 40, .07) 42%, rgba(20, 30, 40, .16) 50%, rgba(20, 30, 40, .07) 58%, rgba(20, 30, 40, 0)); }
.bogen.hell { --kf: var(--tinte); }
.bogen.klapp { grid-template-columns: 1fr; }
.bogen.klapp::after { display: none; }

.seite { display: flex; flex-direction: column; min-width: 0; padding: 26px clamp(28px, 4.4vw, 68px) 22px; }
.seite > * + * { margin-top: 1.1rem; }

.kopf { display: flex; justify-content: space-between; gap: 16px; font-size: 1rem; color: var(--grau); margin-bottom: 1.2rem; }
.kopf > :last-child:not(:first-child) { text-align: right; }
.kopf > span:only-child::before, .kopf > span + span:last-child::after { content: ""; display: inline-block; width: 12px; height: 12px; background: var(--k); border-radius: 2px; }
.kopf > span:only-child::before { margin-right: 10px; }
.kopf > span + span:last-child::after { margin-left: 10px; }
/* Logo: das Buch mit Griffmarken (logo/zeichen.svg) und der Name in Barlow */
.wortmarke { display: inline-flex; align-items: baseline; gap: .3em; font: 700 1.3125rem/1 var(--titel); color: var(--tinte); text-decoration: none; letter-spacing: -.01em; }
.wortmarke .zeichen { position: relative; top: .104em; width: 1.66em; height: 1.66em; flex: none; }
/* Schriftzug */
.wortmarke .wm-name { font: 700 1em/1 var(--text); letter-spacing: -.015em; color: var(--einband-tief); }
.wortmarke:hover .wm-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.leiste .wm-text { gap: 4px; }
.leiste .wm-von { font-size: .875rem; }
.leiste-knoepfe { display: flex; align-items: center; gap: 10px; flex: none; }
.nur-eng { display: none; }
.wortmarke.gross { font-size: 1.75rem; gap: .5em; }
.wortmarke.gross .zeichen { width: 1.75em; height: 1.75em; }
.wm-text { display: grid; gap: 6px; }
.wm-von { font: 400 .9375rem/1 var(--text); color: var(--grau); letter-spacing: 0; }
.kopf.start { align-items: center; min-height: 50px; margin-bottom: 1rem; }
.kopf.rechts { justify-content: flex-end; gap: 10px; }
.anmelden { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 13px; background: var(--papier); color: var(--tinte); border: 2px solid var(--tinte); border-radius: 9px; font: 700 1.0625rem/1 var(--titel); text-decoration: none; transition: background-color .15s, color .15s; }
.anmelden:hover { background: var(--tinte); color: #fff; }
.anmelden.voll { background: var(--tinte); color: #fff; padding: 0 16px; }
.anmelden.voll:hover { background: #33393F; }
.anmelden svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.fuss { margin-top: auto !important; padding-top: 2.2rem; display: flex; }
.fuss.rechts { justify-content: flex-end; }
.fuss.beide { justify-content: space-between; }
.folio { display: inline-grid; place-items: center; min-width: 40px; height: 32px; padding: 0 8px; background: var(--k); color: var(--kf); font: 700 1.0625rem/1 var(--titel); font-variant-numeric: tabular-nums; border-radius: 4px; }

/* ---------- Schrift ---------- */
h1 { font: 700 clamp(2.5rem, 4.2vw, 3.875rem)/1.02 var(--titel); letter-spacing: -.012em; text-wrap: balance; }
mark { color: inherit; background: linear-gradient(transparent 10%, var(--marker) 10% 90%, transparent 90%); padding: 0 .12em; margin: 0 -.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.vorspann { font-size: 1.25rem; line-height: 1.45; max-width: 34em; }
.titel { font: 700 clamp(2rem, 3.2vw, 2.875rem)/1.06 var(--titel); letter-spacing: -.01em; text-wrap: balance; }
.seite h3 { font: 700 1.5rem/1.2 var(--titel); }
.seite > p, .seite li, .seite dd { max-width: 36em; }
.seite > p.kopf, .seite > p.fuss { max-width: none; }
.seite > h3:not(:first-child) { margin-top: 2rem; }

/* ---------- Aufgabe, Lücken, Knöpfe ---------- */
.aufgabe { background: var(--aufgabe); border-radius: 12px; padding: 24px 26px 26px; margin-top: 1.7rem !important; }
.aufgabe > h2, .aufgabe > h3, .aufgabe legend { display: flex; align-items: center; gap: 14px; font: 700 1.5rem/1.2 var(--titel); color: var(--einband-tief); padding: 0; }
.nr { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--einband); color: #fff; font: 700 1.375rem/1 var(--titel); }

.lueckentext { font-size: 1.375rem; line-height: 2.5; margin-top: .5rem; }
.luecke { font: 400 1.25rem/1.3 var(--hand); color: var(--fueller); background: var(--papier); border: 0; border-bottom: 3px solid var(--einband); border-radius: 0; padding: 4px 12px 6px; min-height: 48px; width: var(--b, auto); vertical-align: baseline; }
select.luecke { padding-right: 6px; cursor: pointer; }
.luecke:hover { border-bottom-color: var(--einband-tief); background: #F7FCFC; }
.luecke:focus-visible { outline-offset: 2px; }
.luecke[aria-invalid="true"] { border-bottom-color: var(--rotstift); }

.fehler { color: #9B0D24; font-weight: 700; font-size: 1.0625rem; margin-top: .5rem; }

.knopf { display: inline-flex; align-items: center; gap: 12px; margin-top: 1.1rem; padding: 14px 26px; min-height: 56px; background: var(--k1); color: #fff; font: 700 1.3125rem/1.15 var(--titel); border: 0; border-radius: 9px; text-decoration: none; cursor: pointer; box-shadow: 0 3px 0 #8A0F40; transition: transform .15s var(--leicht), box-shadow .15s var(--leicht), background-color .15s; }
.knopf:hover { background: #A8134D; }
.knopf:active { transform: translateY(3px); box-shadow: 0 0 0 #8A0F40; }
.knopf.tinte { background: var(--tinte); box-shadow: 0 3px 0 #000; }
.knopf.tinte:hover { background: #33393F; }
.pfeil { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--leicht); }
.knopf:hover .pfeil { transform: translateX(4px); }

/* ---------- Aufgabe „Muster und Farbe“ mit Schaufenster ---------- */
.wahl-titel { margin-top: 1.1rem; font: 700 1.125rem/1.2 var(--titel); }
.wahl, .tupfer { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: .55rem; }
.wahl label, .tupfer label { position: relative; cursor: pointer; }
.wahl input, .tupfer input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wahl span, .tupfer .t-frei { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; background: var(--papier); border-radius: 9px; box-shadow: inset 0 0 0 2px var(--einband); font: 700 1.1875rem/1 var(--titel); transition: transform .15s var(--leicht); }
.wahl label:hover span, .tupfer label:hover span { transform: translateY(-2px); }
.wahl input:checked + span, .tupfer input:checked + .t-frei { background: var(--einband-tief); box-shadow: none; color: #fff; }
.wahl input:focus-visible + span, .tupfer input:focus-visible + span { outline: 3px solid var(--tinte); outline-offset: 3px; }
.tupfer span:not(.t-frei):not(.vh) { display: block; width: 48px; height: 48px; border-radius: 50%; background: var(--t); box-shadow: inset 0 0 0 4px var(--aufgabe); transition: transform .15s var(--leicht); }
.tupfer input:checked + span:not(.t-frei) { box-shadow: inset 0 0 0 4px var(--aufgabe), 0 0 0 3px var(--tinte); }
.eigenfarbe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 1rem; font-weight: 700; }
.eigenfarbe span { flex: 1 1 15em; font-weight: 400; font-size: 1rem; line-height: 1.4; }
/* Acht Muster brauchen die ganze Breite: Die Schulfarbe steht darunter statt daneben. */
.wahl-paar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem 0; }
.klapp .aufgabe { margin-bottom: 1.6rem; }
.klapp .loesung-zeile .zweit { font-size: 1rem; min-height: 44px; display: inline-flex; align-items: center; }
.pfeil { flex: none; }
.daneben { flex: 1 1 22em; max-width: 34em; }
.eigenfarbe input { width: 72px; height: 48px; padding: 3px; background: var(--papier); border: 2px solid var(--einband); border-radius: 9px; cursor: pointer; }
.schau { border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 2px var(--tinte), 0 12px 28px rgba(20, 40, 50, .16); }
.schau-leiste { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; background: var(--tinte); color: #fff; font-size: .875rem; }
.schau-leiste i { width: 9px; height: 9px; border-radius: 50%; background: #9AA4AC; }
.schau-leiste b { flex: 1; min-width: 0; margin-left: 8px; padding: 2px 10px; background: #fff; color: var(--tinte); border-radius: 4px; font-weight: 400; overflow-wrap: anywhere; }
.schau-fenster { position: relative; height: 420px; overflow: hidden; background: #fff; }
.schau-fenster iframe { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; border: 0; transform-origin: 0 0; }
@media (prefers-reduced-motion: reduce) { .wahl label:hover span, .tupfer label:hover span { transform: none; } }

/* ---------- Lösung und Korrektur ---------- */
.loesung-zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; }
.loesung { font: 700 1.5rem/1.2 var(--titel); color: var(--kt, var(--k)); }
.korrektur { display: flex; align-items: center; gap: 6px; flex: none; color: var(--rotstift); font: 400 1.375rem/1 var(--hand); transform: rotate(-5deg); }
.korrektur svg { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.korrektur path { stroke-dasharray: 70; stroke-dashoffset: 70; }
.korrektur.an path { animation: haken .55s var(--leicht) .1s forwards; }
.korrektur span { opacity: 0; }
/* Der Platz für den Haken ist von Anfang an reserviert, damit beim Lösen nichts verrutscht. */
.korrektur[hidden] { display: flex !important; visibility: hidden; }
.korrektur.an span { animation: schrift .3s ease-out .5s forwards; }
@keyframes haken { to { stroke-dashoffset: 0; } }
@keyframes schrift { to { opacity: 1; } }

.abb figcaption { font-size: .9375rem; line-height: 1.4; color: var(--grau); margin-top: 10px; }
.abb.klein { margin-top: 2rem; }
.abb.klein img { border-radius: 10px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.weiter { margin-top: 1.5rem !important; }
.weiter + p { margin-top: 0; }

/* ---------- Kleine Schulwebsite ---------- */
.mini { border-radius: 10px; overflow: hidden; background: var(--papier); box-shadow: 0 0 0 2px var(--linie), 0 10px 24px rgba(20, 40, 50, .12); font-size: 1.0625rem; line-height: 1.45; }
.mini-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; background: var(--schule); color: #fff; padding: 14px 20px; }
.mini-kopf strong { font: 700 1.25rem/1.2 var(--titel); }
.mini-kopf span { font-size: .9375rem; color: #fff; }
.mini-hinweis { background: var(--marker); padding: 14px 20px; min-height: 54px; font: 600 1.25rem/1.3 var(--titel); }
.mini-hinweis.leer { background: var(--papier); color: var(--grau); font: 400 1.0625rem/1.529 var(--text); box-shadow: inset 0 0 0 2px var(--papier), inset 0 0 0 4px var(--linie); border-radius: 0; }
.mini-hinweis.frisch { animation: frisch .9s var(--leicht); }
@keyframes frisch { from { background: #fff; clip-path: inset(0 100% 0 0); } to { background: var(--marker); clip-path: inset(0 0 0 0); } }
#mini-start img { width: 100%; aspect-ratio: 16 / 8.2; object-fit: cover; }
.mini-zeile { padding: 14px 20px; }
.mini-block { padding: 16px 20px 18px; }
.mini-block + .mini-block { box-shadow: inset 0 2px 0 #E9EDF0; }
.mini-block h4 { font: 700 1.1875rem/1.2 var(--titel); color: var(--schule); margin-bottom: 8px; }
.mini-liste { list-style: none; display: grid; gap: 6px; }
.mini-liste b { display: inline-block; min-width: 6.4em; font-weight: 700; }
.b-titelbild { position: relative; }
.b-titelbild img { width: 100%; aspect-ratio: 16 / 7.5; object-fit: cover; }
.b-titelbild p { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 20px 14px; color: #fff; font: 700 1.5rem/1.15 var(--titel); background: rgba(8, 28, 18, .84); }
.mini-beitraege { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mini-beitraege img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; margin-bottom: 8px; }
.mini-beitraege span { font: 600 1.0625rem/1.25 var(--titel); }
.mini-tabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mini-tabelle th { text-align: left; font-size: .9375rem; color: var(--grau); font-weight: 700; padding: 0 10px 6px 0; }
.mini-tabelle td { padding: 8px 10px 8px 0; vertical-align: top; }
.mini-tabelle tbody tr:nth-child(odd) td { background: #F1F6F3; }
.mini-tabelle td:first-child, .mini-tabelle th:first-child { padding-left: 10px; }
.mini-leer { padding: 28px 20px; color: var(--grau); }
.mini [data-b].neu { animation: einlegen .45s var(--leicht); }
@keyframes einlegen { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ---------- So geht es ---------- */
.schritte { list-style: none; counter-reset: schritt; display: grid; gap: 1.6rem; margin-top: 1.8rem !important; }
.schritte li { counter-increment: schritt; display: grid; grid-template-columns: 52px 1fr; column-gap: 18px; }
.schritte li::before { content: counter(schritt); grid-row: 1 / 3; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--k); color: var(--kf); font: 700 1.625rem/1 var(--titel); }
.schritte h3 { align-self: center; }
.schritte p { grid-column: 2; margin-top: 6px; }

.schema { background: #F1F3F5; border-radius: 10px; padding: 20px; display: grid; gap: 10px; }
.schema-titel { font: 700 1.25rem/1.2 var(--titel); margin-bottom: 4px; }
.schema-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; background: var(--papier); border-radius: 8px; padding: 14px 16px; font: 600 1.1875rem/1.2 var(--titel); box-shadow: 0 1px 2px rgba(20, 30, 40, .14); }
.schema-zeile em { font: 400 .9375rem/1.3 var(--text); color: var(--tinte); }
.schema-zeile.neu { background: var(--marker); }
.schema-plus { border-radius: 8px; padding: 14px 16px; font: 600 1.1875rem/1.2 var(--titel); color: var(--einband-tief); box-shadow: inset 0 0 0 2px var(--einband); background: var(--papier); }

.merke { background: var(--merke); border-radius: 12px; padding: 20px 24px 22px; margin-top: 1.7rem !important; }
.merke h3 { font-size: 1.3125rem; margin-bottom: 4px; }

/* ---------- Bausteine ---------- */
.kreuze { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; margin-top: 14px; }
.kreuze label { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; font-size: 1.125rem; }
.kreuze input { appearance: none; flex: none; width: 30px; height: 30px; margin: 0; background: var(--papier); border: 2.5px solid var(--einband-tief); border-radius: 5px; cursor: pointer; display: grid; place-items: center; }
.kreuze input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M6 7c6 5 12 11 18 17M24 6C18 12 12 18 6 24' fill='none' stroke='%231F3FA6' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: 100% 100%; }
.kreuze label:hover input { background: #F7FCFC; }

/* ---------- Eine Woche ---------- */
.breit { max-width: 44em !important; }
.legende { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 1.5rem !important; font: 600 1.0625rem/1.2 var(--titel); }
.legende li { display: flex; align-items: center; gap: 10px; max-width: none; }
.legende li::before { content: ""; width: 22px; height: 22px; border-radius: 5px; background: var(--r); }
.r-sek { --r: var(--einband); }
.r-lehr { --r: var(--k3); }
.r-koll { --r: var(--k5); }
.r-leit { --r: var(--k1); }

.plan { display: grid; grid-template-columns: 44px repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 1.4rem !important; --h: 104px; }
.plan-std { display: grid; grid-template-rows: 46px repeat(5, var(--h)); gap: 8px; font: 700 1.375rem/1 var(--titel); color: var(--grau); }
.plan-std span { display: grid; place-items: center end; padding-right: 6px; }
.tag { display: grid; grid-template-rows: 46px auto; gap: 8px; min-width: 0; }
.tag h3 { display: grid; place-items: center; background: var(--tinte); color: #fff; border-radius: 8px; font-size: 1.1875rem; }
.tag ol { list-style: none; display: grid; grid-template-rows: repeat(5, var(--h)); gap: 8px;
  background: repeating-linear-gradient(#EEF1F3 0 var(--h), transparent var(--h) calc(var(--h) + 8px)); border-radius: 8px; }
.tag li { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-width: 0; max-width: none; padding: 12px 14px; border-radius: 8px; background: var(--r); color: #fff; overflow: hidden; }
.tag li strong { font: 700 1.0625rem/1.2 var(--text); hyphens: auto; }
@media (min-width: 1100px) { .tag li::before { content: attr(data-s) ". Stunde: "; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.tag li span { font-size: .9375rem; line-height: 1.25; }
.tag li[data-s="1"] { grid-row: 1; } .tag li[data-s="2"] { grid-row: 2; } .tag li[data-s="3"] { grid-row: 3; } .tag li[data-s="4"] { grid-row: 4; } .tag li[data-s="5"] { grid-row: 5; }
.plan-hinweis { color: var(--grau); font-size: 1.0625rem; max-width: none !important; }

/* ---------- Preise, Schulträger ---------- */
.haken, .punkte { list-style: none; display: grid; gap: 12px; margin-top: 1.5rem !important; }
.haken li, .punkte li { position: relative; padding-left: 38px; }
.haken li::before { content: ""; position: absolute; left: 0; top: .15em; width: 26px; height: 26px; background: var(--kt, var(--k)); -webkit-mask: var(--haken) center / contain no-repeat; mask: var(--haken) center / contain no-repeat; }
.punkte li::before { content: ""; position: absolute; left: 6px; top: .5em; width: 12px; height: 12px; background: var(--k); border-radius: 2px; }
.punkte { margin-top: .8rem !important; }

.preis { position: relative; margin-top: 0 !important; }
.preis-zeile { font: 700 1.75rem/1.3 var(--titel); color: var(--einband-tief); }
.preis-luecke { display: inline-block; min-width: 2.6em; padding: 0 .35em .05em; text-align: center; background: var(--papier); border-bottom: 3px solid var(--einband); border-radius: 0; margin: 0 4px; font: 400 1.875rem/1.25 var(--hand); color: var(--fueller); }
.preis-jahr { font-weight: 700; margin-top: 10px; text-wrap: balance; }
.preis-kurz { margin-top: 1.1rem !important; }
.preis-kurz strong { font: 700 1.3125rem/1.2 var(--titel); }
.preis-kurz + .knopfzeile { margin-top: .7rem !important; }
.notizen { list-style: none; display: grid; gap: 4px; margin-top: .4rem !important; font: 400 1.125rem/1.4 var(--hand); color: var(--bleistift); transform: rotate(-1deg); transform-origin: left; }
.notizen li::before { content: "– "; }
.klein { font-size: 1rem; line-height: 1.45; color: var(--grau); }
/* Zusatzangebote mit Preis: eine Fläche mit Wechselstreifen wie der Steckbrief */
.dazu { margin-top: .9rem !important; border-radius: 12px; overflow: hidden; }
.dazu div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: baseline; padding: 14px 20px 16px; background: #F1F3F5; }
.dazu div:nth-child(even) { background: #E4E8EC; }
.dazu dt { font: 700 1.3125rem/1.2 var(--titel); }
.dazu .kostet { font: 700 1.5rem/1.1 var(--titel); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.dazu .kostet small { font: 400 1rem/1 var(--text); color: var(--grau); }
.dazu dd:last-child { grid-column: 1 / -1; font-size: 1.0625rem; line-height: 1.5; }
.dazu + .klein { margin-top: .7rem !important; }
.preis + .bleistift { margin-top: .6rem !important; }
p + .preis { margin-top: 1.3rem !important; }
.nie-trennen { white-space: nowrap; }
.bleistift { font: 400 1.125rem/1.3 var(--hand); color: var(--bleistift); transform: rotate(-2deg); transform-origin: left; margin-top: .3rem !important; }

.fakten { display: grid; gap: 1.3rem; margin-top: 1.8rem !important; }
.fakten dt { font: 700 1.3125rem/1.2 var(--titel); margin-bottom: 2px; }
.steck-titel { font: 700 1.5rem/1.2 var(--titel); }
.steckbrief { margin-top: 1.2rem !important; border-radius: 12px; overflow: hidden; }
.steckbrief div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 14px 20px; background: #F1F3F5; }
.steckbrief div:nth-child(even) { background: #E4E8EC; }
.steckbrief dt { color: var(--tinte); }
.steckbrief dd { font: 700 1.625rem/1 var(--titel); font-variant-numeric: tabular-nums; text-align: right; }
.quelle { font-size: .9375rem; line-height: 1.45; color: var(--grau); }

/* ---------- Überblick: Was man bekommt ---------- */
.bekommen { font: 700 1.5rem/1.2 var(--titel); margin-top: 1.3rem !important; }
.haken.eng { gap: 8px; margin-top: .7rem !important; }
.knopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; margin-top: 1.2rem !important; max-width: none !important; }
.knopfzeile .knopf { margin-top: 0; }
.zweit { font: 700 1.1875rem/1.2 var(--titel); padding: 12px 0; }
.lnk { background: none; border: 0; padding: 10px 0; font: 700 1.0625rem/1.2 var(--text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }

/* ---------- Film: nachgestellte Bedienung ---------- */
.film { margin-top: .9rem !important; }
.buehne { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 2px var(--linie), 0 10px 24px rgba(20, 40, 50, .12); }
.f-bild { position: relative; background: #EEF1F3; font-size: 1rem; line-height: 1.3; }
.buehne:not(.laeuft):not(.fertig) .f-bild { filter: saturate(.45) brightness(.7); }
.buehne.pausiert .f-zeiger { opacity: .45; }
.f-leiste { display: flex; align-items: center; gap: 12px; background: var(--papier); padding: 10px 14px; box-shadow: 0 1px 0 var(--linie); }
.f-leiste b { font: 700 1rem/1.2 var(--text); margin-right: auto; }
.f-status { font-size: 1rem; padding: 4px 10px; border-radius: 5px; white-space: nowrap; }
.f-status.offen { background: var(--marker); }
.f-status.fertig { background: #D9F0DE; }
.f-pub { background: var(--k1); color: #fff; font: 700 .9375rem/1 var(--text); padding: 10px 14px; border-radius: 7px; transition: transform .12s; }
.gedrueckt { transform: scale(.94); }
.f-flaeche { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; padding: 18px 18px 22px; }
.f-edit { min-height: 26.25rem; }
.f-edit, .f-vorschau { display: grid; gap: 10px; align-content: start; min-width: 0; }
/* Die Szenen des Films liegen übereinander, damit die Bühne beim Wechsel nicht springt. */
.f-szene { grid-area: 1 / 1; display: grid; gap: 10px; align-content: start; min-width: 0; visibility: hidden; }
.f-szene.an { visibility: visible; }
.f-plus { border: 2px dashed #5F6B74; border-radius: 7px; padding: 12px 14px; font: 700 1rem/1.2 var(--text); color: var(--grau); transition: transform .12s; }
.f-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: var(--aufgabe); border-radius: 7px; padding: 10px; }
.f-wahl span { background: var(--papier); border-radius: 6px; padding: 10px 12px; font: 700 .9375rem/1.2 var(--text); box-shadow: 0 1px 2px rgba(20, 30, 40, .14); transition: transform .12s; }
.f-farben { display: flex; gap: 14px; margin-top: 12px; padding: 4px; }
.f-farben i { width: 32px; height: 32px; border-radius: 50%; background: var(--c); transition: transform .12s; }
.f-farben i.an { box-shadow: 0 0 0 3px var(--papier), 0 0 0 6px var(--tinte); }
.f-hs { font-size: 1rem; padding: 9px 12px; background: #F1F4F5; }
.f-titel { font: 700 1rem/1.2 var(--text); }
.f-zeile { background: var(--papier); border-radius: 7px; padding: 14px 14px; font: 600 1.0625rem/1.2 var(--titel); box-shadow: 0 1px 2px rgba(20, 30, 40, .14); transition: transform .12s; }
.f-zeile small { display: block; margin-top: 3px; font: 400 1rem/1.3 var(--text); color: var(--grau); }
.f-zeile.offen small { display: none; }
.f-zeile.geaendert { background: var(--marker); }
.f-feld { margin-top: 8px; display: grid; gap: 4px; font: 400 1rem/1.3 var(--text); }
.f-eingabe { display: block; min-height: 3.4em; background: var(--papier); border: 2px solid var(--einband); border-radius: 5px; padding: 6px 8px; font-size: 1rem; }
.f-eingabe.tippt::after { content: ""; display: inline-block; width: 2px; height: 1.05em; background: var(--k1); vertical-align: -.15em; margin-left: 1px; }
.f-handy { background: var(--papier); border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 5px var(--tinte); margin: 5px; }
.f-hk { background: var(--schule); color: #fff; font: 700 1rem/1.2 var(--text); padding: 10px 12px; }
.f-hh { background: var(--marker); font: 700 1rem/1.3 var(--text); padding: 9px 12px; }
.f-handy img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.f-hz { font-size: 1rem; padding: 9px 12px; }
.f-zeiger { position: absolute; left: 0; top: 0; fill: var(--tinte); stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; opacity: 0; transition: transform .85s cubic-bezier(.45, 0, .2, 1); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
.laeuft .f-zeiger { opacity: 1; }
.film-start { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 14px 28px 14px 22px; background: var(--tinte); color: #fff; font: 700 1.3125rem/1.1 var(--titel); border: 0; border-radius: 40px; cursor: pointer; box-shadow: 0 8px 22px rgba(10, 20, 30, .4); white-space: nowrap; }
.film-start svg { fill: currentColor; }
.film-start:hover { background: #33393F; }
.film-start:focus-visible { outline-offset: 4px; outline-color: var(--tinte); box-shadow: 0 0 0 3px #fff, 0 8px 22px rgba(10, 20, 30, .4); }
.film-text { font-weight: 700; margin-top: 12px; min-height: 3.1em; }
.film-zeile { display: flex; align-items: center; gap: 18px; min-height: 48px; margin-top: 4px; }
.film-knopf { min-height: 44px; padding: 0 18px; background: var(--papier); color: var(--tinte); border: 2px solid var(--tinte); border-radius: 9px; font: 700 1.0625rem/1 var(--titel); cursor: pointer; }
.film-knopf:hover { background: var(--tinte); color: #fff; }
.film-zeile .lnk { min-height: 44px; }

/* ---------- Referenzen ---------- */
.namensliste { list-style: none; margin-top: 1.4rem !important; border-radius: 12px; overflow: hidden; }
.namensliste li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: baseline; gap: 2px 20px; padding: 11px 18px; background: #F1F3F5; max-width: none; }
.namensliste li:nth-child(even) { background: #E4E8EC; }
.namensliste strong { font: 700 1.1875rem/1.25 var(--titel); }
.namensliste span { font-size: 1rem; color: var(--tinte); }
.ref-hinweis { margin-top: .5rem !important; }
.ref-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; margin-top: 1.1rem !important; }
/* Eine Verknüpfung je Schule: der Name. Sie reicht über das ganze Bild. */
.ref-bilder figure { position: relative; }
.ref-bilder img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 0 0 2px var(--linie); transition: box-shadow .15s; }
.ref-bilder figure:hover img, .ref-bilder figure:focus-within img { box-shadow: 0 0 0 3px var(--tinte); }
.ref-bilder figcaption { display: grid; gap: 1px; margin-top: 8px; line-height: 1.3; }
.ref-bilder a { font: 700 1.0625rem/1.25 var(--titel); }
.ref-bilder a::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.ref-bilder figcaption span { font-size: 1rem; color: var(--tinte); }

/* ---------- Rückruf ---------- */
.feld { margin-top: 16px; }
.feld label { display: block; font-weight: 700; margin-bottom: 4px; }
.feld input, .feld select { display: block; width: 100%; min-height: 52px; padding: 8px 14px; background: var(--papier); border: 2px solid #5F6B74; border-radius: 7px; }
.feld input { font: 400 1.1875rem/1.3 var(--hand); color: var(--fueller); }
.feld input:hover, .feld select:hover { border-color: var(--tinte); }
.feld input[aria-invalid="true"] { border-color: var(--rotstift); border-width: 3px; }
.danke { margin-top: 16px; background: var(--papier); border-radius: 8px; padding: 14px 18px; font-weight: 700; }

/* ---------- Bestellschein (bestellen.html) ---------- */
@media (min-width: 1100px) { .tisch.ohne { grid-template-columns: minmax(0, 1fr); padding-right: 32px; } }
.schein fieldset { border: 0; min-width: 0; }
.schein .aufgabe { margin-top: 1.2rem !important; }
.schein legend { float: left; width: 100%; padding-bottom: 10px; }
.schein legend + .feld { margin-top: 0; }
.schein legend + * { clear: both; }
.paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
/* Adressen und Kennungen in Druckschrift: Dort zählt jedes Zeichen. */
.schein input[type=email], .schein #b-adr, .schein #b-leit, .schein #b-nr, .schein #b-plz { font: 400 1.125rem/1.3 var(--text); }
.schein select:valid { font-family: var(--hand); color: var(--fueller); }
.schein select option { font-family: var(--text); color: var(--tinte); }
.schein input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--papier) inset; -webkit-text-fill-color: var(--fueller); }
.paar.plz { grid-template-columns: minmax(7.5rem, 1fr) 2.2fr; }
.kreuze.rund input { border-radius: 50%; }
.kurzfassung h2 { font: 700 1.3125rem/1.2 var(--titel); color: var(--einband-tief); }
.kurzfassung .haken { --kt: var(--einband); }
.eingetragen { font: 400 1.1875rem/1.3 var(--hand); color: var(--fueller); }
.zusagen .feld-hilfe { margin: 0 0 10px 42px; }
.summe dd { white-space: nowrap; }
.folge { margin-top: -.5rem; }
.adr-zeile { display: flex; align-items: center; gap: 10px; }
.adr-zeile input { flex: 1 1 0; min-width: 0; }
.adr-zeile span { font-weight: 700; white-space: nowrap; }
.feld-hilfe { font-size: 1rem; line-height: 1.45; color: var(--grau); margin-top: 6px; }
.frei { font-weight: 400; color: var(--grau); }
.feld select[aria-invalid="true"] { border-color: var(--rotstift); border-width: 3px; }
.kreuze.einzeln { grid-template-columns: 1fr; gap: 4px; }
.kreuze.einzeln label { align-items: flex-start; padding: 8px 0; }
.kreuze.einzeln b { font-weight: 700; }
.kreuze input[aria-invalid="true"] { border-color: var(--rotstift); border-width: 3.5px; }
.zusagen { margin-top: 1.4rem; }
.zusagen .fehler { margin: 0 0 8px 42px; }
.sammel { background: #FBE4E8; border-radius: 8px; padding: 12px 16px; margin-top: 1rem; }
.danach { font-weight: 700; margin-top: .8rem; }
.danach + .klein { margin-top: .4rem; }
.schein .fertig h2 { font: 700 1.75rem/1.2 var(--titel); color: var(--einband-tief); }
.schein .fertig > * + * { margin-top: 1rem; }
.schein .fertig h2:focus { outline: none; }
.schein .fertig .korrektur { margin-top: 0; }
.rechts-oben, .klebt { display: grid; gap: 1.1rem; }
.klebt { margin-top: 1.6rem; padding-bottom: 8px; background: var(--papier); }
/* Nur die Rechnung läuft beim Ankreuzen mit. Sie ist kurz genug für jedes übliche Fenster; in sehr niedrigen Fenstern bleibt sie stehen. */
@media (min-width: 1100px) and (min-height: 620px) { .klebt { position: sticky; top: 20px; } }
.zeitleiste { list-style: none; display: grid; }
.zeitleiste li { position: relative; display: grid; gap: 2px; padding: 0 0 22px 36px; max-width: none; }
.zeitleiste li::before { content: ""; position: absolute; left: 4px; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--k); }
.zeitleiste li::after { content: ""; position: absolute; left: 11px; top: 25px; bottom: 0; width: 2px; background: var(--linie); }
.zeitleiste li:last-child { padding-bottom: 0; }
.zeitleiste li:last-child::after { display: none; }
.zeitleiste b { font: 700 1.3125rem/1.2 var(--titel); }
.summe-titel { margin-top: 0; }
.summe { margin-top: 0 !important; }
.summe div, .summe div:nth-child(even) { background: #F1F3F5; }
.summe dd { font-size: 1.375rem; }
.summe .gesamt { background: var(--aufgabe); }
.summe .gesamt dt { font-weight: 700; }
.summe .gesamt dd { font-size: 1.75rem; color: var(--einband-tief); }
@media (max-width: 520px) { .paar, .paar.plz { grid-template-columns: 1fr; } .adr-zeile { gap: 4px; } .adr-zeile span { font-size: 1rem; } }

/* ---------- Rückseite ---------- */
.rueckseite { max-width: 1500px; margin: 0 auto; padding: 56px 32px 64px; color: #fff; font-size: 1.0625rem; display: grid; gap: 12px; }
.rueckseite strong { font: 700 1.3125rem/1 var(--titel); }
.rueckseite span { color: #fff; }
.rueckseite :focus-visible { outline-color: #fff; }
.rueckseite summary { cursor: pointer; font-weight: 700; padding: 10px 0; width: fit-content; }
.rueckseite ul { list-style: none; display: grid; gap: 8px; margin: 6px 0 12px; }
.rueckseite details p { color: #fff; max-width: 46em; }

/* ---------- Schmale Fenster: eine Seite, Inhaltsverzeichnis oben ---------- */
@media (min-width: 1100px) and (max-height: 800px) {
  /* Niedrige Bildschirme: Griffmarken und erste Seite etwas dichter, damit Knopf und letzte Marke sichtbar bleiben. */
  .marken { top: 12px; margin-top: 40px; gap: 4px; }
  .marken a { min-height: 44px; }
  .seite { padding-top: 18px; }
  h1 { font-size: clamp(2.25rem, 3.7vw, 3.25rem); }
  .vorspann { font-size: 1.1875rem; }
}
@media (max-width: 1099px) {
  .wahl-paar { grid-template-columns: minmax(0, 1fr); }
  .leiste { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--papier); box-shadow: 0 2px 10px rgba(2, 40, 45, .3); }
  .leiste .anmelden { min-height: 48px; }
  .inhalt-knopf { min-height: 48px; padding: 8px 18px; background: var(--papier); color: var(--tinte); font: 700 1.0625rem/1 var(--titel); border: 2px solid var(--tinte); border-radius: 9px; cursor: pointer; }
  .inhalt-knopf[aria-expanded="true"] { background: var(--tinte); color: #fff; }
  .tisch { display: block; padding: 16px 0 0; }
  .marken { position: fixed; top: 68px; left: 12px; right: 12px; z-index: 19; margin: 0; gap: 0; padding: 8px; background: var(--papier); border-radius: 12px; box-shadow: 0 16px 40px rgba(2, 40, 45, .5); display: none; }
  .marken.offen { display: flex; }
  .marken a, .marken a:hover, .marken a[aria-current] { width: 100%; min-height: 52px; background: none; color: var(--tinte); box-shadow: none; border-radius: 8px; padding: 8px 12px; gap: 14px; font-size: 1.1875rem; }
  .marken a::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 5px; background: var(--c); }
  .marken a[aria-current] { background: #EEF1F3; }
  .marken .nur-schmal { display: flex; margin-top: 6px; box-shadow: inset 0 2px 0 #E4E8EC; border-radius: 0 0 8px 8px; text-decoration: underline; }
  .marken .nur-schmal::before { display: none; }
  .marken a:focus-visible { outline-color: var(--tinte); }
  .buch { gap: 20px; }
  .bogen { grid-template-columns: 1fr; border-radius: 0; scroll-margin-top: 76px; }
  .bogen::after { display: none; }
  .seite { padding: 24px 20px 20px; }
  .seite + .seite { padding-top: 8px; }
  .kopf, .fuss { display: none; }
  /* Schmal stehen die Schulen nur einmal da: als Bilder mit Namen und Ort. */
  .namensliste { display: none; }
  .seite { padding-bottom: 28px; }
  .plan { display: block; }
  .plan-std { display: none; }
  .tag { display: block; margin-top: 18px; }
  .tag h3 { display: block; background: none; color: var(--tinte); font-size: 1.3125rem; margin-bottom: 8px; }
  .tag ol { display: grid; grid-template-rows: none; background: none; }
  .tag li { grid-row: auto !important; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 4px 12px; }
  .tag li::before { content: attr(data-s) ". Stunde"; flex: 0 0 100%; font-size: .9375rem; }
  .rueckseite { padding: 40px 20px 56px; }
}
@media (max-width: 520px) {
  .nur-breit { display: none; }
  .nur-eng { display: inline; }
  .leiste { padding: 10px 12px; gap: 8px; }
  .leiste .wortmarke { font-size: 1.125rem; }
  .leiste .wm-von { display: none; }
  .leiste-knoepfe { gap: 8px; }
  .leiste .anmelden, .inhalt-knopf { padding: 8px 12px; }
}
@media (max-width: 380px) {
  .leiste .wortmarke { font-size: 1rem; }
}
@media (max-width: 520px) {
  body { font-size: 1.125rem; }
  .kreuze { grid-template-columns: 1fr; }
  .aufgabe { padding: 20px 18px 22px; }
  .lueckentext { font-size: 1.25rem; }
  .knopf { width: 100%; justify-content: center; text-align: center; }
  .steckbrief dd { font-size: 1.375rem; }
  .loesung-zeile { flex-wrap: wrap; }
  .f-flaeche { grid-template-columns: 1fr; gap: 12px; padding: 12px 12px 14px; }
  .f-edit { min-height: 18rem; gap: 8px; }
  .f-handy { min-height: 9.5rem; }
  .f-szene { gap: 8px; }
  .f-zeile { padding: 10px 12px; }
  .f-feld > span:first-child, .f-hz { display: none; }
  .f-pub { padding: 10px 10px; }
  .film-zeile { order: -1; margin: 0 0 10px; }
  .f-handy img { display: none; }
  .f-hh { min-height: 0; }
  .f-leiste b { display: none; }
  .f-status { margin-right: auto; }
  .f-zeile small { display: none; }
  .film-start { font-size: 1.1875rem; padding: 12px 22px 12px 18px; }
  .film { display: flex; flex-direction: column; }
  .film-text { order: -2; margin: 0 0 6px; min-height: 3.1em; }
  .ref-bilder { gap: 16px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}
@media print {
  body { background: #fff; }
  .marken, .leiste { display: none; }
  .bogen { box-shadow: none; break-inside: avoid; }
}

/* Echte Filme aus dem Dashboard (Kapitel Angebot) */
.echtfilm { display: grid; gap: 12px; }
.echtfilm video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px; background: var(--tinte); box-shadow: 0 0 0 2px var(--linie); }
.film-schritt { min-height: 3em; margin: 0; color: var(--grau); font-size: .9375rem; line-height: 1.5; }
.echtfilm video::cue { font: 600 1rem/1.35 "Atkinson Hyperlegible Next", system-ui, sans-serif; color: #fff; background: rgba(27, 31, 35, .94); }
.filmwahl { display: flex; flex-wrap: wrap; gap: 8px; }
.filmwahl button { min-height: 44px; padding: 0 14px; background: var(--papier); border: 2px solid var(--grau); border-radius: 8px; font-weight: 700; cursor: pointer; }
.filmwahl button:hover { border-color: var(--tinte); }
.filmwahl button[aria-pressed=true] { background: var(--tinte); border-color: var(--tinte); color: #fff; }
@media (max-width: 619px) { .film-schritt { min-height: 6em; } }
@media (min-width: 1100px) { .film-schritt { min-height: 1.5em; margin-bottom: -2px; } .echtfilm { gap: 10px; } }