/* =====================================================================
   PFOTENMUT – Kunden-App
   Zuerst fürs Handy gebaut. Ruhig, großflächig, wenig auf einmal.
   Die Menschen hier sind oft angespannt – die Oberfläche soll nicht
   noch zusätzlich fordern.
   ===================================================================== */

:root{
  --papier:      #F4F1E8;
  --papier-tief: #EAE5D6;
  --karte:       #FFFFFF;
  --linie:       #E2DCCB;

  --oliv:        #3F4A2E;
  --oliv-hell:   #5C6B44;
  --oliv-blass:  #EDF0E4;

  --tinte:       #23282B;
  --text:        #2F2F29;
  --grau:        #6E6A5F;
  --grau-hell:   #98927F;

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

  --stufe1:#7BA063; --stufe2:#A8AE55; --stufe3:#D9A441;
  --stufe4:#C0632B; --stufe5:#A6402B;

  --rund:   14px;
  --rund-s: 9px;
  --schatten: 0 1px 2px rgba(35,40,43,.04), 0 6px 20px rgba(35,40,43,.06);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papier); color:var(--text);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
       "Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
a{color:var(--oliv); text-decoration:none}
img{max-width:100%; display:block}

.bahn{max-width:660px; margin:0 auto; padding:0 16px}

.etikett{
  font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grau-hell);
}

/* =====================================================================
   Kopf
   ===================================================================== */
