:root{
  --grund:#F3EDE1;
  --karte:#FDFAF4;
  --tinte:#2E2A21;
  --tinte-2:#75705F;
  --linie:#DFD5C3;
  --fahrt:#4E7A3C;
  --fahrt-flaeche:#E3EBD4;
  --gesuch:#A9601C;
  --gesuch-flaeche:#F6E4CD;
  --warn:#9A3520;
  --fokus:#4E7A3C;
  --losung:#3A5A80;
  --losung-flaeche:#DEE8F1;
  --r-gross:14px;
  --r-mittel:10px;
  --r-klein:8px;
  --schatten:0 1px 0 rgba(46,42,33,.05), 0 4px 14px -8px rgba(46,42,33,.22);
  --schatten-hoch:0 18px 40px -14px rgba(46,42,33,.4);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --grund:#191612;
    --karte:#221E19;
    --tinte:#EFE8DA;
    --tinte-2:#A69E8C;
    --linie:#332D25;
    --fahrt:#9CC183;
    --fahrt-flaeche:#25301C;
    --gesuch:#E0A868;
    --gesuch-flaeche:#33230F;
    --warn:#DE8A72;
    --fokus:#9CC183;
    --losung:#A9C4DE;
    --losung-flaeche:#1B2733;
    --schatten:0 1px 0 rgba(0,0,0,.3);
    --schatten-hoch:0 18px 40px -14px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"]{
  --grund:#191612;
  --karte:#221E19;
  --tinte:#EFE8DA;
  --tinte-2:#A69E8C;
  --linie:#332D25;
  --fahrt:#9CC183;
  --fahrt-flaeche:#25301C;
  --gesuch:#E0A868;
  --gesuch-flaeche:#33230F;
  --warn:#DE8A72;
  --fokus:#9CC183;
  --losung:#A9C4DE;
  --losung-flaeche:#1B2733;
  --schatten:0 1px 0 rgba(0,0,0,.3);
  --schatten-hoch:0 18px 40px -14px rgba(0,0,0,.75);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--grund);
  color:var(--tinte);
  font-family:"Nunito Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16.5px;line-height:1.55;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
.huelle{max-width:720px;margin:0 auto;padding:0 16px 72px}
.titel{font-family:"Fraunces","Georgia",serif;font-weight:700}

/* ---------- Kopf ---------- */
header.kopf{padding:32px 0 20px}
header.kopf h1{
  font-family:"Fraunces","Georgia",serif;font-weight:700;
  font-size:clamp(31px,8vw,44px);line-height:1.08;letter-spacing:-.015em;margin:0;
}
header.kopf .gleis{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px;font-size:15.5px;color:var(--tinte-2)}
header.kopf .gleis b{color:var(--tinte);font-weight:700}

