/* Theo, Webseite. Dieselben Farben und Schriften wie die App.
   Flach, keine Schatten, ein Akzent nur fuer Handlung. Die Webseite ist
   ruhiger und luftiger als die App, dort wird gelesen, nicht gearbeitet. */
@font-face{font-family:"IBM Plex Sans";src:url("/app/schriften/IBMPlexSans.woff2") format("woff2");
  font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/app/schriften/IBMPlexMono-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}

:root{
  --bg:#F4F4F8; --surface:#FFFFFF; --surface-2:#EDEDF4;
  --ink:#14141E; --ink-2:#3E3E52; --muted:#5E5E72; --line:#E2E2EC;
  --accent:#453BA6; --accent-ink:#FFFFFF; --accent-soft:#E8E7F6; --ok:#1F6B42;
  --r:14px; --r-s:8px;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --breite:760px;
  /* Markenfarben wie in der App, an einer Stelle */
  --marke-1:#2B2378; --marke-2:#3C329C; --marke-3:#5A4FC2; --marke-auf-weiss:#ECEBFA;
  --verlauf:linear-gradient(180deg,var(--marke-1) 0%,var(--marke-2) 55%,var(--marke-3) 100%);
  --pfeil-maske:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.4 5.6l6.4 6.4-6.4 6.4'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1E1E28; --surface:#282834; --surface-2:#32323F;
    --ink:#F2F2F8; --ink-2:#D4D4E0; --muted:#A9A9BC; --line:#3A3A4A;
    --accent:#A39CF4; --accent-ink:#15151E; --accent-soft:#383362; --ok:#7FC99B;
  }
}
:root[data-theme="dark"]{
  --bg:#1E1E28; --surface:#282834; --surface-2:#32323F;
  --ink:#F2F2F8; --ink-2:#D4D4E0; --muted:#A9A9BC; --line:#3A3A4A;
  --accent:#A39CF4; --accent-ink:#15151E; --accent-soft:#383362; --ok:#7FC99B;
}

