/* SRS Studios: eine Farbe wie die blaue Wand im Filmstudio, sehr große enge Schrift,
   davor ein Bildschirm im Hochformat. Gelb ist allein für die Handlung, Rosa für kleine Marken. */
@font-face{font-family:'Geist Mono';font-weight:100 900;font-display:swap;src:url(fonts/geistmono-latin.woff2) format('woff2')}

:root{
  --blau:#1235e6; --weiss:#f3f1ea; --gelb:#ffd83d; --rosa:#e8a4b6; --rosa-schrift:#f0b8c7; --nacht:#0b0d14; --linie:rgba(243,241,234,.36);
  --eng:'Sofia Eng','Arial Narrow',Impact,sans-serif;
  --text:'Sofia',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,Consolas,monospace;
  --rand:clamp(16px,3.2vw,48px);
  --kopf:64px;
  --rund:10px;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--blau);color:var(--weiss);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf) + 12px);scrollbar-gutter:stable}
body{margin:0;font:400 1.0625rem/1.5 var(--text);overflow-x:clip;overflow-wrap:break-word}
h1,h2,h3,h4,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
img,video{display:block;max-width:100%}
a{color:inherit}
a,button{touch-action:manipulation}
:focus-visible{outline:3px solid var(--gelb);outline-offset:3px;border-radius:4px;box-shadow:0 0 0 3px var(--nacht)}
::selection{background:var(--rosa);color:var(--nacht)}
[id]{scroll-margin-top:calc(var(--kopf) + 12px)}
/* was der Filter ausblendet, ist weg, auch wo eine Klasse sonst display setzt */
[hidden]{display:none!important}