/* ---------- Große Knöpfe ---------- */
.aktionen{display:grid;grid-template-columns:1fr;gap:12px;margin:8px 0 26px}
@media (min-width:560px){.aktionen{grid-template-columns:1fr 1fr}}
.tastebig{
  font:700 17px/1.3 "Fraunces","Georgia",serif;text-align:left;padding:16px 18px;
  border-radius:var(--r-gross);cursor:pointer;
  background:var(--karte);color:var(--tinte);
  border:1.5px solid var(--linie);box-shadow:var(--schatten);
  transition:background .15s ease;
}
.tastebig span{
  display:block;font-family:"Nunito Sans",sans-serif;font-weight:400;
  font-size:14.5px;color:var(--tinte-2);margin-top:5px;line-height:1.4;
}
.tastebig.f{border-color:#C4D3AE}
.tastebig.g{border-color:#E4C79E}
.tastebig.f:hover{background:var(--fahrt-flaeche)}
.tastebig.g:hover{background:var(--gesuch-flaeche)}
.tastebig:disabled{opacity:.5;cursor:not-allowed;background:var(--karte)}

/* ---------- Filterleiste ---------- */
.filter{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding:12px 0;position:sticky;top:0;z-index:5;
  background:linear-gradient(var(--grund) 80%, rgba(0,0,0,0));
}
.reiter{
  font:600 14.5px/1 inherit;padding:9px 15px;border-radius:99px;
  border:1.5px solid var(--linie);background:var(--karte);color:var(--tinte-2);cursor:pointer;
}
.reiter[aria-pressed="true"]{background:var(--tinte);color:var(--karte);border-color:var(--tinte)}
.filter .waehler{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.filter select{
  font:600 14.5px inherit;padding:9px 12px;border-radius:99px;cursor:pointer;
  background:var(--karte);color:var(--tinte);border:1.5px solid var(--linie);
}

/* ---------- Brett ---------- */
.tagkopf{
  font-family:"Fraunces","Georgia",serif;font-weight:600;font-size:17px;
  color:var(--tinte-2);margin:26px 0 11px;
}
.eintrag{
  display:grid;grid-template-columns:80px 1fr;gap:16px;align-items:start;
  background:var(--karte);border:1.5px solid var(--linie);border-radius:var(--r-gross);
  padding:16px;margin-bottom:12px;box-shadow:var(--schatten);
}
.zeit{
  border-radius:var(--r-mittel);padding:11px 6px 10px;text-align:center;
  font-family:"Fraunces","Georgia",serif;
}
.f .zeit{background:var(--fahrt-flaeche);color:var(--fahrt)}
.g .zeit{background:var(--gesuch-flaeche);color:var(--gesuch)}
.zeit .uhr{display:block;font-weight:700;font-size:22px;line-height:1}
.zeit .bis{
  display:block;margin-top:4px;font-family:"Nunito Sans",sans-serif;
  font-size:12px;font-weight:600;opacity:.75;
}
.zeit .marke{
  display:block;margin-top:9px;font-family:"Nunito Sans",sans-serif;
  font-size:12px;font-weight:700;opacity:.9;
}
.route{
  margin:2px 0 0;font-family:"Fraunces","Georgia",serif;font-weight:600;
  font-size:20px;line-height:1.28;
}
.route .pfeil{color:var(--tinte-2);padding:0 7px;font-weight:400}
.ueber{margin:6px 0 0;font-size:14.5px;color:var(--tinte-2)}
.zeile{margin:7px 0 0;font-size:15px;color:var(--tinte-2)}
.zeile b{font-weight:700;color:var(--tinte)}
.notiz{margin:8px 0 0;font-size:15px;color:var(--tinte-2);white-space:pre-wrap}
.fuss{display:flex;gap:14px;align-items:center;margin-top:14px;flex-wrap:wrap}
.tat{
  font:700 15px inherit;padding:10px 18px;border-radius:99px;cursor:pointer;
  border:1.5px solid var(--fahrt);background:var(--fahrt-flaeche);color:var(--fahrt);
}
.tat:hover{filter:brightness(.97)}
.tat.voll{border-color:var(--linie);background:transparent;color:var(--tinte-2);cursor:not-allowed}
.leiser{background:none;border:0;padding:0;font:600 14.5px inherit;color:var(--warn);cursor:pointer}
.leiser:hover{text-decoration:underline}
.status{font-size:14.5px;color:var(--tinte-2)}

details.treffer{margin-top:12px}
details.treffer summary{
  cursor:pointer;font-size:14.5px;font-weight:700;color:var(--fokus);
  list-style:none;display:inline-flex;gap:7px;align-items:center;
}
details.treffer summary::-webkit-details-marker{display:none}
details.treffer summary::after{content:"▾";font-size:10px}
details.treffer[open] summary::after{content:"▴"}
details.treffer ul{margin:9px 0 0;padding:0;list-style:none;font-size:14.5px}
details.treffer li{
  margin:0 0 6px;color:var(--tinte-2);padding:9px 12px;
  background:var(--grund);border-radius:var(--r-klein);
}

/* ---------- Deine Fahrten ---------- */
.meins{margin:6px 0}
.meins h2{font-family:"Fraunces","Georgia",serif;font-weight:700;font-size:22px;margin:0 0 12px}
.block{
  background:var(--karte);border:1.5px solid var(--linie);border-radius:var(--r-gross);
  padding:17px;margin-bottom:12px;box-shadow:var(--schatten);
  border-left:5px solid var(--fokus);
}
.block.wartet{border-left-color:var(--gesuch)}
.block.fix{border-left-color:var(--fahrt)}
.block h3{font-family:"Fraunces","Georgia",serif;font-weight:600;font-size:18px;margin:0 0 6px}
.block p{margin:4px 0;font-size:15px}
.block .klein{font-size:14.5px;color:var(--tinte-2)}
.knopfzeile{display:flex;gap:9px;margin-top:15px;flex-wrap:wrap}
.knopfzeile button{
  font:700 14.5px inherit;padding:10px 17px;border-radius:99px;cursor:pointer;
  border:1.5px solid var(--tinte);background:var(--tinte);color:var(--karte);
}
.knopfzeile button.sek{background:transparent;color:var(--tinte)}
.knopfzeile button.rot{background:transparent;color:var(--warn);border-color:var(--warn)}
.knopfzeile button:hover{filter:brightness(1.08)}

/* ---------- Losung ---------- */
.losungsfeld{
  background:var(--losung-flaeche);color:var(--losung);
  padding:14px 16px;margin-top:15px;border-radius:var(--r-mittel);
}
.losungsfeld>b{font-size:14px;font-weight:700}
.losungsfeld .paarung{display:flex;gap:24px;flex-wrap:wrap;margin-top:10px}
.losungsfeld .wort{
  font-family:"Fraunces","Georgia",serif;font-weight:700;font-size:26px;line-height:1.1;
}
.losungsfeld .rolle{
  display:block;font-family:"Nunito Sans",sans-serif;font-weight:600;
  font-size:13px;opacity:.85;margin-top:3px;
}
.losungsfeld .regel{margin:12px 0 0;font-size:13.5px;opacity:.9}

/* ---------- Chat ---------- */
details.chat{margin-top:15px;border-top:1.5px solid var(--linie);padding-top:12px}
details.chat summary{
  cursor:pointer;font-size:15px;font-weight:700;color:var(--fokus);
  list-style:none;display:flex;gap:8px;align-items:center;
}
details.chat summary::-webkit-details-marker{display:none}
details.chat summary::after{content:"▾";font-size:10px;margin-left:auto}
details.chat[open] summary::after{content:"▴"}
.neu{
  background:var(--gesuch);color:var(--karte);font-size:12px;font-weight:700;
  padding:2px 9px;border-radius:99px;
}
.verlauf{max-height:250px;overflow-y:auto;margin:12px 0 0}
.verlauf .stumm{color:var(--tinte-2);font-size:14px;margin:0}
.msg{
  margin:0 0 8px;font-size:15px;line-height:1.45;
  background:var(--grund);padding:10px 13px;border-radius:var(--r-mittel);
}
.msg.ich{background:var(--fahrt-flaeche)}
.msg .wer{font-weight:700;font-size:13.5px}
.msg.ich .wer{color:var(--fahrt)}
.msg .uhrzeit{color:var(--tinte-2);font-size:12px;margin-left:6px}
.msg .text{display:block;white-space:pre-wrap;word-break:break-word;margin-top:2px}
.senden{display:flex;gap:8px;margin-top:11px}
.senden input{
  flex:1;font:400 16px inherit;padding:11px 14px;border-radius:99px;
  background:var(--grund);color:var(--tinte);border:1.5px solid var(--linie);
}
.senden button{
  font:700 14.5px inherit;padding:11px 19px;border-radius:99px;cursor:pointer;
  border:1.5px solid var(--fokus);background:var(--fokus);color:var(--karte);
}

/* ---------- Formulare ---------- */
dialog{border:0;padding:0;background:transparent;max-width:100%;width:100%}
dialog::backdrop{background:rgba(35,30,22,.5)}
.karte{
  background:var(--karte);color:var(--tinte);max-width:540px;margin:0 auto;
  padding:24px 20px 22px;border-radius:var(--r-gross);box-shadow:var(--schatten-hoch);
  border-top:5px solid var(--tinte);
}
.karte.f{border-top-color:var(--fahrt)}
.karte.g{border-top-color:var(--gesuch)}
.karte.a{border-top-color:var(--losung)}
.karte h2{font-family:"Fraunces","Georgia",serif;font-weight:700;font-size:24px;margin:0 0 5px}
.karte .erklaer{margin:0 0 18px;color:var(--tinte-2);font-size:15px}
.feld{margin-bottom:15px}
.feld label{display:block;font-size:14.5px;font-weight:700;margin-bottom:5px}
.feld .hilfe{display:block;font-weight:400;color:var(--tinte-2);font-size:13.5px;margin:-2px 0 6px}
.feld input,.feld select{
  width:100%;font:400 16px inherit;padding:11px 13px;border-radius:var(--r-klein);
  background:var(--grund);color:var(--tinte);border:1.5px solid var(--linie);
}
.feld select{cursor:pointer}
.fenster{margin:9px 0 0;font-size:14.5px;font-weight:700;color:var(--fokus)}
.hinweiszeile{margin:-6px 0 15px;font-size:13.5px;color:var(--tinte-2)}
.paar{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.schalter{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:var(--grund);padding:5px;border-radius:99px;border:1.5px solid var(--linie)}
.schalter button{
  font:600 14.5px inherit;padding:10px 6px;border-radius:99px;cursor:pointer;
  border:0;background:transparent;color:var(--tinte-2);
}
.schalter button[aria-pressed="true"]{background:var(--karte);color:var(--tinte);box-shadow:var(--schatten)}
:focus-visible{outline:2.5px solid var(--fokus);outline-offset:2px}
.knopfreihe{display:flex;gap:10px;margin-top:20px}
.knopfreihe button{
  flex:1;font:700 16px inherit;padding:13px;border-radius:99px;cursor:pointer;
  border:1.5px solid var(--tinte);background:var(--tinte);color:var(--karte);
}
.knopfreihe button.sek{background:transparent;color:var(--tinte)}
.fehler{color:var(--warn);font-size:14.5px;font-weight:600;margin:10px 0 0;min-height:1px}

/* ---------- Sonstiges ---------- */
.leer{
  padding:44px 20px;text-align:center;color:var(--tinte-2);
  background:var(--karte);border:1.5px dashed var(--linie);border-radius:var(--r-gross);
}
.leer p{margin:0 0 6px;font-size:16px}
.banner{
  margin:0 0 18px;padding:13px 15px;border-radius:var(--r-mittel);
  background:var(--karte);border:1.5px solid var(--linie);
  border-left:5px solid var(--warn);font-size:14.5px;color:var(--tinte-2);
}
footer.ende{margin-top:38px;padding-top:20px;border-top:1.5px solid var(--linie);font-size:13.5px;color:var(--tinte-2)}
footer.ende p{margin:0 0 7px}
footer.ende a{color:var(--fokus);font-weight:700}
footer.ende .rechts{margin-top:14px}

/* ---------- Rechtstexte ---------- */
.text{max-width:640px;margin:0 auto;padding:32px 16px 80px}
.text h1{font-family:"Fraunces","Georgia",serif;font-weight:700;font-size:32px;margin:0 0 8px}
.text h2{font-family:"Fraunces","Georgia",serif;font-weight:600;font-size:19px;margin:30px 0 8px}
.text p,.text li{font-size:15.5px;line-height:1.7}
.text ul{padding-left:20px}
.text a{color:var(--fokus)}
.text .zurueck{
  display:inline-block;margin-bottom:22px;font-weight:700;font-size:14.5px;
  color:var(--tinte);text-decoration:none;background:var(--karte);
  padding:9px 17px;border-radius:99px;border:1.5px solid var(--linie);
}
.text .stand{color:var(--tinte-2);font-size:14px}