/* Erhebungs-App — Gestaltung.
   Formensprache nach apple.com, aber mit eigenem Anspruch: SF-Systemschrift,
   Weiß auf Hellgrau, Haarlinien, Pillenknöpfe, EIN Blau. Keine externen
   Schriften — die Systemschrift ist auf jedem Gerät die richtige. Keine Emoji
   als Symbole. Bewegung nur dort, wo sie Bedeutung trägt, und immer hinter
   prefers-reduced-motion. Auswahloptionen sind berührbare Zeilen, keine
   nackten Radioknöpfe — die ganze Zeile ist das Ziel, nicht der Punkt. */

:root{
  --papier:#f5f5f7; --karte:#ffffff; --tinte:#1d1d1f; --tinte-weich:#424245;
  --gedaempft:#6e6e73; --linie:#d2d2d7; --linie-weich:#e8e8ed;
  --akzent:#0071e3; --akzent-tief:#0066cc; --akzent-hell:#eef4fd;
  --warnung:#c93400; --warnung-hell:#fff4e5;
  --schlecht:#e30000; --schlecht-hell:#fdeeee;
  --gut:#248a3d; --gut-hell:#eaf7ed;
  --schatten:0 1px 2px rgba(0,0,0,.04),0 6px 24px rgba(0,0,0,.05);
  --schatten-schwebt:0 2px 6px rgba(0,0,0,.05),0 14px 40px rgba(0,0,0,.10);
  --kartenrand:transparent;
}
@media (prefers-color-scheme: dark){
  :root{
    --papier:#000000; --karte:#1d1d1f; --tinte:#f5f5f7; --tinte-weich:#d2d2d7;
    --gedaempft:#86868b; --linie:#424245; --linie-weich:#333336;
    --akzent:#2997ff; --akzent-tief:#64b5ff; --akzent-hell:#12283f;
    --warnung:#ff9f0a; --warnung-hell:#2e2410;
    --schlecht:#ff453a; --schlecht-hell:#331715;
    --gut:#30d158; --gut-hell:#0f2b17;
    --schatten:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.5);
    --schatten-schwebt:0 2px 8px rgba(0,0,0,.5),0 16px 44px rgba(0,0,0,.6);
    --kartenrand:var(--linie-weich);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papier);color:var(--tinte);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",
    "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.47;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:color-mix(in srgb,var(--akzent) 22%,transparent)}

/* ---------------- Kopf ---------------- */
.kopf{position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--papier) 72%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid color-mix(in srgb,var(--linie) 55%,transparent)}
.kopf-in{max-width:72rem;margin:0 auto;padding:.6rem 1.4rem;display:flex;
  align-items:center;gap:1.2rem;flex-wrap:wrap;min-height:2.9rem}
.marke{font-size:.95rem;font-weight:600;color:var(--tinte);text-decoration:none;
  letter-spacing:-.01em;white-space:nowrap}