.app-kopf{
  background:var(--oliv); color:#EDEADF;
  padding:16px 0 20px;
  /* Falls das Gerät doch einen Bereich für die Statusleiste meldet,
     wird er zusätzlich freigehalten. */
  padding-top:calc(16px + env(safe-area-inset-top, 0px));
}
.app-kopf .bahn{display:flex; align-items:center; gap:14px}
.app-kopf .marke{font-size:19px; font-weight:800; color:#fff; letter-spacing:-.02em}
.app-kopf .marke small{
  display:block; font-size:10px; font-weight:600; letter-spacing:.14em;
  color:rgba(255,255,255,.5); text-transform:uppercase;
}
.app-kopf .weg{margin-left:auto; display:flex; gap:10px; align-items:center}
.app-kopf .weg a{color:rgba(237,234,223,.7); font-size:14px}
.app-kopf .weg a:hover{color:#fff}

.gruss{padding:22px 0 6px}
.gruss h1{
  margin:3px 0 0; font-size:26px; font-weight:800;
  color:var(--tinte); letter-spacing:-.025em;
}
.gruss p{margin:6px 0 0; color:var(--grau); font-size:15.5px}

.zurueck{
  display:inline-flex; align-items:center; gap:6px;
  color:rgba(237,234,223,.75); font-size:14.5px; font-weight:600;
}
.zurueck:hover{color:#fff}

/* --- Kleines Bild in der Kopfzeile --------------------------------- */
.kopf-bild{
  width:34px; height:34px; border-radius:50%; flex:0 0 34px;
  background:rgba(255,255,255,.14) center/cover no-repeat;
  border:1.5px solid rgba(255,255,255,.28);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:15px; text-decoration:none;
}
.kopf-bild:hover{border-color:rgba(255,255,255,.6)}

/* =====================================================================
   Begleiter
   ===================================================================== */
.begleiter{
  display:flex; align-items:center; gap:15px;
  background:var(--karte); border:1px solid var(--linie);
  border-radius:var(--rund); box-shadow:var(--schatten);
  padding:15px 17px; margin-bottom:14px;
}
.begleiter .bild{
  width:58px; height:58px; border-radius:50%; flex:0 0 58px;
  background:var(--oliv-blass) center/cover no-repeat;
  border:1px solid var(--linie);
  display:flex; align-items:center; justify-content:center;
  color:var(--oliv); font-weight:800; font-size:23px;
}
.begleiter .wer{flex:1; min-width:0}
.begleiter .wer b{display:block; font-size:16.5px; font-weight:700; color:var(--tinte); margin-top:1px}
.begleiter .wer span{display:block; font-size:13.5px; color:var(--grau-hell); margin-top:1px}
.begleiter .wege{display:flex; gap:8px; flex:0 0 auto}
.begleiter .wege a{
  width:42px; height:42px; border-radius:50%;
  background:var(--oliv-blass); color:var(--oliv);
  display:flex; align-items:center; justify-content:center;
  font-size:19px; text-decoration:none; border:1px solid var(--linie);
}
.begleiter .wege a:active{background:var(--papier-tief)}

/* =====================================================================
   Karten
   ===================================================================== */
.karte{
  background:var(--karte); border:1px solid var(--linie);
  border-radius:var(--rund); box-shadow:var(--schatten);
  margin-bottom:14px; overflow:hidden;
}
.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:16px; font-weight:700; color:var(--tinte)}
.karte-leib{padding:18px}

/* --- Nächster Termin: das Wichtigste, deshalb dunkel ---------------- */
.naechster{
  background:var(--oliv); color:#EDEADF; border-radius:var(--rund);
  padding:22px 20px; margin-bottom:14px;
}
.naechster .etikett{color:rgba(237,234,223,.5)}
.naechster .wann{
  /* Passt sich schmalen Geräten an, damit lange Datumsangaben wie
     „Donnerstag, 24. September" nicht mitten im Wort umbrechen. */
  font-size:clamp(19px, 5.4vw, 23px); font-weight:800; color:#fff;
  letter-spacing:-.02em; margin:6px 0 0; line-height:1.2;
  hyphens:none;
}
.naechster .uhrzeit{
  font-size:19px; font-weight:700; color:#fff;
  letter-spacing:-.01em; margin:1px 0 4px;
  font-variant-numeric:tabular-nums;
}
.naechster .was{font-size:15px; color:rgba(237,234,223,.72)}
.naechster .ort{font-size:14px; color:rgba(237,234,223,.55); margin-top:9px}
.naechster.leer{background:var(--karte); border:1px solid var(--linie); color:var(--text)}
.naechster.leer .wann{color:var(--tinte); font-size:19px}
.naechster.leer .was{color:var(--grau)}
.naechster.leer .etikett{color:var(--grau-hell)}

/* --- Route zum Treffpunkt ------------------------------------------- */
.routenknopf{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:13px; padding:11px 17px; border-radius:var(--rund-s);
  background:rgba(255,255,255,.13); color:#fff;
  border:1px solid rgba(255,255,255,.26);
  font-size:14.5px; font-weight:700; text-decoration:none;
}
.routenknopf::before{content:"↗"; font-size:15px; opacity:.85}
.routenknopf:active{background:rgba(255,255,255,.22)}

/* helle Fassung für weiße Karten */
.routenknopf.hell{
  margin-top:8px; padding:8px 13px; font-size:14px;
  background:var(--oliv-blass); color:var(--oliv);
  border-color:var(--linie);
}
.routenknopf.hell:active{background:var(--papier-tief)}

/* --- Fortschritt ---------------------------------------------------- */
.fortschritt{display:flex; align-items:center; gap:14px}
.fortschritt .zahl{
  font-size:30px; font-weight:800; color:var(--tinte);
  letter-spacing:-.03em; line-height:1; flex:0 0 auto;
}
.fortschritt .zahl small{font-size:15px; font-weight:600; color:var(--grau-hell)}
.fortschritt .rest{flex:1}
.balken{height:7px; background:var(--papier-tief); border-radius:4px; overflow:hidden}
.balken i{display:block; height:100%; background:var(--oliv-hell); border-radius:4px}

/* =====================================================================
   Kacheln
   ===================================================================== */
.kacheln{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:16px;
}
.kachel{
  background:var(--karte); border:1px solid var(--linie);
  border-radius:var(--rund); box-shadow:var(--schatten);
  padding:18px 16px 17px; color:inherit; position:relative;
  display:flex; flex-direction:column; min-height:112px;
}
.kachel:active{background:var(--papier)}
.kachel .sym{
  width:38px; height:38px; border-radius:11px; background:var(--oliv-blass);
  display:flex; align-items:center; justify-content:center;
  font-size:19px; margin-bottom:11px;
}
.kachel .sym.warm{background:var(--orange-blass)}
.kachel b{display:block; font-size:15.5px; font-weight:700; color:var(--tinte); line-height:1.3}
.kachel span{display:block; font-size:13px; color:var(--grau-hell); margin-top:2px; line-height:1.4}
.kachel .punkt{
  position:absolute; top:14px; right:14px;
  background:var(--orange); color:#fff; font-size:11.5px; font-weight:700;
  min-width:21px; height:21px; padding:0 6px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
}

/* --- Impuls: quer über die Breite, weil es etwas anderes ist -------- */
.impulskachel{
  display:flex; align-items:center; gap:15px;
  background:var(--karte); border:1px solid var(--linie);
  border-left:4px solid var(--orange);
  border-radius:var(--rund); box-shadow:var(--schatten);
  padding:17px 18px; margin:20px 0 0; color:inherit;
}
.impulskachel:active{background:var(--papier)}
.impulskachel .sym{
  width:42px; height:42px; border-radius:12px; flex:0 0 42px;
  background:var(--orange-blass); color:#8A4416;
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
.impulskachel .text{flex:1; min-width:0}
.impulskachel .text b{display:block; font-size:16.5px; font-weight:700; color:var(--tinte)}
.impulskachel .text span{display:block; font-size:14px; color:var(--grau-hell); margin-top:2px}
.impulskachel .pfeil{color:var(--grau-hell); font-size:22px; flex:0 0 auto}

/* =====================================================================
   Angstskala
   ===================================================================== */
.skala{display:inline-flex; gap:3px; vertical-align:middle}
.skala i{display:block; width:9px; height:17px; border-radius:2px; background:var(--papier-tief)}
.skala.klein i{width:6px; height:12px}
.skala i.an{background:var(--stufe1)}
.skala.s2 i.an{background:var(--stufe2)}
.skala.s3 i.an{background:var(--stufe3)}
.skala.s4 i.an{background:var(--stufe4)}
.skala.s5 i.an{background:var(--stufe5)}
.skala-wert{font-weight:700; font-size:14px; margin-left:8px; color:var(--grau)}

.delta{font-size:13.5px; font-weight:600}
.delta.besser{color:var(--gruen)}
.delta.schlechter{color:var(--rot)}
.delta.gleich{color:var(--grau-hell)}

/* =====================================================================
   Formulare
   ===================================================================== */
.feld{margin-bottom:16px}
.feld label{display:block; font-weight:700; font-size:14.5px; color:var(--tinte); margin-bottom:6px}
.feld .tipp{display:block; font-size:13.5px; color:var(--grau-hell); margin-top:5px; font-weight:400}
.feld input[type=text],.feld input[type=email],.feld input[type=tel],
.feld input[type=password],.feld input[type=date],.feld input[type=datetime-local],
.feld select,.feld textarea{
  width:100%; padding:13px 14px; font:16px/1.5 inherit; color:var(--text);
  background:#FCFBF7; border:1.5px solid #D8D2C4; border-radius:var(--rund-s);
}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none; border-color:var(--oliv-hell); box-shadow:0 0 0 3px rgba(92,107,68,.15);
}
.feld textarea{min-height:110px; resize:vertical}

.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px; font:700 16px/1 inherit; font-family:inherit;
  color:#fff; background:var(--oliv); border:2px solid var(--oliv);
  border-radius:var(--rund-s); cursor:pointer; text-decoration:none;
}
.knopf:active{background:var(--oliv-hell)}
.knopf.zweit{background:transparent; color:var(--oliv); border-color:var(--linie)}
.knopf.zweit:active{background:var(--oliv-blass)}
.knopf.warm{background:var(--orange); border-color:var(--orange)}
.knopf.breit{width:100%}
.knopf.klein{padding:9px 15px; font-size:14.5px}
.knopf-reihe{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}

/* =====================================================================
   Meldungen
   ===================================================================== */
.meldung{
  padding:13px 16px; border-radius:var(--rund-s); margin-bottom:16px;
  font-size:15px; 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)}

