/* ===========================================================================
   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 var(--abstand-1);display:flex;align-items:center;gap:var(--abstand-2)}
.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);min-width:0}
.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}
/* iOS date controls otherwise retain their native intrinsic minimum width. */
.feld input,.feld select,.feld textarea{min-width:0;max-width:100%;box-sizing:border-box}
input[type="date"],input[type="datetime-local"],input[type="time"]{appearance:none;-webkit-appearance:none;box-sizing:border-box;min-width:0;max-width:100%;width:100%}
input::-webkit-date-and-time-value{min-width:0;text-align:left}
.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);line-height:16px;font-weight:600;color:var(--text-3);padding:6px 8px;border-bottom:1px solid var(--linie);background:var(--linie-2)}
.tabelle td{padding:12px 8px;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}

/* Arbeitsübersicht und lange Inhalte bleiben auch auf 320px bedienbar. */
main.inhalt{min-width:0}
.segmente{display:flex;max-width:100%;overflow-x:auto}
.segmente a[aria-selected="true"]{background:var(--tinte);color:#fff}
.raster-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.verlauf-eintrag{padding:12px 0;border-top:1px solid var(--linie-2);overflow-wrap:anywhere}
.check{display:flex;gap:10px;align-items:flex-start;margin:16px 0}
.check input{flex:0 0 auto;margin-top:4px}
@media(max-width:700px){
 .anfragen-tabelle,.anfragen-tabelle tbody,.anfragen-tabelle tr,.anfragen-tabelle td{display:block;width:100%}
 .anfragen-tabelle thead{display:none}
 .anfragen-tabelle tr{padding:12px 0;border-bottom:2px solid var(--linie)}
 .anfragen-tabelle td{border:0;white-space:normal!important;padding:6px 12px;overflow-wrap:anywhere}
 .anfragen-tabelle td::before{content:attr(data-label);display:block;font-size:var(--schrift-1);font-weight:700;color:var(--text-3);margin-bottom:3px}
 .anfragen-tabelle td[data-label=""]::before{display:none}
}

/* Loom-Feedback 18.09.2026: ruhige Signalfarben und drei getrennte Herkunftstags. */
.kachel-ueberfaellig{background:#f8ddd8;border-color:#eab5ad}
.kachel-heute,.kachel-planung{background:var(--rot-bg);border-color:var(--rot-linie)}
.kachel-neu{background:var(--gruen-bg);border-color:var(--gruen-linie)}
.kachel-ohne,.kachel-entscheidung{background:var(--gelb-bg);border-color:var(--gelb-linie)}
.altbestand{display:flex;align-items:center;justify-content:space-between;gap:var(--abstand-5);text-decoration:none;color:var(--text);background:var(--blau-bg)}
.altbestand strong{font-size:2rem}
.altbestand p{margin:var(--abstand-2) 0 0}
.herkunft-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:150px}
.herkunft-tags .pill{white-space:normal;overflow-wrap:anywhere;text-align:left}
.herkunft-tags .eingang-tag{font-size:var(--schrift-1);background:var(--flaeche);color:var(--text-2)}

/* Vereinfachter Arbeitsablauf: ein Fokus, Zusatzaktionen eingeklappt. */
.anfrage-einfach{max-width:860px;margin:0 auto}
.anfrage-einfach .karte{overflow-wrap:anywhere}
.anfrage-einfach details section{border-top:1px solid var(--linie);padding-top:16px;margin-top:16px}
summary{cursor:pointer;font-weight:600;padding:8px 0}
.weitere-ansichten{margin:12px 0 20px}
.ansicht-links{display:flex;gap:12px 20px;flex-wrap:wrap;padding:12px 0}
.kachel-bearbeitung{background:var(--blau-bg)}
@media(max-width:480px){.anfrage-einfach .karte{padding:20px}.segmente a{white-space:normal}.knopf{max-width:100%;white-space:normal}}

/* --- Rueckfrage beim Schliessen einer Anfrage ----------------------------
   Ein Fenster, das den Vorgang genau einmal anhaelt. Bewusst mit zwei klaren
   Knoepfen statt einer Auswahlliste: eine Entscheidung, ein Griff. */
dialog.frage{border:1px solid var(--linie);border-radius:var(--radius-karte);padding:var(--abstand-5);max-width:460px;width:calc(100% - var(--abstand-5));box-shadow:var(--schatten-2);color:var(--text);background:var(--karte)}
dialog.frage::backdrop{background:rgba(21,22,26,.45)}
dialog.frage h2{font-size:var(--schrift-4);color:var(--tinte);margin:0 0 var(--abstand-2)}
dialog.frage p{margin:0 0 var(--abstand-3);font-size:var(--schrift-2)}
dialog.frage .frage-knoepfe{display:flex;flex-wrap:wrap;gap:var(--abstand-2);margin-bottom:var(--abstand-3)}
dialog.frage .frage-knoepfe .knopf{flex:1 1 160px;justify-content:center}

/* --- Besichtigung vor Ort (Tablet) --------------------------------------
   Eigener Rahmen ohne Navigation. Wer hier steht, hat eine Aufgabe und keine
   Lust zu suchen. Alle Trefferflaechen deutlich ueber 44 px, weil im Winter
   mit Handschuh getippt wird. */
body.vor-ort{background:var(--flaeche)}
body.vor-ort .inhalt{max-width:760px;margin:0 auto;padding:var(--abstand-4) var(--abstand-4) 96px}
.vor-ort-kopf{background:var(--leiste);color:var(--leiste-text);display:flex;align-items:center;gap:var(--abstand-3);padding:var(--abstand-3) var(--abstand-4)}
.vor-ort-kopf img{height:28px;width:auto;flex:0 0 auto}
.vor-ort-kopf span{font-weight:600;font-size:var(--schrift-2)}
body.vor-ort h1{font-size:var(--schrift-5);margin:var(--abstand-4) 0 var(--abstand-1)}
body.vor-ort .sub{color:var(--text-2);margin-bottom:var(--abstand-4)}

/* Antippen statt aufklappen: eine Auswahlliste kostet auf dem Tablet drei
   Bewegungen, eine Knopfreihe eine. Radios koennen das ohne JavaScript. */
.tippfeld{border:0;padding:0;margin:0 0 var(--abstand-4)}
.tippfeld legend{font-size:var(--schrift-2);font-weight:600;color:var(--text);padding:0;margin-bottom:6px}
.tipps{display:flex;flex-wrap:wrap;gap:var(--abstand-2)}
.tipps input{position:absolute;opacity:0;width:0;height:0}
.tipps label{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:10px 18px;
  border:1px solid #d8d8d8;border-radius:var(--radius-pill);background:var(--karte);color:var(--tinte);
  font-size:var(--schrift-3);font-weight:600;cursor:pointer;transition:background var(--dauer-1),border-color var(--dauer-1)}
.tipps input:checked+label{background:var(--marke);border-color:var(--marke);color:#fff}
.tipps input:focus-visible+label{outline:2px solid var(--marke);outline-offset:2px}
.tippfeld[disabled] label{opacity:.6;cursor:default}
.feld .einheit{font-weight:400;color:var(--text-3)}

canvas#skizze{width:100%;height:auto;aspect-ratio:1000/620;border:1px solid #d8d8d8;border-radius:var(--radius-knopf);
  background:#fff;touch-action:none;display:block}
.skizze-knoepfe{display:flex;align-items:center;gap:var(--abstand-3);margin-top:var(--abstand-2)}
.skizze-bestand{width:100%;height:auto;border:1px solid var(--linie);border-radius:var(--radius-knopf);margin-bottom:var(--abstand-3)}

/* Die beiden Speicherknoepfe kleben unten. Auf einem langen Formular ist der
   Knopf sonst immer dort, wo man gerade nicht ist. */
.vor-ort-fuss{position:sticky;bottom:0;display:flex;gap:var(--abstand-2);flex-wrap:wrap;
  background:var(--flaeche);border-top:1px solid var(--linie);padding:var(--abstand-3) 0;margin-top:var(--abstand-4)}
.vor-ort-fuss .knopf{flex:1 1 200px;justify-content:center;min-height:52px}

/* --- Abschnitt, den nur die Verwaltung sieht -----------------------------
   Sichtbar anders als der Rest, damit beim Vorführen niemand glaubt, das sei
   schon für alle da. */
.karte.nur-verwaltung{border-left:3px solid var(--marke)}
.karte.nur-verwaltung h3{font-size:var(--schrift-3);color:var(--marke-dunkel);margin:var(--abstand-5) 0 var(--abstand-2)}
.karte.nur-verwaltung h3:first-of-type{margin-top:var(--abstand-3)}
.marke-pille{display:inline-block;vertical-align:middle;margin-left:var(--abstand-2);background:var(--marke-bg);color:var(--marke-dunkel);
  border-radius:var(--radius-pill);padding:2px 10px;font-size:var(--schrift-1);font-weight:600}
.link-klartext{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--schrift-2);word-break:break-all;
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius-knopf);padding:10px;margin:var(--abstand-2) 0}
ul.knapp{margin:0 0 var(--abstand-3) 18px;font-size:var(--schrift-2);color:var(--text)}
ul.knapp li{margin:2px 0}
.box-auswertung{background:var(--marke-bg);border:1px solid var(--marke-hell);border-radius:var(--radius-knopf);padding:var(--abstand-4)}

