/* ===========================================================================
   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-3)}
.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:var(--schrift-3);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:var(--schrift-1);margin-left:auto}
.nav .gruppe{font-size:var(--schrift-1);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:var(--schrift-1);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:var(--schrift-1);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:var(--schrift-3);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:var(--schrift-2);font-weight:500;color:var(--text-2);margin-left:6px}
.kpi .stand{font-size:var(--schrift-1);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:var(--schrift-2)}
.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:var(--schrift-2);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:var(--schrift-3);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:var(--schrift-2);color:var(--rot)}
.feld.fehler .feld-fehler{display:block}
.feld .hinweis{font-size:var(--schrift-1);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:var(--schrift-1);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:var(--schrift-2);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:var(--schrift-1);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:var(--schrift-2);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:var(--schrift-2);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}

/* Typo-Skala (30.09.2026): nur noch Token-Größen 12/14/16/20/24 — Zwischengrößen 10/11/12,5/13/15/17 px
   waren Erbe und sind auf die Tokens umgestellt. Eingabefelder 16 px (iOS zoomt sonst beim Antippen). */
/* === Angaben-Raster, Fehlt-Tag, Eingabe-Pop-up (aus Schmelzer 30.09.2026 zurückgeführt) ===
   Eine Typo-Skala aus tokens.css: Beschriftung --schrift-2 halbfett grau · Wert --schrift-3
   normal · Kartentitel --schrift-4 fett · Hinweis --schrift-2 gedämpft. Feldinhalte normal,
   Beschriftungen betont. Fehlende Pflichtangaben als roter Pill-Tag, der ein Pop-up öffnet
   (nur für wirklich benötigte Angaben — optionale Stammdaten nicht als Dauerwarnung). */
.karten-titel{display:flex;align-items:center;gap:var(--abstand-3);font-size:var(--schrift-4);line-height:1.3;font-weight:700;color:var(--tinte);margin:0 0 var(--abstand-4)}
.karten-titel .nr{flex:0 0 28px;width:28px;height:28px;border-radius:var(--radius-pill);background:var(--marke);color:#fff;font-size:var(--schrift-2);display:inline-flex;align-items:center;justify-content:center}
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--abstand-4) var(--abstand-5);margin:0}
.raster>div{min-width:0}
.raster-breit{grid-column:1/-1}
.raster dt{font-size:var(--schrift-2);line-height:1.4;font-weight:600;color:var(--text-2);margin:0}
.raster dd{margin:var(--abstand-1) 0 0;font-size:var(--schrift-3);line-height:1.5;font-weight:400;color:var(--tinte);overflow-wrap:anywhere}
.raster dd .wert-leer{color:var(--text-3)}
@media(max-width:560px){.raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--abstand-4)}}
.karten-hinweis{margin:var(--abstand-4) 0 0;font-size:var(--schrift-2);line-height:1.5;color:var(--text-3)}
.tag-reihe{display:flex;flex-wrap:wrap;gap:var(--abstand-2)}
.fehlt-tag{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--abstand-4);border-radius:var(--radius-pill);background:var(--rot-bg);color:var(--rot);border:1px solid var(--rot-linie);font:inherit;font-size:var(--schrift-2);font-weight:600;line-height:1.2;cursor:pointer;text-align:left}
button.fehlt-tag:hover{border-color:var(--rot)}
button.fehlt-tag:focus-visible{outline:2px solid var(--rot);outline-offset:2px}
.fehlt-tag.still{cursor:default;min-height:32px}
.link-knopf{min-height:44px;padding:0 var(--abstand-2);background:none;border:0;color:var(--marke-dunkel);font:inherit;font-size:var(--schrift-2);font-weight:600;text-decoration:underline;cursor:pointer}
dialog.eingabe-dialog{border:1px solid var(--linie);border-radius:var(--radius-karte);padding:var(--abstand-5);width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;background:var(--karte);color:var(--text);box-shadow:var(--schatten-2)}
dialog.eingabe-dialog::backdrop{background:rgba(0,0,0,.35)}
.dialog-felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 var(--abstand-4)}
.dialog-knoepfe{display:flex;justify-content:flex-end;gap:var(--abstand-3);flex-wrap:wrap;margin-top:var(--abstand-5);padding-top:var(--abstand-4);border-top:1px solid var(--linie)}

/* ===================================================================================
   Ergänzungen 30.09.2026 (Schmelzer-Backend, D-24 bis D-37) — kundenneutral.
   Jede Farbe aus tokens.css. Zugehörige Skripte: assets/js/suche.js,
   teilwechsel.js, sofort-speichern.js. Musterkatalog: references/app-elemente.md.
   =================================================================================== */

