@font-face{
  font-family:'Open Sans'; font-style:normal; font-weight:300 800; font-display:swap;
  src:url('/assets/fonts/OpenSans-Variable.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
  color-scheme:light;
  --bg:#f3f4f7; --panel:#fff; --panel-2:#f7f8fb; --border:#e7e9ee; --border-2:#eef0f4;
  /* Drei Textstufen, alle lesbar. Gemessen am 20.09.2026 auf weissem Grund:
     --text 15,78  --muted 6,18  --faint 4,72. Die Grenze fuer normalen Text
     liegt bei 4,5. Vorher stand --faint auf #95a0a5 und kam nur auf 2,68, das
     traf jede kleine Angabe im Werkzeug und jedes graue Abzeichen. */
  --text:#12141c; --muted:#5b6170; --faint:#6a7080;
  /* DWH in den Farben von Sitehub: Navy uebernimmt die Rolle des Regie-Petrols (--rust),
     Rost die Rolle von Gold (--gold, --accent). Weiss auf Rost 6,77. */
  --navy:#172039; --navy-2:#212c4d; --rust:#172039; --rust-2:#2b3a66; --gold:#a83019; --gold-2:#922a16;
  --accent:#a83019; --accent-strong:#922a16; --accent-weak:#f8ebe8; --accent-ink:#fff;
  --green:#158a4d; --red:#d0342c; --amber:#b45309; --violet:#6d4fa3;
  /* Eingabefelder: dieselbe Flaeche wie ihre Karte, erkennbar am kraeftigeren
     Rand. Vorher trugen sie ein warmes Creme (--panel-2) auf weissem Grund, das
     sah in den Fenstern nach Gelbstich aus. Der Rand bleibt warm, damit die
     Grundstimmung erhalten bleibt. */
  --feld:#fff; --feld-rand:#d5d9e1;
  /* Der Platzhalter ist etwas dunkler als das sonstige Hellgrau: auf weissem Grund
     kommt #95a0a5 nur auf einen Kontrast von 2,68, dieser Wert auf 4,46. */
  --feld-platzhalter:#6a7080;
  --shadow:0 1px 2px rgba(15,20,35,.04),0 1px 3px rgba(15,20,35,.05);
  --shadow-md:0 10px 24px -8px rgba(23,32,57,.16),0 2px 6px rgba(23,32,57,.06);
  --shadow-lg:0 24px 48px -16px rgba(23,32,57,.28);
  /* Schriftgroessen: sieben Stufen fuer das ganze Tool. Jede Angabe im Tool
     greift auf eine davon zu, damit nichts mehr um ein halbes Pixel danebenliegt.
     Die vier unteren Stufen standen bis zum 20.09.2026 auf 11, 12,5, 14 und 16
     Pixel. Das war am Bildschirm knapp und am Telefon zu wenig, deshalb sind sie
     um jeweils einen Schritt gestiegen. Mit den Zeilenlisten stand viel Inhalt in
     den beiden kleinsten Stufen und wirkte neben dem Menue (15 Pixel) zu klein,
     deshalb liegen Marke und klein nun bei 13 und 14,5 Pixel. Am Telefon steigen
     sie weiter, die Werte dafuer stehen am Ende der Datei. */
  --fs-mark:13px; --fs-klein:14.5px; --fs-text:15px; --fs-gross:17px;
  --fs-zahl:20px; --fs-zahl-xl:28px; --fs-h1:38px;
  --radius:10px; --radius-sm:8px;
  --ease:cubic-bezier(.2,.7,.3,1);
  /* Seitenleiste: immer dunkles Marken-Blau, unabhaengig vom Hell/Dunkel-Modus */
  /* Seitenleiste. Die Deckung der Schrift bestimmt hier den Kontrast: auf dem
     Petrol kam ein Menuepunkt mit 74 Prozent nur auf 4,26, eine Gruppenzeile mit
     55 Prozent auf 3,07. Beide liegen jetzt darueber, und die Flaeche des aktiven
     Punkts ist heller geworden, damit die weisse Schrift darauf 4,85 erreicht. */
  --side-bg:#172039; --side-text:rgba(255,255,255,.82); --side-text-dim:rgba(255,255,255,.72); --side-active-bg:rgba(255,255,255,.12); --side-active-text:#fff; --side-border:rgba(255,255,255,.08);
}
*{box-sizing:border-box}
/* In der Mac-App federt WebKit die ganze Seite beim seitlichen Wischen an, obwohl nichts
   breiter ist als das Fenster. Nur seitlich und nur in der App: Tabellen und Leisten mit
   eigenem Rollbereich behalten ihr Verhalten, im Browser bleibt das Zurueckwischen. */
html.mac-app,html.mac-app body{overscroll-behavior-x:none}
/* hidden muss staerker sein als die display-Regeln der Bauteile, sonst bleibt Verstecktes sichtbar */
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:'Open Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--fs-text);line-height:1.5;-webkit-font-smoothing:antialiased;font-feature-settings:'cv11','ss01'}
.dlogo{width:150px;height:auto;display:block;filter:brightness(0) invert(1)}
/* ------------------------------------------------------------------
   Die Ordnung der Knoepfe, fuenf Stufen. Wer einen neuen Knopf baut, waehlt
   eine davon und erfindet keine sechste.
   1  Hauptaktion      .btn.primary   Gold gefuellt, dunkle Schrift. Eine je Karte
                                      oder Fenster.
   2  Nebenaktion      .btn           Neutraler Rand. Abbrechen, Zurueck, alles
                                      Begleitende.
   3  Gefahr           .btn.gefahr    Rot gefuellt, weisse Schrift. Nur wo etwas
                                      unwiderruflich verschwindet.
   4  Mit Bedeutung    .btn.ton-*     Getoente Flaeche und Rand. Gold fuehrt
                       .xbtn.ton-*    woandershin, Blau aendert etwas Umkehrbares,
                                      Rot nimmt etwas aus dem Verkauf. Beim
                                      Ueberfahren und bei Tastaturfokus fuellt sich
                                      die Flaeche.
   5  In der Kopfzeile .ibtn          Rund, ruhig. Die Suche steht dauerhaft in Gold.

   Schriftfarbe auf gefuellter Flaeche ist keine Geschmacksfrage, sie folgt dem
   Kontrast (gerechnet am 20.09.2026): Gold traegt dunkle Schrift (7,07 gegen 1,84
   bei Weiss), Petrol und Rot tragen Weiss (6,30 und 4,99). Gruen mit Weiss liegt
   bei 4,40 und taugt nur fuer fette Schrift und Sinnbilder.
   ------------------------------------------------------------------ */
/* Knoepfe erben die Schrift nicht von selbst: ohne diese Zeile stand in jedem <button> die
   Systemschrift des Browsers, in jedem <a class="btn"> Open Sans. */
button{font-family:inherit}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--border);
  background:var(--panel);color:var(--text);padding:10px 16px;border-radius:10px;font-weight:600;font-size:var(--fs-text);
  cursor:pointer;text-decoration:none;transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}
.btn:hover{background:var(--panel-2);border-color:var(--feld-rand)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
/* Beim Zeigen wird aus Gold Petrol, ueberall im Tool gleich. */
.btn.primary:hover{background:var(--rust);border-color:var(--rust);color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
/* Anmeldeknopf: beim Darüberfahren Petrol statt dunkler Gold. Gold auf Gold war
   kaum ein Unterschied, Petrol ist die Farbe, die das Tool ohnehin überall führt. */

/* Auth-Karten */
.authwrap{min-height:100vh;display:grid;place-items:center;padding:30px;
  background:var(--bg)}
.authcard{width:100%;max-width:410px;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:36px 32px;text-align:center}
.authcard .dlogo{width:160px;margin:0 auto 24px;filter:none}
.authcard h1{font-size:var(--fs-zahl-xl);margin:0 0 8px;letter-spacing:-.005em;font-weight:400}
.authcard .lead{color:var(--muted);margin:0 0 24px;font-size:var(--fs-text)}
.authcard .btn{width:100%}
.foot-note{color:var(--faint);font-size:var(--fs-klein);margin:18px 0 0}
.msg{margin-top:14px;padding:10px 12px;border-radius:10px;font-size:var(--fs-klein);font-weight:600;text-align:left}
.msg.err{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
.msg.ok{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}

/* App-Layout */
.app{display:grid;grid-template-columns:252px 1fr;min-height:100vh;background:var(--bg)}
.side{background:linear-gradient(180deg,var(--side-bg) 0%,#0f1526 100%);padding:22px 16px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 26px;text-decoration:none}
.nav{display:flex;flex-direction:column;gap:1px;margin-top:4px}
.nav a{position:relative;display:flex;align-items:center;gap:11px;padding:6px 14px;border-radius:10px;color:var(--side-text);text-decoration:none;font-weight:500;font-size:var(--fs-text);transition:background .15s var(--ease),color .15s var(--ease)}
.nav a svg{width:18px;height:18px;flex:none;opacity:.85}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.active{background:var(--side-active-bg);color:var(--side-active-text);font-weight:600}
.nav a.active svg{opacity:1}
.nav a.active::before{content:'';position:absolute;left:-16px;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--gold)}
.nav-parent{padding:9px 10px 4px;color:var(--side-text-dim);font-weight:700;font-size:var(--fs-mark);text-transform:uppercase;letter-spacing:.5px;margin-top:6px}
/* Aufklappbare Gruppen in der Seitenleiste. Aufgeklappt ist der Normalfall, zuklappen
   kann, wer mag (regie.js); zugeklappte zeigen ihre Zahlen im Kopf. */
/* Die Abstaende in der Navigation sind bewusst knapper als sonst im Tool.
   Bei fuenf Gruppen und dreizehn Punkten entscheidet jeder Pixel darueber, ob
   die Leiste auf einen Bildschirm passt. Die Schriftgroesse bleibt unangetastet:
   sie kleiner zu machen braechte nur ein Drittel des Platzes und ginge an der
   Stelle auf die Lesbarkeit, die man am haeufigsten liest. */
.nav-gruppe{margin-top:4px}
.nav-gruppe:first-child{margin-top:0}
.nav-kopf{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px;
  padding:6px 10px 3px;border:none;background:none;cursor:pointer;text-align:left;
  color:var(--side-text-dim);font-weight:700;font-size:var(--fs-mark);text-transform:uppercase;letter-spacing:.5px;
  font-family:inherit;transition:color .15s var(--ease)}
.nav-kopf:hover{color:#fff}
.nav-pfeil{width:13px;height:13px;flex:none;opacity:.6;transition:transform .18s var(--ease)}
.nav-gruppe.zu .nav-pfeil{transform:rotate(-90deg)}
.nav-gruppe.zu .nav-kinder{display:none}
.nav-kinder{display:flex;flex-direction:column;gap:1px}
/* Zugeklappte Gruppen zeigen ihre Zahlen zusammengezaehlt im Kopf (regie.js, navKopfZahlen),
   damit nichts Dringendes hinter einer Klappe verschwindet. */
.nav-gruppe:not(.zu) .nav-kopf-zahlen{display:none}
.nav-gruppe.zu .nav-kopf-zahlen{text-transform:none;letter-spacing:0}
.nav-einzeln{margin-top:10px}
.nav-einzeln.oben{margin-top:0}
.nav-sub{display:block;padding:6px 10px 6px 22px;border-radius:9px;color:var(--side-text);text-decoration:none;font-weight:500}
.nav-sub:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-sub.active{background:var(--side-active-bg);color:var(--side-active-text);font-weight:600}
/* Am Finger bleiben die Punkte hoeher, damit man den richtigen trifft. */
@media (pointer:coarse){ .nav a,.nav-sub{padding-top:8px;padding-bottom:8px} .nav a.active::before{top:8px;bottom:8px} }
.side-foot{margin-top:auto;border-top:1px solid var(--side-border);padding-top:14px;display:flex;align-items:center;gap:13px}
.avatar{width:32px;height:32px;flex:none;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;font-weight:700;font-size:var(--fs-klein)}
.who{font-size:var(--fs-klein);font-weight:600;line-height:1.25;color:#fff;min-width:0}.who small{display:flex;align-items:center;gap:6px;color:var(--side-text-dim);font-size:var(--fs-mark);font-weight:500;margin-top:4px}
.who-punkt{width:7px;height:7px;border-radius:50%;background:#4ade80;flex:none}
/* Abmelden als Symbol: ein Knopf, der sich zum Wort im Hinweis erklaert (title, aria-label). */
.logout{margin-left:auto;flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:8px;color:var(--side-text-dim);text-decoration:none;transition:background .15s var(--ease),color .15s var(--ease)}
.logout svg{width:18px;height:18px}
.logout:hover,.logout:focus-visible{color:#fff;background:rgba(255,255,255,.12)}
.main{padding:28px 32px 48px;min-width:0}
/* Der Kopf: klein der Bereich, darunter die Ueberschrift kraeftig. Rechts die Suche als Feld,
   Aktualisieren und Einstellungen als Gruppe, dann Spotty. Kein Farbstrich, keine Linie. */
.top{display:flex;align-items:center;gap:16px;margin-bottom:26px;min-height:84px}
.top-head{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;flex:1}
.top-ueber{font-size:var(--fs-klein);font-weight:600;color:var(--muted);line-height:1.3}
.top h1{font-size:32px;margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.12;color:var(--text);max-width:100%;overflow-wrap:break-word}
.top .sub{display:block;background:none;border:0;border-radius:0;padding:0;
  color:var(--muted);font-size:var(--fs-text);font-weight:400;line-height:1.5;max-width:900px}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px;align-self:center}
.kopf-suche{display:flex;align-items:center;gap:10px;width:260px;height:42px;padding:0 8px 0 14px;background:var(--panel);
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);color:var(--faint);font:inherit;font-size:var(--fs-text);
  cursor:text;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.kopf-suche:hover,.kopf-suche:focus-visible{border-color:var(--feld-rand);box-shadow:var(--shadow-md)}
.kopf-suche > svg{width:17px;height:17px;flex:none;color:var(--muted)}
.kopf-suche > span{flex:1;text-align:left}
.kopf-suche kbd{font:inherit;font-size:var(--fs-mark);font-weight:600;color:var(--muted);background:var(--panel-2);
  border:1px solid var(--border);border-radius:6px;padding:2px 6px;line-height:1.4}
/* Ohne overflow:hidden, sonst schneidet die Gruppe die Hinweise (data-tip) ab. Die Ecken runden
   deshalb der erste und der letzte Knopf selbst. */
.kopf-gruppe{display:flex;background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
.kopf-gruppe .ibtn:first-child{border-radius:11px 0 0 11px}
.kopf-gruppe .ibtn:last-child{border-radius:0 11px 11px 0}
.kopf-gruppe .ibtn:only-child{border-radius:11px}
.kopf-gruppe:not(:has(*)){display:none}
.kopf-gruppe .ibtn,.kopf-gruppe .ibtn.aktualisieren-knopf,.kopf-gruppe .ibtn.ton-petrol{width:42px;height:40px;border:0;border-radius:0;background:none;color:var(--navy);box-shadow:none;transform:none}
.kopf-gruppe .ibtn + .ibtn{border-left:1px solid var(--border-2)}
/* Alle Knoepfe der Kopfzeile gleich: beim Zeigen Navy mit weissem Zeichen, ohne Sprung. */
.kopf-gruppe .ibtn:hover,.kopf-gruppe .ibtn:focus-visible{background:var(--navy);color:#fff;transform:none}
.kopf-gruppe .ibtn.hier{background:var(--panel-2);color:var(--rust)}
/* Wird der Inhalt schmal (Tablet quer, kleines Fenster), schrumpft die Suche zum Knopf mit
   Lupe, damit lange Ueberschriften wie Aufnahmepruefungen neben den Knoepfen Platz haben. */
@container inhalt (max-width:1000px){
  .kopf-suche{width:42px;padding:0;justify-content:center}
  .kopf-suche > span,.kopf-suche kbd{display:none}
}
@container inhalt (max-width:620px){ .top h1{font-size:26px} }
@container inhalt (max-width:540px){ .top h1{font-size:22px} }
.empty{max-width:520px;margin:8vh auto 0;text-align:center;color:var(--muted)}
.empty-ico{font-size:var(--fs-h1);color:var(--navy);margin-bottom:8px}
.empty h2{color:var(--text);font-size:var(--fs-gross);margin:0 0 8px}
/* Karten, Tabelle, Formular (Nutzer-Seite) */
/* clip statt hidden: eine Karte wird kein Scrollbereich, den Fokus oder scrollIntoView quer verschieben. Aeltere Browser nehmen hidden. */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;overflow:clip;max-width:720px}
/* Der Kartenkopf: Titel fett, daneben die Naeherbestimmung, rechts Zahl oder Knoepfe. Alles
   steht mittig auf einer Hoehe, und jeder Kopf ist gleich hoch, mit oder ohne Knoepfe. Auf der
   Grundlinie ausgerichtet rutschte der Titel nach oben, sobald ein Knopf den Kopf hoeher machte. */
.card-h{display:flex;align-items:center;gap:9px;padding:9px 18px;min-height:46px;font-weight:600;
  font-size:var(--fs-text);color:#fff;letter-spacing:.005em;background:var(--navy)}
/* Inhalt einer Karte, der keine Tabelle ist (Diagramm, Kacheln, Liste): gleicher Rand wie Kopf und Tabelle.
   Die Karte selbst hat keinen Innenabstand, sonst klebt alles ausser Tabellen am Rand. */
.card-inhalt{padding:16px 18px 18px}
.card-inhalt > .kpis:last-child{margin-bottom:0}
.tbl{width:100%;border-collapse:collapse}
.tbl thead{background:var(--panel-2);border-bottom:1px solid var(--border)}
.tbl thead th{text-align:left;font-size:var(--fs-klein);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;padding:12px 18px}
.tbl thead th.sortcol{cursor:pointer;user-select:none;position:relative;padding-right:24px}
.tbl thead th.sortcol:hover{opacity:.85}
.tbl thead th.sortcol::after{content:'';position:absolute;right:8px;top:50%;margin-top:-3px;border:4px solid transparent;opacity:.45}
.tbl thead th.sortcol.sort-asc::after{border-bottom-color:var(--muted);border-top-width:0;opacity:1}
.tbl thead th.sortcol.sort-desc::after{border-top-color:var(--muted);border-bottom-width:0;opacity:1}
/* th als Zeilen-Beschriftung innerhalb einer Tabelle (z. B. Systemdetails), kein Spalten-Kopf */
.tbl tbody th{text-align:left;font-weight:600;color:var(--muted);font-size:var(--fs-text);padding:12px 16px;border-bottom:1px solid var(--border-2);white-space:nowrap}
.tbl td{padding:13px 18px;border-bottom:1px solid var(--border-2)}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background .12s ease}
.tbl tbody tr:hover{background:var(--panel-2)}
.tbl tr.grouprow td{background:var(--panel-2);font-size:var(--fs-klein);text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--muted);padding:11px 18px}
.tbl tr.grouprow:hover{background:var(--panel-2)}
.tbl tr.grouprow .cnt{color:var(--faint);font-weight:600;margin-left:6px;text-transform:none;letter-spacing:normal}
.ugrp-heading{background:var(--panel-2);font-size:var(--fs-klein);text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--muted);padding:11px 18px;border-bottom:1px solid var(--border-2)}
.ugrp-heading .cnt{color:var(--faint);font-weight:600;margin-left:6px;text-transform:none;letter-spacing:normal}
.muted{color:var(--muted)}
.form{padding:16px}
.frow{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.frow label{width:80px;color:var(--muted);font-weight:600;font-size:var(--fs-klein)}
.form input,.form select,.form textarea,.linkbox input{flex:1;min-width:0;background:var(--feld);border:1px solid var(--feld-rand);border-radius:10px;padding:11px 13px;color:var(--text);font-size:var(--fs-text);font-family:inherit;line-height:1.5;transition:border-color .15s var(--ease)}
.form input:focus,.form select:focus,.form textarea:focus,.linkbox input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 14%,transparent)}
/* Mehrzeilige Felder: die Beschriftung steht oben, nicht auf halber Höhe daneben. */
.frow:has(textarea){align-items:flex-start}
.frow:has(textarea) label{padding-top:11px}
.form textarea{resize:vertical;line-height:1.5}
/* Ein Textfeld, das allein in einer Karte steht, hat keinen Flex-Nachbarn und faellt
   sonst auf die Standardbreite von zwanzig Zeichen zurueck. Kleiner als sechs Zeilen
   laesst es sich nicht mehr ziehen, sonst verschwindet der Inhalt. */
.form > textarea{width:100%;display:block;min-height:150px}
.linkbox{display:flex;gap:10px}
.linkbox input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-klein)}
#enroll-code,#enroll-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1px}
.st{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:var(--fs-mark);padding:5px 12px;border-radius:999px;color:#fff}
.st .d{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.85)}
.st.on{background:var(--green)}
.st.off{background:var(--red)}
.st.pending{background:var(--faint)}
.ubadge{display:inline-block;padding:5px 12px;border-radius:999px;font-size:var(--fs-mark);font-weight:700;color:#fff}
.ubadge.ok{background:var(--green)}
.ubadge.n{background:var(--amber)}

/* Updates-Ansicht */
.hidden{display:none}
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.toolbar .hint{color:var(--faint);font-size:var(--fs-klein)}
.filtersel{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:9px 14px;color:var(--text);font-size:var(--fs-text);font-weight:600;font-family:inherit;cursor:pointer;box-shadow:var(--shadow)}
.filtersel:focus{outline:none;border-color:var(--navy)}
.chk{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-klein);font-weight:600;color:var(--muted);cursor:pointer}
.seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:3px;gap:2px}
.seg button,.seg a{border:none;background:transparent;color:var(--muted);font-weight:600;font-size:var(--fs-klein);padding:8px 15px;border-radius:8px;cursor:pointer;text-decoration:none}
/* Gewaehlt: hell und erhaben wie beim Segmentschalter der Schuelerakte, statt dunkel gefuellt. */
.seg button.active,.seg a.active{background:var(--panel);color:var(--text);box-shadow:0 1px 2px rgba(15,20,35,.12),0 0 0 1px var(--border)}
.ugrp{border-bottom:1px solid var(--border-2)}
.ugrp:last-child{border-bottom:none}
.ugrp summary{list-style:none;display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer}
.ugrp summary::-webkit-details-marker{display:none}
.ugrp summary:hover{background:var(--panel-2)}
#view-byupdate .ugrp summary{display:grid;grid-template-columns:108px 1fr 68px 130px auto auto;align-items:center}
.tbl-updhead{display:grid;grid-template-columns:108px 1fr 68px 130px auto auto;align-items:center;gap:12px;padding:14px 18px;
  background:var(--navy);color:#fff;font-size:var(--fs-text);font-weight:400}
.tbl-updhead .sortcol{cursor:pointer;user-select:none;position:relative;padding-right:18px}
.tbl-updhead .sortcol:hover{opacity:.85}
.tbl-updhead .sortcol::after{content:'';position:absolute;right:0;top:50%;margin-top:-3px;border:4px solid transparent;opacity:.45}
.tbl-updhead .sortcol.sort-asc::after{border-bottom-color:#fff;border-top-width:0;opacity:1}
.tbl-updhead .sortcol.sort-desc::after{border-top-color:#fff;border-bottom-width:0;opacity:1}
#view-bysite .usub .urow{display:grid;grid-template-columns:108px 1fr 68px 140px auto;align-items:center;padding-left:18px}
.urow-upd{display:grid;grid-template-columns:100px 1fr 68px 130px auto;gap:10px;padding:9px 16px}
.uicon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:var(--fs-klein);flex:none}
.uicon.core,.uicon.site{background:var(--accent-weak);color:var(--navy)}
.uicon.plugin{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber)}
.uicon.theme{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.uname{font-weight:600;font-size:var(--fs-text);min-width:0}
.uname small{display:block;color:var(--faint);font-size:var(--fs-mark);font-weight:500}
.uflag{display:flex;align-items:center}
.uver{font-size:var(--fs-klein);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.uver .to{color:var(--green);font-weight:700}
.ubadge2{font-size:var(--fs-mark);font-weight:700;background:var(--accent-weak);color:var(--navy);padding:4px 10px;border-radius:999px;white-space:nowrap}
.usub{background:var(--panel-2);border-top:1px solid var(--border-2)}
.urow{display:flex;align-items:center;gap:10px;padding:9px 16px 9px 46px;border-bottom:1px solid var(--border-2);font-size:var(--fs-klein)}
.urow:last-child{border-bottom:none}
.urow .cur{margin-left:auto;color:var(--faint);font-size:var(--fs-klein);font-variant-numeric:tabular-nums}
#view-bysite .usub .urow .cur{margin-left:0;white-space:nowrap}
.uacts{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
.xbtn{width:34px;height:34px;border:1px solid var(--border);background:var(--panel);border-radius:10px;color:var(--faint);cursor:pointer;font-size:var(--fs-text);line-height:1;display:inline-grid;place-items:center;transition:all .15s var(--ease)}
/* Gold, nicht Rot. Rot steht im ganzen Werkzeug fuer Gefahr, also fuer alles, was
   loescht oder absagt. Ein Knopf, der nur weiterfuehrt, faerbte sich beim Ueberfahren
   trotzdem rot, weil diese Regel aus Sitehub stammt, wo .xbtn der Loeschknopf war.
   Wer wirklich loescht, traegt .ton-rot und bleibt rot. */
.xbtn:hover{background:var(--gold);color:var(--accent-ink);border-color:var(--gold)}
.xbtn svg{width:16px;height:16px}
.xbtn.run:hover{background:var(--rust);color:#fff;border-color:var(--rust)}
.xbtn.failed{background:var(--red);color:#fff;border-color:var(--red);cursor:default}
.xbtn.run.spin svg{animation:sh-spin 1s linear infinite}
.xbtn:disabled{opacity:.5;cursor:default}
/* Fleet-Kill-Switch: durchgehend gefuellt (nicht nur beim Hover), Rot/Gruen aus der gleichen Palette
   wie der Rest der Seite. Michael: bei duenn umrandeten Buttons war der Unterschied zwischen aktiven
   und inaktiven Plugins in einer langen Liste kaum zu erkennen, volle Flaeche ist eindeutiger. */
.xbtn.toggle-on{background:var(--green);color:#fff;border-color:var(--green)}
.xbtn.toggle-on:hover{background:color-mix(in srgb,var(--green) 80%,black)}
.xbtn.toggle-off{background:var(--red);color:#fff;border-color:var(--red)}
.xbtn.toggle-off:hover{background:color-mix(in srgb,var(--red) 80%,black)}
.xbtn.toggle-on.spin svg,.xbtn.toggle-off.spin svg{animation:sh-spin 1s linear infinite}
.mini{display:inline-flex;align-items:center;border:1px solid var(--border);background:var(--panel);padding:7px 13px;border-radius:8px;font-weight:600;font-size:var(--fs-klein);cursor:pointer;color:var(--muted);text-decoration:none;transition:all .15s var(--ease)}
.mini svg{width:14px;height:14px;flex:none}
.mini:hover{background:var(--rust);color:#fff;border-color:var(--rust)}
.mini:disabled{opacity:.6;cursor:default}
.mini.danger{background:var(--red);color:#fff;border-color:var(--red)}
.mini.danger:hover{background:color-mix(in srgb,var(--red) 80%,black);border-color:color-mix(in srgb,var(--red) 80%,black)}
.mini.success{background:var(--green);color:#fff;border-color:var(--green)}
.mini.success:hover{background:color-mix(in srgb,var(--green) 80%,black);border-color:color-mix(in srgb,var(--green) 80%,black)}
.banner-info{background:var(--accent-weak);color:var(--text);border:1px solid color-mix(in srgb,var(--navy) 20%,transparent);border-radius:10px;padding:11px 15px;margin-bottom:16px;font-size:var(--fs-klein)}
.siterow{display:flex;align-items:center;gap:11px}
.sitelink{color:inherit;text-decoration:none}
.sitelink:hover b{color:var(--navy)}
.favsm{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:var(--fs-text);flex:none;overflow:hidden}
.favsm img{width:100%;height:100%;object-fit:cover;display:block}
/* Seiten-Detail */
.crumb{color:var(--faint);font-size:var(--fs-klein);margin-bottom:14px}
.crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{color:var(--navy)}
.hero{display:flex;align-items:center;gap:14px;margin-bottom:32px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--border)}
.hero h1{font-size:var(--fs-zahl-xl);margin:0;font-weight:400;letter-spacing:-.005em}
.hero .u{color:var(--muted);font-size:var(--fs-text)}
.hero .acts{margin-left:auto;display:flex;gap:8px;align-items:center}
.settings-menu{position:relative}
.settings-panel{position:absolute;right:0;top:calc(100% + 8px);background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);padding:14px;min-width:220px;z-index:30;text-align:left}
.spanel-label{display:block;font-size:var(--fs-mark);color:var(--muted);font-weight:600;margin-bottom:6px}
.settings-panel select{width:100%;font:inherit;font-size:var(--fs-text);font-weight:600;background:var(--feld);border:1px solid var(--feld-rand);border-radius:8px;padding:8px 10px;color:var(--text)}
.settings-panel select:focus{outline:none;border-color:var(--navy)}
.fav-lg{width:50px;height:50px;border-radius:10px;background:var(--accent-weak);color:var(--navy);display:grid;place-items:center;font-weight:700;font-size:var(--fs-zahl);flex:none;overflow:hidden}
.fav-lg img{width:100%;height:100%;object-fit:cover;display:block}
.cols2{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}
.cols2 > div{display:flex}
.cols2 > div .card{flex:1;display:flex;flex-direction:column}
.tl{padding:6px 16px 12px}
.ev{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--border-2);font-size:var(--fs-klein)}
.ev:last-child{border-bottom:none}
.ev .when{margin-left:auto;color:var(--faint);font-size:var(--fs-mark);white-space:nowrap}
@media(max-width:960px){.info{grid-template-columns:repeat(2,1fr)}.cols2{grid-template-columns:1fr}}
.dotk{width:8px;height:8px;border-radius:2px;flex:none}
.dotk.core{background:var(--navy)}.dotk.plugin{background:var(--amber)}.dotk.theme{background:var(--green)}
.tbadge{display:inline-block;width:fit-content;padding:5px 12px;border-radius:999px;font-size:var(--fs-mark);font-weight:700;flex:none;color:#fff;text-align:center}
.tbadge.plugin{background:var(--amber)}
.tbadge.theme{background:var(--green)}
.tbadge.core{background:var(--navy);color:#fff}
.tbadge.lang{background:#7c4fd6}
.majtag{display:inline-block;padding:3px 9px;border-radius:999px;font-size:var(--fs-mark);font-weight:700;background:color-mix(in srgb,var(--rust) 14%,transparent);color:var(--rust);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.ibtn{width:36px;height:36px;border:1px solid var(--border);background:var(--panel);border-radius:10px;display:inline-grid;place-items:center;cursor:pointer;color:var(--muted);transition:all .15s var(--ease)}
.ibtn:hover{background:var(--panel-2);color:var(--navy);border-color:var(--navy);transform:translateY(-1px);box-shadow:var(--shadow)}
.ibtn svg{width:18px;height:18px}
.ibtn:disabled{opacity:.5;cursor:default;transform:none}
.ibtn.accent{background:var(--navy);border-color:var(--navy);color:#fff}
.ibtn.accent:hover{background:var(--navy-2);border-color:var(--navy-2);color:#fff}
.ibtn.spin svg{animation:sh-spin 1s linear infinite}
.ibtn.vulnbad{background:var(--red);border-color:var(--red);color:#fff}
.ibtn.vulnbad:hover{background:color-mix(in srgb,var(--red) 80%,black);border-color:color-mix(in srgb,var(--red) 80%,black)}
.ibtn.vulnok{background:var(--green);border-color:var(--green);color:#fff}
.ibtn.vulnok:hover{background:color-mix(in srgb,var(--green) 80%,black);border-color:color-mix(in srgb,var(--green) 80%,black)}
.ibtn.vulnunknown{background:var(--muted);border-color:var(--muted);color:#fff}
.ibtn.vulnunknown:hover{background:var(--faint);border-color:var(--faint)}
@keyframes sh-spin{to{transform:rotate(360deg)}}
/* Die beiden Knoepfe in der Kopfzeile tragen beim Ueberfahren die Hausfarben:
   Aktualisieren wird golden, Einstellungen petrol. Die Seite, auf der man schon
   steht, traegt den Ton dauerhaft. */
.ibtn.ton-gold:hover,.ibtn.ton-gold.hier{background:var(--gold);border-color:var(--gold);color:var(--accent-ink)}
.ibtn.ton-petrol:hover,.ibtn.ton-petrol.hier{background:var(--rust);border-color:var(--rust);color:#fff}
.ibtn.ton-gold.hier:hover{background:var(--gold-2);border-color:var(--gold-2)}
.ibtn.ton-petrol.hier:hover{background:var(--rust-2);border-color:var(--rust-2)}

/* ---------- Status-Maskottchen (globaler Auftrags-Anzeiger, freigestellt ohne Kachel) ---------- */
.statusind{height:84px;width:auto;flex:none;border:none;background:none;padding:0;margin:0;
  display:block;cursor:default}
.statusind:not(:first-child){margin-left:8px}
.statusind .si-mascot{height:100%;width:auto;display:block}
.statusind.running{animation:si-bob 1.1s var(--ease) infinite}
@keyframes si-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(max-width:820px){.statusind{height:70px}}

/* ---------- Eigenes Tooltip (data-tip statt Browser-Titel, erscheint sofort) ----------
   Petrol statt Tiefblau: im dunklen Kartenkopf waere es sonst unsichtbar. */
[data-tip]{position:relative}
[data-tip]::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:50%;
  transform:translate(-50%,4px);background:var(--rust);color:#fff;font-size:var(--fs-klein);font-weight:600;
  padding:7px 11px;border-radius:8px;white-space:nowrap;box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .1s ease,transform .1s ease;z-index:60;
}
[data-tip]::before{
  content:'';position:absolute;bottom:calc(100% + 6px);left:50%;width:8px;height:8px;background:var(--rust);
  border-radius:2px;transform:translate(-50%,4px) rotate(45deg);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .1s ease,transform .1s ease;z-index:59;
}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0)}
[data-tip]:hover::before,[data-tip]:focus-visible::before{opacity:1;visibility:visible;transform:translate(-50%,0) rotate(45deg)}
/* Letztes Icon in einer Karte: Tooltip rechtsbündig, sonst wird er vom abgerundeten Kartenrand abgeschnitten */
.card [data-tip]:last-child::after{left:auto;right:-8px;transform:translateY(4px)}
.card [data-tip]:last-child::before{left:auto;right:10px;transform:translateY(4px) rotate(45deg)}
.card [data-tip]:last-child:hover::after,.card [data-tip]:last-child:focus-visible::after{transform:translateY(0)}
.card [data-tip]:last-child:hover::before,.card [data-tip]:last-child:focus-visible::before{transform:translateY(0) rotate(45deg)}

/* ---------- Mobile Hauptmenü: Hamburger-Icon + Slide-in-Drawer statt fester/horizontaler Sidebar ---------- */
.mobile-topbar{display:none}
.mobile-topbar-akt{display:none}
.sidebar-backdrop{display:none}
.mobile-site-list{display:none}
.mobile-list-head{display:none}
@media (max-width:820px){
  /* clip statt hidden: hidden macht html und body zum Scrollbereich, dann laeuft die
     Speicherleiste (position:sticky) nicht mehr unten mit. Aeltere Browser nehmen hidden. */
  html,body{overflow-x:hidden;overflow-x:clip;max-width:100vw}
  .mobile-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;top:0;left:0;right:0;height:56px;
    padding:0 16px;background:var(--side-bg);z-index:70;box-shadow:var(--shadow-md)}
  .mobile-menu-btn{width:38px;height:38px;flex:none;display:grid;place-items:center;border:none;border-radius:9px;
    background:rgba(255,255,255,.09);color:#fff;cursor:pointer}
  .mobile-menu-btn svg{width:21px;height:21px}
  .mobile-menu-btn{text-decoration:none}
  /* Aktualisieren und Einstellungen stehen am Telefon oben in der Leiste, im
     Aussehen des Menue-Knopfs. In der Kopfzeile der Seite bleibt nur das
     Maskottchen stehen. */
  .mobile-topbar-akt{display:flex;align-items:center;gap:8px;margin-left:auto}
  .top-actions .ibtn{display:none}
  .dlogo-sm{height:36px;width:auto;filter:brightness(0) invert(1)}
  .sidebar-backdrop{position:fixed;inset:0;background:rgba(10,12,20,.5);z-index:65;opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
  .sidebar-backdrop.open{opacity:1;pointer-events:auto}
  .app{grid-template-columns:1fr;padding-top:56px;max-width:100vw;overflow-x:hidden;overflow-x:clip}
  .side{position:fixed;top:0;left:0;height:100vh;width:264px;z-index:68;
    transform:translateX(-100%);transition:transform .22s var(--ease);
    flex-direction:column;align-items:stretch;overflow-x:visible;overflow-y:auto;padding:72px 16px 22px}
  .side.open{transform:translateX(0);box-shadow:var(--shadow-lg)}
  /* Eigenes Logo im Drawer weg: die fixe Topbar zeigt es schon dauerhaft, ein zweites Mal direkt
     darunter sah nicht nur doppelt aus, es lag durch die hoehere Topbar (z-index 70 vs. 68) auch noch
     halb dahinter versteckt, wirkte dadurch abgeschnitten. Der Drawer beginnt jetzt direkt mit der
     Navigation, mit Abstand von oben (72px Padding), der Platz fuer die Topbar freihaelt. */
  .side .brand{display:none}
  .nav{flex-direction:column}
  .side-foot{display:flex}
  /* Am Telefon stehen Suche und Knoepfe oben in der festen Leiste, im Kopf bleiben Ueberschrift
     und Spotty. Lange Namen brechen um, statt unter Spotty zu laufen. */
  .top{min-height:70px;margin-bottom:20px}
  .top-head{flex:1}
  .top-head > h1{overflow-wrap:break-word;hyphens:manual;-webkit-hyphens:manual}
  .kopf-suche,.kopf-gruppe{display:none}
  .top-actions{flex:none}
  .top h1{font-size:clamp(22px, 7vw, 28px)}
}

@media (max-width:820px){
  #view-byupdate .ugrp summary,#view-bysite .usub .urow,.tbl-updhead,.urow-upd{grid-template-columns:84px 1fr auto}
  #view-byupdate .ugrp summary .uflag,#view-byupdate .ugrp summary .uver,#view-bysite .usub .urow .uflag,#view-bysite .usub .urow .uver,
  #view-byupdate .ugrp summary .ubadge2,.tbl-updhead .col-version,.tbl-updhead .col-sites,.urow-upd .uflag,.urow-upd .cur{display:none}
  /* Echte HTML-Tabelle (table-layout:fixed) auf der Uebersicht verhielt sich auf echtem Mobile
     Safari nachweislich anders als in jedem Test (mehrere Anlaeufe: display:none auf den versteckten
     Spalten, dann zusaetzlich width:0, dann eine <colgroup> mit expliziten <col>-Breiten, immer
     blieb der Seitenname unsichtbar). Statt weiter an table-layout:fixed zu reparieren, wird die
     Tabelle auf Mobile komplett durch eine zweite, parallele Liste ersetzt (.mobile-site-list in
     dashboard.php), die dasselbe Flexzeilen-Muster nutzt wie Backups/Updates/Kill-Switch, wo es
     nachweislich funktioniert. */
  .tbl-sites{display:none}
  .mobile-site-list{display:block}
  .mobile-list-head{display:block}
  /* Die Karte schiebt sich nicht mehr seitwaerts. Mit overflow-x:auto genuegte ein
     einziges zu breites Kind, damit die ganze Karte samt Kopf verrutschte: auf der
     Admin-Seite trug der Kopfzusatz "nach einem Update von WooCommerce, Fluent
     Forms oder WordPress" ein white-space:nowrap und war damit breiter als der
     Bildschirm. Tabellen werden am Telefon ohnehin zu Bloecken, es gibt nichts
     mehr zu schieben, also gilt hier wieder das overflow:hidden der Grundregel.
     Ein eigener Wert stand hier zuerst auf clip, das kennt Safari erst ab
     Fassung 16 und faellt davor auf sichtbar zurueck. */
  .authwrap{padding:16px}
  .authcard{padding:28px 22px}
  .msrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:11px 16px;border-bottom:1px solid var(--border-2)}
  .msrow:last-child{border-bottom:none}
  .msrow .siterow{flex:1 1 160px;min-width:0}
  .msrow .siterow > span:last-child{min-width:0;overflow:hidden}
  .msrow .siterow b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* URL unter dem Namen mobil weg, Michael: der Name allein reicht, spart Platz in der Zeile. */
  .msrow .siterow .muted{display:none}
  .msrow-acts{display:flex;align-items:center;gap:8px;margin-left:auto}
  /* Auf der Uebersicht bleibt neben Login zusaetzlich das Sicherheits-Icon sichtbar (Michael: eine der
     wichtigsten Warnungen unterwegs), nur der DB+Dateien-Sammel-Knopf gibt es in der Mobile-Liste
     erst gar nicht (siehe dashboard.php). */

  /* Gemeinsames Zeilen-Muster (Backups pro Seite, Updates "Nach Seite" pro Seite, Kill-Switch pro Plugin):
     Icon + Name + Zaehl-Pille + ein oder zwei Aktions-Knoepfe passen bei langen Namen nicht mehr in eine
     Zeile. Statt horizontal zu ueberlaufen, darf die Zeile umbrechen, Name bekommt Ellipsis statt Umbruch
     mitten im Wort. */
  .ugrp summary{flex-wrap:wrap;row-gap:8px}
  .ugrp summary .uname{flex:1 1 140px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ugrp summary .uname small{white-space:normal;overflow:visible;text-overflow:clip}
  .urow{padding-left:18px;flex-wrap:wrap;row-gap:6px}

  /* Backups: auf dem Handy zaehlt vor allem der schnelle Sammel-Knopf, die zwei Einzel-Knoepfe (nur DB,
     nur Dateien) verschwinden aus der Kopfzeile, damit dort Platz fuer Name und Sammel-Knopf bleibt. */
  #backups-page .ugrp summary .js-backup,#backups-page .ugrp summary .js-backup-files{display:none}
}

/* ---------- Mehrtages-Kalender im Modul Termine ---------- */
.kal-kopf{display:flex;align-items:center;justify-content:center;gap:16px;margin:4px 0 14px}
.kal-spanne{font-weight:700;font-size:var(--fs-text);color:var(--navy);min-width:260px;text-align:center}
.kal-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.kal-monat{background:var(--panel-2);border:1px solid var(--border-2);border-radius:10px;padding:12px 12px 14px}
.kal-monat-h{text-align:center;font-weight:700;font-size:var(--fs-text);color:var(--navy);margin:2px 0 10px}
.kal-gitter{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.kal-wt{text-align:center;font-size:var(--fs-mark);font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);padding:2px 0 6px}
.kal-tag{aspect-ratio:1/1;display:grid;place-items:center;border:1px solid transparent;border-radius:9px;
  background:var(--panel);color:var(--text);font-size:var(--fs-klein);font-weight:600;cursor:pointer;
  transition:background .12s var(--ease),color .12s var(--ease),border-color .12s var(--ease)}
.kal-tag:hover:not(:disabled){background:var(--accent-weak);border-color:var(--accent)}
.kal-tag.leer{background:transparent;cursor:default;border-color:transparent}
.kal-tag.aus{color:var(--faint);background:transparent;cursor:not-allowed}
.kal-tag.wochenende:not(.gewaehlt):not(.belegt){color:var(--muted);background:var(--panel-2)}
.kal-tag.heute{box-shadow:inset 0 0 0 2px var(--rust-2)}
.kal-tag.belegt{background:color-mix(in srgb,var(--rust) 16%,transparent);color:var(--rust);cursor:not-allowed;font-weight:700}
.kal-tag.gewaehlt{background:var(--accent);border-color:var(--accent-strong);color:var(--accent-ink);font-weight:800}
/* Schliesszeiten-Kalender: gesetzliche Feiertage stehen nur da, sie lassen sich
   nicht pflegen (die Website rechnet sie selbst). Deshalb ein eigener, ruhiger Ton. */
.kal-tag.feiertag:not(.gewaehlt):not(.belegt){background:var(--tag-feier);border-color:var(--tag-feier-rand);color:var(--tag-feier-schrift);font-weight:700}
/* Ein aufgezogener Bereich: die Enden bekommen die runde Ecke, die Mitte bleibt eckig.
   Nur im Sperrzeiten-Kalender: im Terminkalender werden einzelne Tage gewaehlt,
   dort soll jeder Tag seine runde Ecke behalten. */
#sz-kal .kal-tag.gewaehlt{border-radius:0}
#sz-kal .kal-tag.gewaehlt.start{border-top-left-radius:9px;border-bottom-left-radius:9px}
#sz-kal .kal-tag.gewaehlt.ende{border-top-right-radius:9px;border-bottom-right-radius:9px}
#sz-kal .kal-tag.gewaehlt.start.ende{border-radius:9px}
.kal-gewaehlt{margin-top:16px;padding:12px 14px;background:var(--panel-2);border:1px solid var(--border-2);border-radius:10px}
.kal-gewaehlt-h{font-size:var(--fs-mark);font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.kal-chips{display:flex;flex-wrap:wrap;gap:6px}
.kal-chip{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--border);
  border-radius:999px;padding:5px 8px 5px 11px;font-size:var(--fs-klein);font-weight:600}
.kal-chip button{border:none;background:transparent;color:var(--faint);cursor:pointer;font-size:var(--fs-text);line-height:1;padding:0 2px}
.kal-chip button:hover{color:var(--red)}
.kal-legende{display:flex;flex-wrap:wrap;gap:16px;margin:14px 0 22px;font-size:var(--fs-klein);color:var(--muted)}
.kal-legende span{display:inline-flex;align-items:center;gap:6px}
.kal-legende i{width:12px;height:12px;border-radius:4px;display:inline-block}

.zusatzbox{margin-top:20px;padding:14px 16px;background:var(--panel-2);border:1px solid var(--border-2);border-radius:10px}
.vorschau{margin-top:16px;padding:14px 16px;background:var(--accent-weak);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:10px}
.vorschau-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:3px 0}
.vorschau-zeile span{font-size:var(--fs-klein);font-weight:600;color:var(--muted);flex:none}
.vorschau-zeile b{font-size:var(--fs-text);color:var(--navy);text-align:right}

@media (max-width:900px){
  .kal-wrap{grid-template-columns:1fr}
  .kal-spanne{min-width:0;font-size:var(--fs-text)}
}

/* ---------- Belegungskalender im Modul Auswertungen ---------- */
.bel-kopf{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.bel-nav{display:flex;align-items:center;gap:10px}
.bel-nav .ibtn{font-size:var(--fs-zahl);line-height:1;text-decoration:none;font-weight:600}
.bel-monat{font-size:var(--fs-zahl);font-weight:700;color:var(--navy);min-width:190px;text-align:center}
.bel-zahlen{display:flex;gap:22px;font-size:var(--fs-klein);color:var(--muted)}
.bel-zahlen b{display:block;font-size:var(--fs-zahl);font-weight:700;color:var(--navy);line-height:1.2}

.bel{padding:14px 16px 18px}
.bel-wt{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-bottom:6px}
.bel-wt div{font-size:var(--fs-mark);font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);padding:0 4px 4px}
.bel-woche{margin-bottom:4px;position:relative}
.bel-tage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
/* Die Zelle waechst mit der Zahl der Balken, die in dieser Woche liegen */
.bel-tag{min-height:calc(46px + var(--spuren,0) * 30px);background:var(--panel-2);border:1px solid var(--border-2);border-radius:10px;padding:5px 7px}
.bel-tag.fremd{background:transparent;border-color:transparent}
.bel-tag.fremd .bel-nr{color:var(--faint)}
.bel-tag.heute{border-color:var(--rust-2);box-shadow:inset 0 0 0 1px var(--rust-2)}
.bel-nr{font-size:var(--fs-klein);font-weight:700;color:var(--muted)}

/* Die Balken liegen ueber den Zellen, beginnend unter der Tageszahl */
.bel-spuren{position:absolute;left:0;right:0;top:28px;display:flex;flex-direction:column;gap:4px}
.bel-spur{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:0 1px}
.bel-balken{display:flex;align-items:center;gap:7px;min-width:0;height:26px;padding:0 9px;color:#fff;
  font-size:var(--fs-klein);font-weight:600;border-radius:4px;overflow:hidden;white-space:nowrap;cursor:default;
  box-shadow:0 1px 2px rgba(15,20,35,.14)}
.bel-balken.beginnt{border-top-left-radius:13px;border-bottom-left-radius:13px;padding-left:5px}
.bel-balken.endet{border-top-right-radius:13px;border-bottom-right-radius:13px}
.bel-balken.geplant{opacity:.62;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.22) 0 5px,transparent 5px 10px)}
.bel-kuerzel{flex:none;background:rgba(0,0,0,.22);border-radius:9px;padding:1px 6px;font-size:var(--fs-mark);font-weight:800;letter-spacing:.3px}
.bel-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.bel-zahl{flex:none;font-weight:800;background:rgba(255,255,255,.2);border-radius:9px;padding:1px 7px;font-size:var(--fs-mark)}
.bel-punkt{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:7px;vertical-align:baseline}

@media (max-width:900px){
  .bel-tag{min-height:calc(38px + var(--spuren,0) * 26px)}
  .bel-balken{height:22px;font-size:var(--fs-mark);padding:0 5px;gap:4px}
  .bel-spuren{top:24px}
  .bel-name{display:none}
  .bel-wt div{font-size:0}
  .bel-wt div::first-letter{font-size:var(--fs-mark)}
  .bel-zahlen{gap:16px}
}

/* ---------- Dialoge ---------- */
.dlg{border:none;padding:0;background:transparent;max-width:560px;width:calc(100% - 32px)}
.dlg::backdrop{background:rgba(23,32,57,.45);backdrop-filter:blur(2px)}
.dlg-inner{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:26px 26px 22px}
.dlg-h{margin:0 0 8px;font-size:var(--fs-zahl);font-weight:400;color:var(--navy);letter-spacing:-.005em}
.dlg-lead{margin:0 0 16px;color:var(--muted);font-size:var(--fs-text)}
.dlg-warn{background:color-mix(in srgb,var(--amber) 14%,transparent);color:var(--amber);
  border-radius:10px;padding:10px 12px;font-size:var(--fs-klein);font-weight:600;margin-bottom:14px}
.dlg-tbl{font-size:var(--fs-klein)}
.dlg-tbl th,.dlg-tbl td{padding:7px 10px}
.dlg-akt{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
/* Gefahr trägt eine einzige Klasse. Vorher hiess sie in den Fenstern "gefahr" und
   an vier Stellen "primary danger", zwei Namen fuer dieselbe Sache. */
.btn.gefahr,.btn.primary.danger{background:var(--red);border-color:var(--red);color:#fff;font-weight:700}
.btn.gefahr:hover,.btn.primary.danger:hover{background:color-mix(in srgb,var(--red) 82%,black);border-color:color-mix(in srgb,var(--red) 82%,black)}
.dlg select,.dlg input[type=text]{width:100%}

/* Symbolknöpfe in Tabellenzeilen */
.uacts{display:inline-flex;align-items:center;gap:7px}
.xbtn.run:hover{background:var(--rust);color:#fff;border-color:var(--rust)}

/* Anklickbare Balken im Belegungskalender */
.bel-balken.klickbar{text-decoration:none;cursor:pointer;transition:filter .12s var(--ease),transform .12s var(--ease)}
.bel-balken.klickbar:hover{filter:brightness(1.12);transform:translateY(-1px);box-shadow:0 3px 8px rgba(15,20,35,.22)}

/* Detailseite eines Termins: Buchungen links, Termin und Aktionen rechts */
.detail-spalten{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start;max-width:1300px}
.detail-spalten > .card,.detail-spalten .card{max-width:none}
.detail-spalten .notiz{display:block;max-width:220px}
@media (max-width:1000px){ .detail-spalten{grid-template-columns:1fr} }
/* Seiten mit breiten Teilnehmertabellen (Termin, Wunschtermin): hier rutscht die
   Seitenkarte schon unter 1240 Pixeln unter den Inhalt. Daneben waere die linke Spalte
   zu schmal fuer die Tabelle mit ihren Knoepfen. */
@media (max-width:1239px){ .detail-spalten.mit-tabelle{grid-template-columns:1fr} }

/* Dauerhafter Hinweis auf Dinge, die zu klären sind */
.warnbalken{display:flex;gap:13px;align-items:flex-start;max-width:1300px;margin-bottom:18px;padding:14px 16px;
  background:color-mix(in srgb,var(--amber) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--amber) 38%,transparent);
  border-radius:10px;color:var(--text);font-size:var(--fs-text)}
.warnbalken > svg{width:20px;height:20px;flex:none;color:var(--amber);margin-top:1px}
.warnbalken b{color:var(--amber)}
.warn-liste{display:flex;flex-direction:column;gap:3px;margin-top:8px}
.warn-liste a{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--navy) 30%,transparent);align-self:flex-start}
.warn-liste a:hover{border-bottom-color:var(--navy)}
.warn-fuss{margin-top:9px;color:var(--muted);font-size:var(--fs-klein)}
/* Zweiter Balken: eine offene Aufgabe, kein Alarm. Deshalb Petrol statt Bernstein. */
.warnbalken.info{background:color-mix(in srgb,var(--rust) 9%,var(--panel));border-color:color-mix(in srgb,var(--rust) 32%,transparent)}
.warnbalken.info > svg{color:var(--rust)}
.warnbalken.info b{color:var(--rust)}
.warn-btn{margin-top:11px}
/* Eingeklappter Warnbalken (Logs): oben nur die Zahl, Einzelheiten per Klick. */
.warn-klapp{display:block}
.warn-klapp > summary{display:flex;gap:13px;align-items:center;cursor:pointer;list-style:none}
.warn-klapp > summary::-webkit-details-marker{display:none}
.warn-klapp > summary > svg{width:20px;height:20px;flex:none;color:var(--amber)}
.warn-klapp-zeigen{margin-left:auto;color:var(--muted);font-size:var(--fs-klein)}
.warn-klapp[open] .warn-klapp-zeigen{font-size:0}
.warn-klapp[open] .warn-klapp-zeigen::after{content:"ausblenden";font-size:var(--fs-klein)}
.warn-zeile{align-items:center;text-decoration:none;padding:10px 16px}
.warn-zeile:hover{border-color:var(--amber)}
.warn-klapp-inhalt{display:flex;flex-direction:column;gap:5px;margin:10px 0 0 33px;color:var(--muted);font-size:var(--fs-klein)}
/* Wartung waehrend eines Deploys (regie.js): derselbe Petrol-Balken, aber oben fest ueber
   der Seite, weil er auf jeder Seite und an jeder Scrollstelle zu sehen sein muss. */
.wartung-balken{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:130;margin:0;
  width:max-content;max-width:min(640px,calc(100% - 32px));box-shadow:var(--shadow-md)}

/* Symbolknöpfe am rechten Rand: ihre Erklärung wächst nach innen statt nach außen.
   Sonst schneidet eine Karte mit overflow:hidden sie ab, und dort, wo nichts abschneidet,
   verbreitert das unsichtbare Pseudoelement die ganze Seite und erzeugt Querscrollen. */
.uacts [data-tip]::after,.top-actions [data-tip]::after{left:auto;right:0;transform:translate(0,4px)}
.uacts [data-tip]:hover::after,.uacts [data-tip]:focus-visible::after,
.top-actions [data-tip]:hover::after,.top-actions [data-tip]:focus-visible::after{transform:translate(0,0)}
.uacts [data-tip]::before,.top-actions [data-tip]::before{left:auto;right:13px;transform:translate(0,4px) rotate(45deg)}
.uacts [data-tip]:hover::before,.uacts [data-tip]:focus-visible::before,
.top-actions [data-tip]:hover::before,.top-actions [data-tip]:focus-visible::before{transform:translate(0,0) rotate(45deg)}

/* Kalender-Einstellungen */
.kal-hilfe{margin-top:20px;border-top:1px solid var(--border-2);padding-top:14px}
.kal-hilfe summary{cursor:pointer;font-weight:600;font-size:var(--fs-text);color:var(--navy);list-style:none}
.kal-hilfe summary::-webkit-details-marker{display:none}
.kal-hilfe summary::before{content:'▸ ';color:var(--faint)}
.kal-hilfe[open] summary::before{content:'▾ '}
.kal-hilfe p{color:var(--muted);font-size:var(--fs-klein);line-height:1.6;margin:12px 0 0}

/* Kalenderzellen sind mindestens zwei Balken hoch, damit der Monat nicht flach wirkt */
.bel-tag{min-height:calc(46px + max(var(--spuren,0), 2) * 30px)}
@media (max-width:900px){ .bel-tag{min-height:calc(38px + max(var(--spuren,0), 2) * 26px)} }

/* Übersicht: die beiden Karten unter den Kacheln nebeneinander */
.start-spalten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start;max-width:1300px}
.start-spalten .card{max-width:none}
@media (max-width:1000px){ .start-spalten{grid-template-columns:1fr} }

/* Zahl offener Fälle in der Seitenleiste */
.nav-zahl{margin-left:auto;background:var(--gold);color:var(--accent-ink);font-weight:800;font-size:var(--fs-mark);
  min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.nav a.active .nav-zahl{background:var(--gold);color:var(--accent-ink)}
/* Weiss fuer Zahlen, die nur erinnern und nicht draengen, etwa offene Gutscheine */
/* Die Zahl in Petrol wie die Seitenleiste, damit sie ruhig bleibt. */
.nav-zahl.hell,.nav a.active .nav-zahl.hell{background:#fff;color:var(--rust)}

/* Auswertungen: Zeitraumwahl und Fußzeile mit PDF-Knopf */
.aus-kopf{display:flex;align-items:center;gap:16px;flex-wrap:wrap;max-width:1300px;margin-bottom:18px}
.aus-spanne{font-size:var(--fs-klein);color:var(--muted);font-weight:600}
.seg #btn-zeitraum{display:inline-flex;align-items:center;justify-content:center;padding:7px 12px}
.seg #btn-zeitraum.active{background:var(--panel);color:var(--text);box-shadow:0 1px 2px rgba(15,20,35,.12),0 0 0 1px var(--border)}
.aus-fuss{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:14px 16px;border-top:1px solid var(--border-2)}
.aus-fuss span{color:var(--muted);font-size:var(--fs-klein);max-width:760px}
.dlg input[type=date]{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:9px;font:inherit;font-size:var(--fs-text);background:var(--panel);color:var(--text)}
.card-h-sub{margin-left:auto;font-size:var(--fs-klein);font-weight:400;opacity:.8;white-space:nowrap}

/* Karten, die nur die Verwaltung angehen: der Kopf laeuft nach rechts ins Gold
   statt ins Petrol, und die Karte ist zugeklappt, bis jemand sie aufklappt.
   Gebaut mit <details>, damit es ohne JavaScript auskommt.
   Dasselbe gilt fuer alles Zugeklappte: Vergangenes, Eingeloestes, der Versand.
   Jede zuklappbare Karte traegt rechts im Kopf denselben Pfeil. */
.karte-admin{padding:0}
.karte-admin > summary{background:var(--navy)}
details.card > summary{list-style:none;cursor:pointer}
details.card > summary::-webkit-details-marker{display:none}
details.card > summary::after{content:'';margin-left:10px;width:9px;height:9px;flex:none;align-self:center;
  border-right:2px solid rgba(255,255,255,.85);border-bottom:2px solid rgba(255,255,255,.85);
  transform:rotate(45deg) translateY(-2px);transition:transform .18s var(--ease)}
details.card > summary:not(:has(.card-h-sub))::after{margin-left:auto}
details.card[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
details.card > summary:hover{filter:brightness(1.06)}
.card-h-nach{font-size:var(--fs-klein);font-weight:400;opacity:.75}
.card-h .ubadge2{align-self:center}
.tbl tfoot td{border-top:2px solid var(--border);background:var(--panel-2);padding:12px 14px}

/* Verteilung: zwei Kuchen nebeneinander, je Kuchen links und Legende rechts */
/* Beide Karten eines Paars gleich hoch, auch wenn eine Legende laenger ist. */
.kuchen-paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:28px;max-width:1300px;align-items:stretch}
.kuchen-paar .card{max-width:none}
.kuchen-box{display:grid;grid-template-columns:210px minmax(0,1fr);gap:18px;align-items:center;padding:18px 20px}
.kuchen{width:200px;height:200px;display:block;filter:drop-shadow(0 2px 6px rgba(15,20,35,.10))}
.kuchen-liste{display:flex;flex-direction:column;gap:1px;min-width:0}
.kuchen-zeile{display:grid;grid-template-columns:12px minmax(0,1fr) 56px;gap:9px;align-items:center;
  padding:6px 9px;border-radius:8px;font-size:var(--fs-klein)}
.kuchen-zeile:nth-child(odd){background:var(--panel-2)}
.kuchen-zeile i{width:11px;height:11px;border-radius:3px;display:block}
.kuchen-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kuchen-prozent{font-weight:800;color:var(--navy);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:1100px){
  .kuchen-paar{grid-template-columns:1fr}
}
@media (max-width:700px){
  .kuchen-box{grid-template-columns:1fr;justify-items:center}
  .kuchen-liste{width:100%}
}

/* Symbolknöpfe tragen ihren Ton dauerhaft, nicht erst beim Darüberfahren.
   So sieht man auf einen Blick, was eine Zeile anbietet und wie weit eine Aktion
   reicht: Gold führt nur woandershin, Blau ändert etwas Umkehrbares, Rot nimmt
   etwas aus dem Verkauf oder storniert. Beim Darüberfahren füllt sich die Fläche.
   Steht am Ende der Datei, damit es die geerbten Hover-Regeln von .xbtn und
   .xbtn.run überstimmt, die aus Sitehub stammen. */
.xbtn.ton-gold{color:color-mix(in srgb,var(--gold-2) 75%,black);border-color:color-mix(in srgb,var(--gold) 40%,transparent);
  background:var(--panel)}
.xbtn.ton-gold:hover,.xbtn.ton-gold:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--accent-ink)}
.xbtn.ton-blau{color:var(--rust);border-color:color-mix(in srgb,var(--rust) 30%,transparent);
  background:var(--panel)}
.xbtn.ton-blau:hover,.xbtn.ton-blau:focus-visible{background:var(--rust);border-color:var(--rust);color:#fff}
.xbtn.ton-rot{color:var(--red);border-color:color-mix(in srgb,var(--red) 30%,transparent);
  background:var(--panel)}
.xbtn.ton-rot:hover,.xbtn.ton-rot:focus-visible{background:var(--red);border-color:var(--red);color:#fff}
.xbtn.ton-gold:disabled,.xbtn.ton-blau:disabled,.xbtn.ton-rot:disabled{opacity:.45}

/* Dieselben Toene fuer die breiten Knoepfe, ruhig: farbig ist nur der Hauptknopf (Gold).
   Blau ist ein normaler Knopf, weiss mit feinem Rand. Gold behaelt einen Hauch Flaeche,
   Rot und Gruen zeigen ihre Farbe in Schrift und Rand. Beim Zeigen ein Hauch Farbe. */
.btn.ton-gold{color:var(--accent-ink);border-color:color-mix(in srgb,var(--gold) 55%,transparent);
  background:color-mix(in srgb,var(--gold) 16%,var(--panel));font-weight:600}
.btn.ton-gold:hover,.btn.ton-gold:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--accent-ink)}
.btn.ton-rot{color:var(--red);border-color:color-mix(in srgb,var(--red) 30%,transparent);
  background:var(--panel);font-weight:600}
.btn.ton-rot:hover,.btn.ton-rot:focus-visible{background:color-mix(in srgb,var(--red) 8%,var(--panel));border-color:color-mix(in srgb,var(--red) 55%,transparent);color:var(--red)}
.btn.ton-blau{color:var(--text);border-color:var(--border);background:var(--panel);font-weight:600}
.btn.ton-blau:hover,.btn.ton-blau:focus-visible{background:color-mix(in srgb,var(--rust) 6%,var(--panel));border-color:color-mix(in srgb,var(--rust) 40%,transparent);color:var(--rust)}

/* Umfragen im Campus: Schild in den Farben der App, Zeitraum, Haken der Zielgruppe, Hinweis zur Anonymitaet. */
.pz-schild.campus,.tbadge.campus{background:#25333a;color:#f8b236}
.uf-datum{flex-wrap:nowrap}
.uf-datum .ez-feld{width:160px}
.uf-haken{gap:6px 16px}
.uf-haken label{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:var(--fs-klein)}
.uf-anonym{padding:14px 18px;border-top:1px solid var(--border-2);background:color-mix(in srgb,var(--navy) 5%,var(--panel));font-size:var(--fs-klein);line-height:1.55}
.uf-anonym b{display:block;margin-bottom:4px}

/* Modul Umfragen: der Aufbau einer Vorlage, Kategorien mit ihren Fragen darunter. */
.kat{border-bottom:1px solid var(--border-2);padding:0 0 4px}
.kat:last-of-type{border-bottom:none}
.kat-kopf{display:flex;align-items:flex-start;gap:12px;padding:14px 16px 10px;background:var(--panel-2)}
.kat-titel{min-width:0;flex:1}
.kat-titel b{font-size:var(--fs-text)}
.kat-titel .muted{margin-left:9px;font-size:var(--fs-klein)}
.kat-kopf .uacts{flex:none}
.frage{display:flex;align-items:flex-start;gap:12px;padding:11px 16px 11px 28px;border-top:1px solid var(--border-2)}
.frage:hover{background:color-mix(in srgb,var(--rust) 3%,transparent)}
.frage-text{min-width:0;flex:1;font-size:var(--fs-text)}
.frage .uacts{flex:none}
.ftyp{display:inline-block;font-size:var(--fs-mark);font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  padding:2px 7px;border-radius:6px;margin:0 6px 5px 0;background:var(--panel-2);color:var(--muted);border:1px solid var(--border)}
.ftyp-note{background:color-mix(in srgb,var(--gold) 20%,var(--panel));color:var(--gold-2);border-color:transparent}
.ftyp-freitext{background:color-mix(in srgb,var(--rust) 12%,var(--panel));color:var(--rust);border-color:transparent}
.ftyp-pflicht{background:color-mix(in srgb,var(--red) 10%,var(--panel));color:var(--red);border-color:transparent}
.ftyp-kern{background:var(--navy);color:#fff;border-color:transparent}
.fopt{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.fopt span{font-size:var(--fs-klein);background:var(--panel-2);border:1px solid var(--border);border-radius:7px;padding:2px 8px;color:var(--muted)}
.kat-fuss{padding:8px 16px 14px 28px}
/* Das Passwort eines Durchgangs: gut lesbar und zum Abtippen gedacht. */
.pw{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-klein);font-weight:700;
  letter-spacing:.5px;white-space:nowrap;max-width:100%;
  background:var(--accent-weak);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);
  border-radius:7px;padding:3px 8px;color:var(--navy);user-select:all}

/* Felder in den Dialogen bekommen dieselbe Luft wie im Formular: sie waren dort
   schmal und eng gepolstert, weil .dlg seine eigenen Regeln mitbrachte. */
.dlg-inner input[type=text],.dlg-inner input[type=date],.dlg-inner input[type=number],
.dlg-inner input[type=email],.dlg-inner input[type=tel],.dlg-inner input[type=url],
.dlg-inner select,.dlg-inner textarea{
  width:100%;min-width:0;background:var(--feld);border:1px solid var(--feld-rand);border-radius:10px;
  padding:11px 13px;color:var(--text);font-size:var(--fs-text);font-family:inherit;line-height:1.5;
  transition:border-color .15s var(--ease)}
.dlg-inner textarea{resize:vertical}
.dlg-inner input:focus,.dlg-inner select:focus,.dlg-inner textarea:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 14%,transparent)}
.dlg-inner .frow{display:block;margin-bottom:0}
/* Eine ausgeblendete Zeile bleibt ausgeblendet: das display:block darueber wuerde
   das Attribut hidden sonst ueberstimmen und die Zeile trotzdem zeigen. */
.dlg-inner .frow[hidden],.form .frow[hidden]{display:none}
.form input[type=date]{min-height:45px;padding-top:10px;padding-bottom:10px;color-scheme:light}
@media (prefers-color-scheme:dark){.form input[type=date]{color-scheme:dark}}
/* Ein Datumsfeld bringt eigene Masse mit und faellt dadurch neben den anderen
   Feldern zu klein aus. Es bekommt dieselbe Hoehe und dieselbe Farblage. */
.dlg-inner input[type=date]{min-height:45px;padding-top:10px;padding-bottom:10px;color-scheme:light}
/* Safari zeichnet Auswahlfelder in eigener, kleinerer Hoehe. Ohne die Eigenzeichnung
   bekommen sie denselben Zuschnitt wie Text- und Datumsfelder, der Pfeil kommt als Bild. */
.form select{-webkit-appearance:none;appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.form select,.form input[type=date],.form input[type=text],.form input[type=email],.form input[type=tel]{height:calc(1.5em + 24px);min-height:0}
.dlg-inner select{-webkit-appearance:none;appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.dlg-inner select,.dlg-inner input[type=date],.dlg-inner input[type=text],.dlg-inner input[type=number]{height:calc(1.5em + 24px);min-height:0}
/* Der Monatskalender im Gutschein-Fenster: ein Monat, sonst derselbe Zuschnitt wie
   der grosse Kalender. */
.gs-kal{border:1px solid var(--feld-rand);border-radius:10px;padding:10px 12px 12px;background:var(--feld)}
.gs-kal .kal-kopf{margin:0 0 8px}
.gs-kal .kal-monat{background:transparent;border:0;padding:0}
.gs-kal .kal-tag{font-size:var(--fs-klein)}
.gs-kal-label{display:block;margin-bottom:6px;color:var(--muted);font-weight:600;font-size:var(--fs-klein)}
/* Der Reiter Admin und seine Karte tragen Rot: dort steht Technik, an die im
   Alltag niemand ran muss. */
.seg a.seg-admin{color:var(--red)}
.seg a.seg-admin.active{background:var(--red);border-color:var(--red);color:#fff}
.karte-rot > .card-h{background:color-mix(in srgb,var(--red) 55%,var(--navy))}
/* Am Rechner nebeneinander: links die Angaben, rechts der Kalender. Dadurch passt
   das Fenster auf den Schirm und niemand muss scrollen. Ist kein Kalender im Spiel,
   bleibt es einspaltig, sonst staende rechts eine leere Haelfte. */
.gs-spalten{display:block}
@media (min-width:820px){
  .dlg-breit{max-width:900px}
  .dlg-breit .gs-spalten{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;align-items:start}
}
@media (prefers-color-scheme:dark){.dlg-inner input[type=date]{color-scheme:dark}}
.dlg-inner .frow label{display:block;width:auto;margin-bottom:6px;color:var(--muted);font-weight:600;font-size:var(--fs-klein)}
/* Auswahl mit Erklärung darunter: die Beschriftung darf umbrechen. */
/* Eine Gruppe von Wahlmoeglichkeiten fuellt die Zeile und stapelt ihre Punkte
   untereinander. Ohne das stehen die Punkte nebeneinander und teilen sich den
   Platz neben der Beschriftung, die Erklaerungen brechen dann nach jedem Wort um. */
.wahl{flex:1;min-width:0;display:flex;flex-direction:column;align-items:stretch}
.wahl .chk{align-items:flex-start;display:flex;width:100%}
.wahl .chk > span{min-width:0}
.wahl .chk input{margin-top:3px;flex:none}
.zugang{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.zugang-label{font-size:var(--fs-mark);font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);margin-bottom:6px}

/* Auswertung der Umfragen: Kacheln, Balken je Antwortmoeglichkeit, Freitexte. */
.ausw-frage{padding:18px 0;border-top:1px solid var(--border-2)}
.ausw-frage:first-child{border-top:0}
.ausw-frage.ist-alt{opacity:.72}
.ausw-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:12px}
/* Die Frage ist die Überschrift ihres Blocks und war mit 14 Pixeln zu klein dafür.
   20 Pixel sind eine Stufe der Schriftgrößen-Leiter und reichen dafür aus. */
.ausw-text{margin:0 0 9px;font-size:var(--fs-zahl);font-weight:600;line-height:1.28;
  letter-spacing:-.005em;color:var(--navy)}
.ausw-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-klein)}
.ausw-zeit{background:color-mix(in srgb,var(--navy) 8%,var(--panel-2));border-radius:999px;padding:3px 10px;
  font-weight:600;color:var(--navy)}
/* Der Durchschnitt ist die Zahl, die man zuerst sucht: volle Flaeche in Petrol,
   Zahl in Weiss. Die Balken daneben tragen dafuer das Gold. */
.ausw-schnitt{flex:none;text-align:center;background:var(--rust);border:1px solid var(--rust);
  border-radius:10px;padding:9px 18px;min-width:98px;box-shadow:var(--shadow)}
.ausw-schnitt b{display:block;font-size:var(--fs-zahl-xl);font-weight:700;color:#fff;font-variant-numeric:tabular-nums;line-height:1.15}
.ausw-schnitt span{display:block;font-size:var(--fs-mark);color:rgba(255,255,255,.78);font-weight:600}
.ausw-balken{display:flex;flex-direction:column;gap:7px}
.ausw-zeile{display:grid;grid-template-columns:minmax(120px,240px) 1fr 108px;align-items:center;gap:12px}
.ausw-label{font-size:var(--fs-text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ausw-label .muted{font-weight:500}
.ausw-bahn{height:12px;border-radius:999px;background:color-mix(in srgb,var(--navy) 7%,var(--panel-2));overflow:hidden}
.ausw-fuell{display:block;height:100%;border-radius:999px;background:var(--gold)}
.ausw-zahl{font-size:var(--fs-klein);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.ausw-zahl .muted{font-weight:500;font-size:var(--fs-klein)}
.ausw-texte{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow:auto;padding-right:4px}
.ausw-texte blockquote{margin:0;background:var(--panel-2);border:1px solid var(--border-2);border-radius:10px;
  padding:11px 14px;font-size:var(--fs-text);line-height:1.55;color:var(--text)}
@media (max-width:1100px){
  .ausw-zeile{grid-template-columns:minmax(90px,150px) 1fr 92px}
}

/* Uebersicht der Umfragen: eine Karte je Umfrage, die ganze Karte ist der Weg hinein. */
.uf-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1300px}
.uf-karte{display:flex;flex-direction:column;gap:14px;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;text-decoration:none;color:inherit;
  transition:box-shadow .18s var(--ease),transform .18s var(--ease),border-color .18s var(--ease)}
.uf-karte:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:color-mix(in srgb,var(--rust) 40%,var(--border))}
.uf-karte.ist-zu{opacity:.74}
.uf-kopf h2{margin:0 0 8px;font-size:var(--fs-gross);font-weight:600;line-height:1.3}
.uf-marken{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-klein)}
.uf-zahlen{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto}
.uf-boegen b{display:block;font-size:var(--fs-zahl-xl);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.uf-boegen span{display:block;font-size:var(--fs-klein);color:var(--muted);font-weight:600}
.ausw-schnitt.leer{background:var(--panel-2);border-color:var(--border)}
.ausw-schnitt.leer b{color:var(--faint)}
.ausw-schnitt.leer span{color:var(--muted)}
.uf-fuss{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--border-2);
  padding-top:11px;font-size:var(--fs-klein);color:var(--muted)}
.ausw-zurueck{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;
  font-size:var(--fs-klein);font-weight:600;margin-bottom:14px}
.ausw-zurueck:hover{color:var(--rust)}
.ausw-zurueck svg{width:15px;height:15px}
@media (max-width:1200px){ .uf-karten{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ .uf-karten{grid-template-columns:1fr} }

/* ===================================================================
   Telefon: aus jeder Tabellenzeile wird eine Karte.
   Die Spaltenbezeichnung steht vor dem Wert, der Name oben, die
   Knoepfe als Reihe darunter. Gesetzt wird das von tabellenFuersTelefon().
   =================================================================== */
/* Huelle um den Zellinhalt, gesetzt von tabellenFuersTelefon(). Am Rechner loest sie
   sich auf, am Telefon haelt sie den Wert als einen Block zusammen. */
.tbl td > .tz{display:contents}

@media (max-width:820px){
  .card-h{flex-wrap:wrap;row-gap:2px;min-width:0;overflow-wrap:anywhere}
  .card-h-sub{margin-left:0;flex-basis:100%;white-space:normal}
  /* Zuklappbare Karten: der Pfeil steht fest rechts auf halber Hoehe. Im umbrechenden Kopf
     rutschte er sonst in eine eigene dritte Zeile unter die Naeherbestimmung. */
  details.card > summary.card-h{position:relative;padding-right:46px}
  details.card > summary.card-h::after{position:absolute;right:20px;top:50%;margin:-7px 0 0}
  details.card > summary.card-h .card-h-sub{text-align:left}
  .tbl thead{display:none}
  .tbl td > .tz{display:block;min-width:0}
  .tbl,.tbl tbody,.tbl tfoot,.tbl tr,.tbl td{display:block;width:auto}
  .tbl tr{padding:14px 16px;border-bottom:1px solid var(--border-2)}
  .tbl tr:last-child{border-bottom:0}
  .tbl tbody tr:nth-child(even){background:var(--panel-2)}
  .tbl td{padding:4px 0;border:0;display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    text-align:right;white-space:normal;overflow-wrap:anywhere}
  .tbl td::before{content:attr(data-sp);color:var(--muted);font-size:var(--fs-klein);font-weight:600;
    text-align:left;flex:none;max-width:45%}
  .tbl td[data-leer]{display:none}

  /* Die erste Zelle traegt den Namen: gross, ueber die ganze Breite, ohne Bezeichnung. */
  .tbl tbody tr > td:first-child,.tbl tfoot tr > td:first-child{display:block;text-align:left;
    font-size:var(--fs-gross);font-weight:700;padding:0 0 8px;line-height:1.3}
  .tbl tbody tr > td:first-child::before,.tbl tfoot tr > td:first-child::before{content:none}
  .tbl tbody tr > td:first-child b{font-weight:700}

  /* Knoepfe stehen unten in einer Reihe und sind mit dem Finger zu treffen. */
  .tbl td[data-knopfe]{display:flex;justify-content:flex-start;gap:10px;padding-top:12px;margin-top:6px;
    border-top:1px solid var(--border-2)}
  .tbl td[data-knopfe]::before{content:none}
  .tbl td[data-knopfe] .uacts{display:flex;gap:10px;margin-left:0;opacity:1;visibility:visible}
  .tbl td[data-knopfe] .xbtn{width:42px;height:42px}
  .tbl td[data-knopfe] .xbtn svg{width:19px;height:19px}
  .tbl td[data-knopfe] .btn{padding:10px 16px}

  /* Haekchen-Spalten (Rechte im Team) bleiben eine Zeile mit Kaestchen rechts. */
  .tbl td input[type=checkbox]{width:22px;height:22px}
}

/* ===================================================================
   Telefon: Dialoge sitzen unten am Rand statt in der Mitte.
   Der Daumen erreicht die Knoepfe, lange Dialoge scrollen in sich,
   statt oben und unten aus dem Bild zu laufen. Die Knopfreihe bleibt
   dabei immer sichtbar.
   =================================================================== */
@media (max-width:820px){
  .dlg{width:100%;max-width:none;margin:auto 0 0;max-height:94dvh}
  /* Unten schliesst die Knopfreihe ab, sie bringt ihren eigenen Abstand mit. */
  .dlg-inner{border-radius:14px 14px 0 0;border-bottom:0;max-height:94dvh;overflow-y:auto;
    padding:22px 18px 0}
  .dlg-h{font-size:var(--fs-gross)}
  .dlg-akt{position:sticky;bottom:0;background:var(--panel);
    margin:18px -18px 0;padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--border-2);gap:10px}
  .dlg-akt .btn{flex:1;min-height:46px;justify-content:center}
  /* Felder in Dialogen: gross genug zum Tippen, und iOS zoomt bei 16px nicht hinein. */
  .dlg-inner input[type=text],.dlg-inner input[type=date],.dlg-inner input[type=number],
  .dlg-inner input[type=email],.dlg-inner input[type=tel],.dlg-inner input[type=url],
  .dlg-inner select,.dlg-inner textarea{font-size:var(--fs-gross);padding:12px 13px}
  .dlg-inner select,.dlg-inner input[type=date],.dlg-inner input[type=text],.dlg-inner input[type=number]{height:calc(1.5em + 26px)}
  .dlg-inner select{padding-right:38px}
  .dlg-tbl th,.dlg-tbl td{padding:6px 8px}
}

/* Auswahlfeld statt Segmentleiste, gesetzt von segmenteFuersTelefon(). */
.seg-wahl{display:none}
@media (max-width:820px){
  .seg{display:flex;width:100%;max-width:100%;align-items:center}
  /* Nur dort, wo wirklich ein Auswahlfeld gebaut wurde, treten die Reiter zurueck.
     Kurze Leisten mit zwei Reitern bleiben, wie sie sind. */
  .seg:has(.seg-wahl) a{display:none}
  .seg-wahl{display:block;flex:1;min-width:0;font:inherit;font-size:var(--fs-gross);font-weight:600;
    border:0;background:transparent;color:var(--text);padding:9px 8px;appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
    background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;
    background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px}
  .seg-wahl:focus{outline:none}
}

@media (max-width:820px){
  /* Auswertung am Telefon: Beschriftung und Zahl in einer Zeile, der Balken darunter
     ueber die volle Breite. Nebeneinander bliebe fuer den Balken kaum Platz. */
  .ausw-zeile{grid-template-columns:1fr auto;grid-template-areas:"label zahl" "bahn bahn";row-gap:5px;column-gap:10px}
  .ausw-label{grid-area:label;white-space:normal}
  .ausw-zahl{grid-area:zahl}
  .ausw-bahn{grid-area:bahn;height:10px}
  .ausw-kopf{flex-direction:column;align-items:flex-start;gap:12px}
  .ausw-schnitt{align-self:stretch;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 16px}
  .ausw-schnitt b{font-size:var(--fs-zahl)}
  .uf-zahlen{flex-wrap:wrap}
}

/* Reihe von Haekchen (etwa die Bereiche beim Einladen). Am Rechner nebeneinander,
   am Telefon untereinander: vier Bereiche nebeneinander laufen dort ineinander. */
.chk-liste{display:flex;flex-wrap:wrap;gap:10px 20px}
/* Zwischenueberschrift in der Haekchenliste: die Administration ist die einzige
   Gruppe mit zwei Stufen, ohne Ueberschrift staenden Webseite und Stammdaten
   ohne Bezug neben den grossen Bereichen. */
/* ------------------------------------------------------------------
   Zwei Karten nebeneinander
   Eine Tabelle mit zwei Spalten braucht keine 1200 Pixel. Steht sie allein
   ueber die ganze Breite, entsteht rechts eine Flaeche, die nichts sagt.
   Das Raster stellt die schmale Karte neben die breite. Wird das Fenster
   schmaler, rutschen sie untereinander.
   ------------------------------------------------------------------ */
.karten-raster{display:grid;gap:28px;align-items:stretch;max-width:1300px;margin-top:28px}
/* Beide Karten einer Reihe sind gleich tief. Die kuerzere waechst mit, damit die
   Reihe unten auf einer Linie endet. */
.karten-raster > .card{margin-top:0;max-width:none;min-width:0;
  display:flex;flex-direction:column}
/* Eine lange Liste laeuft in ihrem eigenen Feld, statt die ganze Reihe in die
   Hoehe zu ziehen. Die Kopfzeile bleibt dabei stehen. */
.kr-scroll{overflow-y:auto;min-height:0;flex:1}
.kr-scroll .tbl thead th{position:sticky;top:0;z-index:1;background:var(--panel-2)}
/* schmal neben breit, etwa ein Drittel zu zwei Dritteln */
.kr-drittel{grid-template-columns:minmax(0,440px) minmax(0,1fr)}
/* breit neben schmal, etwa zwei Drittel zu einem Drittel */
.kr-zweidrittel{grid-template-columns:minmax(0,1fr) minmax(0,400px)}
/* etwas unter der Haelfte links, der Rest rechts */
.kr-halb{grid-template-columns:minmax(0,530px) minmax(0,1fr)}
/* zwei gleich grosse Haelften */
.kr-haelften{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1180px){
  .kr-drittel,.kr-zweidrittel,.kr-halb,.kr-haelften{grid-template-columns:1fr}
  /* Untereinander braucht keine Karte mehr ihr eigenes Scrollfeld. Ein Kasten,
     der im scrollenden Fenster noch einmal scrollt, ist am Telefon eine Falle.
     Das Ausrufezeichen ist noetig, weil die Hoehe in der Ansicht gesetzt wird. */
  .kr-scroll{max-height:none !important;overflow:visible}
}


/* Zwei Felder in einer Zeile, etwa Geburtstag und Geburtsort. Die Beschriftung
   gilt fuer beide, deshalb stehen sie in einer gemeinsamen Huelle. */
.feld-paar{display:flex;gap:10px;flex:1;min-width:0}
.feld-paar > input{flex:1;min-width:0}
.feld-paar-plz > input:first-child{flex:0 0 110px}
@media (max-width:640px){
  .feld-paar{flex-direction:column}
  .feld-paar-plz > input:first-child{flex:1}
}

/* Zwei Drittel der Breite. Fuer Karten, die keine Tabelle tragen, sondern ein
   Formular oder ein paar Saetze: ueber die ganze Breite gezogen stuende darin
   mehr Luft als Inhalt. */
.karte-zweidrittel{max-width:800px}

/* Zweite Zeile in einer Tabellenzelle: gehoert zur ersten, steht aber zurueck. */
.zeile-sub{font-size:var(--fs-klein)}

/* Eine Karte, in der nur "hier steht nichts an" steht, braucht keine 1300 Pixel.
   So breit wie eine Notiz, dann liest sie sich auch wie eine. */
.karte-leer{max-width:560px}

/* Ein Zustandschip bleibt in einer Zeile. "ab 01.10.2026" brach sonst mitten
   im Datum um. */
.tbadge{white-space:nowrap}

/* Zustand und Knopf zu derselben Sache stehen nebeneinander in einer Zelle. */
.tz-text{white-space:nowrap}
.tz-text .xbtn{margin-left:8px;vertical-align:middle}

/* Unterzeile in einem Tabellenkopf: sagt in drei Woertern, was die Spalte bewirkt. */
.th-sub{display:block;margin-top:3px;font-weight:400;font-size:var(--fs-mark);
  letter-spacing:.02em;text-transform:none;color:var(--faint)}

/* Die Karten auf dem Kalender-Reiter sind so breit wie auf allen anderen Reitern,
   ihr Inhalt bleibt in Lesebreite. Sonst liefe ein Satz ueber 1300 Pixel. */
.kal-form > *{max-width:640px}
.kal-form .linkbox{max-width:640px}

/* Rueckmeldung eines Feldes, das beim Verlassen von selbst speichert. */
.feld-stand{font-size:var(--fs-klein);font-weight:600;white-space:nowrap}
.feld-stand.gut{color:var(--green)}
.feld-stand.schlecht{color:var(--red)}

/* ------------------------------------------------------------------
   Der Versandzustand neben der Ueberschrift
   Steht der Versand auf Probe oder aus, sieht die Seite aus wie im Betrieb:
   Haken sind gesetzt, der Ausgang fuellt sich, die Eintraege sagen "verschickt".
   Dieses Schild macht den Unterschied sichtbar, ohne dass jemand den Kasten
   ganz unten aufklappen muss. Es pulsiert langsam, damit es auffaellt und
   trotzdem beim Lesen der Seite nicht stoert.
   ------------------------------------------------------------------ */
.vstand{display:inline-flex;align-items:center;gap:7px;vertical-align:middle;
  margin-left:14px;padding:5px 11px 5px 9px;border-radius:999px;
  font-family:var(--font);font-size:var(--fs-mark);font-weight:700;letter-spacing:.1em;
  text-decoration:none;white-space:nowrap;border:1px solid transparent}
.vstand-probe{background:var(--accent-weak);border-color:var(--gold);color:#6b4f00}
.vstand-aus{background:var(--panel-2);border-color:var(--border-2);color:var(--muted)}
.vstand-punkt{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.vstand-probe .vstand-punkt{animation:vstand-blink 1.4s steps(1,end) infinite}
.vstand:hover{filter:brightness(.97)}
.vstand:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
@keyframes vstand-blink{0%,55%{opacity:1}56%,100%{opacity:.15}}
@media (prefers-reduced-motion:reduce){
  .vstand-probe .vstand-punkt{animation:none}
}
@media (max-width:820px){
  .vstand{margin-left:0;margin-top:6px;display:inline-flex}
}

/* ------------------------------------------------------------------
   Zugang: die Rechtetabelle und das Einladungsformular
   Acht Rechte in drei Gruppen. Ohne Trennung sieht niemand, wo die Bereiche
   aufhoeren und die Administration anfaengt, deshalb bekommt jede Gruppe eine
   senkrechte Linie an ihrer linken Kante.
   ------------------------------------------------------------------ */
/* Feste Spaltenbreiten: sonst verteilt der Browser nach Inhalt und quetscht
   "Umfragen" auf 70 Pixel, waehrend die Namensspalte Platz verschenkt. */
.rechte-tbl{table-layout:fixed;width:100%}
.rechte-tbl th{white-space:normal;overflow-wrap:break-word;hyphens:auto}
.rechte-tbl th:first-child,.rechte-tbl td:first-child{width:150px;overflow-wrap:anywhere}
/* Die Adresse steht eine Spur kleiner unter dem Namen. */
.rechte-tbl .rechte-mail{font-size:var(--fs-klein)}
.rechte-tbl .sp-mitte{width:72px;text-align:center;white-space:nowrap}
/* Die Knopfspalte fasst zwei Knoepfe. Ohne feste Breite bekam sie nur den Rest und
   schob den Knopf Loeschen ueber den Kartenrand. */
.rechte-tbl thead tr:first-child th:last-child,.rechte-tbl tbody td:last-child{width:96px}
/* Der Gruppenkopf: gemeinsame Ueberschrift ueber ihren Haekchenspalten. */
/* Der Gruppenname bleibt einzeilig. Bei 83 Pixeln Spaltenbreite stand sonst
   "Ver-wal-tung" in drei Zeilen uebereinander. */
.rechte-tbl thead tr:first-child .gr-kopf{text-align:center;padding-bottom:7px;
  border-bottom:1px solid var(--border-2);white-space:nowrap}
/* Ueber einer einzigen Spalte ist der Gruppenname breiter als die Spalte. Er beginnt
   links und laeuft in die Knopfspalte daneben, deren Kopf leer ist. */
.rechte-tbl thead tr:first-child .gr-kopf[colspan="1"]{text-align:left;overflow:visible;position:relative;z-index:1}
.rechte-tbl .gr-recht{width:58px;text-align:center;padding-left:2px;padding-right:2px}
.rechte-tbl thead tr:last-child .gr-recht{font-weight:600;font-size:12px;letter-spacing:0;
  text-transform:none;line-height:1.3;padding-top:5px;vertical-align:bottom}
/* Die Linie zwischen zwei Gruppen. Sie steht an der ersten Spalte jeder Gruppe und
   laeuft durch Kopf und Koerper der Tabelle. */
.rechte-tbl .gr-start{border-left:1px solid var(--border-2)}
.tbl-fuss{margin:0;padding:12px 16px;border-top:1px solid var(--border-2);
  color:var(--muted);font-size:var(--fs-klein);line-height:1.55}
.tbl-fuss p{margin:0}
.tbl-fuss p + p{margin-top:4px}
.tbl-fuss b{color:var(--text);font-weight:600}

/* Am Telefon wird aus der Tabelle eine Karte je Person: Beschriftung links,
   Haekchen rechts. Feste Spaltenbreiten haetten dort nichts zu suchen, sie
   pressten die Beschriftung in eine 92 Pixel schmale Spalte. */
@media (max-width:820px){
  .rechte-tbl{table-layout:auto}
  .rechte-tbl th:first-child,.rechte-tbl td:first-child,
  .rechte-tbl .sp-mitte,.rechte-tbl .gr-recht,.rechte-tbl thead tr:first-child th:last-child,.rechte-tbl tbody td:last-child{width:auto}
  .rechte-tbl .gr-start{border-left:0}
  .rechte-tbl .gr-recht{padding-left:0;padding-right:0;text-align:left}
}

/* Das Einladungsformular. Die Felder bleiben lesbar schmal, obwohl die Karte so
   breit ist wie die Tabelle darueber. */
.inv-form .frow input{max-width:420px}
.inv-form .frow-oben{align-items:flex-start;margin-top:20px}
.inv-form .frow-oben > label{padding-top:2px}
.inv-rechte{display:flex;flex-direction:column;gap:16px;min-width:0}
.inv-gruppe{padding-left:0}
/* Knopf, Meldung und Einladungs-Link stehen auf der Flucht der Eingabefelder:
   80 Pixel Beschriftungsspalte plus 12 Pixel Abstand. */
.inv-fuss{margin-left:92px;margin-top:22px;padding-top:20px;
  border-top:1px solid var(--border-2)}
.inv-fuss .lead{margin:18px 0 8px;max-width:620px}
.inv-fuss .linkbox{max-width:620px}
/* Steht ein Link da, ist die Einladung angelegt: Formular und Erzeugen-Knopf treten zurueck,
   unten bleibt nur Schliessen. */
#inv-fertig{margin-top:18px}
@media (max-width:820px){
  .inv-fuss{margin-left:0}
  .inv-form .frow input{max-width:none}
}
/* Ueberschrift einer Haekchengruppe, mit dem Hinweis als zweiter Zeile. */
.chk-kopf{display:block;margin-bottom:8px;font-size:var(--fs-mark);font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.chk-kopf small{display:block;margin-top:3px;font-size:var(--fs-klein);font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--muted)}
/* Die Haekchenzeile ist selbst ein <label> und erbt sonst die 80 Pixel aus
   .frow label. Bei "Seminarakademie" schob sich der Text dann unter den Nachbarn. */
.chk-liste .chk-zeile{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  width:auto;white-space:nowrap;font-size:inherit;font-weight:500;color:var(--text)}
.chk-liste .chk-zeile input{width:18px;height:18px;flex:none}
@media (max-width:820px){
  .chk-liste{flex-direction:column;gap:14px;align-items:flex-start}
  .chk-zeile{width:100%;min-height:32px}
  .chk-zeile input{width:22px;height:22px}
  /* Formularzeilen: Beschriftung ueber das Feld, beides ueber die volle Breite. */
  .form .frow{display:block;margin-bottom:16px}
  /* Nur die Beschriftung der Zeile selbst, nicht die Haekchen-Beschriftungen darin. */
  .form .frow > label{display:block;width:auto;margin-bottom:6px}
  .form .frow > input,.form .frow > select,.form .frow > textarea{width:100%}
  .form .frow:has(textarea) label{padding-top:0}
}

/* Die Zusammenfassung der Freitextantworten. Sie steht ueber den Antworten und traegt
   mehr Gewicht als sie: die Antworten sind der Beleg, sie ist das Ergebnis. */
.dicht{position:relative;padding:2px 0;margin-bottom:18px}
.dicht-kopf{display:flex;align-items:center;gap:11px}
.dicht-ico{width:30px;height:30px;flex:none;border-radius:50%;background:var(--rust);color:#fff;
  display:grid;place-items:center}
.dicht-ico svg{width:17px;height:17px}
.dicht-kopf b{font-size:var(--fs-text);letter-spacing:.01em}
.dicht-kopf .btn{margin-left:auto;padding:8px 15px;font-size:var(--fs-klein)}
.dicht-text{margin-top:13px;font-size:var(--fs-gross);line-height:1.65;color:var(--text)}
.dicht-leer{margin:12px 0 0;font-size:var(--fs-klein);color:var(--faint)}
.dicht-fuss{margin:12px 0 0;font-size:var(--fs-mark);color:var(--faint);
  text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.dicht-alt{margin:10px 0 0;font-size:var(--fs-klein);color:var(--amber);font-weight:600}
.dicht-fehler{margin:12px 0 0;font-size:var(--fs-klein);color:var(--red);font-weight:600}
.dicht.laeuft{opacity:.65}
.dicht.laeuft .dicht-ico{animation:dicht-puls 1.1s var(--ease) infinite}
@keyframes dicht-puls{0%,100%{opacity:1}50%{opacity:.45}}
/* Ohne Zusammenfassung tritt der Kasten zurueck, er ist dann nur ein Angebot. */
.dicht.ist-leer .dicht-ico{background:color-mix(in srgb,var(--rust) 14%,var(--panel));color:var(--rust)}

/* Ueberschrift ueber den einzelnen Antworten, damit die Rangfolge klar ist. */
.ausw-wortlaut{margin:0 0 8px;font-size:var(--fs-mark);color:var(--faint);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em}

@media (max-width:820px){
  .dicht-kopf{flex-wrap:wrap}
  .dicht-kopf .btn{margin-left:0;width:100%;justify-content:center;min-height:42px;order:3}
}
}

/* Rezensionen: eine Karte je Stueck, Bild links, Text rechts. */
.rez-liste{display:flex;flex-direction:column;gap:16px;max-width:1300px}
.rez{display:flex;gap:18px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px}
.rez.ist-benutzt{opacity:.72}
.rez-bild{position:relative;flex:none;width:108px;height:108px;border-radius:10px;overflow:hidden;
  background:var(--panel-2);display:block;text-decoration:none}
.rez-bild img{width:100%;height:100%;object-fit:cover;display:block}
.rez-laden{position:absolute;left:0;right:0;bottom:0;padding:5px 0;text-align:center;
  background:rgba(23,32,57,.72);color:#fff;font-size:var(--fs-mark);font-weight:700;
  opacity:0;transition:opacity .15s var(--ease)}
.rez-bild:hover .rez-laden{opacity:1}
.rez-ohne{display:grid;place-items:center;color:var(--navy);font-size:var(--fs-zahl-xl);font-weight:700;
  background:color-mix(in srgb,var(--navy) 8%,var(--panel-2))}
.rez-text{min-width:0;flex:1;display:flex;flex-direction:column}
.rez-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.rez-kopf b{font-size:var(--fs-gross)}
.rez-kurs{background:color-mix(in srgb,var(--rust) 12%,var(--panel-2));color:var(--rust);
  border-radius:999px;padding:3px 11px;font-size:var(--fs-klein);font-weight:700}
.rez blockquote{margin:0;font-size:var(--fs-text);line-height:1.6;color:var(--text)}
.rez-fuss{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:14px;
  font-size:var(--fs-klein);color:var(--muted)}
.rez-akt{margin-left:auto;display:flex;align-items:center;gap:8px}
.rez-akt .btn{padding:7px 13px;font-size:var(--fs-klein)}
@media (max-width:820px){
  .rez{flex-direction:column;gap:14px}
  .rez-bild{width:100%;height:190px}
  .rez-laden{opacity:1}
  .rez-akt{margin-left:0;width:100%}
  .rez-akt .btn{flex:1;justify-content:center;min-height:42px}
}
.uf-rez-schalter{display:flex;align-items:flex-start;gap:10px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--border-2);font-size:var(--fs-text);color:var(--text);font-weight:400}
.uf-rez-schalter input{margin-top:3px;width:18px;height:18px;flex:none}
/* Der Kurs steht einmal an der Umfrage. Im Bogen fragt ihn deshalb niemand mehr ab. */
.uf-rez-kurs{margin-top:12px;padding-left:28px}
.uf-rez-kurs[hidden]{display:none}
.uf-rez-kurs > label{display:block;color:var(--muted);font-weight:600;font-size:var(--fs-klein);margin-bottom:6px}
.uf-rez-kurs > input{width:100%;max-width:340px;background:var(--feld);border:1px solid var(--feld-rand);
  border-radius:10px;padding:11px 13px;color:var(--text);font-size:var(--fs-text);font-family:inherit;
  transition:border-color .15s var(--ease)}
.uf-rez-kurs > input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 14%,transparent)}
.uf-rez-kurs > p{margin:7px 0 0;color:var(--muted);font-size:var(--fs-klein);max-width:520px;line-height:1.5}
/* Einstellungszeilen (Baustein fuer Einstellungen): in einer normalen Karte mit blauem Kopf (.card
   .ez-karte) Zeilen bis an den Rand, Name mit einem Satz Erklaerung links, Wert, Schalter oder Knopf
   rechts. Riskantes steht in der letzten Karte. In schmalen Spalten rutscht der Wert unter den Namen,
   auf Touch-Geraeten sind Knoepfe mindestens 44 Pixel hoch. */
.ez-karte .card-h + .ez-zeile{border-top:0}
.ez-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;align-items:center;padding:14px 18px;border-top:1px solid var(--border-2)}
.ez-zeile:first-child{border-top:0}
.ez-zeile[hidden]{display:none}
.ez-name{font-weight:700;color:var(--text);line-height:1.35}
.ez-name label{cursor:pointer}
.ez-hilfe{margin-top:3px;font-size:var(--fs-klein);color:var(--muted);line-height:1.5;max-width:560px}
.ez-wert{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;min-width:0}
.ez-wert .pw{min-width:0}
.ez-wert .xbtn{flex:none}
.ez-feld{width:260px;max-width:100%;height:calc(1.5em + 22px);background-color:var(--feld);border:1px solid var(--feld-rand);border-radius:10px;
  padding:10px 13px;color:var(--text);font-size:var(--fs-text);font-family:inherit;line-height:1.5}
select.ez-feld{-webkit-appearance:none;appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.ez-feld:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 14%,transparent)}
/* input davor: in einem Formular (.form input) blieben sonst Rahmen, Innenabstand und Feldfarbe haengen. */
input.ez-schalter{-webkit-appearance:none;appearance:none;width:46px;height:28px;min-width:0;padding:0;border:0;border-radius:14px;background:var(--border);position:relative;
  cursor:pointer;margin:0;flex:none;transition:background .15s var(--ease)}
input.ez-schalter:focus{border:0;box-shadow:none}
.ez-schalter::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s var(--ease)}
input.ez-schalter:checked{background:var(--green)}
.ez-schalter:checked::after{transform:translateX(18px)}
.ez-schalter:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.ez-stand{font-size:var(--fs-mark);font-weight:700;padding:4px 12px;border-radius:999px;background:var(--panel-2);color:var(--muted);border:1px solid var(--border)}
.ez-stand-offen{background:color-mix(in srgb,var(--green) 12%,var(--panel));color:var(--green);border-color:color-mix(in srgb,var(--green) 35%,transparent)}
.ez-stand-zu{background:color-mix(in srgb,var(--red) 10%,var(--panel));color:var(--red);border-color:color-mix(in srgb,var(--red) 35%,transparent)}
.ez-blass > div:first-child{opacity:.55}
.ez-warn{color:var(--amber);font-weight:600}
.ez-zeile.ez-text{grid-template-columns:minmax(0,1fr)}
.ez-zeile.ez-text .ez-hilfe{margin-top:0;max-width:none}
.ez-zeile.ez-breit{grid-template-columns:minmax(0,1fr)}
.ez-zeile.ez-breit .ez-wert{justify-content:flex-start}
.ez-schalter-mit{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-klein);font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.ez-stand-entwurf{background:var(--accent-weak);color:var(--accent-ink);border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.ez-vor{font-size:var(--fs-klein);font-weight:600;color:var(--muted);cursor:pointer}
.ez-paar{display:inline-flex;align-items:center;gap:8px}
.ez-wert:has(> .ez-paar){column-gap:20px}
.ez-feld.ez-kurz{width:84px;text-align:center}
.ez-feld.ez-mittel{width:170px}
.ez-feld.ez-lang{width:360px}
.ez-gruppe{padding:16px 18px 2px;font-size:var(--fs-mark);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--border-2)}
.ez-karte .card-h + .ez-gruppe,.ez-gruppe + .ez-zeile{border-top:0}
b.muted[data-level-name]{font-weight:400}
.ez-schalter:disabled{opacity:.5;cursor:not-allowed}
.ez-schalter-mit:has(.ez-schalter:disabled){cursor:not-allowed}
/* Zugang: je Person eine Kopfzeile und darunter die Rechte in drei Gruppen. */
.ez-zeile .kal-hilfe{margin:0;border:0;padding:0}
.kal-linkbox{width:100%}
.aus-ergebnis{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-klein)}
/* Personenseite: die Formularzeilen der Karten Stammdaten und Ausbildung als Einstellungszeilen,
   Name links, Feld rechts, jede Zeile bis an den Rand. Die Pruefungen darunter bleiben Spalten. */
.ez-form{container-type:inline-size}
.ez-form > .card-b{padding:0}
.ez-form > .card-b > *{margin:0;padding:12px 18px;border-top:1px solid var(--border-2)}
.ez-form > .card-b > :first-child{border-top:0}
.ez-form > .card-b > .frow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:8px 24px;align-items:center}
.ez-form > .card-b > [hidden]{display:none}
.ez-form > .card-b > .frow > label,.ez-form > .card-b > .frow > .frow-label{width:auto;margin:0;font-size:var(--fs-text);font-weight:700;color:var(--text);line-height:1.35}
.ez-form > .card-b > .frow > input,.ez-form > .card-b > .frow > select{width:100%}
.ez-form > .card-b > .frow-oben{align-items:start}
.ez-form > .card-b > .frow-oben > label,.ez-form > .card-b > .frow-oben > .frow-label{padding-top:10px}
.ez-form > .card-b > .akte-abschnitt{padding:16px 18px 6px;border-bottom:0}
.ez-form > .card-b > .akte-abschnitt + *{border-top:0;padding-top:4px}
.ez-form > .card-b > .ausb-info{padding-top:14px;padding-bottom:14px}
.akte-schalter{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;min-height:44px}
.ez-form > .card-b > .frow > .frow-kopf > label{display:block;width:auto;margin:0;font-size:var(--fs-text);font-weight:700;color:var(--text);line-height:1.35}
.frow-kopf .ez-hilfe{margin-top:3px}
.ez-hilfe a{color:var(--rust);font-weight:600}
.ausb-wert{font-size:var(--fs-text);color:var(--text)}
.ausb-wert b{font-weight:700}
.pv-summe{padding:16px 18px 10px}
.pv-summe-zahl{font-size:24px;line-height:1.2;color:var(--text)}
.pv-summe-zahl b{font-weight:800;font-variant-numeric:tabular-nums}
.pv-summe-zahl span{font-size:var(--fs-text);color:var(--muted)}
.pv-herleitung{margin-top:8px;max-width:560px;font-size:var(--fs-klein);color:var(--muted)}
.pv-herleitung div{display:flex;justify-content:space-between;gap:16px;padding:2px 0}
.pv-herleitung div span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.pv-tafel{margin:4px 18px 8px;border-top:1px solid var(--border)}
.pv-zeile{display:grid;grid-template-columns:120px minmax(0,1fr) auto 70px;gap:14px;align-items:start;padding:11px 0;border-bottom:1px solid var(--border-2)}
.pv-name{color:var(--muted);font-weight:600;font-size:var(--fs-klein);padding-top:3px}
.pv-text{min-width:0;line-height:1.45}
.pv-unter{font-size:var(--fs-klein);color:var(--muted);margin-top:3px}
.pv-betrag{white-space:nowrap;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;padding-top:1px}
.pv-betrag.blass{font-weight:400;color:var(--muted)}
.pv-zeile .uacts{gap:6px;justify-content:flex-end}
.pv-zeile .xbtn{width:30px;height:30px}
.pv-mehr{display:inline}
.pv-mehr summary{display:inline;cursor:pointer;color:var(--rust);font-weight:600;list-style:none}
.pv-mehr summary::-webkit-details-marker{display:none}
.pv-mehr[open]{display:block;margin-top:4px;color:var(--text)}
@media (max-width:640px){
  .pv-zeile{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
  .pv-name{grid-column:1/-1;padding:0}
  .pv-zeile .uacts{grid-column:1/-1;justify-content:flex-start}
}
.ausb-schilder{display:flex;flex-wrap:wrap;gap:6px}
.ausb-schild{font-size:var(--fs-klein);font-weight:500;padding:3px 11px;border-radius:999px;background:var(--panel-2);border:1px solid var(--border);color:var(--muted);text-decoration:none}
.ausb-schild b{font-weight:700;color:var(--text)}
a.ausb-schild:hover{border-color:color-mix(in srgb,var(--rust) 40%,transparent);color:var(--rust)}
.ausb-schild.jetzt{background:color-mix(in srgb,var(--rust) 10%,var(--panel));border-color:color-mix(in srgb,var(--rust) 35%,transparent);color:var(--rust);font-weight:700}
.ausb-schild.kommt{border-style:dashed}
/* Segmentschalter statt Radioknoepfen: die Knoepfe bleiben fuers Formular, unsichtbar. */
.akte-segment{justify-self:start;display:inline-flex;flex-wrap:nowrap;gap:2px;padding:3px;border-radius:11px;background:var(--panel-2);border:1px solid var(--border)}
.pers-form .frow .akte-segment label{position:relative;display:inline-flex;align-items:center;width:auto;margin:0;padding:7px 16px;border-radius:8px;
  font-size:var(--fs-klein);font-weight:600;color:var(--muted);cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease)}
.form .akte-segment input[type=radio]{position:absolute;inset:0;opacity:0;margin:0;pointer-events:none}
.pers-form .frow .akte-segment label:has(input:checked){background:var(--panel);color:var(--text);box-shadow:0 1px 2px rgba(15,20,35,.12),0 0 0 1px var(--border)}
.pers-form .frow .akte-segment label:has(input:focus-visible){outline:2px solid var(--navy);outline-offset:1px}
.frow label.ez-schalter-mit{width:auto;font-size:var(--fs-text);font-weight:500;color:var(--text)}
@container (max-width:560px){
  .ez-form > .card-b > .frow{grid-template-columns:minmax(0,1fr);gap:6px}
  .ez-form > .card-b > .frow-oben > label,.ez-form > .card-b > .frow-oben > .frow-label{padding-top:0}
}
/* Stundenplan: Kopfzeile und Gruppe als Zeilen, darunter Liste und Ergebnis mit Rand. */
.sp-karte .sp-block > :not(.ez-zeile){margin:0;padding:14px 18px;border-top:1px solid var(--border-2)}
.sp-karte .sp-block > .sp-ergebnis{margin:0;padding:14px 18px 18px}
.sp-karte .sp-bloecke{border-top:1px solid var(--border-2)}
.sp-karte .sp-bloecke .sp-block > :first-child{border-top:0}
.rz-karte .rz-kopf{border-top:1px solid var(--border)}
.rz-karte .card-h + .rz-kopf{border-top:0}
.rz-karte .rz-rechte{border-top:0;padding-top:0;padding-bottom:18px}
.rz-gruppen{display:flex;flex-wrap:wrap;gap:16px 48px}
.rz-gruppe{display:flex;flex-direction:column;gap:10px;min-width:150px}
.rz-titel{font-size:var(--fs-mark);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.rz-schalter{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.rz-schalter .ez-schalter-mit{color:var(--text)}
.inv-rechte .ez-schalter-mit{color:var(--text)}
@container inhalt (max-width:620px){
  .ez-zeile{grid-template-columns:minmax(0,1fr);padding:14px 16px}
  .ez-wert{justify-content:flex-start}
  .ez-feld{width:100%}
  .ez-feld.ez-kurz{width:84px}
  .ez-feld.ez-lang{width:100%}
  .ez-feld.ez-mittel{width:auto;flex:1 1 140px;min-width:0}
  .ez-wert .pw.uf-lang{flex:1 1 0}
}
@media (pointer:coarse){
  .ez-wert .btn{min-height:44px}
  .ez-wert .xbtn{width:44px;height:44px}
}

/* Kurs und Zeitraum einer eingegangenen Rezension nachbessern. */
@media (max-width:820px){
  .uf-rez-kurs{padding-left:0}
  .uf-rez-kurs > input{max-width:none}
}

/* ===================================================================
   Ferien, Sperrzeiten und Feiertage in beiden Kalendern.
   Die Toene sind bewusst blass: im Buchungskalender liegen darueber
   die bunten Balken der Termine, die muessen vorn bleiben.
   =================================================================== */
:root{
  --tag-ferien:color-mix(in srgb,var(--rust) 13%,var(--panel));
  --tag-ferien-rand:color-mix(in srgb,var(--rust) 32%,transparent);
  --tag-ferien-schrift:var(--rust);
  --tag-sperr:color-mix(in srgb,var(--red) 11%,var(--panel));
  --tag-sperr-rand:color-mix(in srgb,var(--red) 28%,transparent);
  --tag-sperr-schrift:color-mix(in srgb,var(--red) 78%,var(--navy));
  --tag-feier:color-mix(in srgb,var(--navy) 9%,var(--panel));
  --tag-feier-rand:color-mix(in srgb,var(--navy) 22%,transparent);
  --tag-feier-schrift:var(--muted);
}
/* Buchungskalender */
.bel-tag{display:flex;flex-direction:column}
.bel-tag.hat-sperr{min-height:calc(62px + max(var(--spuren,0), 2) * 30px)}
.bel-tag.ferien{background:var(--tag-ferien);border-color:var(--tag-ferien-rand)}
.bel-tag.sperrzeit{background:var(--tag-sperr);border-color:var(--tag-sperr-rand)}
.bel-tag.feiertag{background:var(--tag-feier);border-color:var(--tag-feier-rand)}
.bel-tag.fremd.ferien,.bel-tag.fremd.sperrzeit,.bel-tag.fremd.feiertag{opacity:.45}
/* Die Bezeichnung steht unten in der Zelle, unter den Balken, und bleibt blass. */
.bel-sperr{margin-top:auto;font-size:var(--fs-mark);font-weight:600;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.72}
.bel-tag.ferien .bel-sperr{color:var(--tag-ferien-schrift)}
.bel-tag.sperrzeit .bel-sperr{color:var(--tag-sperr-schrift)}
.bel-tag.feiertag .bel-sperr{color:var(--tag-feier-schrift)}
.bel-legende{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:0 16px 16px;
  font-size:var(--fs-klein);color:var(--muted)}
.bel-legende span{display:inline-flex;align-items:center;gap:6px}
.bel-legende i{width:12px;height:12px;border-radius:4px;display:inline-block}
.bel-legende i.ferien{background:var(--tag-ferien);box-shadow:inset 0 0 0 1px var(--tag-ferien-rand)}
.bel-legende i.sperrzeit{background:var(--tag-sperr);box-shadow:inset 0 0 0 1px var(--tag-sperr-rand)}
.bel-legende i.feiertag{background:var(--tag-feier);box-shadow:inset 0 0 0 1px var(--tag-feier-rand)}
.bel-legende-text{color:var(--faint)}
/* Terminkalender */
.kal-tag.ferien:not(.gewaehlt):not(.belegt){background:var(--tag-ferien);border-color:var(--tag-ferien-rand);color:var(--tag-ferien-schrift);font-weight:700}
.kal-tag.sperrzeit:not(.gewaehlt):not(.belegt){background:var(--tag-sperr);border-color:var(--tag-sperr-rand);color:var(--tag-sperr-schrift);font-weight:700}
.kal-legende i.kal-leg.ferien{background:var(--tag-ferien);box-shadow:inset 0 0 0 1px var(--tag-ferien-rand)}
.kal-legende i.kal-leg.sperrzeit{background:var(--tag-sperr);box-shadow:inset 0 0 0 1px var(--tag-sperr-rand)}
.kal-legende i.kal-leg.feiertag{background:var(--tag-feier);box-shadow:inset 0 0 0 1px var(--tag-feier-rand)}
@media (max-width:900px){
  .bel-tag.hat-sperr{min-height:calc(54px + max(var(--spuren,0), 2) * 26px)}
  .bel-sperr{font-size:10px}
}
/* Am Telefon ist eine Zelle keine 50 Pixel breit. Dort steht von "Herbstferien" nur
   noch ein abgeschnittenes Wortende, das niemandem hilft. Die Farbe und die Legende
   darunter tragen die Auskunft allein. */
@media (max-width:760px){
  .bel-sperr{display:none}
  .bel-tag.hat-sperr{min-height:calc(38px + max(var(--spuren,0), 2) * 26px)}
}
/* Sperrzeiten-Liste: als was ein Eintrag in den Kalendern gilt. */
.sz-art{display:inline-block;margin-left:8px;font-size:var(--fs-mark);font-weight:700;
  padding:2px 8px;border-radius:999px;vertical-align:1px}
.sz-art.ferien{background:var(--tag-ferien);color:var(--tag-ferien-schrift);box-shadow:inset 0 0 0 1px var(--tag-ferien-rand)}
.sz-art.sperrzeit{background:var(--tag-sperr);color:var(--tag-sperr-schrift);box-shadow:inset 0 0 0 1px var(--tag-sperr-rand)}

/* ===================================================================
   Uebersicht: was als Naechstes ansteht.
   Jede Zeile traegt die Farbe ihres Angebots, damit sich der Blick an
   derselben Farbe orientiert wie im Belegungskalender.
   =================================================================== */
/* Die Karte "Als Naechstes" folgt der linken Spalte der Kuchen darueber. Vorher
   stand sie fest auf 640 Pixeln und blieb stehen, waehrend alles andere schmaler
   wurde. Unter 820 Pixeln nimmt sie die volle Breite. */
.naechste-karte{width:calc((100% - 18px) / 2);max-width:640px;min-width:360px}
.nae-liste{padding:6px 8px 2px}
.nae{display:flex;align-items:center;gap:14px;padding:12px;border-radius:10px;
  text-decoration:none;color:inherit;position:relative}
.nae + .nae{margin-top:2px}
.nae.klickbar{transition:background .14s var(--ease)}
.nae.klickbar:hover{background:color-mix(in srgb,var(--f) 7%,var(--panel-2))}
/* Der Datumsblock: Tageszahl gross, Monat klein darunter, getoent in der Angebotsfarbe */
.nae-datum{flex:none;width:52px;height:52px;border-radius:10px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;line-height:1.05;margin-left:11px;
  background:color-mix(in srgb,var(--f) 13%,var(--panel-2));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--f) 26%,transparent)}
.nae-datum b{font-size:var(--fs-zahl);font-weight:800;color:var(--f)}
.nae-datum span{font-size:var(--fs-mark);font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:color-mix(in srgb,var(--f) 70%,var(--muted))}
.nae-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.nae-name{font-weight:700;font-size:var(--fs-gross);line-height:1.25;color:var(--navy);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nae-sub{font-size:var(--fs-klein);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nae-rechts{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.nae-wann{font-size:var(--fs-mark);font-weight:700;padding:3px 10px;border-radius:999px;
  background:var(--panel-2);color:var(--muted);box-shadow:inset 0 0 0 1px var(--border-2);white-space:nowrap}
/* Was heute oder morgen ansteht, soll ins Auge fallen. */
.nae-wann.nah{background:var(--accent-weak);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent)}
.nae-zahl{font-size:var(--fs-klein);color:var(--muted);white-space:nowrap}
.nae-zahl b{color:var(--navy);font-weight:800}
.nae-fuss{padding:10px 20px 16px;font-size:var(--fs-klein)}
.nae-fuss a{color:var(--rust);text-decoration:none;font-weight:600}
.nae-fuss a:hover{text-decoration:underline}
@media (max-width:820px){
  /* Schmal genug, dann nimmt die Karte die ganze Breite. */
  .naechste-karte{width:100%;max-width:none;min-width:0}
}
@media (max-width:560px){
  .nae{gap:10px;padding:10px 8px}
  .nae-datum{width:46px;height:46px;border-radius:10px;margin-left:8px}
  .nae-name{font-size:var(--fs-text)}
  .nae-rechts{align-items:flex-end}
  .nae-zahl{font-size:var(--fs-mark)}
}
/* Ein Termin, der nicht im Shop steht, sagt das gleich in der Zeile. */
.nae-hinweis{margin-left:7px;font-size:var(--fs-mark);font-weight:700;color:var(--amber)}
/* Die Knopfreihe unter dem Zugang einer Umfrage. Am Telefon untereinander. */
.uf-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
@media (max-width:640px){
  .uf-knoepfe{display:grid;grid-template-columns:1fr}
  .uf-knoepfe .btn{width:100%}
}
/* Die Zeile über den Kacheln einer Umfrage: links zurück, rechts der PDF-Knopf. */
.ausw-leiste{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;max-width:1300px}
.ausw-leiste .ausw-zurueck{margin-bottom:0}
.ausw-leiste .btn{gap:8px}
@media (max-width:560px){
  .ausw-leiste{display:grid;grid-template-columns:1fr}
  .ausw-leiste .btn{width:100%;justify-content:center}
}

/* ------------------------------------------------------------------
   Rueckmeldungen, Druck und ruhige Bewegung
   ------------------------------------------------------------------ */

/* Gelungenes blendet sich unten rechts ein und geht von selbst wieder weg.
   Vorher stand jede Rueckmeldung ganz oben in der Seite: wer unten arbeitet,
   sieht dort nichts und drueckt ein zweites Mal. */
.toastbox{position:fixed;right:18px;bottom:18px;z-index:120;display:flex;flex-direction:column;
  gap:10px;align-items:flex-end;pointer-events:none;max-width:min(420px,calc(100vw - 36px))}
.toast{pointer-events:auto;cursor:pointer;background:var(--navy);color:#fff;
  padding:12px 16px;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);
  font-size:var(--fs-text);line-height:1.45;max-width:100%;
  animation:toast-auf .22s var(--ease)}
.toast.weg{opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
@keyframes toast-auf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:820px){
  .toastbox{right:12px;left:12px;bottom:12px;align-items:stretch;max-width:none}
  .toast{max-width:none}
}

/* Der Fokusrahmen an der Segmentwahl fehlte ersatzlos. Wer mit der Tabulatortaste
   arbeitet, sah dort nicht, wo er steht. */
.seg-wahl:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Wer Bewegung abgestellt hat, bekommt keine. Gilt fuer das drehende Maskottchen,
   die Einblendungen und jeden Uebergang. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Gedruckt wird der Inhalt, nicht die Bedienung. */
@media print{
  .side,.mobile-topbar,.sidebar-backdrop,.top-actions,.aus-fuss button,.btn,.ibtn,.xbtn,
  .toastbox,.nav,.seg,.bel-nav,.msg,dialog{display:none !important}
  html,body{background:#fff;color:#000}
  .app{display:block;padding:0;max-width:none}
  .main{padding:0}
  .card{break-inside:avoid;box-shadow:none;border:1px solid #bbb;margin-bottom:12px}
  .tbl{font-size:11px}
  .tbl tr,.nae{break-inside:avoid}
  .top{padding:0 0 8px;border-bottom:1px solid #bbb}
  a[href]{text-decoration:none;color:#000}
}

/* Der Zeitraum steht einmal über der Kachelreihe statt in jeder Kachel. Er gilt für alles
   darunter und ist deshalb gut lesbar gross. */
.kz-spanne{font-size:var(--fs-zahl);color:var(--text);font-weight:700;
  margin:0 0 14px;letter-spacing:0;line-height:1.2}
/* Kennzahl-Kacheln (kpi() in bootstrap.php): gleich grosse Quadrate auf jeder Seite.
   Beschriftung und Symbol oben, die Zahl darunter, der Zusatz am unteren Rand. Das
   Raster legt so viele Spalten an, wie Quadrate von mindestens 160 Pixeln passen, auch
   wenn eine Reihe weniger Kacheln hat: dann bleibt rechts Platz, die Quadrate behalten
   ihre Groesse. Die Zahl waechst mit der Kachel (cqi, Anteil an ihrer Breite). */
/* Alle Zeilen gleich hoch (1fr): steht ein Verlauf allein in einer Zeile, bekommt er die
   Hoehe der Quadrate darueber. */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));grid-auto-rows:1fr;gap:14px;margin:0 0 28px;max-width:1300px}
.kpi{aspect-ratio:1 / 1;container-type:inline-size;display:flex;flex-direction:column;min-width:0;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:16px 18px;color:inherit;text-decoration:none}
a.kpi{transition:box-shadow .18s var(--ease),border-color .18s var(--ease)}
a.kpi:hover,a.kpi:focus-visible{box-shadow:var(--shadow-md);border-color:var(--feld-rand)}
.kpi-k{display:flex;align-items:center;gap:8px;font-size:var(--fs-text);font-weight:600;color:var(--muted);line-height:1.3;min-width:0}
.kpi-k > span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-k > svg{width:17px;height:17px;flex:none;color:var(--faint)}
/* Gross, solange die Zahl in die Kachel passt: --z ist ihre Breite in Zeichen (kpi()). */
.kpi-v{font-size:clamp(24px,min(30cqi,calc(94cqi / (var(--z,2) * .6))),42px);font-weight:700;line-height:1.05;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;margin-top:12px;white-space:nowrap;color:var(--text)}
.kpi-v small{font-size:.5em;font-weight:600;letter-spacing:0;color:var(--muted);margin-left:4px}
.kpi-v.achtung{color:var(--amber)}
.kpi-leer{font-size:var(--fs-gross);font-weight:600;letter-spacing:0;color:var(--muted)}
/* Der Vergleich mit dem Zeitraum davor. Gruen und rot nur, wo mehr besser ist. */
.kpi-d{align-self:flex-start;display:inline-flex;align-items:center;gap:3px;font-size:var(--fs-klein);font-weight:700;
  padding:1px 8px 1px 6px;border-radius:999px;background:var(--border-2);color:var(--muted);line-height:1.6;margin-top:8px}
.kpi-d svg{width:11px;height:11px}
.kpi-d.hoch{background:color-mix(in srgb,var(--green) 12%,var(--panel));color:var(--green)}
.kpi-d.runter{background:color-mix(in srgb,var(--red) 10%,var(--panel));color:var(--red)}
.kpi-s{margin-top:auto;padding-top:6px;font-size:var(--fs-klein);color:var(--muted);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-s .gut{color:var(--green);font-weight:600;display:inline-flex;align-items:center;gap:4px}
.kpi-s .gut svg{width:13px;height:13px}
.kpi-s .warn{color:var(--amber);font-weight:600}
/* Eine Aufteilung als Balken, darunter die Zahlen in der Farbe ihres Anteils. */
.kpi-balken{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--border-2);gap:2px;margin-bottom:7px}
.kpi-balken span{display:block;height:100%}
.kpi-leg{display:flex;gap:10px}
.kpi-leg b{font-weight:700}
.kpi-leg.zwei{flex-direction:column;gap:1px}
/* Verlaeufe: zwei Quadrate breit und so hoch wie eines. Links die Zahl, rechts das
   Bild, unten der Zusatz mit der Legende. */
.kpi-breit{grid-column:span 2;aspect-ratio:auto}
/* Eine Reihe mit Verlauf: --k Quadrate, der Verlauf nimmt den Rest der Zeile (zweieinhalb Anteile)
   und ist so hoch wie sie. Die Quadrate werden dafuer etwas kleiner als auf Seiten ohne
   Verlauf. Die Legende bleibt einzeilig, die vollen Namen stehen an den Balken. */
.kpis.mit-verlauf{grid-template-columns:repeat(var(--k,4),minmax(0,1fr)) minmax(0,2.5fr)}
.kpis.mit-verlauf .kpi-breit{grid-column:auto}
.kpis.mit-verlauf .kpi-farben{flex-wrap:nowrap;overflow:hidden}
/* Die Zahl so gross wie in den Quadraten daneben: ein Quadrat sind zwei Fuenftel des Verlaufs. */
.kpi-breit .kpi-v{font-size:clamp(28px,calc(12cqi - 10px),42px)}
/* Wird es enger, rutscht der Verlauf unter die Quadrate und nimmt die ganze Breite. */
@container inhalt (max-width:900px){
  .kpis.mit-verlauf{grid-template-columns:repeat(4,minmax(0,1fr))}
  .kpis.mit-verlauf .kpi-breit{grid-column:1 / -1}
  .kpis.mit-verlauf .kpi-farben{flex-wrap:wrap}
  .kpi-breit .kpi-v{font-size:38px}
}
.kpi-mitte{flex:1 0 auto;display:flex;align-items:stretch;gap:22px}
.kpi-mitte > :first-child{align-self:flex-start}
.kpi-bild{flex:1;min-width:0;min-height:0;margin:12px 0 2px;position:relative}
.kpi-bild svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.kpi-farben{display:flex;flex-wrap:wrap;gap:0 12px;white-space:normal}
.kpi-farben span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.kpi-farben i{width:7px;height:7px;border-radius:50%;display:inline-block}
/* Wird eine Kachel schmaler als auf dem Rechner (Tablet, Telefon), tritt die Schrift von
   Beschriftung und Zusatz eine Stufe zurueck, damit beides in einer Zeile bleibt. */
@container (max-width:135px){
  .kpi-k{font-size:var(--fs-klein);gap:6px}
  .kpi-k > svg{width:15px;height:15px}
  .kpi-s,.kpi-d{font-size:var(--fs-mark)}
}
@container (max-width:124px){ .kpi-k{font-size:var(--fs-mark)} }
/* In sehr kleinen Quadraten (Rechner mit 1280 Pixeln neben dem Verlauf) ruecken die Zeilen
   enger zusammen, damit Zahl, Pille und Zusatz ins Quadrat passen. */
@container (max-width:116px){
  .kpi-v{margin-top:8px}
  .kpi-d{margin-top:4px;line-height:1.45}
  .kpi-s{padding-top:2px}
}
/* Am Telefon immer zwei Spalten, auch wenn keine 160 Pixel mehr fuer ein Quadrat bleiben. */
@container inhalt (max-width:620px){
  .kpis,.kpis.mit-verlauf{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:12px}
  .kpi-breit{min-height:150px}
  .kpi-breit .kpi-v{font-size:36px}
  .kpi{padding:13px 13px}
}

/* Die Texte tragen Absätze aus der Zeit des Browserkastens, die bleiben erhalten. */
.dlg-frage-text{white-space:pre-line}

/* ------------------------------------------------------------------
   Suche
   ------------------------------------------------------------------ */
/* Der Knopf steht dauerhaft in Gold, nicht erst beim Überfahren. */
/* Die Lupe ist weiss wie die Zeichen in Plus und Aktualisieren daneben, damit die
   drei gefuellten Knoepfe zusammenpassen. Weiss auf Gold erreicht nur 1,84 zu 1,
   das Zeichen ist deshalb etwas kraeftiger gezogen. */
.ibtn.gold-fest{background:var(--gold);border-color:var(--gold);color:#fff}
.ibtn.gold-fest svg{stroke-width:2.6}
.ibtn.gold-fest:hover{background:var(--gold-2);border-color:var(--gold-2);color:#fff}
.mobile-menu-btn.gold-fest{color:var(--gold)}
.mobile-menu-btn.hier{background:color-mix(in srgb,#fff 22%,transparent)}

.dlg-suche{max-width:680px}
.dlg-suche .dlg-inner{padding:16px}
.suche-feld{display:flex;align-items:center;gap:10px}
.suche-feld > svg{width:20px;height:20px;color:var(--faint);flex:none}
.suche-feld input{flex:1;border:1px solid var(--feld-rand);border-radius:var(--radius-sm);
  padding:11px 13px;font:inherit;font-size:var(--fs-gross);background:var(--feld);color:var(--text)}
.suche-feld input:focus{outline:none;border-color:var(--navy);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 14%,transparent)}
.suche-ergebnis{margin-top:14px;max-height:min(60vh,520px);overflow-y:auto}
.suche-ergebnis.laeuft{opacity:.5}
.suche-leer{margin:8px 2px 4px;color:var(--muted);font-size:var(--fs-klein);line-height:1.5}
.suche-gruppe{margin:14px 2px 6px;font-size:var(--fs-mark);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.suche-gruppe:first-child{margin-top:4px}
.suche-treffer{display:block;padding:9px 12px;border-radius:var(--radius-sm);
  text-decoration:none;color:inherit;border:1px solid transparent}
.suche-treffer b{display:block;font-size:var(--fs-text);font-weight:600;color:var(--text)}
.suche-treffer span{display:block;font-size:var(--fs-klein);color:var(--muted);margin-top:1px}
a.suche-treffer:hover,a.suche-treffer:focus-visible{background:var(--panel-2);
  border-color:var(--border);outline:none}
a.suche-treffer:focus-visible{border-color:var(--navy)}
/* Die Farbe des Angebots als Punkt vor dem Titel, ohne Randstreifen. */
.suche-treffer.hat-farbe b::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--f);margin-right:8px;vertical-align:1px}
/* Ein Treffer ohne Ziel ist nicht weniger wert, er führt nur nirgendwohin.
   Das sagt die Zeile darunter, deshalb bleibt er hier normal gesetzt. */
.suche-treffer.ohne-ziel{cursor:default}
.dlg-suche .dlg-inner{position:relative}
.suche-zu{position:absolute;top:10px;right:10px;width:32px;height:32px;border:none;
  background:transparent;border-radius:8px;color:var(--faint);cursor:pointer;
  display:grid;place-items:center;transition:all .15s var(--ease)}
.suche-zu svg{width:18px;height:18px}
.suche-zu:hover{background:var(--panel-2);color:var(--navy)}
.suche-fuss{margin-top:12px;padding-top:10px;border-top:1px solid var(--border-2);
  font-size:var(--fs-mark);color:var(--faint)}
.suche-feld{padding-right:36px}
@media (max-width:820px){
  /* Das Suchfenster bleibt auch am Telefon in der Mitte, die anderen docken unten an. */
  .dlg-suche{margin:auto;width:calc(100% - 24px);max-height:86dvh}
  .dlg-suche .dlg-inner{border-radius:var(--radius);border-bottom:1px solid var(--border)}
  .suche-feld input{font-size:16px}
}

/* Der Platzhalter gehoerte bisher dem Browser und war je nach Programm anders hell.
   Jetzt hat er einen festen Wert, dasselbe Grau wie alle beilaeufigen Angaben. */
input::placeholder,textarea::placeholder{color:var(--feld-platzhalter);opacity:1}

/* ------------------------------------------------------------------
   Schriftgroessen am Telefon
   ------------------------------------------------------------------
   Gemessen bei 375 Pixeln Breite: Fließtext 14, Erklärtexte und Fusszeilen 12,5,
   die kleinste Stufe 11 Pixel. Das ist am Bildschirm eines Telefons zu klein, in
   der Hand gehalten und oft in schlechtem Licht. Die vier unteren Stufen steigen
   deshalb an, die Zahlenstufen bleiben, sie sind ohnehin gross genug.

   Die Werte gelten nur hier. Am Schreibtisch sitzt der Bildschirm weiter weg und
   zeigt mehr auf einmal, dort bleibt es bei der bisherigen Staffelung. */
@media (max-width:820px){
  :root{
    --fs-mark:13px; --fs-klein:14.5px; --fs-text:16px; --fs-gross:17px;
  }
}

/* ------------------------------------------------------------------
   Auslastung
   ------------------------------------------------------------------
   Unter 40 Prozent rot, 40 bis 74 gelb, ab 75 grün. */
.aus-wert{display:inline-block;padding:2px 9px;border-radius:999px;
  font-size:var(--fs-klein);font-weight:700;white-space:nowrap}
.aus-wert.ton-leer{background:color-mix(in srgb,var(--red) 14%,var(--panel));color:var(--red)}
.aus-wert.ton-mittel{background:color-mix(in srgb,var(--amber) 16%,var(--panel));color:var(--amber)}
.aus-wert.ton-voll{background:color-mix(in srgb,var(--green) 14%,var(--panel));color:var(--green)}
/* Im Kalenderbalken sitzt die Zahl auf der Angebotsfarbe, dort trägt die Auslastung
   keine eigene Fläche: sie würde den schmalen Balken zerreißen. */
.bel-aus{font-weight:700;opacity:.92}
.bel-aus.ton-leer{color:#ffd7d4}
.bel-aus.ton-mittel{color:#ffe6b8}
.bel-aus.ton-voll{color:#ccf3dc}
/* Zahlenfeld in einer Tabellenzelle: schmal, mittig, ohne die Pfeile des Browsers. */
.zahlfeld{width:84px;text-align:center;background:var(--feld);border:1px solid var(--feld-rand);
  border-radius:var(--radius-sm);padding:8px 6px;font:inherit;font-size:var(--fs-text);color:var(--text)}
.zahlfeld:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 14%,transparent)}
.zahlfeld::-webkit-outer-spin-button,.zahlfeld::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.zahlfeld[type=number]{-moz-appearance:textfield;appearance:textfield}

/* Der Hinweisblock unter einer Tabelle: drei Zeilen, keine Knöpfe daneben. */
.aus-hinweis{display:block}
.aus-hinweis p{margin:0 0 6px}
.aus-hinweis p:last-child{margin-bottom:0}
.aus-hinweis .aus-wert{margin-left:6px}

/* Ein Termin, der vorbei ist, tritt einen Schritt zurück. Nur leicht: er bleibt
   lesbar, der Blick soll ihn beim Überfliegen bloß nicht mehr aufhalten. */
.bel-balken.vorbei{opacity:.62}
/* Noch nicht im Shop und schon vorbei: die beiden Abstufungen addieren sich sonst
   zu einem kaum sichtbaren Balken. */
.bel-balken.geplant.vorbei{opacity:.42}

/* Eine Zeile, die über den Anker aus einer anderen Liste angesprungen wurde,
   leuchtet kurz auf. Ohne das landet man zwar richtig, sucht aber trotzdem. */
.tbl tr:target{background:var(--accent-weak) !important;
  box-shadow:inset 3px 0 0 var(--gold);animation:zeile-an 2.4s var(--ease)}
@keyframes zeile-an{0%,55%{background:color-mix(in srgb,var(--gold) 34%,var(--panel))}100%{background:var(--accent-weak)}}

/* Was seit dem letzten Besuch der Bestellliste dazugekommen ist. Die Markierung
   verschwindet beim nächsten Aufruf der Seite von selbst. */
.tbl tr.zeile-neu{background:color-mix(in srgb,var(--gold) 9%,var(--panel));
  box-shadow:inset 3px 0 0 var(--gold)}
.marke-neu{display:inline-block;margin-top:3px;padding:1px 7px;border-radius:999px;
  background:var(--gold);color:var(--accent-ink);font-size:var(--fs-mark);font-weight:700;
  letter-spacing:.02em}

/* Karteninhalt ausserhalb einer Tabelle. Die Karten mit .tbl brauchen das nicht,
   dort traegt die Tabelle ihre eigenen Innenabstaende. */
.card-b{padding:22px 24px 26px}

/* ------------------------------------------------------------------
   Personen (Studierende und Absolvent:innen)
   Das Vorschaubild in der Liste steht quadratisch beschnitten, damit die Zeilen
   gleich hoch bleiben; auf der Website selbst ist es Querformat 3:2.
   Die Formulare tragen .form und damit die Feldgestaltung des Tools. Nur die
   Beschriftungsspalte ist breiter als die vorgegebenen 80 Pixel, weil hier
   laengere Woerter stehen.
   ------------------------------------------------------------------ */
.pers-bild{width:48px;height:48px;object-fit:cover;border-radius:8px;display:block;background:var(--feld)}
.pers-bild-fehlt{width:48px;height:48px;border-radius:8px;border:1px dashed var(--feld-rand);background:var(--feld)}
.alu-wahl{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.alu-wahl .btn{padding:8px 14px;font-size:var(--fs-klein)}

/* Die Personenseite liegt im selben Raster wie die Detailseite eines Termins:
   Angaben links, Knoepfe rechts in einer eigenen Karte. Das Formular umschliesst
   beide Spalten, damit der Speichern-Knopf zu den Feldern gehoert. */
/* Das Formular umschliesst hier ganze Karten, nicht einzelne Felder. Das
   Innenmass von .form wuerde sich deshalb zu dem der Karten addieren: auf dem
   Telefon blieben von 375 Pixeln nur 229 fuer den Bildausschnitt uebrig. */
.pers-form{padding:0}
/* Lange Feldnamen wie "Zwischenprüfungsreferat" trennen, sonst laeuft das Wort unter das Feld. */
.pers-form .frow label{width:150px;flex:none;line-height:1.3;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
.pers-form .zahlfeld{max-width:140px}
/* Subline und Platz stehen unter dem Bild: beides gehoert zu dem, was die
   Website zeigt, waehrend oben die Stammdaten der Person stehen. */
.pers-felder{margin-top:22px;padding-top:20px;border-top:1px solid var(--border-2)}
.pers-hinweis{margin:12px 0 0;color:var(--muted);font-size:var(--fs-klein);line-height:1.5}
/* Die Schrift der Website, nur fuer die Kachel-Vorschau im Bildausschnitt.
   Sie liegt lokal, weil die Sicherheitsregeln der Regie keine fremden Quellen
   zulassen und eine Vorschau in Georgia nicht zeigen wuerde, wie es aussieht.
   Geholt aus dem Theme artrium2026 am 23.09.2026. */
@font-face{font-family:"DM Serif Text";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/schrift/dm-serif-text-normal-latin-400.woff2) format("woff2")}

/* Der Bildausschnitt. Der Rahmen zeigt genau das, was spaeter auf der Website
   steht: Querformat 3 zu 2. Darueber liegt die Karte mit dem Namen, maßstabs-
   getreu nachgebaut, damit beim Ziehen sichtbar ist, was sie verdeckt.
   Die drei Linien sind die Oberkante der Karte bei 920, 375 und 1440 Pixeln
   Fensterbreite (gemessen am 23.09.2026). Der Tablet-Fall ist der engste und
   steht deshalb kraeftiger. */
.zus{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:20px;align-items:start}
.zus-rahmen{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:10px;
  background:#101619;cursor:grab;touch-action:none;user-select:none;
  /* Bezugsgroesse fuer alles, was im Rahmen liegt. Die Karte mass sich vorher am
     Fenster (vw). Auf dem Telefon schrumpft der Rahmen auf ein Drittel, die Karte
     blieb bei ihrer Mindestgroesse und verdeckte dann das halbe Bild statt eines
     Viertels. Mit cqw haelt sie ihr Verhaeltnis auf jedem Geraet. */
  container-type:inline-size}
.zus-rahmen.zieht{cursor:grabbing}
.zus-rahmen img{position:absolute;top:50%;left:50%;transform-origin:center;
  max-width:none;pointer-events:none;will-change:transform}
.zus-leer{position:absolute;inset:0;display:grid;place-items:center;
  color:rgba(255,255,255,.45);font-size:var(--fs-klein)}
.zus-grenze{position:absolute;left:0;right:0;border-top:1px dashed var(--amber);pointer-events:none}
/* Die drei Linien liegen nur rund zehn Pixel auseinander. Stuenden ihre
   Etiketten alle rechts, lägen sie uebereinander. Deshalb sitzt jedes an einer
   anderen Stelle der Breite. */
.zus-grenze span{position:absolute;top:-17px;font-size:var(--fs-mark);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:#1d1300;background:var(--amber);
  padding:1px 6px;border-radius:5px;white-space:nowrap}
.zus-grenze[data-fuer="tablet"] span{right:6px}
.zus-grenze[data-fuer="handy"] span{left:50%;transform:translateX(-50%)}
.zus-grenze[data-fuer="desktop"] span{left:6px}
.zus-grenze[data-fuer]{opacity:.4}
.zus-grenze.ist-an{opacity:1}
.zus-grenze span{transition:opacity .2s}
.zus-grenze:not(.ist-an) span{opacity:.75}
.zus-ansicht{display:flex;flex-direction:column;gap:7px}
.zus-kopf{font-size:var(--fs-mark);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.zus-knoepfe{display:flex;gap:5px}
.zus-knoepfe button{flex:1;padding:8px 3px;border:1px solid var(--feld-rand);background:transparent;
  color:var(--text);border-radius:9px;font:inherit;font-size:var(--fs-klein);font-weight:500;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.zus-knoepfe button:hover{border-color:var(--navy)}
.zus-knoepfe button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);
  color:#fff;font-weight:700}
.zus-knoepfe button:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.zus-masse{margin:0;font-size:var(--fs-klein);color:var(--muted);font-variant-numeric:tabular-nums}
.zus-karte{position:absolute;left:5%;right:5%;top:70.6%;transition:top .25s var(--ease);background:#f5f2ed;
  padding:7% 6% 6%;pointer-events:none;box-shadow:0 10px 28px rgba(0,0,0,.2)}
/* 3,6 und 1,65 Prozent der Rahmenbreite: bei den 672 Pixeln, die der Rahmen auf
   dem Schreibtisch misst, sind das genau die 24 und 11 Pixel von vorher. */
.zus-name{font-family:"DM Serif Text",Georgia,serif;font-size:clamp(15px,2.4vw,24px);
  font-size:3.6cqw;line-height:1.15;color:#25333a}
.zus-kicker{font-size:clamp(8px,1vw,11px);font-size:1.65cqw;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:#f8b236;margin-top:3px}
.zus-pult{display:flex;flex-direction:column;gap:14px}
.zus-zoom label{display:block;font-size:var(--fs-klein);color:var(--muted);margin-bottom:4px}
.zus-zoom input[type=range]{width:100%;accent-color:var(--navy)}
.zus-wert{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}


@media (max-width:900px){
  .zus{grid-template-columns:1fr}
}
/* Auf dem Telefon zaehlt jeder Pixel Breite fuer den Bildausschnitt. */
@media (max-width:640px){
  .card-b{padding:18px 16px 22px}
  .pers-form .frow label{width:auto}
  /* Die Adresse des Fragebogens ist breiter als ein Telefon. Ohne Umbruch
     schob sie die ganze Seite neun Pixel nach rechts. */
  .pw{white-space:normal;overflow-wrap:anywhere}
}
/* Die drei Etiketten liegen nur zehn Pixel auseinander. Ist der Rahmen schmal,
   ueberdecken sie sich gegenseitig; dann bleibt nur das der gewaehlten Ansicht. */
@container (max-width:460px){
  .zus-rahmen:has(.ist-an) .zus-grenze:not(.ist-an) span{display:none}
}

/* ------------------------------------------------------------------
   Einheitlicher Aufbau der Seiten
   ------------------------------------------------------------------ */

/* Der Weg zurueck steht als eigene kleine Zeile ueber der Ueberschrift, auf jeder
   Unterseite an derselben Stelle. Das letzte Glied ist die Seite davor. */
/* Pfad unter der Trennlinie des Kopfs: die Schritte davor als kleine Pillen, die Seite selbst
   grau am Ende. Der Pfeil steht am ersten Glied, am Telefon bleibt nur der Schritt zurueck. */
.krumen{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0 0 22px;font-size:var(--fs-klein);font-weight:600;min-width:0}
.top + .krumen{margin-top:-14px}
.krumen a{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:999px;color:var(--rust);text-decoration:none;
  background:var(--panel);border:1px solid var(--border);transition:background .15s var(--ease),border-color .15s var(--ease)}
.krumen a:hover,.krumen a:focus-visible{background:color-mix(in srgb,var(--rust) 8%,var(--panel));border-color:color-mix(in srgb,var(--rust) 35%,transparent)}
.krumen svg{width:14px;height:14px;margin-left:-4px;display:none}
.krumen a.krumen-erst svg{display:block}
.krumen-trenner{color:var(--faint);padding:0 2px;font-weight:400}
.krumen-jetzt{color:var(--muted);font-weight:500;padding:5px 4px;min-width:0;max-width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){
  .krumen > span,.krumen > a:not(.krumen-zurueck){display:none}
  .krumen a.krumen-zurueck svg{display:block}
}
@media (pointer:coarse){ .krumen a{min-height:36px} }

/* Karten ueber die volle Breite des Rasters. Untereinander stehen sie immer 28 Pixel
   auseinander, der Abstand kommt von hier und nicht aus jeder Ansicht einzeln. In
   den Rastern und bei den Kuchen setzen deren eigene Regeln den Abstand. */
.karte-voll{max-width:1300px}
.main > * + .card,.detail-spalten > * > .card + .card{margin-top:28px}

/* Was in einer leeren Karte steht */
.leer-hinweis{padding:14px 18px;color:var(--muted)}
.leer-hinweis.klein{font-size:var(--fs-klein)}

/* Das Kuerzel eines Angebots, farbig wie im Kalender */
.kuerzel{display:inline-block;min-width:34px;padding:2px 8px;border-radius:6px;font-weight:700;
  font-size:var(--fs-klein);color:#fff;text-align:center}

/* Eine Tabellenzeile, die als Ganzes zur Detailseite fuehrt */
.tbl tr.zeile-link{cursor:pointer}
.tbl tr.zeile-link:hover td{background:color-mix(in srgb,var(--rust) 5%,var(--panel))}

/* Das Fenster "Fuer welches Angebot?" hinter dem Plus der Terminuebersicht */
.kurswahl{display:flex;flex-direction:column;gap:6px;margin:4px 0 6px}
.kurswahl-zeile{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);
  border-radius:10px;color:var(--text);text-decoration:none;font-weight:600;transition:background .12s,border-color .12s}
.kurswahl-zeile:hover,.kurswahl-zeile:focus-visible{background:var(--panel-2);border-color:var(--rust)}

/* Ein PDF zum Herunterladen, ueberall derselbe Knopf */
.pdf-knopf svg{width:16px;height:16px}

/* Nur am Telefon: dort ist eine Liste greifbarer als der Kalender daruber */
.nur-telefon{display:none}
@media (max-width:820px){ .nur-telefon{display:block} }

/* Die Knoepfe der Kopfzeile, Reihenfolge nach Gebrauch: Suche, Archiv, Aktualisieren,
   Einstellungen, Spotty. Aktualisieren ist dunkel gefuellt (das Schiefergrau der Marke,
   weiss darauf 12,4 zu 1), damit neben dem Gold der Suche jeder Knopf mit eigener Aufgabe
   einen eigenen Ton hat. Archiv und Einstellungen bleiben hell. Das Plus zum Anlegen steht
   im Kopf der jeweiligen Karte. */
.ibtn.aktualisieren-knopf{background:var(--navy);border-color:var(--navy);color:#fff}
.ibtn.aktualisieren-knopf:hover{background:var(--navy-2);border-color:var(--navy-2);color:#fff}
.mobile-menu-btn.aktualisieren-knopf{background:var(--navy)}

/* ------------------------------------------------------------------
   Kachelreihe auf mittlerer Breite, etwa das iPad
   Die Reihe teilt ihre Breite in acht Anteile (Kacheln plus Verlauf). Neben der
   Seitenleiste bleiben auf dem iPad quer rund 860 Pixel, ein Quadrat misst dann
   nur rund 100 Pixel und der Inhalt ragt hinaus. Entscheidend ist deshalb die
   Breite der Inhaltsflaeche, nicht die des Bildschirms: gemessen wird ueber eine
   Containerabfrage auf .main. Unter 1050 Pixeln Inhaltsbreite stehen die Kacheln
   in einer Reihe mit fester Hoehe und der Verlauf ganz darunter, unter 600 Pixeln
   zwei Kacheln je Reihe.
   ------------------------------------------------------------------ */
.main{container:inhalt / inline-size}
/* Die hellen Knoepfe der Kopfzeile (Archiv, Einstellungen) sind so gross wie die
   gefuellten, wirkten aber kleiner: der Rand #e6e2da verschwamm auf dem Cremegrund
   und das Zeichen war grau. Kraeftigerer Rand und dunkles Zeichen geben ihnen
   dieselbe sichtbare Groesse. */
.top-actions .ibtn.ton-petrol:not(:hover):not(.hier){border-color:#cfc8bb;color:var(--navy)}

/* Umfrage-Ergebnisse: steht die Karte "An der Umfrage arbeiten" nicht mehr neben den
   Ergebnissen (iPad hoch, Telefon), kommt sie vor die Ergebnisse statt ans Ende einer
   langen Seite. Die Knoepfe sollen ohne Scrollen erreichbar sein. */
@media (max-width:1000px){ .detail-spalten > .ausw-aktionen{order:-1} }
/* Die zwei Spalten richten sich nach der Inhaltsflaeche, nicht nach dem Bildschirm:
   bei 1024 Pixeln (iPad quer) blieben neben der Seitenleiste und der 330 Pixel
   breiten Karte nur 360 Pixel fuer die Ergebnisse. Unter 800 Pixeln Inhaltsbreite
   steht alles untereinander. Gilt auch fuer die Termin-Detailseite. */
@container inhalt (max-width:800px){
  .detail-spalten{grid-template-columns:1fr}
  .detail-spalten > .ausw-aktionen{order:-1}
}

/* ------------------------------------------------------------------
   Schuelerakte: frei angelegte Felder und das Notizfeld mit Formatierung
   ------------------------------------------------------------------ */
.pers-form .frow-oben{align-items:flex-start}
.pers-form .frow-oben > label{padding-top:10px}
.notiz-feld{flex:1;min-width:0;border:1px solid var(--feld-rand);border-radius:9px;background:var(--panel);overflow:hidden}
.notiz-feld:focus-within{border-color:var(--rust)}
.notiz-leiste{display:flex;gap:4px;padding:5px 6px;border-bottom:1px solid var(--border-2);background:var(--panel-2)}
.notiz-k{width:30px;height:28px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--navy);
  display:inline-grid;place-items:center;cursor:pointer;font:inherit;font-size:var(--fs-text)}
.notiz-k:hover,.notiz-k.an{background:var(--panel);border-color:var(--border)}
.notiz-k svg{width:16px;height:16px}
/* Drei Zeilen hoch und waechst mit, ohne eigenen Rollbalken */
.notiz-text{min-height:calc(3 * 1.5em + 20px);padding:10px 12px;outline:none;line-height:1.5;overflow-wrap:anywhere}
.notiz-text:empty::before{content:'Notizen, auch mit Liste, fett oder kursiv';color:var(--faint)}
.notiz-text ul,.notiz-text ol{margin:4px 0;padding-left:22px}
.notiz-text p{margin:0 0 6px}
@media (max-width:640px){ .pers-form .frow-oben{flex-direction:column;align-items:stretch} .notiz-feld{width:100%} }
.feld-schloss{width:13px;height:13px;vertical-align:-1px;color:var(--faint);margin-left:4px}

/* ------------------------------------------------------------------
   Dokumente der Schuelerakte
   ------------------------------------------------------------------ */
/* Das Plus rechts im Kartenkopf: weisser Kreis auf dem dunklen Verlauf */
/* Knoepfe im Kartenkopf: helle Umrisse auf dem dunklen Kopf, leicht eckig. Nur das Plus
   (plus-knopf, legt etwas an) ist gold gefuellt. Fuenf goldene Kreise nebeneinander waren zu viel. */
.card-h .kopf-plus{margin-left:auto;align-self:center;width:28px;height:28px;border-radius:8px;border:1px solid rgba(255,255,255,.3);
  background:transparent;color:#fff;display:inline-grid;place-items:center;cursor:pointer;flex:none;transition:background .15s var(--ease),border-color .15s var(--ease)}
.card-h .kopf-plus:hover,.card-h .kopf-plus:focus-visible{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55);color:#fff}
.card-h .kopf-plus.plus-knopf{background:var(--gold);border-color:var(--gold);color:var(--accent-ink)}
.card-h .kopf-plus.plus-knopf:hover,.card-h .kopf-plus.plus-knopf:focus-visible{background:var(--gold-2);border-color:var(--gold-2);color:var(--accent-ink)}
details.card:not([open]) > summary .kopf-plus:not(.plus-knopf){color:var(--text);border-color:var(--border)}
.card-h .card-h-sub + .kopf-plus{margin-left:14px}
.card-h .kopf-plus svg{width:15px;height:15px}
/* Der Hinweis am Plus steht links daneben im Kartenkopf. Darueber schnitte ihn die Karte ab. */
.card-h .kopf-plus[data-tip]::after,.card-h .kopf-plus[data-tip]:hover::after,.card-h .kopf-plus[data-tip]:focus-visible::after{
  bottom:auto;top:50%;left:auto;right:calc(100% + 10px);transform:translateY(-50%)}
.card-h .kopf-plus[data-tip]::before,.card-h .kopf-plus[data-tip]:hover::before,.card-h .kopf-plus[data-tip]:focus-visible::before{
  bottom:auto;top:50%;left:auto;right:calc(100% + 6px);transform:translateY(-50%) rotate(45deg)}
.dok-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;padding:18px}
.dok-kachel{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--text);min-width:0}
.dok-bild{position:relative;aspect-ratio:4 / 5;border:1px solid var(--border);border-radius:10px;overflow:hidden;
  background:var(--panel-2);display:block}
.dok-bild img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.dok-art{position:absolute;left:8px;bottom:8px;background:var(--navy);color:#fff;font-size:var(--fs-mark);
  font-weight:700;padding:2px 7px;border-radius:6px}
.dok-bild.ohne-vorschau{display:grid;place-items:center}
.dok-endung{font-weight:800;font-size:22px;letter-spacing:.04em;color:var(--rust);background:color-mix(in srgb,var(--rust) 10%,var(--panel));
  padding:10px 14px;border-radius:10px}
.dok-endung.gross{font-size:34px;padding:18px 24px}
.dok-keine-vorschau{display:flex;flex-direction:column;align-items:center;gap:14px;padding:40px 24px;text-align:center;background:var(--panel-2)}
.dok-keine-vorschau p{margin:0;max-width:420px;color:var(--muted)}
.eingang-mini .eingang-endung{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:var(--rust);font-weight:800}
.dok-kachel:hover .dok-bild{border-color:var(--rust);box-shadow:var(--shadow)}
.dok-titel{font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.dok-meta{font-size:var(--fs-klein);color:var(--muted)}
.dok-korb{border-top:1px solid var(--border-2)}
.dok-korb > summary{cursor:pointer;padding:12px 18px;font-weight:600;font-size:var(--fs-klein);color:var(--navy)}
.dok-seiten{display:flex;flex-direction:column;gap:14px;padding:18px;background:var(--panel-2)}
.dok-seite{display:block;width:100%;height:auto;border:1px solid var(--border);border-radius:6px;background:#fff;box-shadow:var(--shadow)}
/* Angaben in einer Seitenkarte: Beschriftung klein ueber dem Wert, jede Angabe eine Zeile bis
   an den Rand. Fuer Dokument, Termin und Aufnahmepruefung. */
.angaben-liste > div{padding:11px 18px;border-top:1px solid var(--border-2);font-size:var(--fs-text);line-height:1.45;overflow-wrap:anywhere}
.angaben-liste > div:first-child{border-top:0}
.angaben-liste .k{display:block;margin-bottom:3px;font-size:var(--fs-klein);color:var(--muted);font-weight:600}
.angaben-liste .angaben-zeile{display:block}
.angaben-liste .angaben-zeile.muted{font-size:var(--fs-klein);margin-top:2px}
.angaben-wert{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap}
.kuerzel-marke{display:inline-block;padding:2px 8px;border-radius:6px;font-weight:800;font-size:var(--fs-mark);color:#fff;letter-spacing:.02em}
.tbl tr.zeile-hier td{background:color-mix(in srgb,var(--gold) 12%,var(--panel))}
/* Ablage: Ordner als Kacheln (Box), als aufklappbare Zeilen (Akte), Symbolwahl im Fenster */
.box-hoch{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;padding:8px 16px 8px 10px;border-radius:10px;
  background:var(--panel);border:1px solid var(--border);color:var(--navy);text-decoration:none;font-weight:700;font-size:var(--fs-klein);
  box-shadow:var(--shadow);transition:border-color .15s var(--ease),background .15s var(--ease)}
.box-hoch svg{width:22px;height:22px;padding:4px;border-radius:8px;background:var(--gold);color:var(--accent-ink);flex:none}
.box-hoch span{display:flex;flex-direction:column;line-height:1.25}
.box-hoch small{font-weight:600;color:var(--muted);font-size:var(--fs-mark)}
.box-hoch:hover,.box-hoch:focus-visible{border-color:var(--rust);background:color-mix(in srgb,var(--rust) 6%,var(--panel))}
.main > .box-hoch + .card{margin-top:0}
.ablage-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;padding:18px}
.ablage-kachel{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px 10px;border-radius:var(--radius-sm);
  color:var(--text);text-decoration:none;min-width:0;text-align:center;transition:background .15s var(--ease)}
.ablage-kachel:hover,.ablage-kachel:focus-visible{background:color-mix(in srgb,var(--rust) 8%,var(--panel))}
.ablage-bild{position:relative;display:block;line-height:0}
.ordner-bild{display:block;width:92px;height:auto;filter:drop-shadow(0 1px 1.5px rgba(23,32,57,.14)) drop-shadow(0 4px 8px rgba(23,32,57,.08))}
.ablage-kachel:hover .ordner-bild{transform:translateY(-2px)}
.ordner-bild{transition:transform .15s var(--ease)}
.ordner-bild.ob-gross{width:120px}
.ordner-bild.ob-klein{width:30px;filter:none}
.ordner-bild.ob-mini{width:30px;filter:none}
.ablage-zahl{position:absolute;right:-6px;bottom:2px;min-width:24px;height:22px;padding:0 7px;border-radius:999px;background:#fff;color:var(--navy);
  font-size:var(--fs-mark);font-weight:700;line-height:22px;box-shadow:0 1px 3px rgba(23,32,57,.25)}
.ablage-name{max-width:100%;font-weight:600;font-size:var(--fs-klein);line-height:1.3;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ablage-leer{font-size:var(--fs-mark);color:var(--faint);white-space:nowrap}
.ablage-kopf-sym{display:inline-grid;place-items:center;margin-right:10px;vertical-align:-5px}
.ablage-zeile-sym{display:inline-grid;place-items:center;margin-right:8px;vertical-align:-6px}
.dok-raster.mit-ordnern{border-top:1px solid var(--border-2)}
.ablage-ordnerliste{padding:8px 0}
.ablage-ordner{border-bottom:1px solid var(--border-2)}
/* Ziehen und Ablegen: das Gezogene wird blass, ein moegliches Ziel bekommt einen Rahmen. Das Ziel
   "ohne Ordner" in der Akte erscheint nur waehrend des Ziehens. */
[data-zieh-dok],[data-zieh-ordner]{cursor:grab}
.wird-gezogen{opacity:.45}
.zieh-ueber{outline:2px dashed var(--rust);outline-offset:-2px;background:color-mix(in srgb,var(--rust) 8%,var(--panel)) !important;border-radius:var(--radius-sm)}
.ablage-ohne-ziel{display:none;align-items:center;justify-content:center;margin:12px 18px;padding:14px;border:2px dashed var(--border);
  border-radius:var(--radius-sm);color:var(--muted);font-size:var(--fs-klein);font-weight:600}
body.zieht .ablage-ohne-ziel{display:flex}
/* Sortierung im Kartenkopf der Box: klein, hell auf dem dunklen Kopf. */
.card-h .box-sort{height:28px;border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:0 30px 0 12px;font:inherit;font-size:var(--fs-mark);font-weight:700;
  color:#fff;background-color:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;align-self:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:13px}
.card-h .box-sort:hover,.card-h .box-sort:focus-visible{background-color:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55);outline:none}
.card-h .box-sort option{color:var(--text);background:var(--panel)}
.ablage-ordner > summary{display:flex;align-items:center;gap:10px;padding:10px 18px;cursor:pointer;list-style:none;min-height:48px}
.ablage-ordner > summary::-webkit-details-marker{display:none}
.ablage-ordner > summary::before{content:"";width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(-45deg);transition:transform .15s var(--ease);flex:none;margin-right:2px}
.ablage-ordner[open] > summary::before{transform:rotate(45deg)}
.ablage-ordner > summary .ablage-zeile-sym{margin-right:0}
.ablage-ordner-name{font-weight:600;min-width:0;overflow-wrap:anywhere}
.ablage-ordner > summary .xbtn{margin-left:auto;width:30px;height:30px}
.ablage-ordner > summary .xbtn svg{width:15px;height:15px}
.ablage-ordner-inhalt{background:var(--panel-2);border-top:1px solid var(--border-2)}
.ablage-ordner-inhalt .dok-raster{padding-bottom:6px}
.ablage-ordner-fuss{display:flex;align-items:center;gap:12px;padding:12px 18px 14px;font-size:var(--fs-klein)}
.ablage-ordner-fuss .btn{margin-left:auto}
.pers-web{padding:10px 12px;margin-bottom:10px;border-radius:10px;font-size:var(--fs-klein);background:var(--panel-2);border:1px solid var(--border)}
.pers-web.an b{color:var(--green)}
.pers-web-hinweis{margin:-4px 0 10px}
.pers-klaeren{padding:10px 12px;margin-bottom:10px;border-radius:10px;background:var(--panel-2);border:1px solid var(--border)}
.pers-klaeren.an{background:color-mix(in srgb,var(--red) 8%,var(--panel));border-color:color-mix(in srgb,var(--red) 30%,var(--border))}
.pers-klaeren textarea{display:block;width:100%;margin-top:8px}
.pers-klaeren textarea[hidden]{display:none}
.web-ja{font-weight:700;color:var(--green)}
.stud-tbl .sp-web-vorn{width:92px}
/* Die vordere Spalte Website der Absolventen bleibt auch dort stehen, wo die hintere wegfaellt. */
@media (min-width:821px){ .stud-tbl td.web-vorn[data-sp="Website"]{display:table-cell} }
/* Posteingang */
.eingang .muted-h{opacity:.75;font-weight:600}
/* Oben eine Zeile zum Stand, jede Sendung als Karte: Kopf mit Betreff, darunter eine Metazeile
   (Absender, Zeit, Pruefung als Marke), links Dateien, rechts Wohin, unten die Aktionsleiste. */
.eingang-stand{margin:10px 2px 26px;color:var(--muted);font-size:var(--fs-klein)}
.eingang-stand b{color:var(--text);font-weight:700}
.eingang .card-h{align-items:center}
.eingang-betreff{min-width:0;overflow-wrap:anywhere}
.eingang .card-h .kopf-plus{margin-left:auto}
.eingang-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:10px 18px;border-bottom:1px solid var(--border-2);
  font-size:var(--fs-klein);color:var(--muted)}
.eingang-chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:var(--fs-mark);font-weight:700;white-space:nowrap}
.eingang-chip.ja{color:var(--green);background:color-mix(in srgb,var(--green) 12%,var(--panel))}
.eingang-chip.nein{color:var(--amber);background:color-mix(in srgb,var(--amber) 14%,var(--panel))}
.eingang-chip.teil{color:var(--navy);background:var(--accent-weak)}
.eingang-liste tr:first-child td{border-top:0}
.eingang-fuss{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 18px;
  border-top:1px solid var(--border-2);background:var(--panel-2)}
.eingang-fuss-links{display:flex;flex-wrap:wrap;gap:10px}
/* Dateiliste auf dem Tablet: kein Kartenumbau wie bei anderen Tabellen, sondern eine Zeile aus
   Haken, Vorschau und Titel mit den Angaben darunter (die Telefonansicht zeigt nur den Hinweis). */
@media (max-width:820px){
  .tbl.eingang-liste tr{display:grid;grid-template-columns:28px 60px minmax(0,1fr);gap:4px 14px;align-items:start;padding:14px 16px}
  .tbl.eingang-liste tbody tr:nth-child(even){background:none}
  .tbl.eingang-liste td,.tbl.eingang-liste tbody tr > td:first-child{display:block;padding:0;text-align:left;font-size:inherit;font-weight:inherit;line-height:inherit}
  .tbl.eingang-liste td::before{content:none}
  .tbl.eingang-liste tr.eingang-aus{grid-template-columns:28px minmax(0,1fr)}
  .tbl.eingang-liste tr.eingang-aus td:nth-child(2){display:none}
}
.eingang-nur-gross{display:none}
@media (max-width:700px){
  .eingang-nur-gross{display:block}
  .eingang-stand,.card.eingang{display:none}
}
/* Posteingang in zwei Spalten: links die Liste, rechts die gewaehlte Sendung; beide scrollen fuer sich,
   die Knopfleiste rechts bleibt unten stehen. Trennstriche zwischen den Zeilen nur ueber den Inhalt
   (vom Namen bis zur Uhrzeit), nicht bis zum Rand. */
.pe{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);gap:16px;height:calc(100dvh - 150px);min-height:520px;margin-bottom:16px}
.pe .card{max-width:none;margin:0}
.pe-spalte{display:flex;flex-direction:column;min-height:0}
.pe-filter{padding:10px 12px;border-bottom:1px solid var(--border-2)}
.pe-filter .seg{display:flex;width:100%}
.pe-filter .seg button{flex:1 1 auto;padding:8px 8px;white-space:nowrap}
.pe-filter .seg b{color:var(--navy);font-weight:800}
.pe-liste{flex:1;min-height:0;overflow:auto;padding:4px 6px 8px}
.pe-tag{padding:12px 12px 4px;font-size:var(--fs-mark);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.pe-zeile{position:relative;display:block;width:100%;text-align:left;border:1px solid transparent;background:none;border-radius:10px;padding:10px 12px;cursor:pointer;font:inherit;color:inherit}
.pe-zeile + .pe-zeile::before{content:"";position:absolute;left:12px;right:12px;top:-1px;height:1px;background:var(--border-2)}
.pe-zeile:hover,.pe-zeile.active{background:var(--panel-2)}
.pe-zeile.active{border-color:var(--rust)}
.pe-zeile:hover::before,.pe-zeile:hover + .pe-zeile::before,.pe-zeile.active::before,.pe-zeile.active + .pe-zeile::before{opacity:0}
.pe-zeile[hidden]{display:none}
.pe-z1{display:flex;align-items:center;gap:6px}
.pe-zeit{margin-left:auto;font-size:var(--fs-klein);color:var(--muted);white-space:nowrap}
.pe-wer{display:block;margin-top:5px;font-weight:700;color:var(--navy);overflow-wrap:anywhere}
.pe-was{display:block;font-size:var(--fs-klein);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pe-rechts{container:pe-ansicht / inline-size}
.pe-ansicht{display:flex;flex-direction:column;flex:1;min-height:0}
.pe-ansicht[hidden]{display:none}
.pe-detail{flex:1;min-height:0;overflow:auto}
.pe-ansicht > .eingang-fuss{flex:none}
@container pe-ansicht (max-width:820px){.eingang-spalten{grid-template-columns:minmax(0,1fr)}.eingang-dateien{border-right:0;border-bottom:1px solid var(--border-2)}}
@media (max-width:700px){.pe{display:none}}
.eingang-spalten{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr)}
.eingang-dateien{min-width:0;border-right:1px solid var(--border-2)}
.eingang-dateien .tbl td{vertical-align:top}
.eingang-dateien input.js-e-titel{width:100%;font-weight:600;padding:7px 10px;height:auto}
.form .eingang-dateien input.js-e-mit,.eingang-dateien.form input.js-e-mit{width:20px;height:20px;margin:10px 0 0;padding:0;flex:none;min-width:0;accent-color:var(--rust);-webkit-appearance:auto;appearance:auto}
.eingang-ziel.form .eingang-wahl input,.eingang-ziel.form .eingang-rolle input{width:18px;height:18px;padding:0;margin:3px 0 0;flex:none;min-width:0;border:0;-webkit-appearance:auto;appearance:auto;accent-color:var(--rust)}
.eingang-ziel.form .eingang-rolle input{margin-top:0}
.eingang-rolle .chk{align-items:flex-start;color:var(--text);font-weight:500}
.eingang-mini{position:relative;display:block;width:56px;height:70px;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--panel-2)}
.eingang-mini img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.eingang-mini span{position:absolute;left:4px;bottom:4px;background:var(--navy);color:#fff;font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px}
.eingang-erkannt{margin-top:4px;font-size:var(--fs-klein);color:var(--green);font-weight:600}
.eingang-abgleich{border-top:1px solid var(--border-2);padding-top:10px;margin-top:4px;display:flex;flex-direction:column;gap:8px}
.abgleich-h{font-weight:700;color:var(--navy);font-size:var(--fs-klein)}
.abgleich.tbl td,.abgleich.tbl th{padding:6px 8px;font-size:var(--fs-klein)}
.eingang-ziel.form .abgleich input.js-e-feld{width:18px;height:18px;padding:0;margin:0;flex:none;min-width:0;-webkit-appearance:auto;appearance:auto;accent-color:var(--rust)}
.abgleich-fuss{margin:0}
.abgleich-dateien{display:flex;flex-direction:column;gap:8px}
.abgleich-datei{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-klein)}
.abgleich-datei.doppelt{color:var(--amber);font-weight:600}
/* Warten, waehrend die KI ein Dokument der Akte liest (Fenster auf der Dokumentseite): Spotty
   wippt, darunter der Schritt, der gerade dran ist, und ein durchlaufender Balken. Kein
   vorhandener Baustein zeigt eine Wartezeit im Fenster; die Toast-Meldung verschwindet zu frueh. */
.ki-lesen{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:6px 0 4px}
.ki-lesen-bild{height:96px;width:auto;animation:si-bob 1.1s var(--ease) infinite}
.ki-lesen-schritt{color:var(--rust);font-weight:600;font-size:var(--fs-klein);min-height:1.5em;transition:opacity .25s}
.ki-lesen-schritt.weg{opacity:0}
.ki-lesen-balken{display:block;width:min(280px,100%);height:4px;border-radius:2px;background:var(--border);overflow:hidden;margin:4px 0}
.ki-lesen-balken span{display:block;width:35%;height:100%;border-radius:2px;background:var(--gold);animation:ki-lesen-lauf 1.4s ease-in-out infinite}
@keyframes ki-lesen-lauf{0%{transform:translateX(-100%)}100%{transform:translateX(290%)}}
.ki-vorschlag .frow,.ki-vorschlag .abgleich-h{margin-top:14px}
.ki-vorschlag .abgleich{margin:6px 0}
.ki-vorschlag .chip-reihe{margin-top:14px}
@media (prefers-reduced-motion:reduce){.ki-lesen-bild,.ki-lesen-balken span{animation:none}.ki-lesen-balken span{width:100%;opacity:.5}}
.eingang-wohin{margin-top:4px;font-size:var(--fs-klein);font-weight:600;color:var(--rust)}
tr.eingang-ohne td{opacity:.45}
tr.eingang-ohne td:first-child{opacity:1}
tr.eingang-aus td{color:var(--muted)}
.eingang-text{border-top:1px solid var(--border-2)}
.eingang-text-inhalt{padding:0 18px 16px;font-size:var(--fs-klein);line-height:1.5;max-height:360px;overflow:auto;overflow-wrap:anywhere}
.eingang-ziel{padding:16px 18px;display:flex;flex-direction:column;gap:8px;min-width:0}
.eingang-ziel-h{font-weight:700;color:var(--navy);margin-bottom:2px}
.eingang-kein{margin:0 0 4px;font-size:var(--fs-klein)}
.eingang-wahl{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border:1px solid var(--border);border-radius:10px;cursor:pointer;background:var(--panel)}
.eingang-wahl:has(input:checked){border-color:var(--rust);background:color-mix(in srgb,var(--rust) 7%,var(--panel))}
.eingang-wahl input{margin-top:3px;accent-color:var(--rust);flex:none}
.eingang-wahl span{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.eingang-wahl small{color:var(--muted);font-size:var(--fs-mark);line-height:1.4}
.eingang-feld{padding:4px 0 6px 12px}
.eingang-feld select{width:100%}
.eingang-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;margin:6px 0}
.eingang-raster label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-klein);font-weight:600;color:var(--muted)}
.eingang-raster input{width:100%;min-width:0}
.eingang-plz{display:grid;grid-template-columns:82px minmax(0,1fr);gap:6px}
.eingang-rolle{display:flex;flex-direction:column;gap:6px;margin:8px 0}
@container inhalt (max-width:1080px){.eingang-spalten{grid-template-columns:minmax(0,1fr)}.eingang-dateien{border-right:0;border-bottom:1px solid var(--border-2)}}
@container inhalt (max-width:520px){.eingang-raster{grid-template-columns:minmax(0,1fr)}}
.ordner-vorschau{display:flex;justify-content:center;padding:6px 0 2px}
.farb-wahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:6px}
.farb-feld{position:relative;display:block;height:34px;border-radius:10px;background:var(--f);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.farb-feld input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.farb-feld:has(input:checked){box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--navy)}
.farb-feld:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:4px}
.sym-zeile{margin-top:14px}
.sym-kopf{display:block;margin-bottom:6px;color:var(--muted);font-weight:600;font-size:var(--fs-klein)}
.sym-wahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px}
.sym-feld{position:relative;display:grid;place-items:center;height:42px;border:1px solid var(--border);border-radius:10px;cursor:pointer;color:var(--muted);background:var(--panel)}
.sym-feld input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.sym-feld svg{width:20px;height:20px}
.sym-feld:hover{border-color:var(--rust);color:var(--rust)}
.sym-feld:has(input:checked){border-color:var(--rust);background:color-mix(in srgb,var(--rust) 12%,var(--panel));color:var(--rust);box-shadow:inset 0 0 0 1px var(--rust)}
.sym-feld:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}

/* ------------------------------------------------------------------
   Notizen und Aufgaben
   ------------------------------------------------------------------ */
/* Im Raster nebeneinander richtet sich die Karte nach der Spalte, nicht nach der
   festen halben Breite, die sie allein auf der Seite hatte. */
.karten-raster > .naechste-karte{width:auto;min-width:0;max-width:none}
/* Das Faehnchen: oben links in der ersten Zelle, Kerbe rechts. Die Karte schneidet
   es am Rand ab, das ist so gewollt. */
.hat-fahne{position:relative;padding-top:44px !important}
.fahne{position:absolute;left:0;top:10px;width:40px;height:28px;border:0;padding:0;margin:0;background:none;cursor:pointer}
span.fahne{cursor:default}
.fahne-form{display:block;width:100%;height:100%;padding-left:9px;text-align:left;color:#fff;font-weight:700;
  font-size:15px;line-height:28px;clip-path:polygon(0 0,100% 0,72% 50%,100% 100%,0 100%)}
/* Die Notiz ist weiss mit petrolfarbenem Rand: zur Info, leiser als eine Aufgabe und
   trotzdem sichtbar vor dem Petrol der Seite. Der Rand kommt als Bild, weil clip-path
   einen gewoehnlichen Rand an der Kerbe abschneiden wuerde. */
.fahne-notiz .fahne-form{clip-path:none;color:var(--rust);background:no-repeat 0 0/100% 100%
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28' preserveAspectRatio='none'%3E%3Cpath d='M-2 1H38.2L29.4 14L38.2 27H-2Z' fill='%23fff' stroke='%23186881' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")}
.fahne-offen .fahne-form{background:var(--gold)}
.fahne-erledigt .fahne-form{background:#c9c3b8}
.fahne:hover .fahne-form{filter:brightness(1.08)}
/* Der Hinweis beim Darueberfahren waechst nach rechts und bricht um, er traegt die ganze erste Zeile der Notiz. */
.fahne[data-tip]::after{left:0;transform:translate(0,4px);white-space:pre-line;text-align:left;width:max-content;max-width:300px}
.fahne[data-tip]:hover::after,.fahne[data-tip]:focus-visible::after{transform:translate(0,0)}
.fahne[data-tip]::before{left:13px}
/* Das Fenster fuer Notizen */
.dlg-notiz .notiz-feld{margin-top:4px}
.dlg-notiz .notiz-text{min-height:calc(4 * 1.5em + 20px)}
.notiz-aufgabe{margin-top:14px;padding:14px;border:1px solid var(--border-2);border-radius:10px;background:var(--panel-2)}
.notiz-aufgabe[hidden]{display:none}
.notiz-zeile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:10px}
.notiz-aufgabe .chk{margin:4px 0 0}
.dlg-notiz .dlg-akt #notiz-weg{margin-right:auto}
@media (max-width:560px){ .notiz-zeile{grid-template-columns:1fr} }
/* Die Seite Aufgaben */
.aufgaben-gruppe th{background:var(--panel-2);font-size:var(--fs-mark);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:9px 18px;border-top:1px solid var(--border-2)}
.aufgaben-gruppe.ist-ueber th,.aufgaben-tbl td.ist-ueber{color:var(--red)}
.aufgaben-tbl td.ist-ueber{font-weight:700}
/* Auf der Seite Aufgaben steht das Faehnchen mittig links vor dem Titel, die Zeile
   bleibt dadurch flach. In den Buchungslisten sitzt es weiter oben links. */
.aufgaben-tbl .hat-fahne{padding-top:12px !important;padding-left:62px !important}
.aufgaben-tbl .fahne{top:50%;margin-top:-14px}
.bezug-chip{display:inline-block;margin-top:4px;font-size:var(--fs-klein);padding:1px 9px;border-radius:999px;
  background:color-mix(in srgb,var(--rust) 10%,var(--panel));color:var(--rust);text-decoration:none}
.bezug-chip:hover{background:color-mix(in srgb,var(--rust) 18%,var(--panel))}
.kuerzel-kreis{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 6px;border-radius:999px;
  background:var(--navy);color:#fff;font-size:var(--fs-mark);font-weight:700}
.kuerzel-kreis.fuer-alle{background:#e4e0d8;color:#4f4a43;letter-spacing:.03em}
.kuerzel-kreis.klein{min-width:24px;height:24px;padding:0 5px;font-size:11px;vertical-align:middle}
.kuerzel-kreis[hidden]{display:none}
/* Der Knopf Erledigt ist der wichtigste in der Zeile und steht deshalb immer gefuellt. */
.xbtn.voll-blau{background:var(--rust);border-color:var(--rust);color:#fff}
.xbtn.voll-blau:hover,.xbtn.voll-blau:focus-visible{background:color-mix(in srgb,var(--rust) 82%,black);border-color:color-mix(in srgb,var(--rust) 82%,black);color:#fff}
/* Das i hinter einer Aufgabe mit Notiz: beim Darueberfahren die Notiz, beim Klick ganz. */
.notiz-i{display:inline-grid;place-items:center;width:19px;height:19px;margin-left:7px;padding:0;border:1.5px solid var(--rust);
  border-radius:999px;background:transparent;color:var(--rust);font:italic 700 12px/1 Georgia,serif;cursor:pointer;vertical-align:1px}
.notiz-i:hover,.notiz-i:focus-visible{background:var(--rust);color:#fff}
/* Der Hinweis waechst nach rechts, mittig gesetzt schnitte ihn die Karte links ab. */
.notiz-i[data-tip]::after{left:-10px;transform:translate(0,4px);white-space:pre-line;width:max-content;max-width:320px;
  text-align:left;font-style:normal;font-family:inherit;font-weight:400}
.notiz-i[data-tip]:hover::after,.notiz-i[data-tip]:focus-visible::after{transform:translate(0,0)}
.notiz-i[data-tip]::before{left:3px}
.notiz-lesen{max-height:60vh;overflow:auto;line-height:1.55}
.notiz-lesen ul,.notiz-lesen ol{padding-left:22px}
.notiz-herkunft{margin-top:10px;color:var(--muted);font-size:var(--fs-klein)}
.notiz-herkunft[hidden]{display:none}
.notiz-label{margin:14px 0 6px;color:var(--muted);font-weight:600;font-size:var(--fs-klein)}
.notiz-titel-zeile{margin-bottom:12px !important}
/* Zwei Zahlen am Menuepunkt Aufgaben: persoenlich gold mit weisser Zahl, fuer alle weiss */
.nav-zahlen{margin-left:auto;display:inline-flex;gap:4px}
.nav-zahlen .nav-zahl{margin-left:0}
.nav-zahl.gold-weiss,.nav a.active .nav-zahl.gold-weiss{background:var(--gold);color:#fff}

/* Sortierbare Spalten: die Ueberschrift ist ein Knopf, der Pfeil zeigt die Richtung. */
th.sortier button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font:inherit;color:inherit;
  letter-spacing:inherit;text-transform:inherit}
th.sortier button::after{content:'';width:0;height:0;border:4px solid transparent;border-top-color:currentColor;
  margin-top:4px;opacity:.3}
th.sortier[aria-sort=ascending] button::after{opacity:1}
th.sortier[aria-sort=descending] button::after{opacity:1;border-top-color:transparent;border-bottom-color:currentColor;margin-top:-4px}
th.sortier button:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:4px}
th.sortier[style*="center"] button{justify-content:center}
.haken-rund{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--rust);color:#fff;
  font-size:13px;font-weight:700}

.notiz-lesen p{margin:0 0 6px}
.notiz-lesen p:last-child{margin-bottom:0}

/* Lange Listen mit Spalten: senkrechte Linien zwischen den Spalten, Werte mittig. */
.tbl-spalten th+th,.tbl-spalten td+td{border-left:1px solid var(--border-2)}
.tbl-spalten .mitte{text-align:center}
.tbl-spalten th.sortier.mitte button{justify-content:center}
@media (max-width:760px){ .tbl-spalten td+td{border-left:0} .tbl-spalten .mitte{text-align:left} }
.tbl-spalten th:nth-child(2),.tbl-spalten td:nth-child(2){border-left:0}

/* Unter der Notiz: wer sie zuletzt geaendert hat, darunter die frueheren Fassungen. */
.notiz-geaendert{display:block;margin-top:2px}
.notiz-geaendert:empty{display:none}
.notiz-fassungen{margin-top:10px;font-size:var(--fs-klein)}
.notiz-fassungen[hidden]{display:none}
.notiz-fassungen summary{cursor:pointer;color:var(--rust);font-weight:600}
.notiz-fassungen-liste{margin-top:8px;display:grid;gap:8px;max-height:260px;overflow:auto}
.notiz-fassung{padding:8px 11px;border:1px solid var(--border-2);background:var(--panel-2);border-radius:8px}
.notiz-fassung .notiz-herkunft{margin:0 0 4px;display:flex;align-items:center;gap:4px}
/* Marke "neu" an Aufgaben, die jemand anderes einem gegeben hat. */
.neu-marke{display:inline-block;margin-left:7px;padding:1px 8px;border-radius:999px;background:var(--gold);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;vertical-align:2px}
/* Checkliste: in der Zeile als Zaehler, im Fenster als Liste zum Bearbeiten oder Abhaken. */
.schritte-chip{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:2px 10px 2px 8px;border-radius:999px;
  border:1.5px solid var(--rust);background:transparent;color:var(--rust);font-family:inherit;font-size:13px;font-weight:600;line-height:1.5;cursor:pointer;vertical-align:1px}
.schritte-chip svg{width:14px;height:14px}
.schritte-chip:hover,.schritte-chip:focus-visible{background:var(--rust);color:#fff}
.schritte-edit{display:grid;gap:10px}
.schritt-zeile{display:flex;align-items:center;gap:12px}
.schritt-zeile input[type=checkbox],.schritt-lesen input[type=checkbox]{width:22px;height:22px;flex:none;margin:0;accent-color:var(--rust);cursor:pointer}
.dlg-inner .schritt-zeile input[type=text]{flex:1}
.schritt-weg{flex:none;width:40px;height:40px;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--faint);
  font-size:22px;line-height:1;cursor:pointer}
.schritt-weg:hover,.schritt-weg:focus-visible{background:color-mix(in srgb,var(--red) 10%,var(--panel));border-color:color-mix(in srgb,var(--red) 45%,transparent);color:var(--red)}
.schritt-neu{margin-top:10px;width:100%;min-height:44px;border:1.5px dashed color-mix(in srgb,var(--rust) 45%,transparent);border-radius:10px;
  background:none;color:var(--rust);font:inherit;font-size:var(--fs-text);font-weight:600;cursor:pointer}
.schritt-neu:hover,.schritt-neu:focus-visible{background:color-mix(in srgb,var(--rust) 8%,transparent);border-style:solid}
/* Im Lesefenster: jeder Schritt eine eigene Zeile zum Abhaken, so gross wie die Felder */
.schritte-lesen{display:grid;gap:8px}
.chk.schritt-lesen{display:flex;align-items:center;gap:12px;margin:0;padding:11px 14px;border:1px solid var(--border-2);border-radius:10px;
  background:var(--panel);font-size:var(--fs-text);font-weight:500;color:var(--text);line-height:1.4}
.chk.schritt-lesen:hover{background:var(--panel-2)}
.schritt-lesen input:checked + span{text-decoration:line-through;color:var(--muted)}
/* Meldung mit Knopf Rueckgaengig */
.toast-zurueck{display:flex;align-items:center;gap:14px}
.toast-zurueck button{border:0;background:none;color:var(--gold);font:inherit;font-weight:700;cursor:pointer;padding:0}
.toast-zurueck button:hover{text-decoration:underline}

/* Einstellungen: links die Leiste in Gruppen, rechts der Inhalt. Auf dem Telefon
   eine Auswahl oben statt der Leiste. */
.einst-rahmen{display:grid;grid-template-columns:190px minmax(0,1fr);gap:22px;align-items:start}
.einst-nav{position:sticky;top:18px;background:var(--panel);border:1px solid var(--border-2);border-radius:10px;padding:12px 10px;
  box-shadow:var(--shadow-sm,none)}
.einst-gruppe + .einst-gruppe{margin-top:12px;padding-top:12px;border-top:1px solid var(--border-2)}
.einst-gruppe-titel{padding:0 10px 6px;font-size:var(--fs-mark);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.einst-punkt{display:block;padding:8px 10px;border-radius:9px;color:var(--text);text-decoration:none;font-weight:600;font-size:var(--fs-klein)}
.einst-punkt:hover{background:var(--panel-2)}
.einst-punkt.active{background:var(--navy);color:#fff}
.einst-punkt.einst-rot{color:var(--red)}
.einst-punkt.einst-rot.active{background:var(--red);color:#fff}
.einst-wahl{display:none}
.einst-inhalt{min-width:0}
/* Unter der Breite eines 12-Zoll-MacBooks wird die Leiste zur Auswahl oben. */
@media (max-width:1199px){
  .einst-rahmen{grid-template-columns:1fr;gap:18px}
  .einst-nav{position:static;padding:0;border:0;background:none;box-shadow:none}
  .einst-gruppe{display:none}
  .einst-wahl{display:block;width:100%;background:var(--feld);border:1px solid var(--feld-rand);border-radius:10px;
    padding:11px 13px;font:inherit;font-size:var(--fs-gross);font-weight:600;color:var(--text)}
}
/* Mein Konto */
.konto-vorschau{display:flex;align-items:center;gap:14px;margin:4px 0 18px}
.kuerzel-kreis.konto-kreis{min-width:52px;height:52px;font-size:18px}
.farb-wahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:10px;max-width:560px}
.farb-feld{position:relative;display:block;cursor:pointer}
.farb-feld input{position:absolute;opacity:0;pointer-events:none}
.farb-feld > span{display:block;width:40px;height:40px;border-radius:50%;border:3px solid var(--panel);box-shadow:0 0 0 1px var(--border)}
.farb-feld input:checked + span{box-shadow:0 0 0 3px var(--navy)}
.farb-feld input:focus-visible + span{box-shadow:0 0 0 3px var(--rust)}
/* Die runden Felder (mit span) erben sonst Hoehe, Ecken und Auswahlring der eckigen
   Felder im Ordnerfenster, und um den Kreis steht ein Viereck. */
.farb-feld:has(> span),.farb-feld:has(> span):has(input:checked){height:auto;border-radius:50%;background:none;box-shadow:none}
.farb-feld:has(> span):has(input:focus-visible){outline:0}
/* Logo der Mac-App in Mein Konto: Vorschauen der Dock-Logos, Auswahl wie bei der Farbe */
.logo-wahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px;max-width:560px}
.logo-feld{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:var(--radius);cursor:pointer}
.logo-feld input{position:absolute;opacity:0;pointer-events:none}
.logo-feld img{display:block;width:48px;height:48px}
.logo-feld:has(input:checked){box-shadow:0 0 0 3px var(--navy)}
.logo-feld:has(input:focus-visible){box-shadow:0 0 0 3px var(--rust)}
.konto-karte{display:flex;align-items:center;justify-content:flex-start;gap:10px;margin:0 0 10px;width:auto;cursor:pointer}
.form .konto-karte input{flex:none;width:18px;height:18px;min-height:0;padding:0;accent-color:var(--rust)}
/* Ein Pflichtfeld, das beim Speichern leer war */
.dlg-inner .fehlt,.dlg-inner .notiz-text.fehlt{border-color:var(--red) !important;box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 14%,transparent)}

/* In den Einstellungen steht jede Karte in voller Breite fuer sich, untereinander und
   mit Abstand. Neben der Leiste waren Karten nebeneinander zu schmal. */
.einst-inhalt .karten-raster{display:block}
.einst-inhalt .card{max-width:none}
.einst-inhalt .card + .card,.einst-inhalt .karten-raster + .card,.einst-inhalt .card + .karten-raster,
.einst-inhalt .karten-raster + .karten-raster,.einst-inhalt > * + .card,.einst-inhalt > * + .karten-raster{margin-top:28px}

/* Nur fuer Screenreader: Text, der am Bildschirm nicht erscheint. */
.sr-nur{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Aufgabenzeilen: schmale Spalten nur am Rechner. Am Telefon bekommt jede Zelle die volle Breite. */
@media (min-width:821px){
  .aufgaben-tbl .sp-eng{width:1%}
  .aufgaben-tbl .sp-faellig{width:130px;white-space:nowrap}
  .aufgaben-tbl .sp-knoepfe{width:1%;text-align:right;white-space:nowrap}
}
/* Dashboard: eine Karte allein steht in voller Breite. */
.karten-raster.kr-eine{display:block}
.karten-raster.kr-eine > .card{max-width:none}
@media (max-width:820px){ .aufgaben-tbl .aufgaben-gruppe th{display:block;width:100%;box-sizing:border-box} }

/* Schuelerakte: Zwischenueberschriften in der Karte Ausbildung und der Schnitt der Noten. */
.akte-abschnitt{display:flex;align-items:baseline;gap:12px;margin:22px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--border-2);
  font-size:var(--fs-mark);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.card-b > .akte-abschnitt:first-child{margin-top:0}
.akte-schnitt{margin-left:auto;text-transform:none;letter-spacing:0;font-size:var(--fs-text);font-weight:700;color:var(--rust)}
.akte-schnitt .muted{font-weight:400;font-size:var(--fs-klein)}
/* Haekchen zur Auswahl: Beschriftung wie ein Feldname, die Haekchen daneben. */
.pers-form .frow .frow-label{width:150px;flex:none;color:var(--muted);font-weight:600;font-size:var(--fs-klein);line-height:1.3;padding-top:2px}
.akte-haken{display:flex;flex-wrap:wrap;gap:10px 22px}
.pers-form .frow .akte-haken label.chk{width:auto;display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-text);font-weight:500;color:var(--text)}
.akte-haken input[type=checkbox],.form .akte-haken input[type=radio]{width:20px;height:20px;margin:0;padding:0;flex:none;min-width:0;accent-color:var(--rust);-webkit-appearance:auto;appearance:auto}
.note-feld{max-width:120px}
@media (max-width:640px){ .pers-form .frow .frow-label{width:auto;margin-bottom:6px} }
/* Notenskala in den Einstellungen */
/* Die erste sichtbare Karte steht auf einer Hoehe mit der Leiste der Einstellungen, auch
   wenn davor eine versteckte Karte oder ein geschlossenes Fenster liegt (etwa das Einladen
   unter Zugang). Das Fenster selbst bleibt aussen vor: margin-top:0 nimmt dem modalen
   <dialog> das margin:auto, mit dem es mittig steht, und klebt es oben an den Rand. */
.einst-inhalt > :first-child:not(dialog),.einst-inhalt > [hidden]:first-child + *,
.einst-inhalt > dialog:first-child + *{margin-top:0 !important}

/* Lange Anmerkungen ohne Leerzeichen (Adressen, Pfade) brechen um, statt die Tabelle
   ueber den Kartenrand zu schieben. */
.tbl-umbruch td{overflow-wrap:anywhere}
/* Studierende und Absolventen: feste Spaltenbreiten, Kopfzeilen duerfen umbrechen.
   Sonst schob "Zwischenpruefung" die Tabelle auf Tablets ueber den Kartenrand. */
@media (min-width:821px){
  .tbl-spalten{table-layout:fixed;width:100%}
  .tbl-spalten th{white-space:normal;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;vertical-align:bottom}
  .tbl-spalten th.sortier button{white-space:normal;text-align:inherit;letter-spacing:.03em}
  .tbl-spalten td{overflow-wrap:break-word}
}
/* Auf Touch-Geraeten: kleine Knoepfe bekommen eine Flaeche, die sich sicher treffen laesst. */
@media (pointer:coarse){
  .notiz-i{width:28px;height:28px;font-size:15px;vertical-align:-3px}
  .schritte-chip{min-height:32px;padding:4px 12px 4px 10px}
  .card-h .kopf-plus{width:36px;height:36px}
  .card-h .kopf-plus svg{width:18px;height:18px}
  .notiz-k{width:40px;height:36px}
  .form .konto-karte input,.akte-haken input[type=checkbox],.form .akte-haken input[type=radio]{width:24px;height:24px}
}
.nae-rechts .neu-marke{margin-left:0}
/* Detailseiten mit Seitenkarte: die Knoepfe einer Zeile duerfen umbrechen. Mit dem
   Knopf Notiz passten vier nicht mehr in die schmale linke Spalte zwischen 1150 und
   1270 Pixeln Breite. */
.detail-spalten .tbl .uacts{flex-wrap:wrap;justify-content:flex-end}
/* Am Telefon bricht die Zweitzeile im Kartenkopf um. Das Plus bleibt dann rechts oben
   stehen, statt unter die Zweitzeile zu rutschen. */
@media (max-width:820px){
  .card-h:has(> .kopf-plus){position:relative;padding-right:64px}
  .card-h > .kopf-plus{position:absolute;right:16px;top:50%;transform:translateY(-50%);margin:0}
}

/* Pflichtfeld-Hinweis im Fenster, direkt unter dem Feld */
.feld-fehler{margin:6px 0 10px;color:var(--red);font-size:var(--fs-klein);font-weight:600}
/* Zugangstabelle: Breiten ueber colgroup, bei Platzmangel quer verschiebbar */
@media (min-width:821px){
  .rechte-tbl{min-width:700px}
  .rechte-tbl col.rc-name{width:150px}
  .rechte-tbl col.rc-recht{width:58px}
  .rechte-tbl col.rc-knoepfe{width:96px}
}
/* Knopfspalte schmal nur am Rechner, am Telefon eine volle Knopfreihe */
@media (min-width:821px){ .tbl .sp-knopf{width:1%;text-align:right;white-space:nowrap} }
@media (max-width:820px){
  /* Der Hinweis am Plus waere im Kartenkopf abgeschnitten, am Telefon hilft er ohnehin nicht. */
  .card-h .kopf-plus[data-tip]::after,.card-h .kopf-plus[data-tip]::before{display:none}
  /* Gruppenzeilen der Aufgaben ohne eigenen Rand, das graue Band geht ueber die ganze Breite. */
  .aufgaben-tbl tr.aufgaben-gruppe{padding:0}
  .toast-zurueck button{padding:10px 6px;margin:-10px -6px}
}

/* Die Liste in einer Scroll-Huelle darf auch quer schieben, wenn sie breiter ist als die Karte. */
.kr-scroll{overflow-x:auto}
/* Eine lange Zweitzeile im Kartenkopf bricht um, statt ueber den Rand zu laufen. */
.card-h-sub{min-width:0;white-space:normal;text-align:right}

/* Wer eine Aufgabe vergeben hat: kleiner Kreis hinter der zustaendigen Person */
.fuer-kreise{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.kuerzel-kreis.vergeben-kreis{min-width:20px;height:20px;padding:0 4px;font-size:10px}
.nae-sub .vergeben-kreis{margin-left:6px}
/* Der Text kuerzt sich, der Kreis dahinter bleibt immer ganz sichtbar. */
.nae-sub.nae-sub-mit{display:flex;align-items:center;gap:6px}
.nae-sub-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nae-sub-mit .vergeben-kreis{flex:none;margin-left:0}

/* Erledigt ist gold wie Speichern, Bearbeiten bleibt petrol: so unterscheiden sich die
   beiden Knoepfe auf einen Blick. */
.xbtn.voll-gold{background:var(--gold);border-color:var(--gold);color:#fff}
.xbtn.voll-gold:hover,.xbtn.voll-gold:focus-visible{background:var(--gold-2);border-color:var(--gold-2);color:#fff}
/* Die Checkliste unter der Notiz bekommt Luft nach oben und unten. */
.notiz-schritte-teil{margin:6px 0 4px}
/* Kuerzel sitzen genau in der Mitte des Kreises, auch die kleinen. */
.kuerzel-kreis{display:inline-flex;align-items:center;justify-content:center;line-height:1;box-sizing:border-box;text-align:center}
.kuerzel-kreis.vergeben-kreis,.kuerzel-kreis.klein{min-width:24px;height:24px;padding:0 5px;font-size:11px;letter-spacing:0}
/* Der Hinweis am kleinen Kreis im Dashboard darf aus der Zeile heraus. */
.nae-sub.nae-sub-mit{overflow:visible}

/* Aufbewahrungsfrist: je Person eine Zeile mit den beiden Entscheidungen */
.frist-liste{display:grid;gap:8px;margin:10px 0}
.frist-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.frist-zeile a{font-weight:700}
.frist-knoepfe{display:inline-flex;gap:8px;margin-left:auto}
.frist-knoepfe .btn{min-height:36px;padding:6px 14px}

/* Studierende und Absolventen. Die kurzen Spalten sind so breit, dass Ueberschrift und
   Sortierdreieck hineinpassen (gemessen), Name und Abschluss teilen sich den Rest in einem
   festen Verhaeltnis. Getrennt wird nur an vorgegebenen Stellen (Zwischen-/pruefung).
   Unter 1180 Pixeln faellt die Spalte Website weg, sonst bliebe fuer den Namen kein Platz. */
@media (min-width:821px){
  .stud-tbl th{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal}
  .stud-tbl th.sortier button{white-space:nowrap}
  .stud-tbl th.sp-zp button,.stud-tbl th.sp-ende button{white-space:normal}
  .stud-tbl th,.stud-tbl td{padding-left:10px;padding-right:10px}
  .stud-tbl th.sp-bild,.stud-tbl td:first-child{padding-left:16px}
  .stud-tbl td.mitte{white-space:nowrap}
  .stud-tbl td[data-sp="Abschluss"],.stud-tbl td[data-sp="Ausbildung beendet"]{white-space:normal}
  .stud-tbl .sp-bild{width:74px}
  .stud-tbl .sp-jahr{width:90px}
  .stud-tbl .sp-start{width:100px}
  .stud-tbl .sp-zp{width:134px}
  .stud-tbl .sp-web{width:96px}
  .stud-tbl .sp-knopf{width:60px}
  .stud-tbl .sp-abschluss{width:16%}
  .stud-tbl .sp-ende{width:30%}
}
@media (min-width:821px) and (max-width:1179px){
  .stud-tbl .sp-web,.stud-tbl td[data-sp="Website"]{display:none}
  .stud-tbl th,.stud-tbl td{padding-left:8px;padding-right:8px}
  .stud-tbl .sp-bild{width:70px}
  .stud-tbl .sp-jahr{width:88px}
  .stud-tbl .sp-start{width:96px}
  .stud-tbl .sp-zp{width:130px}
  .stud-tbl .sp-abschluss{width:134px}
  .stud-tbl .sp-knopf{width:56px}
}
@media (min-width:1400px){
  .stud-tbl:has(.sp-abschluss) .sp-name{width:20%}
  .stud-tbl .sp-jahr{width:9%}
  .stud-tbl .sp-start{width:11%}
  .stud-tbl .sp-zp{width:13%}
  .stud-tbl .sp-web{width:10%}
  .stud-tbl .sp-abschluss{width:20%}
}
/* Lange Hinweise an Knoepfen: umbrechen und links am Knopf ausrichten, damit sie nicht
   aus der Karte oder dem Fenster laufen. */
.tip-links[data-tip]::after,.card .tip-links[data-tip]:last-child::after{left:0;right:auto;transform:translate(0,4px);
  white-space:normal;width:max-content;max-width:min(320px,80vw);text-align:left}
.tip-links[data-tip]:hover::after,.tip-links[data-tip]:focus-visible::after,
.card .tip-links[data-tip]:last-child:hover::after,.card .tip-links[data-tip]:last-child:focus-visible::after{transform:translate(0,0)}
.tip-links[data-tip]::before,.card .tip-links[data-tip]:last-child::before{left:18px;right:auto}
.btn[data-tip]::after{white-space:normal;width:max-content;max-width:min(320px,80vw)}

/* Person: Aufgaben ueber den Stammdaten, Verlauf zugeklappt ganz unten. */
.pers-aufgaben{margin-bottom:28px}
.pers-verlauf{margin-top:28px}
.tbl-verlauf .verlauf-wert{white-space:pre-line;overflow-wrap:anywhere}

/* Gruen fuer "Ausbildung beendet": ein guter Abschluss, aber mit Folgen und Rueckfrage. */
.btn.ton-gruen{color:var(--green);border-color:color-mix(in srgb,var(--green) 30%,transparent);
  background:var(--panel);font-weight:600}
.btn.ton-gruen:hover,.btn.ton-gruen:focus-visible{background:color-mix(in srgb,var(--green) 8%,var(--panel));border-color:color-mix(in srgb,var(--green) 55%,transparent);color:var(--green)}
.btn.gruen{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}
.btn.gruen:hover,.btn.gruen:focus-visible{background:color-mix(in srgb,var(--green) 82%,black);border-color:color-mix(in srgb,var(--green) 82%,black)}

/* Aufgaben am Menuepunkt: rot ueberfaellig, gold heute, weiss delegiert. */
.nav-zahl.rot-weiss,.nav a.active .nav-zahl.rot-weiss{background:var(--red);color:#fff}
/* Rueckblick ueber eine Umfrage und Rechtschreibpruefung der Mailvorlagen. */
.rueckblick .rb-inhalt{padding:20px 22px 18px;display:grid;gap:16px}
.rb-label{display:block;font-size:var(--fs-mark);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--rust);margin-bottom:6px}
.rb-teil.rb-tenor{background:color-mix(in srgb,var(--rust) 6%,var(--panel));border-color:color-mix(in srgb,var(--rust) 28%,transparent)}
.rb-tenor .rb-teil-kopf{color:var(--rust)}
.rb-tenor .rb-ico{background:var(--rust)}
.rb-tenor p{margin:0 0 10px;line-height:1.6}
.rb-spalten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:1100px){.rb-spalten{grid-template-columns:1fr}}
.rb-teil{padding:14px 16px 6px;border-radius:10px;border:1px solid var(--border-2)}
.rb-gut{background:color-mix(in srgb,var(--green) 6%,var(--panel));border-color:color-mix(in srgb,var(--green) 30%,transparent)}
.rb-kritik{background:color-mix(in srgb,var(--red) 5%,var(--panel));border-color:color-mix(in srgb,var(--red) 28%,transparent)}
.rb-teil-kopf{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:10px}
.rb-gut .rb-teil-kopf{color:var(--green)}
.rb-kritik .rb-teil-kopf{color:var(--red)}
.rb-ico{display:inline-flex;width:24px;height:24px;border-radius:50%;align-items:center;justify-content:center;color:#fff;flex:none}
.rb-ico svg{width:14px;height:14px}
.rb-gut .rb-ico{background:var(--green)}
.rb-kritik .rb-ico{background:var(--red)}
.rb-teil ul{margin:0;padding:0;list-style:none}
.rb-teil li{position:relative;margin:0 0 10px;padding-left:16px;line-height:1.5}
.rb-teil li::before{content:'';position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.45}
.rb-wandel{padding:12px 16px;border-radius:10px;border:1px dashed var(--border-2)}
.rb-wandel p{margin:0;line-height:1.55}
.rb-fuss{margin:0;font-size:var(--fs-klein);color:var(--muted,#777)}
.rb-wahl{display:grid;gap:8px;margin:6px 0 4px}
.rs-liste{display:grid;gap:10px;max-height:55vh;overflow:auto;margin:6px 0 4px}
.rs-fund{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--border-2);border-radius:10px;cursor:pointer}
.rs-fund input{margin-top:3px;flex:none}
.rs-text{line-height:1.5}
.rs-wo{display:inline-block;font-size:var(--fs-mark);font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted,#777);margin-right:8px}
.rs-text del{color:var(--red)}
.rs-text ins{color:var(--green);text-decoration:none;font-weight:600}
.rs-grund{display:block;font-size:var(--fs-klein);color:var(--muted,#777)}

/* Studierende und Absolventen: Spalte Art (V, BB) und Zeilen ohne Bild, die noch nicht auf der Website stehen. */
@media (min-width:821px){ .stud-tbl .sp-art{width:80px} }
/* Unter 1280 Pixeln faellt die Spalte Website weg, unter 1180 auch Start (das Jahr steht daneben). */
@media (min-width:821px) and (max-width:1279px){ .stud-tbl .sp-web,.stud-tbl td[data-sp="Website"]{display:none} }
@media (min-width:821px) and (max-width:1179px){ .stud-tbl .sp-start,.stud-tbl td[data-sp="Start"]{display:none} }
.stud-tbl tr.ohne-bild > td{background:color-mix(in srgb,var(--gold) 9%,var(--panel))}
.stud-tbl tr.ohne-bild:hover > td{background:color-mix(in srgb,var(--gold) 16%,var(--panel))}

/* Bewerber: gruener Symbolknopf fuer den Schritt zu den Studierenden, feste Spalten. */
.xbtn.ton-gruen{color:var(--green);border-color:color-mix(in srgb,var(--green) 30%,transparent);
  background:var(--panel)}
.xbtn.ton-gruen:hover,.xbtn.ton-gruen:focus-visible{background:var(--green);border-color:var(--green);color:#fff}
@media (min-width:821px){
  .bew-tbl{table-layout:fixed;width:100%}
  .bew-tbl .sp-bew-tag{width:170px}
  .bew-tbl .sp-bew-grund{width:200px}
  .bew-tbl .sp-bew-knopf{width:150px}
  .bew-tbl td[data-sp=""]{text-align:right}
}

/* Gesperrte Symbolknoepfe sind grau, nicht blass in ihrer Farbe: so sieht man, dass sie
   gerade nicht gehen. Der Hinweis sitzt dann an einer Huelle, weil ein gesperrter Knopf
   beim Darueberfahren nichts meldet. */
.xbtn:disabled,.xbtn.ton-gold:disabled,.xbtn.ton-blau:disabled,.xbtn.ton-rot:disabled,.xbtn.ton-gruen:disabled{
  opacity:1;color:var(--faint);border-color:var(--border);background:var(--panel-2);cursor:not-allowed}
.xbtn:disabled:hover{color:var(--faint);border-color:var(--border);background:var(--panel-2)}
.xbtn-halter{display:inline-flex}

/* Zugeklappte Karten tragen einen blassen Kopf, damit sie sich sofort von den offenen
   unterscheiden. Aufgeklappt bekommen sie den dunklen Kopf zurueck. */
details.card:not([open]) > summary,details.card.karte-admin:not([open]) > summary{color:var(--text);
  background:color-mix(in srgb,var(--navy) 16%,var(--panel-2))}
details.card:not([open]) > summary::after{border-color:var(--muted)}
details.card:not([open]) > summary .card-h-sub{color:var(--muted)}

/* Levelverteilung: Leiste mit Semester und Knoepfen, Marke je Zeile, Verlauf auf der Personenseite. */
.level-tbl select{width:170px;padding-top:6px;padding-bottom:6px;height:auto}
.level-tbl td a{color:inherit;font-weight:600;text-decoration:none}
.level-tbl td a:hover{color:var(--rust)}
.level-marke{display:inline-block;font-size:var(--fs-mark);font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
.level-auf{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
.level-neu{background:color-mix(in srgb,var(--gold) 22%,transparent);color:var(--gold-2)}
.level-ab{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
.level-verlauf{display:flex;flex-wrap:wrap;gap:4px 14px;padding-top:6px}
.nur-druck{display:none}
@media print{
  .wz-leiste,.level-tbl select{display:none !important}
  .level-tbl .nur-druck{display:inline}
  .level-tbl .level-marke{border:1px solid #999;background:none;color:#000}
}

/* Werkzeugleiste, gleich auf Listen, Gruppen und Levelverteilung: Beschriftung klein
   ueber dem Feld, Felder nebeneinander, Knoepfe rechts. */
.wz-leiste{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 18px;padding:16px 18px;border-bottom:1px solid var(--border)}
.wz-feld{display:flex;flex-direction:column;gap:6px;min-width:0}
.li-unter{font-size:var(--fs-mark);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* Beschriftung der Felder in der Werkzeugleiste: klein, normal geschrieben, wie in den Einstellungszeilen. */
.wz-feld > label{font-size:var(--fs-klein);font-weight:600;color:var(--muted)}
.wz-feld select,.wz-feld input[type=text]{min-width:200px}
.wz-breit{flex:1 1 240px;max-width:360px}
.wz-knoepfe{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px}
.wz-leiste .btn{white-space:nowrap}
.wz-zeile{display:flex;gap:8px;align-items:center}

/* Chips: Auswahl zum Anklicken, gewaehlt gefuellt in Petrol. */
.chip-reihe{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;cursor:pointer;user-select:none}
.chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.chip span{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;border:1px solid var(--border-2);
  background:var(--panel);color:var(--text);font-size:var(--fs-klein);font-weight:600;line-height:1.3;transition:background .12s,border-color .12s}
.chip:hover span{border-color:var(--rust)}
.chip input:checked + span{background:var(--rust);border-color:var(--rust);color:#fff}
.chip input:checked + span::before{content:"✓";font-size:11px}
.chip input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}
.chip.li-gesperrt{cursor:not-allowed}
.chip.li-gesperrt span{opacity:.4;border-style:dashed}

/* Listen: drei Bloecke nebeneinander, darunter die Liste. */
.li-bloecke{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);gap:0}
@media (max-width:1200px){.li-bloecke{grid-template-columns:1fr 1fr}.li-block-spalten{grid-column:1 / -1;order:3}}
@media (max-width:760px){.li-bloecke{grid-template-columns:1fr}}
.li-block{padding:18px 18px 20px;border-right:1px solid var(--border);min-width:0}
.li-block:last-child{border-right:0}
@media (max-width:1200px){.li-block{border-right:0;border-bottom:1px solid var(--border)}}
.li-h{margin:0 0 12px;font-size:var(--fs-gross);font-weight:700;color:var(--text)}
.li-h-sub{font-size:var(--fs-klein);font-weight:400;color:var(--muted);margin-left:6px}
.li-unter{margin:16px 0 8px}
.li-h + .chip-reihe{margin-top:0}
.li-block select{width:100%}
.li-reihe{display:flex;flex-wrap:wrap;gap:6px}
.li-chip{display:inline-flex;align-items:center;gap:2px;background:var(--panel-2);border:1px solid var(--border);border-radius:999px;
  padding:3px 4px 3px 11px;font-size:var(--fs-klein);font-weight:600}
.li-chip button{border:0;background:none;cursor:pointer;color:var(--muted);font-size:15px;line-height:1;padding:2px 6px;border-radius:50%}
.li-chip button:hover:not(:disabled){background:var(--gold);color:#fff}
.li-chip button:disabled{opacity:.25;cursor:default}
.li-leer{display:flex;flex-wrap:wrap;gap:8px}
.li-leer input[type=text]{flex:1 1 100%}
.li-leer input[type=number]{flex:0 0 76px}
.li-platz{margin:12px 0 0;font-size:var(--fs-klein);color:var(--amber);font-weight:600}
.listen-vorschau{margin-top:24px}
.listen-vorschau .card-h .li-pdf{margin-left:14px;padding:7px 16px}
.li-tbl{font-size:var(--fs-klein)}
.li-tbl td,.li-tbl th{white-space:normal;overflow-wrap:anywhere;padding-left:10px;padding-right:10px}
.li-tbl .li-nr{width:1%;color:var(--muted);text-align:right}
.li-tbl .li-leerspalte{min-width:44px;border-left:1px solid var(--border)}

/* Gruppen: Marken je Gruppe in der Uebersicht, Kreuze in der Zuordnung. */
.ein-chips{display:flex;flex-wrap:wrap;gap:6px}
.ein-chip{display:inline-flex;gap:6px;align-items:center;background:var(--panel-2);border:1px solid var(--border);border-radius:999px;padding:2px 10px;font-size:var(--fs-klein)}
.ein-chip b{color:var(--rust)}
.ein-tbl .ein-sp{width:1%;white-space:nowrap}
.ein-tbl input[type=radio]{width:18px;height:18px;accent-color:var(--rust);cursor:pointer}
.level-tbl tr.level-gruppe td{background:var(--panel-2);padding-top:10px;padding-bottom:10px}
.level-tbl .level-alle{margin-left:12px;padding:4px 12px;font-size:var(--fs-klein)}
.level-hinweis{margin:-4px 0 10px}
.form .ein-tbl input[type=radio]{-webkit-appearance:radio;appearance:auto;padding:0;margin:0;border:0;background:none;flex:none;min-width:0}

/* Die Karte mit den Knoepfen (Speichern, Am ... arbeiten) laeuft am Rechner beim Scrollen
   mit, in jeder zweispaltigen Maske. Die rechte Spalte reicht dafuer bis ganz unten. */
@media (min-width:1001px){
  .detail-spalten:not(.mit-tabelle) > :last-child{align-self:stretch}
  .detail-spalten:not(.mit-tabelle) .karte-mitlaufend{position:sticky;top:16px;z-index:2}
}
@media (min-width:1240px){
  .detail-spalten.mit-tabelle > :last-child{align-self:stretch}
  .detail-spalten.mit-tabelle .karte-mitlaufend{position:sticky;top:16px;z-index:2}
}
.nae .nae-haken{flex:none;align-self:center}

/* Spotty erklaert die Seite: das Maskottchen ist anklickbar, die Hilfe erscheint als Fenster. */
.statusind.hat-hilfe{cursor:pointer;border-radius:10px;transition:transform .15s var(--ease)}
.statusind.hat-hilfe:hover{transform:translateY(-2px) rotate(-3deg)}
.statusind.hat-hilfe:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.dlg-hilfe .dlg-inner{max-width:560px}
.hilfe-kopf{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.hilfe-kopf img{width:64px;height:auto;flex:none}
.hilfe-ueber{display:block;font-size:var(--fs-mark);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-2)}
.hilfe-kopf .dlg-h{margin:2px 0 0}
.hilfe-kurz{margin:0 0 14px;font-size:var(--fs-gross);line-height:1.45;color:var(--text)}
/* Eine Adresse, die man abschreiben oder kopieren will, ganz oben in der Hilfe (Posteingang). */
.hilfe-adresse{margin:0 0 16px;padding:12px 14px;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:var(--fs-klein);font-weight:600;color:var(--muted)}
.hilfe-adresse b{display:block;margin-top:2px;font-size:var(--fs-gross);color:var(--text);user-select:all;overflow-wrap:anywhere}
.hilfe-h{margin:16px 0 6px;font-size:var(--fs-mark);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hilfe-liste{margin:0;padding-left:20px;display:grid;gap:6px;font-size:var(--fs-text);line-height:1.45}
.hilfe-liste li::marker{color:var(--rust)}
/* Zuletzt geoeffnet: je Eintrag ein X zum Entfernen. */
.suche-verlauf{display:flex;align-items:center;gap:4px}
.suche-verlauf .suche-treffer{flex:1;min-width:0}
.suche-verlauf-weg{flex:none;width:30px;height:30px;border:none;background:transparent;border-radius:8px;color:var(--faint);cursor:pointer;display:grid;place-items:center}
.suche-verlauf-weg svg{width:15px;height:15px}
.suche-verlauf-weg:hover,.suche-verlauf-weg:focus-visible{background:var(--panel-2);color:var(--red)}
/* Mein Konto: Folge der Menues, ziehen oder Pfeile. */
.menue-folge{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px;max-width:440px}
.menue-zeile{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--panel);cursor:grab;user-select:none}
.menue-zeile.zieht{opacity:.5;border-style:dashed}
.menue-griff{width:16px;height:16px;flex:none;color:var(--faint)}
.menue-name{flex:1;min-width:0;font-weight:600}
.menue-pfeil{flex:none;width:32px;height:32px;display:grid;place-items:center;border:none;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.menue-pfeil svg{width:17px;height:17px}
.menue-pfeil:hover:not(:disabled),.menue-pfeil:focus-visible{background:var(--panel-2);color:var(--text)}
.menue-pfeil:disabled{opacity:.3;cursor:default}
/* Studierende: fehlender oder abgelaufener Haftpflicht-Nachweis, klein neben dem Namen. */
.haft-fehlt{display:inline-flex;vertical-align:-3px;margin-left:6px;color:var(--amber);cursor:help}
.haft-fehlt svg{width:16px;height:16px}
/* Semesterwechsel: im Menue in Gold. */
.nav a[data-punkt="semesterwechsel"]:not(.active){color:var(--gold);font-weight:600}
.sw-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px;width:100%;max-width:620px}
.sw-liste li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--panel)}
.sw-liste li .muted{font-size:var(--fs-klein);text-align:right}
.sw-liste .sw-ok{font-size:var(--fs-klein);color:var(--green);font-weight:600}
.btn.sw-klein{padding:5px 12px;min-height:0}
/* Ausbildungsvertrag in den Einstellungen: Abschnitte untereinander, Text waechst mit. */
.vt-inhalt{display:grid;gap:14px}
.vt-hilfe{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--panel-2);padding:10px 14px}
.vt-hilfe > summary{cursor:pointer;font-weight:700}
.vt-regeln{margin:10px 0 8px;padding-left:20px;display:grid;gap:4px;line-height:1.45}
.vt-regeln code{background:var(--panel);border:1px solid var(--border);border-radius:5px;padding:0 5px;font-size:.92em}
.vt-hinweis{margin:0 0 10px;color:var(--muted);font-size:var(--fs-klein)}
.chip-knopf{border:1px solid var(--border-2);background:var(--panel);border-radius:999px;padding:4px 11px;font:inherit;font-size:var(--fs-klein);cursor:pointer;color:var(--text)}
.chip-knopf:hover,.chip-knopf:focus-visible{background:var(--accent-weak);border-color:var(--accent)}
#vt-abschnitte{display:grid;gap:12px}
.vt-abschnitt{border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px;background:var(--panel)}
.vt-kopf{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.vt-nr{flex:none;width:24px;text-align:center;font-weight:800;color:var(--muted)}
.vt-titel{flex:1;min-width:0;font-weight:700}
.vt-text{width:100%;min-height:70px;resize:vertical;line-height:1.5;font-family:inherit}
.menue-pfeil.vt-weg:hover:not(:disabled){color:var(--red)}
.vt-knoepfe{display:inline-flex;gap:8px;flex-wrap:wrap}
/* Personenseite: rechts zwei Karten, die zusammen mitlaufen. */
.pers-rechts{display:grid;gap:20px;align-content:start}
.pers-rechts .form > :last-child{margin-bottom:0 !important}
.pers-einmal{display:grid;gap:10px}
/* Handgriffe einer Detailseite in Gruppen: kleine Ueberschrift je Zweck, Gefaehrliches (Loeschen,
   Archivieren, Absagen) unter einer Linie abgesetzt. In .pers-einmal (Raster mit Abstand) ohne eigene Raender. */
.knopf-gruppe{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:16px 0 8px}
.knopf-gruppe:first-child{margin-top:0}
.knopf-trenn{border:0;border-top:1px solid var(--border);margin:6px 0 16px}
.pers-einmal > .knopf-gruppe{margin:8px 0 -2px}
.pers-einmal > .knopf-trenn{margin:4px 0}
.pers-einmal > .pers-web,.pers-einmal > .pers-klaeren,.pers-einmal > .pers-web-hinweis{margin-bottom:0}
.pers-einmal .btn{width:100%}
/* Karte Ausbildung: kleine Zeilen unter Beginn und Level. */
.ausb-info{display:grid;gap:6px;margin:6px 0 4px;font-size:var(--fs-klein);line-height:1.45}
.ausb-info > div{display:flex;gap:10px;align-items:baseline}
.ausb-k{flex:none;width:150px;color:var(--muted);font-weight:600}
.ausb-info p{margin:4px 0 0}
@media (max-width:640px){ .ausb-info > div{flex-direction:column;gap:2px} .ausb-k{width:auto} }
/* Pruefungen in zwei Spalten, Beschriftung ueber dem Feld. */
.pr-spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 28px}
.pr-titel{font-weight:700;margin:2px 0 10px}
.pers-form .pr-spalten .frow{flex-direction:column;align-items:stretch;gap:6px}
.pers-form .pr-spalten .frow > label,.pers-form .pr-spalten .frow > .frow-label{width:auto;padding-top:0}
/* Pruefungen nach Gruppe und Teil: Gruppen untereinander, je Teil ein umrandeter Block, zwei
   nebeneinander (der dritte Teil der Buehnenreife steht darunter links, halb breit). */
.pr-gruppe + .pr-gruppe{margin-top:18px}
.pr-teile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.pr-teil{border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px 4px;min-width:0}
.pr-teil-h{font-size:var(--fs-klein);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 8px}
.pr-teil-h .muted{text-transform:none;letter-spacing:0;font-weight:600;margin-left:6px}
.pers-form .pr-teil .frow{flex-direction:column;align-items:stretch;gap:6px}
.pers-form .pr-teil .frow > label,.pers-form .pr-teil .frow > .frow-label{width:auto;padding-top:0}
.pr-teil > .btn{margin:2px 0 12px}
.pr-frueher{border-top:1px solid var(--border-2);padding:8px 0;font-size:var(--fs-klein)}
.pr-frueher > summary{cursor:pointer;color:var(--muted);font-weight:600}
.pr-frueher-b{display:grid;gap:3px;padding:8px 0 2px}
.pr-frueher-b .btn{justify-self:start;margin-top:6px}
@media (max-width:700px){ .pr-teile{grid-template-columns:minmax(0,1fr)} }
/* Notiz in eigener Karte: die Ueberschrift nennt sie, die Beschriftung bleibt nur fuer Vorleser. */
.pers-form .notiz-karte .frow-oben{display:block}
.pers-form .notiz-karte .frow-oben > label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.notiz-karte .notiz-feld{width:100%}
/* Semesterwechsel als Arbeitsseite. */
.sw-einleitung{margin:0 0 18px;max-width:820px;line-height:1.5;color:var(--muted)}
.sw-klein-text{margin:10px 0 0;font-size:var(--fs-klein)}
.sw-tbl tr.sw-gruppe td{background:var(--panel-2);font-weight:700;padding-top:9px;padding-bottom:9px}
/* Zwischenkopf je Gruppe in einer Tabelle (Tarife je Art). */
.tbl tr.tbl-gruppe td{background:var(--panel-2);font-weight:700;padding-top:9px;padding-bottom:9px}
.sw-tbl select,.sw-tbl input[type=date]{max-width:190px}
.sw-tbl td{vertical-align:middle}
.sw-grund{font-size:var(--fs-klein);color:var(--amber);font-weight:600}
.sw-im-level{display:inline-block;margin-left:6px;font-size:var(--fs-mark);cursor:help}
.sw-chk{display:inline-flex;align-items:center;gap:8px;margin:0;width:auto}
.sw-subline{display:block;margin-top:6px}
.sw-tbl tr.sw-endet td{background:rgba(91,127,109,.08)}
.sw-tbl input.sw-fehlt{border-color:var(--amber);background:rgba(214,158,46,.10)}
/* Pruefungen: Kalendertage mit Terminen, Liste nach Tagen. */
.kal-tag.pr-tag{cursor:default;position:relative;text-decoration:none;aspect-ratio:auto;height:34px}
.kal-tag.pr-tag:hover:not(.hat){background:var(--panel);border-color:transparent}
.kal-tag.pr-tag.wochenende:hover:not(.hat){background:var(--panel-2)}
.kal-tag.pr-tag.hat,.kal-tag.pr-tag.hat.wochenende{cursor:pointer;background:var(--rust);border-color:var(--rust);color:#fff;font-weight:800}
.kal-tag.pr-tag i{position:absolute;top:2px;right:3px;font-style:normal;font-size:9px;line-height:1;min-width:13px;padding:2px 3px;border-radius:999px;background:#fff;color:var(--text);text-align:center}
.kal-tag.pr-tag.hat:hover{filter:brightness(1.08)}
.pr-tbl tr.pr-tag-kopf td{background:var(--panel-2);padding-top:9px;padding-bottom:9px}
.pr-tbl tr.pr-tag-kopf td{display:table-cell}
.pr-tbl tr.pr-tag-kopf td > span{margin-right:14px}
.pr-tbl tr.pr-tag-kopf .btn{float:right}
.pr-tbl tr.pr-tag-kopf.vergangen td{opacity:.7}
.pr-umschalter{color:inherit}
.pr-tbl tr[id]{scroll-margin-top:90px}
/* Farben der Pruefungsgruppen. */
.pr-punkt{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:0;flex:none}
.pr-legende{margin:14px 0 0}
.pf-name{display:inline-flex;align-items:center;gap:8px}
.pf-name i{width:14px;height:14px;border-radius:50%;display:inline-block}
.pf-wahl{display:flex;flex-wrap:wrap;gap:8px;max-width:none}
.pf-wahl .farb-feld > span{width:32px;height:32px}
/* Kalender der Pruefungen: beim Darueberfahren alle Namen des Tages, linksbuendig untereinander. */
.kal-tag.pr-tag[data-tip]::after{white-space:pre;text-align:left;line-height:1.55;font-weight:500;left:0;transform:translate(0,4px)}
.kal-tag.pr-tag[data-tip]:hover::after,.kal-tag.pr-tag[data-tip]:focus-visible::after{transform:translate(0,0)}
.kal-tag.pr-tag[data-tip]::before{left:13px;transform:translate(0,4px) rotate(45deg)}
.kal-tag.pr-tag[data-tip]:hover::before,.kal-tag.pr-tag[data-tip]:focus-visible::before{transform:translate(0,0) rotate(45deg)}
.kal-tag.pr-tag.tip-rechts[data-tip]::after{left:auto;right:0}
.kal-tag.pr-tag.tip-rechts[data-tip]::before{left:auto;right:13px}
/* Die Karte darf den Tooltip nicht abschneiden; der Kopf behaelt seine runden Ecken. */
.card.pr-kal-karte{overflow:visible}
.pr-kal-karte > .card-h{border-top-left-radius:inherit;border-top-right-radius:inherit}


/* Stundenplan an der Person: Kopf mit Art und Semester, darunter Gruppe oder Haken. */
.sp-kopf{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.sp-wahl{display:flex;align-items:center;gap:10px;font-size:var(--fs-klein);font-weight:700;color:var(--muted)}
.sp-wahl select{min-width:170px}
.sp-zeit{display:flex;align-items:center;gap:6px}
.sp-zeit input{width:104px}
.sp-leer{margin:4px 0 0}

/* Wochenplan des Hauses: links die Uhrzeit, je Tag seine Spalten (Kopf in zwei Zeilen wie im
   Stundenplan des Artriums), darin die Bloecke absolut nach Minuten. Breit wird der Plan
   durch waagerechtes Scrollen, nicht durch Schrumpfen. */
.wp-schalter{display:flex;flex-direction:column;gap:8px;align-self:flex-end}
.wp-schalter .ez-schalter-mit{color:var(--text)}
.main > * + .wp-seite,.wp-seite > .card + .card{margin-top:28px}
.wp-scroll{overflow-x:auto;overflow-y:hidden;padding:0;border-top:1px solid var(--border)}
.wp-kopfkarte .wz-leiste{border-bottom:0}
.wp-kopfkarte .wp-bearbeiten-hinweis{margin:0 18px 16px}
.wp-plan{display:flex;gap:2px;min-width:min-content;background:#fff}
.wp-achse{flex:0 0 58px}
.wp-tag{flex:var(--n) 1 0;min-width:calc(var(--n) * 44px);display:flex;flex-direction:column}
.wp-seite.ohne-wochenende .wp-wochenende{display:none}
.wp-tag-kopf{height:30px;display:grid;place-items:center;background:#b5162b;color:#fff;font-weight:800;font-size:var(--fs-klein)}
.wp-spalten-kopf{display:grid;grid-template-columns:repeat(var(--n,1),1fr);gap:2px;margin-top:2px}
.wp-spalten-kopf span{height:24px;display:grid;place-items:center;background:#858585;color:#fff;font-weight:700;font-size:var(--fs-mark);overflow:hidden;white-space:nowrap}
.wp-achse-inhalt,.wp-tag-inhalt{position:relative;height:var(--wp-h);margin-top:2px}
.wp-achse-inhalt span{position:absolute;left:0;right:0;display:grid;place-items:center;border-bottom:1px solid var(--border);font-size:var(--fs-mark);
  font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;background:var(--panel-2);box-sizing:border-box}
.wp-tag-inhalt{background:#fff;border:1px solid var(--border);box-sizing:content-box}
.wp-linie{position:absolute;left:0;right:0;border-top:1px solid #e3ded4}
.wp-linie.halb{border-top-style:dotted}
.wp-spaltlinie{position:absolute;top:0;bottom:0;border-left:1px solid #e3ded4}
.wp-plan .wp-block{position:absolute;height:var(--h);overflow:hidden;padding:3px 2px;box-sizing:border-box;border-radius:2px;
  background:var(--f);color:var(--s);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  font-size:10.5px;line-height:1.2;font-weight:700;border:1px solid rgba(0,0,0,.12)}
.wp-plan .wp-block b{font-size:11px;font-weight:800;hyphens:auto;overflow-wrap:break-word;max-width:100%}
.wp-plan .wp-block > span{max-width:100%;overflow-wrap:break-word;font-size:9.5px;letter-spacing:-.1px}
.wp-plan .wp-block.kariert{background:repeating-conic-gradient(#3a3a3a 0 25%,#8a8a8a 0 50%) 0 0/10px 10px;color:#fff;text-shadow:0 0 3px #000}
.wp-plan .wp-block .wp-zahl{position:absolute;top:2px;right:3px;min-width:16px;height:16px;border-radius:8px;background:rgba(255,255,255,.9);color:#1b2429;
  font-size:9.5px;font-weight:800;display:grid;place-items:center;padding:0 3px;box-sizing:border-box;text-shadow:none}
.wp-plan .wp-namen{display:none}
.wp-plan .wp-block:hover{height:auto;min-height:var(--h);z-index:5}
.wp-plan .wp-block:hover{box-shadow:0 8px 24px rgba(0,0,0,.25);min-width:170px}
.wp-plan .wp-block:hover .wp-namen{display:flex}
.wp-plan .wp-namen{flex-wrap:wrap;justify-content:center;gap:2px 6px;margin-top:4px;padding:4px;border-radius:3px;background:rgba(255,255,255,.92)}
.wp-plan .wp-p{color:#1b2429;font-weight:600;font-size:10.5px}
/* Der Hinweis "+ 11 VZ" steht im hellen Namensfeld. Ohne eigene Farbe erbte er die weisse Schrift
   des Blocks und war auf dem hellen Grund nicht lesbar. */
.wp-plan .wp-vz{color:#1b2429;font-weight:700;font-size:10.5px}
/* Filter: der Plan bleibt voll lesbar, passende Bloecke bekommen einen goldenen Rahmen. */
.wp-plan .wp-block.treffer{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--gold);z-index:2}
/* Nur mit aktivem Filter: nicht gemeinte Bloecke grau und blass, lesbar bleibt der Titel. */
.wp-plan .wp-block.blass{filter:grayscale(1);opacity:.32}
.wp-seite.wp-edit .wp-tag-inhalt{cursor:crosshair}
.wp-seite.wp-edit .wp-plan .wp-block{cursor:pointer}
.wp-seite.wp-edit .wp-plan .wp-block:hover{outline:2px solid var(--gold);outline-offset:1px}
.wp-seite.wp-edit .wp-plan .wp-block:hover .wp-namen{display:none}
.wp-auswahl{position:absolute;background:rgba(248,178,54,.35);border:2px dashed var(--gold);pointer-events:none;z-index:6;box-sizing:border-box}
.wp-bearbeiten-hinweis{padding:10px 14px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--gold) 16%,var(--panel));font-size:var(--fs-klein)}
/* Im Bearbeiten wird der Stift zum gruenen Haken: ein Klick beendet das Bearbeiten. */
.card-h .kopf-plus.js-wp-bearbeiten.an,.card-h .kopf-plus.js-wp-bearbeiten.an:hover{background:var(--green);color:#fff}
.wp-anlegen{padding:0 0 18px}
.wp-anlegen-knoepfe{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.wp-nichts{padding:0 18px 12px;margin:0}
/* Dialog Block */
.dlg-akt-luecke{flex:1}
.wp-dlg-raster{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.wp-dlg-raster label{display:flex;flex-direction:column;gap:5px;font-size:var(--fs-klein);font-weight:700;color:var(--muted)}
.wp-dlg-raster label.chk{flex-direction:row;align-items:center}
.wp-dlg-voll{grid-column:1 / -1}
.wp-dlg-paar{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wp-dlg-l{display:block;font-size:var(--fs-klein);font-weight:700;color:var(--muted);margin-bottom:6px}
.wp-dlg-kariert{align-self:end;padding-bottom:10px}
.wp-farben{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.wp-farbe{width:26px;height:26px;border-radius:6px;border:2px solid transparent;cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.wp-farbe.an{border-color:var(--text);box-shadow:0 0 0 2px #fff inset}
.wp-farben input[type=color]{width:40px;height:28px;padding:0;border:1px solid var(--border);border-radius:6px;flex:none;background:none}
.wp-teilnahme{border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;display:flex;flex-direction:column;gap:6px}
.wp-teilnahme legend{font-size:var(--fs-klein);font-weight:700;color:var(--muted);padding:0 4px}
.wp-teilnahme[hidden]{display:none}
.wp-vorschau{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-width:120px;min-height:64px;padding:6px 10px;
  border-radius:2px;font-weight:700;font-size:11px;line-height:1.25;background:var(--f);color:var(--s)}
.wp-vorschau.kariert{background:repeating-conic-gradient(#3a3a3a 0 25%,#8a8a8a 0 50%) 0 0/10px 10px;color:#fff;text-shadow:0 0 3px #000}
@media (max-width:560px){ .wp-dlg-raster{grid-template-columns:1fr} }
/* Liste unter dem Plan und die Karte an der Person */
.wp-liste{padding:14px 18px 8px;display:grid;gap:14px}
.wp-liste-tag{font-weight:800;font-size:var(--fs-klein);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding-bottom:6px;border-bottom:1px solid var(--border)}
.wp-zeile{display:grid;grid-template-columns:130px minmax(160px,300px) minmax(0,1fr);gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:var(--fs-klein);align-items:baseline}
.wp-zeile-zeit{color:var(--muted);font-variant-numeric:tabular-nums}
.wp-zeile-u{font-weight:700}
.wp-liste .wp-namen{display:flex;flex-wrap:wrap;gap:2px 10px}
.wp-liste .wp-p{color:var(--text);text-decoration:none;white-space:nowrap}
.wp-liste .wp-p:hover,.wp-plan .wp-p:hover{text-decoration:underline}
.wp-liste .wp-p.bb{font-weight:700}
.wp-p small{font-weight:600;color:var(--muted)}
.wp-liste .wp-zeile.blass{display:none}
/* BB als kleines rundes Abzeichen vor dem Namen. */
.bb-marke{display:inline-grid;place-items:center;min-width:22px;height:15px;padding:0 4px;margin-right:4px;border-radius:8px;box-sizing:border-box;
  background:var(--rust);color:#fff;font-size:9px;font-weight:800;letter-spacing:.04em;line-height:1;vertical-align:1px}
.sp-art{font-size:var(--fs-klein);font-weight:700;color:var(--muted);align-self:center;margin-right:auto}
.sp-gruppe{display:flex;align-items:center;gap:10px;font-size:var(--fs-klein);font-weight:700;color:var(--muted);max-width:360px}
.sp-hinweis{margin:0 0 8px;font-size:var(--fs-klein)}
.sp-haken-liste{display:grid;gap:4px}
.sp-tag-h{font-weight:800;font-size:var(--fs-mark);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:8px}
.sp-haken{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 8px;border-radius:8px;font-size:var(--fs-klein);cursor:pointer}
.sp-haken.an{background:color-mix(in srgb,var(--rust) 8%,var(--panel))}
.sp-haken-t{min-width:0}
.form .sp-haken input[type=checkbox]{flex:none;width:18px;height:18px}
.sp-ergebnis{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);display:grid;gap:4px;font-size:var(--fs-klein)}
.sp-ergebnis-h{font-weight:800;color:var(--navy);margin-bottom:4px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sp-stunde b{display:inline-block;width:26px}
.sp-stunde span{color:var(--muted);font-variant-numeric:tabular-nums;margin-right:6px}
/* Am Telefon kein Plan und kein Bearbeiten, dafuer ein Hinweis; die Liste bleibt. */
.wp-handy-hinweis{display:none;margin:0 18px 16px;font-size:var(--fs-klein)}
@media (max-width:700px), (pointer:coarse) and (max-height:500px){
  .wp-scroll,.wp-bearbeiten-hinweis,.wp-kopfkarte .js-wp-bearbeiten,.wp-kopfkarte .js-wp-raster,.wp-kopfkarte .js-wp-neu{display:none !important}
  .wp-handy-hinweis{display:block}
}
@media (max-width:560px){ .wp-zeile{grid-template-columns:1fr;gap:3px} .sp-haken{grid-template-columns:auto auto minmax(0,1fr)} .sp-haken .sp-zeit{grid-column:3} }
/* Heute da: Beginn und Ende stehen, wo sonst das Datum steht. Gleiche Groesse, gleiche
   Staerke und gleich breite Ziffern, damit beide Uhrzeiten genau untereinander stehen.
   Das Ende unterscheidet nur die Farbe. */
.nae-datum.hd-zeit{gap:2px}
.nae-datum.hd-zeit b,.nae-datum.hd-zeit span{font-size:var(--fs-klein);font-weight:800;font-variant-numeric:tabular-nums;
  white-space:nowrap;text-transform:none;letter-spacing:0}
.nae-datum.hd-zeit span{color:var(--muted)}

/* Mehrere kleine Knoepfe im Kartenkopf stehen als Gruppe rechts. Am Telefon rutscht die
   Gruppe unter die Ueberschrift, statt dass die Knoepfe uebereinander liegen. Das Plus
   ist immer der letzte. Offene Anlegekarte: das Plus bleibt dunkler. */
.card-h .kopf-knoepfe{margin-left:auto;display:inline-flex;align-items:center;align-self:center;flex:none}
.card-h .card-h-sub + .kopf-knoepfe{margin-left:14px}
.card-h .kopf-knoepfe .kopf-plus{margin-left:0}
.card-h .kopf-knoepfe .kopf-plus + .kopf-plus{margin-left:8px}
.card-h .kopf-plus.plus-knopf.hier{background:var(--gold-2)}
@media (max-width:820px){
  .card-h:has(> .kopf-knoepfe){flex-wrap:wrap;row-gap:10px}
}
.wp-fehler{margin:12px 0 0;color:var(--red);font-size:var(--fs-klein);font-weight:600}
.form .wp-dlg-raster label.chk,.form .wp-teilnahme label.chk,.form .wp-schalter label.chk{justify-content:flex-start;color:var(--text);font-weight:600}
.form .wp-dlg-raster label.chk input,.form .wp-teilnahme label.chk input,.form .wp-schalter label.chk input{flex:none;width:18px;height:18px;margin:0}

/* Anlegen im Fenster (Sperrzeit, Termin, Pruefungstermin, Einladen): das Formular behaelt
   seinen Aufbau, nur ohne eigenen Innenabstand; ein hohes Formular scrollt im Fenster. */
.anlege-karte.dlg .form{padding:0}
@media (min-width:821px){ .anlege-karte.dlg .dlg-inner{max-height:calc(100dvh - 40px);overflow-y:auto} }
/* Mac-App: die Seite liegt unter der durchsichtigen Titelleiste (fullSizeContentView), dort sitzt
   auch die Ziehfläche. Ein hohes Fenster rückte mit 20 px Abstand unter die Titelleiste und sah aus,
   als stoße es oben an. In der App bleiben oben und unten je 48 px frei, das Fenster bleibt mittig. */
html.mac-app dialog.dlg:modal{max-height:calc(100dvh - 96px)}
@media (min-width:821px){ html.mac-app .anlege-karte.dlg .dlg-inner{max-height:calc(100dvh - 96px)} }

/* Speichern nach Regel 1: ein Knopf je Formular, der unten am Fenster mitlaeuft, solange
   das Formular zu sehen ist. In einer Karte braucht die Karte overflow:clip statt hidden,
   sonst klebt die Leiste an der Karte statt am Fenster. */
.speicher-leiste{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap;
  padding:12px 16px;background:var(--panel);border-top:1px solid var(--border-2);box-shadow:0 -8px 18px rgba(23,32,57,.07)}
.speicher-leiste.aus-fuss{justify-content:space-between}
.card:has(> .speicher-leiste){overflow:clip}
.einst-inhalt > .speicher-leiste,.main > .speicher-leiste{margin-top:28px;border:1px solid var(--border);border-radius:var(--radius)}
.speicher-hinweis{color:var(--muted);font-size:var(--fs-klein);margin-right:auto}
.speicher-leiste.nur-schmal{display:none}
@media (max-width:1000px){ .speicher-leiste.nur-schmal{display:flex;margin-top:20px;border:1px solid var(--border);border-radius:var(--radius)} }
.card-h .kopf-knoepfe .box-sort{margin-right:8px}
.uf-wert{display:flex;align-items:center;gap:8px;min-width:0}
.uf-wert .pw{min-width:0}
.pw.uf-lang{white-space:normal;overflow-wrap:anywhere}
.uf-wert .xbtn{flex:none;width:30px;height:30px}
.uf-wert .xbtn svg{width:15px;height:15px}

/* Auswahl statt Radioknoepfen. Kurze Wahl (zwei bis vier Woerter): Segmentschalter, die Knoepfe
   bleiben fuers Formular und sind unsichtbar. Lange Wahl mit Erklaerung: Auswahlkarten, das
   gewaehlte Feld ist umrandet. Am Ende der Datei, damit .frow label und .form input nicht greifen. */
.wahl-segment{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:11px;background:var(--panel-2);border:1px solid var(--border);max-width:100%}
.wahl-segment > label{position:relative;display:inline-flex;flex-direction:row;align-items:center;width:auto;margin:0;padding:7px 14px;border-radius:8px;
  font-size:var(--fs-klein);font-weight:600;color:var(--muted);cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease)}
.wahl-segment input[type=radio]{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;padding:0;pointer-events:none}
.wahl-segment > label:has(input:checked){background:var(--panel);color:var(--text);box-shadow:0 1px 2px rgba(15,20,35,.12),0 0 0 1px var(--border)}
.wahl-segment > label:has(input:focus-visible){outline:2px solid var(--navy);outline-offset:1px}
.wahl-karten{display:flex;flex-direction:column;gap:8px}
.wahl-karten > label{display:flex;flex-direction:row;align-items:flex-start;gap:10px;width:auto;margin:0;padding:11px 14px;border:1px solid var(--border);border-radius:10px;
  background:var(--panel);color:var(--text);font-size:var(--fs-text);font-weight:500;line-height:1.45;cursor:pointer;transition:border-color .15s var(--ease),background .15s var(--ease)}
.wahl-karten > label:hover{border-color:var(--feld-rand)}
.wahl-karten > label:has(input:checked){border-color:color-mix(in srgb,var(--rust) 55%,transparent);background:color-mix(in srgb,var(--rust) 6%,var(--panel))}
.wahl-karten input[type=radio]{flex:none;width:18px;height:18px;margin:2px 0 0;padding:0;border:0;background:none;-webkit-appearance:auto;appearance:auto;accent-color:var(--rust)}
.wahl-karten > label > span{min-width:0}

/* Symbole vor den Knoepfen der Aktionskarten. Als Maske aus CSS, nicht im HTML: manche Knoepfe
   wechseln ihren Text per Skript (textContent), ein eingebautes Symbol ginge dabei verloren.
   Mit Symbol steht der Text linksbuendig, der Hauptknopf (Speichern) bleibt mittig. */
.btn[class*=" sym-"]{justify-content:flex-start}
/* Traegt der Knopf auch einen Hinweis (data-tip), belegt dessen Pfeil dasselbe ::before. Das Symbol
   hat Vorrang, der Hinweis erscheint dann ohne Pfeil. */
.btn[class*=" sym-"][data-tip]::before{position:static;inset:auto;transform:none;opacity:.8;visibility:visible;border-radius:0;z-index:auto;
  width:18px;height:18px;background:currentColor;transition:none}
.btn[class*=" sym-"]::before{content:"";flex:none;width:18px;height:18px;background:currentColor;opacity:.8;-webkit-mask:var(--sym) center/contain no-repeat;mask:var(--sym) center/contain no-repeat}
.sym-aufgabe{--sym:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%224%22 width=%2216%22 height=%2216%22 rx=%223%22/%3E%3Cpath d=%22M9 12l2 2 4-4%22/%3E%3C/svg%3E")}
.sym-bescheinigung{--sym:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2215%22 cy=%2215%22 r=%223%22/%3E%3Cpath d=%22M13 17.5V22l2-1.5 2 1.5v-4.5%22/%3E%3Cpath d=%22M10 19H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v7%22/%3E%3Cpath d=%22M7 8h10M7 11h4%22/%3E%3C/svg%3E")}
.sym-web{--sym:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M3.6 9h16.8M3.6 15h16.8%22/%3E%3Cpath d=%22M12 3a15 15 0 0 1 0 18a15 15 0 0 1 0-18%22/%3E%3C/svg%3E")}
.sym-extern{--sym:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 4h6v6%22/%3E%3Cpath d=%22M20 4l-9 9%22/%3E%3Cpath d=%22M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5%22/%3E%3C/svg%3E")}
.sym-vertrag{--sym:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z%22/%3E%3Cpath d=%22M14 3v5h5%22/%3E%3Cpath d=%22M8 17c1.5-2 2.5-2 3 0s1.5 1 3-1%22/%3E%3C/svg%3E")}
.sym-kuendigung{--sym:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z%22/%3E%3Cpath d=%22M14 3v5h5%22/%3E%3Cpath d=%22M10 12l4 4m0-4l-4 4%22/%3E%3C/svg%3E")}
.sym-abschluss{--sym:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 9L12 5 2 9l10 4 10-4v6%22/%3E%3Cpath d=%22M6 10.6V16c0 1.7 2.7 3 6 3s6-1.3 6-3v-5.4%22/%3E%3C/svg%3E")}
.sym-archiv{--sym:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%224%22 width=%2218%22 height=%224%22 rx=%221%22/%3E%3Cpath d=%22M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8%22/%3E%3Cpath d=%22M10 12h4%22/%3E%3C/svg%3E")}
.sym-download{--sym:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2%22/%3E%3Cpath d=%22M7 11l5 5 5-5%22/%3E%3Cpath d=%22M12 4v12%22/%3E%3C/svg%3E")}
.sym-hochladen{--sym:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2%22/%3E%3Cpath d=%22M7 9l5-5 5 5%22/%3E%3Cpath d=%22M12 4v12%22/%3E%3C/svg%3E")}
.sym-notiz{--sym:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 4h16v12H8l-4 4z%22/%3E%3Cpath d=%22M8 9h8%22/%3E%3Cpath d=%22M8 12h5%22/%3E%3C/svg%3E")}
.sym-stift{--sym:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16z%22/%3E%3Cpath d=%22M13.5 6.5l4 4%22/%3E%3C/svg%3E")}
.sym-ordner{--sym:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2%22/%3E%3Cpath d=%22M10 13h5%22/%3E%3Cpath d=%22M13 11l2 2-2 2%22/%3E%3C/svg%3E")}
.sym-loeschen{--sym:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 7h16%22/%3E%3Cpath d=%22M10 11v6M14 11v6%22/%3E%3Cpath d=%22M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12%22/%3E%3Cpath d=%22M9 7V4h6v3%22/%3E%3C/svg%3E")}
.sym-person{--sym:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%229%22 cy=%227%22 r=%224%22/%3E%3Cpath d=%22M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2%22/%3E%3Cpath d=%22M16 11h6M19 8v6%22/%3E%3C/svg%3E")}
.sym-auge{--sym:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3C/svg%3E")}
.sym-kalender{--sym:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%225%22 width=%2216%22 height=%2216%22 rx=%222%22/%3E%3Cpath d=%22M16 3v4M8 3v4M4 11h16%22/%3E%3Cpath d=%22M10 16h4%22/%3E%3Cpath d=%22M12.5 14.5L14 16l-1.5 1.5%22/%3E%3C/svg%3E")}
.sym-absagen{--sym:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M10 10l4 4m0-4l-4 4%22/%3E%3C/svg%3E")}
.sym-schloss{--sym:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%225%22 y=%2211%22 width=%2214%22 height=%2210%22 rx=%222%22/%3E%3Cpath d=%22M8 11V7a4 4 0 0 1 8 0v4%22/%3E%3C/svg%3E")}
.sym-ergebnis{--sym:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 20h16%22/%3E%3Cpath d=%22M7 16v-5M12 16V6M17 16v-8%22/%3E%3C/svg%3E")}
.sym-kopieren{--sym:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%228%22 y=%228%22 width=%2212%22 height=%2212%22 rx=%222%22/%3E%3Cpath d=%22M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2%22/%3E%3C/svg%3E")}
.sym-neu{--sym:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 11a8 8 0 1 0-2.3 5.7%22/%3E%3Cpath d=%22M20 5v6h-6%22/%3E%3C/svg%3E")}
.sym-merken{--sym:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 4h10a1 1 0 0 1 1 1v15l-6-4-6 4V5a1 1 0 0 1 1-1%22/%3E%3C/svg%3E")}
.sym-liste{--sym:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 6h11M9 12h11M9 18h11%22/%3E%3Cpath d=%22M5 6v.01M5 12v.01M5 18v.01%22/%3E%3C/svg%3E")}
/* Umschalter ueber den Personenlisten (Studierende, Bewerber, Absolventen, Archiv). */
/* Ansichten wechseln (Seiten) als Reiter mit Unterstrich (.seg.reiter: Personen, Aufgaben), Filter bleiben Segmentschalter. */
.seg.reiter{display:flex;flex-wrap:wrap;gap:4px 26px;margin:0 0 22px;padding:0;background:none;border:0;border-bottom:1px solid var(--border);border-radius:0;box-shadow:none}
.seg.reiter a{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-text);padding:10px 0;margin-bottom:-1px;border-radius:0;
  border-bottom:2px solid transparent;color:var(--muted);background:none;box-shadow:none}
.seg.reiter a:hover{color:var(--text)}
.seg.reiter a.active{background:none;color:var(--text);border-bottom-color:var(--navy);box-shadow:none}
/* Am Telefon (wie .seg-wahl bis 820 px) steht statt der Reiter die Auswahl. */
@media (max-width:820px){ .seg.reiter:has(.seg-wahl){border-bottom:0} .seg.reiter:has(.seg-wahl) a{display:none} }
/* Zahl am Reiter: immer da, dunkel mit weisser Zahl, am gewaehlten Reiter weiss mit dunkler Zahl.
   Der goldene Ring (achtung) zeigt Neues oder eine faellige Entscheidung. */
.reiter-zahl{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  font-size:var(--fs-mark);font-weight:700;background:var(--border);color:var(--text);font-variant-numeric:tabular-nums}
.seg a.active .reiter-zahl{background:var(--navy);color:#fff}
.reiter-zahl.achtung{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--gold)}
.bew-marke{display:inline-block;margin-top:5px}
/* Umsatz: Zeitraum als Reiter, rechts Spanne und PDF-Menue, darunter vier Kennzahlen und die
   Angebote als Zeilen mit Balken nach Umsatz. */
.ums-kopf{display:flex;align-items:flex-end;gap:10px 20px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin:0 0 22px;max-width:1300px}
.ums-kopf .seg.reiter{border-bottom:0;margin:0 0 -1px}
.seg.reiter #btn-zeitraum{border:0;border-bottom:2px solid transparent;border-radius:0;background:none;box-shadow:none;padding:10px 2px;margin-bottom:-1px;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center}
.seg.reiter #btn-zeitraum svg{width:17px;height:17px}
.seg.reiter #btn-zeitraum:hover{color:var(--text)}
.seg.reiter #btn-zeitraum.active{background:none;box-shadow:none;color:var(--text);border-bottom-color:var(--navy)}
.ums-kopf-rechts{margin-left:auto;display:flex;align-items:center;gap:14px;padding-bottom:7px}
.pdf-menue{position:relative}
.pdf-menue > summary{list-style:none;cursor:pointer}
.pdf-menue > summary::-webkit-details-marker{display:none}
.pdf-menue-liste{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:230px;padding:6px;display:flex;flex-direction:column;gap:2px;
  background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-md)}
.pdf-menue-liste .btn{justify-content:flex-start;width:100%;padding:9px 10px;border:0;background:none;color:var(--text)}
.pdf-menue-liste .btn:hover,.pdf-menue-liste .btn:focus-visible{background:var(--panel-2);color:var(--text)}
.ums-karte{max-width:1300px}
.ums-zeile{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.6fr) 120px;gap:8px 18px;align-items:center;padding:11px 18px;border-top:1px solid var(--border-2)}
.card-h + .ums-zeile{border-top:0}
.ums-name{display:flex;align-items:flex-start;gap:10px;min-width:0}
.ums-name i{width:9px;height:9px;border-radius:50%;flex:none;margin-top:6px}
.ums-name b{font-weight:600}
.ums-name small{display:block;font-size:var(--fs-mark);color:var(--faint);margin-top:2px;line-height:1.4}
.ums-balken{height:8px;border-radius:999px;background:var(--panel-2);overflow:hidden}
.ums-balken b{display:block;height:100%;border-radius:999px}
.ums-betrag{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.ums-summe{background:var(--panel-2);font-weight:700;border-top:1px solid var(--border)}
.ums-grund{font-weight:400;color:var(--muted);font-size:var(--fs-klein)}
.ums-hinweis{padding:10px 18px;border-top:1px solid var(--border-2);font-size:var(--fs-klein)}
@container inhalt (max-width:620px){
  .ums-zeile{grid-template-columns:minmax(0,1fr) auto}
  .ums-zeile .ums-balken,.ums-summe .ums-grund{grid-column:1 / -1;grid-row:2}
  .ums-kopf-rechts{margin-left:0;width:100%;justify-content:space-between}
}
/* Box: Ordner als Karten mit Ordnerbild (Farbe und Symbol), Dokumente als Liste mit Dateiart,
   Umschalter Liste oder Kacheln im Kopf. */
.box-gruppe{padding:14px 18px 0;font-size:var(--fs-mark);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.ordner-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;padding:14px 18px 20px}
.ablage-kachel.ordner-karte{flex-direction:row;align-items:center;gap:18px;padding:16px 18px;border:1px solid var(--border);border-radius:10px;
  background:var(--panel);color:var(--text);text-decoration:none;transition:border-color .15s var(--ease),background .15s var(--ease)}
.ablage-kachel.ordner-karte:hover,.ablage-kachel.ordner-karte:focus-visible{border-color:color-mix(in srgb,var(--rust) 40%,transparent);background:color-mix(in srgb,var(--rust) 5%,var(--panel))}
.ordner-karte .ordner-bild{width:84px}
.ordner-karte-text{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;text-align:left}
.ordner-karte-text b{font-size:var(--fs-gross);font-weight:600;overflow-wrap:anywhere;line-height:1.3}
.ordner-karte-text small{font-size:var(--fs-klein);color:var(--muted)}
.dok-liste{padding:6px 0 4px}
.box-gruppe + .dok-liste{padding-top:6px}
.dok-zeile{display:grid;grid-template-columns:52px minmax(0,1fr) 100px 80px;gap:14px;align-items:center;padding:10px 18px;border-top:1px solid var(--border-2);
  color:var(--text);text-decoration:none}
.dok-liste .dok-zeile:first-child{border-top:0}
.dok-zeile:hover,.dok-zeile:focus-visible{background:var(--panel-2)}
.dok-typ{display:block;text-align:center;padding:5px 0;border-radius:6px;font-size:10.5px;font-weight:700;letter-spacing:.04em;background:var(--panel-2);color:var(--muted)}
.dok-typ-pdf{background:color-mix(in srgb,var(--red) 10%,var(--panel));color:var(--red)}
.dok-typ-doc,.dok-typ-docx,.dok-typ-odt,.dok-typ-pages{background:color-mix(in srgb,#2c5b94 11%,var(--panel));color:#2c5b94}
.dok-typ-xls,.dok-typ-xlsx,.dok-typ-csv,.dok-typ-numbers{background:color-mix(in srgb,var(--green) 11%,var(--panel));color:var(--green)}
.dok-typ-jpg,.dok-typ-jpeg,.dok-typ-png,.dok-typ-heic,.dok-typ-gif,.dok-typ-webp{background:color-mix(in srgb,#8e5a9b 11%,var(--panel));color:#8e5a9b}
.dok-zeile-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.dok-zeile-text b{font-weight:600;overflow-wrap:anywhere}
.dok-zeile-text small{font-size:var(--fs-mark);color:var(--faint)}
.dok-zeile-datum,.dok-zeile-groesse{font-size:var(--fs-klein);color:var(--muted);font-variant-numeric:tabular-nums}
.dok-zeile-groesse{text-align:right}
/* Notizen an Dokumenten und Ordnern (Box und Akte). Die Huelle traegt Faehnchen und Knopf
   neben dem Link, damit kein Knopf in einem Link steckt. Faehnchen wie an Buchungen. */
.dok-huelle{position:relative;min-width:0}
.dok-kachel{position:relative}
.dok-huelle > .fahne,.dok-kachel > .fahne{top:10px;z-index:2}
.dok-huelle > .dok-kachel{height:100%}
.dok-notiz-knopf{position:absolute;z-index:2}
.dok-raster .dok-notiz-knopf{top:8px;right:8px;background:var(--panel);box-shadow:var(--shadow)}
/* In den Kacheln erscheint der Knopf beim Darueberfahren. Ohne Maus (Telefon, Tablet) steht er immer. */
@media (hover:hover){
  .dok-raster .dok-notiz-knopf{opacity:0;transition:opacity .15s var(--ease)}
  .dok-raster .dok-huelle:hover .dok-notiz-knopf,.dok-raster .dok-notiz-knopf:focus-visible{opacity:1}
}
/* In der Liste: Knopf rechts am Ende der Zeile, Faehnchen links. Hat eine Zeile ein
   Faehnchen, ruecken alle Zeilen ein, damit die Dateiarten untereinander stehen. */
.dok-liste .dok-notiz-knopf{top:50%;right:14px;transform:translateY(-50%)}
.dok-liste .dok-huelle > .dok-zeile{padding-right:58px}
.dok-liste.mit-fahnen .dok-huelle > .dok-zeile{padding-left:56px}
.dok-liste .dok-huelle > .fahne{top:50%;margin-top:-14px}
.dok-liste > .dok-huelle .dok-zeile{border-top:0}
.dok-liste > .dok-huelle + .dok-huelle{border-top:1px solid var(--border-2)}
/* Schmal (Telefon): das Faehnchen steht ueber der Zeile wie an Buchungen, statt links Platz
   zu nehmen; der Titel bricht nur zwischen Woertern um. */
@container inhalt (max-width:620px){
  .dok-liste.mit-fahnen .dok-huelle > .dok-zeile{padding-left:18px}
  .dok-liste .dok-huelle:has(> .fahne) > .dok-zeile{padding-top:42px}
  .dok-liste .dok-huelle > .fahne{top:8px;margin-top:0}
  .dok-liste .dok-huelle > .dok-zeile{padding-right:54px}
  .dok-zeile-text b{overflow-wrap:break-word}
}
/* Ordnerkarte: Faehnchen oben links. Im Kopf des Ordners steht es klein hinter dem Namen. */
.ablage-kachel.ordner-karte{position:relative}
.ordner-karte > .fahne{top:8px}
.card-h .kopf-fahne{position:relative;display:inline-block;width:30px;height:22px;align-self:center;flex:none}
.card-h .kopf-fahne .fahne{top:0;width:30px;height:22px}
.card-h .kopf-fahne .fahne-form{line-height:22px;font-size:13px;padding-left:7px}
/* Die Notiz am Dokument als Karte auf seiner Seite, die ganze Zeile oeffnet das Fenster. */
.pz-liste > .pz.dok-notiz-zeile{width:100%;text-align:left;background:none;border:0;font:inherit;color:inherit;cursor:pointer;grid-template-columns:minmax(0,1fr)}
/* Woran die Notiz haengt, im Fenster unter der Ueberschrift. */
.notiz-bezug{display:inline-flex;max-width:100%;margin:-6px 0 12px;padding:4px 11px;border-radius:999px;background:var(--panel-2);
  border:1px solid var(--border);font-size:var(--fs-klein);font-weight:600;color:var(--muted);overflow-wrap:anywhere}
.card-h .kopf-umschalt{display:inline-flex;margin-right:8px;border:1px solid rgba(255,255,255,.3);border-radius:8px;overflow:hidden}
.card-h .kopf-umschalt a{padding:0 10px;height:26px;display:inline-flex;align-items:center;font-size:var(--fs-mark);font-weight:700;color:rgba(255,255,255,.8);text-decoration:none}
.card-h .kopf-umschalt a + a{border-left:1px solid rgba(255,255,255,.3)}
.card-h .kopf-umschalt a.an{background:rgba(255,255,255,.16);color:#fff}
.card-h .kopf-umschalt a:hover{color:#fff}
/* Am Telefon brechen die Kopfknoepfe um, statt ueber den Kartenrand zu laufen. */
@media (max-width:820px){ .card-h .kopf-knoepfe{flex-wrap:wrap;row-gap:8px;max-width:100%} }
@container inhalt (max-width:620px){
  .dok-zeile{grid-template-columns:48px minmax(0,1fr) auto}
  .dok-zeile-datum{display:none}
}

/* Personenzeilen: wer gebucht oder sich angemeldet hat. Kreis mit Kuerzel, Name mit
   Schildchen, Kontakt mit Symbol, darunter Bestellung und Stand, rechts Betrag und Knoepfe. */
.pz-liste{display:flex;flex-direction:column}
.pz{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:14px;padding:16px 18px;border-top:1px solid var(--border-2)}
.pz-liste > .pz:first-child{border-top:0}
.pz.hat-fahne{padding-top:46px !important}
.pz-kreis{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-klein);font-weight:700;letter-spacing:.02em;
  background:color-mix(in srgb,var(--rust) 12%,var(--panel));color:var(--rust)}
.pz-mitte{min-width:0;display:flex;flex-direction:column;gap:5px}
.pz-name{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:var(--fs-gross);font-weight:600;line-height:1.3}
.pz-name b{font-weight:600;overflow-wrap:anywhere}
.pz-schild{display:inline-block;padding:2px 9px;border-radius:6px;font-size:var(--fs-mark);font-weight:700;line-height:1.5;white-space:nowrap;
  background:color-mix(in srgb,var(--rust) 11%,var(--panel));color:var(--rust)}
.pz-schild.gutschein{background:#f3ecdf;color:#6b5a38}
.pz-schild.schule{background:color-mix(in srgb,var(--green) 11%,var(--panel));color:#2f5e46}
.pz-schild.rot{background:color-mix(in srgb,var(--red) 10%,var(--panel));color:#a32d2d}
.pz-schild.amber{background:color-mix(in srgb,var(--amber) 11%,var(--panel));color:var(--amber)}
/* Buchungen über Jochen Schweizer mydays (JSMD Group), auf Wunsch von Michael violett,
   damit sie neben Gutschein-Beige und Shop-Petrol sofort auffallen. Gleiche Farbe wie die
   Zeile im Umsatz (JSMD_FARBE in module/seminar/jsmd.php). */
.pz-schild.jsmd{background:color-mix(in srgb,var(--violet) 12%,var(--panel));color:var(--violet)}
.pz-kontakt{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:var(--fs-klein)}
.pz-kontakt a,.pz-kontakt span{display:inline-flex;align-items:center;gap:6px;color:var(--rust);text-decoration:none;overflow-wrap:anywhere;min-width:0}
.pz-kontakt span{color:var(--muted)}
.pz-kontakt a:hover{text-decoration:underline}
.pz-kontakt svg{width:15px;height:15px;flex:none;color:var(--muted)}
.pz-meta{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:var(--fs-mark);color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums}
.pz-meta .warn{color:var(--amber);font-weight:700}
.pz-meta .rot{color:var(--red);font-weight:700}
.pz-notiz{margin-top:4px;background:var(--panel-2);border:1px solid var(--border-2);border-radius:var(--radius-sm);padding:8px 11px;
  font-size:var(--fs-klein);color:var(--muted);line-height:1.5;overflow-wrap:anywhere;white-space:pre-line}
.pz-rechts{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.pz-betrag{font-size:var(--fs-gross);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.pz-betrag.leise{font-size:var(--fs-klein);font-weight:400;color:var(--muted)}
.pz-rechts .uacts{gap:7px;flex-wrap:nowrap}
.pz.aus .pz-kreis{background:var(--border-2);color:var(--muted)}
.pz.aus .pz-name b{text-decoration:line-through;color:var(--muted)}
.pz.aus .pz-kontakt,.pz.aus .pz-betrag{opacity:.6}
.pz-fuss{display:flex;justify-content:space-between;gap:12px;padding:12px 18px;background:var(--panel-2);border-top:1px solid var(--border-2);
  font-size:var(--fs-klein);color:var(--muted)}
.pz-fuss b{color:var(--text);font-weight:700;white-space:nowrap}
/* Tage eines selbst gewaehlten Zeitraums als kleine Kacheln. */
.tag-kacheln{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px}
.tag-kacheln div{flex:1 1 0;min-width:48px;max-width:70px;border:1px solid var(--border);border-radius:var(--radius-sm);text-align:center;padding:7px 0 6px;
  font-size:var(--fs-mark);color:var(--muted);line-height:1.3}
.tag-kacheln b{display:block;font-size:var(--fs-zahl);color:var(--text);font-weight:600}
.tag-spanne{padding:10px 18px 16px;font-size:var(--fs-klein);color:var(--muted)}
.tag-marken{display:flex;align-items:center;gap:8px;padding:16px 18px 12px}
@container inhalt (max-width:620px){
  .pz{grid-template-columns:36px minmax(0,1fr);gap:10px 12px;padding:14px}
  .pz-kreis{width:36px;height:36px;font-size:var(--fs-mark)}
  .pz-rechts{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between}
  .pz-fuss{padding:12px 14px}
}
/* Huelle um Tabellen: quer verschiebbar nur, wenn die Tabelle nicht in ihre Karte passt. */
.tbl-huelle.zu-breit{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
/* Ein Hinweis, der rechts ueber den Bildschirm liefe, haengt sich rechtsbuendig an den Knopf
   (die Klasse setzt hinweiseAmRandStarten beim Zeigen). Unsichtbare Hinweise am Rand
   schieben die Seite nicht mehr quer. */
.tip-an-rand[data-tip]::after,.card .tip-an-rand[data-tip]:last-child::after{left:auto;right:0;transform:translate(0,4px)}
.tip-an-rand[data-tip]::before,.card .tip-an-rand[data-tip]:last-child::before{left:auto;right:13px;transform:translate(0,4px) rotate(45deg)}
.tip-an-rand[data-tip]:hover::after,.tip-an-rand[data-tip]:focus-visible::after{transform:translate(0,0)}
.tip-an-rand[data-tip]:hover::before,.tip-an-rand[data-tip]:focus-visible::before{transform:translate(0,0) rotate(45deg)}
/* Nicht gezeigte Hinweise belegen keinen Platz. Sonst ragten sie unsichtbar ueber den Rand
   und schoben Seite oder Karte quer. */
[data-tip]:not(:hover):not(:focus-visible)::after{content:none}
.kal-tag.pr-tag.tip-an-rand[data-tip]::after{left:auto;right:0}
.kal-tag.pr-tag.tip-an-rand[data-tip]::before{left:auto;right:13px}
/* Die Farbwahl in einer Einstellungszeile nimmt die volle Breite und bricht um. Als
   Flex-Kind ohne Breite rechnete das Raster mit seiner Hoechstbreite und lief am
   Telefon rechts aus der Karte. */
.ez-wert > .farb-wahl{flex:1 1 100%;width:100%;min-width:0}
/* Mein Konto, Dein Dashboard: je Karte Griff, Name, Pfeile und rechts der Schalter. */
.dash-folge .ez-schalter{flex:none;margin-left:6px}
.dash-folge .menue-zeile:has(.ez-schalter:not(:checked)) .menue-name{color:var(--muted)}
/* Gutscheine: Angebotskuerzel in seiner Farbe statt Personenkreis, der Stand als Zeile. */
.pz-kreis.gs-marke{border-radius:9px;color:#fff;font-size:var(--fs-mark)}
.gs-staende{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.gs-staende .gs-stand{margin-top:0}
/* Alle Schilder mit Rand, damit sie gleich hoch sind; nur „wartet“ zeigt ihn. */
.gs-stand{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;margin-top:6px;padding:5px 11px;border-radius:var(--radius-sm);border:1px solid transparent;
  font-size:var(--fs-klein);font-weight:600;line-height:1.35}
.gs-stand svg{width:15px;height:15px;flex:none}
.gs-stand.wartet{background:var(--panel-2);border:1px solid var(--border-2);color:var(--muted);font-weight:500}
.gs-stand.halb{background:color-mix(in srgb,var(--amber) 11%,var(--panel));color:var(--amber)}
.gs-stand.ein{background:color-mix(in srgb,var(--green) 11%,var(--panel));color:#2f5e46}
.gs-knopf{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.gs-knopf svg{width:16px;height:16px;flex:none}
/* Zeilen, die als Ganzes zu einer Seite fuehren (Angebote, Pruefungstermine, Bestellungen). */
.pz-mittig{align-items:center}
a.pz-link{color:inherit;text-decoration:none}
a.pz-link:hover,a.pz-link:focus-visible{background:var(--panel-2)}
a.pz-link:hover .pz-name b{color:var(--rust)}
.pz-link .xbtn{pointer-events:none}
.pz-rechts.pz-quer{flex-direction:row;align-items:center;gap:12px}
.pz-zahl{white-space:nowrap;font-size:var(--fs-klein);color:var(--muted);padding:4px 11px;border-radius:999px;background:var(--panel-2);border:1px solid var(--border-2)}
.pz-zahl b{font-weight:700;color:var(--text)}
.pz-zahl.leer{opacity:.7}
.pz-schild.grau{background:var(--border-2);color:var(--muted)}
.pz.aus-shop .pz-kreis{opacity:.5}
.pz.aus-shop .pz-name b{color:var(--muted)}
@container inhalt (max-width:620px){
  .pz-rechts.pz-quer{justify-content:flex-start}
}
/* Der Tag als kleine Kachel vorn in einer Zeile (Aufnahmepruefungen, Bestellungen). */
.pz-tag{width:42px;height:46px;border:1px solid var(--border);border-radius:9px;background:var(--panel);display:flex;flex-direction:column;
  align-items:center;justify-content:center;line-height:1.1;font-size:var(--fs-mark);color:var(--muted)}
.pz-tag b{font-size:var(--fs-gross);color:var(--text);font-weight:700}
.pz-rechts.pz-quer .uacts{flex-wrap:wrap;justify-content:flex-end}
@container inhalt (max-width:620px){ .pz-tag{width:36px;height:40px} }
/* Bestellungen des Monats: Zwischenzeile je Kauftag. */
.pz-gruppe{padding:8px 18px;background:var(--panel-2);border-top:1px solid var(--border-2);font-size:var(--fs-mark);font-weight:700;color:var(--muted);letter-spacing:.02em}
.pz-liste > .pz-gruppe:first-child{border-top:0}
.pz-gruppe + .pz{border-top:1px solid var(--border-2)}
.pz-schild.neu{background:var(--gold);color:var(--accent-ink)}
.best-liste .pz-betrag{min-width:84px;text-align:right}
@container inhalt (max-width:620px){ .pz-gruppe{padding:8px 14px} .best-liste .pz-betrag{min-width:0;text-align:left} }
/* Telefon: Zahl und Knoepfe duerfen umbrechen, die Knoepfe bleiben dabei eine Reihe. Reiter
   stehen in einer Zeile und lassen sich quer schieben, statt untereinander umzubrechen. */
@container inhalt (max-width:620px){
  .pz-rechts.pz-quer{flex-wrap:wrap;row-gap:10px}
  .pz-rechts.pz-quer .uacts{flex-wrap:nowrap}
}
@media (max-width:820px){
  .seg.reiter{flex-wrap:nowrap;overflow-x:auto;gap:22px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .seg.reiter::-webkit-scrollbar{display:none}
  .seg.reiter a,.seg.reiter #btn-zeitraum{flex:none;white-space:nowrap}
}
/* Umfragen: Symbol statt Kuerzel, der Name fuehrt in die Umfrage. */
.pz-kreis.uf-marke{background:color-mix(in srgb,var(--rust) 12%,var(--panel));color:var(--rust)}
.pz-kreis.uf-marke svg{width:20px;height:20px}
a.pz-titel-link{color:inherit;text-decoration:none}
a.pz-titel-link:hover b{color:var(--rust)}
/* Aufgaben als Zeilen: vorn das Kuerzel, fuer wen die Aufgabe ist. */
.auf-zeile .fuer-kreise{display:flex;align-items:center;justify-content:center;min-width:42px}
.pz-gruppe.ist-ueber{color:var(--red)}
.pz-meta .rot{color:var(--red);font-weight:700}
.auf-zeile .pz-meta .bezug-chip{font-size:var(--fs-mark)}
@container inhalt (max-width:620px){ .auf-zeile .fuer-kreise{min-width:36px} }
.pz.auf-zeile{grid-template-columns:minmax(42px,auto) minmax(0,1fr) auto}
@container inhalt (max-width:620px){ .pz.auf-zeile{grid-template-columns:minmax(36px,auto) minmax(0,1fr)} }
.pz-bild{width:42px;height:42px;border-radius:50%;object-fit:cover;display:block}
@container inhalt (max-width:620px){ .pz-bild{width:36px;height:36px} }
.pz-ordner{width:42px;display:flex;align-items:center;justify-content:center}
.pz-ordner .ordner-bild{width:38px}
.pz-typ{width:42px;padding:6px 0;font-size:10.5px}
.pz-hier{background:color-mix(in srgb,var(--rust) 6%,var(--panel))}
.pz.pz-kompakt{grid-template-columns:minmax(0,1fr) auto;padding:10px 12px}
@container inhalt (max-width:620px){ .pz.pz-kompakt{grid-template-columns:minmax(0,1fr)} .pz.pz-kompakt .pz-rechts{grid-column:1} }

/* Datentabellen im neuen Design (Studierende, Level, Semesterwechsel, Prüfungen, Listen,
   Sätze, Verlauf): ruhiger Kopf ohne Großbuchstaben wie die Zwischenzeilen der
   Zeilenlisten, Zeilen mittig, etwas mehr Luft. Am Telefon gilt weiter die Kartenansicht. */
@media (min-width:821px){
  .tbl thead{background:var(--panel-2);border-bottom:1px solid var(--border-2)}
  .tbl thead th{font-size:var(--fs-mark);text-transform:none;letter-spacing:.02em;font-weight:700;color:var(--muted);padding:10px 18px}
  .tbl td{padding:14px 18px;vertical-align:middle}
  .tbl tr.grouprow td{font-size:var(--fs-mark);text-transform:none;letter-spacing:.02em;padding:9px 18px}
  .tbl tfoot td{border-top:1px solid var(--border);padding:12px 18px}
}
/* Level am Telefon: die Auswahl passt sich der Zelle an, statt 170 Pixel fest zu nehmen. */
@media (max-width:820px){ .level-tbl select{width:auto;max-width:100%;min-width:0} }
/* Meta-Zeile: Text und Schildchen stehen auf einer Mittellinie. */
.pz-meta{align-items:center}
.pz-meta .bezug-chip{margin-top:0}
.auf-von{display:inline-flex;align-items:center;gap:5px}

/* Studierende und Absolventen: Zeilen mit festen Spalten rechts, sortierbar ueber die
   Beschriftungen, Schnellfilter darueber. Unter 620 Pixeln Inhaltsbreite stehen die
   Felder mit Beschriftung unter dem Namen, sortiert wird dann ueber die Auswahl. */
.stud-filter{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px 18px;background:var(--panel-2);border-bottom:1px solid var(--border-2);font-size:var(--fs-klein);color:var(--muted)}
.stud-filter-wort{margin-right:4px}
.stud-chip{border:1px solid var(--border);border-radius:999px;padding:3px 11px;background:var(--panel);font:inherit;font-size:var(--fs-klein);color:var(--muted);cursor:pointer}
.stud-chip:hover{color:var(--text)}
.stud-chip.an{border-color:color-mix(in srgb,var(--rust) 45%,transparent);color:var(--rust);background:color-mix(in srgb,var(--rust) 10%,var(--panel));font-weight:600}
.stud-sortwahl{display:none}
.stud-raster{display:grid;grid-template-columns:var(--spalten);gap:12px;align-items:center;padding:10px 18px}
.stud-kopf{border-bottom:1px solid var(--border-2);padding-top:9px;padding-bottom:9px}
.stud-sort{background:none;border:0;padding:0;font:inherit;font-size:var(--fs-mark);font-weight:700;color:var(--muted);cursor:pointer;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stud-sort.mitte{text-align:center}
.stud-sort:hover{color:var(--text)}
.stud-sort::after{content:"↕";margin-left:4px;opacity:.4}
.stud-sort.ab-an{color:var(--text)}
.stud-sort.ab-an[data-richtung="auf"]::after{content:"↑";opacity:1}
.stud-sort.ab-an[data-richtung="ab"]::after{content:"↓";opacity:1}
a.stud-zeile{border-top:1px solid var(--border-2);color:inherit;text-decoration:none}
.stud-kopf + .stud-zeile{border-top:0}
a.stud-zeile:hover,a.stud-zeile:focus-visible{background:var(--panel-2)}
a.stud-zeile:hover .stud-name b{color:var(--rust)}
.stud-zeile[hidden]{display:none}
/* Zu klären: Unterlagen und Daten passen noch nicht sicher zusammen (Schalter an der Person). */
.stud-zeile.zu-klaeren,.pz.zu-klaeren{background:color-mix(in srgb,var(--red) 13%,var(--panel))}
a.stud-zeile.zu-klaeren:hover,a.stud-zeile.zu-klaeren:focus-visible{background:color-mix(in srgb,var(--red) 18%,var(--panel))}
.stud-bild{width:44px;height:44px;border-radius:50%;object-fit:cover;display:grid;place-items:center}
.stud-bild.fehlt{border:1px dashed var(--feld-rand);background:var(--panel-2);color:var(--muted);font-size:var(--fs-mark);font-weight:700}
.stud-name{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.stud-name b{font-weight:600;font-size:var(--fs-text);overflow-wrap:anywhere}
.stud-name small{flex-basis:100%;font-size:var(--fs-mark)}
.stud-feld{font-size:var(--fs-klein);font-variant-numeric:tabular-nums;min-width:0}
.stud-feld.mitte{text-align:center}
.stud-feld[data-sp="Abschluss"]{display:flex;flex-wrap:wrap;gap:4px}
/* Spalten der Module mit Schildern (etwa AGs): mittig, umbrechen in schmalen Spalten untereinander. */
.stud-feld.stud-schilder{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.stud-level{display:inline-block;padding:3px 9px;border-radius:6px;background:color-mix(in srgb,var(--rust) 12%,var(--panel));color:var(--rust);font-weight:700;font-size:var(--fs-mark);white-space:nowrap}
.stud-leer{color:var(--faint)}
.stud-web{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-mark);font-weight:700;color:#2f5e46}
.stud-web i{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block}
.stud-web.nein{color:var(--muted)}
.stud-web.nein i{background:#c9c3b8}
.stud-pfeil{display:flex;justify-content:flex-end;color:var(--faint)}
.stud-pfeil svg{width:16px;height:16px}
.stud-nichts{padding:18px;color:var(--muted)}
@container inhalt (max-width:1060px){
  /* 8px statt 10px: bei 940px Fensterbreite bleiben dem Namen 90px neben Start (90px fuer "12. Semester"). */
  .stud-raster{grid-template-columns:var(--spalten-eng);gap:8px;padding-left:14px;padding-right:14px}
  .stud-bild{width:40px;height:40px}
}
@container inhalt (max-width:620px){
  .stud-kopf{display:none}
  .stud-feld:has(> .stud-leer:only-child){display:none}
  .stud-sortwahl{display:block;margin-left:auto;font:inherit;font-size:var(--fs-klein);padding:4px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--panel)}
  .stud-raster{grid-template-columns:40px minmax(0,1fr) 16px;gap:4px 12px;padding:12px 14px;align-items:start}
  .stud-bild{grid-row:1 / span 6}
  .stud-pfeil{grid-column:3;grid-row:1}
  .stud-feld{grid-column:2;display:flex;align-items:center;gap:10px;text-align:left}
  .stud-feld.mitte{text-align:left}
  .stud-feld::before{content:attr(data-sp);color:var(--muted);font-size:var(--fs-mark);min-width:118px;flex:none}
  .stud-feld[data-sp="Abschluss"]{flex-wrap:wrap}
  .stud-feld.stud-schilder{justify-content:flex-start}
}
.stud-name b{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
@container inhalt (max-width:1060px){
  .stud-bild{width:36px;height:36px}
  .stud-sort{white-space:normal;line-height:1.25}
  .stud-kopf .stud-sort[data-schluessel="web"]{font-size:0}
  .stud-kopf .stud-sort[data-schluessel="web"]::after{font-size:var(--fs-mark);margin-left:0}
  .stud-web{font-size:0;gap:0}
  .stud-web i{width:10px;height:10px}
}
@container inhalt (max-width:620px){
  .stud-web{font-size:var(--fs-mark);gap:5px}
  .stud-web i{width:8px;height:8px}
}
/* Kuchen-Legende: lange Angebotsnamen brechen um, statt abgeschnitten zu werden. */
.kuchen-name{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}

/* Kalender unter Administration. Die Ebenen stehen in einem Fenster unter dem Symbol im
   Kartenkopf, mit denselben Einstellungszeilen und Schaltern wie in den Einstellungen.
   Interne Termine sind gestrichelt, Eintraege zu Studierenden hell mit Symbol. */
.kal-karte{position:relative}
.kal-ebenen-knopf{position:relative}
.card-h .kal-ebenen-knopf.an{background:#fff;color:var(--navy);border-color:#fff}
.kal-ebenen-punkt{position:absolute;top:-4px;right:-4px;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px var(--navy)}
.kal-ebenen{position:absolute;top:52px;right:14px;z-index:40;width:320px;max-width:calc(100% - 28px);background:var(--panel);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);overflow:hidden}
.kal-ebenen[hidden]{display:none}
.kal-ebenen-kopf{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--navy);color:#fff;font-weight:600;font-size:var(--fs-text)}
.kal-ebenen-zu{margin-left:auto;width:28px;height:28px;display:grid;place-items:center;border:0;background:none;color:#fff;cursor:pointer;border-radius:8px}
.kal-ebenen-zu:hover{background:rgba(255,255,255,.12)}
.kal-ebenen-zu svg{width:16px;height:16px}
.kal-ebenen-gruppe{padding:10px 14px 4px;background:var(--panel-2);font-size:var(--fs-mark);font-weight:700;color:var(--muted);letter-spacing:.02em}
.kal-ebenen .ez-zeile.kal-ebene{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;cursor:pointer}
.kal-ebenen-gruppe + .kal-ebene{border-top:0}
.kal-ebenen-fuss{padding:10px 14px;border-top:1px solid var(--border-2);font-size:var(--fs-mark);color:var(--muted)}
@media (max-width:820px){
  .kal-ebenen{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;border-radius:14px 14px 0 0;box-shadow:var(--shadow-lg);max-height:85dvh;overflow-y:auto}
}
button.bel-balken{font:inherit;border:0;text-align:left;cursor:pointer}
.bel-balken.bel-intern{background:var(--panel);color:var(--text);border:1.5px dashed var(--f);font-size:var(--fs-mark)}
.bel-intern .bel-kuerzel{background:var(--f);color:#fff}
.bel-intern .bel-serie{width:13px;height:13px;flex:none;color:var(--muted)}
.bel-balken.bel-stud{background:var(--panel-2);color:var(--text);border:1px solid var(--border);font-size:var(--fs-mark)}
.bel-stud svg{width:14px;height:14px;flex:none;color:var(--f)}
.bel-balken.bel-intern.klickbar:hover,.bel-balken.bel-stud.klickbar:hover{filter:none;box-shadow:0 3px 8px rgba(15,20,35,.14)}
.bel-legende i.kal-leg-shop{background:linear-gradient(90deg,#2c6e8f 0 33%,#e0a33a 33% 66%,#b8622e 66% 100%)}
.bel-legende i.kal-leg-intern{background:var(--panel);border:1.5px dashed var(--muted)}
.bel-legende i.kal-leg-stud{background:var(--panel-2);border:1px solid var(--border)}
button.pz.kal-zeile{font:inherit;color:inherit;text-align:left;background:var(--panel);border:0;border-top:1px solid var(--border-2);width:100%;cursor:pointer}
button.pz.kal-zeile:hover{background:var(--panel-2)}
.wahl-karten > label small{display:block;font-size:var(--fs-klein);font-weight:400;color:var(--muted);margin-top:2px}
.kt-vorschau{margin-top:12px;padding:10px 12px;border:1px solid var(--border-2);border-radius:var(--radius-sm);background:var(--panel-2);font-size:var(--fs-klein);line-height:1.5}
.kt-vorschau b{color:var(--text)}
.kt-serie-hinweis{margin:12px 0 0;font-size:var(--fs-klein)}
.kn-liste{margin-top:6px;border:1px solid var(--border-2);border-radius:var(--radius-sm);max-height:50dvh;overflow-y:auto}

/* Personenseite am schmalen Fenster: gespeichert wird ueber die mitlaufende Leiste unten.
   Der Knopf in der Karte "An der Person arbeiten" stuende sonst ein zweites Mal da; er
   bleibt im Markup, die Leiste loest ihn aus. */
@media (max-width:1000px){ #pers-speichern{display:none} }

/* Datums- und Zeitfelder: Safari auf dem iPhone gibt ihnen eine feste Mindestbreite und
   setzt den Wert in die Mitte. Sie liefen dadurch rechts aus der Karte. */
input[type=date],input[type=time],input[type=datetime-local]{min-width:0;max-width:100%;box-sizing:border-box}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:left}
@supports (-webkit-touch-callout:none){
  input[type=date],input[type=time],input[type=datetime-local]{-webkit-appearance:none;appearance:none;display:block;width:100%}
}
/* Datumswahl (js/datumwahl.js): das Browserfeld bleibt unsichtbar im Formular, davor steht
   ein Textfeld mit eigenem Kalender. Dessen Aufklappkalender war in Safari und der Mac-App
   klein, schwarz und liess sich nicht gestalten. Tage wie im grossen Kalender (.kal-tag):
   heute mit Petrol-Ring, gewaehlt in Gold. */
input.dw-orig{display:none !important}
/* Mit html und [type=text] staerker als .dlg-inner input[type=text], dessen background das Symbol sonst loescht. */
html input.dw-feld[type=text]{padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:17px}
html input.dw-feld[type=text]:focus{cursor:text}
.dw-feld[aria-invalid=true]{border-color:var(--red) !important}
.dw-feld:not(.ez-feld){width:100%}
.feld-paar > .dw-feld{flex:1;min-width:0}
.dw{position:fixed;inset:auto;margin:0;z-index:1000;width:min(318px,calc(100vw - 16px));overflow:visible;
  padding:14px 14px 12px;background:var(--panel);color:var(--text);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);font:inherit;font-size:var(--fs-text)}
.dw:not([popover]){display:none}
.dw-kopf{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0 0 10px}
.dw-kopf > div{display:flex;align-items:center;gap:2px}
.dw-pfeil,.dw-titel{border:0;background:transparent;color:var(--navy);font:inherit;cursor:pointer;border-radius:8px}
.dw-pfeil{width:32px;height:32px;font-size:20px;line-height:1;color:var(--muted)}
.dw-titel{padding:5px 8px;font-weight:700;font-size:var(--fs-gross)}
.dw-pfeil:hover,.dw-titel:hover:not(:disabled){background:var(--panel-2);color:var(--rust)}
.dw-titel:disabled{cursor:default;color:var(--navy)}
.dw .kal-tag{font-size:var(--fs-text)}
.dw .kal-tag.dw-nachbar:not(.gewaehlt){color:var(--faint);background:transparent;font-weight:500}
.dw-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.dw-raster .kal-tag{aspect-ratio:auto;padding:13px 0}
.dw .btn{display:block;width:100%;margin-top:12px;text-align:center}
@media (pointer:coarse){ .dw-pfeil{width:44px;height:44px} }
/* Volle Wochen im Kalender: ab mehr als fuenf Spuren stehen vier da, darunter je Tag ein
   Knopf "+ 3 weitere", der die Woche aufklappt. */
.bel-woche.zu .bel-spur-extra{display:none}
.bel-woche:not(.zu) .bel-spur-mehr{display:none}
.bel-mehr{height:22px;border:0;background:none;padding:0 6px;text-align:left;font:inherit;font-size:var(--fs-mark);font-weight:700;color:var(--rust);cursor:pointer;border-radius:6px}
.bel-mehr:hover{background:color-mix(in srgb,var(--rust) 8%,var(--panel))}

/* Fenster in Abschnitten (Vertrag, Leistung): je Teil eine Überschrift, eine feine Linie
   dazwischen, Felder mit Luft; zwei kurze Felder stehen nebeneinander. Beschriftungen in
   Fenstern in Schriftfarbe, damit sie sich von den grauen Erklärungen abheben. */
.dlg-teil{display:grid;gap:16px;margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.dlg-teil:first-of-type{margin-top:6px;padding-top:0;border-top:0}
.dlg-teil[hidden]{display:none}
.dlg-teil-h{margin:0;font-size:var(--fs-gross);font-weight:600;color:var(--navy);letter-spacing:-.005em}
.dlg-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;align-items:start}
@media (max-width:560px){ .dlg-zwei{grid-template-columns:minmax(0,1fr)} }
.dlg-inner .frow > label{color:var(--text)}
/* Knöpfe eines Umschalters und Pillen im Fenster sind keine Feldbeschriftung: ohne Abstand
   darunter, sonst steht unter den Knöpfen mehr Platz als darüber. */
.dlg-inner .frow .wahl-segment > label,.dlg-inner .frow label.chip{margin:0}
.dlg-inner .frow .wahl-segment > label:has(input:checked){color:var(--text)}
.dlg-zwei .wahl-segment{display:flex;width:max-content;height:calc(1.5em + 24px)}
.dlg-zwei .wahl-segment > label{justify-content:center}
/* Faehnchen offener Aufgaben in der Liste Studierende: mittig links an der Zeile. Hat eine
   Zeile der Liste eins, ruecken alle Zeilen samt Kopf ein, damit die Spalten buendig bleiben. */
.stud-zeile{position:relative}
.stud-zeile > .fahne{top:50%;margin-top:-14px}
.stud-liste:has(.stud-zeile > .fahne) .stud-raster{padding-left:56px}
/* Ein Bereich mit Haken als Abschnittsueberschrift (Fenster „Als PDF“ im Umsatz): der Haken schaltet
   alle Posten darunter, die Schrift bleibt die der Ueberschrift. */
.dlg-teil-h .chk{font:inherit;color:inherit;gap:10px}
.dlg-teil-h .chk input{width:18px;height:18px;margin:0;accent-color:var(--rust)}
/* Die Karte Studierende im Semesterwechsel traegt .form fuer die Felder; ohne diese Regel gab .form
   ihr 16 px Innenabstand, und der Kartenkopf stand weiss umrandet statt bis an die Kanten. */
.card.sw-karte.form{padding:0}

/* ---------- Telefon: nichts ragt aus der Karte, nichts schiebt quer ----------
   Gemessen bei 375 und 320 px: Raster und Felder schrumpften nicht unter ihre Mindestbreite
   und wurden von der Karte (overflow:clip) abgeschnitten, Knopfreihen brachen nicht um. */
.vt-inhalt{grid-template-columns:minmax(0,1fr)}
#vt-abschnitte{grid-template-columns:minmax(0,1fr)}
.menue-folge{grid-template-columns:minmax(0,1fr)}
.menue-zeile{min-width:0}
.pr-spalten{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
@container inhalt (max-width:620px){
  /* Zeilenknoepfe (Termin, Gutscheine, Buchungen): reicht der Platz neben dem Betrag nicht,
     rutschen sie in die naechste Zeile und brechen dort selbst um. */
  .pz-rechts{flex-wrap:wrap;row-gap:10px}
  .pz-rechts .uacts,.pz-rechts.pz-quer .uacts{flex-wrap:wrap;min-width:0;max-width:100%;margin-left:auto;justify-content:flex-end}
  .stud-feld{flex-wrap:wrap;row-gap:2px}
}
@media (max-width:820px){
  /* Reiter brechen um, statt quer zu schieben. */
  .seg.reiter{flex-wrap:wrap;overflow-x:visible;gap:0 22px}
  .seg.reiter a,.seg.reiter #btn-zeitraum{white-space:nowrap}
  .bel-nav{flex-wrap:wrap}
  .bel-monat{min-width:0;flex:1 1 auto}
}
@media (max-width:900px){
  /* Belegungskalender: im schmalen Tag nur Farbe und Zahl, das Kuerzel wurde abgeschnitten. */
  .bel-kuerzel{display:none}
  .bel-zahl{background:none;padding:0 2px}
  .bel-intern .bel-kuerzel{display:inline-block;padding:0 4px}
}

/* ---------- Telefon und Touch: Tippflaechen mindestens 44 px (Richtwert von Apple) ---------- */
@media (max-width:820px), (pointer:coarse){
  .nav a{min-height:44px}
  .nav-kopf{min-height:44px;padding-top:10px;padding-bottom:6px}
  .mobile-menu-btn{width:44px;height:44px}
  .logout{width:44px;height:44px}
  .xbtn{width:44px;height:44px}
  .ibtn{width:44px;height:44px}
  .card-h .kopf-plus{width:44px;height:44px}
  .card-h .kopf-plus svg{width:20px;height:20px}
  .notiz-k{width:44px;height:44px}
  .menue-pfeil{width:44px;height:44px}
  .btn{min-height:44px}
  .btn.sw-klein{min-height:44px}
  .chip span{min-height:44px;padding-top:8px;padding-bottom:8px}
  .chip-knopf{min-height:44px;padding:8px 14px}
  .stud-chip{min-height:44px;padding:6px 14px}
  .stud-sortwahl{min-height:44px}
  .krumen a{min-height:44px}
  .chk{min-height:44px}
  .chk input[type=checkbox],.chk input[type=radio]{width:22px;height:22px;flex:none}
  .kal-hilfe summary,.vt-hilfe summary{padding-top:10px;padding-bottom:10px}
  .pv-mehr summary{display:inline-block;padding:12px 0}
  .seg.reiter a,.seg.reiter #btn-zeitraum{min-height:44px}
  /* Der Schalter bleibt so gross, seine Tippflaeche waechst unsichtbar nach oben und unten. */
  input.ez-schalter{margin-top:8px;margin-bottom:8px;overflow:visible}
  input.ez-schalter::before{content:"";position:absolute;inset:-8px -4px}
}
@media (max-width:820px), (pointer:coarse){
  .pv-zeile .xbtn,.ablage-ordner > summary .xbtn,.uf-wert .xbtn{width:44px;height:44px}
  .suche-verlauf-weg{width:44px;height:44px}
  .ibtn{min-width:44px}
  .seg.reiter #btn-zeitraum{min-width:44px;justify-content:center}
  .mini{min-height:44px}
  .level-tbl select,.tbl select{min-height:44px}
  .notiz-i{width:32px;height:32px}
  .fahne{height:36px}
}
/* Vier Knoepfe zu 44 px plus Logo passen bei 320 px nur mit weniger Rand. */
@media (max-width:360px){
  .mobile-topbar{padding:0 10px;gap:8px}
  .mobile-topbar-akt{gap:6px}
}

/* ---------- Nur DWH: Modul Besucher (Filterleiste, Zeilenmenue, Anteilsbalken, Verlauf) ----------
   Neue Bausteine, im Katalog als Vorschlag: Filterleiste mit Schildern (wie Plausible), Menue an
   einer Tabellenzeile, Anteilsbalken in Tabellen, Verlauf als Linie mit Vorzeitraum. */
.bes-leiste{position:sticky;top:0;z-index:50;background:var(--bg);padding:10px 0 14px;margin:-6px 0 20px;
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;border-bottom:1px solid var(--border)}
.bes-wahl{font:inherit;font-size:var(--fs-klein);padding:8px 10px;border:1px solid var(--feld-rand);border-radius:8px;background:var(--feld)}
.bes-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bes-chip{display:inline-flex;align-items:center;gap:6px;background:var(--navy);color:#fff;border-radius:999px;padding:5px 6px 5px 12px;font-size:var(--fs-klein);font-weight:600}
.bes-chip i{font-style:normal;font-weight:400;opacity:.75}
.bes-chip.nicht{background:var(--red)}
.bes-chip a{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;text-decoration:none;line-height:1}
.bes-chip a:hover{background:rgba(255,255,255,.35)}
.bes-plus{border:1px dashed var(--feld-rand);background:var(--panel);border-radius:999px;padding:6px 12px;font:inherit;font-size:var(--fs-klein);font-weight:600;color:var(--navy);cursor:pointer}
.bes-plus:hover{border-color:var(--navy)}
.bes-rechts{margin-left:auto;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.bes-link{font-size:var(--fs-klein);color:var(--muted)}
.bes-link-aus{font-size:var(--fs-klein);color:var(--faint);cursor:help}
.tbl tr.bes-zeile{cursor:pointer}
.tbl tr.bes-zeile:hover td,.tbl tr.bes-zeile:focus-visible td{background:color-mix(in srgb,var(--rust) 6%,var(--panel))}
.bes-anteil{display:flex;align-items:center;gap:8px;min-width:140px}
.bes-anteil b{display:block;height:8px;border-radius:4px;background:var(--rust);opacity:.75;max-width:90px;flex:none}
.bes-anteil span{font-variant-numeric:tabular-nums;color:var(--muted);font-size:var(--fs-klein);white-space:nowrap}
.tbl .zahl{text-align:right;font-variant-numeric:tabular-nums}
.bes-menue{position:absolute;z-index:200;background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);padding:6px;min-width:220px;max-width:360px}
.bes-menue-kopf{font-size:var(--fs-mark);color:var(--muted);padding:6px 12px 4px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bes-menue a{display:block;padding:9px 12px;border-radius:7px;color:var(--text);text-decoration:none;font-size:var(--fs-klein)}
.bes-menue a:hover,.bes-menue a:focus-visible{background:var(--panel-2);outline:none}
.bes-verlauf{width:100%;height:200px;display:block;overflow:visible}
.bes-gitter{stroke:var(--border)}
.bes-achse{font-size:11px;fill:var(--faint)}
.bes-linie{fill:none;stroke:var(--navy);stroke-width:2.5;vector-effect:non-scaling-stroke}
.bes-linie-vorher{fill:none;stroke:var(--gold);stroke-width:2;stroke-dasharray:5 4;opacity:.6;vector-effect:non-scaling-stroke}
.bes-punkt{fill:var(--navy)}
@media (max-width:820px){.bes-leiste{position:static}.bes-rechts{margin-left:0}}
/* Seite im Fokus: woher und wohin (Vorbild Transitions in Matomo). */
.bes-ug{display:grid;grid-template-columns:minmax(0,1fr) 270px minmax(0,1fr);gap:20px;align-items:start}
.bes-ug-kopf{font-size:var(--fs-mark);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin-bottom:8px}
.bes-ug-seite.links .bes-ug-kopf{text-align:right}
.bes-ug-zeile{display:grid;grid-template-columns:minmax(0,1fr) 56px;gap:8px;align-items:center;margin-bottom:6px;font-size:var(--fs-klein)}
.bes-ug-seite.links .bes-ug-zeile{grid-template-columns:56px minmax(0,1fr)}
.bes-ug-zahl{font-variant-numeric:tabular-nums;color:var(--muted);text-align:right}
.bes-ug-seite.rechts .bes-ug-zahl{text-align:left}
.bes-ug-bahn{position:relative;display:block;height:30px;background:var(--panel-2);border-radius:6px;overflow:hidden}
.bes-ug-bahn b{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--rust) 20%,var(--panel));border-radius:6px}
.bes-ug-seite.links .bes-ug-bahn b{right:0}
.bes-ug-seite.rechts .bes-ug-bahn b{left:0}
.bes-ug-bahn span{position:relative;display:block;padding:6px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.bes-ug-seite.links .bes-ug-bahn span{text-align:right}
.bes-ug-zeile.extern .bes-ug-bahn b{background:color-mix(in srgb,var(--gold) 16%,var(--panel))}
.bes-ug-zeile.aus .bes-ug-bahn b{background:color-mix(in srgb,var(--red) 16%,var(--panel))}
.bes-ug-zeile.rest .bes-ug-bahn span{color:var(--muted)}
a.bes-ug-ziel{display:block;text-decoration:none;border-radius:6px}
a.bes-ug-ziel:hover .bes-ug-bahn,a.bes-ug-ziel:focus-visible .bes-ug-bahn{box-shadow:inset 0 0 0 1px var(--rust)}
.bes-ug-mitte{background:var(--navy);color:#fff;border-radius:var(--radius);padding:18px 20px;text-align:center}
.bes-ug-pfad{font-weight:700;font-size:var(--fs-gross);overflow-wrap:anywhere}
.bes-ug-gross{font-size:34px;font-weight:800;margin:8px 0 0}
.bes-ug-mitte dl{display:grid;grid-template-columns:1fr auto;gap:5px 10px;text-align:left;font-size:var(--fs-klein);margin:14px 0 0}
.bes-ug-mitte dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
@media (max-width:1100px){.bes-ug{grid-template-columns:1fr}.bes-ug-seite.links .bes-ug-kopf{text-align:left}}
/* Klickwege (Sankey). */
.bes-wege-wahl{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.bes-wege-wahl input[name=p]{flex:1 1 260px}
.bes-sankey{width:100%;height:auto;display:block}
.bes-band{fill:none;stroke:var(--navy);stroke-opacity:.2}
.bes-band.aus,.bes-band.ein{stroke:var(--red);stroke-opacity:.16}
.bes-band:hover{stroke-opacity:.42}
.bes-knoten{fill:var(--navy)}
.bes-knoten.aus{fill:var(--red)}
.bes-knoten.rest{fill:var(--faint)}
.bes-knoten-text{font-size:12px;fill:var(--text)}
.bes-knoten-text .b{font-weight:700}
.bes-knoten-link:hover .bes-knoten{fill:var(--gold)}
.bes-knoten-link:hover .bes-knoten-text{text-decoration:underline}
.bes-wege-sofort .bes-link{margin-left:8px}
.bes-weg{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.bes-weg-pfeil{color:var(--faint)}
.bes-weg-rand{color:var(--red);font-weight:600}
/* Trichter als Balken mit Quote je Schritt. */
.bes-trichter{display:flex;flex-direction:column;gap:14px}
.bes-tr-schritt{display:grid;grid-template-columns:minmax(180px,260px) minmax(0,1fr) 210px;gap:16px;align-items:center}
.bes-tr-name{font-weight:700}
.bes-tr-name small{display:block;font-weight:400;color:var(--muted);font-size:var(--fs-mark);overflow-wrap:anywhere}
.bes-tr-bahn{position:relative;height:36px;background:var(--panel-2);border-radius:8px;overflow:hidden}
.bes-tr-bahn b{position:absolute;left:0;top:0;bottom:0;background:var(--rust);border-radius:8px}
.bes-tr-bahn span{position:absolute;left:10px;top:8px;color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.bes-tr-bahn span.aussen{color:var(--text)}
.bes-tr-quote{font-size:var(--fs-klein);color:var(--muted)}
.bes-tr-quote small{display:block}
.bes-tr-quote.schlimm{color:var(--red);font-weight:700}
.bes-tr-dlg{max-width:820px}
.bes-tr-zeile{display:grid;grid-template-columns:1fr 150px 110px 1.4fr 36px;gap:8px;margin:0 0 8px;align-items:center}
.bes-tr-zeile input,.bes-tr-zeile select{font:inherit;font-size:var(--fs-klein);padding:8px 10px;border:1px solid var(--feld-rand);border-radius:8px;background:var(--feld);min-width:0}
@media (max-width:900px){.bes-tr-schritt{grid-template-columns:1fr}.bes-tr-zeile{grid-template-columns:1fr 1fr}}
/* Sitzungen: Liste und Zeitleiste eines Besuchs. */
.bes-sz-raster{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:22px;align-items:start}
.bes-sz-raster .card{max-width:none}
.bes-sz-detail{position:sticky;top:96px}
.bes-blaettern{display:flex;gap:8px}
.bes-sz-wer{display:block;color:var(--muted);font-size:var(--fs-mark);white-space:nowrap}
.bes-zeitleiste{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--border)}
.bes-zeitleiste li{position:relative;padding:0 0 16px 14px}
.bes-zeitleiste li:last-child{padding-bottom:0}
.bes-zeitleiste li::before{content:'';position:absolute;left:-25px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--rust);border:2px solid var(--panel)}
.bes-zeitleiste li.start::before{background:var(--faint)}
.bes-zeitleiste li.shop::before,.bes-zeitleiste li.formular::before{background:var(--gold)}
.bes-zeitleiste li.fehler::before{background:var(--red)}
.bes-zeitleiste li.weiterleitung::before{background:var(--border)}
.bes-zeitleiste li.ereignis::before{background:var(--green)}
.bes-merkmale{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 16px;font-size:var(--fs-klein)}
.bes-merkmale dt{color:var(--muted)}
.bes-merkmale dd{margin:0;font-weight:600}
.bes-zl-zeit{font-size:var(--fs-mark);color:var(--muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.bes-zl-was{font-weight:600;overflow-wrap:anywhere}
.bes-zl-dauer{font-size:var(--fs-klein);color:var(--muted)}
@media (max-width:1100px){.bes-sz-raster{grid-template-columns:1fr}.bes-sz-detail{position:static}}

/* Wahl der Website im Kopf der Menuegruppe Besucher (Platz menue_kopf). Sieht aus wie ein
   Gruppenkopf, der Name etwas heller als Zeichen, dass er waehlbar ist. Ein Klick oeffnet das
   Fenster #dlg-website mit allen Websites nach Gruppen. Lange Namen brechen um. */
.nav-wahl-knopf{display:flex;align-items:center;gap:8px;width:100%;padding:6px 14px 4px;border:0;background:none;cursor:pointer;text-align:left;font-family:inherit;
  color:#fff;font-weight:700;font-size:var(--fs-text);line-height:1.35;transition:color .15s var(--ease)}
/* Die Ansichten stehen eingerueckt unter dem Namen der Website. */
.nav-gruppe[data-gruppe="besucher"] .nav-kinder a{padding-left:26px}
.nav-wahl-knopf:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.nav-wahl-knopf:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.nav-wahl-knopf > span{flex:1;min-width:0;overflow-wrap:anywhere}
.ws-wahl-dlg{max-width:760px}
.ws-wahl-dlg .dlg-inner{max-height:min(82vh,760px);display:flex;flex-direction:column}
.ws-wahl-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ws-wahl-suche{width:100%;margin:6px 0 14px;background:var(--feld);border:1px solid var(--feld-rand);border-radius:10px;padding:10px 13px;font:inherit;color:var(--text)}
.ws-wahl-suche:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 14%,transparent)}
.ws-wahl-gruppen{overflow-y:auto;min-height:0;margin:0 -6px;padding:0 6px}
.ws-wahl-gruppe + .ws-wahl-gruppe{margin-top:16px}
.ws-wahl-gruppe h3{margin:0 0 8px;font-size:var(--fs-mark);font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.ws-wahl-gruppe h3 span{font-weight:600;opacity:.7}
.ws-wahl-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.ws-wahl-eintrag{display:flex;flex-direction:column;gap:1px;padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--panel);
  color:var(--text);text-decoration:none;min-width:0;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.ws-wahl-eintrag b{font-weight:700;overflow-wrap:anywhere}
.ws-wahl-eintrag span{font-size:var(--fs-klein);color:var(--muted);overflow-wrap:anywhere}
.ws-wahl-eintrag:hover,.ws-wahl-eintrag:focus-visible{border-color:var(--navy);box-shadow:var(--shadow);outline:none}
.ws-wahl-eintrag.active{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 7%,var(--panel))}
.ws-wahl-eintrag[hidden],.ws-wahl-gruppe[hidden]{display:none}
.ws-wahl-leer{color:var(--muted);margin:8px 0 0}
.nav-wahl > summary{display:flex;align-items:center;gap:8px;padding:6px 10px 3px;cursor:pointer;list-style:none;
  color:var(--side-text);font-weight:700;font-size:var(--fs-mark);text-transform:uppercase;letter-spacing:.5px;transition:color .15s var(--ease)}
.nav-wahl > summary::-webkit-details-marker{display:none}
.nav-wahl > summary:hover{color:#fff}
.nav-wahl > summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.nav-wahl > summary > span{flex:1;min-width:0;overflow-wrap:anywhere}
.nav-wahl-pfeil{width:13px;height:13px;flex:none;opacity:.6;transition:transform .18s var(--ease)}
.nav-wahl[open] .nav-wahl-pfeil{transform:rotate(180deg)}
.nav-wahl-liste{display:flex;flex-direction:column;gap:1px;margin:4px 0 8px;padding:4px;border-radius:10px;background:rgba(255,255,255,.05)}
.nav-wahl-liste a{display:block;padding:6px 10px;border-radius:8px;color:var(--side-text);text-decoration:none;font-weight:500;font-size:var(--fs-klein);overflow-wrap:anywhere;
  transition:background .15s var(--ease),color .15s var(--ease)}
.nav-wahl-liste a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-wahl-liste a.active{background:var(--side-active-bg);color:#fff;font-weight:600}

/* Dashboard: je Website eine Kachel mit kleinem Verlauf der sieben Tage. */
.ws-kacheln{margin-bottom:0;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));grid-auto-rows:auto;max-width:none}
.ws-kachel{aspect-ratio:auto;min-height:190px}
.ws-kachel .kpi-k > span{white-space:normal;overflow-wrap:anywhere}
.ws-kachel .kpi-s{white-space:normal}
.ws-verlauf{display:flex;align-items:flex-end;gap:3px;height:30px;margin-bottom:8px}
.ws-verlauf i{flex:1;background:color-mix(in srgb,var(--navy) 22%,var(--panel));border-radius:2px 2px 0 0;min-height:2px}
.ws-verlauf i:last-child{background:var(--gold)}

/* Google-Suche (Modul gsc): vier Zahlen in einer Reihe ueber der Tabelle der Suchanfragen. */
.gsc-zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.gsc-zahlen b{display:block;font-size:var(--fs-gross);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.gsc-zahlen span{display:block;font-size:var(--fs-klein);color:var(--muted)}
.gsc-vgl{font-size:var(--fs-mark);font-weight:700;margin-left:4px}
.gsc-vgl.gut{color:var(--green)}
.gsc-vgl.schlecht{color:var(--red)}
@media (max-width:560px){.gsc-zahlen{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Einstellungen, Websites (Modul logs): Anbinden, Name zum Aendern, Schilder je Baustein */
.ws-anbinden{flex-wrap:nowrap}
.ws-anbinden input{width:280px;max-width:100%;background:var(--feld);border:1px solid var(--feld-rand);border-radius:10px;padding:9px 12px;color:var(--text);font:inherit}
.ws-anbinden input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 14%,transparent)}
.ws-name{width:100%;min-width:170px;max-width:200px;font:inherit;font-weight:700;color:var(--text);border:1px solid transparent;background:transparent;padding:3px 6px;margin-left:-7px;border-radius:6px}
.ws-name:hover,.ws-name:focus{border-color:var(--border);background:var(--panel)}
.ws-domain{font-size:var(--fs-klein);color:var(--muted);overflow-wrap:anywhere}
.ws-rollen{overflow-x:auto}
.ws-tabelle .ws-hinweis{max-width:230px}
.ws-hinweis.ok{color:var(--text)}
.ws-pruefen{padding:7px;line-height:0}
.ws-pruefen svg{width:16px;height:16px}
.ws-tabelle .pz-schild{white-space:nowrap}
.ws-hinweis{display:block;max-width:300px;font-size:var(--fs-klein);line-height:1.45;color:var(--muted)}
.ws-hinweis.offen{color:var(--amber)}
.ws-tabelle td{vertical-align:top}
@media (max-width:700px){.ws-anbinden{flex-wrap:wrap}.ws-anbinden input{width:100%}}
.kpis.vier{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
/* Wenige Kacheln mit langen Titeln (Bestellungen): Größe wie in der Übersicht, Rest der Zeile bleibt frei. */
.kpis.kpis-mittel{grid-template-columns:repeat(auto-fill,minmax(235px,1fr))}
.ws-nr-suche{display:inline-flex;gap:6px;margin-left:14px;vertical-align:middle}
.ws-nr-suche input{width:130px;background:var(--feld);border:1px solid var(--feld-rand);border-radius:8px;padding:4px 8px;font:inherit;font-size:var(--fs-klein);color:var(--text)}
.ws-nr-suche .btn{padding:3px 10px;font-size:var(--fs-klein)}
.bes-rueckweg{display:inline-flex;margin:0 0 16px}
.kpi[data-tip]::after{white-space:normal;width:280px;max-width:80vw;text-align:left;font-weight:500;line-height:1.45}
.bes-fehler{display:inline-block;margin-left:6px}
.bes-fehler summary{cursor:pointer;list-style:none;display:inline}
.bes-fehler summary::-webkit-details-marker{display:none}
.bes-fehler ul{margin:6px 0 2px;padding-left:18px;font-size:var(--fs-klein);color:var(--muted)}
.kpis .kpi[data-tip]:last-child::after{left:auto;right:0;transform:translateY(4px)}
.kpis .kpi[data-tip]:last-child:hover::after{transform:translateY(0)}
/* Indexierung: Stufen als Schalter, sortierbare Spaltenkoepfe */
.ix-stufen{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.ix-stufe{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--ix);border-radius:999px;padding:4px 13px;font:inherit;font-size:var(--fs-klein);font-weight:700;cursor:pointer;background:var(--panel);color:var(--ix-text)}
.ix-stufe b{font-weight:800}
.ix-stufe.an{background:var(--ix);color:var(--ix-ink);box-shadow:var(--shadow)}
.ix-stufe:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
/* Stufen der Indexierung: jede mit eigener, kraeftiger Farbe. --ix Fuellung, --ix-ink Schrift darauf,
   --ix-text Schrift auf Weiss (ausgeblendeter Knopf, lesbar ohne Transparenz). */
.ix-kritisch{--ix:#d0342c;--ix-ink:#fff;--ix-text:#b02a23}
.ix-pruefen{--ix:#f2b51d;--ix-ink:#3b2a00;--ix-text:#8a5d00}
.ix-ok{--ix:#2c6e8f;--ix-ink:#fff;--ix-text:#2c6e8f}
.ix-indexiert{--ix:#158a4d;--ix-ink:#fff;--ix-text:#137a44}
.ix-offen{--ix:#8a909e;--ix-ink:#fff;--ix-text:#5d6372}
.pz-schild[class*="ix-"]{background:var(--ix);color:var(--ix-ink)}
.ix-warum{display:block}
.ix-tun{display:block;margin-top:3px;font-size:var(--fs-klein);color:var(--muted)}
.sortier-kopf{cursor:pointer;user-select:none;white-space:nowrap}
.sortier-kopf::after{content:' ↕';opacity:.35}
.sortier-kopf[data-richtung="auf"]::after{content:' ↑';opacity:1}
.sortier-kopf[data-richtung="ab"]::after{content:' ↓';opacity:1}
.ws-gruppe{font:inherit;font-size:var(--fs-klein);background:var(--feld);border:1px solid var(--feld-rand);border-radius:8px;padding:4px 6px;color:var(--text)}
.ws-wahl-eintrag{text-align:left}
.ws-wahl-eintrag b{color:var(--text)}