/* --- Durchlauf-Karte (Schema 015, 30.09.2026) -------------------------------
   Oben die fünf Stationen, darunter nur das, was jetzt zu tun ist. */
.durchlauf .stationen{list-style:none;display:flex;gap:6px;padding:0;margin:0 0 var(--abstand-4);counter-reset:station;flex-wrap:wrap}
.durchlauf .stationen li{flex:1 1 110px;counter-increment:station;font-size:var(--schrift-2);font-weight:600;color:var(--text-3);padding:8px 10px 8px 10px;border-radius:var(--radius-knopf);background:var(--flaeche);border:1px solid var(--linie)}
.durchlauf .stationen li::before{content:counter(station) " · "}
.durchlauf .stationen li.erledigt{color:var(--gruen);border-color:var(--gruen-linie);background:var(--gruen-bg)}
.durchlauf .stationen li.jetzt{color:#fff;background:var(--marke);border-color:var(--marke)}
.durchlauf h2{margin-top:0}
.durchlauf h3{margin-top:var(--abstand-4)}
/* Fragengruppen: klare Rangordnung Gruppe > Frage > Antwort, Gruppen durch
   eine Linie getrennt, Fragen nebeneinander, wo Platz ist (30.09.2026). */
.feldgruppe{margin-top:var(--abstand-4)}
.feldgruppe+.feldgruppe{border-top:1px solid var(--linie);padding-top:var(--abstand-4)}
.feldgruppe h3{font-size:16px;font-weight:700;color:var(--tinte);margin:0 0 var(--abstand-3);letter-spacing:0;text-transform:none}
.feldgruppe .felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--abstand-3) var(--abstand-5);align-items:start}
.feldgruppe .tippfeld{margin:0}
.feldgruppe .feld{margin:0}
.tippfeld legend{font-size:var(--schrift-2);font-weight:600;color:var(--text-2)}
.feld input[inputmode=decimal]{max-width:240px}
/* Am Bürobildschirm kompaktere Knöpfe; am Tablet (body.vor-ort) bleiben sie groß. */
.durchlauf .tipps label,.neu-anfrage .tipps label{min-height:42px;padding:8px 16px;font-size:14px}
.durchlauf>p.hinweis{margin:0 0 var(--abstand-3)}
.durchlauf .knopfreihe{border-top:1px solid var(--linie);padding-top:var(--abstand-4)}
.durchlauf textarea{min-height:0}
.knopfreihe{display:flex;flex-wrap:wrap;gap:var(--abstand-2);margin-top:var(--abstand-4)}
.einheit{font-weight:400;color:var(--text-3);font-size:12px}
.termintext{width:100%;font-family:inherit;font-size:var(--schrift-2);padding:10px 12px;border:1px solid var(--linie);border-radius:var(--radius-knopf);background:var(--flaeche);margin:var(--abstand-2) 0}
.drei-wege{display:grid;gap:var(--abstand-2)}
.drei-wege details.weg>summary{list-style:none;width:100%;justify-content:center}
.drei-wege details.weg>summary::-webkit-details-marker{display:none}
.drei-wege details.weg[open]{border:1px solid var(--linie);border-radius:var(--radius-karte);padding:var(--abstand-3)}
.drei-wege details.weg[open]>summary{margin-bottom:var(--abstand-3)}
details.kein-interesse{margin-top:var(--abstand-3)}
details.kein-interesse>summary,details.frei-eintragen>summary{cursor:pointer;color:var(--text-2);font-size:var(--schrift-2)}
ul.knapp{margin:0 0 var(--abstand-3);padding-left:18px}

