/* =====================================================================
   PFOTENMUT – Admin
   Farbwelt und Struktur aus dem Workbook: Papierton, Oliv als
   tragende Farbe, Orange nur dort, wo etwas Aufmerksamkeit braucht.
   Keine extern geladenen Schriften (Datenschutz).
   ===================================================================== */

:root{
  /* Papier & Flächen */
  --papier:      #F4F1E8;
  --papier-tief: #E9E4D6;
  --karte:       #FFFFFF;
  --linie:       #E2DCCB;

  /* Oliv – die tragende Farbe */
  --oliv:        #3F4A2E;
  --oliv-hell:   #5C6B44;
  --oliv-blass:  #EDF0E4;

  /* Tinte */
  --tinte:       #23282B;
  --text:        #2B2B26;
  --grau:        #6E6A5F;
  --grau-hell:   #9A9487;

  /* Signal */
  --orange:      #C0632B;
  --orange-blass:#FBF0E2;
  --gruen:       #4A7C4E;
  --gruen-blass: #EAF3E8;
  --rot:         #A6402B;
  --rot-blass:   #F7E9E5;

  /* Angstskala 1–10 */
  --stufe-nied:  #6E9E5E;
  --stufe-mitt:  #D9A441;
  --stufe-hoch:  #C0632B;
  --stufe-max:   #A6402B;

  --radius:   10px;
  --radius-s: 6px;
  --schatten: 0 1px 3px rgba(35,40,43,.06), 0 4px 14px rgba(35,40,43,.05);
  --seitenleiste: 232px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
       "Helvetica Neue",Arial,sans-serif;
  background:var(--papier);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

a{color:var(--oliv); text-decoration:none}
a:hover{text-decoration:underline}

/* --- Etiketten: das Gestaltungsmittel aus dem Workbook -------------- */
.etikett{
  font-size:11px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--grau);
}

/* =====================================================================
   Gerüst
   ===================================================================== */
.huelle{display:flex; min-height:100vh}

