/* AYLEEN — Startseite /<sprache>/ (Marketing). Betreiber 26.09.2026: «schönes design und marketing ... tolle visuelle
   darstellungen für jugendliche und kinder und dem kindesschutz» · «aber lebendig».
   Lädt NUR auf der Startseite (zusätzlich zu app.css; Farben, Schriften, Kopf, Fuss kommen von dort).
   Keine Inline-Stile (CSP). Keine Bilder: alle Szenen sind HTML/CSS/SVG → scharf, schnell, in jeder Sprache.

   KONTRAST (gerechnet, Abnahme misst nach — W9):
   · Verlaufsschrift auf Dunkel #111329: aufgehellte CI-Töne #88ADFA · #B99DFA · #FF9FC7 (≥ 8:1; auch über den
     farbigen Lichtflecken ≥ 5:1). Der volle CI-Verlauf (#3977F6 → #8B5CF6 → #FF5FA2) bleibt für Flächen, Glanz, Ringe.
   · Kleine weisse Schrift auf Farbe nur auf abgedunkeltem Blau/Lila #2F62D9 → #6A3FD6 (≥ 5,4:1).
   · Verlaufsschrift auf Weiss nur Blau → Lila (≥ 4:1, nur grosse Schrift ≥ 40 px).
   · LIVE-Abzeichen: Dunkel auf Rosé (6,45:1).
   BEWEGUNG: nur transform/opacity (flüssig auf dem Handy); «Bewegung reduzieren» → alles steht (ganz unten).
   RTL: logische Eigenschaften (inline-start/-end); Sprechblasen, Schalter und Pfeile spiegeln mit. */