/* Neue Anfrage: zuerst die Art wählen (30.09.2026). */
.art-wahl{max-width:640px;margin:var(--abstand-5) auto;text-align:center}
.art-wahl h1{margin-bottom:var(--abstand-2)}
.art-kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--abstand-3);margin-top:var(--abstand-4)}
.art-kacheln a{display:flex;align-items:center;justify-content:center;min-height:96px;padding:var(--abstand-3);border:1px solid var(--linie);border-radius:var(--radius-karte);background:var(--karte);color:var(--tinte);font-size:18px;font-weight:700;text-decoration:none;box-shadow:var(--schatten-1);transition:border-color var(--dauer-1),transform var(--dauer-1)}
.art-kacheln a:hover,.art-kacheln a:focus-visible{border-color:var(--marke);color:var(--marke-dunkel);transform:translateY(-2px)}
.neu-anfrage .art-zeile{display:flex;align-items:center;gap:var(--abstand-2);margin-bottom:var(--abstand-3)}
.neu-anfrage h2{font-size:var(--schrift-4);margin:var(--abstand-5) 0 var(--abstand-2);padding-top:var(--abstand-4);border-top:1px solid var(--linie)}
.neu-anfrage h2.erste{border-top:0;padding-top:0;margin-top:0}
.feld-zeile{display:grid;grid-template-columns:120px 1fr;gap:var(--abstand-3)}
.durchlauf .feldgruppe+.feld,.neu-anfrage .feldgruppe+h2{margin-top:var(--abstand-4)}
.durchlauf .feldgruppe+.feld{border-top:1px solid var(--linie);padding-top:var(--abstand-4)}
.anfrage-einfach .karte>h2:first-child,.anfrage-einfach section.karte>h2:first-child{margin-top:0}
.durchlauf .stationen+p.hinweis+h2,.durchlauf .stationen+h2{margin-top:var(--abstand-2)}
@media(max-width:700px){.feld-zeile{grid-template-columns:1fr!important}.feldgruppe .felder{grid-template-columns:1fr}}

/* --- Durchlauf-Karte: einheitliche Rangordnung in ALLEN Stationen (30.09., 2. Runde)
   Stationstitel 20px > Schritt/Gruppe 16px mit Nummer > Frage 13px > Antwort-Knopf.
   Schritte durch Linien getrennt, Nebenwege klein und grau. */
.durchlauf .stationen{margin-bottom:var(--abstand-4)}
.durchlauf .verwalter-hinweis{font-size:var(--schrift-2);color:var(--text-3);margin:0 0 var(--abstand-4)}
.durchlauf h2{font-size:20px;margin:0 0 var(--abstand-2)}
.durchlauf h2+p.hinweis{margin:0 0 var(--abstand-2);color:var(--text-2)}
.durchlauf h3,.feldgruppe h3{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;color:var(--tinte);margin:0 0 var(--abstand-3)}
.schritt{margin-top:var(--abstand-4)}
.schritt+.schritt{border-top:1px solid var(--linie);padding-top:var(--abstand-4)}
.schritt h3 .nr{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--marke-bg);color:var(--marke-dunkel);font-size:var(--schrift-2);display:inline-flex;align-items:center;justify-content:center}
.schritt p{margin:0 0 var(--abstand-2)}
.schritt .tippfeld{margin-bottom:var(--abstand-3)}
.schritt .knopfreihe,.knopfreihe.ohne-linie{border-top:0;padding-top:0;margin-top:var(--abstand-3)}
.durchlauf input[type=date]{max-width:220px}
.durchlauf .feld{margin-bottom:var(--abstand-3)}
details.nebenweg{margin-top:var(--abstand-4);padding-top:var(--abstand-3);border-top:1px dashed var(--linie)}
details.nebenweg>summary{font-size:14px;font-weight:500;color:var(--text-2);cursor:pointer;list-style-position:inside}
details.nebenweg[open]>summary{margin-bottom:var(--abstand-3)}
details.frei-eintragen>summary{font-size:var(--schrift-3);font-weight:600}
.durchlauf ul.knapp{columns:2 260px;column-gap:var(--abstand-5);margin:0 0 var(--abstand-3)}
.durchlauf ul.knapp li{break-inside:avoid;margin-bottom:4px}

