@font-face{font-family:"Jost";font-style:normal;font-weight:100 900;font-display:swap;src:url("/schriften/jost.woff2") format("woff2")}
/* Grundfarben im TAVIROO-Stil (Petrol, docs/web/gestaltung.md); die Beraterin wählt ihre eigene Palette über data-palette. */
:root{
  --bg:#fff;--fg:#1a2321;--muted:#4b5753;--card:#f6f5f1;--line:#dcdad2;
  --akzent:#0f6b63;--akzent-fg:#fff;--fokus:#0b5751;
  --radius:14px;--max:560px;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0c1110;--fg:#e9efed;--muted:#a9b6b2;--card:#141b1a;--line:#26302e;--akzent:#5ed3c1;--akzent-fg:#0c1110;--fokus:#8fe3d5;}
}
/* Kontraste (WCAG 2.x, relative Luminanz): Schrift auf Akzent (Hell) / Akzent auf Karte #f7f7f7 (Links) - alle >= 4.5:1 */
[data-palette="rose"]{--akzent:#b34a6a;--akzent-fg:#fff}      /* weiss 5.12 / Karte 4.78 */
[data-palette="mint"]{--akzent:#287a67;--akzent-fg:#fff}       /* weiss 5.16 / Karte 4.82 (vorher #2f8f7a: 3.94) */
[data-palette="lavendel"]{--akzent:#6b5bb5;--akzent-fg:#fff}   /* weiss 5.54 / Karte 5.17 */
[data-palette="champagne"]{--akzent:#8c6a2c;--akzent-fg:#fff}  /* weiss 4.98 / Karte 4.65 (vorher #a07a3a: 3.93) */
[data-palette="ozean"]{--akzent:#1f6f9c;--akzent-fg:#fff}      /* weiss 5.51 / Karte 5.14 */
[data-palette="graphit"]{--akzent:#4a4a4a;--akzent-fg:#fff}    /* weiss 8.86 / Karte 8.27 */
/* Dunkel: Schrift #141414 auf Akzent: rose 6.50, mint 8.39, lavendel 7.47, champagne 9.02, ozean 8.21, graphit 8.49 */
@media (prefers-color-scheme:dark){
  [data-palette="rose"]{--akzent:#e07a99;--akzent-fg:#141414}
  [data-palette="mint"]{--akzent:#5cc0a8;--akzent-fg:#141414}
  [data-palette="lavendel"]{--akzent:#a99be6;--akzent-fg:#141414}
  [data-palette="champagne"]{--akzent:#d6b06a;--akzent-fg:#141414}
  [data-palette="ozean"]{--akzent:#6bb6dd;--akzent-fg:#141414}
  [data-palette="graphit"]{--akzent:#b0b0b0;--akzent-fg:#141414}
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);
  font-family:"Jost",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.5;font-size:1.0625rem}
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1;width:100%;max-width:var(--max);margin:0 auto;padding:16px}
footer{max-width:var(--max);margin:0 auto;padding:12px 16px 24px;color:var(--muted);font-size:.9rem;text-align:center}
h1{font-size:1.5rem;margin:.2em 0 .6em}
h2{font-size:1.15rem;margin:.2em 0 .6em}
p{margin:.4em 0}
button{font:inherit;cursor:pointer;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--card);color:var(--fg);padding:12px 16px;min-height:48px}
button.prim{background:var(--akzent);color:var(--akzent-fg);border-color:var(--akzent);font-weight:600}
button.link{background:none;border:none;color:var(--muted);text-decoration:underline;padding:4px;min-height:auto}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--fokus);outline-offset:2px}
a{color:var(--akzent)}
.karte{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:12px 0}
.titelbild{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);background:var(--card)}
.portrait{width:96px;height:96px;border-radius:50%;object-fit:cover;border:2px solid var(--line)}
.kopf{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.slogan{color:var(--muted);font-style:italic}
.fortschritt{height:8px;background:var(--line);border-radius:4px;overflow:hidden;margin:8px 0 16px}
.fortschritt>i{display:block;height:100%;background:var(--akzent);transition:width .2s}
.antworten{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.antworten label{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px;min-height:48px;cursor:pointer}
.antworten input{width:22px;height:22px;flex:none}
textarea,input[type=text],input[type=email],input[type=tel],select{
  width:100%;font:inherit;padding:12px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--bg);color:var(--fg);min-height:48px}
textarea{min-height:120px;resize:vertical}
label.feld{display:block;margin:10px 0}
label.feld>span{display:block;margin-bottom:4px;font-weight:600}
.check{display:flex;gap:10px;align-items:flex-start;margin:10px 0;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:12px}
.check input{margin-top:4px;width:22px;height:22px;flex:none}
.nav{display:flex;gap:10px;justify-content:space-between;margin-top:16px}
.nav button{flex:1}
.fehler{color:#b00020;/* 6.9:1 auf weiss */font-weight:600;margin-top:8px}
@media (prefers-color-scheme:dark){.fehler{color:#ff8a9a}}
.laden{padding:24px;text-align:center;color:var(--muted)}
.hinweis{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:16px}
ul.tipps{margin:.4em 0 .4em 1.2em;padding:0}
.produkt{border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin:10px 0;background:var(--card)}
.produkt .warn{color:var(--muted);font-size:.85rem;margin-top:6px}
dialog{border:none;border-radius:var(--radius);padding:0;max-width:520px;width:92%}
dialog::backdrop{background:rgba(0,0,0,.5)}
dialog form{padding:16px;background:var(--bg);color:var(--fg)}
dialog menu{display:flex;gap:10px;justify-content:flex-end;padding:0;margin:12px 0 0}
dialog label{display:block;margin:10px 0}
dialog label>span{display:block;margin-bottom:4px;font-weight:600}
.klein{font-size:.85rem;color:var(--muted)}
.fehler:empty{display:none}
.statusregion{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1:focus,h2:focus{outline:none}