/* Content Fabrik – ein Design für alle Seiten. Mobil zuerst, wenig Text, Details zum Aufklappen. */
@font-face{font-family:"Instrument Sans";src:url(/fonts/InstrumentSans.ttf) format("truetype");font-weight:400 700;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/fonts/InstrumentSerif-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/fonts/InstrumentSerif-Italic.ttf) format("truetype");font-style:italic;font-display:swap}
@font-face{font-family:"Marke";src:url(/fonts/marke.ttf) format("truetype");font-weight:700;font-display:swap}
:root{--bg:#ece8e0;--card:#faf8f4;--card2:#f3f0ea;--line:#ddd6ca;--ink:#1b1d21;--ink2:#464a52;--mute:#80838b;
  --accent:#b8401f;--accent2:#d4572e;--accent-soft:rgba(184,64,31,.09);--dark:#191b20;--dark2:#262930;--on-dark:#f1eee8;--on-dark2:#a9abb2;
  --ok:#2e8b57;--ok-soft:rgba(46,139,87,.11);--warn:#b7791f;--warn-soft:rgba(183,121,31,.12);--bad:#c0392b;--bad-soft:rgba(192,57,43,.1);
  --r:16px;--r2:11px;--shadow:0 1px 2px rgba(25,27,32,.05),0 6px 20px rgba(25,27,32,.06);
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--serif:"Instrument Serif",Georgia,serif;color-scheme:light}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg)}
body{margin:0;color:var(--ink);font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;padding-bottom:calc(88px + env(safe-area-inset-bottom))}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--accent)}
[hidden]{display:none!important}
/* Kopf */
.kopf{background:var(--dark);color:var(--on-dark);padding:calc(env(safe-area-inset-top) + 18px) 16px 22px;border-radius:0 0 24px 24px}
.kopf .in,main{max-width:640px;margin:0 auto}
main{padding:0 16px}
.marke{display:flex;justify-content:space-between;align-items:center;gap:12px}
.wm{font:700 15px/1 Marke,var(--sans);letter-spacing:.14em;text-transform:uppercase}
.wm b{color:var(--accent2)}
.wm small{display:block;font:500 11px var(--sans);letter-spacing:.24em;color:var(--on-dark2);margin-top:5px}
.rechts{font-size:12.5px;color:var(--on-dark2);text-align:right}
.kopf h1{font:400 32px/1.1 var(--serif);margin:16px 0 0}
.kopf h1 em{color:var(--accent2)}
.kopf .klein{display:block;font:600 11.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);margin-top:16px}
.kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.kachel{background:var(--dark2);border-radius:var(--r2);padding:10px;text-decoration:none;color:inherit;min-width:0}
.kachel small{display:block;font:600 10.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kachel b{display:block;font:600 21px/1.1 var(--sans);margin-top:5px}
.kachel b span{font-size:13px;font-weight:500;color:var(--on-dark2)}
/* Abschnitte und Karten */
.abschnitt{margin-top:24px}
.ueber{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 2px 10px;font:600 13px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.ueber button{font:500 14px var(--sans);letter-spacing:0;text-transform:none;color:var(--accent);background:none;border:0;padding:0;cursor:pointer}
.ueber span{font:500 13px var(--sans);letter-spacing:0;text-transform:none;color:var(--mute)}
.karte{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.leer{color:var(--mute);font-size:14.5px;text-align:center;padding:6px 0}
.zeile{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit;cursor:pointer;width:100%;background:none;border-left:0;border-right:0;border-bottom:0;text-align:left}
.zeile:first-child{border-top:0;padding-top:0}.zeile:last-child{padding-bottom:0}
.zeile .txt{flex:1;min-width:0}
.zeile b{display:block;font-weight:600;line-height:1.3}
.zeile small{display:block;color:var(--mute);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zeile .pfeil{color:var(--mute)}
.punkt{width:10px;height:10px;border-radius:50%;background:var(--line);flex:none}
.punkt.ok{background:var(--ok)}.punkt.warn{background:var(--warn)}.punkt.bad{background:var(--bad)}.punkt.lauf{background:var(--accent);animation:puls 1.2s ease-in-out infinite}
@keyframes puls{50%{opacity:.35}}
details.zeile{display:block}details>summary{list-style:none;cursor:pointer}details>summary::-webkit-details-marker{display:none}
/* Knöpfe und Felder */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:11px 16px;font-weight:600;cursor:pointer;text-decoration:none;color:var(--ink)}
.btn.a{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.d{background:var(--dark);border-color:var(--dark);color:#fff}
.btn.voll{width:100%}
.btn:disabled{opacity:.55}
.reihe{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.reihe .btn{flex:1}
.gross{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gross .btn{flex-direction:column;padding:18px 10px;border-radius:var(--r);font-size:17px}
.gross .btn small{font-weight:500;font-size:13px;opacity:.8}
label.fl{display:block;font:600 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:12px}
.fl input,.fl textarea,.fl select,textarea.feld,input.feld{display:block;width:100%;margin-top:5px;font:400 16px var(--sans);letter-spacing:0;text-transform:none;background:var(--card2);border:1px solid var(--line);border-radius:var(--r2);padding:11px 12px;color:var(--ink)}
textarea.feld{min-height:120px;font:14.5px/1.5 var(--sans)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--card2);border-radius:999px;padding:7px 12px;font-size:14px;cursor:pointer}
.chip.on{background:var(--dark);border-color:var(--dark);color:#fff}
.hinweis{background:var(--warn-soft);color:var(--warn);border-radius:12px;padding:10px 12px;font-size:14px;margin-top:14px}
.hinweis.bad{background:var(--bad-soft);color:var(--bad)}
.ampel{display:inline-block;border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:600}
.ampel.gruen{background:var(--ok-soft);color:var(--ok)}.ampel.gelb{background:var(--warn-soft);color:var(--warn)}.ampel.rot{background:var(--bad-soft);color:var(--bad)}
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--dark);color:#fff;border-radius:12px;padding:10px 16px;font-size:14.5px;z-index:9999;box-shadow:var(--shadow)}
/* Blatt (von unten) */
.blatt{position:fixed;inset:0;z-index:9500;background:rgba(18,19,22,.45);display:none;align-items:flex-end;justify-content:center}
.blatt.on{display:flex}
.blatt .in{width:100%;max-width:640px;max-height:92vh;overflow:auto;background:var(--card);border-radius:22px 22px 0 0;padding:12px 16px calc(18px + env(safe-area-inset-bottom))}
.blatt h3{margin:4px 0 0;font:400 26px/1.15 var(--serif)}
.griff{width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 10px}
/* Leiste unten */
#nav{position:fixed;left:0;right:0;bottom:0;z-index:9000;background:rgba(25,27,32,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
#nav .in{max-width:640px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
#nav a{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0 5px;color:#9a9da5;text-decoration:none;font:600 11px/1 var(--sans)}
#nav a svg{width:24px;height:24px}
#nav a.on{color:#fff}#nav a.on svg{color:var(--accent2)}
#nav em{position:absolute;top:2px;left:calc(50% + 6px);font:700 10.5px/1 var(--sans);font-style:normal;background:var(--accent2);color:#fff;border-radius:9px;padding:3px 6px}
#nav em:empty{display:none}