/* AYLEEN — Web-App nach der Flutter-Vorschau des Master-Builds (mobile/lib/main.dart, 26.09.2026).
   Masse = Material-3-Spezifikation (Flutter useMaterial3: true), Farben = Paket-CI + M3-Schema aus dem Samen
   #3977F6 (tonalSpot, _werkzeuge/m3-farben.mjs). Keine Inline-Stile (CSP style-src 'self').
   17 Sprachen (Betreiber 26.09.2026, SPRACHANALYSE.md): Abstände LOGISCH (inline-start/-end), damit Arabisch (rtl)
   gespiegelt richtig steht. Schriften selbst ausgeliefert; der Browser lädt eine Datei nur, wenn ihre Zeichen vorkommen. */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/roboto-latin-wght.woff2) format('woff2-variations'), url(/assets/fonts/roboto-latin-wght.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {                                          /* Türkisch, Polnisch, Rumänisch, BKS: ğ ş İ ą ł ș ț č ć đ … */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/roboto-latin-ext-wght.woff2) format('woff2-variations'), url(/assets/fonts/roboto-latin-ext-wght.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {                                          /* Russisch, Ukrainisch */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/roboto-cyrillic-wght.woff2) format('woff2-variations'), url(/assets/fonts/roboto-cyrillic-wght.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {                                          /* Arabisch — Roboto hat keine arabischen Zeichen */
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-arabic-wght.woff2) format('woff2-variations'), url(/assets/fonts/noto-sans-arabic-wght.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {
  /* Paket-CI (MASTER.md §1) */
  --ay-blau: #3977F6;
  --ay-lila: #8B5CF6;
  --ay-rose: #FF5FA2;
  --ay-dunkel: #111329;
  --ay-hell: #F8F9FF;
  --ay-verlauf: linear-gradient(90deg, var(--ay-blau), var(--ay-lila), var(--ay-rose));
  /* M3-Rollen aus dem Samen #3977F6 */
  --md-primary: #485D92;
  --md-on-surface: #1A1B21;
  --md-on-surface-variant: #44464F;
  --md-surface: #FAF8FF;
  --md-surface-container-low: #F4F3FA;
  --md-surface-container: #EEEDF4;
  --md-secondary-container: #DCE2F9;
  --md-on-secondary-container: #404659;
  --md-outline-variant: #C5C6D0;
  --weiss: #FFFFFF;
  --weiss-70: rgba(255, 255, 255, 0.702);            /* Flutter Colors.white70 = 0xB3FFFFFF */
  --md-schatten-1: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --kopf-h: 64px;
  --leiste-h: 80px;
  --spalte: 640px;
  --unten-sicher: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
/* Leserichtung rtl (Arabisch): Verlauf gespiegelt — Blau steht am Leseanfang (rechts) wie in ltr links. Sonst läge der
   rechtsbündige Slogan auf dem Rosé-Ende: weiss auf Rosé 2,96:1 < 3 (Abnahme-Fund 26.09.2026). */
html[dir="rtl"] { --ay-verlauf: linear-gradient(270deg, var(--ay-blau), var(--ay-lila), var(--ay-rose)); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--ay-hell);                          /* scaffoldBackgroundColor: Palette.light */
  color: var(--md-on-surface);
  /* Arabische Schrift NICHT hier: sonst lädt jede Seite 166 KB (Abnahme-Fund W36, 26.09.2026) */
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 14px;                                     /* DefaultTextStyle = bodyMedium 14/20, 0.25 */
  line-height: 20px;
  letter-spacing: 0.25px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  /* break-word statt anywhere: Wörter brechen nur, wenn sie sonst überliefen — «anywhere» liess Kästchen schmaler als ihr
     längstes Wort werden und trennte mitten im Wort («Moderier/t», «E/spañol»; Handy-Prüfung 27.09.2026, Abnahme W49) */
  overflow-wrap: break-word;
}
p { margin: 0; }
a { color: var(--md-primary); }
svg { display: block; }
[hidden] { display: none !important; }

/* Schrift je Schriftsystem — nur die Seiten der Sprache laden sie:
   Arabisch = Noto Sans Arabic (selbst ausgeliefert, nur auf /ar/); Chinesisch/Japanisch = Systemschriften
   (CJK-Schriften sind mehrere MB; jedes Gerät bringt passende mit). Die Sprachwahl zeigt «العربية», «中文», «日本語»
   in der Systemschrift. Latein (AYLEEN, LIVE) kommt überall aus Roboto. */
html[lang="ar"] body { font-family: 'Noto Sans Arabic', 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; }
html[lang="zh-Hans"] body {
  font-family: 'Roboto', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', 'Source Han Sans SC', system-ui, sans-serif;
}
html[lang="ja"] body {
  font-family: 'Roboto', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, sans-serif;
}
/* Arabisch ist verbunden (Sperrung zerreisst die Buchstaben), CJK wird nicht gesperrt → überall 0 */
html[lang="ar"] body, html[lang="ar"] .karte__titel, html[lang="ar"] .leiste__text, html[lang="ar"] .fuss,
html[lang="ar"] .text-seite h2, html[lang="ar"] .knopf, html[lang="ar"] .sprachknopf,
html[lang="zh-Hans"] body, html[lang="zh-Hans"] .karte__titel, html[lang="zh-Hans"] .leiste__text, html[lang="zh-Hans"] .fuss,
html[lang="zh-Hans"] .text-seite h2, html[lang="zh-Hans"] .knopf, html[lang="zh-Hans"] .sprachknopf,
html[lang="ja"] body, html[lang="ja"] .karte__titel, html[lang="ja"] .leiste__text, html[lang="ja"] .fuss,
html[lang="ja"] .text-seite h2, html[lang="ja"] .knopf, html[lang="ja"] .sprachknopf { letter-spacing: 0; }

/* ── Kopf = M3 Small Top App Bar (64 dp, Titel titleLarge) ── */
.kopf {
  position: sticky; top: 0; z-index: 20;
  height: var(--kopf-h);
  background: var(--md-surface);
  transition: background-color 0.2s linear;
}
.kopf.ist-unterlegt { background: var(--md-surface-container); }   /* M3: «on scroll» = surface container */
.kopf__zeile {
  max-width: var(--spalte); height: 100%; margin: 0 auto;
  display: flex; align-items: center;
  padding-block: 0; padding-inline: 16px 0;
}
.kopf__zeile--zurueck { padding-inline-start: 4px; }
.kopf__titel {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-size: 22px; line-height: 28px; font-weight: 400; letter-spacing: 0;
  color: var(--md-on-surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kopf__zeile--zurueck .kopf__titel { margin-inline-start: 20px; }   /* Titel ab 72 dp: 4 + 48 + 20 */
.kopf__titel--marke { font-weight: 900; letter-spacing: 2px; color: var(--ay-dunkel); }
/* Wortzeichen = Weg zur Startseite (Betreiber 26.09.2026); 44 px Trefferhöhe ohne Kopfwachstum (28 + 2 × 8) */
.kopf__heim { display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0; color: inherit; text-decoration: none; }
.kopf__heim:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.symbolknopf {
  flex: 0 0 auto;
  width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--md-on-surface-variant); background: transparent; border: 0; padding: 0;
  text-decoration: none; cursor: pointer;
}
.symbolknopf + .symbolknopf { margin-inline-start: 8px; }            /* Knopfpaare ≥ 6 px waagrecht (LEGAL-DACH-Regel) */
.symbolknopf--zurueck { color: var(--md-on-surface); }
.symbolknopf svg { width: 24px; height: 24px; fill: currentColor; }
[dir="rtl"] .symbolknopf--zurueck svg { transform: scaleX(-1); }      /* Zurück zeigt in rtl nach rechts */
.symbolknopf:hover { background: rgba(68, 70, 79, 0.08); }
.symbolknopf:focus-visible, .leiste__ziel:focus-visible, .fuss a:focus-visible, .knopf:focus-visible, .ay-top:focus-visible,
.sprachknopf:focus-visible {
  outline: 2px solid var(--md-primary); outline-offset: 2px;
}

/* ── Inhalt = ListView(padding: 24) ── */
.inhalt { max-width: var(--spalte); margin: 0 auto; padding: 24px; }
.inhalt--app { padding-bottom: calc(24px + var(--leiste-h) + var(--unten-sicher)); }

.buehne {                                             /* Container(padding 24, radius 24, Verlauf) */
  padding: 24px; border-radius: 24px;
  background: var(--ay-verlauf);
  color: var(--weiss);
}
.buehne__slogan { font-size: 22px; line-height: 31.43px; font-weight: 800; }
.buehne__slogan span { display: block; }             /* drei gesetzte Zeilen: BE YOU. / BE TOGETHER. / BE SAFE. */
[dir="rtl"] .buehne__slogan { text-align: end; }      /* englischer Slogan (dir=ltr) steht in rtl rechtsbündig */

.reiter-titel {                                       /* headlineMedium 28/36 */
  margin: 28px 0 12px;
  font-size: 28px; line-height: 36px; font-weight: 400; letter-spacing: 0;
}

.karten { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; }
.karte {                                              /* Card: margin 4, Radius 12, surfaceContainerLow, Höhe 1 */
  margin: 4px;
  border-radius: 12px;
  background: var(--md-surface-container-low);
  box-shadow: var(--md-schatten-1);
  display: flex; align-items: center; gap: 16px;
  min-height: 72px;
  padding-block: 8px; padding-inline: 16px 24px;
}
.karte__symbol { flex: 0 0 24px; width: 24px; height: 24px; fill: currentColor; }
.karte__symbol--blau { color: var(--ay-blau); }
.karte__symbol--lila { color: var(--ay-lila); }
.karte__text { flex: 1 1 auto; min-width: 0; }
.karte__titel { font-size: 16px; line-height: 24px; letter-spacing: 0.5px; color: var(--md-on-surface); }
.karte__unter { color: var(--md-on-surface-variant); }

.medium {                                             /* ProtectedMediaView: Höhe 160, Radius 20, Dunkel */
  margin-top: 16px;
  height: 160px; border-radius: 20px;
  background: var(--ay-dunkel);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 16px;
}
.medium__symbol { width: 38px; height: 38px; fill: var(--ay-rose); margin-bottom: 12px; }
.medium__titel { color: var(--weiss); font-weight: 700; }
.medium__unter { color: var(--weiss-70); }

.hinweis-freigaben { margin-top: 18px; }

/* ── Sprachwahl (Startseite /) ── */
.sprachwahl { margin-top: 28px; }
.sprachwahl__titel {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 16px; font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0.15px;
}
.sprachwahl__symbol { flex: 0 0 24px; width: 24px; height: 24px; fill: var(--md-primary); }
/* «语言» und «言語» nie mitten im Wort trennen (CJK erlaubt sonst Umbruch zwischen jedem Zeichen; Handy-Prüfung 27.09.2026) */
.sprachwahl__titel span { word-break: keep-all; }
.sprachwahl__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
}
@media (min-width: 560px) { .sprachwahl__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sprachknopf {
  display: flex; align-items: center; min-height: 56px; padding: 8px 20px;
  border-radius: 16px; background: var(--md-surface-container-low); box-shadow: var(--md-schatten-1);
  color: var(--md-on-surface); text-decoration: none;
  font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0.15px;
}
.sprachknopf:hover { background: var(--md-surface-container); }

/* ── Elternbereich / Textseiten ── */
.eltern__titel { margin: 0 0 15px; font-size: 23px; line-height: 32.86px; font-weight: 700; }
.eltern__satz + .eltern__satz { margin-top: 20px; }
.eltern__satz--eng { margin-top: 12px !important; }

.text-seite h1 { margin: 0 0 16px; font-size: 28px; line-height: 36px; font-weight: 400; }
.text-seite h2 { margin: 28px 0 8px; font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0.15px; }
.text-seite p + p, .text-seite p + ul, .text-seite ul + p { margin-top: 10px; }
.text-seite ul { margin: 8px 0 0; padding-inline-start: 20px; }
.text-seite li + li { margin-top: 4px; }
.fassung { margin-top: 20px !important; font-style: italic; }
.link-gross { display: inline-block; padding: 12px 0; margin: -12px 0; }   /* allein stehender Link: 44 px Trefferfläche */
.vorschau-hinweis {
  margin: 0 0 20px; padding: 12px 16px; border-radius: 12px;
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
}

/* ── App-Ladeseite ── */
.laden__stufe { margin-top: 24px; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 12px 24px; border-radius: 22px; border: 0;   /* M3 40 dp → 44 px Trefferfläche (Abnahme W11) */
  background: var(--md-primary); color: var(--weiss);
  font: inherit; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.1px;
  text-decoration: none; cursor: pointer;
}
.knopf svg { width: 18px; height: 18px; fill: currentColor; }
.laden__meldung { margin-top: 12px; }
.laden__qr { width: 184px; height: 184px; margin-top: 12px; background: var(--weiss); border-radius: 12px; padding: 8px; }
.laden__qr img { width: 100%; height: 100%; display: block; }

/* ── Fusszeile (Pflichtangaben + Herstellervermerk) ── */
.fuss { margin-top: 88px; color: var(--md-on-surface-variant); font-size: 12px; line-height: 16px; letter-spacing: 0.4px; }   /* 88 px = freier Streifen für den Nach-oben-Knopf */
.fuss p + p { margin-top: 8px; }
.fuss a { color: var(--md-on-surface-variant); text-decoration: underline; text-underline-offset: 2px; }
/* Link-Zeile: in jeder Sprache umbrechbar; jeder Link 44 px hoch, Zeilen 8 px auseinander (keine Überlappung) */
.fuss__links { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 8px; }
.fuss__links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }   /* EN «Imprint» war 41 px breit (W11) */
/* Herstellervermerk: 44 px Trefferfläche ohne Zeilenwachstum (16 + 2 × 14), KEIN seitliches Polster
   (2 px rückten Links ein — Fund 26.09.2026 im Store-Bild) */
.fuss .wfw { margin-top: 14px; }
.fuss .wfw a { display: inline-block; padding: 14px 0; margin: -14px 0; }

/* ── Navigationsleiste = M3 NavigationBar (80 dp, Anzeiger 64×32) ── */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  height: calc(var(--leiste-h) + var(--unten-sicher));
  padding-bottom: var(--unten-sicher);
  background: var(--md-surface-container);
}
.leiste__reihe { max-width: var(--spalte); height: var(--leiste-h); margin: 0 auto; display: flex; }
.leiste__ziel {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0 0; gap: 4px;
  background: none; border: 0; margin: 0; cursor: pointer;
  font: inherit; color: var(--md-on-surface-variant);
}
.leiste__anzeiger {
  width: 64px; height: 32px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.2s linear;
}
.leiste__anzeiger svg { width: 24px; height: 24px; fill: currentColor; }
.leiste__text { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.5px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.leiste__ziel[aria-selected="true"] { color: var(--md-on-surface); }
.leiste__ziel[aria-selected="true"] .leiste__anzeiger { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.leiste__ziel:hover .leiste__anzeiger { background: rgba(68, 70, 79, 0.08); }
.leiste__ziel[aria-selected="true"]:hover .leiste__anzeiger { background: var(--md-secondary-container); }

/* ── Schutzschirm (Flutter: obscured → Verlauf + «AYLEEN · Geschützter Bereich») ── */
.schirm {
  position: fixed; inset: 0; z-index: 100;
  background: var(--ay-verlauf);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center;
}
.schirm__text { color: var(--weiss); font-size: 23px; line-height: 32.86px; font-weight: 700; }

/* ── Nach-oben-Knopf (Hausbaustein): Anfangsseite unten (links, in rtl rechts), durchscheinend ── */
.ay-top {
  position: fixed; inset-inline-start: 18px; bottom: 18px; z-index: 30;
  width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17, 19, 41, 0.55); color: var(--weiss);
  cursor: pointer; opacity: 0; pointer-events: none;
  transition: opacity 0.2s linear;
}
.ay-top svg { width: 22px; height: 22px; }
.ay-top.ist-da { opacity: 1; pointer-events: auto; }
body.hat-leiste .ay-top { bottom: calc(var(--leiste-h) + var(--unten-sicher) + 12px); }
@media (max-width: 480px) { .ay-top { inset-inline-start: 12px; bottom: 12px; } }

@media (prefers-reduced-motion: reduce) {
  .kopf, .leiste__anzeiger, .ay-top { transition: none; }
}