/* Live-Suche in der Kopfzeile (EINE Suche für die ganze App, keine Suchfelder je Liste) */
.kopf .globale-suche{position:relative;flex:1 1 520px;max-width:640px;min-width:180px}
.kopf .globale-suche .suchknopf{width:100%;margin:0;cursor:text}
.globale-suche .suchknopf:focus-within{outline:2px solid var(--marke);outline-offset:2px}
.kopf .globale-suche input[type=search]{border:0!important;box-shadow:none!important;background:transparent;flex:1;min-width:0;padding:0;min-height:26px;font:inherit;color:var(--tinte);outline:none}
.globale-suche input::placeholder{color:var(--text-3);opacity:1}
.suche-popup{position:absolute;top:calc(100% + 8px);left:0;width:min(680px,calc(100vw - 300px));min-width:100%;background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius-karte);box-shadow:0 16px 45px rgba(0,0,0,.14);overflow:hidden;color:var(--tinte);z-index:75}
.suche-popup[hidden],.suche-alle[hidden]{display:none!important}
.suche-popup-kopf{padding:12px 16px;background:var(--marke-bg);border-bottom:1px solid var(--linie);font-size:var(--schrift-1);font-weight:600;color:var(--marke-dunkel)}
.suche-popup [role=listbox]{max-height:min(62vh,560px);overflow:auto;overscroll-behavior:contain}
.suche-treffer{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-bottom:1px solid var(--linie);color:var(--tinte)!important;text-decoration:none!important;line-height:1.45}
.suche-treffer:hover,.suche-treffer[aria-selected=true],.suche-treffer:focus-visible{background:var(--marke-bg);outline:0;box-shadow:inset 3px 0 var(--marke)}
.suche-tag{flex:0 0 auto;max-width:120px;padding:3px 8px;border-radius:999px;background:var(--marke-hell);color:var(--marke-dunkel);font-size:var(--schrift-1);font-weight:600;line-height:1.5;margin-top:1px}
.suche-inhalt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;overflow-wrap:anywhere}
.suche-inhalt strong{font-size:var(--schrift-2);font-weight:600}.suche-inhalt>span{font-size:var(--schrift-1);color:var(--text-2)}.suche-inhalt small{font-size:var(--schrift-1);color:var(--text-3)}
.suche-pfeil{color:var(--marke)}
.suche-alle{display:block;padding:12px 16px;font-size:var(--schrift-2);font-weight:600;text-decoration:none;background:var(--flaeche);color:var(--marke-dunkel)}
@media(max-width:900px){.kopf .globale-suche{max-width:none;min-width:0}.kopf .globale-suche kbd{display:none}.suche-popup{width:min(640px,calc(100vw - 90px))}}
@media(max-width:600px){.kopf{flex-wrap:wrap}.kopf .globale-suche{order:3;flex:1 0 100%;max-width:100%}.suche-popup{width:100%;min-width:0}}

/* Weiche Überblendung bei jedem Seitenwechsel; Teilwechsel über teilwechsel.js */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s;animation-timing-function:ease-out}
.leiste{view-transition-name:leiste}
.einblenden{animation:bausatz-einblenden .22s ease-out}
@keyframes bausatz-einblenden{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}.einblenden{animation:none}}

/* Arbeitsliste: Name groß, Anliegen in derselben Zeile, Status als eigene Spalte */
.zeile-name{font-size:var(--schrift-3);font-weight:600}
.zeile-art{color:var(--text-2);font-size:var(--schrift-2);margin-left:6px}
.zeile-status{white-space:nowrap}
.zeile-status .pill{margin:2px 4px 2px 0}
.liste-tabelle th,.liste-tabelle .knopf{white-space:nowrap}

/* Zuständigkeit im Kopf eines Vorgangs, sofort umstellbar (sofort-speichern.js) */
.zustaendig-leiste{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0 0 var(--abstand-4);padding:12px 16px;border:1px solid var(--linie);border-radius:var(--radius-karte);background:var(--karte)}
.zustaendig-leiste form{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0}
.zustaendig-leiste label,.zustaendig-leiste .label{font-size:var(--schrift-2);font-weight:600;color:var(--text-2)}
.zustaendig-leiste select{min-height:44px;min-width:240px;padding:8px 36px 8px 14px;border:1px solid var(--linie);border-radius:999px;background-color:var(--marke-bg);color:var(--marke-dunkel);font:inherit;font-size:var(--schrift-3);font-weight:600}
.zustaendig-leiste.offen{border-color:var(--rot-linie);background:var(--rot-bg)}
.zustaendig-leiste.offen select{background-color:var(--karte);color:var(--rot)}

