.app[data-einstieg="true"] {
  --en-grund:#2b191e;
  --en-text:#f3e9ec;
  --en-leise:#c1aeb4;
  --en-akzent:#71d8b6;
  --en-linie:#503b43;
  background:var(--en-grund);
  color:var(--en-text);
}
html.hell .app[data-einstieg="true"] {
  --en-grund:#ffffff;
  --en-text:#181b1d;
  --en-leise:#60686b;
  --en-akzent:#067653;
  --en-linie:#e6e9ea;
}
.app[data-einstieg="true"] > .kopf,
.app[data-einstieg="true"] > .band,
.app[data-einstieg="true"] > .leiste { display:none; }
.app[data-einstieg="true"] > .inhalt { padding:0; }
#bildWillkommen[data-an="1"] { animation:none; }
.en {
  min-height:100dvh;
  padding:calc(12px + env(safe-area-inset-top)) 24px calc(12px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  font-family:var(--schrift);
  letter-spacing:0;
}
.en__kopf { display:flex; align-items:center; gap:8px; min-height:44px; }
.en__marke { display:flex; align-items:center; gap:8px; margin-right:auto; font-size:17px; font-weight:800; }
.en__marke img { object-fit:contain; filter:brightness(0) invert(1); }
html.hell .en__marke img { filter:brightness(0); }
.en__licht { display:grid; place-items:center; width:40px; height:44px; flex:none; }
.en__licht svg { width:19px; height:19px; }
.en__skip { min-height:44px; padding:0 2px; font-size:12px; font-weight:600; color:var(--en-leise); }
.en__intro { padding:30px 0 26px; }
.en__eyebrow { margin:0 0 8px; color:var(--en-leise); font-size:12px; font-weight:650; }
.en h1 { margin:0; font-family:var(--schrift); font-size:30px; line-height:1.16; font-weight:800; letter-spacing:0; }
.en h1 span { color:var(--en-akzent); }
.en__intro > p:last-child { margin:14px 0 0; max-width:28em; font-size:14px; line-height:1.5; color:var(--en-leise); }
.en__themen { min-width:0; margin:0; padding:0; border:0; }
.en__themen legend { width:100%; padding:0; font-size:15px; font-weight:750; }
.en__themen legend span { float:right; font-size:12px; color:var(--en-leise); font-weight:500; line-height:23px; }
.en__raster { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px 8px; padding:22px 0 6px; }
.en__thema { position:relative; min-width:0; min-height:96px; display:flex; flex-direction:column; align-items:center; cursor:pointer; }
.en__thema input { position:absolute; inset:0; z-index:1; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.en__objekt { position:relative; display:grid; place-items:center; width:70px; height:66px; }
.en__objekt img { display:block; width:64px; height:64px; object-fit:contain; transition:transform .2s var(--kurve); }
.en__wahl { position:absolute; right:-1px; top:-3px; width:19px; height:19px; display:grid; place-items:center; background:var(--en-akzent); color:var(--en-grund); border:2px solid var(--en-grund); border-radius:50%; opacity:0; transform:scale(.7); transition:opacity .16s, transform .2s var(--kurve); }
.en__wahl svg { width:12px; height:12px; }
.en__name { max-width:100%; padding:7px 0 5px; text-align:center; border-bottom:2px solid transparent; font-size:11px; line-height:16px; font-weight:650; }
.en__thema input:checked ~ .en__objekt .en__wahl { opacity:1; transform:scale(1); }
.en__thema input:checked ~ .en__name { color:var(--en-akzent); border-color:var(--en-akzent); }
.en__thema:has(input:focus-visible) { outline:2px solid var(--en-akzent); outline-offset:3px; border-radius:6px; }
.en button:focus-visible { outline:2px solid var(--en-akzent); outline-offset:3px; }
.en__status { margin:12px 0 20px; min-height:20px; font-size:12px; line-height:20px; color:var(--en-leise); }
.en__fuss { margin-top:auto; padding-top:18px; border-top:1px solid var(--en-linie); }
.en .en__weiter { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:50px; padding:12px 18px; font-size:15px; border-radius:12px; }
.en__weiter svg { width:20px; height:20px; }
.en__anmelden { display:block; width:100%; min-height:44px; margin-top:4px; font-size:12px; color:var(--en-leise); }
.en__anmelden b { margin-left:3px; color:var(--en-text); font-weight:750; }
.en__menue { margin:0 0 22px; }
.en__menue h2 { margin:8px 0 10px; font-size:18px; font-family:var(--schrift); }
.en__menue button { display:flex; align-items:center; gap:12px; width:100%; min-height:54px; border-bottom:1px solid var(--linie); padding:10px 0; font-size:14px; text-align:left; }
.en__menue button svg { width:20px; height:20px; color:var(--text-leise); flex:none; }
.en__menue button svg:last-child { margin-left:auto; width:16px; }
.en--flow .en__content { flex:1; padding:24px 0; }
.en--flow .en__copy { min-height:148px; padding-bottom:22px; }
.en--flow h1 { font:750 28px/1.18 var(--anzeige); letter-spacing:0; overflow-wrap:break-word; }
.en h1:focus { outline:none; }
.en__copy p { margin:12px 0 0; font-size:14px; line-height:1.6; color:var(--en-leise); }
.en__illustration { margin-inline:-24px; padding:12px 24px; background:#dfecfa; }
.en__illustration[data-tone="green"] { background:#e8f2eb; }
.en__illustration .app-art { width:100%; max-width:300px; height:auto; margin:0 auto; }
.en__schritt { display:flex; align-items:center; gap:10px; margin:-10px 0 14px; min-height:44px; color:var(--en-leise); font-size:12px; }
.en__zurueck { display:grid; place-items:center; flex:none; width:44px; height:44px; margin-left:-10px; border-radius:8px; color:var(--en-text); }
.en__zurueck:disabled { visibility:hidden; }
.en__zurueck svg { width:20px; height:20px; }
.en__zaehler { margin-left:auto; font-variant-numeric:tabular-nums; white-space:nowrap; }
.en__fortschritt { display:flex; justify-content:center; gap:6px; padding:22px 0 0; }
.en__fortschritt span { width:26px; height:4px; border-radius:2px; background:var(--en-linie); }
.en__fortschritt [data-erreicht="true"] { background:var(--en-akzent); }
.en__primaer, .en__sekundaer {
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; min-height:52px; padding:12px 14px; border:1px solid transparent;
  border-radius:8px; font:650 14px/1.4 var(--schrift); letter-spacing:0; text-align:center;
}
.en__primaer { background:#f3e9ec; color:#24181e; }
html.hell .en__primaer { background:#18191b; color:#ffffff; }
.en__primaer svg { width:18px; height:18px; flex:none; }
.en__sekundaer { margin-top:8px; border-color:var(--en-linie); background:transparent; color:var(--en-text); }
.en__primaer:active, .en__sekundaer:active { transform:translateY(1px); }
.en__namecontent { flex:1; width:100%; max-width:380px; margin:0 auto; padding:28px 0; display:flex; flex-direction:column; justify-content:center; }
/* Die Zeichnungen sind weisses Strichbild und liegen per
   mix-blend-mode:multiply auf (app-illustrations.css). Multiply braucht
   einen HELLEN Grund: Weiss wird durchsichtig, die Linien bleiben. Auf der
   dunklen App-Flaeche wird daraus ein fast schwarzer Fleck - so stand es
   auf dem ALLERERSTEN Bildschirm ("Wie heisst du?"), gesehen 08.09.2026.
   Sie bekommt deshalb dieselbe helle Platte wie die Zeichnung einen
   Schritt spaeter (.en__illustration). */
.en__namebild {
  width:max-content; max-width:100%; margin:0 auto 24px;
  padding:14px 20px; border-radius:16px; background:#dfecfa;
}
.en__namebild > .app-art { width:180px; max-width:100%; height:auto; margin:0; }
.en__nameform { margin-top:26px; }
.en__nameform label { display:block; margin-bottom:8px; font-size:13px; font-weight:650; }
.en__nameform input { display:block; width:100%; min-height:54px; padding:12px 14px; border:1px solid var(--en-linie); border-radius:8px; background:transparent; color:var(--en-text); font:500 18px/1.4 var(--schrift); }
.en__nameform input:focus { outline:2px solid var(--en-akzent); outline-offset:2px; }
.en__nameform input[aria-invalid="true"] { border-color:#f36f79; }
.en__namefehler { min-height:22px; margin:8px 0 12px; color:var(--en-leise); font-size:12px; line-height:1.5; }
.en__namefuss { padding-top:12px; }
@media (max-height:680px) {
  .en__namecontent { padding:16px 0; }
  .en__namebild { margin-bottom:16px; padding:10px 14px; }
  .en__namebild > .app-art { width:112px; }
  .en__nameform { margin-top:18px; }
}
@media (max-height:680px) {
  .en--flow .en__content { padding-top:16px; }
  .en__illustration .app-art { max-width:220px; }
}
@media (hover:hover) {
  .en__thema:hover img { transform:translateY(-3px) rotate(-3deg); }
  .en__skip:hover, .en__anmelden:hover { color:var(--en-text); }
}
@media (max-width:359px) {
  .en { padding-inline:18px; }
  .en h1 { font-size:26px; }
  .en__intro { padding:16px 0 20px; }
  .en__raster { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 8px; padding-top:16px; }
  .en__objekt, .en__objekt img { width:54px; height:54px; }
  .en__thema { min-height:84px; }
  .en__status { margin-bottom:14px; }
  .en__marke { gap:5px; font-size:16px; }
  .en--flow h1 { font-size:25px; }
  .en__illustration { margin-inline:-18px; padding-inline:18px; }
}
@media (prefers-reduced-motion:no-preference) {
  .en__intro { animation:enRein .3s var(--kurve) both; }
  .en__thema { animation:enRein .3s var(--kurve) both; animation-delay:calc(var(--en-i) * 30ms); }
  .en--flow .en__copy, .en--flow .en__illustration { animation:enRein .24s var(--kurve) both; }
}
@media (prefers-reduced-motion:reduce) {
  .en *, .en *::before, .en *::after { animation:none !important; transition:none !important; }
}
@keyframes enRein { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }