/* ============================================================
   evopio.css - die Design-Sprache als System

   Zwei Farbebenen, die nie vermischt werden:

     --e-*   EVOPIO. Login, internes Backend, evopio.de, E-Mails.
             Stehen hier fest und werden nie zur Laufzeit geaendert.

     --k-*   KUNDE. Nur Karriereseite und Stellenseite. Werden je
             Mandant im <style>-Block der Seite gesetzt, --k-auf
             berechnet farbe.py nach WCAG.

   Kein Baustein liest aus beiden Ebenen. Das ist die ganze Regel.

   Machart uebernommen aus edelmutsales (Entwurf G1 "Ring"):
   Glas-Verlauf mit weisser Innenkante, Lichtstrich auf der Oberkante,
   weiche Radien, Ring mit Vergleichsbogen, grosse tabellarische Zahlen.
   ============================================================ */

/* --- Schrift ---------------------------------------------------
   Selbst gehostet, NICHT von fonts.googleapis.com geladen: die
   oeffentliche Karriereseite darf keine IP-Adressen von Bewerbern
   an Dritte uebermitteln. Solange die Dateien fehlen, greift der
   System-Stack - siehe betrieb/SCHRIFT.md.                     */
/* Stillgelegt, bis die Datei unter app/static/schrift/ liegt - sonst
   holt sich jeder Seitenaufruf einen 404. Bis dahin traegt der
   System-Stack die Seite. Anleitung: betrieb/SCHRIFT.md
@font-face{
  font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 700;
  font-display:swap;src:url("/static/schrift/jakarta.woff2") format("woff2");
} */

:root{
  /* Flaechen und Tinte */
  --e-grund:#EEF1F6;
  --e-papier:#FFFFFF;
  --e-linie:#E4E9F0;
  --e-linie-stark:#D3DAE4;
  --e-tinte:#0C0C0B;
  --e-leise:#565D66;
  --e-sehr-leise:#8B939C;

  /* Akzent: Gruen. Erscheint nur, wo etwas dringend oder erledigt ist.
     Die Toene sind nicht frei gewaehlt, sondern gemessen (tests/test_farbe.py):
     weisse Schrift braucht 4.5:1, das erreicht erst --e-signal-tief.
     Deshalb tragen Knoepfe und Signalflaechen NIE --e-signal-hell als
     Grundton - dort haette weisse Schrift nur 2.0:1. */
  --e-signal:#0E9E70;        /* Flaechen ohne Text, Saeulen, Punkte: 3.42:1 */
  --e-signal-hell:#2FCF96;   /* nur Verlaufsspitze, nie Textgrund: 2.00:1 */
  --e-signal-tief:#0A7A56;   /* Textgrund, Knopf: 5.34:1 */
  --e-signal-tiefer:#096848; /* Verlaufsende Knopf: 6.81:1 */
  --e-hauch:#E7F6F0;

  /* Semantik, getrennt vom Akzent.
     Zwei Werte je Bedeutung: der satte fuer Flaechen und Saeulen, der
     tiefe fuer Text auf dem blassen Chipgrund. Der Chip traegt 11.5px
     fett, das ist kein "grosser Text" - dort gilt 4.5:1, und das
     erreichen die satten Toene nicht (gemessen: 2.80, 2.49, 3.33). */
  --e-ok:#11A277;            /* Flaeche */
  --e-ok-text:#0D7A59;       /* auf Chipgrund #DCF3EA: 4.58:1 */
  --e-warn:#DD8500;
  --e-warn-text:#9E5F00;     /* auf Chipgrund #FDEFD8: 4.53:1 */
  --e-minus:#DE4A44;
  --e-minus-text:#B93E39;    /* auf Chipgrund #FBE3E2: 4.51:1 */

  --e-f:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Material */
  --e-glas:linear-gradient(180deg,#FFFFFF 0%,#FBFCFE 46%,#F5F8FC 100%);
  --e-schatten:0 1px 1px rgba(16,24,40,.05),0 8px 18px -12px rgba(16,24,40,.26),
               0 22px 44px -34px rgba(16,24,40,.3);
  --e-innen:inset 0 1px 0 #FFFFFF,inset 0 0 0 1px rgba(255,255,255,.6);

  /* Radien: drei, mehr nicht */
  --e-r-klein:10px;
  --e-r-knopf:100px;
  --e-r-kachel:20px;
}

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

body{
  background:var(--e-grund);color:var(--e-tinte);font-family:var(--e-f);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;
}
/* Atmosphaere: liegt fest hinter allem, nie auf scrollenden Flaechen
   (siehe reference_scroll_ruckeln_messen - Dauerrepaints kosten Bildrate) */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(880px 440px at 22% -8%,rgba(14,158,112,.11),transparent 62%),
             radial-gradient(720px 400px at 96% 4%,rgba(90,170,255,.09),transparent 64%),
             radial-gradient(600px 400px at 60% 100%,rgba(255,255,255,.86),transparent 60%);
}

a{color:inherit;text-decoration:none}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.035em;font-weight:700}
.lab{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--e-sehr-leise);font-weight:700}

/* ============ Gestell: Menue links ============ */
.gestell{position:relative;z-index:1;display:grid;grid-template-columns:246px 1fr;min-height:100vh}

.seite{padding:22px 14px;display:flex;flex-direction:column;
  border-right:1px solid rgba(212,220,231,.7)}
.marke{display:flex;align-items:center;gap:10px;padding:2px 8px 22px}
.zeichen{width:28px;height:28px;border-radius:9px;
  background:linear-gradient(165deg,var(--e-signal-hell) 0%,var(--e-signal) 52%,var(--e-signal-tief) 100%);
  box-shadow:0 2px 6px rgba(10,122,86,.32),inset 0 1px 0 rgba(255,255,255,.5);
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px;letter-spacing:-.03em}
.marke b{font-weight:700;font-size:16px;letter-spacing:-.02em;display:block}
.marke .rolle{font-size:11.5px;color:var(--e-sehr-leise);font-weight:500;margin-top:-2px}

.gruppe{margin-bottom:6px}
.g-titel{font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--e-sehr-leise);font-weight:700;padding:14px 10px 6px}
.eintrag{display:flex;align-items:center;gap:10px;padding:8px 10px;
  border-radius:var(--e-r-klein);font-size:14px;color:var(--e-leise);font-weight:600}
.eintrag .zahl{margin-left:auto;font-size:12px;color:var(--e-sehr-leise);
  font-variant-numeric:tabular-nums;font-weight:700}