.leer{padding:38px 22px; text-align:center; color:var(--grau)}
.leer b{display:block; color:var(--tinte); font-size:16px; margin-bottom:6px}
.leer p{margin:0 0 16px; font-size:14.5px}

.listenreihe{
  padding:15px 18px; border-bottom:1px solid var(--linie);
  display:flex; gap:14px; align-items:center;
}
.listenreihe:last-child{border-bottom:0}
.listenreihe .haupt{flex:1; min-width:0}
.listenreihe b{display:block; font-size:15.5px; color:var(--tinte); font-weight:700}

/* Nur die Unterzeilen im Textbereich, nicht jedes span in der Zeile.
   Sonst trifft die Regel auch die Angstskala – und deren Balken
   stapeln sich dann senkrecht statt nebeneinander. */
.listenreihe .haupt > span{display:block; font-size:13.5px; color:var(--grau-hell); margin-top:1px}

/* Sicherheitsnetz: die Skala bleibt immer waagerecht */
.skala, .listenreihe .skala{display:inline-flex}

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

/* =====================================================================
   Größere Bildschirme
   ===================================================================== */
/* Bewusst überall zwei Spalten: Die App ist eine schmale Spalte, und bei
   drei Spalten bliebe je nach Kachelzahl eine allein in der letzten Reihe. */