:root {
  --start-breite: 1120px;
  --tief: #0A0C1E;                                      /* Telefonrahmen */
  --blau-tief: #2F62D9;                                 /* weisse Kleinschrift darauf 5,4:1 */
  --lila-tief: #6A3FD6;                                 /* weisse Kleinschrift darauf 6,4:1 */
  --text-verlauf-dunkel: linear-gradient(90deg, #88ADFA, #B99DFA, #FF9FC7);
  --karte-schatten: 0 1px 2px rgba(17, 19, 41, 0.06), 0 10px 30px rgba(17, 19, 41, 0.08);
}

/* ── Kopf der Startseite: Wortmarke als Link, Globus, «Vorschau» ── */
.kopf__zeile--breit { max-width: var(--start-breite); padding-inline: 16px 12px; }
.kopf__marke {
  flex: 0 1 auto; min-width: 0; margin-inline-end: auto;   /* Box nur so breit wie das Wort (Abstand zum Globus, W30) */
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 22px; line-height: 28px; font-weight: 900; letter-spacing: 2px;
  color: var(--ay-dunkel); text-decoration: none;
}
.kopf__cta {
  flex: 0 0 auto; margin-inline-start: 8px;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 22px;
  background: var(--ay-dunkel); color: var(--weiss);
  font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0.1px; white-space: nowrap; text-decoration: none;
  transition: background-color 0.2s ease;
}
.kopf__cta:hover { background: #262A52; }
.kopf__cta:focus-visible, .kopf__marke:focus-visible, .knopf-gross:focus-visible, .frage summary:focus-visible {
  outline: 2px solid var(--md-primary); outline-offset: 2px;
}

/* ── Grundgerüst ── */
.start { display: block; }
.abschnitt { position: relative; padding: 64px 16px; }
@media (min-width: 720px) { .abschnitt { padding: 96px 24px; } }
.abschnitt__innen { position: relative; max-width: var(--start-breite); margin: 0 auto; }
.abschnitt__kopf { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.abschnitt__titel {
  margin: 14px 0 12px;
  font-size: clamp(30px, 7.4vw, 48px); line-height: 1.1; font-weight: 900; letter-spacing: -0.5px;
  color: var(--ay-dunkel);
}
.abschnitt__text { margin: 0; font-size: 17px; line-height: 27px; color: var(--md-on-surface-variant); }
.abschnitt--tint { background: linear-gradient(180deg, #F8F9FF, #EDEFFF); }
.abschnitt--dunkel { background: var(--ay-dunkel); color: var(--weiss); overflow: hidden; overflow: clip; isolation: isolate; }
.abschnitt--dunkel .abschnitt__titel { color: var(--weiss); }
.abschnitt--dunkel .abschnitt__text { color: rgba(255, 255, 255, 0.8); }
.abschnitt__innen--zwei { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .abschnitt__innen--zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.abschnitt__titel--start { text-align: start; }

/* Schriften ohne Sperrung/Engstellung: Arabisch (verbunden), Chinesisch, Japanisch */
html[lang="ar"] main.start :where(h1, h2, h3, p, li, span, a, summary, strong),
html[lang="zh-Hans"] main.start :where(h1, h2, h3, p, li, span, a, summary, strong),
html[lang="ja"] main.start :where(h1, h2, h3, p, li, span, a, summary, strong) { letter-spacing: 0; }

/* ── Chips ── */
.chip {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  min-height: 36px; padding: 6px 14px; border-radius: 18px;
  font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0.2px;
}
.chip--dunkel { background: rgba(255, 255, 255, 0.1); color: var(--weiss); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); }
.chip--hell { background: var(--weiss); color: var(--ay-dunkel); box-shadow: inset 0 0 0 1px rgba(17, 19, 41, 0.12), 0 4px 14px rgba(139, 92, 246, 0.14); }
.chip__teil { white-space: nowrap; }                     /* Umbruch nur zwischen den Teilen (Handy-Messung 27.09.2026) */
.chip__punkt { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--ay-rose); animation: puls 1.8s ease-out infinite; }
@keyframes puls {
  0% { box-shadow: 0 0 0 0 rgba(255, 95, 162, 0.75); }
  100% { box-shadow: 0 0 0 10px rgba(255, 95, 162, 0); }
}

/* ── Grosse Knöpfe ── */
.knopf-gross {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 24px; border-radius: 26px; border: 0;
  font: inherit; font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: 0.1px;
  text-decoration: none; cursor: pointer;
  transition: translate 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.knopf-gross:hover { translate: 0 -2px; }
.knopf-gross svg { flex: 0 0 20px; width: 20px; height: 20px; fill: currentColor; }
[dir="rtl"] .knopf-gross .pfeil { transform: scaleX(-1); }
.knopf-gross--hell { background: var(--weiss); color: var(--ay-dunkel); box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4); }
.knopf-gross--hell:hover { box-shadow: 0 14px 36px rgba(255, 95, 162, 0.45); }
.knopf-gross--rand { background: transparent; color: var(--weiss); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5); }
.knopf-gross--rand:hover { background: rgba(255, 255, 255, 0.08); }
.knopf-gross--dunkel { background: var(--ay-dunkel); color: var(--weiss); box-shadow: 0 10px 26px rgba(17, 19, 41, 0.2); }
.knopf-gross--dunkel:hover { background: #262A52; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.knoepfe--mitte { justify-content: center; }
@media (max-width: 480px) { .knoepfe .knopf-gross { flex: 1 1 100%; } }   /* Handy: volle Breite, gleich breit */

/* ══════════ 1 · Bühne (Hero) ══════════ */
.held {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  margin: 8px 12px 0; border-radius: 28px;
  background: var(--ay-dunkel); color: var(--weiss);
  padding: 36px 20px 44px;
}
@media (min-width: 720px) { .held { margin: 12px 20px 0; border-radius: 36px; padding: 56px 40px 64px; } }
@media (min-width: 1200px) { .held { margin: 12px auto 0; max-width: 1180px; } }
/* Lichtflecken im CI-Verlauf — treiben langsam (nur transform) */
.held__glanz, .abschnitt__glanz { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.held__glanz i, .abschnitt__glanz i {
  position: absolute; width: 520px; height: 520px; border-radius: 50%;
  animation: treiben 18s ease-in-out infinite alternate;
}
.held__glanz i:nth-child(1) { background: radial-gradient(closest-side, rgba(57, 119, 246, 0.42), rgba(57, 119, 246, 0)); inset-inline-end: -160px; top: 120px; }
.held__glanz i:nth-child(2) { background: radial-gradient(closest-side, rgba(255, 95, 162, 0.36), rgba(255, 95, 162, 0)); inset-inline-end: -40px; bottom: -220px; animation-duration: 21s; animation-delay: -7s; }
.held__glanz i:nth-child(3) { background: radial-gradient(closest-side, rgba(139, 92, 246, 0.4), rgba(139, 92, 246, 0)); inset-inline-start: 20%; bottom: -300px; animation-duration: 24s; animation-delay: -3s; }
@keyframes treiben {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-40px, -30px, 0) scale(1.12); }
}
.held__raster { position: relative; max-width: var(--start-breite); margin: 0 auto; display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .held__raster { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 32px; } }
.held__text { min-width: 0; container-type: inline-size; }
/* Slogan in GENAU drei Zeilen: «BE TOGETHER.» misst in Roboto 900 6,861 em (gemessen 26.09.2026, Canvas) − 0,12 em
   Sperrung = 6,74 em → Schriftgrösse = Spaltenbreite ÷ 6,95 (3 % Reserve) = 14,3 cqi; nie umbrechen. */
.held__titel {
  margin: 20px 0 18px;
  font-size: clamp(36px, 11vw, 80px);                  /* Rückfall ohne Container-Einheiten */
  font-size: clamp(36px, 14.3cqi, 92px);
  line-height: 0.98; font-weight: 900; letter-spacing: -0.01em;
}
.held__titel .zeile {
  display: block; width: fit-content; max-width: 100%; white-space: nowrap;
  background-image: var(--text-verlauf-dunkel); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: schimmer 7s ease-in-out infinite alternate;
}
.held__titel .zeile:nth-child(2) { animation-delay: -2.3s; }
.held__titel .zeile:nth-child(3) { animation-delay: -4.6s; }
@keyframes schimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.held__unter { margin: 0 0 26px; max-width: 34em; font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, 0.82); }
.held__stores { margin: 18px 0 0; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.72); }

/* Szene: zwei Telefone, Sticker, Emoji — alles Dekoration (aria-hidden im HTML) */
.held__bild { position: relative; width: 100%; max-width: 440px; height: 480px; margin: 0 auto; container-type: inline-size; }
@media (min-width: 960px) { .held__bild { height: 560px; max-width: 480px; } }
/* Telefonbreite folgt dem TATSÄCHLICH verfügbaren Platz der Szene (58 % ihrer Breite): die Überlappung der zwei Telefone bleibt
   bei jeder Breite gleich — auch wenn eine Bildlaufleiste Platz nimmt (Abnahme-Fund 27.09.2026: 375-px-Rahmen mit 15-px-Leiste =
   360 px Layout, die Medienabfrage sah aber 375). Obergrenze wie vor v11: 210 px bis 959 px, 246 px ab 960 px — mit 246 px ragte
   das Chat-Telefon aus der 480 px hohen Szene und wurde bei 768 px von der Karte abgeschnitten (Messung 27.09.2026) */
.telefon {
  position: absolute; width: 210px; width: min(210px, 58cqi); aspect-ratio: 9 / 19; padding: 9px; border-radius: 36px;
  background: var(--tief);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(255, 255, 255, 0.09);
}
@media (min-width: 960px) { .telefon { width: 246px; width: min(246px, 58cqi); } }
.telefon::before {                                     /* Kamerainsel */
  content: ''; position: absolute; z-index: 3; top: 17px; left: 50%;
  width: 70px; height: 20px; margin-left: -35px; border-radius: 12px; background: var(--tief);
}
.telefon__schirm { position: relative; height: 100%; overflow: hidden; border-radius: 28px; background: var(--ay-hell); }
.telefon--chat { z-index: 2; inset-inline-start: 0; top: 44px; transform: rotate(-6deg); animation: schweben 7s ease-in-out infinite; }
.telefon--live { z-index: 1; inset-inline-end: 0; top: 0; transform: rotate(5deg); animation: schweben 8s ease-in-out -2.5s infinite; }
[dir="rtl"] .telefon--chat { transform: rotate(6deg); }          /* Neigung spiegelt mit der Leserichtung */
[dir="rtl"] .telefon--live { transform: rotate(-5deg); }
/* Schmale Handys: die Szene wächst mit ihrer Breite (Seitenverhältnis der geprüften 375-px-Fassung 311 × 440), Chat tiefer
   (LIVE-Kopf frei) — so passen beide Telefone bei 320–420 px in die Szene; mit fester Höhe 440 px schnitt die Karte das
   Chat-Telefon bei 414 px unten um 14 px ab (Messung 27.09.2026) */
@media (max-width: 420px) {
  .held__bild { height: auto; aspect-ratio: 311 / 440; }
  .telefon--chat { top: 60px; top: 19.3cqi; }
}
@keyframes schweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }

