/* ==========================================================================
   Typografie nach Apples Vorbild
   --------------------------------------------------------------------------
   Der Reiz der Apple-Folien kommt nicht von einer besonderen Schrift - es
   ist SF Pro, die auf jedem Apple-Geraet ohnehin liegt - sondern von vier
   Regeln:

     1. Der Grund ist nie reines Schwarz oder Weiss, sondern ein Ton daneben.
     2. Die Ueberschrift ist riesig, halbfett und ENG gefuehrt: negative
        Laufweite, dichte Zeilen.
     3. Die Ueberschrift tritt farblich ZURUECK (Grau), die kleine Zeile
        darunter ist praesent (Weiss bzw. Schwarz). Diese Umkehrung ist der
        eigentliche Griff.
     4. Genau zwei Groessen, und viel Leere darum.

   Eingebettet wird nichts: `-apple-system` holt SF Pro auf Apple-Geraeten,
   sonst faellt es auf Inter oder die Systemschrift zurueck. Apples Lizenz
   deckt das Einbetten als Webfont nicht ab.
   ========================================================================== */

:root{
  /* Dunkel - der Standard. Ein ganz dunkles Grau, nicht Schwarz.
     Das Weinrot ist die Geraetefarbe: tief und entsaettigt, kein Signalrot.
     Drei Stufen davon, weil eine nicht reicht - eine Farbe, die auf
     Beinahe-Schwarz als Text lesbar ist, ist als Flaeche zu grell, und
     eine, die als Flaeche stimmt, verschwindet als Text. */
  --grund:#0F0F10;
  --grund-hoch:#1A1A1C;
  --linie:#2A2A2D;
  --schrift:#F5F5F7;        /* die praesente, kleine Zeile */
  --schrift-leise:#8A8A90;  /* die grosse, zuruecktretende Ueberschrift */
  /* DER TON DES GERAETS, NICHT EIN AEHNLICHER.
     Aus Assets.xcassets/AccentColor.colorset der App: dunkle Erscheinung
     #C25B55, helle #8A3A33. Vorher stand hier #C8646E - eine Spur rosiger,
     und neben der App sah man es. */
  --akzent:#C25B55;         /* Schrift und Links */
  --akzent-rand:#8A3A33;    /* Kanten - die helle Erscheinung der App */
  --akzent-tief:#6B2D28;    /* Flaechen - das Gehaeuse selbst */
  --akzent-schleier:rgba(138,58,51,.26);
  --glas:rgba(255,255,255,.05);
}

/* Hell - dieselben Regeln, umgedreht. Genau die Apple-Folie. */
:root[data-hell]{
  --grund:#F5F5F7;
  --grund-hoch:#FFFFFF;
  --linie:#D2D2D7;
  --schrift:#1D1D1F;
  --schrift-leise:#6E6E73;
  --akzent:#8A3A33;
  --akzent-rand:#6B2D28;
  --akzent-tief:#6B2D28;
  --akzent-schleier:rgba(138,58,51,.10);
  --glas:rgba(0,0,0,.045);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--grund);color:var(--schrift);
  font:400 17px/1.65 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background-color .5s ease,color .5s ease;
}
img{max-width:100%;display:block}
a{color:var(--akzent)}
.mitte{width:min(1080px,92vw);margin:0 auto}