@media (min-width:560px){
  .kachel{min-height:124px; padding:20px 18px 19px}
}
@media (min-width:760px){
  .bahn{padding:0 20px}
}

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

/* =====================================================================
   Wissensbeiträge
   ===================================================================== */
.beitrag{line-height:1.72; font-size:16.5px}
.beitrag > *:first-child{margin-top:0}
.beitrag p{margin:0 0 15px}
.beitrag h3{
  font-size:17.5px; font-weight:700; color:var(--oliv);
  margin:26px 0 9px; letter-spacing:-.01em;
}
.beitrag ul,.beitrag ol{margin:0 0 16px; padding-left:22px}
.beitrag li{margin-bottom:9px}
.beitrag li::marker{color:var(--oliv-hell)}
.beitrag strong{color:var(--tinte)}
.beitrag em{font-style:italic; color:var(--grau)}

.beitrag .wichtig{
  background:var(--oliv-blass); border-left:4px solid var(--oliv);
  border-radius:0 var(--rund-s) var(--rund-s) 0;
  padding:16px 18px; margin:20px 0; font-size:16px; line-height:1.65;
}
.beitrag .wichtig ol,.beitrag .wichtig ul{margin-bottom:0}
.beitrag .wichtig > *:last-child{margin-bottom:0}