.seitenleiste{
  width:var(--seitenleiste); flex:0 0 var(--seitenleiste);
  background:var(--oliv); color:#EDEADF;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.marke{padding:22px 20px 18px; border-bottom:1px solid rgba(255,255,255,.1)}
.marke b{display:block; font-size:19px; font-weight:800; letter-spacing:-.01em; color:#fff}
.marke span{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
            color:rgba(255,255,255,.55)}

.menue{padding:12px 10px; flex:1; overflow-y:auto}
.menue a{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; margin-bottom:2px;
  color:rgba(255,255,255,.8); border-radius:var(--radius-s);
  font-size:14.5px; text-decoration:none;
}
.menue a:hover{background:rgba(255,255,255,.08); color:#fff; text-decoration:none}
.menue a.aktiv{background:rgba(255,255,255,.14); color:#fff; font-weight:600}
.menue .sym{width:18px; text-align:center; opacity:.85; flex:0 0 18px}
.menue .zahl{
  margin-left:auto; background:var(--orange); color:#fff;
  font-size:11px; font-weight:700; padding:1px 7px; border-radius:9px;
}
.menue hr{border:0; border-top:1px solid rgba(255,255,255,.1); margin:12px 12px}

.fuss-leiste{padding:14px 20px; border-top:1px solid rgba(255,255,255,.1); font-size:13px}
.fuss-leiste .wer{color:#fff; font-weight:600}
.fuss-leiste a{color:rgba(255,255,255,.6); font-size:12.5px}
.fuss-leiste a:hover{color:#fff}

.inhalt{flex:1; min-width:0; padding:26px 30px 60px}

/* --- Kopfzeile ------------------------------------------------------ */
.seitenkopf{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:22px; flex-wrap:wrap;
}
.seitenkopf h1{
  margin:2px 0 0; font-size:25px; font-weight:700;
  letter-spacing:-.02em; color:var(--tinte);
}
.seitenkopf p{margin:3px 0 0; color:var(--grau); font-size:14px}

/* =====================================================================
   Karten
   ===================================================================== */
.karte{
  background:var(--karte); border:1px solid var(--linie);
  border-radius:var(--radius); box-shadow:var(--schatten);
  margin-bottom:18px;
}
.karte-kopf{
  padding:14px 18px; border-bottom:1px solid var(--linie);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.karte-kopf h2{margin:0; font-size:15px; font-weight:700; color:var(--tinte)}
.karte-leib{padding:18px}
.karte-leib.eng{padding:0}

.raster{display:grid; gap:18px}
.raster.z2{grid-template-columns:repeat(2,1fr)}
.raster.z3{grid-template-columns:repeat(3,1fr)}
.raster.z4{grid-template-columns:repeat(4,1fr)}

/* --- Kennzahl ------------------------------------------------------- */
.kennzahl{
  background:var(--karte); border:1px solid var(--linie);
  border-radius:var(--radius); padding:15px 17px; box-shadow:var(--schatten);
  display:block; color:inherit;
}
a.kennzahl:hover{border-color:var(--oliv-hell); text-decoration:none}
.kennzahl .wert{
  font-size:29px; font-weight:700; line-height:1.05;
  color:var(--tinte); letter-spacing:-.02em; margin:5px 0 1px;
}
.kennzahl .wert.achtung{color:var(--orange)}
.kennzahl .zusatz{font-size:12.5px; color:var(--grau-hell)}

/* =====================================================================
   Angstskala – das wiederkehrende Element
   ===================================================================== */
.skala{display:inline-flex; gap:2px; vertical-align:middle}
.skala i{
  display:block; width:8px; height:15px; border-radius:2px;
  background:var(--papier-tief);
}
.skala.klein i{width:5px; height:11px}
.skala i.an{background:var(--stufe-nied)}
.skala.s-mitt i.an{background:var(--stufe-mitt)}
.skala.s-hoch i.an{background:var(--stufe-hoch)}
.skala.s-max  i.an{background:var(--stufe-max)}

.skala-wert{
  font-weight:700; font-size:13px; margin-left:7px;
  color:var(--grau); vertical-align:middle;
}

/* Veränderung gegenüber dem Start */
.delta{font-size:12.5px; font-weight:600}
.delta.besser{color:var(--gruen)}
.delta.schlechter{color:var(--rot)}
.delta.gleich{color:var(--grau-hell)}

/* =====================================================================
   Tabellen
   ===================================================================== */
table.liste{width:100%; border-collapse:collapse; font-size:14.5px}
table.liste th{
  text-align:left; padding:10px 18px;
  font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--grau); background:var(--papier); border-bottom:1px solid var(--linie);
  white-space:nowrap;
}
table.liste td{padding:12px 18px; border-bottom:1px solid var(--linie); vertical-align:middle}
table.liste tr:last-child td{border-bottom:0}
table.liste tbody tr:hover{background:#FBFAF6}
table.liste .name{font-weight:600; color:var(--tinte)}
table.liste .neben{display:block; font-size:12.5px; color:var(--grau-hell); font-weight:400}
table.liste td.rechts{text-align:right}
table.liste td.schmal{white-space:nowrap}

/* Fortschritt Sitzungen: 4 / 10 */
.zaehler{font-variant-numeric:tabular-nums; font-weight:700; color:var(--tinte)}
.zaehler small{font-weight:400; color:var(--grau-hell)}
.balken{
  width:64px; height:5px; background:var(--papier-tief);
  border-radius:3px; overflow:hidden; margin-top:5px;
}
.balken i{display:block; height:100%; background:var(--oliv-hell); border-radius:3px}

/* =====================================================================
   Kennzeichnungen
   ===================================================================== */
.status{
  display:inline-block; padding:3px 9px; border-radius:20px;
  font-size:11.5px; font-weight:700; letter-spacing:.02em; white-space:nowrap;
}
.st-anfrage      {background:var(--orange-blass); color:#8A4416}
.st-erstgespraech{background:#E8EEF5; color:#2F5476}
.st-aktiv        {background:var(--gruen-blass); color:#2E5A2E}
.st-pausiert     {background:var(--papier-tief); color:var(--grau)}
.st-abgeschlossen{background:var(--oliv-blass); color:var(--oliv)}
.st-abgebrochen  {background:var(--rot-blass); color:var(--rot)}

/* =====================================================================
   Formulare
   ===================================================================== */
.feld{margin-bottom:15px}
.feld label{display:block; font-weight:600; font-size:13.5px; margin-bottom:5px; color:var(--tinte)}
.feld .tipp{display:block; font-size:12.5px; color:var(--grau-hell); margin-top:4px}
.feld .pflicht{color:var(--orange)}

input[type=text],input[type=email],input[type=tel],input[type=password],
input[type=date],input[type=time],input[type=datetime-local],input[type=number],
select,textarea{
  width:100%; padding:9px 11px; font-size:14.5px; font-family:inherit;
  color:var(--text); background:#FCFBF7;
  border:1.5px solid #D8D2C4; border-radius:var(--radius-s);
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--oliv-hell);
  box-shadow:0 0 0 3px rgba(92,107,68,.14);
}
textarea{resize:vertical; min-height:88px; line-height:1.55}
select{appearance:none; background-image:
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7'><path d='M1 1l4.5 4.5L10 1' stroke='%236E6A5F' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 11px center; padding-right:30px}

.feld-paar{display:grid; grid-template-columns:1fr 1fr; gap:14px}

/* --- Schaltflächen -------------------------------------------------- */
.knopf{
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  padding:9px 17px; font-size:14.5px; font-weight:600; font-family:inherit;
  color:#fff; background:var(--oliv); border:1.5px solid var(--oliv);
  border-radius:var(--radius-s); cursor:pointer; text-decoration:none;
}
.knopf:hover{background:var(--oliv-hell); border-color:var(--oliv-hell); text-decoration:none}
.knopf.zweit{background:transparent; color:var(--oliv); border-color:#CFC8B6}
.knopf.zweit:hover{background:var(--oliv-blass); border-color:var(--oliv-hell)}
.knopf.warn{background:var(--rot); border-color:var(--rot)}

/* Für folgenschwere, aber umkehrbare Schritte – etwa eine Sperre.
   Deutlich abgesetzt, ohne so alarmierend zu wirken wie Löschen. */
.knopf.achtung{
  background:var(--orange-blass); color:#8A4416; border-color:#E3B98C;
}
.knopf.achtung:hover{background:#F6E2CB; border-color:var(--orange)}
.knopf.klein{padding:5px 11px; font-size:13px}
.knopf:disabled{opacity:.5; cursor:not-allowed}
.knopf-reihe{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px}

/* =====================================================================
   Meldungen
   ===================================================================== */
.meldung{
  padding:11px 15px; border-radius:var(--radius-s); margin-bottom:18px;
  font-size:14px; border-left:4px solid;
}
.m-erfolg {background:var(--gruen-blass);  color:#2E5A2E; border-color:var(--gruen)}
.m-fehler {background:var(--rot-blass);    color:#8A3524; border-color:var(--rot)}
.m-hinweis{background:var(--orange-blass); color:#7A4A15; border-color:var(--orange)}
.m-info   {background:var(--oliv-blass);   color:var(--oliv); border-color:var(--oliv-hell)}

/* --- Leerer Zustand: eine Einladung, nicht eine Entschuldigung ------- */
.leer{padding:44px 24px; text-align:center; color:var(--grau)}
.leer b{display:block; color:var(--tinte); font-size:15.5px; margin-bottom:5px}
.leer p{margin:0 0 16px; font-size:14px}

/* =====================================================================
   Anmeldeseite
   ===================================================================== */
.tor{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--papier);
}
.tor-karte{
  width:100%; max-width:380px; background:var(--karte);
  border:1px solid var(--linie); border-radius:14px;
  box-shadow:0 3px 26px rgba(35,40,43,.09); padding:32px 30px;
}
.tor-marke{text-align:center; margin-bottom:26px}
.tor-marke b{display:block; font-size:25px; font-weight:800; color:var(--oliv); letter-spacing:-.02em}
.tor-marke span{font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--grau-hell)}
.tor .knopf{width:100%; margin-top:20px; padding:11px}
.tor-fuss{text-align:center; margin-top:20px; font-size:13px; color:var(--grau-hell)}

/* =====================================================================
   Mobil
   ===================================================================== */
@media (max-width:860px){
  .huelle{flex-direction:column}
  .seitenleiste{
    width:100%; flex:none; height:auto; position:static;
    flex-direction:row; align-items:center; overflow-x:auto;
  }
  .marke{padding:12px 16px; border-bottom:0; border-right:1px solid rgba(255,255,255,.1);
         flex:0 0 auto; white-space:nowrap}
  .marke span{display:none}
  .menue{display:flex; padding:8px; gap:4px; flex:1}
  .menue a{margin:0; white-space:nowrap; padding:8px 11px}
  .menue hr,.fuss-leiste .wer{display:none}
  .fuss-leiste{border-top:0; padding:8px 14px; flex:0 0 auto}
  .inhalt{padding:18px 15px 50px}
  .raster.z2,.raster.z3,.raster.z4{grid-template-columns:repeat(2,1fr)}
  .feld-paar{grid-template-columns:1fr}
  .seitenkopf h1{font-size:21px}

  /* Tabellen zu Karten umbauen */
  table.liste,table.liste tbody,table.liste tr,table.liste td{display:block; width:100%}
  table.liste thead{display:none}
  table.liste tr{border-bottom:1px solid var(--linie); padding:12px 15px}
  table.liste tr:last-child{border-bottom:0}
  table.liste td{border:0; padding:2px 0; text-align:left !important}
  table.liste td[data-titel]::before{
    content:attr(data-titel) "  ";
    font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color:var(--grau-hell); margin-right:6px;
  }
}

@media (max-width:460px){
  .raster.z2,.raster.z3,.raster.z4{grid-template-columns:1fr}
}

/* --- Zugänglichkeit ------------------------------------------------- */
:focus-visible{outline:2.5px solid var(--oliv-hell); outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}

/* --- Druck ---------------------------------------------------------- */
@media print{
  .seitenleiste,.knopf-reihe,.knopf{display:none}
  body{background:#fff}
  .karte{box-shadow:none; border-color:#ccc; break-inside:avoid}
  .inhalt{padding:0}
}

/* =====================================================================
   Auswahlfelder
   Die Markierung setzt der Browser, nicht der Server. Sonst wirken die
   Felder tot: Der Klick wählt zwar aus, aber sichtbar wird es erst
   nach dem Speichern.
   ===================================================================== */
.wahl{display:flex; gap:6px; flex-wrap:nowrap}

/* Feste Größe statt anteiliger Breite: Die Zahlen sitzen in einer
   zweispaltigen Zeile und würden sich sonst in die Ecke quetschen. */
.wahl label{
  flex:0 0 auto; margin:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:8px;
  border:1.5px solid var(--linie); background:var(--papier);
  color:var(--grau-hell); font:700 13.5px/1 inherit;
  transition:background .12s, border-color .12s, color .12s;
}
.wahl label input{position:absolute; opacity:0; width:0; height:0}
.wahl label:hover{border-color:var(--oliv-hell)}
.wahl label:has(input:checked){color:#fff; border-color:transparent}
.wahl label.s1:has(input:checked){background:var(--stufe-nied)}
.wahl label.s2:has(input:checked){background:var(--stufe-mitt)}
.wahl label.s3:has(input:checked){background:var(--stufe-hoch)}
.wahl label.s4:has(input:checked){background:var(--stufe-max)}
.wahl label:has(input:focus-visible){outline:2.5px solid var(--oliv-hell); outline-offset:2px}
.wahl label:has(input:disabled){opacity:.55; cursor:default}

@media (max-width:1100px){
  .wahl label{width:32px; height:32px; font-size:12.5px}
  .wahl{gap:5px}
}
@media (max-width:860px){
  /* Auf dem Handy stehen Text und Zahlen untereinander –
     dann darf die Reihe die volle Breite nutzen. */
  .wahl{width:100%; justify-content:space-between; gap:4px}
  .wahl label{flex:1 1 0; width:auto; min-width:0}
}