/* --- Skizze im Vollbild und Fotos (30.09.2026) ------------------------------ */
.skizze-vorschau{border:1px solid var(--linie);border-radius:var(--radius-knopf);background:#fff;min-height:120px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:var(--abstand-3)}
.skizze-vorschau img{width:100%;height:auto;display:block}
.skizze-vorschau.leer{color:var(--text-3);font-size:14px}
dialog.skizze-vollbild{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#e9e9e9}
dialog.skizze-vollbild[open]{display:flex;flex-direction:column}
dialog.skizze-vollbild::backdrop{background:rgba(0,0,0,.5)}
.skizze-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;background:#fff;border-bottom:1px solid var(--linie)}
.skizze-gruppe{display:flex;gap:6px}
.skizze-gruppe.rechts{margin-left:auto}
.skizze-leiste .knopf.aktiv{background:var(--marke);color:#fff;border-color:var(--marke)}
.skizze-flaeche{flex:1 1 auto;position:relative;overflow:hidden;touch-action:none;cursor:crosshair}
.skizze-flaeche.hand{cursor:grab}
.skizze-flaeche canvas{position:absolute;left:0;top:0;max-width:none;aspect-ratio:auto;transform-origin:0 0;background:#fff;border:0;border-radius:0;box-shadow:0 0 0 1px #c8c8c8}
.skizze-tipp{margin:0;padding:6px 10px;font-size:12px;color:var(--text-3);background:#fff;border-top:1px solid var(--linie)}
.foto-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-bottom:var(--abstand-3)}
.foto-raster figure{position:relative;margin:0;aspect-ratio:1;border-radius:var(--radius-knopf);overflow:hidden;background:#eee}
.foto-raster img{width:100%;height:100%;object-fit:cover;display:block}
.foto-weg{position:absolute;top:4px;right:4px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.foto-knopf{cursor:pointer}
.skizze-buero{max-width:100%;border:1px solid var(--linie);border-radius:var(--radius-knopf);margin:var(--abstand-2) 0}
.skizze-leiste .knopf{min-height:40px;padding:6px 12px;font-size:14px}
.skizze-leiste .knopf.primaer{padding:6px 18px}
@media(max-width:560px){.skizze-leiste{gap:6px;padding:6px}.skizze-gruppe.rechts{margin-left:auto}.skizze-leiste .knopf{padding:6px 10px}}
body.vor-ort .karte>h2:first-child{margin-top:0}

/* --- K1–K4 und anklickbare Stationen (30.09.2026, Release 2026-09-30.6) --- */
.durchlauf .stationen li{padding:0}
.durchlauf .stationen li::before{content:none}
.durchlauf .stationen li a::before{content:counter(station) " · "}
.durchlauf .stationen li a{display:block;padding:8px 10px;color:inherit;text-decoration:none;border-radius:inherit}
.durchlauf .stationen li a:hover{background:rgba(0,20,70,.06)}
.durchlauf .stationen li.jetzt a:hover{background:rgba(255,255,255,.12)}
.durchlauf .stationen li.gezeigt:not(.jetzt){outline:2px solid var(--marke);outline-offset:1px}
.durchlauf .ansicht-hinweis{font-size:var(--schrift-2);color:var(--text-2);background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-knopf);padding:8px 12px;margin:0 0 var(--abstand-3)}
.foto-raster figure figcaption{position:absolute;left:0;right:0;top:0;padding:3px 6px;font-size:var(--schrift-1);background:var(--rot);color:#fff}
.foto-aktionen{position:absolute;left:4px;right:4px;bottom:4px;display:flex;gap:4px;flex-wrap:wrap}
.foto-aktionen .knopf.klein{min-height:44px;padding:3px 8px;font-size:12px;background:rgba(255,255,255,.92)}
.skizze-leiste .knopf.farbe{border-left:6px solid var(--f)}
.foto-raster:has(.foto-aktionen){grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.nav .sub{display:flex;flex-direction:column;gap:2px;margin:0 0 4px 30px}
.nav .sub a{padding:7px 10px;font-size:14px}
.nav-zahl{margin-left:auto;font-size:12px;font-weight:600;background:rgba(255,255,255,.12);border-radius:999px;padding:1px 8px;min-width:24px;text-align:center}
/* --- Gliederung in Karten (Wolfgang 30.09.2026, Variante B) ------------------ */
.durchlauf>.karte{margin-bottom:var(--abstand-4)}
.stationen-karte{padding:var(--abstand-4)!important}
.stationen-karte .stationen{margin-bottom:0!important}
.stationen-karte .verwalter-hinweis,.stationen-karte .frist-rot,.stationen-karte .ansicht-hinweis{margin:var(--abstand-3) 0 0!important}
.notiz-block{margin:var(--abstand-4) 0 0;padding:var(--abstand-3);background:var(--flaeche);border-radius:var(--radius-knopf);white-space:normal}
.karte .drei-wege{margin-top:0}
/* --- Live-Suche in der Kopfzeile (aus Scherübel übernommen, Schmelzer-Farben) --- */
.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:#fff;border:1px solid var(--linie);border-radius:var(--radius-karte);box-shadow:0 16px 45px rgba(0,20,70,.16);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:12px;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:14px;font-weight:600}.suche-inhalt>span{font-size:12px;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 (Wolfgang 30.09.2026) ---------------------------------
   Seitenwechsel: Browser-Überblendung (Chrome/Edge, Safari ab iOS 18.2); ältere
   Browser wechseln wie bisher. Stationswechsel: stationen.js tauscht nur die Karten
   und nutzt dieselbe Überblendung, sonst die Einblend-Klasse. */
@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:smz-einblenden .22s ease-out}
@keyframes smz-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}}
/* Listenleiste ohne eigenes Suchfeld (Kopfsuche reicht, 30.09.2026) */
.listen-leiste{display:flex;align-items:center;gap:var(--abstand-3);flex-wrap:wrap;margin:0 0 var(--abstand-4)}
.art-filter select{min-width:220px;padding:11px 13px;border:1px solid #d8d8d8;border-radius:var(--radius-knopf);font-size:var(--schrift-3);font-family:inherit;background:#fff;color:var(--text);min-height:44px}
.art-filter select:focus{outline:none;border-color:var(--marke);box-shadow:0 0 0 3px var(--marke-bg)}
.such-hinweis{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--marke-bg);color:var(--marke-dunkel);font-size:14px;font-weight:600}
.such-hinweis a{font-weight:500}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* === Einheitliche Karten-Typografie (Wolfgang 30.09.2026, App-Bausatz/design-quality) ===
   Eine Skala aus tokens.css, nichts dazwischen:
     Beschriftung --schrift-2 (14) halbfett grau · Wert/Fließtext --schrift-3 (16) normal
     Kartentitel  --schrift-4 (20) fett            · Hinweis --schrift-2 normal, gedämpft
   Feldinhalte normal, Beschriftungen betont (Bausatz: „nicht jede Zeile fett“).
   Farben nur aus tokens.css. Radien 12 / 8 / Pill. Fingerziele 44 px. */
.karten-titel{display:flex;align-items:center;gap:var(--abstand-3);font-size:var(--schrift-4)!important;line-height:1.3;font-weight:700;color:var(--tinte);margin:0 0 var(--abstand-4)!important}
.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-abstand{margin-top:var(--abstand-5);padding-top:var(--abstand-4);border-top:1px solid var(--linie)}
.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 a{font-weight:400}
.raster dd .wert-leer{color:var(--text-3)}
.karten-hinweis{margin:var(--abstand-4) 0 0;font-size:var(--schrift-2);line-height:1.5;color:var(--text-3)}
.durchlauf .karte p.hinweis,.anfrage-einfach .karte p.hinweis{font-size:var(--schrift-2);color:var(--text-2);line-height:1.5}
.karten-fuss{margin-top:var(--abstand-5);display:flex;gap:var(--abstand-3);flex-wrap:wrap}
/* Rote Tags für Fehlendes — anklickbar öffnen sie das Pop-up zum Eintragen. */
.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}
.link-knopf:focus-visible{outline:2px solid var(--marke);outline-offset:2px;border-radius:var(--radius-knopf)}
/* Überfällig-Hinweise aus tokens.css statt fester Farbwerte */
.frist-rot{background:var(--rot-bg);border:1px solid var(--rot-linie);color:var(--rot);border-radius:var(--radius-knopf);padding:var(--abstand-3) var(--abstand-4);margin:0 0 var(--abstand-3);font-size:var(--schrift-2)}
.frist-pille{display:inline-block;background:var(--rot-bg);color:var(--rot);border:1px solid var(--rot-linie);border-radius:var(--radius-pill);padding:1px var(--abstand-2);font-size:var(--schrift-1);font-weight:600;white-space:nowrap}
/* Pop-up zum Eintragen */
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)}
.eingabe-dialog .feldgruppe:first-of-type{margin-top:0}
/* Suchfeld selbst als volles 44-px-Fingerziel (Prüfliste A, 30.09.2026) */
.kopf .globale-suche .suchknopf{padding-top:0;padding-bottom:0}
.kopf .globale-suche input[type=search]{min-height:44px}
@media(max-width:560px){.raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--abstand-4) var(--abstand-4)}}

