/* ===========================================================================
   app.css — die Bauteile. Teil des Haus-Bausatzes, wird als LETZTE geladen.
   Reihenfolge: tokens.css -> basis.css -> app.css

   Herkunft: destilliert aus dem erprobten 40-KB-Blatt der Hetzner-Apps
   (Paneelpartner, Scheruebel, Purkarthofer). Uebernommen wurde der allgemeine
   Teil; projektspezifische Bauteile (Pruefansicht, Transport, Mailliste,
   KI-Seitenleiste) bleiben bewusst draussen — die gehoeren ins Projekt.

   Zwei Fehler des Originals sind hier behoben:
   1. Markenfarbe war an mehreren Stellen fest eincodiert (rgba(226,181,93,...)
      = Purkarthofer-Gold). Beim Kopieren in die naechste App blieb sie stehen.
      Jetzt durchgaengig ueber color-mix aus --marke.
   2. white-space:nowrap auf Tabellenkoepfen und Pills blies Spalten auf.
      Umbruchverhalten regelt jetzt basis.css.
   =========================================================================== */

*{box-sizing:border-box}
:focus-visible{outline:2px solid var(--marke);outline-offset:2px}
html{font-size:16px}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--flaeche);color:var(--text);font-family:var(--font);font-size:var(--schrift-3);line-height:1.5;padding-left:var(--leiste-breite)}
a{color:var(--marke-dunkel)}
h1{font-size:var(--schrift-5);font-weight:700;margin:0 0 var(--abstand-2);color:var(--tinte)}
h2{font-size:var(--schrift-4);font-weight:700;margin:var(--abstand-5) 0 var(--abstand-3);color:var(--tinte)}
h3{font-size:var(--schrift-3);font-weight:700;margin:0 0 var(--abstand-2)}
p.sub{margin:0 0 var(--abstand-5);color:var(--text-2);font-size:var(--schrift-2)}
.ico{flex:0 0 auto;vertical-align:-3px}

/* --- Seitenleiste: LINKS und senkrecht. Nicht verhandelbar (design-quality 6b).
       Gruppenueberschriften, Aktiv-Markierung als EINE Zeile, Fuss mit Person. */
aside.leiste{position:fixed;top:0;left:0;bottom:0;width:var(--leiste-breite);z-index:50;background:var(--leiste);color:var(--leiste-text);display:flex;flex-direction:column;padding:22px 16px;overflow-y:auto}
aside.leiste .marke{padding:6px 8px 20px}
aside.leiste .marke img{height:34px;width:auto;display:block}
.nav{display:flex;flex-direction:column;gap:4px}
.nav a,.nav .aus{display:flex;align-items:center;gap:12px;color:var(--leiste-text);text-decoration:none;font-size:15px;font-weight:500;padding:11px 12px;border-radius:10px;border:1px solid transparent;transition:background var(--dauer-1)}
.nav a:hover{background:rgba(255,255,255,.06)}
.nav a:focus-visible{outline:2px solid var(--leiste-fokus);outline-offset:2px}
/* Aktiv: Markenfarbe getuencht. Im Original stand hier Purkarthofer-Gold fest. */
.nav a.aktiv{background:var(--leiste-aktiv);border-color:var(--leiste-aktiv-linie)}
.nav .aus{color:var(--leiste-mute);cursor:not-allowed}
.nav .aus .klein{font-size:10px;margin-left:auto}
.nav .gruppe{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--leiste-mute);font-weight:700;padding:14px 12px 3px}
.nav .sub{margin-left:14px}
.nav .sub a{font-size:14px}
.leiste-fuss{margin-top:auto;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}
.leiste-fuss a{display:flex;align-items:center;gap:12px;color:var(--leiste-mute);text-decoration:none;font-size:14px;padding:10px 12px;border-radius:10px}
.leiste-fuss a:hover{background:rgba(255,255,255,.06);color:#fff}

/* --- Kopfzeile: Suche links, Avatar der angemeldeten Person rechts (6e/5) ---
   min-height:44px am Suchknopf ist Pflicht: im geerbten Blatt ergab das
   Polster nur 37 px. Das liegt unter der Fingergroesse und war auf dem Handy
   schwer zu treffen. Gemessen und behoben am 16.09.2026. */
.kopf{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:var(--abstand-3);padding:10px 32px;background:color-mix(in srgb,var(--flaeche) 92%,transparent);backdrop-filter:blur(6px)}
.kopf .suchknopf{display:flex;align-items:center;gap:10px;flex:0 1 420px;min-height:44px;padding:9px 14px;border:1px solid var(--linie);border-radius:var(--radius-knopf);background:var(--karte);color:var(--text-3);font-size:var(--schrift-2);font-family:inherit;cursor:text;text-align:left}
.kopf .suchknopf kbd{margin-left:auto;font-size:11px;color:var(--text-3);border:1px solid var(--linie);border-radius:6px;padding:1px 6px;font-family:inherit}
.kopf .rechts{margin-left:auto;display:flex;align-items:center;gap:var(--abstand-2)}
.rund{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--linie);background:var(--karte);color:var(--text-2);cursor:pointer;position:relative;text-decoration:none;font-family:inherit}
.rund:hover{border-color:var(--marke);color:var(--marke)}
.rund .zahl{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-pill);background:var(--rot);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;display:inline-flex;align-items:center;justify-content:center;background:var(--marke);color:#fff;font-weight:700;font-size:14px;text-decoration:none;border:2px solid var(--karte);box-shadow:var(--schatten-1)}