.pfad{font-size:.82rem;color:var(--gedaempft);flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfad a{color:var(--gedaempft);text-decoration:none;transition:color .15s ease}
.pfad a:hover{color:var(--tinte)}
.pfad span{color:var(--tinte)}
.kopf-rechts{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.benutzer-feld{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--gedaempft)}
.benutzer-feld input{width:9rem;max-width:9rem;padding:.3rem .6rem;font-size:.82rem}

/* ---------------- Buehne ---------------- */
.buehne{max-width:72rem;margin:0 auto;padding:2.6rem 1.4rem 7rem;
  animation:auftritt .45s cubic-bezier(.25,.7,.3,1) both}
@keyframes auftritt{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.buehne{animation:none}}
.laden{color:var(--gedaempft)}
h1{font-size:clamp(2.1rem,4.6vw,3rem);font-weight:700;line-height:1.05;
  letter-spacing:-.022em;margin:0 0 .6rem;text-wrap:balance;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",
    "Helvetica Neue",Helvetica,Arial,sans-serif}
h2{font-size:1.5rem;font-weight:600;letter-spacing:-.014em;margin:2.8rem 0 1rem;
  text-wrap:balance}
.vorspann{color:var(--gedaempft);font-size:1.12rem;line-height:1.5;
  max-width:44rem;margin:0 0 2.2rem;text-wrap:pretty}
p{margin:0 0 .9rem}

/* ---------------- Knoepfe ---------------- */
.knopf,.knopf-still{display:inline-block;font:inherit;font-size:.92rem;font-weight:400;
  border-radius:980px;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .18s ease,color .18s ease,transform .12s ease,box-shadow .18s ease}
.knopf{background:var(--linie-weich);border:none;color:var(--tinte);padding:.5rem 1.15rem}
.knopf:hover{background:var(--linie)}
.knopf:active{transform:scale(.97)}
.knopf-haupt{background:var(--akzent);color:#fff}
.knopf-haupt:hover{background:var(--akzent-tief);color:#fff;
  box-shadow:0 4px 16px color-mix(in srgb,var(--akzent) 35%,transparent)}
.knopf-still{background:none;border:none;color:var(--akzent);padding:.5rem .55rem}
.knopf-still:hover{text-decoration:underline;color:var(--akzent)}
.knopf-gefahr{background:none;border:none;color:var(--schlecht);padding:.5rem .55rem}
.knopf-gefahr:hover{text-decoration:underline;background:none}
.knopf:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
@media (prefers-reduced-motion:reduce){.knopf,.knopf-still{transition:none}.knopf:active{transform:none}}
.knopfleiste{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin:2.2rem 0 0;
  padding-top:1.4rem;border-top:1px solid var(--linie-weich)}

/* ---------------- Tabellen ---------------- */
.tabelle{width:100%;border-collapse:collapse;background:var(--karte);
  border-radius:16px;overflow:hidden;font-size:.9rem;box-shadow:var(--schatten);
  border:1px solid var(--kartenrand)}
.tabelle th{text-align:left;padding:.7rem 1rem;font-size:.72rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--gedaempft);border-bottom:1px solid var(--linie-weich);white-space:nowrap}
.tabelle td{padding:.7rem 1rem;border-bottom:1px solid var(--linie-weich);vertical-align:middle}
.tabelle tr:last-child td{border-bottom:none}
.tabelle tbody tr{transition:background-color .12s ease}
.tabelle tbody tr:hover td{background:color-mix(in srgb,var(--linie-weich) 45%,transparent)}
.kuerzel{font-weight:600;color:var(--tinte);font-variant-numeric:tabular-nums}
.zahl{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.umbruch{overflow-x:auto;border-radius:16px}

/* ---------------- Abdeckungsbalken ---------------- */
.balken{display:flex;align-items:center;gap:.6rem;min-width:12rem}
.balken-spur{flex:1;height:.5rem;background:var(--linie-weich);border-radius:980px;
  overflow:hidden;position:relative;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.05)}
.balken-fuell{height:100%;border-radius:980px;background:var(--akzent);
  transition:width .5s cubic-bezier(.3,.8,.3,1)}
@media (prefers-reduced-motion:reduce){.balken-fuell{transition:none}}
.balken-wert{font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--tinte-weich);
  white-space:nowrap;min-width:3.2rem;text-align:right}
.ZU_WENIG .balken-fuell{background:var(--schlecht)}
.LUECKENHAFT .balken-fuell{background:var(--warnung)}
.PLAUSIBEL .balken-fuell{background:var(--gut)}
.UEBERZEICHNET .balken-fuell{background:var(--warnung)}
.OHNE_VZAE .balken-fuell{background:var(--gedaempft)}

.abdeckung-karte{background:var(--karte);border-radius:18px;border:1px solid var(--kartenrand);
  padding:1.2rem 1.5rem;margin:0 0 1.6rem;box-shadow:var(--schatten)}
.abdeckung-karte .zeile{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.abdeckung-karte .marke-klein{font-size:.74rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gedaempft)}
.abdeckung-karte .deutung{font-size:.86rem;color:var(--gedaempft);margin:.55rem 0 0}
.abdeckung-karte .balken{margin-top:.75rem}