/* Chat mit Übersetzung, die sich vor den Augen vollzieht. Eigene dunkle Schrift: die Bühne vererbt Weiss
   (Avatar-Emoji stand sonst «weiss auf Rosa» 1,23:1 — Abnahme-Fund 26.09.2026) */
.chat { display: flex; flex-direction: column; color: var(--ay-dunkel); }
.chat__kopf {
  display: flex; align-items: center; gap: 8px; padding: 42px 12px 10px;
  background: var(--weiss); border-bottom: 1px solid #EEEDF4;
}
.chat__avatar {
  flex: 0 0 32px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font-size: 18px; line-height: 1; background: linear-gradient(135deg, #FFE0EF, #E7E0FF);
}
.chat__name { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ay-dunkel); }
.chat__online { width: 8px; height: 8px; border-radius: 50%; background: #2DBE6C; box-shadow: 0 0 0 2px var(--weiss); }
.chat__verlauf {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: 9px; padding: 14px 10px;
  background: linear-gradient(180deg, #F4F3FA, #ECEFFF);
}
.blase {
  position: relative; max-width: 88%; margin: 0; padding: 9px 12px; border-radius: 16px;
  font-size: 12.5px; line-height: 17px;
}
.blase--ein {
  align-self: flex-start; background: var(--weiss); color: var(--ay-dunkel);
  border-end-start-radius: 4px; box-shadow: 0 1px 2px rgba(17, 19, 41, 0.08);
}
.blase--aus {
  align-self: flex-end; color: var(--weiss);
  background: linear-gradient(135deg, var(--blau-tief), var(--lila-tief)); border-end-end-radius: 4px;
}
.blase__stapel { display: grid; }
.blase__stapel > span { grid-area: 1 / 1; }
.blase__original { opacity: 0; animation: text-aus 8s ease-in-out infinite; }    /* Grundstellung = übersetzt */
.blase__neu { animation: text-ein 8s ease-in-out infinite; }
@keyframes text-aus {
  0%, 28% { opacity: 1; filter: none; }
  36%, 94% { opacity: 0; filter: blur(3px); }
  100% { opacity: 1; filter: none; }
}
@keyframes text-ein {
  0%, 30% { opacity: 0; filter: blur(3px); }
  40%, 90% { opacity: 1; filter: none; }
  98%, 100% { opacity: 0; filter: blur(3px); }
}
.blase__hinweis {
  display: flex; align-items: center; gap: 4px; margin-top: 6px;
  font-size: 10.5px; line-height: 14px; color: var(--md-on-surface-variant);
}
.blase__hinweis svg { flex: 0 0 13px; width: 13px; height: 13px; fill: var(--md-primary); }
.blase__reaktion {
  position: absolute; inset-inline-end: -8px; bottom: -11px; padding: 1px 5px; border-radius: 12px;
  font-size: 13px; line-height: 18px; background: var(--weiss); box-shadow: 0 2px 6px rgba(17, 19, 41, 0.14);
  animation: ploppen 8s ease-in-out infinite;
}
@keyframes ploppen {
  0%, 44% { transform: scale(0); }
  50% { transform: scale(1.25); }
  56%, 92% { transform: scale(1); }
  100% { transform: scale(0); }
}
.tippt { align-self: flex-start; display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--weiss); }
.tippt i { width: 6px; height: 6px; border-radius: 50%; background: #9A9CB0; animation: hopsen 1.2s ease-in-out infinite; }
.tippt i:nth-child(2) { animation-delay: 0.15s; }
.tippt i:nth-child(3) { animation-delay: 0.3s; }
@keyframes hopsen {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* LIVE: Malen mit Freunden — Striche zeichnen sich selbst, Herzen steigen */
/* Fluss statt fester Lage: Kopfzeile oben (order −1, im HTML steht die Zeichnung zuerst), die Zeichnung füllt nur den Platz
   darunter bis über die Kommentare. Fest bei 36 % kreuzten die Striche «Moderasyonlu» / «с модерацией», sobald Titel oder
   Freunde-Chip zweizeilig wurden (Handy-Prüfung 27.09.2026, Abnahme W48 Strichprüfung) */
.live { position: relative; display: flex; flex-direction: column; background: radial-gradient(120% 80% at 30% 18%, #2E3272, #111329 62%); color: var(--weiss); }
.live__kunst { flex: 1 1 0; min-height: 0; width: 88%; margin: 8px auto 60px; }
.live__kunst path {
  fill: none; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 420; stroke-dashoffset: 0;           /* Grundstellung = fertig gemalt */
  animation: zeichnen 7s ease-in-out infinite;
}
.live__kunst .k1 { stroke: var(--ay-blau); }
.live__kunst .k2 { stroke: var(--ay-rose); animation-delay: 0.9s; }
.live__kunst .k3 { stroke: var(--ay-lila); animation-delay: 1.8s; }
.live__kunst .k4 { stroke: #FFD24D; animation-delay: 2.4s; }
@keyframes zeichnen {
  0% { stroke-dashoffset: 420; }
  45%, 78% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -420; }
}
/* Kopfzeile (LIVE + «Nur Freunde») und Titel fliessen untereinander: bricht der Freunde-Chip in einer Sprache um (TR, UK …),
   rutscht der Titel mit statt überdeckt zu werden; «LIVE» selbst bricht nie (Handy-Prüfung 27.09.2026: «LIV / E») */
.live__kopf { position: relative; z-index: 1; order: -1; margin: 42px 10px 0; display: flex; flex-direction: column; gap: 10px; }
.live__oben { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
/* Titel und Freunde-Chip bleiben im SICHTBAREN Teil des LIVE-Telefons (das Chat-Telefon deckt den Anfang ab): höchstens
   58 % Breite, sonst zweite Zeile. Gemessen 27.09.2026 bei 390 px: vorher bis 45 px verdeckt (UK «Челендж: малюємо»). */
.live__freunde { max-width: 58%; text-align: end; }          /* kein min-width: 0 — nie schmaler als das längste Wort (W49) */
.live__info { max-width: 58%; align-self: flex-end; }
.live__marke {
  flex: 0 0 auto; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px;
  background: var(--ay-rose); color: var(--ay-dunkel);
  font-size: 11px; line-height: 15px; font-weight: 900; letter-spacing: 0.6px;
}
.live__marke i { width: 6px; height: 6px; border-radius: 50%; background: var(--ay-dunkel); animation: blinken 1.2s steps(2, jump-none) infinite; }
@keyframes blinken { 0% { opacity: 1; } 100% { opacity: 0.2; } }
.live__freunde { padding: 3px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.16); font-size: 10.5px; line-height: 15px; font-weight: 600; }
/* Titel und «Moderiert» oben am freien Ende: den Anfang und den Fuss des LIVE-Telefons überdeckt das Chat-Telefon */
.live__info { display: flex; flex-direction: column; align-items: flex-end; text-align: end; padding-inline-end: 2px; }
.live__titel { margin: 0 0 6px; font-size: 13px; line-height: 18px; font-weight: 800; }
/* «Moderiert» knapp gesetzt: TR «Moderasyonlu» ragte sonst bei 375 px 2 px unter das Chat-Telefon (Messung 27.09.2026) */
.live__moderiert {
  display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.14); font-size: 10px; line-height: 15px; font-weight: 600;
}
.live__moderiert svg { width: 12px; height: 12px; fill: currentColor; }
.live__kommentare { position: absolute; bottom: 16px; inset-inline-end: 12px; display: flex; gap: 6px; margin: 0; }
.live__kommentare span {
  padding: 3px 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.14); font-size: 11px; line-height: 16px;
  animation: kommen 6s ease-in-out infinite;
}
.live__kommentare span:nth-child(2) { animation-delay: 1.2s; }
.live__kommentare span:nth-child(3) { animation-delay: 2.4s; }
@keyframes kommen {
  0% { opacity: 0; transform: translateY(6px); }
  12%, 80% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-4px); }
}
.live__herzen span {
  position: absolute; bottom: 56px; inset-inline-end: 18px; font-size: 18px; line-height: 1;
  opacity: 0; animation: steigen 4.2s ease-in infinite;
}
.live__herzen span:nth-child(2) { inset-inline-end: 30px; animation-delay: 0.7s; }
.live__herzen span:nth-child(3) { inset-inline-end: 12px; animation-delay: 1.4s; }
.live__herzen span:nth-child(4) { inset-inline-end: 36px; animation-delay: 2.1s; }
.live__herzen span:nth-child(5) { inset-inline-end: 20px; animation-delay: 2.8s; }
.live__herzen span:nth-child(6) { inset-inline-end: 26px; animation-delay: 3.5s; }
@keyframes steigen {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(-16px, -190px) scale(1.2); opacity: 0; }
}