/* --- Inhalt und Karten ---------------------------------------------------- */
main.inhalt{flex:1 0 auto;padding:var(--abstand-4) 32px var(--abstand-6);max-width:1240px;width:100%}
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius-karte);padding:var(--abstand-5);box-shadow:var(--schatten-1);margin-bottom:var(--abstand-4);position:relative}
/* Hover-Schatten als zweite Ebene: nur deren Deckkraft wird bewegt, nie
   box-shadow selbst. Das trennt "wertig" von "ruckelig" (6d/10). */
.karte::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--schatten-2);opacity:0;transition:opacity var(--dauer-2) var(--kurve);pointer-events:none}
a.karte,.karte.anfassbar{text-decoration:none;color:inherit;display:block;transition:transform var(--dauer-2) var(--kurve),border-color var(--dauer-2)}
a.karte:hover,.karte.anfassbar:hover{transform:translateY(-2px);border-color:var(--marke)}
a.karte:hover::after,.karte.anfassbar:hover::after{opacity:1}

.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--abstand-4)}
.kachel .ikon{width:44px;height:44px;border-radius:var(--radius-knopf);background:var(--marke-bg);color:var(--marke-dunkel);display:flex;align-items:center;justify-content:center;margin-bottom:var(--abstand-3)}
.kachel h2{font-size:17px;margin:0 0 4px;display:flex;align-items:center;gap:8px}
.kachel p{margin:0;font-size:var(--schrift-2);color:var(--text-2)}

/* Kennzahlkarten: kleines Label MIT Chevron als Zielhinweis, darunter die
   grosse Zahl. Jede Zahl fuehrt irgendwohin (6c/1), sonst ist sie Sackgasse. */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--abstand-3)}
.kpi a.karte{padding:var(--abstand-4)}
.kpi .label{font-size:var(--schrift-1);color:var(--text-2);display:flex;align-items:center;gap:4px;text-transform:uppercase;letter-spacing:.04em}
.kpi .zahl{font-size:28px;font-weight:700;color:var(--tinte);margin-top:4px;font-variant-numeric:tabular-nums}
.kpi .zahl small{font-size:13px;font-weight:500;color:var(--text-2);margin-left:6px}
.kpi .stand{font-size:11px;color:var(--text-3);margin-top:4px}

/* --- Knoepfe: genau EIN Primaerknopf je Ansicht --------------------------- */
.knopf,button.knopf{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:var(--radius-knopf);border:1px solid var(--linie);background:var(--karte);color:var(--tinte);font-family:inherit;font-size:var(--schrift-2);font-weight:600;cursor:pointer;text-decoration:none;transition:transform var(--dauer-1),background var(--dauer-1),border-color var(--dauer-1)}
.knopf:hover{border-color:var(--marke);color:var(--marke-dunkel)}
.knopf:active{transform:scale(.98)}
.knopf:focus-visible{outline:2px solid var(--marke);outline-offset:2px}
.knopf.primaer{background:var(--knopf-primaer);border-color:var(--knopf-primaer);color:var(--knopf-primaer-text);border-radius:var(--radius-pill);padding:10px 22px}
.knopf.primaer:hover{background:var(--knopf-primaer-hover);border-color:var(--knopf-primaer-hover);color:var(--knopf-primaer-text)}
.knopf.gefahr{border-color:var(--rot-linie);color:var(--rot)}
.knopf.klein{min-height:44px;padding:8px 14px;font-size:13px}
.knopf[disabled]{opacity:.4;cursor:not-allowed}