.beitrag .hinweis{
  background:var(--orange-blass); border-left:4px solid var(--orange);
  border-radius:0 var(--rund-s) var(--rund-s) 0;
  padding:16px 18px; margin:20px 0; font-size:15.5px; line-height:1.65;
  color:#7A4A15;
}
.beitrag .hinweis strong{color:#6B3F10}
.beitrag .hinweis > *:last-child{margin-bottom:0}

/* --- Beobachtungsauftrag ------------------------------------------- */
.auftrag{
  background:var(--oliv); color:#EDEADF; border-radius:var(--rund);
  padding:22px 20px; margin:18px 0 14px;
}
.auftrag .etikett{color:var(--orange-blass); margin-bottom:8px}
.auftrag p{margin:0; font-size:16px; line-height:1.7; color:rgba(237,234,223,.9)}

/* --- Fortschritt im Wissensbereich --------------------------------- */
.lernstand{
  background:var(--karte); border:1px solid var(--linie);
  border-radius:var(--rund); box-shadow:var(--schatten);
  padding:17px 18px; margin-bottom:16px;
}
.lernstand .zeile{display:flex; align-items:baseline; gap:10px; margin-bottom:9px}
.lernstand .zahl{font-size:23px; font-weight:800; color:var(--tinte); letter-spacing:-.02em}
.lernstand .zahl small{font-size:14px; font-weight:600; color:var(--grau-hell)}
.lernstand .text{font-size:14.5px; color:var(--grau); flex:1}

.haken{
  width:23px; height:23px; border-radius:50%; flex:0 0 23px;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
  background:var(--papier-tief); color:var(--grau-hell);
}
.haken.an{background:var(--gruen-blass); color:var(--gruen)}

/* =====================================================================
   Auswahlfelder
   Die Markierung wird vom Browser gesetzt, nicht beim Speichern.
   Sonst wirken die Felder tot: Der Klick wählt zwar aus, aber man
   sieht es erst nach dem Absenden.
   ===================================================================== */
.wahl{display:flex; gap:9px; flex-wrap:wrap}
.wahl.spalte{flex-direction:column}
.wahl.dicht{gap:5px; justify-content:space-between}

.wahl label{
  flex:1 1 auto; min-width:90px; text-align:center; cursor:pointer; margin:0;
  padding:13px 12px; border-radius:var(--rund-s);
  border:1.5px solid var(--linie); background:var(--papier);
  color:var(--grau); font-weight:600; font-size:14.5px; line-height:1.3;
  transition:background .12s, border-color .12s, color .12s;
}
.wahl label input{position:absolute; opacity:0; width:0; height:0}

.wahl label:active{background:var(--papier-tief)}
.wahl label:has(input:checked){
  border-color:var(--oliv); background:var(--oliv-blass); color:var(--oliv);
}
.wahl label:has(input:focus-visible){outline:2.5px solid var(--oliv-hell); outline-offset:2px}

/* Zehnerskala 1–10 */
.wahl.skalenwahl label{
  flex:1 1 0; min-width:0; padding:0; height:42px;
  display:flex; align-items:center; justify-content:center;
  font-size:13.5px; font-weight:700;
}
.wahl.skalenwahl label:has(input:checked){color:#fff; border-color:transparent}
.wahl.skalenwahl label.s1:has(input:checked){background:var(--stufe1)}
.wahl.skalenwahl label.s2:has(input:checked){background:var(--stufe2)}
.wahl.skalenwahl label.s3:has(input:checked){background:var(--stufe3)}
.wahl.skalenwahl label.s4:has(input:checked){background:var(--stufe4)}
.wahl.skalenwahl label.s5:has(input:checked){background:var(--stufe5)}

/* Ampel bei der Beobachtungsübung */
.wahl.ampelwahl label{text-align:left; padding:14px 16px; font-size:15.5px; font-weight:700}
.wahl.ampelwahl label.a-gruen:has(input:checked){
  border-color:var(--gruen); background:var(--gruen-blass); color:var(--gruen)}
.wahl.ampelwahl label.a-gelb:has(input:checked){
  border-color:#B8860B; background:var(--orange-blass); color:#B8860B}
.wahl.ampelwahl label.a-rot:has(input:checked){
  border-color:var(--rot); background:var(--rot-blass); color:var(--rot)}
.wahl.ampelwahl label.a-grau:has(input:checked){
  border-color:var(--grau); background:var(--papier-tief); color:var(--grau)}

/* Bewertung im Tagebuch */
.wahl.bewertung label.b-gut:has(input:checked){
  border-color:var(--gruen); background:var(--gruen-blass); color:var(--gruen)}
.wahl.bewertung label.b-neutral:has(input:checked){
  border-color:var(--grau); background:var(--papier-tief); color:var(--grau)}
.wahl.bewertung label.b-schwierig:has(input:checked){
  border-color:var(--orange); background:var(--orange-blass); color:#8A4416}

/* =====================================================================
   Dateiauswahl
   Der Text „Datei auswählen" kommt vom Browser und lässt sich nicht
   ändern. Deshalb liegt das Eingabefeld unsichtbar über einer eigenen
   Fläche – so bleibt es anklickbar und die Pflichtprüfung des Browsers
   funktioniert weiter.
   ===================================================================== */
.dateiwahl{
  position:relative; display:flex; align-items:center; gap:14px;
  padding:17px 18px; border-radius:var(--rund);
  border:2px dashed var(--oliv-hell); background:var(--oliv-blass);
  cursor:pointer; transition:background .12s, border-color .12s;
}
.dateiwahl:hover{background:#E4EAD6; border-color:var(--oliv)}
.dateiwahl input[type=file]{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer;
}
.dateiwahl .sym{
  width:46px; height:46px; border-radius:13px; flex:0 0 46px;
  background:var(--oliv); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:21px;
}
.dateiwahl .text{flex:1; min-width:0}
.dateiwahl .text b{display:block; font-size:16.5px; font-weight:700; color:var(--oliv)}
.dateiwahl .text span{display:block; font-size:13.5px; color:var(--grau); margin-top:2px}

/* Nach der Auswahl */
.dateiwahl.gewaehlt{border-style:solid; border-color:var(--gruen); background:var(--gruen-blass)}
.dateiwahl.gewaehlt .sym{background:var(--gruen)}
.dateiwahl.gewaehlt .text b{color:#2E5A2E}

/* --- Merkmale: zwei feste Spalten statt umbrechender Reihe ---------- */
.wahl.merkmale{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.wahl.merkmale label{
  flex:none; min-width:0; text-align:left;
  padding:12px 13px; line-height:1.35;
}
.wahl.merkmale label b{
  display:block; font-size:14.5px; font-weight:700; color:var(--tinte);
}
.wahl.merkmale label span{
  display:block; font-size:12.5px; font-weight:400; color:var(--grau-hell);
  margin-top:2px;
}
.wahl.merkmale label:has(input:checked) b{color:var(--oliv)}
.wahl.merkmale label:has(input:checked) span{color:var(--oliv)}