/* Sticker und Emoji rund um die Telefone */
.sticker {
  position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px; border-radius: 16px; background: var(--weiss); color: var(--ay-dunkel);
  font-size: 13px; line-height: 18px; font-weight: 800; white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  animation: schweben 6s ease-in-out infinite;
}
.sticker svg { flex: 0 0 18px; width: 18px; height: 18px; fill: var(--ay-lila); }
.sticker--eltern { inset-inline-start: -2px; bottom: 30px; rotate: -4deg; animation-delay: -1.5s; }
/* «🌍 17» zwischen Kopfhörer und Kommentaren — bei 31 % lag es auf «Moderiert» und dem LIVE-Titel (Handy-Prüfung 27.09.2026) */
.sticker--sprachen { inset-inline-end: -8px; top: 60%; rotate: 5deg; animation-delay: -3.5s; font-size: 15px; }
/* Emoji nur am Rand der Szene — nie über Sprechblasen oder LIVE-Text */
.emoji {
  position: absolute; z-index: 3; font-size: 34px; line-height: 1;
  animation: schweben 5.5s ease-in-out infinite, wippen 7s ease-in-out infinite alternate;
}
.emoji--1 { top: -12px; inset-inline-start: 27%; }
.emoji--2 { top: 1%; inset-inline-start: 6%; font-size: 30px; animation-delay: -2s, -1s; }
.emoji--3 { top: 48%; inset-inline-end: -12px; font-size: 28px; animation-delay: -3s, -4s; }
.emoji--4 { bottom: -2px; inset-inline-end: 34%; font-size: 30px; animation-delay: -1s, -2s; }
.emoji--5 { top: 64%; inset-inline-start: -18px; font-size: 26px; animation-delay: -4s, -3s; }
/* Aufkleber und Emoji nie über Schrift in den Telefonen (Abnahme W48, gemessen 27.09.2026: 17 Sprachen × 320–1920 px, Schwebe-Hub
   ±14 px). Container-Abfragen statt Medienabfragen: sie sehen die wirkliche Szenenbreite, auch wenn eine Bildlaufleiste Platz
   nimmt. Szene ≤ 356 px (Handy ≤ 420 px): Eltern-Aufkleber an den Fuss, Regenbogen zur LIVE-Seite, die Tipp-Blase läge unter dem
   Aufkleber und entfällt; ≤ 306 px kleinere Aufkleber, «Moderiert» ohne Schild (TR «Moderasyonlu» sonst unter dem
   Chat-Telefon); ≤ 295 px ohne Eltern-Aufkleber (Antwortblase); ≤ 276 px (320-px-Handys) ohne Aufkleber, Kopfhörer und die zwei
   kleinen LIVE-Chips — das LIVE-Telefon ist dort nur 148 px breit. */