*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6}
a{color:var(--accent);text-underline-offset:4px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.innen{max-width:var(--breite);margin:0 auto;padding:0 20px}
.springen{position:absolute;left:-9999px}
.springen:focus{left:16px;top:12px;z-index:9;background:var(--surface);padding:8px 12px;border-radius:var(--r-s)}

/* Kopf: derselbe Verlauf wie in der App */
.kopf{background:var(--verlauf);color:#fff}
.kopf .leiste{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
.marke{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:600;font-size:19px;min-height:44px}
.marke svg{flex:none}
.kopf .zur-app{color:var(--marke-1);background:#fff;text-decoration:none;font-weight:500;font-size:15.5px;
  padding:10px 16px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
.kopf .zur-app:hover{background:var(--marke-auf-weiss)}
.kopf .buehne{padding-block:48px 72px}
.kopf h1{font-size:clamp(32px,7vw,48px);line-height:1.12;letter-spacing:-0.02em;font-weight:600;margin:0 0 18px;
  text-wrap:balance;max-width:16ch}
.kopf .lead{font-size:clamp(18px,2.4vw,20px);line-height:1.55;margin:0 0 30px;max-width:34ch;color:#E9E7FA}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;
  border-radius:var(--r-s);background:#fff;color:var(--marke-1);font-weight:600;font-size:17px;text-decoration:none}
.knopf:hover{background:var(--marke-auf-weiss)}
.kopf .bald{margin:14px 0 0;font-size:15px;color:#D6D3F4}

/* Startseite: oben zwei Links statt Knopf, der einzige Knopf zur App steht im Text */
nav.oben{display:flex;gap:18px;flex-wrap:nowrap;white-space:nowrap}
@media (min-width:600px){ nav.oben{gap:26px} }
/* Unter 360 px passen Marke und zwei Links nicht auf eine Zeile.
   Datenschutz steht auch unten in der Fusszeile. */
@media (max-width:359px){ nav.oben a[href="/datenschutz/"]{display:none} }
nav.oben a{color:#E9E7FA;text-decoration:none;font-size:15.5px;min-height:44px;display:inline-flex;align-items:center}
nav.oben a:hover{color:#fff;text-decoration:underline}
.kopf a:focus-visible,.kopf .knopf:focus-visible{outline-color:#fff}
.handeln{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px}
.handeln .bald{margin:0}
.privat-kurz{display:flex;align-items:center;gap:8px;margin:30px 0 0;font-size:15px;color:#E9E7FA}
.privat-kurz svg{flex:none}

/* Handy-Ansicht der Auswertung. Flach wie die App: Rahmen statt Schatten.
   Erst ab 900 px, darunter fehlt neben dem Text der Platz, und auf dem
   Handy selbst braucht niemand ein Bild eines Handys. */
.handy{display:none}
@media (min-width:900px){
  .kopf.start .innen,.kopf.start + main .innen{max-width:1120px}
  .kopf.start .buehne{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:72px;align-items:start;padding-block:40px 0}
  .kopf.start .buehne-text{padding-block:28px 80px}
  .kopf.start h1{font-size:52px;max-width:14ch}
  /* Das Handy ragt ueber die Kante des Kopfs, wie die Statuskarte in der App.
     Rechts daneben bleibt der Inhalt frei, damit nichts darunter liegt. */
  .handy{display:flex;flex-direction:column;gap:10px;position:relative;z-index:1;margin:0 0 -150px;
    width:320px;height:600px;border:10px solid #1B1838;border-radius:40px;background:var(--bg);
    overflow:hidden;padding:0 0 12px;color:var(--ink);font-size:13.5px;line-height:1.4}
  .kopf.start + main .start-spalte{margin-right:392px}
}
.handy-kopf{background:var(--verlauf);color:#fff;
  padding:22px 18px 58px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.handy-gruss{font-size:23px;letter-spacing:-0.02em}
.handy-marke{font-size:12.5px;color:#E9E7FA;border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:2px 10px}
.handy-karte{margin:0 12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px}
.handy-zahlen{margin-top:-54px;display:flex;flex-direction:column}
.handy-zahlen .klein{color:var(--muted);font-size:12.5px}
.handy-zahlen .gross{font-family:var(--mono);font-size:32px;font-weight:500;letter-spacing:-0.03em;line-height:1.1;margin-bottom:10px}
.handy-zahlen .mittel{font-family:var(--mono);font-size:20px;font-weight:500;letter-spacing:-0.02em}
.handy-titel{display:block;font-weight:600;font-size:15px;margin-bottom:4px}
.handy-posten{list-style:none;margin:0;padding:0}
.handy-posten li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.handy-posten li:last-child{border-bottom:0;padding-bottom:0}
.handy-posten .zahl{font-family:var(--mono);white-space:nowrap}
.handy-ok{display:flex;align-items:center;gap:10px}
.handy-ok .haken{flex:none;width:26px;height:26px;border-radius:50%;border:1.6px solid var(--ok);color:var(--ok);
  display:grid;place-items:center}

/* Seitenkopf der Unterseiten: schmaler, ohne Buehne */
.kopf.schmal .buehne{padding-block:28px 40px}
.kopf.schmal h1{font-size:clamp(28px,5.5vw,38px);margin:0}

main{padding-block:56px 72px}
section+section{margin-top:64px}
h2{font-size:clamp(22px,3.4vw,27px);line-height:1.25;letter-spacing:-0.01em;margin:0 0 20px;font-weight:600;text-wrap:balance}
h3{font-size:18px;margin:0 0 6px;font-weight:600}
p{margin:0 0 14px}

/* Vier Punkte: Raster mit feinen Linien statt Karten */
.punkte{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0;
  border-top:1px solid var(--line)}
.punkt{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:22px 0;border-bottom:1px solid var(--line)}
@media (min-width:700px){
  .punkt:nth-child(odd){padding-right:28px}
  .punkt:nth-child(even){padding-left:28px;border-left:1px solid var(--line)}
}
.punkt .sym{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center}
.punkt p{color:var(--ink-2);margin:0}

/* Schritte */
ol.schritte{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:14px}
ol.schritte li{counter-increment:s;display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:baseline;color:var(--ink-2)}
ol.schritte li::before{content:counter(s);font-family:var(--mono);font-size:15px;color:var(--accent);background:var(--accent-soft);
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;align-self:start}

/* Hervorgehobener Absatz ohne Schatten, auf getoenter Flaeche */
.flaeche{background:var(--accent-soft);border-radius:var(--r);padding:26px 24px}
.flaeche p{margin:0;color:var(--ink-2)}
.flaeche h2{margin-bottom:10px}

/* Lesetexte: Datenschutz, Impressum, Fragen */
.text{max-width:680px}
.text h2{margin-top:44px}
.text h2:first-child{margin-top:0}
.text p,.text li{color:var(--ink-2)}
.text ul{padding-left:22px;margin:0 0 14px}
.text li{margin-bottom:6px}
.adresse{font-style:normal;line-height:1.7}
/* Tippflaeche 44 px, ohne die Zeilen der Adresse auseinanderzuschieben */
.adresse a{display:inline-flex;align-items:center;min-height:44px;margin-block:-11px}
.stand{font-size:15px;color:var(--muted);margin-top:40px}

/* Fragen: aufklappbar, wie in der App */
details.frage{border-bottom:1px solid var(--line)}
details.frage:first-of-type{border-top:1px solid var(--line)}
details.frage summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0;font-weight:600;font-size:17px;min-height:44px}
details.frage summary::-webkit-details-marker{display:none}
details.frage summary::after{content:"";flex:none;width:18px;height:18px;background:var(--muted);-webkit-mask:var(--pfeil-maske) center / contain no-repeat;mask:var(--pfeil-maske) center / contain no-repeat;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
details.frage[open] summary::after{transform:rotate(90deg)}
details.frage .antwort{padding:0 0 14px}
.gruppe{margin-top:44px}
.gruppe:first-child{margin-top:0}

/* Fuss */
footer{border-top:1px solid var(--line);padding-block:28px 40px;color:var(--muted);font-size:15px}
footer nav{display:flex;flex-wrap:wrap;gap:0 22px;margin-bottom:6px}
footer a{color:var(--ink-2)}
/* Tippflaeche 44 px wie ueberall sonst. Vorher 24 px, fuer aeltere
   Menschen schwer zu treffen (technische Pruefung 27.09.2026). */
footer nav a{display:inline-flex;align-items:center;min-height:44px}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}