/* Verlauf: klein, ganz unten, eine Zeile je Eintrag, abwechselnd hinterlegt */
.verlauf .karten-titel{margin-bottom:8px}
.verlauf-liste{list-style:none;margin:0;padding:0;font-size:var(--schrift-1);line-height:1.45}
.verlauf-liste li{display:grid;grid-template-columns:120px minmax(0,220px) minmax(0,1fr);gap:4px 16px;padding:8px 10px;border-radius:8px;overflow-wrap:anywhere}
.verlauf-liste li:nth-child(odd){background:var(--flaeche)}
.verlauf-liste time{color:var(--text-3);white-space:nowrap}
.verlauf-was{color:var(--text-2);font-weight:600}
.verlauf-text{color:var(--text);white-space:pre-wrap}
@media (max-width:700px){.verlauf-liste li{grid-template-columns:1fr auto}.verlauf-liste time{order:2;text-align:right}.verlauf-text{grid-column:1/-1}}

/* Umschalter „Ansicht als …“ (nur Verwalter) + Balken „nur schauen“ */
.ansicht-wahl{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--linie);border-radius:999px;background:var(--karte)}
.ansicht-wahl a{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;color:var(--text-2);font-size:var(--schrift-2);font-weight:600;text-decoration:none;white-space:nowrap}
.ansicht-wahl a:hover{color:var(--text)}
.ansicht-wahl a.aktiv{background:var(--marke);color:#fff}
.vorschau-balken{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0 32px;padding:10px 16px;border:1px solid var(--gelb-linie);border-radius:var(--radius-karte);background:var(--gelb-bg);color:var(--gelb);font-size:var(--schrift-2)}
.vorschau-balken span{flex:1 1 260px}
.vorschau-balken a{font-weight:600;color:inherit}
body.vorschau main button,body.vorschau main input[type=submit],body.vorschau main input[type=file]{opacity:.45;pointer-events:none}
@media (max-width:700px){.kopf{flex-wrap:wrap}.kopf .rechts{margin-left:auto}.ansicht-wahl a{padding:0 10px;min-height:36px}.vorschau-balken{margin:0 16px}}
/* Filterzeile über alle Spalten (Schmelzer D-38) */
.filter-zeile{display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--abstand-3);margin:0 0 var(--abstand-4)}
.filter-zeile label{display:flex;flex-direction:column;gap:4px;min-width:150px;flex:1 1 150px;max-width:220px;margin:0}
.filter-zeile label span{font-size:var(--schrift-1);font-weight:600;color:var(--text-2)}
.filter-zeile select{min-height:44px;padding:9px 12px;border:1px solid var(--linie);border-radius:var(--radius-knopf);background:var(--karte);color:var(--text);font:inherit;font-size:var(--schrift-2)}
.filter-zeile select:focus{outline:none;border-color:var(--marke);box-shadow:0 0 0 3px var(--marke-bg)}
.filter-zeile .filter-weg{align-self:center;font-size:var(--schrift-2);font-weight:600;white-space:nowrap}
.filter-zeile .filter-neu{margin-left:auto;align-self:flex-end}
@media (max-width:700px){.filter-zeile label{max-width:none;flex:1 1 calc(50% - 12px);min-width:0}.filter-zeile .filter-neu{margin-left:0;width:100%;justify-content:center}}
/* Rollen-Rahmen: mehrere feste Rollen je Vorgang oben gerahmt (Schmelzer D-39) */
.rollen-rahmen{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;margin:0 0 var(--abstand-4);border:2px solid var(--marke);border-radius:var(--radius-karte);background:var(--karte);overflow:hidden}
.rollen-rahmen .rolle{display:flex;flex-direction:column;gap:6px;padding:14px 18px;min-width:0}
.rollen-rahmen .rolle+.rolle{border-left:1px solid var(--linie)}
.rollen-rahmen form{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0}
.rollen-rahmen label,.rollen-rahmen .label{font-size:var(--schrift-1);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--marke-dunkel)}
.rollen-rahmen label span,.rollen-rahmen .label span{font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-3);margin-left:4px}
.rollen-rahmen select{width:100%;min-height:44px;padding:8px 36px 8px 14px;border:1px solid var(--linie);border-radius:999px;background-color:var(--marke-bg);color:var(--marke-dunkel);font:inherit;font-size:var(--schrift-3);font-weight:600}
.rollen-rahmen .rolle.offen{background:var(--rot-bg)}
.rollen-rahmen .rolle.offen label,.rollen-rahmen .rolle.offen .label{color:var(--rot)}
.rollen-rahmen .rolle.offen select{background-color:var(--karte);color:var(--rot);border-color:var(--rot-linie)}
@media (max-width:700px){.rollen-rahmen .rolle+.rolle{border-left:0;border-top:1px solid var(--linie)}}