@container (max-width: 356px) {
  .sticker--eltern { bottom: -2px; }
  .emoji--4 { inset-inline-end: 26%; }
  .tippt { display: none; }
}
@container (max-width: 306px) {
  .sticker { font-size: 12px; padding: 7px 10px; }
  .sticker svg { flex-basis: 16px; width: 16px; height: 16px; }
  .sticker--eltern { bottom: -4px; }
  .emoji--4 { inset-inline-end: 18%; }
  .live__moderiert svg { display: none; }
}
@container (max-width: 295px) { .sticker--eltern { display: none; } }
@container (max-width: 276px) { .sticker, .emoji--3, .live__freunde, .live__moderiert { display: none; } }
@keyframes wippen { from { rotate: -9deg; } to { rotate: 9deg; } }

/* ══════════ 2 · Laufband «17 Sprachen» (werkbau Regel 8: 60 px/s, nahtlos — Dauer setzt app.js aus der Breite) ══════════ */
.band { padding: 34px 0 6px; }
.band__titel {
  margin: 0 0 14px; padding: 0 16px; text-align: center;
  font-size: 13px; line-height: 18px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--md-on-surface-variant);
}
.band__fenster {
  overflow: hidden; padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.band__spur { display: flex; width: max-content; }
.band__spur:not(.laeuft) { width: auto; flex-wrap: wrap; justify-content: center; padding: 0 12px; }   /* ohne JS / ruhig */
.band__spur.laeuft { animation: laufen 60s linear infinite; }
.band__spur.laeuft:hover { animation-play-state: paused; }
@keyframes laufen { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.band__satz { display: flex; gap: 10px; padding-inline-end: 10px; }
.band__spur:not(.laeuft) .band__satz { flex-wrap: wrap; justify-content: center; padding: 0; row-gap: 10px; }
.band__eintrag {
  display: inline-flex; align-items: center; min-height: 42px; padding: 8px 18px; border-radius: 21px;
  background: var(--weiss); color: var(--ay-dunkel); white-space: nowrap;
  font-size: 15px; line-height: 22px; font-weight: 600;
  box-shadow: inset 0 0 0 1.5px rgba(57, 119, 246, 0.28), 0 2px 6px rgba(17, 19, 41, 0.05);
}
.band__eintrag:nth-child(3n+2) { box-shadow: inset 0 0 0 1.5px rgba(139, 92, 246, 0.3), 0 2px 6px rgba(17, 19, 41, 0.05); }
.band__eintrag:nth-child(3n) { box-shadow: inset 0 0 0 1.5px rgba(255, 95, 162, 0.34), 0 2px 6px rgba(17, 19, 41, 0.05); }

/* ══════════ 3 · Funktionen ══════════ */
.kacheln { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.kachel {
  position: relative; overflow: hidden; padding: 24px; border-radius: 24px;
  background: var(--weiss); box-shadow: var(--karte-schatten);
  transition: translate 0.25s ease, box-shadow 0.25s ease;
}
.kachel:hover { translate: 0 -4px; box-shadow: 0 2px 4px rgba(17, 19, 41, 0.06), 0 20px 44px rgba(57, 119, 246, 0.18); }
.kachel::after {                                       /* weicher Farbfleck oben in der Ecke */
  content: ''; position: absolute; top: -50px; inset-inline-end: -50px; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(139, 92, 246, 0.16), rgba(139, 92, 246, 0)); pointer-events: none;
}
.kachel:nth-child(3n+2)::after { background: radial-gradient(closest-side, rgba(255, 95, 162, 0.16), rgba(255, 95, 162, 0)); }
.kachel:nth-child(3n)::after { background: radial-gradient(closest-side, rgba(57, 119, 246, 0.16), rgba(57, 119, 246, 0)); }
.kachel__emoji {
  display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 16px; border-radius: 20px;
  font-size: 32px; line-height: 1; background: linear-gradient(135deg, #E4ECFF, #EDE6FF);
}
.kachel:nth-child(3n+2) .kachel__emoji { background: linear-gradient(135deg, #EDE6FF, #FFE3F0); }
.kachel:nth-child(3n) .kachel__emoji { background: linear-gradient(135deg, #FFE3F0, #E4ECFF); }
.kachel:hover .kachel__emoji { animation: wackeln 0.6s ease-in-out; }
@keyframes wackeln { 0%, 100% { rotate: 0deg; } 25% { rotate: -12deg; } 75% { rotate: 12deg; } }
.kachel h3 { margin: 0 0 6px; font-size: 19px; line-height: 26px; font-weight: 800; color: var(--ay-dunkel); }
.kachel p { margin: 0; font-size: 15px; line-height: 23px; color: var(--md-on-surface-variant); }

/* ══════════ 4 · Übersetzen ══════════ */
.uebersetzer {                                         /* Farbkranz = Schatten (ein ::before mit z-index −1 fiele hinter den Abschnittsgrund) */
  position: relative; display: grid; gap: 14px; padding: 24px; border-radius: 28px; background: var(--weiss);
  box-shadow: 0 1px 2px rgba(17, 19, 41, 0.06), 0 18px 50px rgba(139, 92, 246, 0.24), 0 0 0 1px rgba(139, 92, 246, 0.1);
}
.uebersetzer__zeile { display: flex; align-items: flex-end; gap: 10px; }
.uebersetzer__zeile--ziel { flex-direction: row-reverse; }
.sprachmarke {
  flex: 0 0 auto; display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 14px;
  font-size: 13px; line-height: 16px; font-weight: 900; letter-spacing: 0.5px; color: var(--weiss);
  background: linear-gradient(135deg, var(--blau-tief), var(--lila-tief));
}
.sprachmarke--ziel { background: linear-gradient(135deg, var(--lila-tief), #C2327A); }   /* weiss auf #C2327A 5,2:1 */
.uebersetzer .blase { max-width: none; flex: 0 1 auto; font-size: 16px; line-height: 23px; padding: 14px 16px; border-radius: 20px; }
.uebersetzer__funke {
  justify-self: center; display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-size: 13px; line-height: 18px; font-weight: 700; color: var(--md-primary);
}
.uebersetzer__funke svg { width: 20px; height: 20px; fill: currentColor; animation: pochen 2.4s ease-in-out infinite; }
@keyframes pochen { 0%, 100% { scale: 1; } 50% { scale: 1.18; } }
.blase--gross .punkte { display: inline-flex; gap: 5px; align-items: center; animation: punkte-zeit 6s ease-in-out infinite; opacity: 0; }
.blase--gross .punkte i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); animation: hopsen 1.2s ease-in-out infinite; }
.blase--gross .punkte i:nth-child(2) { animation-delay: 0.15s; }
.blase--gross .punkte i:nth-child(3) { animation-delay: 0.3s; }
.blase--gross .text { animation: text-zeit 6s ease-in-out infinite; }
@keyframes punkte-zeit { 0%, 26% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes text-zeit {
  0%, 28% { opacity: 0; transform: translateY(4px); }
  38%, 94% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

/* ══════════ 5 · Alterswelten ══════════ */
.alter { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 400px) { .alter { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 960px) { .alter { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.alter__karte {
  position: relative; padding: 22px 20px; border-radius: 24px; background: var(--weiss); box-shadow: var(--karte-schatten);
  transition: translate 0.25s ease;
}
.alter__karte:hover { translate: 0 -4px; }
.alter__zahl {
  display: block; width: fit-content; margin: 0;
  font-size: 40px; line-height: 46px; font-weight: 900; letter-spacing: -1px;
  background-image: linear-gradient(90deg, var(--ay-blau), var(--ay-lila));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.alter__jahre {
  margin: 0 0 10px; font-size: 13px; line-height: 18px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--md-on-surface-variant);
}
.alter__karte p:last-child { margin: 0; font-size: 14.5px; line-height: 22px; color: var(--md-on-surface-variant); }
/* AYLEEN Next ab 16 (Betreiber-Beschluss 27.09.2026): nach den drei Alterswelten des Schutzbereichs eine eigene, dunkle Karte
   im Stil des LIVE-Telefons. Kontrast gerechnet: Verlauf #FF9FC7/#B99DFA auf #2E3272 ≥ 5,1:1, Text #E4E6F5 9,2:1 */
.alter__karte--next { background-color: #1B1E45; background-image: radial-gradient(120% 90% at 20% 10%, #2E3272, #111329 70%); }
.alter__karte--next .alter__zahl { background-image: linear-gradient(90deg, #FF9FC7, #B99DFA); }
.alter__karte--next .alter__jahre { color: #B99DFA; }
.alter__karte--next p:last-child { color: #E4E6F5; }
.alter__hinweis {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; max-width: 100%;
  margin: 22px auto 0; padding: 12px 18px; border-radius: 16px;
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
  font-size: 15px; line-height: 22px; font-weight: 600;
}
.alter__hinweis svg { flex: 0 0 22px; width: 22px; height: 22px; fill: currentColor; }

/* ══════════ 6 · Kinderschutz (dunkel) ══════════ */
.abschnitt__glanz i:nth-child(1) { background: radial-gradient(closest-side, rgba(139, 92, 246, 0.34), rgba(139, 92, 246, 0)); top: -260px; inset-inline-start: -200px; }
.abschnitt__glanz i:nth-child(2) { background: radial-gradient(closest-side, rgba(57, 119, 246, 0.28), rgba(57, 119, 246, 0)); bottom: -300px; inset-inline-end: -220px; animation-delay: -9s; }
.schutz__schild { position: relative; display: grid; place-items: center; width: 132px; height: 132px; margin: 0 auto 4px; }
.schutz__schild .schild { position: relative; z-index: 1; width: 76px; height: 76px; filter: drop-shadow(0 12px 26px rgba(139, 92, 246, 0.5)); }
.schutz__ring {
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(185, 157, 250, 0.55);
  animation: ring 3.6s ease-out infinite;
}
.schutz__ring:nth-child(2) { animation-delay: 1.2s; }
.schutz__ring:nth-child(3) { animation-delay: 2.4s; }
@keyframes ring { from { transform: scale(0.5); opacity: 0.9; } to { transform: scale(1.35); opacity: 0; } }
.schutz__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .schutz__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .schutz__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.schutz__punkt {
  padding: 22px; border-radius: 22px; background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11);
  transition: background-color 0.25s ease, translate 0.25s ease;
}
.schutz__punkt:hover { background: rgba(255, 255, 255, 0.09); translate: 0 -3px; }
.schutz__symbol {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 15px;
  background: linear-gradient(135deg, var(--ay-blau), var(--ay-lila)); color: var(--weiss);
  box-shadow: 0 8px 20px rgba(57, 119, 246, 0.35);
}
.schutz__punkt:nth-child(even) .schutz__symbol { background: linear-gradient(135deg, var(--ay-lila), var(--ay-rose)); box-shadow: 0 8px 20px rgba(255, 95, 162, 0.3); }
.schutz__symbol svg { width: 24px; height: 24px; fill: currentColor; }
.schutz__punkt h3 { margin: 0 0 6px; font-size: 18px; line-height: 25px; font-weight: 800; color: var(--weiss); }
.schutz__punkt p { margin: 0; font-size: 15px; line-height: 23px; color: rgba(255, 255, 255, 0.78); }
/* «Warum es AYLEEN gibt» (Betreiber-Nachtrag 27.09.2026): hervorgehoben, ruhig — kein Alarmton, keine Schuldzuweisung */
.schutz__warum {
  max-width: 820px; margin: 0 auto 26px; padding: 22px 24px; border-radius: 22px;
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  border-inline-start: 4px solid var(--ay-rose);
}
.schutz__warum h3 { margin: 0 0 8px; font-size: 20px; line-height: 27px; font-weight: 800; color: var(--weiss); }
.schutz__warum p { margin: 0; font-size: 16.5px; line-height: 26px; color: rgba(255, 255, 255, 0.88); }
/* Warnung vor «Sugar Daddys» (Betreiber 27.09.2026: «muss hervorgehoben werden»): gelbe Kante wie ein Hinweisschild */
.schutz__warnung {
  max-width: 820px; margin: -8px auto 26px; padding: 18px 24px; border-radius: 22px;
  background: rgba(255, 210, 77, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 210, 77, 0.35);
  border-inline-start: 4px solid #FFD24D;
}
.schutz__warnung h3 { margin: 0 0 6px; font-size: 18px; line-height: 25px; font-weight: 800; color: #FFE08A; }
.schutz__warnung p { margin: 0; font-size: 16px; line-height: 25px; color: rgba(255, 255, 255, 0.88); }
/* AYLEEN HILFE (geplant) als 7. Punkt über die ganze Zeile, Rosé-Symbol */
.schutz__punkt--hilfe { grid-column: 1 / -1; background: rgba(255, 95, 162, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 95, 162, 0.35); }
.schutz__punkt--hilfe .schutz__symbol { background: linear-gradient(135deg, var(--ay-rose), var(--ay-lila)); box-shadow: 0 8px 20px rgba(255, 95, 162, 0.35); }
.schutz__ehrlich {
  max-width: 780px; margin: 30px auto 0; padding: 16px 20px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.88);
  font-size: 15px; line-height: 23px; text-align: center;
}

/* ══════════ 7 · Eltern ══════════ */
.regler { position: relative; padding: 18px 20px 8px; border-radius: 28px; background: var(--weiss); box-shadow: var(--karte-schatten); }
.regler__kopf {
  display: flex; align-items: center; gap: 10px; margin: 0 0 6px;
  font-size: 16px; line-height: 22px; font-weight: 800; color: var(--ay-dunkel);
}
.regler__kopf svg { flex: 0 0 26px; width: 26px; height: 26px; fill: var(--ay-lila); }
.regler__zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; border-top: 1px solid #EEEDF4;
  font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ay-dunkel);
}
.schalter { position: relative; flex: 0 0 46px; width: 46px; height: 28px; border-radius: 14px; background: #C5C6D0; }
.schalter::after {
  content: ''; position: absolute; top: 4px; inset-inline-start: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--weiss); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}
/* Eine Zeile zeigt «freigeben → widerrufen» (Grundstellung aus = alles gesperrt, wie im Paket) */
.regler__zeile--probe .schalter { animation: schalter-grund 6s ease-in-out infinite; }
.regler__zeile--probe .schalter::after { animation: schalter-knopf 6s ease-in-out infinite; }
[dir="rtl"] .regler__zeile--probe .schalter::after { animation-name: schalter-knopf-rtl; }
@keyframes schalter-grund { 0%, 22% { background: #C5C6D0; } 32%, 68% { background: var(--ay-lila); } 78%, 100% { background: #C5C6D0; } }
@keyframes schalter-knopf { 0%, 22% { transform: none; } 32%, 68% { transform: translateX(18px); } 78%, 100% { transform: none; } }
@keyframes schalter-knopf-rtl { 0%, 22% { transform: none; } 32%, 68% { transform: translateX(-18px); } 78%, 100% { transform: none; } }
.eltern-liste { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 12px; }
.eltern-liste li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 24px; color: var(--ay-dunkel); }
.eltern-liste svg { flex: 0 0 24px; width: 24px; height: 24px; fill: var(--ay-lila); }

/* ══════════ 8 · Fragen ══════════ */
.fragen { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.frage { border-radius: 20px; background: var(--weiss); box-shadow: var(--karte-schatten); }
.frage summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 16px 20px; border-radius: 20px;
  font-size: 17px; line-height: 24px; font-weight: 800; color: var(--ay-dunkel);
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: '+'; flex: 0 0 32px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
  font-size: 22px; line-height: 1; font-weight: 700; transition: rotate 0.25s ease;
}
.frage[open] summary::after { rotate: 45deg; }
.frage p { margin: 0; padding: 0 20px 20px; font-size: 16px; line-height: 25px; color: var(--md-on-surface-variant); }
/* Sprachnamen in der Sprachenliste nie trennen: im chinesischen und japanischen Satz brach Chrome «E/spañol», «Bos/anski»
   (Handy-Prüfung 27.09.2026, W49); die Liste bricht an den «、» dazwischen */
.frage bdi { white-space: nowrap; }

/* ══════════ 9 · Schluss ══════════ */
.schluss__innen { text-align: center; max-width: 760px; }
.schluss .abschnitt__text { margin-bottom: 28px; }

/* Fuss der Startseite in Seitenbreite */
.start-fuss { max-width: var(--start-breite); margin: 0 auto; padding: 0 16px 28px; }

/* ── Auftauchen beim Scrollen: nur wo der Browser Scroll-Zeitleisten kann; sonst steht alles sofort da ── */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .enthuellen { animation: auftauchen linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
  }
}
@keyframes auftauchen { from { opacity: 0; transform: translateY(30px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ── «Bewegung reduzieren»: alles steht, Grundstellungen sind lesbar (übersetzter Text, fertiges Bild, Schalter aus) ── */
@media (prefers-reduced-motion: reduce) {
  .start *, .start *::before, .start *::after { animation: none !important; transition: none !important; }
  .knopf-gross:hover, .kachel:hover, .alter__karte:hover, .schutz__punkt:hover { translate: none; }
  .blase--gross .punkte { display: none; }
}