/* Das Tor */
body.tor{
  display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;
  /* Wie auf Apples Produktseite: ein dunkler Raum, und die Geraetefarbe
     glimmt von oben herein. Zwei Verlaeufe, keiner davon sichtbar als
     Kante - sonst wird aus Licht eine Flaeche. */
  background:
    radial-gradient(1100px 620px at 50% -12%, var(--akzent-schleier), transparent 62%),
    radial-gradient(760px 520px at 50% 118%, rgba(110,42,50,.16), transparent 60%),
    var(--grund);
}
body.tor main{width:min(420px,92vw);text-align:center}
body.tor .zeichen{
  width:92px;height:92px;margin:0 auto 22px;border-radius:22px;
  box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 18px 60px rgba(142,58,68,.32);
}
body.tor h1{
  margin:0 0 18px;font-weight:800;letter-spacing:.2em;text-indent:.2em;
  /* Gesperrt gesetzt und trotzdem im Rahmen: Auf einem schmalen Telefon
     lief das Wort bisher rechts aus dem Bild. */
  font-size:clamp(22px,7.2vw,34px);
}
body.tor form{margin:26px 0 0;display:flex;flex-direction:column;gap:10px}
body.tor input{
  padding:14px 16px;border-radius:12px;border:1px solid var(--linie);
  background:var(--grund-hoch);color:var(--schrift);
  font:600 18px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  text-align:center;letter-spacing:.08em;
}
body.tor input:focus{outline:2px solid var(--akzent);outline-offset:1px}
body.tor button{
  padding:14px 16px;border-radius:12px;border:1px solid var(--akzent-rand);
  background:linear-gradient(180deg,#7C333D,var(--akzent-tief));
  color:#FFFFFF;font:600 16px/1 inherit;cursor:pointer;
  transition:filter .2s ease,transform .12s ease;
}
body.tor button:hover{filter:brightness(1.14)}
body.tor button:active{transform:translateY(1px)}
:root[data-hell] body.tor button{
  background:linear-gradient(180deg,#8A3B44,var(--akzent-tief));
}
.fehler{color:#E8909E;font-size:15px;margin-top:16px}
.fuss{margin-top:28px;color:var(--schrift-leise);font-size:14px}
.klein{color:var(--schrift-leise);font-size:15px;margin:0}

/* Kopfleiste der geschuetzten Seiten */
.leiste{
  border-bottom:1px solid var(--linie);padding:14px 0;
  display:flex;align-items:center;gap:14px;font-size:14px;color:var(--schrift-leise);
}
.leiste img{width:30px;height:30px;border-radius:8px}
.leiste b{color:var(--schrift);font-weight:700;letter-spacing:.12em}
.leiste .rechts{margin-left:auto;display:flex;gap:16px;align-items:center}

/* Der Kopf wie eine Apple-Folie: links, unten verankert, oben Leere.
   Die Mitte-Ausrichtung war eine Plakatwand; das hier ist eine Buchseite. */
header.gross{
  padding:0;position:relative;overflow:hidden;
  display:flex;align-items:flex-end;
  text-align:left;
}
header.gross > .mitte{width:min(1080px,92vw);padding:34px 0 40px}
header.gross::before{
  content:"";position:absolute;inset:-30% -20% auto auto;width:70%;height:620px;
  background:radial-gradient(ellipse at 70% 10%,rgba(250,84,158,.10),transparent 62%);
  pointer-events:none;
}
/* Die Ueberschrift: riesig, halbfett, eng - und zuruecktretend. */
h1.titel{
  margin:0;
  font-size:clamp(38px,8.4vw,88px);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.03em;
  color:var(--schrift-leise);
}
/* Und die kleine Zeile darunter, die praesent ist. */
.claim{
  margin:26px 0 0;max-width:26em;
  font-size:clamp(17px,2.1vw,21px);line-height:1.5;
  letter-spacing:-.01em;
  color:var(--schrift);
}
.claim b{color:var(--schrift);font-weight:600}

section{padding:54px 0;border-top:1px solid var(--linie)}
h2{
  font-size:clamp(26px,4.2vw,44px);margin:0 0 14px;
  font-weight:600;line-height:1.06;letter-spacing:-.025em;
  color:var(--schrift-leise);
}
.vorspann{color:var(--schrift-leise);margin:0 0 34px;max-width:44em}

.punkte{display:grid;gap:24px;grid-template-columns:repeat(3,1fr)}
.punkt{background:var(--grund-hoch);border:1px solid var(--linie);border-radius:16px;padding:22px}
.punkt h3{margin:0 0 8px;font-size:17px}
.punkt p{margin:0;color:var(--schrift-leise);font-size:15px}

.schau{display:grid;gap:28px;grid-template-columns:repeat(3,1fr)}
.schau figure{margin:0}
.schau img{border-radius:20px;border:1px solid var(--linie);background:var(--grund-hoch)}
.schau figcaption{margin-top:12px;color:var(--schrift-leise);font-size:15px}
.schau b{color:var(--schrift);font-weight:600;display:block;margin-bottom:2px}

.liste{margin:0;padding:0;list-style:none;display:grid;gap:14px;max-width:46em}
.liste li{padding-left:26px;position:relative;color:var(--schrift-leise)}
.liste li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:2px;background:var(--akzent)}
.liste b{color:var(--schrift);font-weight:600}

.kasten{background:var(--grund-hoch);border:1px solid var(--linie);border-radius:20px;padding:30px}
.kasten p{color:var(--schrift-leise);margin:0 0 20px;max-width:42em}
.knopf{
  display:inline-block;padding:13px 24px;border-radius:12px;font-weight:600;
  font-size:16px;text-decoration:none;background:var(--akzent);color:#1A0A12;
  border:1px solid var(--akzent);
}
.knopf.leise{background:transparent;color:var(--schrift);border-color:var(--linie)}

/* Der vertrauliche Bereich */
.siegel{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  background:rgba(250,84,158,.12);border:1px solid rgba(250,84,158,.4);
  color:var(--akzent);font-size:13px;font-weight:600;
}
.wasserzeichen{
  position:fixed;inset:0;pointer-events:none;z-index:5;
  display:flex;align-items:center;justify-content:center;
  font-size:min(7vw,64px);font-weight:800;color:rgba(237,233,240,.055);
  transform:rotate(-24deg);letter-spacing:.06em;text-align:center;
}
figure.film{margin:0}
figure.film video{width:100%;border-radius:18px;border:1px solid var(--linie);background:#000}
.fehlt{
  border:1px dashed var(--linie);border-radius:18px;padding:44px 24px;text-align:center;
  color:var(--schrift-leise);font-size:15px;
}

footer{border-top:1px solid var(--linie);padding:32px 0 52px;color:var(--schrift-leise);font-size:14px}
footer a{color:var(--schrift-leise);text-decoration:none;margin-right:18px}
footer a:hover{color:var(--akzent)}

@media(max-width:820px){
  .punkte,.schau{grid-template-columns:1fr}
  .schau{max-width:420px;margin:0 auto}
  section{padding:42px 0}
}


/* Der Markt: eine Reihe, die nicht stehenbleibt
 *
 * Die Namen ziehen langsam durch, statt als Liste dazuliegen. Wer zusieht,
 * merkt ohne einen Satz darueber, dass das Feld groesser ist als ein
 * Haendler - und dass die Reihe nicht bei dem endet, den er gerade liest.
 * Es wird dabei nichts behauptet: Wer mit wem spricht, steht darunter im
 * Klartext. */
.markt{
  position:relative;overflow:hidden;margin:28px 0 16px;padding:2px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.markt .band{display:flex;gap:14px;width:max-content;animation:zieht 52s linear infinite}
.markt:hover .band,.markt:focus-within .band{animation-play-state:paused}
.markt .name{
  flex:0 0 auto;background:var(--grund-hoch);border:1px solid var(--linie);
  border-radius:14px;padding:14px 22px;white-space:nowrap;
  color:var(--schrift-leise);font-size:14px;
}
.markt .name b{display:block;color:var(--schrift);font-weight:600;font-size:18px;margin-bottom:2px}
.markt .name.jetzt{border-color:var(--akzent)}
.markt .name.jetzt b{color:var(--akzent)}
/* Genau eine Haelfte weit, plus den halben Abstand: sonst springt die
   Reihe bei jeder Runde um sieben Pixel und man sieht die Naht. */
@keyframes zieht{from{transform:translateX(0)}to{transform:translateX(calc(-50% + 7px))}}
/* Wer Bewegung abgestellt hat, bekommt dieselbe Auskunft im Stillstand. */
@media (prefers-reduced-motion:reduce){
  .markt{-webkit-mask-image:none;mask-image:none}
  .markt .band{animation:none;width:auto;flex-wrap:wrap}
}


/* Der Umschalter zwischen dunkel und hell.
   Ein Kreis, halb gefuellt - er zeigt, was er tut, ohne ein Wort. */
.wechsel{
  width:26px;height:26px;border-radius:50%;
  border:1px solid var(--linie);
  background:linear-gradient(90deg,var(--schrift) 0 50%,transparent 50% 100%);
  cursor:pointer;padding:0;
  transition:transform .5s ease;
}
.wechsel:hover{transform:rotate(180deg)}

/* --------------------------------------------------------------------------
   Der Stand je Land. Eine Tabelle, keine Grafik: Wer sie liest, ist ein
   Einkaeufer, und der will vergleichen koennen, nicht bewundern.
   -------------------------------------------------------------------------- */
.regel{width:100%;border-collapse:collapse;margin-top:18px;font-size:15px}
.regel th{
  text-align:left;font-weight:600;color:var(--schrift-leise);
  font-size:13px;letter-spacing:.02em;text-transform:uppercase;
  padding:0 12px 10px 0;border-bottom:1px solid var(--linie)}
.regel td{
  padding:13px 12px 13px 0;border-bottom:1px solid var(--linie);
  vertical-align:top;color:var(--schrift)}
.regel td:first-child{font-weight:600;white-space:nowrap}
.regel td:last-child{white-space:nowrap;padding-right:0}
.regel td.ja{color:#30D158;font-weight:600}
.regel td.benannt{color:#E0A800;font-weight:600}
.regel td.bald{color:var(--schrift-leise)}
:root[data-hell] .regel td.ja{color:#1B8F3A}
:root[data-hell] .regel td.benannt{color:#8A6A00}
/* Auf dem Telefon ist eine vierspaltige Tabelle keine Tabelle mehr,
   sondern ein Ausschnitt. Dann lieber je Land ein Block. */
@media (max-width:700px){
  .regel thead{display:none}
  .regel,.regel tbody,.regel tr,.regel td{display:block;width:100%}
  .regel tr{padding:14px 0;border-bottom:1px solid var(--linie)}
  .regel td{border:0;padding:0;white-space:normal}
  .regel td:first-child{font-size:17px;white-space:normal}
  .regel td:nth-child(2){color:var(--schrift-leise);font-size:14.5px;margin-top:2px}
  .regel td:nth-child(3){color:var(--schrift-leise);font-size:13.5px;margin-top:1px}
  .regel td:last-child{margin-top:7px;font-size:13.5px;letter-spacing:.02em}
}

/* ---- Der Pitch und die Bühne (Britta, 07.10.2026) ---------------------- */

/* DER PITCH IST KEIN FLIESSTEXT.
   Er steht zwischen Überschrift und Film und muss in drei Atemzügen gelesen
   sein. Deshalb grösser als der übrige Text, aber schmaler gesetzt - ein
   langer Satz über die volle Breite liest sich nicht, er wird überflogen. */
.pitch{border-top:none;padding-top:8px}
.gross-text{
  font-size:clamp(19px,2.1vw,25px);line-height:1.45;margin:0 0 20px;
  max-width:30em;color:var(--schrift-leise);letter-spacing:-.01em;
}
.gross-text b{color:var(--schrift);font-weight:600}
.pointe{
  font-size:clamp(21px,2.4vw,29px);line-height:1.3;margin:30px 0 0;
  max-width:26em;color:var(--schrift);font-weight:600;letter-spacing:-.02em;
}
.pointe::before{
  content:"";display:block;width:52px;height:3px;border-radius:2px;
  background:var(--akzent);margin-bottom:18px;
}

/* DIE BÜHNE: Walze, Film und Startknopf liegen übereinander.
   Alle drei im selben Kasten, gleiches Seitenverhältnis - so springt beim
   Wechsel nichts. `.aus` blendet aus, ohne den Platz freizugeben. */
.buehne{padding-top:30px}
.kino{
  position:relative;width:100%;aspect-ratio:16/9;border-radius:18px;
  overflow:hidden;border:1px solid var(--linie);background:#0B0B0C;
}
.kino video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;background:#0B0B0C;
}
.kino video.hauptfilm{object-fit:contain;background:#000}
.kino .aus{opacity:0;pointer-events:none}
.kino video.aus{visibility:hidden}

/* DER PFEIL DARF DIE WALZE NICHT ERSCHLAGEN.
   Erster Versuch: Knopf mittig, Verlauf über die ganze Fläche - der Pfeil
   sass genau auf der hellen Kapsel, in der der Satz steht, und der Verlauf
   zog die ohnehin blassen Nebenzeilen ins Dunkle. Britta will die Walze
   sehen und den Pfeil dazu.
   Jetzt: Verlauf nur im unteren Drittel, Knopf darin. Die Walze läuft
   darüber frei. */
.kino .start{
  position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:12px;padding-bottom:44px;
  background:linear-gradient(180deg,transparent 58%,rgba(11,11,12,.62) 100%);
  color:var(--schrift);font:inherit;transition:background .2s;
}
.kino .start:hover{background:linear-gradient(180deg,transparent 46%,rgba(11,11,12,.8) 100%)}
.kino .start.aus{opacity:0;pointer-events:none}
.kino .pfeil{
  width:70px;height:70px;border-radius:999px;
  background:var(--akzent);border:1px solid var(--akzent-rand);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 32px rgba(0,0,0,.55);transition:transform .2s;
}
.kino .start:hover .pfeil{transform:scale(1.08)}
.kino .pfeil::after{
  content:"";display:block;margin-left:5px;
  border-style:solid;border-width:14px 0 14px 23px;
  border-color:transparent transparent transparent #1A0A12;
}
.kino .startwort{
  font-size:15px;font-weight:600;letter-spacing:.02em;
  text-shadow:0 2px 14px rgba(0,0,0,.85);
}
.mitte-text{margin-top:14px}

/* Der Abschluss trägt den einen Weg, der zählt. */
.abschluss .gross-knopf{font-size:17px;padding:15px 30px;margin-right:12px}
.abschluss .vorspann{max-width:40em}

@media (max-width:760px){
  .kino{aspect-ratio:4/3}
  .kino .pfeil{width:54px;height:54px}
  .kino .pfeil::after{border-width:10px 0 10px 17px}
  .kino .start{padding-bottom:22px}
  .abschluss .gross-knopf{display:block;margin:0 0 12px;text-align:center}
}

/* Wer Bewegung abgestellt hat, bekommt keine laufende Walze. */
@media (prefers-reduced-motion:reduce){
  .kino video.walze{display:none}
  .kino .start{background:var(--grund-hoch)}
}

/* ==========================================================================
   Brittas Anmerkungen vom 08.10.2026
   ========================================================================== */

/* DIE KOPFLEISTE KLEBT OBEN.
   Britta: „Dann kann man das immer sehen und der Rest der Seite wird quasi
   darunter durchgescrollt."
   Der Grund wird durchscheinend und unscharf - sonst schiebt sich eine
   harte Flaeche ueber den Text und die Seite wirkt zweigeteilt. Der
   z-index liegt ueber dem Wasserzeichen (5), damit die Leiste nicht von
   der Schraegschrift durchkreuzt wird. */
.kopfbalken{
  position:sticky;top:0;z-index:20;
  background:var(--grund);
  border-bottom:1px solid var(--linie);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .kopfbalken{
    background:transparent;
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    backdrop-filter:saturate(180%) blur(20px);
  }
  /* Eine eigene Flaeche darunter, sonst liest sich Text durch die Leiste. */
  .kopfbalken::before{
    content:"";position:absolute;inset:0;z-index:-1;
    background:var(--grund);opacity:.82;
  }
}
.kopfbalken .leiste{border-bottom:none}

/* DIE BEGRUESSUNG.
   Britta: „Begruessung bitte auch in unseren 5 Sprachen durchwechseln und
   gerne wie bei Apple in unterschiedlichen Schriften und Farben."
   Jede Sprache hat ihren eigenen Schnitt. Der Name dahinter bleibt
   unveraendert - er ist die Konstante, an der man den Wechsel ueberhaupt
   bemerkt. */
.gruss{
  margin:22px 0 0;
  font-size:clamp(26px,4.2vw,44px);   /* wie h2 - „Gemessen, nicht geschätzt." */
  line-height:1.1;letter-spacing:-.025em;
  color:var(--schrift);
}
/* DER STAPEL: alle fuenf Begruessungen im selben Rasterfeld.
   Sichtbar ist das mit `.da`, die anderen sind durchsichtig.
   Ohne JavaScript bleibt das erste stehen.

   ZWEI VERSUCHE, UND DER ERSTE WAR FALSCH.
   Zuerst war die Breite fest auf das breiteste Wort gesetzt – „Bonjour".
   Der Name stand damit still, aber hinter „Hello" klaffte eine Luecke von
   36 Pixeln bis zum Komma. Stillstand ja, aber es sah nach Fehler aus.

   Jetzt traegt der Stapel die Breite des AKTIVEN Wortes – und weil sie
   uebergangen wird, wandert der Name sanft mit, statt zu springen. Die
   Breite setzt das Skript; ohne Skript greift `max-content`, dann steht
   das erste Wort und nichts bewegt sich. */
.gruss-stapel{
  display:inline-grid;
  vertical-align:baseline;
  width:max-content;
  overflow:hidden;
  transition:width .34s cubic-bezier(.4,0,.2,1);
}
.gruss-wort{
  grid-area:1 / 1;
  opacity:0;transform:translateY(-6px);
  transition:opacity .3s ease,transform .3s ease;
  /* Nicht anklickbar und nicht markierbar – es sind fuenf uebereinander. */
  pointer-events:none;user-select:none;
}
.gruss-wort.da{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .gruss-wort,.gruss-stapel{transition:none}
}
/* DIE RUHIGE BEGRUESSUNG (OBI, Britta Profi_2, 22.10.2026): zwei Zeilen,
   und die erste traegt die laengste Sprachfassung. Kein Umbruch, kein
   Einrutschen von oben, feste Breite (setzt vertraulich.php). */
.gruss.feststehend{white-space:nowrap}
.gruss.feststehend .gruss-wort{transform:none}
.gruss.feststehend .gruss-stapel{transition:none}

/* Der Name in seiner eigenen Zeile, gleich gross wie der Gruss darueber
   (Ulf, 14.10.2026: kein Gezappel mehr in der ersten Zeile). */
.gruss-name{
  margin:0 0 10px;
  font-size:clamp(26px,4.2vw,44px);
  line-height:1.1;letter-spacing:-.025em;
  color:var(--schrift-leise);
}
/* Fuenf Schnitte, in der Reihenfolge der Sprachen aus kapitel.py:
   Deutsch, Englisch, Schwedisch, Spanisch, Franzoesisch. */
.gruss-0{font-weight:600;color:var(--schrift)}
.gruss-1{font-weight:400;font-style:italic;color:var(--akzent);
         font-family:"New York","Iowan Old Style",Georgia,serif}
.gruss-2{font-weight:300;letter-spacing:.06em;color:var(--schrift)}
.gruss-3{font-weight:800;letter-spacing:-.035em;color:var(--akzent)}
.gruss-4{font-weight:400;color:var(--schrift-leise);
         font-family:"New York","Iowan Old Style",Georgia,serif}

/* DIE WORTMARKE mit dem drehenden Zeichen statt eines Trademarkzeichens.
   Britta: „inklusive dem kleinen, sich drehenden Roomonaut-Zeichen statt
   eines Trademarkzeichens? (Schriftgroesse bitte so wie sie ist
   beibehalten)". Also bleibt die Groesse von h1.titel unangetastet; das
   Zeichen haengt oben rechts an der Marke, so gross wie ein ™ waere. */
h1.wortmarke{
  display:flex;align-items:flex-start;gap:.06em;
  letter-spacing:.02em;           /* gesperrt wie in der Leiste */
  color:var(--schrift);
}
h1.wortmarke .zeichen{
  width:.42em;height:.42em;border-radius:.1em;
  margin-top:.06em;flex:none;
  animation:zeichen-dreht 9s linear infinite;
}
@keyframes zeichen-dreht{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  h1.wortmarke .zeichen{animation:none}
  .gruss-wort{transition:none}
}

/* DER ELEVATOR PITCH: drei Zeilen als Schlagzeile. */
h2.dreizeiler{color:var(--schrift);margin-bottom:26px}

/* KAPITEL 04: die fuenf Gruppen.
   Keine Kacheln - das waeren fuenf Kaesten untereinander. Eine ruhige
   Reihe mit zurueckgenommener Zwischenueberschrift liest sich besser. */
.gruppe{margin:0 0 34px;max-width:52em}
.gruppe h3{
  margin:0 0 10px;font-size:19px;font-weight:600;
  letter-spacing:.01em;color:var(--akzent);
}
.gruppe .liste{gap:10px}

/* Der Gegensatz am Ende - abgesetzt, weil er das Gegenteil behauptet. */
.gegenteil{
  margin-top:40px;padding:22px 24px;max-width:52em;
  border-left:2px solid var(--akzent-rand);
  background:var(--glas);border-radius:0 14px 14px 0;
}
.gegenteil h3{margin:0 0 8px;font-size:19px;font-weight:600;color:var(--schrift)}
.gegenteil p{margin:0;color:var(--schrift-leise)}

/* KAPITEL 05: der Ablauf.
   Britta: „Den Ablauf bitte dezent hervorheben." Dezent heisst hier:
   gesperrt, klein, viel Luft - und die Pfeile noch leiser als die Woerter.
   Keine Farbflaeche, kein Kasten. */
.plattform{text-align:center}
.ablauf{
  margin:0 auto 26px;max-width:58em;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.5em .7em;
  font-size:clamp(12px,1.5vw,15px);
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--schrift);
}
.ablauf i{color:var(--schrift-leise);font-style:normal;opacity:.55}
.plattform .gross-text{margin:0 auto;max-width:28em;color:var(--schrift-leise)}

/* Ein Sprungziel darf nicht unter der klebenden Leiste landen. */
section,header.gross{scroll-margin-top:72px}

@media (max-width:720px){
  .ablauf{letter-spacing:.12em;gap:.4em .5em}
  .gegenteil{padding:18px 18px}
}


/* ======================================================================
   TEXTFASSUNG v6 (Britta, 10.10.2026)
   Vier neue Kapitel brauchen vier Handgriffe - keine neue Bildsprache.
   Alles baut auf dem auf, was schon da ist: .punkte fuer das Raster,
   .gruppe fuer die Wege, .pointe fuer den Satz, der stehenbleiben soll.
   ====================================================================== */

/* KAPITEL 04: drei Kacheln, die wiedererkannt werden sollen.
   Britta: „je drei Zeilen. Sie sollen wiedererkannt werden, nicht
   gelesen." Deshalb bleibt der erste Absatz leise - er beschreibt den
   Aerger - und der zweite tritt hervor, weil dort die Antwort steht.
   Die Trennlinie dazwischen ist das einzige Signal; eine Farbflaeche
   waere zu laut fuer ein Kapitel, das nur Wiedererkennen will. */
.sicht h2{margin-bottom:26px}
.punkt .antwort{
  margin-top:14px;padding-top:14px;
  border-top:1px solid var(--linie);
  color:var(--schrift);
}

/* KAPITEL 05: die fuenf Wege als Kacheln.
   Britta v6: „die Bullets bitte schoener darstellen, nicht einfach als
   Liste untereinander, vielleicht auch in Kachelform?" - also Kacheln,
   aber die Listen bleiben darin. Zwei Spalten und nicht drei, weil die
   Gruppen unterschiedlich lang sind (drei bis sechs Punkte) und drei
   Spalten daraus eine Treppe machen wuerden. */
.wege{
  display:grid;gap:20px;
  grid-template-columns:repeat(2,1fr);
  align-items:start;
}
.wege .gruppe{
  margin:0;max-width:none;
  background:var(--grund-hoch);
  border:1px solid var(--linie);
  border-radius:16px;padding:22px 24px;
}
.wege .gruppe .liste{max-width:none}

/* KAPITEL 07: der Beleg.
   Das Zitat ist das staerkste Element der Seite, weil es vom Verband der
   Ketten stammt und nicht von uns. Deshalb steht die Quelle vollstaendig
   darunter und nicht im Kleingedruckten - sie ist das Argument, nicht
   die Fussnote. */
.beleg{margin:34px 0 0;max-width:46em}
.beleg blockquote{
  margin:0;padding:0 0 0 20px;
  border-left:2px solid var(--akzent);
  font-size:clamp(18px,2.1vw,22px);line-height:1.45;
  color:var(--schrift);
}
.beleg blockquote::before{content:"\201E"}
.beleg blockquote::after{content:"\201C"}
.beleg figcaption{
  margin:12px 0 0 22px;
  color:var(--schrift-leise);font-size:14px;
}

/* KAPITEL 09: der Satz, der stehenbleiben soll.
   .pointe gibt es schon - hier nur der Abstand, weil davor drei Absaetze
   Fliesstext stehen und nicht eine Liste. */
.selbstbau .pointe{margin-top:34px}

@media(max-width:820px){
  .wege{grid-template-columns:1fr}
}


/* ======================================================================
   TEXTFASSUNG v7 (Britta, 10.10.2026) – die kurze
   960 Woerter sichtbarer Text wurden rund 480. Ihr Prinzip: „Auf einer
   Seite, die einen Film von sechseinhalb Minuten traegt, darf nichts
   stehen, was der Film ohnehin zeigt. Der Film ist die Funktionsliste.
   Die Seite ist das Argument."
   ====================================================================== */

/* KAPITEL 05: fuenf Zeilen statt dreiundzwanzig.
   Das fette Wort traegt die Zeile – wer ueberfliegt, liest nur die fuenf
   Verben und weiss, worum es geht. */
.weg{
  margin:0 0 30px;padding:0;list-style:none;
  display:grid;gap:12px;max-width:50em;
}
.weg li{
  padding-left:26px;position:relative;
  color:var(--schrift-leise);line-height:1.5;
}
.weg li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:9px;border-radius:2px;background:var(--akzent);
}
.weg b{color:var(--schrift);font-weight:600}

/* DIE DREI BEWEISE.
   Abgesetzt, weil sie etwas anderes sind als die Liste darueber: Dort
   steht, was die App tut – hier, was man nachpruefen kann. */
.beweise{
  max-width:46em;margin:0 0 26px;padding:18px 22px;
  border-left:2px solid var(--akzent-rand);
  background:var(--glas);border-radius:0 14px 14px 0;
}
.beweise p{margin:0 0 10px;color:var(--schrift-leise);font-size:15.5px}
.beweise p:last-child{margin-bottom:0}

/* DER AUFKLAPPER.
   Zu heisst: Der Einkaeufer ueberfliegt. Offen heisst: Es gibt keinen
   Film, und dann muss die Liste sichtbar sein. Das Dreieck dreht sich,
   damit man sieht, dass es eines zum Klicken ist. */
.mehr{max-width:62em;margin:0 0 10px}
.mehr summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;
  gap:9px;padding:9px 16px;border-radius:12px;
  border:1px solid var(--linie);background:var(--grund-hoch);
  color:var(--schrift-leise);font-size:15px;
}
.mehr summary::-webkit-details-marker{display:none}
.mehr summary::before{
  content:"";width:7px;height:7px;flex:0 0 auto;
  border-right:1.5px solid var(--akzent);border-bottom:1.5px solid var(--akzent);
  transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .18s ease;
}
.mehr[open] summary::before{transform:rotate(-135deg) translate(-2px,-2px)}
.mehr summary:hover{color:var(--schrift)}
.mehr > .wege{margin-top:20px}

/* KAPITEL 03 OHNE FILM.
   Ein leerer Platz wirkt wie ein Fehler. Ein Satz, der erklaert, warum
   hier nichts steht, wirkt wie etwas, das es zu schuetzen gibt. */
.verschlossen{
  max-width:46em;padding:30px 32px;
  border:1px dashed var(--linie);border-radius:20px;
  background:var(--glas);
}
.verschlossen .gross-text{margin:0 0 10px}
.verschlossen .klein{color:var(--schrift-leise);max-width:40em}

/* WECHSELWOERTER – „Bereit?" und „Wir sind bereit. Ihr auch?" (OBI, 15.10.2026).
   Alle Fassungen liegen im selben Rasterfeld uebereinander. Die Flaeche ist
   damit immer so gross wie die laengste („Připraveni?") – beim Wechsel
   springt nichts. Sichtbar ist eine; die anderen halten den Platz. */
.wechselwort{display:inline-grid;vertical-align:bottom}
.wechselwort .wort{grid-area:1/1;opacity:0;transition:opacity .7s ease;white-space:nowrap}
.wechselwort .wort.da{opacity:1}

/* DAS FELD VOR DEN FILMEN. Gross und klickbar; darunter klein und unbewegt,
   was passiert. */
.bereit-feld{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  margin:26px 0 0;padding:clamp(36px,7vw,72px) 24px;border-radius:22px;
  border:1px solid var(--akzent-rand);background:var(--grund-hoch);
  text-decoration:none;color:var(--schrift);text-align:center;
  transition:background .2s,border-color .2s,transform .2s;
}
.bereit-feld:hover,.bereit-feld:focus-visible{background:var(--akzent-schleier);border-color:var(--akzent)}
.bereit-feld:focus-visible{outline:3px solid var(--akzent);outline-offset:4px}
/* Britta, 16.10.2026: „Bereit?" etwas kleiner, so gross wie der
   ROOMONAUT-Schriftzug (h1.titel) – und die Zeile darunter in einer Zeile.
   Auf schmalen Telefonen passt der Satz nicht in eine Zeile; dort darf er
   umbrechen, statt aus dem Feld zu laufen. */
.bereit-feld .bereit{font-size:clamp(38px,8.4vw,88px);font-weight:700;letter-spacing:-.03em;line-height:1.05;color:var(--akzent)}
.bereit-zeile{font-size:clamp(15px,1.6vw,18px);color:var(--schrift-leise)}
@media (min-width:700px){.bereit-zeile{white-space:nowrap}}
.filmhinweis{margin-top:18px}

/* DIE FILME UNTEREINANDER, GLEICH GROSS (seit 22.10.2026 drei). Titel und Dauer stehen im
   Startbild, nicht darunter – sonst sehen zwei Player aus wie einer und
   eine Wiederholung. */
.filmpaar{display:grid;gap:28px;margin-top:26px}
.filmplatz{margin:0}
.filmplatz .kino{aspect-ratio:16/9}
/* Die Startkarte als Knopf (Britta, Anmerkungen 2, 22.10.2026): die ganze
   Karte startet den Film, der rote Knopf ist ins Bild gemalt. */
.filmplatz .filmstart{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;
  border:0;border-radius:inherit;background:transparent;cursor:pointer;transition:background .2s}
.filmplatz .filmstart:hover{background:rgba(255,255,255,.035)}
.filmplatz .filmstart:focus-visible{outline:3px solid var(--akzent);outline-offset:4px}
.filmplatz .filmstart[hidden]{display:none}
.filmplatz .startbild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.filmplatz .folgt{
  position:absolute;right:18px;bottom:16px;padding:7px 14px;border-radius:999px;
  background:rgba(11,11,12,.72);color:var(--schrift);font-size:14px;font-weight:600;
}


@media (prefers-reduced-motion:reduce){
  .wechselwort .wort{transition:none}
}