.eintrag.an{background:var(--e-papier);color:var(--e-tinte);
  box-shadow:0 1px 2px rgba(16,24,40,.1),0 6px 14px -10px rgba(16,24,40,.4),inset 0 1px 0 #fff}
.eintrag.an .zahl{color:var(--e-leise)}
.eintrag:focus-visible{outline:2px solid var(--e-signal);outline-offset:2px}
.punkt{width:7px;height:7px;border-radius:50%;flex:none}
.punkt.gruen{background:linear-gradient(180deg,var(--e-signal-hell),var(--e-signal))}
.punkt.warn{background:linear-gradient(180deg,#F2A22A,var(--e-warn))}
.punkt.grau{background:#C8CFD8}

.seite-unten{margin-top:auto;padding-top:16px}
.nutzer{display:flex;align-items:center;gap:10px;padding:8px 10px;
  border-radius:var(--e-r-klein);font-size:13.5px;color:var(--e-leise);font-weight:600}
.avatar{width:26px;height:26px;border-radius:50%;background:#DDE3EA;color:#5B636C;
  display:grid;place-items:center;font-size:10.5px;font-weight:700;flex:none}

/* ============ Hauptbereich ============ */
.haupt{padding:22px 26px 34px;min-width:0}
.kopf{display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.kopf h1{font-size:22px;font-weight:700;letter-spacing:-.028em}
.kopf .info{margin-left:auto;font-size:13px;color:var(--e-leise)}
.suche{background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.9);
  border-radius:var(--e-r-knopf);padding:7px 15px;font-size:13.5px;color:var(--e-sehr-leise);
  box-shadow:0 1px 1px rgba(16,24,40,.04),0 6px 16px -12px rgba(16,24,40,.36);
  font-family:var(--e-f)}

/* Sichtungsschleife: "3 von 13" im Kopf der Akte.
   Steht direkt neben dem Namen und nicht am Seitenende - wer sichtet,
   schaut auf den Namen, und dort muss auch stehen, wie viele noch
   kommen. Die Pfeile sind Links: die Reihe reist im Query-String mit,
   also funktioniert Blaettern auch ohne JavaScript. */
.sichtung{display:flex;align-items:center;gap:2px;margin-left:auto;
  background:rgba(255,255,255,.8);border:1px solid var(--e-linie);
  border-radius:var(--e-r-knopf);padding:3px}
.sichtung a,.sichtung .aus{width:30px;height:30px;display:grid;place-items:center;
  border-radius:var(--e-r-knopf);font-size:16px;line-height:1;color:var(--e-leise)}
.sichtung a:hover{background:var(--e-papier);color:var(--e-tinte);
  box-shadow:0 1px 2px rgba(16,24,40,.14)}
.sichtung .aus{opacity:.3}
.sichtung b{font-size:12.5px;font-weight:600;color:var(--e-leise);padding:0 9px;
  white-space:nowrap}
.kopf .sichtung + .knopf{margin-left:0}
.kopf .sichtung ~ .info{margin-left:0}
/* Der Name war vergeben: `.blaettern` ist seit jeher die Seitennavigation
   der Bewerberliste. Eine zweite Bedeutung machte aus ihr eine Pille. */

.tasten{font-size:12.5px;color:var(--e-sehr-leise);margin-top:12px;
  flex-basis:100%;line-height:1.9}
.tasten kbd{font-family:inherit;font-size:11.5px;font-weight:600;
  background:#F1F4F2;border:1px solid var(--e-linie);border-bottom-width:2px;
  border-radius:5px;padding:1px 6px;color:var(--e-leise)}

/* Saeule und Spaltenkopf als Tuer: die Aenderung ist ein <a> statt
   eines <div>, also braucht der Zeiger und der Fokus eine Anzeige. */
a.st,a.sp-kopf{cursor:pointer;text-decoration:none;color:inherit}
a.st:hover .saeule{filter:brightness(1.06)}
a.st:hover .n,a.sp-kopf:hover .sp-name{text-decoration:underline;
  text-underline-offset:3px}
/* `.ohne` statt `.leer`: `.leer` ist im Bestand der Leerzustand-Kasten
   mit Rahmen, und den erbte jede Nullsaeule. */
a.st.ohne:hover .n{text-decoration:none}
a.st:focus-visible,a.sp-kopf:focus-visible{outline:2px solid var(--e-signal);
  outline-offset:3px;border-radius:var(--e-r-klein)}

/* Ziehen auf der Mappe. Reine Zugabe: die Knoepfe in der Karte tun
   dasselbe und bleiben stehen. */
.karte-b[draggable="true"]{cursor:grab}
.karte-b.zieht{opacity:.4;cursor:grabbing}
.spalte.ziel{background:var(--e-hauch);border-color:var(--e-signal);
  box-shadow:0 0 0 3px rgba(14,158,112,.16),var(--e-innen)}
.spalte.ziel .sp-leer{color:var(--e-signal-tief)}

/* Kundenaccount: ein Zugang zum Aufklappen (LT-003) */
.zugang{border-top:1px solid #EFF2F6;padding:0}
.zugang:first-of-type{margin-top:14px}
.zugang summary{display:flex;align-items:center;gap:20px;padding:14px 0;
  cursor:pointer;list-style:none}
.zugang summary::-webkit-details-marker{display:none}
.zugang summary::before{content:"\25B8";color:var(--e-sehr-leise);font-size:11px;
  transition:transform var(--e-schnell,.18s)}
.zugang[open] summary::before{transform:rotate(90deg)}
.zugang summary .z-stand{margin-left:auto;display:flex;align-items:center;gap:8px}
.zugang-stellen{padding:4px 0 18px 18px;max-width:640px}
.zugang-stellen .dazu{margin:6px 0 12px}
.stellenwahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:8px;margin-bottom:14px}
.stellenwahl .frage-punkt small{display:block;font-size:11.5px;
  color:var(--e-sehr-leise);font-weight:500}
.frage-punkt.breit{font-weight:600}
.zugang-tat{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:0 0 18px 18px}
.zugang-tat .dazu{flex-basis:100%;margin:0}

/* Zeitfenster fuer die Selbstterminierung (B-42) */
.zeitfenster{margin-top:16px;max-width:520px}
.zf-zeile{display:grid;grid-template-columns:110px 1fr auto 1fr;gap:10px;
  align-items:center;padding:7px 0;border-top:1px solid #EFF2F6}
.zf-zeile:first-child{border-top:0}
.zf-tag{font-size:14px;font-weight:600}
.zf-bis{font-size:13px;color:var(--e-sehr-leise)}
.zeitfenster input[type="time"]{font-family:inherit;font-size:14px;padding:7px 10px;
  border:1px solid var(--e-linie-stark);border-radius:var(--e-r-klein);width:100%}
.zeitfenster button{margin-top:14px}

/* ============ Kacheln ============ */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.k{position:relative;background:var(--e-glas);border:1px solid var(--e-linie);
  border-radius:var(--e-r-kachel);padding:22px 24px;
  box-shadow:var(--e-schatten),var(--e-innen);overflow:hidden;
  display:flex;flex-direction:column}
.k::after{content:"";position:absolute;top:0;left:18%;right:18%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent)}
.k .o{display:flex;align-items:center;justify-content:space-between;gap:10px}
.k.breit{grid-column:1/-1}
.k.zwei{grid-column:span 2}
.fuss{display:flex;justify-content:space-between;gap:12px;font-size:12px;
  color:var(--e-sehr-leise);margin-top:auto;padding-top:16px;position:relative}

/* Signalkachel: gruen, klein, nur fuer Dringendes.
   Nie als Hauptflaeche - eine grosse Farbflaeche drueckt. */
.k.signal{background:linear-gradient(168deg,#0E9E70 0%,var(--e-signal-tief) 44%,#075C3F 100%);
  border:1px solid rgba(255,255,255,.3);color:#fff;
  box-shadow:0 1px 2px rgba(10,110,78,.2),0 12px 26px -14px rgba(10,110,78,.55),
    0 26px 50px -40px rgba(16,24,40,.7),inset 0 1px 0 rgba(255,255,255,.5)}
.k.signal::before{content:"";position:absolute;top:-40%;left:-18%;width:92%;height:104%;
  border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.34),transparent 72%);
  pointer-events:none}
.k.signal::after{left:14%;right:14%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent)}
.k.signal .lab,.k.signal .fuss{color:rgba(255,255,255,.76)}
.k.signal .chip{background:rgba(255,255,255,.2);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34)}

/* ============ Chips ============ */
.chip{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:var(--e-r-knopf);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);white-space:nowrap}
.chip.gut{color:var(--e-ok-text);background:linear-gradient(180deg,#E8F8F2,#DCF3EA)}
.chip.warn{color:var(--e-warn-text);background:linear-gradient(180deg,#FFF6E7,#FDEFD8)}
.chip.krit{color:var(--e-minus-text);background:linear-gradient(180deg,#FDEEED,#FBE3E2)}
.chip.still{color:var(--e-leise);background:linear-gradient(180deg,#F1F4F8,#E8EDF3)}

/* ============ Knoepfe ============ */
/* `inline-flex` und nicht der Vorgabewert: `.knopf` sitzt meist auf
   einem `<a>`, und ein Inline-Element ignoriert `min-height`. Die
   Mobilregel weiter unten setzte 44 px, und sie blieb wirkungslos -
   die Knoepfe massen 32 bis 36. Erst am 06.09.2026 gemessen. */
.knopf{display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--e-signal-tief),var(--e-signal-tiefer));color:#fff;
  border:0;border-radius:var(--e-r-knopf);padding:9px 18px;font-family:var(--e-f);
  font-size:13.5px;font-weight:700;cursor:pointer;
  box-shadow:0 1px 2px rgba(10,110,78,.3),0 6px 14px -8px rgba(10,110,78,.5),
    inset 0 1px 0 rgba(255,255,255,.3)}
.knopf:active{transform:translateY(1px)}
.knopf.stumm{background:var(--e-papier);color:var(--e-tinte);
  border:1px solid var(--e-linie-stark);box-shadow:none;font-weight:600}
.knopf.hell{background:#fff;color:#0A6E4E;box-shadow:0 2px 6px rgba(10,110,78,.28)}
.knopf[disabled]{background:#EEF1F4;color:#A4ACB6;box-shadow:none;cursor:default}
.knopf:focus-visible{outline:2px solid var(--e-signal-tief);outline-offset:2px}

/* ============ Ring: voller Bogen ist Ist, blasser dahinter der Vergleich ==== */
.ring{flex:none}
.ring circle{fill:none;stroke-linecap:round}

/* ============ Pipeline: der Weg vom Eingang bis zur Einstellung ============ */
.pipe{display:flex;align-items:flex-end;gap:6px;margin-top:20px;padding-top:4px}
.pipe .st{flex:1;text-align:center;min-width:0}
.pipe .z{font-size:16px;font-weight:700;letter-spacing:-.03em;margin-bottom:5px;
  font-variant-numeric:tabular-nums;color:var(--e-sehr-leise)}
.pipe .st.hat .z{color:var(--e-tinte)}
.pipe .saeule{border-radius:7px 7px 4px 4px;background:#E9EDF3}
.pipe .st.hat .saeule{background:linear-gradient(180deg,var(--e-signal-hell),var(--e-signal))}
.pipe .st.stau .saeule{background:linear-gradient(180deg,#F2A22A,var(--e-warn))}
.pipe .n{font-size:10.5px;color:var(--e-sehr-leise);margin-top:7px;font-weight:600}
.pipe .n .knapp{display:none}

.mini{display:flex;gap:5px;align-items:flex-end;height:38px}
.mini .m{flex:1;border-radius:4px 4px 2px 2px;background:#EDF0F5}
.mini .m.hat{background:linear-gradient(180deg,var(--e-signal-hell),var(--e-signal))}
.mini .m.stau{background:linear-gradient(180deg,#F2A22A,var(--e-warn))}

/* ============ Listenzeilen ============ */
.zeile{display:grid;gap:20px;align-items:center;padding:14px 0;border-top:1px solid #EFF2F6}
.zeile:first-of-type{margin-top:14px}
.z-name{font-size:15px;font-weight:700;letter-spacing:-.015em}
.z-name span{display:block;font-size:12.5px;color:var(--e-sehr-leise);font-weight:500;margin-top:3px}
.z-stand{text-align:right;font-size:12.5px;color:var(--e-sehr-leise);font-weight:600}
.z-stand b{display:block;font-size:14.5px;color:var(--e-tinte);font-weight:700;margin-bottom:1px}
.zeile.erledigt{opacity:.6}

/* ============ Formulare ============ */
.feld{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.feld label{font-size:13.5px;font-weight:600;color:var(--e-tinte)}
.feld input,.feld textarea,.feld select{
  border:1.5px solid var(--e-linie-stark);border-radius:var(--e-r-klein);padding:11px 13px;
  font-family:var(--e-f);font-size:15px;color:var(--e-tinte);background:var(--e-papier)}
.feld input:focus,.feld textarea:focus{outline:0;border-color:var(--e-signal);
  box-shadow:0 0 0 3px rgba(14,158,112,.16)}
.feld .hilfe{font-size:12.5px;color:var(--e-leise)}
.feld.fehler input,.feld.fehler textarea{border-color:var(--e-minus)}
.feld.fehler .hilfe{color:var(--e-minus);font-weight:600}
/* Honeypot: fuer Menschen unsichtbar, fuer Bots verlockend.
   Kein display:none - manche Bots ueberspringen versteckte Felder. */
.koeder{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============ Zustaende ============ */
.leer{border:1.5px dashed var(--e-linie-stark);border-radius:var(--e-r-kachel);
  padding:24px;text-align:center;color:var(--e-leise);font-size:14px;line-height:1.55}
.leer b{display:block;color:var(--e-tinte);font-size:15.5px;font-weight:700;margin-bottom:4px}
.laedt{display:flex;flex-direction:column;gap:9px}
.laedt i{display:block;height:13px;border-radius:5px;
  background:linear-gradient(90deg,#EEF1F4 0%,#E3E8EE 50%,#EEF1F4 100%)}

/* ============ Bewegung nur, wo sie etwas sagt ============ */
@media (prefers-reduced-motion:no-preference){
  .knopf,.eintrag{transition:transform .12s cubic-bezier(.16,1,.3,1),
    box-shadow .18s cubic-bezier(.16,1,.3,1)}
}


/* ============ Bausteine der Uebersicht ============
   Standen zuerst als Inline-Style in der Vorlage. Das war der Fehler:
   der Media-Query unten erreicht Inline-Styles nicht, also lief die
   Seite auf dem Handy aus dem Bild. Alles, was Layout ist, gehoert
   hierher - nicht ins Template. */
.j-oben{display:flex;align-items:flex-start;gap:22px;margin-top:16px}
.j-text{min-width:0;flex:1}
.j-titel{font-size:21px;font-weight:700;letter-spacing:-.025em;line-height:1.22}
.j-meta{font-size:13px;color:var(--e-sehr-leise);margin-top:4px;font-weight:500}
.j-satz{font-size:14px;color:var(--e-leise);line-height:1.5;margin-top:12px}
.j-satz b{color:var(--e-tinte);font-weight:700}
.j-tat{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}

.sig-zahl{font-size:52px;line-height:1;margin:18px 0 8px;position:relative;
  font-variant-numeric:tabular-nums;letter-spacing:-.045em;font-weight:700}
.sig-text{font-size:14px;color:rgba(255,255,255,.9);line-height:1.5;position:relative}
.sig-text b{color:#fff;font-weight:700}
.sig-knopf{margin-top:16px;position:relative;align-self:flex-start}
.wartet{margin-top:20px;position:relative}
.w-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 0;border-top:1px solid rgba(255,255,255,.2);font-size:13.5px}
.w-zeile span{color:rgba(255,255,255,.9);font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-zeile b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums;
  font-size:13px;flex:none}

.aufgaben{margin-top:14px}
.a-zeile{display:flex;align-items:flex-start;gap:11px;padding:11px 0;
  border-bottom:1px solid #EFF2F6}
.a-zeile:last-child{border-bottom:0}
.a-marke{width:24px;height:24px;border-radius:7px;flex:none;display:grid;
  place-items:center;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.a-text{font-size:13.5px;line-height:1.42;min-width:0}
.a-text b{font-weight:700}
.a-text span{display:block;color:var(--e-sehr-leise);font-size:12px;margin-top:2px}

.kanaele{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.kan-zeile{display:grid;grid-template-columns:104px 1fr 28px;gap:10px;
  align-items:center;font-size:13px}
.kan-name{color:var(--e-leise);font-weight:600;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.kan-spur{height:8px;border-radius:4px;background:#EDF0F5;overflow:hidden;display:block}
.kan-spur i{display:block;height:100%;border-radius:4px}
.kan-wert{text-align:right;font-size:13.5px}

.listenkopf{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.listenkopf h2{font-size:17px;font-weight:700;letter-spacing:-.022em}
.listenkopf .rechts{margin-left:auto;font-size:12.5px;color:var(--e-sehr-leise)}
.zeile.stelle{grid-template-columns:1fr 340px 116px}
.leer.schlicht{border:0;padding:12px 0;text-align:left;margin-top:16px}


/* ============ Bewerbermappe ============ */
.mappe-leiste{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.m-zahlen{display:flex;gap:18px;font-size:13.5px;color:var(--e-leise);font-weight:600}
.m-zahlen b{color:var(--e-tinte);font-size:15px;margin-right:4px}
.m-warn b{color:var(--e-warn-text)}
.m-still,.m-still b{color:var(--e-sehr-leise)}
.m-rechts{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.m-filter{display:flex;gap:4px;background:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.9);border-radius:var(--e-r-knopf);padding:3px;
  box-shadow:0 1px 1px rgba(16,24,40,.04),0 6px 16px -12px rgba(16,24,40,.36)}
.f-pille{font-size:13px;font-weight:600;color:var(--e-leise);padding:6px 14px;
  border-radius:var(--e-r-knopf)}
.f-pille.an{background:var(--e-papier);color:var(--e-tinte);
  box-shadow:0 1px 2px rgba(16,24,40,.1),inset 0 1px 0 #fff}

/* Ansichts-Umschalter. Dieselbe Machart wie die Filterpillen, aber mit
   Zeichen davor - sonst sehen zwei gleich aussehende Pillengruppen
   nebeneinander aus wie eine einzige, doppelt gefuellte Gruppe. */
.m-ansicht{display:flex;gap:3px;background:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.9);border-radius:var(--e-r-knopf);padding:3px;
  box-shadow:0 1px 1px rgba(16,24,40,.04),0 6px 16px -12px rgba(16,24,40,.36)}
.a-knopf{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  color:var(--e-leise);padding:6px 12px;border-radius:var(--e-r-knopf)}
.a-knopf svg{fill:currentColor;opacity:.5;flex:none}
.a-knopf.an{background:var(--e-papier);color:var(--e-tinte);
  box-shadow:0 1px 2px rgba(16,24,40,.1),inset 0 1px 0 #fff}
.a-knopf.an svg{opacity:1;fill:var(--e-signal-tief)}
.a-knopf:hover{color:var(--e-tinte)}

/* --- Tabellenansicht ------------------------------------------------------
   Die zweite Sicht auf dieselben Leute. Was das Board ueber die Spalte
   zeigt, traegt hier die Stufen-Marke; die Rangfolge ist dieselbe
   (ueberfaellig zuerst), damit ein Wechsel der Ansicht nicht die
   Dringlichkeit umsortiert. */
.tabellenkarte{padding:0;overflow:hidden}
.tab{width:100%;border-collapse:collapse;font-size:13.5px}
.tab th{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--e-sehr-leise);padding:12px 16px;
  border-bottom:1px solid var(--e-linie);white-space:nowrap}
.tab td{padding:11px 16px;border-bottom:1px solid var(--e-linie);vertical-align:middle}
.tab tbody tr:last-child td{border-bottom:0}
.tab tbody tr:hover{background:rgba(255,255,255,.75)}
.tab tbody tr.wartet{box-shadow:inset 3px 0 0 var(--e-warn)}
.t-name{font-weight:700;letter-spacing:-.01em;color:var(--e-tinte);white-space:nowrap}
.t-name a{color:inherit}
.t-name a:hover{color:var(--e-signal-tief)}
.t-still{color:var(--e-sehr-leise)}
.t-stelle{color:var(--e-leise);font-weight:600;white-space:nowrap}
.t-stelle:hover{color:var(--e-signal-tief)}
.stufe.s-eingestellt{background:#DCF3EA;color:var(--e-ok-text)}
.stufe.s-abgesagt,.stufe.s-zurueckgezogen{background:#F1F3F5;color:#79828C}
.t-warn{color:var(--e-warn-text);font-weight:700}
.tab a{color:var(--e-tinte);font-variant-numeric:tabular-nums;white-space:nowrap}
.tab a:hover{color:var(--e-signal-tief)}
/* Die Handlungsspalte bleibt stehen, wenn die Tabelle seitlich scrollt.
   Ohne das ist auf einem 1280er Bildschirm ausgerechnet der Knopf
   abgeschnitten, wegen dem die Zeile ueberhaupt da ist. Eigener,
   deckender Hintergrund - die Zeilen sind sonst durchscheinend, und der
   Text darunter waeuerde durchlaufen. */
.t-tat{text-align:right;white-space:nowrap;position:sticky;right:0;
  background:var(--e-papier);box-shadow:-10px 0 12px -10px rgba(16,24,40,.22)}
.tab thead .t-tat{background:#FBFCFE}
.tab tbody tr:hover .t-tat{background:#FCFDFE}
.tab tbody tr.wartet .t-tat{background:var(--e-papier)}
.t-tat form{display:inline-flex;gap:6px;justify-content:flex-end}
.t-tat .pf{opacity:.6;margin-right:5px;font-weight:400}
.t-nichts{text-align:center;color:var(--e-sehr-leise);padding:34px 16px}

/* Die Stufe als Marke. Der Farbverlauf laeuft mit dem Verfahren: grau
   am Anfang, gruen am Ende - so ist die Spalte auch flach ablesbar. */
.stufe{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 9px;
  border-radius:999px;white-space:nowrap;background:#EDF1F6;color:#4A525C}
.stufe.s-neu{background:#FDEFD8;color:var(--e-warn-text)}
.stufe.s-qualifiziert{background:#E2F1FB;color:#0F5E8C}
.stufe.s-gespraech{background:#E4F5EE;color:var(--e-ok-text)}
.stufe.s-angebot{background:#DCF3EA;color:var(--e-ok-text)}

.spalten{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;align-items:start}
.spalte{background:var(--e-glas);border:1px solid var(--e-linie);
  border-radius:var(--e-r-kachel);padding:12px;min-height:120px;
  box-shadow:var(--e-schatten),var(--e-innen);position:relative;overflow:hidden}
.spalte.stau{border-color:#F0D3A6}
.sp-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:2px 4px 10px;border-bottom:1px solid var(--e-linie);margin-bottom:10px}
.sp-name{font-size:12.5px;font-weight:700;letter-spacing:-.01em}
.sp-zahl{font-size:12px;color:var(--e-sehr-leise)}
.spalte.stau .sp-zahl{color:var(--e-warn-text)}
.sp-leer{font-size:12px;color:var(--e-sehr-leise);line-height:1.45;padding:6px 4px 4px}

.karte-b{background:var(--e-papier);border:1px solid var(--e-linie);border-radius:12px;
  padding:11px 12px;margin-bottom:9px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.karte-b:last-child{margin-bottom:0}
.karte-b.wartet{border-left:3px solid var(--e-warn);padding-left:9px}
.b-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
/* Namen werden nie abgeschnitten - "Melanie Ber..." ist schlechter als
   zwei Zeilen. Bei sechs Spalten sind die Karten schmal, also umbrechen. */
.b-name{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.012em;min-width:0;
  line-height:1.25;overflow-wrap:break-word;hyphens:auto}
.b-uhr{font-size:11px;font-weight:700;color:var(--e-warn-text);
  font-variant-numeric:tabular-nums;flex:none}
.b-meta{display:flex;gap:4px 8px;flex-wrap:wrap;font-size:11.5px;
  color:var(--e-sehr-leise);margin-top:4px;line-height:1.35}
.b-tel{display:block;font-size:12.5px;font-weight:600;color:var(--e-signal-tief);margin-top:6px}
.b-tat{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.knopf.klein{padding:6px 11px;font-size:12px;border-radius:var(--e-r-knopf)}

.zeile.beendet-zeile{grid-template-columns:1fr 200px;opacity:.65}

@media (max-width:1200px){
  .spalten{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ============ Schmale Schirme ============ */
@media (max-width:900px){
  .gestell{grid-template-columns:1fr}
  .seite{border-right:0;border-bottom:1px solid rgba(212,220,231,.7);
    flex-direction:row;align-items:center;gap:8px;overflow-x:auto;padding:12px 16px}
  .seite .gruppe,.seite-unten{display:none}
  .seite .marke{padding:0}
  .bento{grid-template-columns:1fr}
  .k.zwei,.k.breit{grid-column:auto}
  .haupt{padding:18px 16px 28px}

  /* Alles, was nebeneinander stand, wird gestapelt. Der Ring wandert
     ueber den Text, die Stellenzeile bekommt zwei Reihen. */
  .j-oben{flex-direction:column;gap:14px}
  .zeile.stelle{grid-template-columns:1fr auto;gap:12px}
  .zeile.stelle .mini{grid-column:1/-1;order:3}
  .kan-zeile{grid-template-columns:84px 1fr 26px}
  .pipe{gap:4px}
  .pipe .n{font-size:10px}
  .pipe .n .lang{display:none}
  .pipe .n .knapp{display:inline}
  .pipe .z{font-size:14px}
  .listenkopf .rechts{margin-left:0;flex-basis:100%}
  .kopf .info{margin-left:0;flex-basis:100%;order:3}
  .suche{flex:1}
  .spalten{grid-template-columns:1fr}
  .m-rechts{margin-left:0;width:100%;flex-direction:column;align-items:stretch;gap:8px}
  /* Die Filterpillen passen zu viert nicht in 375 px - die Zeile war
     514 px breit und schob die GANZE Seite quer. Jetzt rollt sie in
     sich, wie die Tabellen darunter; die Pillen bleiben in einer Reihe
     und lassen sich wischen. Umbrechen waere die Alternative, macht die
     Zeile aber zwei- bis dreizeilig und den Kopf unruhig. */
  /* `min-width:0` ist der Teil, ohne den `overflow-x` wirkungslos
     bleibt: als Flex-Kind hat die Zeile `min-width:auto` und schrumpft
     nicht unter ihren Inhalt - sie blieb 552 px breit und rollte
     deshalb nie, sondern schob die Seite. Dieselbe Falle wie bei den
     Grid-Kindern weiter oben. */
  /* `width:100%` und nicht nur `min-width:0`: der Elternteil ist eine
     UMBRECHENDE Spalte, und dort streckt `align-items:stretch` auf die
     Breite der Zeile, nicht des Containers. Die Zeile ist so breit wie
     ihr Inhalt - 536 px -, also blieb es die Filterleiste auch, trotz
     `overflow-x:auto`. Zwei Stunden Ursachensuche in einer Zeile. */
  .m-filter{overflow-x:auto;justify-content:flex-start;width:100%;min-width:0;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .m-filter::-webkit-scrollbar{display:none}
  .m-ansicht{width:100%;min-width:0}

  /* Drei Zeilen, die mit festen Spaltenbreiten gebaut sind und deshalb
     auf 375 px nicht passen. Alle drei stapeln statt zu klippen. */
  .zf-zeile{grid-template-columns:1fr 1fr;row-gap:6px}
  .zf-zeile .zf-tag{grid-column:1/-1}
  .stufenzeile{flex-wrap:wrap}
  .stufenzeile select{width:100%}
  /* Jede `summary`-Zeile, nicht nur die im Zugang - dieselbe Machart
     steht auch in der internen Kundenmappe. */
  /* `.zugang summary .z-stand` muss mitgenannt werden: die Grundregel
     hat drei Klassen und schlaegt ein blosses `summary .z-stand`
     auch innerhalb dieser Media-Regel. */
  /* `flex-basis:100%` allein reicht nicht: ohne `flex-wrap` am
     Elternteil bleibt die Spanne in derselben Zeile und laeuft ueber.
     Beides gehoert zusammen. */
  .zugang summary{flex-wrap:wrap;row-gap:6px}
  summary .z-stand,.zugang summary .z-stand{margin-left:0;flex-basis:100%;
    justify-content:flex-start}
  .m-filter::-webkit-scrollbar{display:none}
  .f-pille{white-space:nowrap;flex:none}
  .m-ansicht{justify-content:space-between}

  /* Klickziele. Auf dem Bildschirm reichen 27 px, unter dem Daumen
     nicht - die Empfehlung liegt bei 44. Nur mobil: auf dem Desktop
     wuerde es die Kopfzeilen auseinanderziehen. */
  .knopf,.knopf.klein{min-height:44px}
  .knopf.klein{padding:8px 14px;font-size:13px}
  .m-ansicht .a-knopf{flex:1;justify-content:center}
  /* Die Tabelle wird nicht gestapelt, sondern scrollt in sich: als
     Kartenliste waere sie das Board, nur schlechter. */
  /* Ein Verlauf an der rechten Kante zeigt, dass die Tabelle
     weitergeht. Ohne ihn sieht die abgeschnittene Spalte aus wie das
     Ende - und der Knopf "Naechster Schritt" waere unauffindbar. */
  .tabellenkarte{overflow-x:auto;position:relative;
    background-image:linear-gradient(90deg,rgba(255,255,255,0) 88%,rgba(255,255,255,.92) 100%);
    background-attachment:local,scroll;background-repeat:no-repeat;
    background-size:100% 100%}
  .tab{min-width:660px}
  .tab.breit{min-width:760px}
  .zeile.beendet-zeile{grid-template-columns:1fr}
}

/* ============ Erscheinungsbild und Karriereseite ============
   Zwei Seiten, auf denen der Betrieb etwas AENDERT statt nur zu lesen.
   Deshalb hier eigene Bausteine: ein Formular in einer Bento-Kachel
   braucht andere Abstaende als eine Liste. */

.hinweis{border-radius:var(--e-r-kachel);padding:13px 16px;font-size:14px;
  line-height:1.5;margin-bottom:16px;font-weight:600}
.hinweis b{display:block;font-weight:700;margin-bottom:2px}
.hinweis.gut{background:#DCF3EA;color:var(--e-ok-text)}
.hinweis.warn{background:#FDEFD8;color:var(--e-warn-text);font-weight:500}
.hinweis.schlecht{background:#FBE3E2;color:var(--e-minus-text)}

.dazu{font-size:13.5px;line-height:1.55;color:var(--e-leise);margin:8px 0 16px;max-width:62ch}
.k .feld+.feld{margin-top:14px}
.feld.schmal{max-width:190px}
/* `min-width:0` an den Kindern ist noetig, nicht Kosmetik: Grid-Kinder
   haben `min-width:auto` und schrumpfen NICHT unter ihren Inhalt. Ein
   langes Auswahlfeld erzwang so 370 px in einem 295 px breiten Kasten,
   und weil die Seite selbst nicht rollt, war der rechte Rand des Feldes
   auf dem Handy schlicht abgeschnitten. Am 06.09.2026 auf drei Seiten
   gleichzeitig gemessen - es war immer dieselbe Ursache. */
.zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.zweispalt > *,.listenzeile > *,.zahlzeile > *,.fzeile > *{min-width:0}
.tatzeile{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Handlungen an der Stelle selbst - ueber der Mappe, weil "geht die
   Stelle live" vor "was mache ich mit den Bewerbern" kommt. */
.stellenleiste{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.stellen-tat{display:flex;gap:8px;margin-left:auto}
.neu-stelle{color:var(--e-signal-tief);font-weight:700}
.neu-stelle .plus{display:inline-grid;place-items:center;width:18px;height:18px;
  border-radius:6px;background:var(--e-hauch);margin-right:9px;font-size:14px;line-height:1}
.hinweis a{color:inherit;text-decoration:underline}
.feld select{appearance:none;background-image:
  linear-gradient(45deg,transparent 50%,var(--e-leise) 50%),
  linear-gradient(135deg,var(--e-leise) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}

/* Der Farbwaehler. Der Tupfer ist das Label - so ist die Flaeche selbst
   die Schaltflaeche und nicht ein winziges Systemfeld daneben. */
/* Ein Formular, keine Kachelwand: eine Spalte in Lesebreite. Ueber
   1100 px breite Eingabefelder tippt niemand gern, und die Reihenfolge
   der Fragen ist hier die eigentliche Fuehrung. */
.formular{display:flex;flex-direction:column;gap:16px;max-width:760px}
.untertitel{font-size:14px;line-height:1.55;color:var(--e-leise);
  margin:-8px 0 20px;max-width:62ch}

.logo-stand{display:flex;align-items:center;gap:16px;margin-bottom:10px;
  background:var(--e-papier);border:1px solid var(--e-linie);
  border-radius:var(--e-r-klein);padding:12px 14px}
.logo-stand img{max-height:40px;max-width:200px;width:auto}
.logo-weg{display:flex;align-items:center;gap:6px;font-size:12.5px;
  color:var(--e-leise);font-weight:500;margin-left:auto;cursor:pointer}
.feld input[type=file]{border:1.5px dashed var(--e-linie-stark);background:var(--e-papier);
  padding:10px 13px;font-size:13.5px;cursor:pointer}
.feld input[type=file]::file-selector-button{border:0;border-radius:8px;background:#EEF1F4;
  color:var(--e-tinte);font-family:inherit;font-size:12.5px;font-weight:600;
  padding:6px 11px;margin-right:12px;cursor:pointer}

.farbzeile{display:flex;align-items:center;gap:12px}
.farbzeile input[type=text],.farbzeile>input{max-width:170px}
.farbtupfer{width:46px;height:46px;border-radius:13px;flex:none;cursor:pointer;
  position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(16,24,40,.16),
  0 2px 6px -2px rgba(16,24,40,.3)}
.farbtupfer input[type=color]{position:absolute;inset:-8px;width:calc(100% + 16px);
  height:calc(100% + 16px);border:0;padding:0;background:none;cursor:pointer;opacity:0}

/* Der Bericht: was aus der Farbe geworden ist, mit gemessener Zahl.
   Ohne die Zahl waere "abgedunkelt" eine Behauptung. */
.farbbericht{border-top:1px solid var(--e-linie);padding-top:16px;margin-top:18px}
.fb-zeile{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.fb-probe{display:inline-flex;align-items:center;padding:8px 14px;border-radius:10px;
  font-size:13.5px;font-weight:700;flex:none}
.fb-probe.hell{background:#fff;box-shadow:inset 0 0 0 1px var(--e-linie)}
.fb-wert{font-size:13px;font-weight:700;color:var(--e-tinte);flex:none}
.fb-was{font-size:13px;color:var(--e-leise)}
.fb-satz{font-size:13px;line-height:1.55;color:var(--e-leise);margin-top:4px;max-width:62ch}

.adresszeile{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 4px}
.adresse{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--e-tinte);
  background:var(--e-hauch);border-radius:var(--e-r-knopf);padding:9px 14px;
  word-break:break-all}
.adresse:hover{color:var(--e-signal-tief)}
/* Muss .z-stand b (0,1,1) schlagen, sonst bleibt der Warnton schwarz -
   und die Zeile sagt "alles in Ordnung", obwohl etwas fehlt. */
.z-stand b.z-warn{color:var(--e-warn-text)}

/* `.zeile` allein ist ein Grid OHNE Spalten - jeder Benutzer bringt
   seine eigenen mit. Ohne das stapeln Name und Stand untereinander. */
.zeile.stand{grid-template-columns:1fr auto}
.z-name a{color:var(--e-tinte)}
.z-name a:hover{color:var(--e-signal-tief)}

@media (max-width:900px){
  .zweispalt{grid-template-columns:1fr}
}

/* ============ Bewerberdetail ============ */

/* Die Nummer ist die Handlung dieser Seite: gross, antippbar, ohne Zierrat. */
.gross-tel{display:inline-block;font-size:24px;font-weight:700;letter-spacing:-.02em;
  color:var(--e-tinte);font-variant-numeric:tabular-nums}
.gross-tel:hover{color:var(--e-signal-tief)}
.feld-wert{display:flex;gap:10px;font-size:13.5px;margin-top:10px}
.feld-wert span{color:var(--e-sehr-leise);min-width:64px}

/* Was der Bewerber selbst geschrieben hat - abgesetzt, damit es nicht
   wie eine interne Notiz aussieht. */
.nachricht{background:var(--e-papier);border:1px solid var(--e-linie);
  border-left:3px solid var(--e-signal);border-radius:var(--e-r-klein);
  padding:14px 16px;font-size:14.5px;line-height:1.6;color:#2A323A;
  white-space:pre-wrap;max-width:62ch}

.schritt{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.schritt .knopf{justify-content:center;text-align:center}

.notiz{border-top:1px solid var(--e-linie);padding:12px 0}
.notiz:first-of-type{margin-top:12px}
.n-kopf{font-size:12.5px;font-weight:700;color:var(--e-leise);margin-bottom:4px}
.n-kopf span{font-weight:500;color:var(--e-sehr-leise);margin-left:8px}
.n-text{font-size:14px;line-height:1.55;white-space:pre-wrap}
.notiz-form{margin-top:18px;padding-top:16px;border-top:1px solid var(--e-linie)}
.notiz-form .feld{margin-bottom:10px}

/* Herkunftstrichter. Der Balken misst gegen die groesste Quelle, nicht
   gegen eine Zielzahl - es gibt keine. Die Zahlen daneben tragen die
   Aussage, der Balken sortiert nur das Auge. */
.tab.schlicht{margin-top:8px}
.tab.schlicht th,.tab.schlicht td{padding:9px 12px}
.tab.schlicht th:first-child,.tab.schlicht td:first-child{padding-left:0}
.num-sp{text-align:right;width:1%;white-space:nowrap}
.balken-sp{width:34%;min-width:80px}
.balken{display:block;height:7px;border-radius:99px;min-width:3px;
  background:linear-gradient(90deg,var(--e-signal-hell),var(--e-signal))}

/* ============ Intern: Opportunities ============
   Zwei Bloecke, optisch getrennt: oben eine Aussage des Kunden, unten
   unsere Rechnung. Wenn die beiden gleich aussehen, verliert die
   Aussage ihr Gewicht. */

.k.inbound{border-color:#F0D3A6;background:linear-gradient(180deg,#FFFDF8,#FFF8ED)}
.inbound-zeile .z-sofort{color:var(--e-warn-text);letter-spacing:.06em;font-size:11.5px}

.opp{border-top:1px solid var(--e-linie)}
.opp:first-of-type{margin-top:12px}
.opp summary{display:grid;grid-template-columns:44px 1fr auto 100px;gap:16px;
  align-items:center;padding:13px 0;cursor:pointer;list-style:none}
.opp summary::-webkit-details-marker{display:none}
.opp-wert{font-size:17px;font-weight:700;text-align:center;padding:5px 0;
  border-radius:9px;background:#EDF1F6;color:#4A525C}
.opp.heiss .opp-wert{background:var(--e-signal-tief);color:#fff}
.opp-name{font-size:15px;font-weight:700;letter-spacing:-.015em}
.opp-name span{display:block;font-size:12.5px;color:var(--e-sehr-leise);font-weight:500;
  margin-top:2px}
.opp-zahlen{font-size:12.5px;color:var(--e-sehr-leise)}
.opp-zahlen b{color:var(--e-tinte);font-weight:700}
.opp-rat{font-size:12.5px;font-weight:700;text-align:right;color:var(--e-sehr-leise)}
.opp.heiss .opp-rat{color:var(--e-signal-tief)}
.opp.ruht{opacity:.55}
.opp.ruht .opp-rat{color:var(--e-sehr-leise)}

.opp-auf{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;
  padding:4px 0 18px 60px}
.opp-teile{flex:1;min-width:260px}
.opp-teil{display:flex;gap:12px;font-size:13px;color:var(--e-leise);padding:3px 0}
.opp-teil b{color:var(--e-tinte);min-width:34px;text-align:right}
.opp-tat{display:flex;gap:8px;align-items:center}
.opp-sperre{font-size:12.5px;color:var(--e-sehr-leise)}

@media (max-width:900px){
  .opp summary{grid-template-columns:40px 1fr;row-gap:6px}
  .opp-zahlen,.opp-rat{grid-column:2;text-align:left}
  .opp-auf{padding-left:0}
}

/* Das Angebot an den Betrieb. Bewusst ruhig: es steht nur da, wenn die
   Zahlen es rechtfertigen, und dann traegt die Zahl die Aussage, nicht
   die Gestaltung. */
.k.angebot{flex-direction:row;align-items:center;gap:24px;flex-wrap:wrap;
  margin-bottom:16px;padding:18px 22px}
.ang-text{flex:1;min-width:260px;font-size:13.5px;line-height:1.55;color:var(--e-leise)}
.ang-text b{display:block;font-size:15px;color:var(--e-tinte);margin-bottom:3px;
  letter-spacing:-.01em}
.k.angebot .knopf{white-space:nowrap}

/* Empfehlungen. Der Link ist die Ware dieser Seite - er steht deshalb
   direkt unter dem Namen und nicht hinter einem Knopf. */
.zeile.empf{grid-template-columns:1fr auto auto;gap:18px}
.empf-link{font-size:12.5px;color:var(--e-leise);font-weight:500;word-break:break-all}
.empf-link:hover{color:var(--e-signal-tief)}
.empf-tat form{display:inline}
.empf-form{margin-top:20px;padding-top:18px;border-top:1px solid var(--e-linie);
  display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.empf-form .feld{margin-bottom:0;flex:1;min-width:220px;max-width:320px}
@media (max-width:900px){ .zeile.empf{grid-template-columns:1fr} }

.fragenwahl{display:flex;flex-direction:column;gap:2px}
.frage-punkt{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;
  font-size:14px;cursor:pointer}
.frage-punkt:hover{background:rgba(255,255,255,.7)}
.frage-punkt input{accent-color:var(--e-signal-tief);width:16px;height:16px;flex:none}
/* Ausschlusskriterien unter ihrer Frage. Eingerueckt und kleiner - sie
   sind eine Zusatzeinstellung, keine zweite Fragenliste. */
.kriterien{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  margin:2px 0 10px 26px;padding:8px 12px;border-left:2px solid var(--e-linie);
  font-size:.9rem}
.kriterien .kdazu{color:var(--e-leise)}
.kriterien .krit{display:flex;align-items:center;gap:5px;cursor:pointer}
.kriterien .krit input{accent-color:var(--e-signal-tief);width:15px;height:15px;
  flex:none;margin:0}
.frage-punkt:has(input:checked){font-weight:600}

/* Pre-Screen-Antworten. Frage links leise, Antwort rechts kraeftig -
   beim Ueberfliegen zaehlt die Antwort, die Frage kennt der Betrieb. */
.antworten{border:1px solid var(--e-linie);border-radius:var(--e-r-klein);
  background:var(--e-papier);overflow:hidden;margin-top:12px}
.antwort-zeile{display:grid;grid-template-columns:1fr auto;gap:16px;padding:10px 14px;
  border-bottom:1px solid var(--e-linie);font-size:13.5px}
.antwort-zeile:last-child{border-bottom:0}
.antwort-zeile span{color:var(--e-leise)}
.antwort-zeile b{font-weight:700;color:var(--e-tinte)}

.frage-punkt.fest{opacity:.7;cursor:default}
.frage-punkt em{font-style:normal;font-size:11.5px;color:var(--e-sehr-leise);
  font-weight:500;margin-left:6px}

.fragenwahl.zweispaltig{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:700px){ .fragenwahl.zweispaltig{grid-template-columns:1fr} }

/* Suche, Sammelaktion, Wiedervorlagen */
.m-suche{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.m-suche input[type=search]{border:1px solid var(--e-linie-stark);border-radius:var(--e-r-knopf);
  padding:8px 14px;font-family:var(--e-f);font-size:13.5px;color:var(--e-tinte);
  background:var(--e-papier);min-width:220px}
.m-suche input:focus{outline:0;border-color:var(--e-signal);
  box-shadow:0 0 0 3px rgba(14,158,112,.16)}

.t-wahl{width:1%;padding-right:0!important}
.t-wahl input{accent-color:var(--e-signal-tief);width:16px;height:16px}

.sammel{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;
  padding:12px 16px;background:var(--e-glas);border:1px solid var(--e-linie);
  border-radius:var(--e-r-kachel);font-size:13.5px;color:var(--e-leise)}
.sammel-zahl{font-weight:700;color:var(--e-tinte);min-width:150px}
.sammel select{border:1px solid var(--e-linie-stark);border-radius:var(--e-r-knopf);
  padding:7px 12px;font-family:var(--e-f);font-size:13.5px;background:var(--e-papier);
  color:var(--e-tinte)}

.k.wv-kasten{border-color:#F0D3A6;background:linear-gradient(180deg,#FFFDF8,#FFF8ED);
  margin-bottom:18px}
.zeile.stand.wv-spaet .z-name a{color:var(--e-warn-text)}
.wv-kasten .zeile{grid-template-columns:1fr auto auto;gap:16px}

/* Feinfilter: Urteil, Etiketten, Zustaendigkeit, gemerkte Sichten.
   Eine zweite, ruhigere Zeile unter den Hauptfiltern - sie sind nicht
   gleichwertig, und wenn sie gleich aussehen, findet man keinen. */
.feinfilter{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:-6px 0 16px}
.f-marke{font-size:12.5px;font-weight:600;color:var(--e-leise);padding:5px 11px;
  border-radius:999px;background:rgba(255,255,255,.7);border:1px solid var(--e-linie)}
.f-marke:hover{color:var(--e-tinte)}
.f-marke.an{background:var(--e-tinte);color:#fff;border-color:var(--e-tinte)}
.f-marke.gemerkt{border-style:dashed}
.f-marke.urteil-gut{color:var(--e-ok-text)}
.f-marke.urteil-nein{color:var(--e-minus-text)}
.f-marke.an.urteil-gut,.f-marke.an.urteil-nein{color:#fff}
.sicht-form{display:flex;gap:6px;margin-left:auto}
.sicht-form input{border:1px solid var(--e-linie);border-radius:999px;padding:5px 12px;
  font-family:var(--e-f);font-size:12.5px;background:rgba(255,255,255,.7);min-width:180px}

/* Etikett am Bewerber. Klein und farbig - es soll beim Ueberfliegen
   auffallen, aber den Namen nicht verdraengen. */
.et{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px;
  margin-left:6px;vertical-align:middle;white-space:nowrap}
.et-grau{background:#EDF1F6;color:#4A525C}
.et-gruen{background:#DCF3EA;color:var(--e-ok-text)}
.et-gelb{background:#FDEFD8;color:var(--e-warn-text)}
.et-rot{background:#FBE3E2;color:var(--e-minus-text)}
.et-blau{background:#E2F1FB;color:#0F5E8C}
.zust{font-size:11.5px;margin-left:6px}

.punkt-urteil{display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-left:7px;vertical-align:middle}
.punkt-urteil.urteil-gut{background:var(--e-ok)}
.punkt-urteil.urteil-vielleicht{background:var(--e-warn)}
.punkt-urteil.urteil-nein{background:var(--e-minus)}
.merkmale{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.merkmale .feld{margin-bottom:0}
.merkmale>.knopf{align-self:flex-end}
.urteilwahl{display:flex;gap:2px;flex-wrap:wrap}
.etikettwahl{display:flex;gap:6px;flex-wrap:wrap}
.et-wahl{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  padding:6px 11px;border-radius:8px;cursor:pointer}
.et-wahl input{accent-color:currentColor;width:14px;height:14px}
.et-neu{display:flex;gap:8px;margin-top:16px;padding-top:14px;flex-wrap:wrap;
  border-top:1px solid var(--e-linie)}
.et-neu input,.et-neu select{border:1px solid var(--e-linie-stark);border-radius:var(--e-r-knopf);
  padding:7px 12px;font-family:var(--e-f);font-size:13px;background:var(--e-papier)}

/* Zugaenge */
.zeile.zugang{grid-template-columns:1fr auto auto;gap:16px}
.zug-form{display:inline}
.zug-form select{border:1px solid var(--e-linie-stark);border-radius:var(--e-r-knopf);
  padding:6px 11px;font-family:var(--e-f);font-size:13px;background:var(--e-papier);
  color:var(--e-tinte)}
.zugang-neu{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--e-linie)}
.zugang-neu .feld{margin-bottom:0;flex:1;min-width:180px}
.zugang-neu .feld.schmal{flex:0 0 170px}
/* Das Startpasswort steht genau einmal da - es muss auffallen und sich
   fehlerfrei abschreiben lassen. */
.passwort{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;
  background:var(--e-papier);border:1px solid var(--e-linie);border-radius:6px;
  padding:3px 9px;letter-spacing:.02em;user-select:all}

/* `.z-name span` ist display:block - ein Etikett darin wuerde sonst zum
   Balken ueber die ganze Zeile. Gemessen, nicht vermutet. */
.z-name .et{display:inline-block;width:auto}
.zugang-neu select{border:1px solid var(--e-linie-stark);border-radius:var(--e-r-knopf);
  padding:11px 13px;font-family:var(--e-f);font-size:15px;background:var(--e-papier);
  color:var(--e-tinte)}

/* Mailvorlagen: zugeklappt, weil vier lange Texte untereinander
   niemanden zum Lesen bringen. */
.k.vorlage{padding:0;margin-bottom:12px}
.vorlage summary{display:flex;align-items:center;gap:16px;padding:16px 22px;
  cursor:pointer;list-style:none}
.vorlage summary::-webkit-details-marker{display:none}
.vl-name{font-size:15px;font-weight:700;letter-spacing:-.015em;flex:1}
.vl-name span{display:block;font-size:12.5px;color:var(--e-sehr-leise);font-weight:500;
  margin-top:2px}
.vl-form{padding:0 22px 20px}
.vl-form .hilfe code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--e-papier);border:1px solid var(--e-linie);border-radius:4px;
  padding:1px 5px;margin-right:5px;font-size:11.5px}

/* WhatsApp-Verlauf. Eingehend links, ausgehend rechts - dieselbe
   Leserichtung wie in jedem Messenger, damit niemand ueberlegen muss,
   wer was gesagt hat. */
.wa-zeile{max-width:66%;margin-bottom:10px;padding:10px 14px;border-radius:14px;
  font-size:14px;line-height:1.5}
.wa-zeile.rein{background:var(--e-papier);border:1px solid var(--e-linie);
  border-bottom-left-radius:4px}
.wa-zeile.raus{background:var(--e-hauch);border:1px solid #CFEBE0;margin-left:auto;
  border-bottom-right-radius:4px}
.wa-kopf{display:flex;justify-content:space-between;gap:12px;font-size:12px;
  color:var(--e-sehr-leise);margin-top:5px}
.wa-kopf a{color:var(--e-leise);font-weight:600}
.wa-text{white-space:pre-wrap;color:#1C2229}
.wa-grund{font-size:12px;color:var(--e-warn-text);margin-top:5px;font-weight:600}
@media (max-width:700px){ .wa-zeile{max-width:88%} }

/* --- Eigene Adresse (Karriereseite) ------------------------------------- */
/* Der DNS-Block ist bewusst eine Tabelle aus drei Zeilen und nicht ein
   Satz Fliesstext: der Kunde gibt das an seinen Webbetreuer weiter, und
   der sucht nach Typ, Name und Ziel - nicht nach einer Erklaerung. */
.domainform { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.domainform .feld { flex: 1 1 260px; margin: 0; }
.dns { display: grid; gap: 1px; background: var(--e-linie); border: 1px solid var(--e-linie);
       border-radius: 12px; overflow: hidden; margin: 12px 0 4px; }
.dns > div { display: grid; grid-template-columns: 88px 1fr; gap: 12px;
             background: var(--e-papier); padding: 9px 14px; align-items: baseline; }
.dns span { font-size: 12.5px; color: var(--e-leise); }
.dns b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
         font-size: 13.5px; font-weight: 500; word-break: break-all; }
.adresszeile form { display: inline; }

/* --- Bilder im Erscheinungsbild ----------------------------------------- */
/* Getrennt von .logo-stand, weil das Logo klein und breit ist und ein
   Betriebsfoto quadratisch: dieselbe Klasse haette eines von beiden
   verzerrt. */
.bildreihe { display: grid; gap: 10px; margin-bottom: 12px;
             grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.bildstand { border: 1px solid var(--e-linie); border-radius: 12px; padding: 8px;
             background: var(--e-papier); }
.bildstand img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
                 border-radius: 7px; display: block; margin-bottom: 7px; }
.bildstand.breit { max-width: 420px; margin-bottom: 10px; }
.bildstand.breit img { aspect-ratio: 8 / 3; }
.sp-mehr{font-size:12.5px;color:var(--e-leise);padding:8px 2px 2px;line-height:1.5}
.sp-mehr a{color:var(--e-signal-tief);font-weight:600}

/* Etiketten aufraeumen: die Loeschknoepfe stehen in einer Reihe unter
   dem Anlegen-Formular. Eigene Klasse, weil `.et-neu` eine Zeile ist
   und diese hier umbrechen darf. */
.et-weg{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.et-weg form{display:inline}

/* Die Regel auf dem Statuswechsel steht eingeklappt unter der Vorlage -
   sie betrifft zwei von vier Anlaessen, und aufgeklappt waere sie das
   Erste, was man sieht. */
.vl-regel{border-top:1px solid var(--e-rand);margin:14px 0 4px;padding-top:12px}
.vl-regel summary{cursor:pointer;font-weight:600;font-size:.92rem;color:var(--e-leise)}
.vl-regel[open] summary{margin-bottom:10px}

/* Das Suchfeld in der Seitenleiste. Schmal und ruhig - es ist ein Weg,
   keine Aufforderung. */
.seite-suche{padding:0 12px 12px}
.seite-suche input{width:100%;padding:8px 11px;border:1px solid var(--e-linie);
  border-radius:var(--e-r-klein);font:inherit;font-size:13.5px;
  background:var(--e-papier);color:var(--e-tinte)}
.seite-suche input::placeholder{color:var(--e-sehr-leise)}
.seite-suche input:focus{outline:none;border-color:var(--e-signal);
  box-shadow:0 0 0 3px var(--e-hauch)}

/* Die Filterachsen über der Bewerberliste. Eine Zeile, die umbricht -
   auf dem Telefon stehen sie untereinander statt zu überlaufen. */
.achsen{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;
  margin:0 0 12px;padding:10px 14px;background:var(--e-papier);
  border:1px solid var(--e-linie);border-radius:var(--e-r-klein)}
.achsen label{display:flex;align-items:center;gap:7px;font-size:13px;
  color:var(--e-leise);font-weight:600}
.achsen select{padding:6px 9px;border:1px solid var(--e-linie);
  border-radius:8px;font:inherit;font-size:13px;background:var(--e-papier);
  color:var(--e-tinte);max-width:190px}

/* Gemerkte Sicht mit ihren beiden Pfeilen. Der Rahmen gehört zur Marke
   darin, deshalb sitzt die Gruppe zusammen. */
.f-gemerkt{display:inline-flex;align-items:center;gap:2px}
.f-gemerkt form{display:inline-flex}
.f-gemerkt button{border:0;background:none;cursor:pointer;padding:2px 3px;
  color:var(--e-sehr-leise);font-size:13px;line-height:1}
.f-gemerkt button:hover{color:var(--e-tinte)}

/* Blätterung unter der Tabelle. */
.blaettern{display:flex;align-items:center;justify-content:center;gap:14px;
  margin:16px 0 4px;font-size:13.5px;color:var(--e-leise)}

/* Das Rückgängig-Band. Steht über der Liste und nimmt den Knopf mit -
   ein Hinweis ohne Weg zurück wäre nur eine Meldung. */
.rueckband{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  justify-content:space-between}
.rueckband form{margin:0}

/* Zweite Zeile in einer Tabellenzelle: Adresse unter dem Namen,
   geplanter Sendezeitpunkt unter dem Datum. */
.tab .leise{display:block;color:var(--e-sehr-leise);font-size:12px}

/* Das Bewerberblatt zum Ausdrucken. Auf dem Bildschirm eine normale
   Karte, auf Papier ohne alles drumherum. */
.blatt-kopf{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;padding-bottom:12px;border-bottom:2px solid var(--e-tinte)}
.blatt-kopf h2{font-size:1.15rem;margin:0}
.blatt-kopf p{margin:4px 0 0;color:var(--e-leise);font-size:13.5px}
.blatt-marke{font-weight:700}
.blatt-block{margin-top:18px}
.blatt-block h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--e-leise);margin:0 0 6px}
.blatt-block p{margin:0 0 8px;line-height:1.55}
.blatt-fuss{margin-top:26px;padding-top:12px;border-top:1px solid var(--e-linie);
  font-size:12px;color:var(--e-sehr-leise)}
@media print{
  .seite, .kopf .knopf, .seite-suche{display:none !important}
  .haupt{margin:0 !important;padding:0 !important}
  .k.blatt{border:0;box-shadow:none;padding:0}
  body{background:#fff}
}

/* Eine Stufenzeile: Wort links, Anker rechts. */
.stufenzeile{display:flex;gap:10px;margin-bottom:8px}
.stufenzeile input{flex:1;padding:9px 12px;border:1px solid var(--e-linie);
  border-radius:var(--e-r-klein);font:inherit}
.stufenzeile select{width:190px;flex:none;padding:9px 10px;
  border:1px solid var(--e-linie);border-radius:var(--e-r-klein);font:inherit}

/* „Warum bewirbt sich niemand?" - eine Liste, kein Alarm. Zugeklappt,
   solange Bewerbungen kommen; offen, wenn keine da sind. */
.pruefung summary{display:flex;align-items:center;justify-content:space-between;
  gap:14px;cursor:pointer;list-style:none}
.pruefung summary::-webkit-details-marker{display:none}
.pr-kopf{font-weight:700}
.pr-kopf span{font-weight:400;color:var(--e-leise);margin-left:8px;font-size:13px}
.pr-zeile{display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;padding:13px 0;border-top:1px solid var(--e-linie)}
.pr-zeile:first-of-type{margin-top:14px}
.pr-satz{flex:1}
.pr-satz b{display:block;margin-bottom:3px}
.pr-satz span{color:var(--e-leise);font-size:13.5px;line-height:1.5}
.pr-schwer .pr-satz b{color:var(--e-minus-text)}
.pr-mittel .pr-satz b{color:var(--e-warn-text)}
.pr-fuss{margin-top:14px;padding-top:12px;border-top:1px solid var(--e-linie);
  font-size:12.5px;color:var(--e-sehr-leise);line-height:1.5}

/* Kennzahlenreihe im internen Bereich. Zahlen gross, Wort klein - wer
   sie liest, sucht die Zahl. */
.kennzahlen{display:flex;flex-wrap:wrap;gap:28px;margin-top:14px}
.kennzahlen div{min-width:96px}
.kennzahlen b{display:block;font-size:1.7rem;font-weight:700;letter-spacing:-.02em}
.kennzahlen span{color:var(--e-leise);font-size:13px}

/* Wert und Beschriftung einer Betriebszahl nebeneinander. Der Wert ist
   kurz ("1961", "30 km"), der Text nicht - deshalb kein 1fr 1fr. */
.zahlzeile{display:grid;grid-template-columns:120px 1fr;gap:10px;margin-bottom:9px}
@media (max-width:640px){.zahlzeile{grid-template-columns:1fr}}

/* Zeilen der Betriebslisten (Standorte, Stimmen, Tagesablauf). Vier
   gleich breite Felder nebeneinander - auf dem Handy untereinander,
   weil vier Spalten dort niemand mehr trifft. */
.listenzeile{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;
  margin-bottom:9px}
.listenzeile.zwei{grid-template-columns:2fr 1fr}
.listenzeile.tag{grid-template-columns:90px 1fr 2fr 1fr}
.listenzeile textarea{resize:vertical}
.stimmzeile{padding-bottom:12px;margin-bottom:12px;
  border-bottom:1px solid var(--e-linie)}
.stimmzeile:last-of-type{border-bottom:0}
@media (max-width:820px){
  .listenzeile,.listenzeile.zwei,.listenzeile.tag{grid-template-columns:1fr}
}

/* Eine Automationsregel als aufklappbare Zeile. `details`/`summary` wie
   bei den Standardmails darüber - eine Liste aus zehn ausgeklappten
   Formularen wäre unlesbar. */
.k-auto{border:1px solid var(--e-linie);border-radius:var(--e-r-kachel);
  margin-bottom:10px;background:#fff}
.k-auto > summary{padding:14px 18px;cursor:pointer;list-style:none;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.k-auto > summary::-webkit-details-marker{display:none}
.k-auto > summary b{font-size:16px;color:var(--e-tinte)}
.k-auto > summary span{font-size:14px;color:var(--e-leise)}
.k-auto[open] > summary{border-bottom:1px solid var(--e-linie)}
.k-auto .formular{padding:18px}
.k-auto .tatzeile{padding:0 18px 16px}

/* ============ Navigation fürs Handy ============
   Auf dem Schreibtisch gibt es sie nicht - dort steht die Seitenleiste.
   Unter 900 px war bis zum 07.09.2026 GAR KEINE Navigation da: die
   Leiste war versteckt, und nichts trat an ihre Stelle. */
.untenleiste{display:none}
@media (max-width:900px){
  .untenleiste{display:grid;grid-template-columns:repeat(4,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(12px);
    border-top:1px solid var(--e-linie);
    padding-bottom:env(safe-area-inset-bottom)}
  .u-ziel{display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:9px 4px 8px;font-size:11px;font-weight:600;color:var(--e-leise);
    text-decoration:none;position:relative;min-height:52px;
    justify-content:center}
  .u-ziel span{font-size:17px;line-height:1}
  .u-ziel.an{color:var(--e-signal-tief)}
  .u-zahl{position:absolute;top:5px;left:50%;margin-left:6px;
    background:var(--e-signal-tief);color:#fff;font-size:10px;font-weight:800;
    min-width:16px;height:16px;border-radius:9px;display:grid;place-items:center;
    padding:0 4px}
  /* Platz für die Leiste, sonst verdeckt sie die letzte Zeile jeder
     Seite - und das ist meist der Absenden-Knopf. */
  .haupt{padding-bottom:76px}

  /* Die vier Auswahlfelder standen untereinander und nahmen 180 px -
     zusammen mit dem Feinfilter kam der erste Bewerber erst bei 661 px,
     also am unteren Bildschirmrand. Zweispaltig sind es 90 px. Die
     Beschriftung wandert dabei ueber das Feld: nebeneinander bliebe fuer
     das Feld nichts uebrig. */
  .achsen{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
  .achsen label{flex-direction:column;align-items:stretch;gap:3px;min-width:0}
  .achsen select{width:100%}
}

/* Die „Mehr"-Seite. Zeilen statt Kacheln: mit dem Daumen trifft man eine
   volle Zeile sicher, eine Kachel im Raster nicht. */
.mehrliste{display:grid}
.mehrliste a{display:block;padding:15px 4px;border-bottom:1px solid var(--e-linie);
  text-decoration:none;min-height:44px}
.mehrliste a:last-child{border-bottom:0}
.mehrliste b{display:block;font-size:16px;color:var(--e-tinte);font-weight:650}
.mehrliste span{display:block;font-size:13.5px;color:var(--e-leise);margin-top:2px}