.sprung{position:absolute;left:var(--rand);top:-100px;z-index:30;background:var(--gelb);color:var(--nacht);padding:10px 16px;border-radius:99px;font-weight:700}
.sprung:focus{top:10px}
/* nur zum Vorlesen: steht im Text, ist aber nicht zu sehen */
.verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- Kopfzeile ---------- */
.kopf{position:fixed;inset:0 0 auto 0;z-index:20;height:var(--kopf);padding:0 var(--rand);display:flex;align-items:center;gap:clamp(10px,2vw,28px);transition:background-color .25s,box-shadow .25s}
.kopf.grund{background:var(--blau);box-shadow:0 1px 0 var(--linie)}
.marke{display:block;margin-right:auto;padding:10px 0;transition:opacity .15s}
.marke:hover{opacity:.82}
.marke:active{opacity:.64}
.marke img{display:block;height:19px;width:auto}
.wege{display:none;gap:clamp(18px,3vw,44px);margin-right:auto}
.wege a{position:relative;text-decoration:none;font-weight:500;padding:8px 2px}
/* der Strich unter dem Verweis wächst von links: für den Zeiger und für die Tastatur */
.wege a::after{content:'';position:absolute;inset:auto 2px 3px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .18s}
.wege a:hover::after,.wege a:focus-visible::after{transform:scaleX(1)}
.wege a:active{opacity:.7}
.sprache{font:500 .82rem/1 var(--mono);letter-spacing:.06em;color:inherit;background:none;border:1.5px solid var(--linie);border-radius:99px;padding:10px 12px;cursor:pointer;min-height:40px;transition:scale .15s,background-color .15s}
.sprache:hover{border-color:var(--weiss);background:rgba(243,241,234,.12)}
.sprache:active{scale:.95}
#sprachen{position:fixed;inset:calc(var(--kopf) - 6px) var(--rand) auto auto;margin:0;border:0;border-radius:var(--rund);background:var(--weiss);color:var(--nacht);padding:10px;max-height:min(70svh,580px);overflow:auto;overscroll-behavior:contain;width:max-content;min-width:176px;max-width:min(92vw,420px);box-shadow:0 18px 50px rgba(5,10,60,.45)}
#sprachen ul{display:grid;gap:2px}
/* ab sieben Sprachen zwei Spalten in voller Breite, darunter eine schmale Liste */
#sprachen:has(li:nth-child(7)){width:min(92vw,420px)}
#sprachen:has(li:nth-child(7)) ul{grid-template-columns:1fr 1fr}
/* Browser ohne popover (iPhone vor iOS 17): dort stünde die Liste sonst immer offen; seite.js klappt sie auf und zu */
@supports not selector(:popover-open){ #sprachen:not(.offen){display:none} #sprachen{z-index:30} }
#sprachen a{display:block;padding:9px 12px;border-radius:6px;text-decoration:none;font-weight:500}
#sprachen a:focus-visible{outline-color:var(--blau)}
#sprachen a:hover{background:rgba(18,53,230,.1)}
#sprachen a[aria-current]{background:var(--blau);color:var(--weiss)}

.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:99px;background:var(--gelb);color:var(--nacht);font:800 1.05rem/1 var(--text);text-decoration:none;white-space:nowrap;border:2px solid var(--gelb);transition:scale .15s,translate .15s,background-color .15s}
.knopf:hover{background:#ffe46b;border-color:#ffe46b}
.knopf:focus-visible{outline-offset:4px}
.knopf:active{scale:.97}
.knopf.klein{min-height:40px;padding:0 18px;font-size:.92rem}
.knopf.hohl{background:none;color:var(--weiss);border-color:var(--weiss)}
.knopf.hohl:hover{background:rgba(243,241,234,.12);border-color:var(--weiss)}
/* nur wo es einen Zeiger gibt: der Knopf hebt sich leicht, beim Druck sitzt er wieder */
@media (hover:hover){ .knopf:hover:not(:active),.spiel:hover:not(:active){translate:0 -2px} }

/* Pille zum Wählen: die Branchen auf der Unterseite und die Auswahl im Auftrag. Gewählt ist sie hell gefüllt; Gelb bleibt der Handlung */
.filter button,.wahl span{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1.5px solid var(--linie);border-radius:99px;background:none;color:inherit;font:700 .95rem/1 var(--text);white-space:nowrap;cursor:pointer;transition:scale .15s,background-color .15s,border-color .15s,color .15s}
.filter button:hover,.wahl label:hover span{border-color:var(--weiss);background:rgba(243,241,234,.12)}
.filter button:active,.wahl label:active span{scale:.96}
.filter button[aria-pressed=true],.wahl input:checked + span{background:var(--weiss);border-color:var(--weiss);color:var(--nacht)}

/* ---------- große Schrift ---------- */
.zeile{display:block;white-space:nowrap;width:max-content}
.riese{font:900 clamp(3.4rem,13vw,11rem)/.84 var(--eng);text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance;overflow-wrap:break-word}
.satz{max-width:52ch;text-wrap:pretty;font-size:1.125rem}
.preis{font:900 1em/1 var(--eng);text-transform:uppercase;white-space:nowrap;font-variant-numeric:tabular-nums}
.nr{font:500 .8rem/1 var(--mono);letter-spacing:.08em;color:var(--rosa-schrift)}
.nur-breit{display:none}

/* ---------- Kopf der Seite: oben die große Schrift, darunter rechts der Bildschirm, links Satz und Knopf ----------
   Der Bildschirm verdeckt keine Schrift mehr (Noel am 2026-10-12: "Der Film ist hinter dem Video"). */
.buehne{position:relative;height:100svh;min-height:600px;max-height:1100px;overflow:hidden;--bh:clamp(600px,100svh,1100px);--sh:calc(var(--bh) * .4);--sw:calc(var(--sh) * 9 / 16)}
.gross{position:absolute;inset:calc(var(--kopf) + 6px) var(--rand) auto;height:calc(100% - var(--kopf) - var(--sh) - 52px - var(--mehr,0px));container-type:inline-size}
.lage{font:900 var(--f,23.5cqw)/.82 var(--eng);text-transform:uppercase;transform-origin:0 0;transform:scaleY(var(--s,1.35))}
.schirm{position:absolute;right:var(--rand);bottom:28px;height:var(--sh);aspect-ratio:9/16;border-radius:var(--rund);overflow:hidden;background:var(--nacht);border:3px solid var(--nacht);box-shadow:0 26px 40px -18px rgba(3,8,60,.75)}
.schirm img,.schirm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* der Wechsel läuft erst, wenn das Skript da ist (Klasse skript): nur dann gibt es auch den Knopf, der ihn anhält */
.schirm img + img{opacity:0}
.skript .schirm img + img{animation:schnitt 16s infinite}
.skript .schirm img:nth-child(3){animation-delay:4s}
.skript .schirm img:nth-child(4){animation-delay:8s}
@keyframes schnitt{0%,24%{opacity:0}25%,49%{opacity:1}50%,100%{opacity:0}}
/* mit Film: er läuft elf Sekunden, danach je drei Sekunden die drei Standbilder */
.schirm.film img{opacity:0}
.skript .schirm.film img{animation:schnitt-film 20s infinite}
.skript .schirm.film img:nth-child(3){animation-delay:3s}
.skript .schirm.film img:nth-child(4){animation-delay:6s}
@keyframes schnitt-film{0%,54.6%{opacity:0}55%,69.6%{opacity:1}70%,100%{opacity:0}}
.skript .schirm.steht img{animation-play-state:paused}
/* der Zeitcode ist zugleich der Knopf, der den Bildwechsel anhält */
.zeit{position:absolute;left:6px;top:6px;font:500 .62rem/1 var(--mono);letter-spacing:.04em;color:#fff;background:rgba(11,13,20,.72);padding:4px 6px 4px 16px;border:0;border-radius:4px;cursor:pointer}
.zeit::before{content:'';position:absolute;left:6px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--rosa)}
.zeit::after{content:'';position:absolute;inset:-12px}
/* lässt der Browser den Film nicht von selbst starten, zeigt der Bildschirm ein Zeichen zum Antippen */
.schirm.wartet{cursor:pointer}
.schirm.wartet::after{content:'';position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--gelb);box-shadow:0 6px 18px -6px rgba(3,8,60,.7)}
.schirm.wartet::before{content:'';position:absolute;z-index:1;left:50%;top:50%;margin:-10px 0 0 -6px;border-left:17px solid var(--nacht);border-block:10px solid transparent}
.zeit[aria-pressed=true]::before{border-radius:1px;background:var(--weiss)}
.zeit:hover:enabled{background:var(--nacht)}
.zeit:active:enabled{scale:.95}
.zeit:disabled{cursor:default}
.unten{position:absolute;inset:auto calc(var(--rand) + var(--sw) + 16px) 28px var(--rand);display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.unten .knopf{white-space:normal;text-align:center;line-height:1.15;padding:8px 10px;font-size:.95rem}
.unter{font-size:1rem;max-width:34ch;text-wrap:pretty;overflow-wrap:break-word;hyphens:auto}
/* Übersicht im Kopf: die vier Filmarten, jede führt zu ihrem Abschnitt (Noel am 2026-10-12: "direkt am Anfang eine Übersicht").
   Die Linie über der Art, die im Bildschirm gerade läuft, füllt sich in Rosa; ohne Skript ist es eine schlichte Liste. */
.arten ol{display:grid}
.arten a{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 0;border-top:2px solid var(--linie);text-decoration:none;transition:opacity .2s}
.arten a::before{content:'';position:absolute;inset:-2px 0 auto;height:2px;background:var(--rosa);transform:scaleX(var(--p,0));transform-origin:0 50%;transition:transform .1s linear}
.arten b{font:900 1.3rem/1 var(--eng);text-transform:uppercase;letter-spacing:.01em;overflow-wrap:anywhere;hyphens:auto}
.arten .nr{flex:none}
/* ein kleiner Pfeil sagt, dass die Zeile ein Sprung nach unten ist */
.arten a::after{content:'';flex:none;margin-left:auto;width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;rotate:45deg;translate:0 -2px;opacity:.6;transition:translate .2s,opacity .2s}
.arten a:hover::after,.arten a:focus-visible::after{translate:0 1px;opacity:1}
.arten.takt a{opacity:.72}
.arten.takt .an a,.arten a:hover,.arten a:focus-visible{opacity:1}
.arten a:active{opacity:.6}
@media (max-width:699px){ .unter{display:none} }
.alle .arten{margin-top:26px;max-width:none}
.alle .arten ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
@media (min-width:760px){ .alle .arten ol{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 24px} }

/* ---------- Abschnitte ---------- */
section:not(.buehne){padding:clamp(72px,9.5vw,124px) var(--rand) 0}
section > .satz{margin-top:22px}

/* was wir machen: je Filmart ein Block mit drei Beispielen; auf der Unterseite derselbe Block mit allen */
.art{position:relative;margin-top:clamp(44px,7vw,90px);padding-top:22px;border-top:1px solid var(--linie)}
.art::before{content:'';position:absolute;inset:-2px auto auto 0;width:min(132px,34%);height:3px;background:var(--rosa);transform-origin:0 50%}
.art :is(h2,h3){font:900 clamp(2.5rem,11vw,5.6rem)/.88 var(--eng);text-transform:uppercase;margin-top:12px;text-wrap:balance;overflow-wrap:break-word}
.art-text > p:not(.nr):not(.preis){margin-top:12px;max-width:40ch;text-wrap:pretty}
.art .preis{font-size:1.9rem;margin-top:14px;color:var(--gelb)}
.reihe{display:flex;gap:12px;margin:24px calc(-1 * var(--rand)) 0;padding:0 var(--rand) 12px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--rand);scrollbar-width:none}
.reihe::-webkit-scrollbar{display:none}
.reihe video[role=button]{cursor:pointer}
.reihe li{flex:0 0 min(62vw,280px);scroll-snap-align:start;container-type:inline-size}
/* der Rahmen hält das Format; Bild oder Film dürfen sich darin bewegen, ohne dass der Rand mitgeht */
.bild{position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:var(--rund);background:var(--nacht);border:3px solid var(--nacht)}
.bild img,.bild video{width:100%;height:100%;object-fit:cover}
/* Clip über seinem Standbild: bis er läuft, ist er durchsichtig und das Bild darunter zu sehen */
.bild img + video{position:absolute;inset:0}
.bild:has(video[aria-pressed=true])::after{content:'';position:absolute;left:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:rgba(11,13,20,.78) linear-gradient(90deg,transparent 12px,#fff 12px 15px,transparent 15px 19px,#fff 19px 22px,transparent 22px) no-repeat 0 11px / 100% 12px;pointer-events:none}
.reihe p{font:500 .78rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-top:10px}
/* am Handy unter dem Streifen: eine Linie, die mit dem Wischen wächst, und das Wort dazu */
.wisch{display:flex;align-items:center;gap:12px;margin-top:4px;font:500 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--rosa-schrift)}
.wisch span{flex:1;height:2px;background:var(--linie)}
.wisch span::before{content:'';display:block;height:100%;background:var(--rosa);transform-origin:0 50%;scale:.2 1}
.wisch::after{content:'';flex:none;width:6px;height:6px;margin-left:-4px;border:solid currentColor;border-width:2px 2px 0 0;rotate:45deg}
.wisch:empty,.reihe[hidden] + .wisch,.gefiltert .wisch{display:none}
/* Kachel mit fertigem Film: oben der Titel und, auf der Unterseite, die Länge; darunter für wen */
.werk p{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 12px}
.werk p b{font-weight:700}
.werk p span{grid-row:2;grid-column:1 / -1;color:var(--rosa-schrift)}
.werk p .lang{grid-row:1;grid-column:2;color:inherit;font-variant-numeric:tabular-nums}
/* der Knopf auf der Kachel öffnet den ganzen Film mit Ton */
.spiel{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 17px 0 15px;border:0;border-radius:99px;background:var(--gelb);color:var(--nacht);font:800 .92rem/1 var(--text);text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:0 6px 18px -6px rgba(3,8,60,.7);transition:scale .15s,translate .15s,background-color .15s}
.spiel::before{content:'';border-left:11px solid currentColor;border-block:7px solid transparent}
.spiel:hover{background:#ffe46b}
.spiel:focus-visible{outline-offset:2px}
.spiel:active{scale:.95}
/* schmale Kachel: nur das Dreieck, das Wort bleibt für das Vorlesen */
@container (max-width:190px){
  .spiel{width:44px;padding:0;gap:0;justify-content:center}
  .spiel::before{margin-left:3px}
  .spiel .wort{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
/* Reihe im Querformat (Unterseite): ein Raster statt des Streifens; am Handy eine Spalte, so laufen nie mehr als drei Clips zugleich */
/* Clips im Querformat: am Handy ein eigener Streifen zum Wischen, ab 560 ein Raster */
.reihe.quer{margin-top:26px}
.reihe.quer li{flex-basis:min(80vw,420px)}
.quer .bild{aspect-ratio:16/9}
@media (min-width:560px){
  .reihe.quer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;overflow:visible;margin:26px 0 0;padding:0}
  .quer + .wisch{display:none}
}
/* Verweis unter den drei Kacheln: führt zur Unterseite mit allen Beispielen dieser Filmart */
.mehr{margin-top:10px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mehr .knopf{min-height:44px;white-space:normal;text-align:center}
.weiter{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 20px;border:1.5px solid var(--linie);border-radius:99px;font-weight:700;font-size:.95rem;text-decoration:none;transition:scale .15s,background-color .15s,border-color .15s}
.weiter::after,.alle .zurueck::before{content:'';width:.5em;height:.5em;border-top:2px solid;border-right:2px solid;rotate:45deg;transition:translate .18s}
.weiter:hover{border-color:var(--weiss);background:rgba(243,241,234,.12)}
.weiter:hover::after,.weiter:focus-visible::after{translate:4px 0}
.weiter:active{scale:.96}

/* ---------- Unterseite mit allen Beispielen ---------- */
section.alle{padding-top:calc(var(--kopf) + clamp(30px,6vw,80px))}
.alle .zurueck{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 2px}
.alle .zurueck::before{rotate:-135deg}
.alle .zurueck:hover::before{translate:-4px 0}
/* ein langes Wort als Titel wird kleiner statt umbrochen */
.alle .riese{margin-top:10px;font-size:min(clamp(3.4rem,13vw,11rem),calc((100vw - 2 * var(--rand)) / (var(--n,9) * .5)))}

/* Branchen zum Filtern: eine Reihe Knöpfe über den Gruppen, sie bricht um, wo sie nicht in eine Zeile passt */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
@media (max-width:759px){
  .filter{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--rand));padding:4px var(--rand);scrollbar-width:none}
  .filter::-webkit-scrollbar{display:none}
  .filter > *{flex:none}
}

/* ---------- Fenster mit dem ganzen Film ---------- */
html:has(.kino[open]){overflow:hidden}
.kino{padding:0;border:0;border-radius:var(--rund);background:var(--nacht);color:var(--weiss);overflow:hidden;max-width:none;max-height:none;box-shadow:0 30px 80px rgba(2,5,40,.6)}
.kino::backdrop{background:rgba(4,8,46,.88)}
.kino form{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 16px}
.kino-titel{font:500 .78rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.zu{min-height:40px;padding:0 16px;border-radius:99px;border:1.5px solid var(--linie);background:none;color:inherit;font:700 .9rem/1 var(--text);cursor:pointer;transition:scale .15s,background-color .15s}
.zu:hover{border-color:var(--weiss);background:rgba(243,241,234,.12)}
.zu:active{scale:.95}
.kino video{width:min(92vw,calc((100svh - 96px) * 9 / 16));height:auto;aspect-ratio:9/16;background:#000}
.kino.breit video{width:min(92vw,calc((100svh - 96px) * 4 / 3));aspect-ratio:4/3}

/* ---------- Band mit den vier Filmarten: nur Schmuck; es steht still, wo Scrollen in CSS nichts bewegen kann ---------- */
.band{overflow-x:clip;padding-top:clamp(36px,6vw,84px)}
.band p{display:flex;width:max-content;font:900 clamp(3.4rem,11vw,9.5rem)/.9 var(--eng);text-transform:uppercase;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px rgba(243,241,234,.62)}
.band span::after{content:'';display:inline-block;width:.15em;height:.15em;margin:0 .3em;border-radius:50%;background:var(--rosa);vertical-align:.28em}

/* was in jedem Film steckt */
.gruppen{margin-top:30px;display:grid;gap:36px}
.gruppe h3{display:flex;align-items:baseline;gap:10px;padding-bottom:12px;font:500 .8rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.liste{display:grid;border-bottom:1px solid var(--linie)}
.liste li{padding:14px 0;border-top:1px solid var(--linie)}
.liste h4{font:900 1.8rem/.95 var(--eng);text-transform:uppercase;overflow-wrap:break-word}
.liste p{margin-top:5px;max-width:38ch}

.schritte{margin-top:34px;display:grid;counter-reset:schritt}
.schritte li{padding:22px 0;border-top:1px solid var(--linie);counter-increment:schritt}
.schritte li::before{content:'0' counter(schritt);font:500 .8rem/1 var(--mono);letter-spacing:.08em;color:var(--rosa-schrift)}
.schritte h3{font:900 clamp(2.6rem,12vw,5rem)/.86 var(--eng);text-transform:uppercase;margin-top:10px}
.schritte p{margin-top:10px;max-width:34ch}
@media (max-width:759px){
  .schritte{position:relative}
  .schritte::before{content:'';position:absolute;left:3px;top:26px;bottom:30px;width:2px;background:var(--rosa);opacity:.55}
  .schritte li{position:relative;padding:20px 0 20px 26px;border-top:0}
  .schritte li::after{content:'';position:absolute;left:0;top:23px;width:8px;height:8px;border-radius:50%;background:var(--rosa)}
}

.preise{margin-top:clamp(72px,11vw,150px);padding-top:clamp(56px,8vw,110px)!important;padding-bottom:clamp(56px,8vw,110px)!important;background:var(--weiss);color:var(--blau);--linie:rgba(18,53,230,.3)}
.preise .preis{color:var(--blau)}
.preise ::selection{background:var(--blau);color:var(--weiss)}
/* Gelb auf hellem Grund braucht eine dunkle Kante */
.preise .mehr{margin-top:28px}
.preise .knopf{border-color:var(--nacht)}
.tafel{margin-top:30px;border-bottom:1px solid var(--linie);container-type:inline-size}
.dazu{margin-top:44px;font:500 .8rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.dazu + .tafel{margin-top:14px}
.riese + .dazu{margin-top:26px}
.tafel li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;align-items:center;padding:20px 0;border-top:1px solid var(--linie)}
.tafel li > div{display:contents}
.tafel h3{grid-area:1 / 1}
.tafel .preis{grid-area:1 / 2}
.tafel div p{grid-area:2 / 1 / 3 / -1}
.tafel h3{font:900 clamp(1.7rem,7.4cqw,4.6rem)/.9 var(--eng);text-transform:uppercase;overflow-wrap:break-word;hyphens:auto}
.tafel div p{font-size:1rem;max-width:46ch;margin-top:0}
.tafel .preis{font-size:min(clamp(1.6rem,6.4cqw,4.6rem),calc(42cqw / (var(--p,5) * .5)));white-space:normal;max-width:42cqw;text-align:right;text-wrap:balance}

/* Fragen: jede Zeile klappt auf, ohne Skript (details). Das Kreuz wird beim Öffnen zum Strich */
.antworten{margin-top:30px;border-bottom:1px solid var(--linie);container-type:inline-size}
.antworten details{border-top:1px solid var(--linie)}
.antworten summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 0;cursor:pointer;list-style:none}
.antworten summary::-webkit-details-marker{display:none}
.antworten h3{font:900 clamp(1.7rem,5.2cqw,3.4rem)/.94 var(--eng);text-transform:uppercase;text-wrap:balance;overflow-wrap:break-word}
.kreuz{position:relative;width:44px;height:44px;border:1.5px solid var(--linie);border-radius:50%;transition:background-color .15s,border-color .15s}
.kreuz::before,.kreuz::after{content:'';position:absolute;left:50%;top:50%;width:16px;height:2.5px;margin:-1.25px 0 0 -8px;border-radius:2px;background:var(--rosa-schrift)}
.kreuz::after{transform:rotate(90deg);transition:transform .2s}
details[open] .kreuz::after{transform:rotate(0deg)}
.antworten summary:hover .kreuz{border-color:var(--weiss);background:rgba(243,241,234,.12)}
.antworten details > p{padding:0 60px 24px 0;max-width:calc(52ch + 60px);text-wrap:pretty}

/* Auftrag: vier Felder über den beiden Knöpfen. Ohne Skript gibt es sie nicht, die Knöpfe bleiben */
.auftrag{display:none;gap:26px;margin-top:34px;max-width:64rem}
.auftrag.bereit{display:grid}
.angaben summary{display:inline-flex;align-items:center;gap:14px;min-height:44px;cursor:pointer;list-style:none;font:700 1rem/1.2 var(--text)}
.angaben summary::-webkit-details-marker{display:none}
.angaben .kreuz{flex:none;width:36px;height:36px}
.angaben summary:hover .kreuz{border-color:var(--weiss);background:rgba(243,241,234,.12)}
.felder{display:grid;gap:26px;margin-top:22px}
.feld{border:0;margin:0;padding:0;min-width:0}
.feld > label,.feld legend{display:block;padding:0;font:500 .78rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.feld input[type=url]{display:block;width:100%;max-width:34rem;min-height:52px;margin-top:12px;padding:0 16px;border:1.5px solid var(--linie);border-radius:var(--rund);background:none;color:inherit;font:500 1.0625rem/1.2 var(--text);transition:border-color .15s,background-color .15s}
.feld input[type=url]::placeholder{color:rgba(243,241,234,.72);opacity:1}
.feld input[type=url]:hover,.feld input[type=url]:focus{border-color:var(--weiss);background:rgba(243,241,234,.08)}
.wahl{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.wahl label{position:relative;display:inline-flex}
/* das Kästchen selbst liegt unsichtbar über der Pille: Tippen, Tastatur und Vorlesen bleiben die des Browsers */
.wahl input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.wahl input:focus-visible + span{outline:3px solid var(--gelb);outline-offset:3px}

.kontakt .knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.abspann{margin-top:clamp(64px,9vw,120px);padding:clamp(28px,4vw,44px) var(--rand) 40px;border-top:2px solid var(--linie)}
.block{font:500 clamp(1.05rem,3.6vw,1.9rem)/1.12 var(--eng);text-transform:uppercase;letter-spacing:.08em;word-spacing:.5em;max-width:60ch;text-wrap:balance}
.block b{font-weight:900;letter-spacing:.03em;word-spacing:.1em;display:block;font-size:1.5em;margin-bottom:.2em}
.klein-text{margin-top:22px;font-size:.9rem;opacity:.86;max-width:60ch}
.klein-text a{text-underline-offset:4px}
.klein-text a:hover,.zurueck:hover{text-decoration-thickness:2px}
.klein-text a:active,.zurueck:active{opacity:.7}

/* ---------- Impressum und Datenschutz ---------- */
.zurueck{font-weight:500;text-underline-offset:6px;padding:8px 2px}
.recht{padding:calc(var(--kopf) + clamp(40px,7vw,90px)) var(--rand) clamp(72px,10vw,130px)}
.recht .riese{font-size:clamp(2.8rem,9vw,7rem)}
.recht section{padding:0;margin-top:clamp(40px,6vw,72px);max-width:64ch;border-top:1.5px solid var(--linie);padding-top:20px}
.recht h2{font:900 clamp(1.7rem,4vw,2.4rem)/1 var(--eng);text-transform:uppercase;letter-spacing:.01em}
.recht p{margin-top:14px;text-wrap:pretty}
.recht a{text-underline-offset:4px}

/* ---------- ab Tablet ---------- */
@media (min-width:760px){
  :root{--kopf:76px}
  .wege{display:flex}
  .marke{margin-right:clamp(20px,6vw,90px)}
  .marke img{height:22px}
  .sprache{margin-left:auto}
  .zeit{left:10px;top:10px;font-size:.74rem;padding:5px 7px 5px 19px}
  .zeit::before{left:7px;width:7px;height:7px;margin-top:-3.5px}
  .unten{justify-items:start}
  .wisch{display:none}
  .art{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:22px clamp(24px,4vw,72px);align-items:start}
  .art > .mehr{grid-column:2;margin-top:0}
  .art :is(h2,h3){font-size:min(clamp(3rem,6vw,6.4rem),calc(100cqi / (var(--n,8) * .46)))}
  .art-text{position:sticky;top:calc(var(--kopf) + 24px);container-type:inline-size}
  /* Raster für drei bis sechs Kacheln, nie eine einzelne in der letzten Zeile: drei Spalten, bei genau vier Kacheln zwei */
  .reihe{overflow:visible;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,22px)}
  .reihe li{flex:none}
  .reihe{--versatz:clamp(20px,3vw,48px)}
  .reihe li:nth-child(3n+2){margin-top:var(--versatz)}
  .reihe:has(> li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  .reihe:has(> li:nth-child(4):last-child) li{margin-top:0}
  .reihe:has(> li:nth-child(4):last-child) li:nth-child(even){margin-top:var(--versatz)}
  /* mit gewählter Branche stehen die übrigen Kacheln ohne Versatz nebeneinander; Spalten und Größe bleiben, wie sie sind */
  .gefiltert .reihe{--versatz:0px}
  /* die Reihe im Querformat geht unter dem Block über die ganze Breite, ohne Versatz */
  .reihe.quer{grid-column:1 / -1;margin-top:clamp(6px,1.4vw,22px);gap:clamp(18px,2vw,30px) clamp(10px,1.4vw,22px)}
  .reihe.quer li:nth-child(n){margin-top:0}
  /* der Text daneben bliebe sonst stehen, während die breite Reihe unter ihm durchläuft */
  .art:has(> .quer) .art-text{position:static}
  .gruppen{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,48px);align-items:start}
  .liste li{padding:18px 0}
  .liste h4{font-size:clamp(2rem,3vw,3rem)}
  .tafel li{padding:26px 0}
  .tafel li > div{display:block}
  .tafel div p{margin-top:8px}
  .antworten summary{padding:24px 0}
  .auftrag{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px clamp(24px,4vw,72px)}
  .feld.ganz,.angaben{grid-column:1 / -1}
  .felder{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px clamp(24px,4vw,72px)}
  .schritte{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,48px)}
  .schritte li{container-type:inline-size}
  .schritte h3{font-size:min(clamp(3rem,6.4vw,6.4rem),calc(100cqi / (var(--n,8) * .46)))}
}

/* ---------- breiter Kopf: die Schrift links, der Bildschirm steht rechts daneben ---------- */
@media (min-width:1000px){
  .buehne{--sh:calc(var(--bh) * .72)}
  .gross{right:calc(var(--rand) + var(--sw) + 56px);height:calc(100% - var(--kopf) - 150px - var(--mehr,64px))}
  .lage{--s:1.2}
  .schirm{top:15%;bottom:auto}
  .unten{inset:auto var(--rand) 36px;grid-template-columns:minmax(0,26ch) auto minmax(0,1fr);align-items:center;gap:20px 28px}
  .wege .nur-breit{display:inline}
  .arten{grid-column:1/-1;max-width:calc(100% - var(--sw) - 56px)}
  .arten ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
  .unten .knopf{white-space:nowrap;padding:0 28px;font-size:1.05rem}
  .unter{font-size:1.125rem;hyphens:manual}
}

/* breites Bild: vier Kacheln stehen in einer Zeile, die Reihe im Querformat in vier Spalten */
@media (min-width:1200px){
  .arten ol{grid-template-columns:repeat(4,minmax(0,1fr))}
  .reihe:has(> li:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1000px){ .reihe.quer{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* weiche Seitenwechsel beim Umschalten der Sprache und zwischen Startseite und Unterseite */
@media (prefers-reduced-motion:no-preference){ @view-transition{navigation:auto} }

/* ---------- Bewegung: nur transform und opacity; ohne sie steht alles vollständig da ---------- */
@keyframes herein{from{opacity:0;transform:translateY(.2em)}}
@keyframes schirm-herein{from{opacity:0;scale:.9}}
@keyframes fahrt{to{transform:scale(1.09)}}
@keyframes wisch{to{scale:1 1}}
@keyframes steigen{from{opacity:0;transform:translateY(var(--weg,16px))}}
@keyframes linie{from{transform:scaleX(0)}}
@keyframes band{to{transform:translateX(-85vw)}}
@keyframes schrift-bleibt{to{translate:0 13vh}}
@keyframes schirm-eilt{to{transform:translateY(-9vh)}}
@media (prefers-reduced-motion:no-preference){
  /* Einstieg im Kopf: die Zeilen der großen Schrift kommen nacheinander, dann der Bildschirm, dann der Satz.
     Reine CSS-Animation: sie endet sichtbar, auch wenn das Skript fehlt, und ändert keine Breite, die passen() misst. */
  .lage .zeile{animation:herein .7s cubic-bezier(.2,.75,.2,1) both}
  .lage .zeile:nth-child(2){animation-delay:.08s}
  .lage .zeile:nth-child(3){animation-delay:.16s}
  .lage .zeile:nth-child(4){animation-delay:.24s}
  .lage .zeile:nth-child(5){animation-delay:.32s}
  .schirm{animation:schirm-herein .8s .3s cubic-bezier(.2,.75,.2,1) both}
  .unten{animation:herein .6s .55s cubic-bezier(.2,.75,.2,1) both}
  /* Standbilder in den Reihen: sehr langsame Fahrt hinein, jede Kachel mit eigenem Tempo und Ziel.
     Nur wo das Bild allein im Rahmen steht: unter einem Clip bewegt sich nichts zusätzlich. */
  .reihe .bild img:only-child{animation:fahrt 13s ease-in-out infinite alternate}
  .reihe li:nth-child(even) .bild img{animation-duration:17s;transform-origin:30% 72%}
  .reihe li:nth-child(3n) .bild img{animation-duration:15s;transform-origin:68% 30%}
  /* die Antwort kommt beim Aufklappen kurz herein */
  details[open] > p{animation:herein .3s cubic-bezier(.2,.75,.2,1) both}
  /* das Fenster mit dem Film kommt kurz herein */
  .kino[open]{transition:opacity .2s,transform .2s}
  @starting-style{ .kino[open]{opacity:0;transform:scale(.985)} }

  /* beim Scrollen, alles in CSS: wo der Browser das nicht kann, greift nichts davon */
  @supports (animation-timeline:view()){
    /* Kopf: beim Wegscrollen bleibt die Schrift zurück, der Bildschirm eilt voraus */
    .buehne{view-timeline:--kopf block}
    .lage{animation:schrift-bleibt linear both;animation-timeline:--kopf;animation-range:exit 0% exit 100%}
    .schirm{animation:schirm-herein .8s .3s cubic-bezier(.2,.75,.2,1) both,schirm-eilt linear both;animation-timeline:auto,--kopf;animation-range:normal,exit 0% exit 100%}
    /* Band: schiebt sich seitlich, solange es durch das Bild läuft */
    .band{view-timeline:--band block}
    .band p{animation:band linear both;animation-timeline:--band;animation-range:cover 0% cover 100%}
    /* Titel, Texte und Zeilen steigen beim Hereinkommen ein; ganz im Bild sind sie fertig */
    main section:not(.kontakt) > .riese,.art-text,.liste li,.schritte li,.tafel li,.antworten details{animation:steigen linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    .art::before{animation:linie linear both;animation-timeline:view();animation-range:entry 20% cover 30%}
    .art-text{animation-range:entry 0% entry 70%}
    /* Kacheln am Handy: der Streifen zum Wischen ist selbst ein Scrollbereich, deshalb gibt er als Ganzes den Takt */
    .reihe{view-timeline:--reihe block}
    /* die Linie darunter folgt dem Wischen im Streifen */
    @supports (timeline-scope:--wisch){
      .art{timeline-scope:--wisch,--wisch-quer}
      .reihe:not(.quer){scroll-timeline:--wisch x}
      .reihe.quer{scroll-timeline:--wisch-quer x}
      .wisch span::before{animation:wisch 1ms linear both;animation-timeline:--wisch}
      .quer + .wisch span::before{animation-timeline:--wisch-quer}
    }
    .reihe li{animation:steigen linear both;animation-timeline:--reihe;animation-range:entry 0% entry 55%;--weg:20px}
    /* im Raster kommt jede Kachel für sich, die Spalten leicht versetzt */
    @media (min-width:760px){
      .reihe li{animation-timeline:view();animation-range:entry 0% entry 45%}
      .reihe li{--weg:20px}
    }
    /* die Reihe im Querformat ist ab 560 ein Raster: dort kommt jede Kachel für sich */
    @media (min-width:560px){
      .reihe.quer{view-timeline:none}
      .reihe.quer li:nth-child(n){animation-timeline:view();animation-range:entry 0% entry 60%;--weg:20px}
    }
  }
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .schirm img{animation:none!important} *,*::before,*::after{transition:none!important} }