/* --- Formulare: Labels immer sichtbar, Fehler direkt am Feld -------------- */
.feld{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--abstand-4)}
.feld label{font-size:13px;font-weight:600;color:var(--text)}
.feld input,.feld select,.feld textarea{width:100%;padding:11px 13px;border:1px solid #d8d8d8;border-radius:var(--radius-knopf);font-size:15px;font-family:inherit;background:#fafafa;color:var(--text);min-height:44px}
.feld textarea{min-height:88px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--marke);background:#fff;box-shadow:0 0 0 3px var(--marke-bg)}
.feld.fehler input,.feld.fehler select,.feld.fehler textarea{border-color:var(--rot)}
.feld .feld-fehler{display:none;font-size:13px;color:var(--rot)}
.feld.fehler .feld-fehler{display:block}
.feld .hinweis{font-size:12.5px;color:var(--text-3)}
.zeile{display:flex;gap:var(--abstand-3);align-items:center;flex-wrap:wrap}
.raster-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--abstand-4)}

/* --- Tabellen (Umbruchverhalten steht in basis.css) ----------------------- */
.tabelle{width:100%;border-collapse:collapse;font-size:var(--schrift-2)}
.tabelle th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);padding:10px 12px;border-bottom:1px solid var(--linie);background:var(--linie-2)}
.tabelle td{padding:10px 12px;border-bottom:1px solid var(--linie-2);vertical-align:middle}
.tabelle tr:last-child td{border-bottom:none}
.tabelle tr.zeile-link{cursor:pointer;transition:background var(--dauer-1)}
.tabelle tr.zeile-link:hover td{background:var(--marke-bg)}
.tabelle-wrap{overflow-x:auto;border:1px solid var(--linie);border-radius:var(--radius-karte);background:var(--karte)}
.rechts{text-align:right}
.mono{font-variant-numeric:tabular-nums}

/* --- Pills, Ampel, Segmente ----------------------------------------------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;border-radius:var(--radius-pill);padding:3px 10px;border:1px solid var(--linie);color:var(--text-2);background:var(--karte);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pill.gruen{background:var(--gruen-bg);border-color:var(--gruen-linie);color:var(--gruen)}
.pill.gelb{background:var(--gelb-bg);border-color:var(--gelb-linie);color:var(--gelb)}
.pill.rot{background:var(--rot-bg);border-color:var(--rot-linie);color:var(--rot)}
.pill.marke{background:var(--marke-bg);border-color:var(--marke-bg);color:var(--marke-dunkel)}
.pill.blau{background:var(--blau-bg);border-color:var(--blau-bg);color:var(--blau)}
.punkt{width:10px;height:10px;border-radius:50%;display:inline-block}
.punkt.gruen{background:var(--gruen)}.punkt.gelb{background:var(--gelb)}.punkt.rot{background:var(--rot)}
/* Segmentierte Schalter statt Dropdown, sobald es 2-4 feste Optionen sind (6e/6) */
.segmente{display:inline-flex;white-space:nowrap;border:1px solid var(--linie);border-radius:var(--radius-pill);padding:3px;background:var(--karte)}
.segmente a,.segmente button{border:0;background:transparent;padding:8px 14px;border-radius:var(--radius-pill);font-size:13px;font-weight:600;color:var(--text-2);text-decoration:none;cursor:pointer;font-family:inherit;min-height:38px;display:inline-flex;align-items:center}
.segmente .aktiv{background:var(--tinte);color:#fff}

/* --- Meldungen, leere Zustaende, Skelett ---------------------------------- */
.meldung{padding:12px 14px;border-radius:var(--radius-knopf);font-size:var(--schrift-2);margin:var(--abstand-3) 0;border:1px solid}
.meldung.ok{background:var(--gruen-bg);border-color:var(--gruen-linie);color:var(--gruen)}
.meldung.fehler{background:var(--rot-bg);border-color:var(--rot-linie);color:var(--rot)}
.meldung.hinweis{background:var(--gelb-bg);border-color:var(--gelb-linie);color:var(--gelb)}
/* Leerer Zustand ist Text, keine Null (6c/10): sagen, dass alles erledigt ist,
   oder den naechsten Schritt anbieten. */
.leer{text-align:center;padding:var(--abstand-6) var(--abstand-4);color:var(--text-2)}
.leer .ico{color:var(--text-3);margin-bottom:var(--abstand-2)}
.leer p{margin:0 0 var(--abstand-3)}
.skelett{display:none}
.htmx-request .skelett{display:block}
.htmx-request .skelett-verbergen{display:none}
.skelett .balken{height:14px;border-radius:6px;background:linear-gradient(90deg,var(--linie) 25%,var(--linie-2) 37%,var(--linie) 63%);background-size:400% 100%;animation:skelett 1.2s ease infinite;margin:10px 0}
@keyframes skelett{0%{background-position:100% 0}100%{background-position:0 0}}

/* --- Rueckgaengig-Streifen: Feedback sitzt beim Ausloeser, nicht am
       Seitenrand (6d/13). Acht Sekunden, dann weg. ------------------------ */
#rueckgaengig{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;z-index:90;display:flex;align-items:center;gap:14px;background:var(--tinte);color:#fff;padding:12px 18px;border-radius:var(--radius-karte);box-shadow:var(--schatten-3);font-size:var(--schrift-2);transition:transform var(--dauer-2) var(--kurve),opacity var(--dauer-2);pointer-events:none}
#rueckgaengig.sichtbar{transform:translate(-50%,0);opacity:1;pointer-events:auto}
#rueckgaengig button{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:var(--radius-knopf);padding:8px 14px;font-family:inherit;font-weight:700;cursor:pointer;min-height:44px}
#rueckgaengig button:hover{background:rgba(255,255,255,.12)}

/* --- Dialoge -------------------------------------------------------------- */
dialog{border:1px solid var(--linie);border-radius:var(--radius-karte);padding:0;box-shadow:var(--schatten-3);max-width:520px;width:calc(100% - 32px);font-family:inherit;color:var(--text)}
dialog::backdrop{background:rgba(21,22,26,.45);backdrop-filter:blur(2px)}
dialog .dialog-inhalt{padding:var(--abstand-5)}
dialog h2{margin-top:0}
.dialog-knoepfe{display:flex;gap:var(--abstand-2);justify-content:flex-end;margin-top:var(--abstand-5)}

/* --- Suche und Benachrichtigungen ----------------------------------------- */
#suche dialog,#glocke-liste{max-width:640px}
#suche input{width:100%;font-size:18px;padding:16px 18px;border:0;border-bottom:1px solid var(--linie);font-family:inherit;outline:none}
#suche .treffer{max-height:60vh;overflow:auto;padding:var(--abstand-2)}
#suche .treffer a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-knopf);text-decoration:none;color:var(--text)}
#suche .treffer a:hover,#suche .treffer a.aktiv{background:var(--marke-bg)}
#suche .treffer .art{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;min-width:80px}
.glocke-eintrag{display:flex;gap:12px;padding:12px 14px;border-bottom:1px solid var(--linie-2);text-decoration:none;color:var(--text)}
.glocke-eintrag.neu{background:var(--marke-bg)}
.glocke-eintrag .zeit{font-size:12px;color:var(--text-3)}

/* --- Kommentare und Feldprotokoll am Datensatz ---------------------------- */
.kommentar{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--linie-2)}
.kommentar .avatar{width:32px;height:32px;font-size:12px}
.kommentar .text{flex:1;font-size:var(--schrift-2)}
.kommentar .meta{font-size:12px;color:var(--text-3)}
.protokoll-zeile{display:grid;grid-template-columns:140px 1fr;gap:8px;font-size:13px;padding:6px 0;border-top:1px solid var(--linie-2)}
.protokoll-zeile .alt{color:var(--text-3);text-decoration:line-through}
.protokoll-zeile .neu{color:var(--tinte);font-weight:600}