/* === Restliche Seiten angeglichen (30.09.2026): gemeinsame Klassen statt Inline-Stile === */
.karte>h2:first-child{margin-top:0}
a.kachel{text-decoration:none;color:inherit}
.kachel-zahl{margin:var(--abstand-2) 0 0;font-size:var(--schrift-5);font-weight:700;line-height:1.2;color:var(--tinte);font-variant-numeric:tabular-nums}
.karte-mittel{max-width:860px}
.karte-schmal{max-width:640px}
.feld-zeile.zwei-spalten{grid-template-columns:1fr 1fr}
.knopfreihe.mit-linie{border-top:1px solid var(--linie);padding-top:var(--abstand-4)}
.pflicht{color:var(--rot)}
.plz-ort{display:grid;grid-template-columns:120px 1fr;gap:var(--abstand-3)}
@media(max-width:480px){.plz-ort,.feld-zeile.zwei-spalten{grid-template-columns:1fr}}
.mail-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--schrift-3);line-height:1.6}
.karte-hinweis{border-color:var(--gelb-linie);background:var(--gelb-bg)}
.einmal-wert{font-size:var(--schrift-5);font-weight:700;letter-spacing:1px;margin:var(--abstand-3) 0}
.nowrap{white-space:nowrap}
form.inline{display:inline}
.abstand-oben{margin-top:var(--abstand-3)}
.karten-fuss.ohne-abstand{margin-top:0}
/* Stufe 1 (D-29): Stationen in Entwicklung ausgegraut, nicht klickbar */
.durchlauf .stationen li.gesperrt{opacity:.55;cursor:not-allowed}
.durchlauf .stationen li.gesperrt span{display:block;padding:8px 10px}
.durchlauf .stationen li.gesperrt span::before{content:counter(station) " · "}

/* Anfragenliste (30.09.2026): Name größer, Anliegen in derselben Zeile, Status eigene Spalte */
.zeile-name{font-size:var(--schrift-3);font-weight:600}
.zeile-art{color:var(--text-2,#6b6b6b);font-size:var(--schrift-2);margin-left:6px}
.zeile-status{white-space:nowrap}
.zeile-status .pill,.zeile-status .frist-pille{margin:2px 4px 2px 0}
.anfragen-tabelle th,.anfragen-tabelle .knopf{white-space:nowrap}

/* Umschalter „Ansicht als …“ (D-33): nur für den Verwalter, Pill-Segmente */
.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,#001446);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:12px;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}
/* Nur schauen: Aktionsknöpfe sichtbar, aber gesperrt; der Server lehnt Speichern ohnehin ab. */
body.vorschau main button,body.vorschau main input[type=submit]{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}
}
body.vorschau #fotos label,body.vorschau main input[type=file]{opacity:.45;pointer-events:none}
body.vor-ort .vorschau-balken{margin:16px auto 0;max-width:960px}
/* Verlauf (D-34): klein, ganz unten, klar getrennte Zeilen */
.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}}
/* D-36: Zuständigkeit prominent im Kopf der Anfrage */
.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:12px;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,#f2c4c4);background:var(--rot-bg,#fdf2f2)}
.zustaendig-leiste.offen select{background-color:#fff;color:var(--rot,#c8102e)}
/* D-38: Kachel „Unbearbeitet“ + Filterzeile über alle Spalten */
.kachel-unbearbeitet{background:var(--gruen-bg);border-color:var(--gruen-linie)}
.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}}
/* D-39: Rollen-Rahmen oben in der Anfrage — Innendienst und Projektleiter, immer sichtbar */
.rollen-rahmen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0 0 var(--abstand-4);border:2px solid var(--marke);border-radius:12px;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 strong{font-size:var(--schrift-3)}
.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{grid-template-columns:1fr}.rollen-rahmen .rolle+.rolle{border-left:0;border-top:1px solid var(--linie)}}

/* ===== OpenAI-Maße (Bausatz 12.10.2026, eingespielt 13.10.2026) ==========================
   Schriftgrößen, Abstände und Ecken 1:1 wie platform.openai.com
   (07-Skills/app-bausatz/references/openai-masse-2026-10-12.md). Schrift und Farben bleiben Schmelzer.
   Eine Schicht am Ende, weil die Größen über diese Datei verteilt sind; "html body" schlägt die Einzelregeln.
   Bedienhöhen 32 nur mit Maus (pointer:fine) – am Tablet (Besichtigung vor Ort) und am Handy bleiben
   Fingerziele 44 und Eingabefelder 16 px (iOS zoomt sonst beim Antippen in das Feld). */
html body{font-size:14px;line-height:20px}
html body main.inhalt{padding:24px 24px 32px}
html body .kopf{min-height:57px;padding:10px 24px}
html body .inhalt h1,html body.vor-ort h1{font-size:20px;line-height:32px;font-weight:600;letter-spacing:0}
html body .inhalt h2,html body .inhalt .karte h2,html body .inhalt h2.karten-titel{font-size:16px;line-height:24px;font-weight:600;letter-spacing:0}
html body .inhalt h3,html body .feldgruppe h3,html body .durchlauf h3{font-size:14px;line-height:20px;font-weight:600}
html body .inhalt p,html body .sub,html body td,html body dd,html body .inhalt li{font-size:14px;line-height:20px}
html body .inhalt dt,html body .inhalt label,html body .inhalt legend,html body .inhalt summary{font-size:14px;line-height:20px;font-weight:600}
html body .hinweis,html body .karten-hinweis,html body .einheit,html body small,html body .klein:not(.knopf){font-size:12px;line-height:16px}
html body .knopf,html body button.knopf,html body label.knopf{font-size:14px;line-height:20px;font-weight:500;gap:6px}
html body .fehlt-tag,html body .link-knopf{font-size:14px;line-height:20px}
html body .pill,html body .marke-pille,html body .nav-zahl{font-size:12px;line-height:18px;font-weight:600}
html body .karte{padding:16px}
html body th{font-size:12px;line-height:16px;font-weight:600;text-transform:none;letter-spacing:0}
html body aside.leiste .nav a,html body aside.leiste .leiste-fuss a{font-size:14px;line-height:20px;min-height:36px;padding:7px 10px;gap:8px}
html body aside.leiste .gruppe{font-size:12px;line-height:16px}
@media(min-width:761px) and (pointer:fine){
 html body .knopf,html body button.knopf,html body label.knopf,html body .knopf.primaer{min-height:32px;padding:5px 12px}
 html body .knopf.klein,html body button.knopf.klein{min-height:28px;padding:3px 10px}
 html body .fehlt-tag{min-height:28px;padding:0 10px}
 html body .link-knopf{min-height:28px}
 html body .inhalt input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),html body .inhalt textarea,html body .feld input,html body .feld textarea{font-size:14px;line-height:20px;min-height:32px;padding:5px 12px}
 html body .inhalt select,html body .feld select,html body .art-filter select,html body .filter-zeile select{font-size:14px;min-height:32px;padding-top:5px;padding-bottom:5px}
 html body .zustaendig-leiste select,html body .rollen-rahmen select{font-size:14px;min-height:32px;padding-top:4px;padding-bottom:4px}
 html body .kopf .globale-suche .suchknopf,html body .kopf .globale-suche input[type=search]{min-height:36px}
 html body .kopf .rund,html body .kopf .avatar{width:36px;height:36px;min-height:36px}
 html body .ansicht-wahl a{min-height:32px}
 html body .haken-feld{min-height:32px}
 html body td{padding-top:12px;padding-bottom:12px}
 html body th{padding-top:6px;padding-bottom:6px}
}
@media(max-width:760px){html body main.inhalt{padding:16px 16px 32px}}
/* OpenAI-Ecken: Karten 10 · Knöpfe/Felder 8 · kleine Knöpfe 6 · Badges 4 · Pillen/Avatar rund */
html body .knopf,html body .knopf.primaer,html body label.knopf{border-radius:var(--radius-knopf)}
html body .knopf.klein{border-radius:var(--radius-klein)}
html body .pill,html body .marke-pille{border-radius:var(--radius-marke)}
/* Nachzügler mit eigener Regel (Messung 13.10.): .karten-titel trägt !important, Namen/Werte 16 px, Tablet-Leisten 52 px */
html body .karten-titel{font-size:16px!important;line-height:24px;font-weight:600}
html body .zeile-name,html body .inhalt dd,html body .wert-leer{font-size:14px;line-height:20px}
html body p.hinweis,html body .inhalt p.hinweis,html body .inhalt p.karten-hinweis{font-size:12px;line-height:16px}
@media(min-width:761px) and (pointer:fine){
 html body .tipps label{min-height:32px;padding:5px 12px}
 html body .vor-ort-fuss .knopf{min-height:36px}
}
/* Vor-Ort-Seiten (Besichtigung am Tablet) haben keine Seitenleiste – den Leistenplatz nicht reservieren (Befund 13.10.: 250 px Leerraum links ab 761 px) */
body.vor-ort{padding-left:0}