/* ---------------- Formular ---------------- */
.frage{display:grid;grid-template-columns:3.4rem 1fr;gap:0 1.1rem;padding:1.35rem 0;
  border-bottom:1px solid var(--linie-weich)}
.frage-nr{font-size:.74rem;font-weight:600;color:var(--gedaempft);padding-top:.34rem;
  font-variant-numeric:tabular-nums;transition:color .2s ease}
.frage:focus-within .frage-nr{color:var(--akzent)}
.frage-titel{font-weight:600;font-size:1.02rem;letter-spacing:-.008em;margin:0 0 .4rem;
  text-wrap:balance}
.frage-titel .pflicht{color:var(--gedaempft);font-weight:400;font-size:.85em}
.frage-hilfe{font-size:.86rem;line-height:1.5;color:var(--gedaempft);
  margin:.15rem 0 .65rem;max-width:42rem;text-wrap:pretty}
.abschnitt{margin:3.2rem 0 .4rem;padding-top:1.8rem;border-top:1px solid var(--linie)}
.abschnitt h3{font-size:1.3rem;font-weight:600;letter-spacing:-.012em;margin:0}
.abschnitt .erklaerung{font-size:.88rem;line-height:1.55;color:var(--tinte-weich);
  margin:.7rem 0 0;max-width:44rem;background:var(--karte);
  border:1px solid var(--kartenrand);padding:.9rem 1.1rem;border-radius:14px;
  box-shadow:var(--schatten)}

input[type=text],input[type=number],input[type=email],input[type=password],
input[type=url],input[type=tel],input[type=date],select,textarea{
  font:inherit;font-size:.97rem;width:100%;max-width:34rem;padding:.6rem .85rem;
  border:1px solid var(--linie);border-radius:12px;background:var(--karte);color:var(--tinte);
  -webkit-appearance:none;appearance:none;
  transition:border-color .18s ease,box-shadow .18s ease}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--gedaempft) 75%,transparent)}
input[type=number]{font-variant-numeric:tabular-nums}
select{background-image:linear-gradient(45deg,transparent 50%,var(--gedaempft) 50%),
  linear-gradient(135deg,var(--gedaempft) 50%,transparent 50%);
  background-position:calc(100% - 1.15rem) 55%,calc(100% - .8rem) 55%;
  background-size:.35rem .35rem;background-repeat:no-repeat;padding-right:2.2rem;cursor:pointer}
textarea{min-height:5.5rem;resize:vertical;max-width:42rem;line-height:1.5}
input:hover:not(:focus),select:hover:not(:focus),textarea:hover:not(:focus){
  border-color:color-mix(in srgb,var(--gedaempft) 60%,var(--linie))}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--akzent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--akzent) 16%,transparent)}
@media (prefers-reduced-motion:reduce){input,select,textarea{transition:none}}
.paar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.paar input{max-width:9rem}
.paar select{max-width:12rem}

/* Auswahloptionen: die ganze Zeile ist das Ziel. Gewaehltes traegt eine
   leise blaue Tönung — Zustand ist sichtbar, ohne zu schreien. */
.optionen{display:flex;flex-direction:column;gap:.3rem;margin:.2rem 0 0;max-width:44rem}
.optionen label{display:flex;align-items:flex-start;gap:.65rem;font-size:.94rem;
  color:var(--tinte);cursor:pointer;max-width:none;
  padding:.55rem .8rem;margin:0 -.8rem;border-radius:12px;
  border:1px solid transparent;
  transition:background-color .15s ease,border-color .15s ease}
.optionen label:hover{background:color-mix(in srgb,var(--linie-weich) 55%,transparent)}
.optionen label:has(input:checked){background:var(--akzent-hell);
  border-color:color-mix(in srgb,var(--akzent) 22%,transparent)}