/* --- Fusszeile KI Manufaktur ---------------------------------------------- */
footer.kim{flex:0 0 auto;margin-top:auto;border-top:1px solid var(--linie);background:var(--karte);padding:18px 32px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
footer.kim img{height:24px;width:auto;display:block}
footer.kim .text{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--text-3)}
footer.kim a{color:var(--marke-dunkel);text-decoration:none}

/* --- Schmale Bildschirme: Leiste klappt ein, wird nicht weggeworfen -------
   ACHTUNG Reihenfolge: .menue-knopf{display:none} steht BEWUSST VOR der
   Medienabfrage. Stand es danach (so war es im geerbten Blatt), gewann die
   spaetere Regel und der Menueknopf blieb am Handy unsichtbar — damit hatte
   ein Handynutzer ueberhaupt keine Navigation mehr, weil die Leiste
   eingeklappt ist. Beim Herausloesen am 16.09.2026 reproduziert und hier
   dauerhaft behoben. Wer diese Zeile nach unten schiebt, bricht das Handy. */
.menue-knopf{display:none}
@media (max-width:900px){
  body{padding-left:0}
  aside.leiste{transform:translateX(-100%);transition:transform var(--dauer-3) var(--kurve);width:280px}
  body.leiste-offen aside.leiste{transform:translateX(0)}
  .kopf{padding:10px 16px}.kopf .suchknopf{flex:1}
  main.inhalt{padding:var(--abstand-3) 16px var(--abstand-6)}
  footer.kim{padding:16px}
  .menue-knopf{display:inline-flex}
}
@media print{aside.leiste,.kopf,footer.kim,#rueckgaengig{display:none}body{padding-left:0}}

/* [hidden] gewinnt immer — auch gegen display:inline-flex der Knoepfe/Pills.
   Ohne diese Zeile bleibt ein verborgener Knopf sichtbar (Fund 04.09.2026). */
[hidden]{display:none!important}