/* Anfragenlisten: gleiche Seitengrößen in allen Ansichten. */
.listen-blaettern{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:16px 0}
.listen-blaettern .sub{margin:0;margin-right:auto}
.listen-anzahl,.listen-anzahl label,.listen-blaettern nav{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0}
.listen-anzahl select{width:auto;min-width:115px;min-height:44px;border:1px solid var(--linie);border-radius:8px;padding:5px 12px;background:var(--karte);color:var(--text);font:inherit}
.listen-blaettern [aria-disabled=true]{opacity:.45;cursor:default}
@media(max-width:600px){.listen-blaettern nav{width:100%;justify-content:space-between}.listen-blaettern nav .knopf{min-height:44px}}

.archiv-aktionen{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:16px 0}.archiv-aktionen label{display:flex;align-items:center;gap:8px;margin:0}.archiv-inhalt{border:0;padding:0;margin:16px 0 0;min-width:0}.archiv-inhalt:disabled button,.archiv-inhalt:disabled select{opacity:.65}

/* Besichtigungs-Eingang oben im Reiter Besichtigungen (05.11.2026) */
.eingang-blaetter{border-left:4px solid var(--marke)}
.blatt-liste{list-style:none;margin:0;padding:0}
.blatt-zeile{display:grid;grid-template-columns:minmax(140px,auto) auto 1fr auto;gap:var(--abstand-2) var(--abstand-4);align-items:center;padding:var(--abstand-3) 0;border-top:1px solid var(--linie)}
.blatt-zeile:first-child{border-top:0}
.blatt-von{font-weight:700;color:var(--marke)}
.blatt-wann{color:var(--text-2);white-space:nowrap}
.blatt-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.blatt-knoepfe{display:flex;gap:var(--abstand-2);justify-content:flex-end}
@media (max-width:760px){.blatt-zeile{grid-template-columns:1fr auto}.blatt-name{grid-column:1/-1}.blatt-knoepfe{grid-column:1/-1;justify-content:flex-start}}
.zuordnen-liste{max-height:min(46dvh,420px);overflow:auto;border:1px solid var(--linie);border-radius:var(--radius-knopf);margin:var(--abstand-2) 0 var(--abstand-4)}
.zuordnen-zeile{display:flex;gap:var(--abstand-3);align-items:flex-start;padding:var(--abstand-2) var(--abstand-3);border-top:1px solid var(--linie-2);cursor:pointer}
.zuordnen-zeile:first-child{border-top:0}
.zuordnen-zeile:hover{background:var(--marke-bg)}
.zuordnen-zeile:has(input:checked){background:var(--marke-hell)}
.zuordnen-zeile input{margin-top:3px}
.zuordnen-leer{padding:var(--abstand-3)}
.zuordnen-dialog .dialog-knoepfe{flex-wrap:wrap}
.zuordnen-dialog .dialog-knoepfe a.knopf{margin-right:auto}
/* Vorschau im Eingang (05.11.2026) */
.blatt-zeile{grid-template-columns:auto minmax(140px,auto) auto 1fr auto}
.blatt-bild{display:block;width:60px;height:78px;border:1px solid var(--linie);border-radius:var(--radius-klein);overflow:hidden;background:var(--flaeche)}
.blatt-bild img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.blatt-bild.ohne{visibility:hidden}
.zuordnen-kopf{display:flex;gap:var(--abstand-4);align-items:flex-start;margin-bottom:var(--abstand-3)}
.zuordnen-kopf img{width:150px;height:auto;border:1px solid var(--linie);border-radius:var(--radius-klein);display:block}
.zuordnen-name{font-weight:700;margin:0;word-break:break-word}
@media (max-width:760px){.blatt-zeile{grid-template-columns:auto 1fr}.blatt-bild{grid-row:span 3}.zuordnen-kopf img{width:110px}}
.zuordnen-zeile.treffer{background:var(--gruen-bg)}
.treffer-pille{display:inline-block;font-size:var(--schrift-1);font-weight:700;color:var(--gruen);background:#fff;border:1px solid var(--gruen-linie);border-radius:var(--radius-pill);padding:0 8px;margin-right:4px}
.zeile-aktion{display:inline-block;margin-left:var(--abstand-2)}

/* ===== Design-Prüfung 05.11.2026 (.22y) =====================================================
   Befund: Deliverables/design-pruefung-2026-11/BEFUND.md. Maßstab App-Bausatz + OpenAI-Maße.
   Nur Darstellung und Bedienung, keine Funktion. Eine Schicht, "html body" wie oben. */

/* 1 Schrift: Open Sans für Text, Raleway für Titel und Kennzahlen (Brand-Kit). Ziffern gleich hoch. */
html body{font-family:var(--font);-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
html body .inhalt h1,html body.vor-ort h1,html body .anmeldung h1,html body .inhalt h2,html body .karten-titel,
html body .kachel-zahl,html body .kpi .zahl,html body .art-wahl h1{font-family:var(--font-marke);font-feature-settings:"lnum" 1;letter-spacing:0}
html body .anmeldung h1{font-size:20px;line-height:32px;font-weight:600}
html body td,html body .mono,html body .nav-zahl,html body .pill{font-variant-numeric:lining-nums tabular-nums}

/* 2 Typo-Skala: Ausreißer zurück auf 12/14/16/20/24 und das 4er-Raster der Zeilenhöhen */
html body aside.leiste .nav .aus{font-size:14px;line-height:20px;min-height:36px;padding:7px 10px;gap:8px}
html body kbd{font-size:12px;line-height:16px}
html body .kim-klein,html body footer.kim{font-size:12px;line-height:16px}
html body .durchlauf .karte p.hinweis,html body .anfrage-einfach .karte p.hinweis{line-height:20px}
html body .kpi .zahl{font-size:24px;line-height:32px;font-weight:600}
html body .kpi .label{font-size:12px;line-height:16px}
html body .art-kacheln a{font-size:16px;line-height:24px;font-weight:600}
html body .rollen-rahmen label,html body .rollen-rahmen .label{font-size:12px;line-height:16px;font-weight:700}
html body .rollen-rahmen select{font-weight:600}
html body .neu-anfrage h2{font-size:16px;line-height:24px}

/* 3 Felder: Fläche + Hauch-Rand + Innenschatten, Hover-Rand, blauer Ring; Auswahllisten normal statt fett */
html body .feld input:where(:not([type=checkbox],[type=radio],[type=file])),html body .feld select,html body .feld textarea,
html body .filter-zeile select,html body .listen-anzahl select,html body .inhalt input[type=time],html body .inhalt input[type=date]{
  border:1px solid var(--feld-rand);background-color:var(--feld-grund);box-shadow:var(--feld-schimmer);color:var(--text);font-weight:400;line-height:20px;
  transition:border-color var(--dauer-1),box-shadow var(--dauer-1),background-color var(--dauer-1)}
html body .feld input:hover,html body .feld select:hover,html body .feld textarea:hover,html body .filter-zeile select:hover,html body .listen-anzahl select:hover,html body .rollen-rahmen select:hover{border-color:var(--feld-rand-hover)}
html body .feld input:focus,html body .feld select:focus,html body .feld textarea:focus,html body .filter-zeile select:focus,html body .listen-anzahl select:focus,
html body .inhalt input[type=time]:focus,html body .inhalt input[type=date]:focus{outline:none;border-color:var(--marke);background-color:var(--karte);box-shadow:var(--feld-ring)}
html body .rollen-rahmen select:focus-visible{outline:none;border-color:var(--marke);box-shadow:var(--feld-ring)}
html body ::placeholder{color:var(--feld-platzhalter);opacity:1}
html body input[type=checkbox],html body input[type=radio]{accent-color:var(--marke);width:16px;height:16px;cursor:pointer}
html body .feld :is(textarea,input)[readonly]{background-color:var(--flaeche)}

/* 4 Tabellen: Kopf ohne Großbuchstaben (OpenAI), Zeilen-Hover, Namen erst beim Darüberfahren unterstrichen */
html body .tabelle th{text-transform:none;letter-spacing:0}
html body .tabelle tbody tr td{transition:background-color var(--dauer-1)}
html body .tabelle tbody tr:hover td{background:var(--zeile-hover)}
html body .tabelle a.zeile-name{text-decoration:none}
html body .tabelle a.zeile-name:hover{text-decoration:underline;text-underline-offset:3px}
/* Knöpfe in der Aktionsspalte nebeneinander statt versetzt (Wolfgang 05.11.: „auch das ist nicht schön“) */
html body .tabelle td:has(> .zeile-aktion){white-space:nowrap;text-align:right}
html body .zeile-aktion{display:inline-flex;vertical-align:middle;margin:0 0 0 var(--abstand-2)}
html body .tabelle td:has(> .zeile-aktion) > .knopf{vertical-align:middle}

/* 5 Reiter (Segmente): 32 hoch mit Maus, aktiv in Schmelzer-Blau wie die Ansicht-Wahl oben */
html body .segmente a,html body .segmente button{min-height:32px;padding:6px 14px;line-height:20px;transition:background-color var(--dauer-1),color var(--dauer-1)}
html body .segmente a:not(.aktiv):not([aria-selected=true]):hover{background:var(--flaeche);color:var(--tinte)}
html body .segmente .aktiv,html body .segmente a[aria-selected=true]{background:var(--marke);color:#fff}

/* 6 Fehlende Zustände: Textlinks, Gefahrknopf, Avatar, Aufklapper, Fehlt-Tag gedrückt */
html body .inhalt a:not(.knopf):not(.karte):not(.zeile-name):not([role=tab]):not(.fehlt-tag):hover{color:var(--marke);text-decoration-thickness:2px}
html body .knopf.gefahr:hover{background:var(--rot-bg);border-color:var(--rot)}
html body .kopf .avatar{transition:box-shadow var(--dauer-1)}
html body .kopf .avatar:hover{box-shadow:0 0 0 3px var(--marke-hell)}
html body summary:hover{color:var(--marke)}
html body .fehlt-tag:active,html body a.knopf:active,html body .segmente a:active{transform:translateY(1px)}

/* 7 Abstände im Ablauf: Knopfreihe klebte am nächsten Feld */
html body .knopfreihe.ohne-linie{margin-bottom:var(--abstand-4)}

/* 8 Handy und Tablet: Navigation und Reiter mit 44 px Fingerziel */
@media (max-width:760px),(pointer:coarse){
 html body aside.leiste .nav a,html body aside.leiste .nav .aus,html body aside.leiste .leiste-fuss a{min-height:44px;padding:11px 12px}
 html body .segmente a,html body .segmente button{min-height:44px}
}
/* 9 Handy: Listenzeilen kompakt – Beschriftung links, Wert rechts, kein Rahmen im Rahmen */
@media (max-width:700px){
 html body .karte:has(> .tabelle-wrap > .anfragen-tabelle){padding:0;background:transparent;border:0;box-shadow:none}
 html body .tabelle-wrap:has(> .anfragen-tabelle){border:0;background:transparent;overflow:visible}
 html body .anfragen-tabelle tr{display:block;padding:8px 0;margin:0 0 var(--abstand-3);background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius-karte);box-shadow:var(--schatten-1)}
 html body .anfragen-tabelle tbody tr:hover td{background:transparent}
 html body .anfragen-tabelle td{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px var(--abstand-2);padding:4px 16px;border:0}
 html body .anfragen-tabelle td::before{flex:0 0 96px;margin:0;font-size:12px;line-height:20px;font-weight:600}
 html body .anfragen-tabelle td[data-label=""]{display:flex;flex-wrap:wrap;gap:var(--abstand-2);justify-content:flex-start;text-align:left;padding-top:8px}
 html body .anfragen-tabelle td[data-label=""] .zeile-aktion{margin:0}
 html body .anfragen-tabelle td[data-label="Name und Anliegen"]{display:block;padding-top:8px;padding-bottom:8px}
 html body .anfragen-tabelle td[data-label="Name und Anliegen"]::before{display:none}
 html body .anfragen-tabelle td[data-label="Name und Anliegen"] .zeile-name{font-size:16px;line-height:24px}
}
/* 10 Listen: kurze Angaben nicht silbentrennen (Open Sans läuft breiter als die Systemschrift) */
html body .anfragen-tabelle td:not([data-label="Name und Anliegen"]){hyphens:manual;-webkit-hyphens:manual}
@media (min-width:701px){html body .anfragen-tabelle td[data-label="Status"]{white-space:nowrap}}
/* Raleway läuft bei 600 sichtbar dünner als die Textschrift – Titel wie im Brand-Kit fett */
html body .inhalt h1,html body.vor-ort h1,html body .anmeldung h1,html body .inhalt h2,html body .karten-titel,html body .art-wahl h1{font-weight:700}
/* 11 Lange Mailadressen: am Handy über die ganze Kartenbreite, Umbruch an Punkt/Bindestrich statt Silbentrennung */
html body dd a[href^="mailto:"]{hyphens:none;-webkit-hyphens:none;overflow-wrap:anywhere}
@media (max-width:600px){html body dl div:has(> dd > a[href^="mailto:"]){grid-column:1/-1}}
@media (pointer:coarse){html body input[type=checkbox],html body input[type=radio]{width:22px;height:22px}}
html body footer.kim a:hover{text-decoration-thickness:2px}
@media(min-width:761px) and (pointer:fine){html body .feld input[type=time],html body .feld input[type=date]{height:32px;min-height:32px}}
html body .inhalt p.kachel-zahl{font-size:24px;line-height:32px;font-weight:700;margin-top:var(--abstand-1)}
/* 12 Knöpfe nie silbentrennen („Wieder-herstel-len“, Hinweis Hauptchat 05.11.) – Umbruch nur zwischen Wörtern */
html body .knopf,html body button,html body .fehlt-tag,html body .segmente a,html body .pill{hyphens:none;-webkit-hyphens:none;overflow-wrap:normal;word-break:normal}
/* Formular-Knöpfe in Knopfleisten mit Abstand (gap) nicht doppelt einrücken */
html body :is(.blatt-knoepfe,.knopfreihe,.dialog-knoepfe) > .zeile-aktion{margin:0}
@media (max-width:760px),(pointer:coarse){html body .inhalt select{min-height:44px}}
/* Aktionsspalte schmaler als 1440 px: Knöpfe gleich breit und bündig untereinander statt versetzt */
@media (min-width:701px) and (max-width:1439px){
 html body .tabelle td:has(> .zeile-aktion){white-space:nowrap;width:1%}
 html body .tabelle td:has(> .zeile-aktion) > :is(.knopf,.zeile-aktion){display:flex;width:100%;margin:0}
 html body .tabelle td:has(> .zeile-aktion) > .zeile-aktion{margin-top:6px}
 html body .tabelle td:has(> .zeile-aktion) :is(.knopf,button.knopf){width:100%;justify-content:center}
}
html body .tabelle :is(th,td):first-child{padding-left:12px}html body .tabelle :is(th,td):last-child{padding-right:12px}
html body .tabelle select{border:1px solid var(--feld-rand);border-radius:var(--radius-knopf);background-color:var(--feld-grund);padding:5px 12px;font:inherit;color:var(--text);transition:border-color var(--dauer-1),box-shadow var(--dauer-1)}
html body .tabelle select:hover{border-color:var(--feld-rand-hover)}
html body .tabelle select:focus{outline:none;border-color:var(--marke);box-shadow:var(--feld-ring)}

/* Fuhrpark (D-42), wieder eingesetzt 12.11.2026 (fiel beim Design-Update .22z weg); Abstände als Tokens (S8), Popups statt Aufklappen (V4). */
.kopfzeile-aktion{display:flex;align-items:center;justify-content:space-between;gap:var(--abstand-3);flex-wrap:wrap}
.kopfzeile-aktion h1{margin:0}
.frist-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-2) var(--abstand-3);padding:var(--abstand-3) 0;border-bottom:1px solid var(--linie)}
.frist-zeile .frist-kopf{flex:1 1 260px;display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-2) var(--abstand-3)}
.frist-knoepfe{display:flex;flex-wrap:wrap;gap:var(--abstand-2)}
.frist-neu{margin:var(--abstand-4) 0 0}
.haken-feld{display:flex;align-items:center;gap:var(--abstand-2);min-height:44px;font-size:var(--schrift-2);margin-bottom:var(--abstand-3)}
.haken-feld input{width:20px;height:20px}
.leise-aktion{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-2) var(--abstand-3);margin:var(--abstand-5) 0}
/* Rechte-Tabelle (Paket n) */
.tabelle.rechte .gruppe-zeile th{background:var(--karte);color:var(--text-2);padding-top:14px}
.tabelle.rechte label.haken{display:inline-flex;gap:4px;align-items:center;margin-right:10px;white-space:nowrap}
.tabelle.rechte select.ausnahme{border-color:var(--marke);background:var(--marke-bg)}
.karte-hinweis .einmal-wert{word-break:break-all;font-size:var(--schrift-3)}
.tabelle.rechte .kurz{display:none}
@media (max-width:700px){
  .tabelle.rechte .lang{display:none}
  .tabelle.rechte .kurz{display:inline}
  .tabelle.rechte label.haken{margin-right:6px}
  .tabelle.rechte td,.tabelle.rechte th{padding-left:6px;padding-right:6px}
}
.rollen-wahl{display:none;gap:6px;margin-bottom:8px}
.rollen-wahl .knopf.aktiv{background:var(--marke);color:#fff;border-color:var(--marke)}
@media (max-width:700px){
  .rollen-wahl{display:flex}
  table.rollen[data-rolle="technik"] .r-buero,table.rollen[data-rolle="technik"] .r-gf,
  table.rollen[data-rolle="buero"] .r-technik,table.rollen[data-rolle="buero"] .r-gf,
  table.rollen[data-rolle="gf"] .r-technik,table.rollen[data-rolle="gf"] .r-buero{display:none}
}