.optionen input{margin-top:.22rem;accent-color:var(--akzent);flex:0 0 auto;width:auto}
@media (prefers-reduced-motion:reduce){.optionen label{transition:none}}
.systemliste{max-height:20rem;overflow-y:auto;border:1px solid var(--linie);border-radius:14px;
  padding:.7rem .9rem;background:var(--karte);max-width:44rem}
.systemliste .optionen label{margin:0;padding:.4rem .6rem}
.systemgruppe{font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--gedaempft);margin:.9rem 0 .35rem}
.systemgruppe:first-child{margin-top:0}
.skala{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.skala-rand{font-size:.8rem;color:var(--gedaempft)}

/* ---------------- Taetigkeitskarten ---------------- */
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:1rem;margin:1rem 0 0}
.karte{background:var(--karte);border-radius:18px;border:1px solid var(--kartenrand);
  padding:1.1rem 1.3rem;
  box-shadow:var(--schatten);text-decoration:none;color:inherit;display:block;
  transition:transform .18s cubic-bezier(.3,.8,.3,1),box-shadow .18s ease}
.karte:hover{transform:translateY(-3px);box-shadow:var(--schatten-schwebt)}
.karte:active{transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.karte{transition:none}.karte:hover{transform:none;box-shadow:var(--schatten)}}
.karte h4{margin:0 0 .4rem;font-size:1rem;font-weight:600;letter-spacing:-.008em}
.karte .meta{display:flex;justify-content:space-between;gap:.8rem;font-size:.8rem;
  color:var(--gedaempft);font-variant-numeric:tabular-nums}
.karte .fehlt{color:var(--warnung)}
.karte .fertig{color:var(--gut)}
.karte-neu{border:1.5px dashed var(--linie);box-shadow:none;background:none;
  display:flex;align-items:center;
  justify-content:center;min-height:5.5rem;color:var(--akzent);font-weight:400}
.karte-neu:hover{border-color:var(--akzent);background:var(--karte);transform:none;box-shadow:var(--schatten)}

/* ---------------- Geteilte Bausteine ----------------
   Alles hier wird von mehr als einer Seite benutzt. Wer einen Baustein auf
   einer zweiten Seite verwendet, verschiebt ihn hierher. */

.reiter{display:flex;gap:1.5rem;flex-wrap:wrap;border-bottom:1px solid var(--linie-weich);margin:1.6rem 0 2.2rem}
.reiter button{font:inherit;font-size:.94rem;background:none;border:none;
  border-bottom:2px solid transparent;padding:.6rem 0;color:var(--gedaempft);cursor:pointer;
  transition:color .15s ease,border-color .15s ease;margin-bottom:-1px}
.reiter button:hover{color:var(--tinte)}
.reiter button[aria-current=page]{color:var(--tinte);font-weight:600;border-bottom-color:var(--tinte)}
@media (prefers-reduced-motion:reduce){.reiter button{transition:none}}

.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.9rem;margin:0 0 1.6rem}
.kachel{background:var(--karte);border-radius:16px;border:1px solid var(--kartenrand);
  padding:1rem 1.1rem;box-shadow:var(--schatten)}
.kachel .wert{font-size:1.7rem;font-weight:700;letter-spacing:-.025em;line-height:1.08;
  font-variant-numeric:tabular-nums}
.kachel .was{font-size:.76rem;color:var(--gedaempft);margin-top:.3rem;line-height:1.35}
.kachel.achtung .wert{color:var(--warnung)}

/* Der farbige Punkt vor einem Zustand: gruen erledigt, orange unterwegs, rot offen. */
.ampel{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;
  margin-right:.45rem;vertical-align:baseline}
.ampel.gut{background:var(--gut)}
.ampel.warn{background:var(--warnung)}
.ampel.schlecht{background:var(--schlecht)}

/* Kleines Schild an einer Zeile — Sperren, Urteile, Kennzeichen.
   Heisst NICHT .marke: das ist die Wortmarke in der Kopfleiste. */
.plakette{display:inline-block;font-size:.72rem;font-weight:600;
  background:var(--warnung-hell);color:var(--warnung);border-radius:980px;
  padding:.14rem .6rem;margin:0 .25rem .2rem 0;white-space:nowrap}

/* Balkenfarben nach Hoehe des Werts — getrennt von den Abdeckungsbaendern. */
.balken-fuell.b-hoch{background:var(--gut)}
.balken-fuell.b-mittel{background:var(--warnung)}
.balken-fuell.b-niedrig{background:var(--gedaempft)}

/* Systemauswahl: Chips fuer Zusaetze, Vorschlagsliste der Suche. */
.systemwahl{max-width:44rem}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:.55rem 0 0}
.chip{display:inline-flex;align-items:center;gap:.45rem;background:var(--linie-weich);
  color:var(--tinte);border-radius:980px;padding:.26rem .85rem;font-size:.84rem;
  transition:background-color .15s ease}
.chip:hover{background:var(--linie)}
.chip button{border:none;background:none;color:var(--gedaempft);cursor:pointer;font:inherit;
  font-size:1rem;line-height:1;padding:0;transition:color .15s ease}
.chip button:hover{color:var(--tinte)}
@media (prefers-reduced-motion:reduce){.chip,.chip button{transition:none}}
.suchfeld{position:relative;max-width:34rem;margin-top:.7rem}
.suchfeld input{max-width:none}
.vorschlaege{position:absolute;top:calc(100% + .35rem);left:0;right:0;background:var(--karte);
  border:1px solid var(--linie-weich);border-radius:14px;
  box-shadow:var(--schatten-schwebt);z-index:15;max-height:15rem;overflow-y:auto;
  padding:.3rem;
  animation:aufklappen .16s cubic-bezier(.25,.7,.3,1) both;transform-origin:top center}
@keyframes aufklappen{from{opacity:0;transform:translateY(-4px) scale(.99)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.vorschlaege{animation:none}}
.vorschlaege button{display:block;width:100%;text-align:left;border:none;background:none;
  font:inherit;font-size:.9rem;padding:.5rem .75rem;cursor:pointer;color:var(--tinte);
  border-radius:9px}
.vorschlaege button:hover{background:var(--linie-weich)}
.vorschlaege .frei{font-style:italic;color:var(--gedaempft)}

/* ---------------- Hinweise ---------------- */
.merker{background:var(--karte);border:1px solid var(--kartenrand);padding:1.05rem 1.3rem;
  margin:1.3rem 0;font-size:.9rem;line-height:1.5;max-width:46rem;border-radius:16px;
  box-shadow:var(--schatten)}
.merker.warn{background:var(--warnung-hell);box-shadow:none;border-color:transparent}
.merker p:last-child{margin-bottom:0}
.merker-marke{font-size:.74rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--akzent);display:block;margin-bottom:.35rem}
.merker.warn .merker-marke,.warn-marke{color:var(--warnung)}

.hinweis{position:fixed;left:50%;bottom:1.8rem;transform:translateX(-50%) translateY(1.5rem);
  background:color-mix(in srgb,var(--tinte) 92%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:var(--papier);padding:.65rem 1.3rem;border-radius:980px;font-size:.88rem;
  box-shadow:var(--schatten-schwebt);
  opacity:0;pointer-events:none;
  transition:opacity .22s ease,transform .22s cubic-bezier(.3,.8,.3,1);z-index:50;max-width:90vw}
.hinweis.sichtbar{opacity:1;transform:translateX(-50%) translateY(0)}
.hinweis.fehler{background:var(--schlecht);color:#fff}
@media (prefers-reduced-motion:reduce){.hinweis{transition:none}}

.stunden{font-variant-numeric:tabular-nums;color:var(--tinte);font-weight:600}

@media (max-width:640px){
  .frage{grid-template-columns:1fr;gap:.25rem}
  .frage-nr{padding-top:0}
  .kopf-in{padding-left:1rem;padding-right:1rem}
  .buehne{padding-left:1rem;padding-right:1rem}
  .optionen label{margin:0}
}
:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--akzent) 30%,transparent);border-radius:8px}