/*
Theme Name: Teamflex Portal
Theme URI: https://www.teamflex-solutions.de
Author: Teamflex Solutions GmbH
Description: Internes Mitarbeiterportal der Teamflex Solutions GmbH – Design nach dem Intranet-Entwurf. Mit Einsatz-Board, Terminen, Formular-Bibliothek und Online-Formularen der Personalabteilung.
Version: 52.2
Requires PHP: 7.4
Text Domain: teamflex-portal
*/

/* =====================================================================
   SCHRIFTEN
   IBM Plex, selbst gehostet – kein Zugriff auf fremde Server, also auch
   kein Datenschutzproblem mit Schrift-CDNs. Lizenz: SIL Open Font
   License 1.1, Volltext liegt unter assets/schriften/LICENSE.txt.

   Plex Sans trägt die Oberfläche. Plex Mono steht überall dort, wo
   Zahlen untereinander stehen müssen: Uhrzeiten im Dienstplan, Datum,
   Hallennummern, Personenzahlen im Einsatz-Board. Gleiche Ziffernbreite
   heißt, dass eine Spalte auch dann bündig bleibt, wenn aus 9 eine 114
   wird – auf dem Handy am Einsatzort ist das der Unterschied zwischen
   überfliegen und nachrechnen.
   ===================================================================== */
@font-face{
  font-family:"Plex Sans"; font-style:normal; font-weight:100 700; font-display:swap;
  src:url("assets/schriften/plex-sans-var.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Plex Sans"; font-style:italic; font-weight:100 700; font-display:swap;
  src:url("assets/schriften/plex-sans-var-italic.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("assets/schriften/plex-mono-400.woff2") format("woff2");
}
@font-face{
  font-family:"Plex Mono"; font-style:normal; font-weight:600; font-display:swap;
  src:url("assets/schriften/plex-mono-600.woff2") format("woff2");
}

:root{
  --ink:#14171C; --ink2:#1E232B; --ink3:#2A303A;
  --paper:#F3F4F6; --card:#FFFFFF;
  /* Markenfarben laut Farbangaben: rot = Pantone 187 C, grau = Pantone 423 C */
  --red:#C41130; --red-d:#A00E27; --red-soft:#F9E7EA; --marke-grau:#9FA1A4;
  --text:#1C2026; --muted:#69707D; --line:#E4E7EC;
  --green:#0E7A54; --green-soft:#E3F4EC;
  --amber:#8A5B00; --amber-soft:#FFF2D9;
  --blue:#1B4F9C; --blue-soft:#E8F0FC;
  /* Lesefarben für Text/Links auf Karten (Tags, Marken, Prosa-Links). Im Hellen
     identisch mit den Markenfarben oben; im Dunkeln eigens aufgehellt, weil die
     Markenfarben selbst dafür zu dunkel sind – auf einer dunklen Karte lag der
     Kontrast sonst spürbar unter 4.5:1 (WCAG AA). Buttons/Flächen bleiben bei
     --red usw., die brauchen die Anpassung nicht (weißer Text liegt immer gut auf). */
  --red-text:var(--red-d); --green-text:var(--green);
  --amber-text:var(--amber); --blue-text:var(--blue);

  /* --- Kräftige Rollen ---------------------------------------------
     --ink ist die feste dunkle Markenfläche: Kopfleiste, Fußbereich,
     Hero, Initialen-Avatare. Die bleiben in beiden Modi dunkel, das ist
     so gewollt. Wo dieselbe Farbe aber als Textfarbe, Rahmen oder
     ausgewählte Fläche gebraucht wird, muss sie im Dunkelmodus kippen –
     sonst steht Dunkelgrau auf Dunkelgrau. Dafür sind diese vier da. */
  --stark:#14171C;          /* kräftiger Text: Formular-Labels, aktive Filter */
  --flaeche-stark:#14171C;  /* ausgewählte Fläche: Reiter, Chips, Seitenzahl */
  --auf-stark:#FFFFFF;      /* Text auf dieser Fläche */
  --linie-stark:#C6CCD5;    /* Rahmen beim Draufzeigen */

  /* --- Typo-Skala ---------------------------------------------------
     Zehn Stufen, auf ganze Pixel gerastert. Vorher waren es 73 von Hand
     gesetzte Größen; die Abstände dazwischen waren teils so klein, dass
     sie nichts mehr unterschieden haben, sondern nur Unruhe erzeugten. */
  --t-2xs:.6875rem;  /* 11px – Zähler an Symbolen */
  --t-xs:.75rem;     /* 12px – Augenbrauen, Marken, Bildunterschriften */
  --t-s:.8125rem;    /* 13px – Nebeninfo, Meta-Zeilen */
  --t-m:.875rem;     /* 14px – Bedienoberfläche: Navigation, Knöpfe, Tabellen */
  --t-base:1rem;     /* 16px – Fließtext */
  --t-l:1.125rem;    /* 18px – Kartenüberschriften */
  --t-xl:1.25rem;    /* 20px – Abschnittsüberschriften */
  --t-2xl:1.5rem;    /* 24px – Seitentitel */
  --t-3xl:1.75rem;   /* 28px */
  --t-4xl:2.125rem;  /* 34px – Kennzahlen */
  --t-5xl:2.5rem;    /* 40px – Hero, große Initialen */

  /* Laufweite: vier Stufen statt 23. Enger wird nur, was groß ist;
     weiter wird nur, was in Versalien steht. */
  --ls-titel:-.02em; --ls-eng:-.01em; --ls-weit:.08em; --ls-label:.14em;

  /* Abstände auf 4er-Raster */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* Radien: vier Stufen statt zwölf */
  --r-s:8px; --r-m:12px; --r-l:16px; --r-xl:20px; --r-voll:999px;
  --radius:var(--r-l);

  /* Höhenstaffel. Vorher lagen die stärkeren Schatten als feste
     rgba(16,24,40,…) direkt in den Hover-Regeln – im Dunkelmodus waren
     sie damit praktisch unsichtbar, weil ein blaugrauer Schatten auf
     fast schwarzem Grund nichts mehr abhebt. */
  --schatten-1:0 1px 2px rgba(16,24,40,.05);
  --schatten-2:0 8px 22px -12px rgba(16,24,40,.28);
  --schatten-3:0 18px 38px -18px rgba(16,24,40,.34);
  --shadow:var(--schatten-1);
  --shadow-lg:0 12px 32px -12px rgba(16,24,40,.18);

  /* Höhe der klebenden Kopfleiste – eine Zahl, auf die sich Navigation
     und Sprungmarken beziehen, statt drei getrennt gepflegter Werte. */
  --kopf-h:52px;

  /* Dem Browser sagen, in welchem Modus wir malen.
     Ohne diese Angabe bleiben alle Flächen, die der Browser selbst
     zeichnet, dauerhaft hell: die Grundfarbe „Canvas“, aus der ein
     <dialog> ohne eigenen Hintergrund seine Fläche nimmt, dazu
     Bildlaufleisten, Datumsauswahl, aufgeklappte Auswahllisten und der
     gelbliche Hintergrund automatisch ausgefüllter Felder. Das war der
     Grund, warum das Termin-Popup im Dunkelmodus weiß blieb. */
  color-scheme:light;
}

/* ---------- Dark Mode ----------
   Greift automatisch nach Systemeinstellung, ODER wenn jemand unter
   „Mein Profil“ manuell umschaltet (setzt data-theme auf <html>, siehe
   assets/portal.js). Weil praktisch das ganze Portal mit den obigen
   Variablen statt festen Farben arbeitet, deckt das den Großteil der
   Seite ab – einzelne, seltene Ecken mit fest eingetragener Farbe
   holen wir uns nach, sobald sie auffallen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#15171B; --card:#1D2025; --line:#2B2E34;
    --text:#EBECEE; --muted:#9AA1AC;
    --red-soft:#3A171D; --green-soft:#11302A; --amber-soft:#332708; --blue-soft:#112238;
    --red-text:#FF6B7D; --green-text:#34C58B; --amber-text:#E3A83B; --blue-text:#5B9AE8;
    --stark:#F2F3F5; --flaeche-stark:#E9EBEE; --auf-stark:#14171C; --linie-stark:#4A505A;
    color-scheme:dark;
    --schatten-1:0 1px 2px rgba(0,0,0,.4);
    --schatten-2:0 8px 22px -12px rgba(0,0,0,.7);
    --schatten-3:0 18px 38px -18px rgba(0,0,0,.8);
    --shadow:var(--schatten-1);
    --shadow-lg:0 12px 32px -12px rgba(0,0,0,.65);
  }
}
:root[data-theme="dark"] {
  --paper:#15171B; --card:#1D2025; --line:#2B2E34;
  --text:#EBECEE; --muted:#9AA1AC;
  --red-soft:#3A171D; --green-soft:#11302A; --amber-soft:#332708; --blue-soft:#112238;
  --red-text:#FF6B7D; --green-text:#34C58B; --amber-text:#E3A83B; --blue-text:#5B9AE8;
  --stark:#F2F3F5; --flaeche-stark:#E9EBEE; --auf-stark:#14171C; --linie-stark:#4A505A;
  color-scheme:dark;
  --schatten-1:0 1px 2px rgba(0,0,0,.4);
  --schatten-2:0 8px 22px -12px rgba(0,0,0,.7);
  --schatten-3:0 18px 38px -18px rgba(0,0,0,.8);
  --shadow:var(--schatten-1);
  --shadow-lg:0 12px 32px -12px rgba(0,0,0,.65);
}

*{margin:0;padding:0;box-sizing:border-box}
html{
  scroll-behavior:smooth;
  /* Sprungmarken landeten bisher unter der klebenden Kopfleiste: Wer auf
     einen Anker klickte, sah die Überschrift nicht, weil Kopfleiste und
     Hauptmenü davor lagen. Beide Höhen plus Luft freihalten. */
  scroll-padding-top:calc(var(--kopf-h) + 46px + var(--sp-4));
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
body{
  font-family:"Plex Sans","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--paper); color:var(--text); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* Plex Sans reicht bis Gewicht 700 und bringt einen echten Kursivschnitt
     mit. Ohne diese Zeile würde der Browser für die im Bestand vorhandenen
     800er eine eigene Fettschrift errechnen – die sieht neben dem echten
     700er schmierig aus. Lieber sauber auf 700 begrenzen. */
  font-synthesis:none;
}
a{color:inherit}
button{font:inherit;cursor:pointer}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:var(--r-s)}

/* --- Zahlen ---------------------------------------------------------
   Alles, was als Wert in einer Spalte steht, bekommt Plex Mono: Zeiten,
   Datumsangaben, Personenzahlen, Kennzahlen. Nutze .ziffern, wenn im
   Template eine einzelne Zahl ausgezeichnet werden soll.

   Wichtig ist das dort, wo untereinander verglichen wird – Dienstplan,
   Einsatz-Board, Kennzahlen. Für Zähler an Symbolen zählt ein anderer
   Grund: Bei gleicher Ziffernbreite bleibt die Zahl im Kreis mittig,
   egal ob 1 oder 8 darin steht. */
.ziffern,.tabellenzahl,.z-wert,.z-zahl,.nt-wann b,.board-head .date,.edat,
.dp-zeit,.dp-datum,.dp-tagzahl,.md-zeit,.md-kennzahl,.nf-zeit,
.chat-zeit,.blase-zeit,.tf-ed-datum,.kalender-tag,
.tf-glocke-zahl,.mini-start-zahl,.fr-zahl,.reaktion-zahl,.reiter-zahl,
input[type=date],input[type=time],input[type=number]{
  font-family:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:var(--ls-eng);
}
/* Auch ohne Mono sollen Zahlenspalten bündig bleiben – Plex Sans hat
   passende Tabellenziffern. */
table,.z-tabelle,.widefat,.dp-liste,.einsatz .row{font-variant-numeric:tabular-nums}

/* Für Bildschirmleser lesbar, visuell aber unsichtbar – z. B. als
   Text-Alternative zu Diagrammen, die sonst nur Sehende auswerten können. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
	clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Suite-Bar ---------- */
.suite{
  background:var(--ink); color:#fff;
  display:flex; align-items:center; gap:14px;
  padding:10px 20px; position:sticky; top:0; z-index:60;
}
body.admin-bar .suite{top:32px}
@media (max-width:782px){ body.admin-bar .suite{top:46px} }
.brand{display:flex;align-items:baseline;gap:8px;white-space:nowrap;text-decoration:none}
.brand .wm{font-size:var(--t-xl);font-weight:700;letter-spacing:var(--ls-titel);color:#fff}
.brand .wm .flex{color:var(--red-text);font-style:italic}
.brand .divider{width:1px;height:18px;background:rgba(255,255,255,.28);align-self:center}
.brand .sub{font-size:var(--t-2xs);letter-spacing:var(--ls-label);color:rgba(255,255,255,.75);font-weight:600}
.suite-search{
  flex:1; max-width:520px; margin-left:auto; position:relative;
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-m); padding:7px 12px; color:rgba(255,255,255,.85);
}
.suite-search svg{flex:none;opacity:.8}
.suite-search input{background:none;border:0;color:#fff;width:100%;font-size:var(--t-m)}
.suite-search input::placeholder{color:rgba(255,255,255,.55)}
.suite-search input:focus{outline:none}

/* ---------- Live-Suche: Ergebnis-Dropdown ---------- */
.suche-ergebnisse{position:absolute;top:calc(100% + 8px);left:0;right:0;
	background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
	box-shadow:var(--shadow-lg);max-height:70vh;overflow-y:auto;padding:6px;z-index:200;color:var(--text)}
.suche-ergebnisse[hidden]{display:none}
.se-kategorie{font-size:var(--t-2xs);font-weight:700;letter-spacing:var(--ls-weit);text-transform:uppercase;
	color:var(--muted);padding:10px 10px 4px}
.se-eintrag{display:block;padding:8px 10px;border-radius:var(--r-s);text-decoration:none;color:var(--text)}
.se-eintrag b{display:block;font-size:var(--t-m);font-weight:600}
.se-eintrag small{display:block;color:var(--muted);font-size:var(--t-s);margin-top:1px;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.se-leer{padding:14px 10px;color:var(--muted);font-size:var(--t-m);text-align:center}
.suite-right{display:flex;align-items:center;gap:12px;margin-left:6px}

/* ---------- Profil-Kurzlink im Kopfbereich ---------- */
.suite-profil{display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff;
	padding:5px 12px 5px 5px;border-radius:var(--r-xl);background:rgba(255,255,255,.08);
	border:1px solid rgba(255,255,255,.14);transition:background .15s ease,border-color .15s ease}
.suite-profil img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none;display:block}
.suite-profil-init{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
	font-size:var(--t-xs);font-weight:800;color:#fff;background:linear-gradient(135deg,var(--red),var(--red-d))}
.suite-profil-name{font-size:var(--t-s);font-weight:600;white-space:nowrap}
@media (max-width:960px){.suite-profil-name{display:none}.suite-profil{padding:5px}}
@media (max-width:720px){ .suite-search{display:none} .brand .sub{display:none} .brand .divider{display:none} }

/* ---------- Hauptnavigation ---------- */
.mainnav{
  background:var(--card); border-bottom:1px solid var(--line);
  position:sticky; top:52px; z-index:50;
}
body.admin-bar .mainnav{top:84px}
@media (max-width:782px){ body.admin-bar .mainnav{top:98px} }
.mainnav-wrap{max-width:1180px;margin:0 auto;padding:0 20px;overflow-x:auto;scrollbar-width:none}
.mainnav-wrap::-webkit-scrollbar{display:none}
.mainnav ul{display:flex;gap:4px;list-style:none}
.mainnav li a{
  display:block; padding:14px 14px 11px; white-space:nowrap;
  font-size:var(--t-m); font-weight:600; color:var(--muted);
  border-bottom:3px solid transparent; text-decoration:none;
}
.mainnav li.current-menu-item > a,
.mainnav li.current_page_item > a{color:var(--text); border-bottom-color:var(--red-text)}

/* ---------- Layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
section{padding:34px 0 6px}
.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.eyebrow::before{content:"";width:20px;height:4px;background:var(--red);border-radius:2px}
.eyebrow span{font-size:var(--t-xs);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.sec-head h2{font-size:var(--t-2xl);font-weight:700;letter-spacing:var(--ls-eng)}
.sec-link{font-size:var(--t-m);font-weight:600;color:var(--red-text);text-decoration:none;white-space:nowrap;background:none;border:0}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.btn{
  display:inline-flex;align-items:center;gap:8px;border:0;border-radius:var(--r-m);
  padding:11px 18px;font-weight:600;font-size:var(--t-base);text-decoration:none;
  background:var(--red);color:#fff;transition:background .15s ease;
  touch-action:manipulation;
}
.btn.ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn.light{background:var(--red-soft);color:var(--red-text)}
.tag{display:inline-block;font-size:var(--t-xs);font-weight:700;letter-spacing:var(--ls-weit);text-transform:uppercase;padding:3px 9px;border-radius:var(--r-xl)}
.tag.red{background:var(--red-soft);color:var(--red-text)}
.tag.green{background:var(--green-soft);color:var(--green-text)}
.tag.amber{background:var(--amber-soft);color:var(--amber-text)}
.tag.blue{background:var(--blue-soft);color:var(--blue-text)}
.tag.gray{background:var(--paper);color:var(--muted)}

/* ---------- Hinweis-Banner ---------- */
.alertbar{background:var(--red);color:#fff}
.alertbar .wrap{display:flex;align-items:center;gap:12px;padding-top:10px;padding-bottom:10px;font-size:var(--t-m);flex-wrap:wrap}
.alertbar strong{font-weight:700}
.alertbar a{color:#fff;font-weight:600;margin-left:auto;white-space:nowrap}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(135deg,var(--ink) 0%,var(--ink2) 55%,var(--ink3) 100%);
  color:#fff; padding:44px 0 118px; position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; right:-30px; bottom:70px; width:520px; height:200px;
  background:linear-gradient(to top, rgba(255,255,255,.05), rgba(255,255,255,0));
  clip-path:polygon(0 100%,6% 78%,12% 84%,18% 60%,24% 72%,30% 48%,36% 66%,42% 40%,46% 40%,48% 6%,50% 40%,54% 40%,60% 58%,66% 44%,72% 70%,78% 52%,84% 76%,90% 62%,100% 100%);
  pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:32px;align-items:center;position:relative;z-index:1}
.hero .hello{font-size:var(--t-m);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:rgba(255,255,255,.65);margin-bottom:10px}
.hero h1{font-size:clamp(var(--t-3xl),4vw,var(--t-5xl));font-weight:750;line-height:1.12;letter-spacing:var(--ls-titel);margin-bottom:14px}
.hero h1 em{font-style:normal;color:var(--red-text)}
.hero p{color:rgba(255,255,255,.78);max-width:46ch;margin-bottom:22px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.shift-card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);padding:20px;backdrop-filter:blur(4px);
}
.shift-card .lbl{font-size:var(--t-xs);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:12px}
.shift-card .when{font-size:var(--t-l);font-weight:700}
.shift-card .where{color:rgba(255,255,255,.8);margin:4px 0 14px}
.shift-card .meta{display:flex;gap:8px;flex-wrap:wrap}
.shift-card .chip{font-size:var(--t-xs);font-weight:600;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);padding:4px 10px;border-radius:var(--r-xl);color:#fff;text-decoration:none}
@media (max-width:860px){ .hero{padding:36px 0 108px} .hero-grid{grid-template-columns:1fr} .hero::after{opacity:.5} }

/* ---------- Einsatz-Board ---------- */
.board{margin-top:-84px;position:relative;z-index:5;padding:0}
.board-card{background:var(--ink2);border:1px solid #313845;border-radius:var(--radius);box-shadow:var(--shadow-lg);color:#fff;overflow:hidden}
.board-head{display:flex;align-items:center;gap:10px;padding:14px 18px 0}
.live{width:9px;height:9px;border-radius:50%;background:var(--red);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(196,17,48,.5)}50%{box-shadow:0 0 0 7px rgba(196,17,48,0)}}
.board-head .t{font-size:var(--t-xs);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:rgba(255,255,255,.75)}
.board-head .date{margin-left:auto;font-size:var(--t-s);color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
.board-scroll{display:flex;gap:12px;overflow-x:auto;padding:14px 18px 18px;scroll-snap-type:x mandatory;scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}
.einsatz{
  flex:0 0 250px;scroll-snap-align:start;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-left:3px solid var(--red);border-radius:var(--r-m);padding:13px 14px;
}
.einsatz .ort{font-size:var(--t-xs);font-weight:700;letter-spacing:var(--ls-weit);text-transform:uppercase;color:rgba(255,255,255,.55)}
.einsatz .ev{font-weight:700;margin:3px 0 8px;line-height:1.3}
.einsatz .row{display:flex;align-items:center;justify-content:space-between;font-size:var(--t-s);color:rgba(255,255,255,.7)}
.st{font-size:var(--t-2xs);font-weight:700;letter-spacing:var(--ls-weit);text-transform:uppercase;padding:3px 9px;border-radius:var(--r-xl)}
.st.run{background:rgba(24,160,110,.18);color:#5CD6A9}
.st.up{background:rgba(240,180,41,.16);color:#F5C24B}
.st.perm{background:rgba(90,140,255,.16);color:#8FB3FF}

/* ---------- Dein nächster Termin ---------- */
.naechster-termin{display:flex;align-items:center;gap:18px;background:var(--card);
	border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
	padding:18px 22px;margin:22px 0;text-decoration:none;color:var(--text);transition:transform .15s var(--feder),box-shadow .15s ease}
.nt-wann{flex:none;text-align:center;background:var(--red-soft);border-radius:var(--r-m);padding:10px 16px;min-width:88px}
.nt-wann b{display:block;font-size:var(--t-base);color:var(--red-text);white-space:nowrap}
.nt-wann span{display:block;font-size:var(--t-xs);color:var(--red-text);opacity:.8;margin-top:2px}
.nt-info{flex:1;min-width:0}
.nt-label{display:block;font-size:var(--t-xs);font-weight:700;letter-spacing:var(--ls-weit);text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.nt-info b{display:block;font-size:var(--t-l)}
.nt-info small{color:var(--muted)}
.nt-pfeil{flex:none;font-size:var(--t-xl);color:var(--muted)}
@media(max-width:600px){.naechster-termin{padding:14px 16px;gap:12px}.nt-wann{min-width:72px;padding:8px 10px}}

/* ---------- Schnellzugriff ---------- */
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:900px){.quick-grid{grid-template-columns:repeat(2,1fr)}}
.quick{
  display:flex;flex-direction:column;gap:10px;align-items:flex-start;
  padding:16px;border-radius:var(--radius);background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow);
  text-align:left;transition:transform .15s ease, box-shadow .15s ease;text-decoration:none;
}
.quick .ic{width:38px;height:38px;border-radius:var(--r-m);background:var(--red-soft);color:var(--red-text);display:grid;place-items:center;flex:none;font-size:var(--t-l)}
.quick b{font-size:var(--t-base)}
.quick small{color:var(--muted);font-size:var(--t-s);line-height:1.4}

/* ---------- News ---------- */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.news-grid{grid-template-columns:1fr}}
.news{overflow:hidden;display:flex;flex-direction:column;text-align:left;padding:0;text-decoration:none;transition:transform .15s ease, box-shadow .15s ease}
.news .cover{height:110px;position:relative;background-size:cover;background-position:center}
.news .cover.c1{background:linear-gradient(120deg,#232830,#3A4250)}
.news .cover.c2{background:linear-gradient(120deg,var(--red-d),var(--red))}
.news .cover.c3{background:linear-gradient(120deg,#1B4F9C,#3E7BD6)}
.news .cover .tag{position:absolute;left:14px;bottom:12px;background:rgba(255,255,255,.92)}
.news .body{padding:16px}
.news h3{font-size:var(--t-base);font-weight:700;line-height:1.35;margin-bottom:6px}
.news p{font-size:var(--t-m);color:var(--muted);margin-bottom:12px}
.news .meta{font-size:var(--t-xs);color:var(--muted);margin-top:auto;padding:0 16px 16px}

/* ---------- Termine ---------- */
.split{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.termine{padding:6px 8px}
.termin{display:flex;gap:14px;align-items:center;padding:14px 10px;margin:0 -2px;border-radius:var(--r-m);border-bottom:1px solid var(--line);text-decoration:none;transition:background .15s ease}
.termin:last-child{border-bottom:0}
.termin:hover{background:var(--paper)}
.termin:hover .dt{border-color:var(--red-text)}
.dt{flex:none;width:58px;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);padding:7px 4px;transition:border-color .15s ease}
.dt b{display:block;font-size:var(--t-l);line-height:1.1}
.dt span{font-size:var(--t-2xs);font-weight:700;letter-spacing:var(--ls-weit);text-transform:uppercase;color:var(--muted)}
.termin .tx b{display:block;font-size:var(--t-base)}
.termin .tx small{color:var(--muted)}
.termin .tag{margin-left:auto;flex:none}

/* ---------- Geburtstagskalender ---------- */
.geb-label{padding:16px 18px 8px;font-size:var(--t-xs);font-weight:700;letter-spacing:var(--ls-weit);text-transform:uppercase;color:var(--muted)}
.geb-label:first-child{padding-top:6px}
.geb-label.heute{color:var(--red-text)}
.geb-liste{padding:0 18px}
.geb-liste.geb-heute-konfetti{position:relative;overflow:visible}
.geb-eintrag{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.geb-liste>.geb-eintrag:last-child{border-bottom:0}
.geb-bild{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--line)}
.geb-init{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:800;font-size:var(--t-base);color:#fff;background:linear-gradient(135deg,var(--ink),var(--ink3))}
.geb-info{flex:1;min-width:0}
.geb-info b{display:block;font-size:var(--t-base);font-weight:700}
.geb-info small{color:var(--muted)}
.geb-eintrag.heute{background:var(--red-soft);border-radius:var(--r-m);padding:12px 14px;border-bottom:0;margin-bottom:2px}
.geb-eintrag.heute .geb-bild,.geb-eintrag.heute .geb-init{border-color:transparent;box-shadow:0 0 0 2px var(--card)}
.geb-eintrag.heute .geb-info small{color:var(--red-text);font-weight:700}

/* ---------- Veranstaltungskalender ---------- */
.kalender-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.kfilter{display:inline-flex;align-items:center;font-size:var(--t-s);font-weight:600;padding:7px 14px;border-radius:var(--r-xl);background:var(--card);border:1px solid var(--line);color:var(--muted);text-decoration:none;transition:transform .12s ease}
.kfilter.tag{text-transform:none;letter-spacing:normal;font-weight:600;font-size:var(--t-s);padding:7px 14px}
.kfilter.aktiv{outline:2px solid var(--stark);outline-offset:-1px;color:var(--stark);font-weight:700}
.kalender-head{display:flex;align-items:center;justify-content:center;gap:18px;margin:6px 0 16px}
.kalender-head h2{font-size:var(--t-l);min-width:200px;text-align:center}
.kalender-nav{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-m);background:var(--card);border:1px solid var(--line);color:var(--stark);text-decoration:none;font-weight:700}
.kalender-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:12px}
.kalender-wt{text-align:center;font-size:var(--t-xs);font-weight:700;letter-spacing:var(--ls-weit);text-transform:uppercase;color:var(--muted);padding:4px 0}
.kalender-tag{min-height:88px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:6px;display:flex;flex-direction:column;gap:3px}
.kalender-tag.leer{background:none;border:0}
.kalender-tag.we{background:var(--paper)}
.kalender-tag.vorbei{opacity:.55}
.kalender-tag.heute{border-color:var(--red-text);box-shadow:inset 0 0 0 1px var(--red)}
.kalender-tag .num{font-size:var(--t-s);font-weight:700;color:var(--muted)}
.kalender-tag.heute .num{color:var(--red-text)}
.kpip{display:block;font-size:var(--t-2xs);font-weight:600;padding:2px 6px;border-radius:var(--r-s);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:none;letter-spacing:normal}
.kmehr{display:block;font-size:var(--t-2xs);font-weight:600;color:var(--muted);padding:0 2px;text-decoration:none}
@media (max-width:720px){.kalender-grid{display:none}}

/* ---------- Termin-Popup ---------- */
/* Fläche und Textfarbe stehen ausdrücklich hier. Ein <dialog> ohne eigene
   Angabe nimmt die Grundfarbe des Browsers, und die folgte dem Dunkelmodus
   nicht – das Popup blieb weiß, während der Rest der Seite dunkel war.
   color-scheme:dark oben löst das inzwischen mit, aber eine Fläche, die zur
   Karte daneben passen soll, sollte sich nicht darauf verlassen. */
.tf-event-dialog{position:fixed;inset:0;margin:auto;border:1px solid var(--line);border-radius:var(--radius);
	background:var(--card);color:var(--text);
	box-shadow:var(--shadow-lg);padding:22px;width:min(460px,90vw);max-height:85vh;overflow-y:auto}
.tf-event-dialog::backdrop{background:rgba(20,23,28,.55);backdrop-filter:blur(2px)}
.tf-ed-close{position:absolute;top:14px;right:14px}
.tf-ed-close button{background:none;border:0;font-size:var(--t-base);color:var(--muted);cursor:pointer;width:32px;height:32px;border-radius:var(--r-s)}
.tf-ed-head{padding-right:30px}
.tf-ed-head h3{font-size:var(--t-l);margin:8px 0 2px}
.tf-ed-datum{color:var(--muted);font-size:var(--t-m)}
.tf-ed-body{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.tf-ed-row{display:flex;align-items:flex-start;gap:12px}
.tf-ed-ic{flex:none;font-size:var(--t-l);line-height:1.4}
.tf-ed-row b{display:block;font-size:var(--t-m)}
.tf-ed-row small{color:var(--muted);white-space:pre-line}
.tf-ed-row .sec-link{margin-left:auto;flex:none}
.sm-card{padding:18px}
.sm-card h3{font-size:var(--t-base);margin-bottom:12px}
.sm-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);text-decoration:none}
.sm-row:last-of-type{border-bottom:0}
.sm-ic{width:36px;height:36px;border-radius:var(--r-m);display:grid;place-items:center;color:#fff;flex:none;font-weight:800;font-size:var(--t-s)}
.sm-ic.ig{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)}
.sm-ic.tt{background:#000}
.sm-ic.fb{background:#1877F2}
.sm-row b{display:block;font-size:var(--t-m)}
.sm-row small{color:var(--muted)}
.sm-row .go{margin-left:auto;color:var(--muted)}

/* ---------- Abteilungen ---------- */
.dept-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:1000px){.dept-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.dept-grid{grid-template-columns:1fr}}
.dept{padding:18px;text-align:left;display:flex;flex-direction:column;gap:6px;transition:transform .15s ease, box-shadow .15s ease;border-top:3px solid var(--red);text-decoration:none}
.dept b{font-size:var(--t-base)}
.dept small{color:var(--muted);line-height:1.45}
.dept .go{margin-top:8px;font-size:var(--t-m);font-weight:700;color:var(--red-text)}

/* ---------- Unterseiten / Artikel ---------- */
.subhero{background:radial-gradient(900px 260px at 12% -30%,rgba(196,17,48,.35),transparent 60%),var(--ink);color:#fff;padding:30px 0 26px;position:relative}
.subhero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--red),#E23A54,var(--red-d))}
.crumbs{font-size:var(--t-s);color:rgba(255,255,255,.6);margin-bottom:10px}
.crumbs a{color:rgba(255,255,255,.75);text-decoration:none}
.subhero .eyebrow{margin-bottom:10px}
.subhero .eyebrow span{color:rgba(255,255,255,.6)}
.subhero h1{font-size:clamp(var(--t-2xl),3vw,var(--t-4xl));font-weight:750;letter-spacing:var(--ls-eng)}
.subhero p{color:rgba(255,255,255,.75);max-width:64ch;margin-top:8px}
.subhero .meta{color:rgba(255,255,255,.55);font-size:var(--t-s);margin-top:10px}

.content-card{padding:26px;margin-top:26px}

/* ---------- Einsatzort-Infokarte ---------- */
.venue-info{padding:18px 20px;background:var(--blue-soft)}
.venue-info-kopf{font-weight:700;margin-bottom:8px;color:var(--blue-text)}
.venue-info p{margin:0 0 8px;font-size:var(--t-m);line-height:1.5}
.venue-info p:last-child{margin-bottom:0}

/* ---------- Reaktionen unter Beiträgen ---------- */
.reaktionen{display:flex;gap:8px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.reaktion{display:flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--line);
	border-radius:var(--r-xl);padding:7px 13px;cursor:pointer;font-size:var(--t-base);transition:transform .12s var(--feder),border-color .15s ease}
.reaktion.aktiv{background:var(--red-soft);border-color:var(--red-text)}
.reaktion-zahl{font-size:var(--t-s);font-weight:700;color:var(--muted)}
.reaktion.aktiv .reaktion-zahl{color:var(--red-text)}
.reaktion-zahl[hidden]{display:none}
.content-prose{max-width:76ch;font-size:var(--t-base)}
.content-prose p{margin-bottom:14px}
.content-prose ul,.content-prose ol{margin:0 0 14px 22px}
.content-prose li{margin-bottom:6px}
.content-prose a{color:var(--red-text);font-weight:600}

table{width:100%;border-collapse:collapse;font-size:var(--t-m)}
th{font-size:var(--t-xs);letter-spacing:var(--ls-weit);text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line)}
td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}

/* ---------- Formular-Bibliothek ---------- */
.lib-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.lib-search{flex:1;min-width:220px;display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:10px 12px}
.lib-search input{border:0;width:100%;font-size:var(--t-m);background:none}
.lib-search input:focus{outline:none}
.chip{border:1px solid var(--line);background:var(--card);border-radius:var(--r-xl);padding:7px 14px;font-size:var(--t-s);font-weight:600;color:var(--muted)}
.chip.active{background:var(--flaeche-stark);border-color:var(--flaeche-stark);color:var(--auf-stark)}
.doc-letter{padding:16px 16px 6px;font-size:var(--t-s);font-weight:800;letter-spacing:var(--ls-weit);color:var(--red-text)}
.doc-letter:first-child{padding-top:4px}
.doc{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line)}
.doc:last-child,.doc:has(+ .doc-letter){border-bottom:0}
.doc .fic{width:38px;height:38px;border-radius:var(--r-m);background:var(--red-soft);color:var(--red-text);display:grid;place-items:center;flex:none;font-size:var(--t-2xs);font-weight:800;letter-spacing:var(--ls-weit)}
.doc .fic.on{background:var(--green-soft);color:var(--green-text)}
.doc b{display:block;font-size:var(--t-m)}
.doc small{color:var(--muted)}
.doc .dl{margin-left:auto;flex:none}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.75);margin-top:48px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px;padding:36px 0}
@media (max-width:800px){.foot-grid{grid-template-columns:1fr}}
.site-footer h4{color:#fff;font-size:var(--t-s);letter-spacing:var(--ls-label);text-transform:uppercase;margin-bottom:12px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.site-footer li{list-style:none;margin-bottom:8px;font-size:var(--t-m)}
.site-footer a{color:rgba(255,255,255,.75);text-decoration:none}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding:16px 0;font-size:var(--t-s);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:rgba(255,255,255,.5)}

/* ---------- Hinweisbox / Leerzustand ---------- */
.emptyhint{padding:22px;color:var(--muted);font-size:var(--t-m)}

/* ---------- Pagination & Suche ---------- */
.pagination{display:flex;gap:8px;margin:26px 0;flex-wrap:wrap}
.pagination .page-numbers{padding:8px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);text-decoration:none;font-weight:600;font-size:var(--t-m);color:var(--muted)}
.pagination .page-numbers.current{background:var(--flaeche-stark);color:var(--auf-stark);border-color:var(--flaeche-stark)}

/* ---------- Frontend-Formulare (Verwalten, Profil, Feedback) ---------- */
.f-ok{padding:14px 18px;margin-bottom:16px;border-left:4px solid var(--green);color:var(--green-text);font-weight:600;position:relative;overflow:visible}
.f-ok.f-fehler{border-left-color:var(--red-text);color:var(--red-text)}

/* Kleiner Konfetti-Moment bei Erfolgsmeldungen – siehe bewegung.js */
.tf-konfetti{position:absolute;top:10px;width:6px;height:10px;border-radius:2px;opacity:0;pointer-events:none;
	animation:tf-konfetti-fall .8s ease-out forwards}
@keyframes tf-konfetti-fall{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),74px) rotate(var(--r))}}
.f-block{padding:18px;margin-bottom:14px}
.f-block summary{cursor:pointer;font-size:var(--t-base);list-style:none}
.f-block summary::-webkit-details-marker{display:none}
.f-block[open] summary{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f-field{display:flex;flex-direction:column;gap:6px;grid-column:1/-1}
.f-field.f-half{grid-column:auto}
@media(max-width:700px){.f-field.f-half{grid-column:1/-1}}
.f-field label{font-size:var(--t-s);font-weight:700;color:var(--stark)}
.f-field label small{font-weight:500;color:var(--muted)}
.f-field input,.f-field select,.f-field textarea{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-m);font:inherit;font-size:var(--t-m);background:var(--card);color:var(--text);width:100%}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{outline:none;border-color:var(--red-text);box-shadow:0 0 0 3px rgba(196,17,48,.12)}
.f-checks{display:flex;gap:10px;flex-wrap:wrap}
.f-check{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-m);font-weight:600;color:var(--text);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);padding:7px 13px;cursor:pointer}
.f-check input{width:auto}
.f-check.f-alarm{background:var(--red-soft);border-color:#F5AEB6;border-radius:var(--r-m);width:100%;padding:11px 14px}
.f-grid .btn{grid-column:1/-1;justify-self:start;border:0}

/* ---------- Tabellen-Feld (Zeilenformulare wie Schlüsselliste, Bedarfsmeldung) ---------- */
.f-tabelle-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-m)}
.f-tabelle{width:100%;border-collapse:collapse;font-size:var(--t-s)}
.f-tabelle th,.f-tabelle td{padding:5px;border-bottom:1px solid var(--line);white-space:nowrap}
.f-tabelle thead th{background:var(--paper);color:var(--muted);font-weight:700;text-align:left;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:0}
.f-tabelle tbody th{color:var(--muted);font-weight:600;text-align:left;padding-left:10px;white-space:nowrap}
.f-tabelle tbody tr:last-child th,.f-tabelle tbody tr:last-child td{border-bottom:0}
.f-tabelle input{width:100%;min-width:90px;padding:7px 8px;border:1px solid var(--line);border-radius:var(--r-s);font:inherit;font-size:var(--t-m);background:var(--card);color:var(--text)}
.f-tabelle input:focus{outline:none;border-color:var(--red-text);box-shadow:0 0 0 2px rgba(196,17,48,.12)}
.f-tabelle-plus,#tf-entwurf-plus{margin-top:8px;align-self:flex-start}

/* ---------- Gemeinsamer Entwurf (live bearbeitbare Liste) ---------- */
.entwurf-hinweis{padding:16px 20px;margin-bottom:16px;border-left:4px solid var(--red);display:flex;flex-direction:column;gap:4px}
.entwurf-hinweis b{font-size:var(--t-base)}
.entwurf-hinweis span{color:var(--muted);font-size:var(--t-m);line-height:1.55}
.entwurf-hinweis small{color:var(--muted);font-size:var(--t-s);font-weight:600;margin-top:4px}
.f-tabelle input.ist-fremd{border-color:var(--red-text);background:var(--red-soft);transition:background 1.2s ease,border-color 1.2s ease}

/* ---------- Formular-Karten mit zwei Aktionen (z. B. Hallenpläne PDF/Interaktiv) ---------- */
.form-card .acts{margin-top:auto;padding-top:8px;display:flex;flex-direction:column;gap:4px}
.form-card .acts .act{margin-top:0;padding-top:0}

/* ---------- Interaktive Hallenpläne ---------- */
.hp-karte-card{padding:20px}
.hp-karte{position:relative;width:100%;line-height:0;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line)}
.hp-bild{width:100%;display:block}
.hp-svg{position:absolute;inset:0;width:100%;height:100%}
.hp-hotspot{fill:rgba(196,17,48,0);stroke:transparent;stroke-width:2;cursor:pointer;transition:fill .15s ease,stroke .15s ease}
.hp-hotspot:hover,.hp-hotspot:focus-visible{fill:rgba(196,17,48,.22);stroke:var(--red-text);outline:none}
.hp-liste{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hp-listeneintrag{border:1px solid var(--line);background:var(--card);border-radius:var(--r-s);padding:8px 14px;font-weight:600;font-size:var(--t-m);cursor:pointer;color:var(--text);transition:border-color .15s ease,color .15s ease,transform .15s var(--feder)}
.hp-listeneintrag:hover{border-color:var(--red-text);color:var(--red-text);transform:translateY(-1px)}

.hp-modal{position:fixed;inset:0;background:rgba(20,20,24,.65);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.hp-modal[hidden]{display:none}
.hp-modal-inner{background:var(--card);border-radius:var(--r-m);max-width:1000px;width:100%;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-lg)}
.hp-modal-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.hp-modal-head h3{margin:0;font-size:var(--t-l);white-space:nowrap}
.hp-modal-tabs{display:flex;gap:6px;flex-wrap:wrap}
.hp-modal-tab{border:1px solid var(--line);background:var(--card);border-radius:var(--r-xl);padding:4px 12px;font-size:var(--t-s);cursor:pointer;color:var(--text)}
.hp-modal-tab.aktiv{background:var(--red);color:#fff;border-color:var(--red)}
.hp-modal-schliessen{margin-left:auto;background:none;border:0;font-size:var(--t-3xl);line-height:1;cursor:pointer;color:var(--muted);padding:0 4px}
.hp-modal-schliessen:hover{color:var(--red-text)}
.hp-modal-frame{flex:1;border:0;width:100%;min-height:65vh;background:var(--paper)}
@media(max-width:640px){.hp-modal{padding:0}.hp-modal-inner{max-height:100vh;border-radius:0}.hp-modal-frame{min-height:70vh}}

/* ---------- Verwalten: Zeilen-Aktionen (Status, Löschen) ---------- */
.doc .row-forms{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:none}
.doc .row-forms form{display:flex;gap:6px;align-items:center;margin:0}
.doc .row-forms select{padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-s);font:inherit;font-size:var(--t-s);background:var(--card);color:var(--text)}
.btn.mini{padding:8px 13px;font-size:var(--t-s);border:0;cursor:pointer}

/* ---------- Team-Seite ---------- */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:1000px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.team-grid{grid-template-columns:1fr}}
.member{overflow:hidden;display:flex;flex-direction:column;padding:0;transition:transform .15s ease, box-shadow .15s ease}
.member .foto{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--line);border-bottom:3px solid var(--red)}
.member .foto-init{width:100%;aspect-ratio:4/5;display:grid;place-items:center;font-size:var(--t-5xl);font-weight:800;color:#fff;background:linear-gradient(135deg,var(--ink),var(--ink3));letter-spacing:var(--ls-weit);border-bottom:3px solid var(--red)}
.member .m-body{padding:16px;display:flex;flex-direction:column;gap:7px}
.member h3{font-size:var(--t-base);font-weight:700}
.member .m-kontakt{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.member .m-kontakt a{font-size:var(--t-s);font-weight:600;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);padding:7px 12px;text-decoration:none;color:var(--text)}

/* ---------- Freie Editor-Vorlage ---------- */
.content-frei{max-width:none;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;margin-top:26px}
.content-frei .wp-block-image img{border-radius:var(--r-m)}

/* ---------- Chat-Seite ---------- */
.chat-embed{margin-top:26px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.chat-embed .bm-messages-wrap{border-radius:var(--radius)}

/* ---------- Bereichsseiten: Karten, Ansprechpartner, FAQ ---------- */
.contact-strip{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
.contact-strip .person{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-m);padding:10px 15px}
.contact-strip .pa{width:40px;height:40px;border-radius:var(--r-m);background:var(--red);color:#fff;display:grid;place-items:center;font-weight:800;font-size:var(--t-m);flex:none}
.contact-strip .person b{font-size:var(--t-m);display:block;color:#fff}
.contact-strip .person small{font-size:var(--t-xs);color:rgba(255,255,255,.6);display:block;margin-top:2px}
.contact-strip .person.eil{background:rgba(255,255,255,.95);border-color:#fff}
.contact-strip .person.eil .pa{background:#fff;color:var(--red-d)}
.contact-strip .person.eil b,.contact-strip .person.eil small{color:var(--stark)}
.contact-strip .person.eil small{color:var(--muted)}

.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
@media(max-width:1000px){.form-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}
.form-card{display:flex;flex-direction:column;gap:8px;padding:18px;text-decoration:none;color:inherit;border-left:3px solid var(--line)}
.form-card:has(.tag.red){border-left-color:var(--red-text)}
.form-card:has(.tag.green){border-left-color:var(--green-text)}
.form-card:has(.tag.amber){border-left-color:var(--amber-text)}
.form-card:has(.tag.blue){border-left-color:var(--blue-text)}
.form-card small{color:var(--muted);font-size:var(--t-m);line-height:1.55;font-weight:400}
.form-card .top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.form-card .top b{font-size:var(--t-base);line-height:1.3}
.form-card .act{margin-top:auto;padding-top:8px;font-size:var(--t-m);font-weight:700;color:var(--red-text);transition:transform .15s var(--feder)}
a.form-card{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
a.form-card:hover .act{transform:translateX(4px)}

/* Nummerierte Ablauf-Schritte (Onboarding, Ein-/Auszug) */
.step-card{padding:20px}
.step-intro{font-size:var(--t-m);color:var(--muted);margin-bottom:16px}
.step-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.step-list li{display:flex;gap:12px;align-items:center}
.step-num{flex:none;width:28px;height:28px;border-radius:50%;background:var(--red-soft);color:var(--red-text);display:grid;place-items:center;font-weight:800;font-size:var(--t-s)}
.step-list li span:last-child{font-size:var(--t-m);line-height:1.4}
.step-note{font-size:var(--t-s);color:var(--muted);margin-top:16px}

.faq{padding:6px 20px}
.faq details{border-bottom:1px solid var(--line);padding:15px 2px}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;font-weight:700;font-size:var(--t-base);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:var(--t-xl);color:var(--red-text);font-weight:800;flex:none;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:10px;font-size:var(--t-m);color:var(--muted);line-height:1.65}

/* ---------- Mein Profil ---------- */
.profil-card{max-width:620px;padding:22px;margin-top:16px}
.avatar-row{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.avatar-big{width:88px;height:88px;border-radius:50%;object-fit:cover;border:3px solid var(--line);flex:none}
.avatar-init{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:var(--t-3xl);color:#fff;background:linear-gradient(135deg,var(--ink),var(--ink3));flex:none}
.avatar-row .wer b{font-size:var(--t-l)}
.avatar-row .wer small{display:block;color:var(--muted);margin-top:6px}

/* Ein schlankerer Seitenkopf: Wo direkt darunter eine Visitenkarte
   oder ein Chatfenster steht, braucht es keinen Fließtext im Dunklen. */
.subhero.schmal{padding:24px 0 20px}

/* ---------- Visitenkarte oben ----------
   Trägt seit Kurzem dieselbe „Ausweis“-Handschrift wie die Login-Karte
   (Lochreihe + Badge-Chip): Anders als die übrigen Karten im Portal
   zeigt diese hier tatsächlich einen Ausweis – Foto, Name, Funktion. */
.pf-kopf{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
	background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
	box-shadow:var(--shadow);padding:22px 24px;margin:-34px 0 22px;position:relative}
.pf-kopf::before{content:"";position:absolute;top:0;left:0;right:0;height:2.5px;
	background:linear-gradient(90deg,var(--red),#E23A54,var(--red-d));border-radius:var(--radius) var(--radius) 0 0}
.pf-kopf::after{content:"";position:absolute;top:2.5px;left:18px;right:18px;height:7px;
	background-image:radial-gradient(circle at 4.5px 3.5px,var(--line) 2.1px,transparent 2.2px);
	background-size:14px 7px;background-repeat:repeat-x}
.pf-ausweis{position:absolute;top:-11px;right:20px;display:inline-flex;align-items:center;gap:6px;
	font-size:var(--t-2xs);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--red-text);
	background:var(--card);border:1px solid rgba(196,17,48,.32);border-radius:var(--r-xl);padding:4px 11px 4px 9px;
	box-shadow:0 2px 6px rgba(16,24,40,.12)}
.pf-ausweis-punkt{width:5px;height:5px;border-radius:50%;background:var(--red);flex:none}
@media(max-width:640px){.pf-ausweis{position:static;width:100%;margin-bottom:2px}}
.pf-bild{width:78px;height:78px;border-radius:50%;object-fit:cover;flex:none;border:3px solid #fff;
	box-shadow:0 2px 10px rgba(16,24,40,.14)}
.pf-init{display:grid;place-items:center;font-weight:800;font-size:var(--t-2xl);color:#fff;
	background:linear-gradient(135deg,var(--ink),var(--ink3))}
.pf-wer{flex:1;min-width:200px}
.pf-wer h2{font-size:var(--t-xl);letter-spacing:var(--ls-titel);margin:0 0 6px}
.pf-ohne{color:var(--muted);font-size:var(--t-m);margin:0}

/* ---------- Qualifikationen im Profil: Status auf einen Blick ---------- */
.zert-karte{grid-column:1/-1;display:flex;flex-direction:column}
.zert-eintrag{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.zert-eintrag:first-child{padding-top:0}
.zert-eintrag:last-child{padding-bottom:0;border-bottom:0}
.zert-status{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none}
.zert-status.green{background:var(--green-soft);color:var(--green-text)}
.zert-status.amber{background:var(--amber-soft);color:var(--amber-text)}
.zert-status.red{background:var(--red-soft);color:var(--red-text)}
.zert-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.zert-info b{font-size:var(--t-m);font-weight:700}
.zert-info small{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:var(--t-s)}
.zert-dl{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
	background:var(--paper);color:var(--muted);border:1px solid var(--line);text-decoration:none;
	transition:color .15s ease,border-color .15s ease,background .15s ease}
.zert-dl:hover,.zert-dl:focus-visible{color:var(--red-text);border-color:var(--red-text);background:var(--red-soft)}
.pf-fakten{display:flex;gap:8px 18px;flex-wrap:wrap;align-items:center;margin-top:12px;
	font-size:var(--t-s);color:var(--muted)}
.pf-fakten b{color:var(--text);font-weight:700}

/* Die Stufe im Ausweis.
   Sie steht hier oben, weil sie zu dem gehört, was ein Ausweis zeigt – und
   weil man sonst an sechs Karten vorbeiscrollen musste, um sie zu sehen. Die
   Auszeichnung folgt der Ausweis-Handschrift des Kopfes: kleiner Rotton, wie
   der Badge-Chip „Mitarbeiterausweis“ darüber, aber ruhiger, damit die beiden
   nicht miteinander konkurrieren. Der Klick springt zur ausführlichen Karte,
   in der steht, woraus sich die Stufe errechnet. */
.pf-stufe-chip{display:inline-flex;align-items:baseline;gap:7px;text-decoration:none;
	background:var(--red-soft);border:1px solid rgba(196,17,48,.22);
	border-radius:var(--r-voll);padding:5px 13px 5px 11px;color:var(--red-text);
	transition:border-color .18s ease,background .18s ease,transform .18s var(--weich)}
.pf-stufe-chip-lbl{font-size:var(--t-2xs);font-weight:700;letter-spacing:var(--ls-label);
	text-transform:uppercase;opacity:.75}
.pf-stufe-chip b{font-size:var(--t-s);font-weight:700;color:var(--red-text)}

/* Gruppenüberschriften in „Meine Daten“.
   Vorher standen dort zehn gleich aussehende Karten hintereinander, ohne
   Hinweis darauf, was zusammengehört und wer es überhaupt ändern kann. Die
   Einteilung folgt genau dieser Frage: was du selbst einträgst, was nur auf
   diesem Gerät gilt, was die Personalabteilung pflegt. */
.pf-gruppe{margin:34px 0 14px}
.pf-gruppe:first-child,.pf-gruppe-erste{margin-top:6px}
.pf-gruppe p{margin:6px 0 0;color:var(--muted);font-size:var(--t-s);max-width:60ch}
.pf-mgmt{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:var(--r-xl);
	background:var(--paper);border:1px solid var(--line);color:var(--text);
	font-size:var(--t-m);font-weight:600;text-decoration:none;white-space:nowrap}
@media(max-width:640px){
	.pf-kopf{gap:14px;padding:18px;margin-top:-28px}
	.pf-bild{width:62px;height:62px}
	.pf-wer h2{font-size:var(--t-l)}
	.pf-mgmt{width:100%;justify-content:center}
}

/* ---------- Daten in Karten statt in einem Bandwurm ---------- */
.pf-raster{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:start}
@media(max-width:820px){.pf-raster{grid-template-columns:1fr}}
.pf-karte{padding:20px 22px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pf-karte-kopf{grid-column:1/-1;padding-bottom:12px;border-bottom:1px solid var(--line)}
.pf-karte-kopf b{display:block;font-size:var(--t-base)}
.pf-karte-kopf small{display:block;color:var(--muted);margin-top:4px;font-size:var(--t-s);line-height:1.5}
.pf-karte .f-field{grid-column:1/-1;margin:0}
.pf-karte .f-field.f-half{grid-column:auto}
@media(max-width:520px){.pf-karte .f-field.f-half{grid-column:1/-1}}
.pf-karte-voll{margin-top:16px}
/* Die Stufe: ein Titel, keine Zahl, kein Balken, kein Fortschrittsring –
   sie soll gelesen und nicht angestarrt werden. .pf-karte ist ein
   zweispaltiges Raster, deshalb spannen die Zeilen ausdrücklich über beide. */
.pf-karte .pf-stufe,.pf-karte .pf-stufe-basis,.pf-karte .pf-stufe-naechste,.pf-karte .pf-ohne{grid-column:1/-1;margin:0}
.pf-stufe{font-size:var(--t-2xl);font-weight:800;letter-spacing:var(--ls-eng);line-height:1.2}
.pf-stufe-basis{font-size:var(--t-m);color:var(--muted);margin-top:4px !important}
.pf-stufe-naechste{font-size:var(--t-m);color:var(--muted);padding-top:10px;border-top:1px solid var(--line)}
.pf-karte .danke-gitter{grid-column:1/-1}
.f-hint{display:block;margin-top:6px;font-size:var(--t-s);color:var(--muted);line-height:1.5}

.zert-liste{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.zert-zeile{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:14px;border-top:1px solid var(--line)}
.zert-liste .zert-zeile:first-child{padding-top:0;border-top:0}
.zert-zeile .zert-datei{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:var(--t-m);margin-top:2px}
.zert-zeile .zert-fuss{grid-column:1/-1;display:flex;justify-content:flex-end}

.pf-bild-zeile{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pf-vorschau{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--line)}
span.pf-vorschau{display:grid;place-items:center;font-weight:800;font-size:var(--t-xl);color:#fff;
	background:linear-gradient(135deg,var(--ink),var(--ink3));border:0}

/* Das Häkchen darf hier ruhig Platz einnehmen – es ist eine Entscheidung */
.pf-karte .f-check{grid-column:1/-1;border-radius:var(--r-m);width:100%;padding:12px 14px;
	align-items:flex-start;font-weight:500;background:var(--paper)}
.pf-karte .f-check b{font-weight:700}
.pf-karte .f-check small{color:var(--muted);font-size:var(--t-s)}

.pf-speichern{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:2px}
.pf-speichern small{color:var(--muted);font-size:var(--t-s)}
.pf-speichern a{color:var(--red-text);font-weight:600}

/* ---------- Push aufs Handy ---------- */
.push-karte{max-width:620px;padding:22px;margin-top:16px}
.push-kopf{display:flex;gap:14px;align-items:flex-start}
.push-ic{font-size:var(--t-2xl);line-height:1;flex:none;width:44px;height:44px;border-radius:var(--r-m);
	display:grid;place-items:center;background:var(--red-soft)}
.push-kopf b{display:block;font-size:var(--t-base)}
.push-kopf small{display:block;color:var(--muted);margin-top:5px;line-height:1.55}
.push-stand{margin:16px 0 0;font-size:var(--t-m);color:var(--text);line-height:1.55}
.push-aktion{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.push-aktion button[hidden]{display:none}
.push-fein{margin:14px 0 0;font-size:var(--t-s);color:var(--muted)}

.push-hilfe{margin-top:16px;padding:16px 18px;border-radius:var(--r-m);background:var(--blue-soft);
	border-left:3px solid var(--blue)}
.push-hilfe[hidden]{display:none}
.push-hilfe b{display:block;font-size:var(--t-m);margin-bottom:8px}
.push-hilfe ol{margin:0;padding-left:20px}
.push-hilfe li{font-size:var(--t-m);line-height:1.7;color:var(--text)}
.push-hilfe small{display:block;margin-top:10px;color:var(--muted);font-size:var(--t-s);line-height:1.6}

/* ============================================================
   FREUNDE
   Verbindungen entstehen nur über den persönlichen Code – die
   Gestaltung stellt ihn deshalb ganz nach vorn.
   ============================================================ */
.fr-oben{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:26px}
@media(max-width:820px){.fr-oben{grid-template-columns:1fr}}
.fr-code-karte,.fr-such-karte{padding:20px 22px}
.fr-titel{display:block;font-size:var(--t-base)}
.fr-hint{color:var(--muted);font-size:var(--t-m);line-height:1.55;margin:6px 0 16px}

/* Raster statt Flex mit Umbruch: So sitzt der Knopf garantiert auf
   der Mittellinie und kann nicht aus dem Kasten rutschen. */
.fr-code{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;
	background:var(--ink);border-radius:var(--r-m);padding:14px 16px}
.fr-code span{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
	font-size:var(--t-l);font-weight:700;letter-spacing:var(--ls-weit);color:#fff;
	align-self:center;overflow-wrap:anywhere}
.fr-code .btn{align-self:center;margin:0}
@media(max-width:440px){
	.fr-code{grid-template-columns:1fr;justify-items:start;gap:10px}
	.fr-code span{font-size:var(--t-base);letter-spacing:var(--ls-weit)}
}
.fr-neu{margin-top:12px;background:none;border:0;padding:0;cursor:pointer;
	color:var(--muted);font-size:var(--t-s);text-decoration:underline;font-family:inherit}

.fr-form{display:flex;gap:10px;flex-wrap:wrap}
.fr-form input{flex:1;min-width:170px;text-transform:uppercase;
	font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;letter-spacing:var(--ls-weit)}
.fr-form input::placeholder{text-transform:none;letter-spacing:normal}

.fr-block{margin-bottom:26px}
.fr-block-titel{display:flex;align-items:center;gap:10px;font-size:var(--t-base);margin:0 0 12px}
.fr-zahl{min-width:22px;height:22px;padding:0 7px;border-radius:var(--r-m);background:var(--red);color:#fff;
	font-size:var(--t-xs);font-weight:800;line-height:22px;text-align:center}
.fr-zahl.stumm{background:var(--paper);color:var(--muted);border:1px solid var(--line)}

.fr-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
@media(max-width:520px){.fr-liste{grid-template-columns:1fr}}
.fr-karte{padding:14px 16px}
.fr-karte.blass{opacity:.72}

/* Drei feste Spalten: Bild · Name · Aktionen. Kein Umbruch, damit
   nichts über die Karte hinausrutschen kann. */
.fr-person{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px}
.fr-bild{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--line)}
span.fr-bild{display:grid;place-items:center;font-weight:800;font-size:var(--t-m);color:#fff;
	background:linear-gradient(135deg,var(--ink),var(--ink3));border:0}
.fr-wer{min-width:0}
.fr-wer b{display:block;font-size:var(--t-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-wer .funktionen{margin-top:4px}

.fr-akt{display:flex;align-items:center;gap:4px;align-self:center}
.fr-akt form{margin:0;display:flex}

/* Zurückhaltender als ein voller roter Knopf – in einer Liste von
   Personen soll die Person im Vordergrund stehen, nicht der Knopf. */
.fr-akt .btn{align-self:center;margin:0;background:var(--red-soft);color:var(--red-text);
	padding:8px 14px;font-size:var(--t-s);border-radius:var(--r-xl)}

.fr-weg{background:none;border:0;color:#B6BCC6;font-size:var(--t-2xl);line-height:1;cursor:pointer;
	padding:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center}

@media(max-width:420px){
	.fr-person{grid-template-columns:auto 1fr;row-gap:12px}
	.fr-akt{grid-column:1/-1;justify-content:flex-end}
}

/* ============================================================
   CHAT
   Angelehnt an das, was alle kennen: heller Sprechblasen-Verlauf,
   eigene Nachrichten grün und rechts, fremde weiß und links, die
   Uhrzeit sitzt in der Blase statt darunter.

   Die Blasen-Regeln (.blase …) gelten an ZWEI Stellen: auf der
   Chat-Seite und im kleinen Fenster unten rechts. Deshalb hängen
   sie an keiner der beiden Umgebungen – wer sie ändert, ändert
   beides. Genau so ist es gewollt.
   ============================================================ */

:root{
	/* Emoji sollen farbig kommen – auf Apple-Geräten mit Apples
	   Zeichensatz, sonst mit dem des jeweiligen Systems. */
	--emoji:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",sans-serif;
	/* Die Grundschrift als Variable, damit sie mit den Emoji-Zeichensätzen
	   kombiniert werden kann. „font-family:inherit,…“ wäre ungültig und
	   würde die ganze Regel verwerfen – deshalb ausgeschrieben. */
	--schrift:"Plex Sans","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
	/* Die Chatfarben kamen aus einem anderen Haus: warmes Beige als Papier,
	   grüne eigene Blasen – das ist die Handschrift von WhatsApp, nicht die
	   von Teamflex. Jetzt stehen sie auf den Portalfarben. Die eigene Blase
	   trägt einen sehr hellen Rotton: Rot ist im Portal die Hausfarbe, nicht
	   das Alarmsignal (siehe .tag.red), und sie unterscheidet damit die
	   eigene Nachricht ohne eine fremde Konvention zu borgen. */
	--chat-papier:#F2F3F5;
	--blase-du:#FFFFFF;
	--blase-ich:#F8E5E9;
	--chat-leiste:#FFFFFF;
	--chat-mute:#69707D;
	--chat-mute2:#8A9099;
	--chat-rand:#E4E7EC;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--chat-papier:#14171C; --blase-du:#23272E; --blase-ich:#3B1C23; --chat-leiste:#1D2025;
		--chat-mute:#9AA1AC; --chat-mute2:#B4BAC2; --chat-rand:#2B2E34;
	}
}
:root[data-theme="dark"] {
	--chat-papier:#14171C; --blase-du:#23272E; --blase-ich:#3B1C23; --chat-leiste:#1D2025;
	--chat-mute:#9AA1AC; --chat-mute2:#B4BAC2; --chat-rand:#2B2E34;
}

.chat{display:grid;grid-template-columns:330px 1fr;gap:0;
	background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
	box-shadow:0 8px 30px -18px rgba(16,24,40,.45);overflow:hidden;
	height:min(74vh,760px);min-height:460px}

/* ---------- Linke Spalte ---------- */
/* min-height:0 ist hier kein Schönheitsfehler, sondern Pflicht:
   Rasterfelder und Flex-Kinder wachsen sonst auf ihre Inhaltshöhe
   und schieben die Eingabeleiste aus dem Kasten – genau daran ist
   die erste Fassung gescheitert. */
.chat-liste{border-right:1px solid var(--line);overflow-y:auto;background:var(--card);min-height:0}
.chat-liste-kopf{display:flex;align-items:center;justify-content:space-between;
	padding:14px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;
	background:var(--chat-leiste);z-index:2}
.chat-liste-kopf b{font-size:var(--t-base)}
.chat-plus{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
	background:var(--red);color:#fff;font-size:var(--t-xl);font-weight:700;
	text-decoration:none;line-height:1}

.chat-eintrag{display:flex;align-items:center;gap:12px;padding:11px 15px;text-decoration:none;
	color:var(--text);border-bottom:1px solid var(--line)}
.chat-eintrag.aktiv{background:var(--paper)}
.chat-bild{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none}
span.chat-bild{display:grid;place-items:center;font-weight:700;font-size:var(--t-m);color:#fff;
	background:linear-gradient(135deg,var(--ink),var(--ink3))}
/* Gruppenräume statt einer Person: kein Foto, sondern ein Symbol – und ein
   anderer Grundton, damit man in der Liste sofort sieht, dass hier mehrere
   mitlesen. Siehe inc/chat-raeume.php. */
span.chat-bild.chat-gruppe{background:linear-gradient(135deg,var(--red-d),var(--red));font-size:var(--t-l)}
.chat-text{flex:1;min-width:0}
.chat-text b{display:block;font-size:var(--t-base);font-weight:600;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-text small{display:block;color:var(--muted);font-size:var(--t-s);margin-top:2px;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--schrift),var(--emoji)}
.chat-rechts{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.chat-zeit{font-size:var(--t-xs);color:var(--muted)}
.chat-neu{min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-m);background:#25D366;color:#fff;
	font-size:var(--t-2xs);font-weight:800;line-height:20px;text-align:center}
.chat-neu[hidden]{display:none}

/* ---------- Rechte Spalte ---------- */
.chat-fenster{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--chat-papier);
	position:relative}
/* „display:flex“ oben schlägt das hidden-Attribut – hier wieder einfangen,
   sonst lässt sich das Gespräch im kleinen Fenster nicht ausblenden. */
.chat-fenster[hidden],.mini-rollen[hidden]{display:none}
.chat-leer{margin:auto;text-align:center;color:var(--muted);padding:30px;position:relative;z-index:1}
.chat-leer span{font-size:var(--t-5xl);display:block;margin-bottom:10px;opacity:.45;font-family:var(--emoji)}
.chat-leer p{font-size:var(--t-m)}

.chat-kopf{display:flex;align-items:center;gap:12px;padding:10px 16px;
	background:var(--chat-leiste);border-bottom:1px solid var(--chat-rand);flex:none;z-index:2}
.chat-kopf .chat-bild{width:40px;height:40px}
.chat-kopf-wer{min-width:0;flex:1}
.chat-kopf-wer b{display:block;font-size:var(--t-base);font-weight:600}
.chat-kopf-wer .funktionen{margin-top:2px}
.chat-zurueck{display:none;font-size:var(--t-3xl);line-height:1;color:var(--text);text-decoration:none;
	padding:0 2px 5px;flex:none}

/* ---------- Der Hintergrund des Gesprächs ----------
   Vorher lag hier ein gekacheltes „tf“ als SVG-Text. Ein Wasserzeichen aus
   Buchstaben hängt aber am Zeichensatz des jeweiligen Systems – auf jedem
   Rechner sah es anders aus, und seit der Umstellung auf Plex passte es zu
   gar nichts mehr.

   Jetzt zwei Ebenen aus reiner Geometrie, die überall gleich aussehen:

   1. Ein feines Planraster als Papier. Es scrollt mit den Nachrichten
      (background-attachment:local) und wirkt dadurch wie ein Blatt, über das
      man schreibt, statt wie eine Tapete dahinter. Hallenpläne sind das
      Papier, auf dem in diesem Betrieb ohnehin gearbeitet wird.
   2. Die Pulslinie unten rechts – dieselbe Silhouette wie auf Startseite und
      Anmeldeseite. Sie steht fest im Fenster, während das Papier darüber
      läuft. Sehr blass: Sie soll auffallen, wenn man hinsieht, und
      verschwinden, wenn man liest. */
.chat-verlauf{flex:1;min-height:0;overflow-y:auto;padding:18px 5% 14px;display:flex;flex-direction:column;
	scroll-behavior:smooth;position:relative;
	background-image:
		linear-gradient(var(--chat-rand) 1px,transparent 1px),
		linear-gradient(90deg,var(--chat-rand) 1px,transparent 1px);
	background-size:34px 34px,34px 34px;
	background-attachment:local,local;
	opacity:1}

/* Die Marke im Fenster, nicht auf dem Papier: Sie bleibt stehen, während
   der Verlauf darüber scrollt. */
.chat-fenster::after{
	content:"";position:absolute;right:0;bottom:0;width:min(460px,62%);height:130px;
	pointer-events:none;z-index:0;opacity:.5;
	background:linear-gradient(to top,var(--chat-rand),transparent);
	clip-path:polygon(0 100%,6% 78%,12% 84%,18% 60%,24% 72%,30% 48%,36% 66%,42% 40%,46% 40%,48% 6%,50% 40%,54% 40%,60% 58%,66% 44%,72% 70%,78% 52%,84% 76%,90% 62%,100% 100%)}

/* Die Blasen liegen darüber. Ohne diese Zeile stünde die Pulslinie vor dem
   Text, sobald sie sich überlappen. */
.chat-verlauf > *{position:relative;z-index:1}
.chat-anfang{margin:auto;color:var(--chat-mute);font-size:var(--t-m);text-align:center;
	background:var(--chat-leiste);padding:9px 16px;border-radius:var(--r-m)}

.chat-tag{text-align:center;margin:12px 0 10px}
.chat-tag span{display:inline-block;padding:5px 13px;border-radius:var(--r-s);
	background:var(--chat-leiste);box-shadow:0 1px 1px rgba(16,24,40,.1);
	color:var(--chat-mute);font-size:var(--t-xs);font-weight:600}

/* ---------- Die Sprechblase ---------- */
.blase{max-width:min(70%,520px);align-self:flex-start;position:relative;
	background:var(--blase-du);border-radius:0 var(--r-s) var(--r-s) var(--r-s);
	padding:6px 10px 8px;margin:0 0 3px;
	box-shadow:0 1px .5px rgba(11,20,26,.13)}
.blase.meine{align-self:flex-end;background:var(--blase-ich);border-radius:var(--r-s) 0 var(--r-s) var(--r-s)}

/* ---------- Skeleton-Platzhalter beim Laden ---------- */
@keyframes tf-skeleton{0%{background-position:100% 50%}100%{background-position:0 50%}}
.skeleton-balken{background:linear-gradient(90deg,var(--chat-rand) 25%,var(--chat-leiste) 37%,var(--chat-rand) 63%);
	background-size:400% 100%;animation:tf-skeleton 1.4s ease infinite;border-radius:var(--r-s)}
@media (prefers-reduced-motion: reduce){.skeleton-balken{animation:none}}

.skeleton-verlauf{display:flex;flex-direction:column;gap:10px;padding:4px 0}
.skeleton-blase{height:34px;border-radius:var(--r-l);max-width:60%}
.skeleton-blase:nth-child(1){width:46%;align-self:flex-start}
.skeleton-blase:nth-child(2){width:58%;align-self:flex-end}
.skeleton-blase:nth-child(3){width:38%;align-self:flex-start}

.skeleton-liste{display:flex;flex-direction:column;gap:14px;padding:14px}
.skeleton-zeile{display:flex;align-items:center;gap:12px}
.skeleton-avatar{width:40px;height:40px;border-radius:50%;flex:none}
.skeleton-text{flex:1;display:flex;flex-direction:column;gap:6px}
.skeleton-text span{height:11px;display:block}
.skeleton-text span:first-child{width:55%}
.skeleton-text span:last-child{width:80%}

/* Sanftes Einblenden für frisch eintreffende/gesendete Nachrichten */
@keyframes tf-blase-ein{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.blase-neu{animation:tf-blase-ein .22s ease both}
@media (prefers-reduced-motion: reduce){.blase-neu{animation:none}}

/* Die Spitze sitzt nur an der ERSTEN Blase eines Blocks – so wie
   im Vorbild. Folgeblasen rücken enger zusammen und sind rund. */
.blase::after{content:"";position:absolute;top:0;width:0;height:0;border-style:solid}
.blase:not(.meine)::after{left:-8px;border-width:0 8px 9px 0;
	border-color:transparent var(--blase-du) transparent transparent}
.blase.meine::after{right:-8px;border-width:0 0 9px 8px;
	border-color:transparent transparent transparent var(--blase-ich)}

.blase.folge{border-radius:var(--r-s);margin-top:0}
.blase.folge::after{display:none}
.blase + .blase{margin-top:2px}

.blase p{margin:0;font-size:var(--t-base);line-height:1.45;color:var(--text);
	overflow-wrap:anywhere;white-space:pre-wrap;padding-right:54px;
	font-family:var(--schrift),var(--emoji)}
.blase-zeit{position:absolute;right:9px;bottom:5px;font-size:var(--t-2xs);color:var(--chat-mute);
	white-space:nowrap;line-height:1;display:flex;align-items:center;gap:3px}

/* ---------- Wer schreibt hier? Nur im Gruppenraum ----------
   Im 1:1-Gespräch wäre der Name an jeder Blase überflüssig, in der Gruppe
   ist er die wichtigste Information. Steht nur an der ersten Blase einer
   Folge (siehe blaseBauen in assets/chat.js). */
.blase-wer{display:block;font-size:var(--t-xs);font-weight:700;color:var(--red-text);
	margin-bottom:3px;letter-spacing:0}

/* ---------- Gelesen-Häkchen ---------- */
.blase-haken{font-size:var(--t-xs);letter-spacing:-.12em;color:var(--chat-mute2)}
.blase-haken.gelesen{color:#53BDEB}

/* ---------- Zurückgenommene Nachricht ---------- */
.blase.zurueck{background:var(--chat-leiste);box-shadow:none;
	border:1px dashed rgba(11,20,26,.18)}
.blase.zurueck::after{display:none}
.blase.zurueck p{color:var(--chat-mute);font-style:italic;padding-right:54px}

/* ---------- Zurücknehmen-Knopf ---------- */
.blase-weg{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;
	border:1px solid var(--line);background:var(--chat-leiste);color:var(--chat-mute2);cursor:pointer;
	font-size:var(--t-m);line-height:1;display:grid;place-items:center;padding:0;
	opacity:0;transition:opacity .15s ease, color .15s ease;box-shadow:0 2px 6px rgba(11,20,26,.18)}
.blase-weg:focus{opacity:1}

@media(hover:none){.blase-weg{opacity:1}}

/* ---------- Datei-Anhang ---------- */
.blase.mit-datei{max-width:min(66%,380px)}
.blase-datei{display:flex;align-items:center;gap:11px;padding:8px 6px 8px 4px;
	text-decoration:none;color:inherit;min-width:180px}
.blase-datei-ic{font-size:var(--t-2xl);flex:none;width:38px;height:38px;border-radius:var(--r-m);
	display:grid;place-items:center;background:rgba(11,20,26,.07);font-family:var(--emoji)}
.blase-datei-wer{min-width:0}
.blase-datei-wer b{display:block;font-size:var(--t-m);font-weight:600;color:var(--text);
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.blase-datei-wer small{display:block;font-size:var(--t-xs);color:var(--chat-mute);margin-top:2px}

/* ---------- „schreibt gerade …“ ---------- */
.chat-tippt{flex:none;display:flex;align-items:center;gap:4px;padding:0 18px 10px;
	background:var(--chat-papier)}
.chat-tippt[hidden]{display:none}
.chat-tippt span{width:7px;height:7px;border-radius:50%;background:var(--chat-mute2);
	animation:tf-tippt 1.3s ease-in-out infinite}
.chat-tippt span:nth-child(2){animation-delay:.18s}
.chat-tippt span:nth-child(3){animation-delay:.36s}
@keyframes tf-tippt{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

/* ---------- Sprung zu den neuesten ---------- */
.chat-sprung{position:absolute;right:18px;bottom:92px;width:40px;height:40px;border-radius:50%;
	border:1px solid var(--line);background:var(--chat-leiste);color:var(--chat-mute);cursor:pointer;font-size:var(--t-l);
	display:grid;place-items:center;z-index:5;box-shadow:0 6px 18px -6px rgba(11,20,26,.45)}
.chat-sprung[hidden]{display:none}

/* ---------- Ältere Nachrichten ---------- */
.chat-mehr{text-align:center;color:var(--chat-mute);font-size:var(--t-s);padding:8px 0 12px}

/* ---------- Anwesenheit ---------- */
.chat-bild-h{position:relative;flex:none;display:block;line-height:0}
.chat-bild-h.ist-an::after{content:"";position:absolute;right:1px;bottom:1px;
	width:12px;height:12px;border-radius:50%;background:#25D366;border:2px solid var(--card)}
.chat-stand{display:block;font-size:var(--t-xs);color:var(--muted);line-height:1.3;min-height:1.1em}
.chat-stand.ist-an{color:#1FA855;font-weight:600}

/* ---------- Anhang-Vorschau über der Eingabe ---------- */
.chat-anhang-vorschau{flex:none;display:flex;align-items:center;gap:10px;
	padding:9px 16px;background:var(--chat-leiste);border-top:1px solid var(--chat-rand);
	font-size:var(--t-m);color:var(--text)}
.chat-anhang-vorschau[hidden]{display:none}
.chat-anhang-vorschau span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-anhang-vorschau button{background:none;border:0;cursor:pointer;color:var(--chat-mute2);
	font-size:var(--t-xl);line-height:1;padding:0 4px}

/* Eine Blase, die nur aus Emoji besteht, wird groß angezeigt –
   kleines Detail, das den Ton der Nachricht trifft. */
.blase.nur-emoji{background:none;box-shadow:none;padding:2px 10px 14px}
.blase.nur-emoji::after{display:none}
.blase.nur-emoji p{font-size:var(--t-5xl);line-height:1.2;padding-right:44px}
.blase.nur-emoji .blase-zeit{color:var(--chat-mute);bottom:0}

/* ---------- Bilder in der Blase ---------- */
.blase.mit-bild{padding:4px 4px 8px;max-width:min(58%,340px)}
.blase.mit-bild p{padding:6px 8px 2px}
.blase.mit-bild p:empty{display:none}
.blase-bild{display:block;width:100%;max-width:100%;border-radius:var(--r-s);cursor:zoom-in;
	background:rgba(0,0,0,.05)}
.blase.mit-bild .blase-zeit{right:12px;bottom:8px;color:#fff;
	text-shadow:0 1px 3px rgba(0,0,0,.65)}
.blase.mit-bild.hat-text .blase-zeit{color:var(--chat-mute);text-shadow:none}

/* Bild groß ansehen */
.bild-gross{position:fixed;inset:0;z-index:200;background:rgba(11,20,26,.93);
	display:grid;place-items:center;padding:24px;cursor:zoom-out}
.bild-gross img{max-width:100%;max-height:100%;border-radius:var(--r-s)}
.bild-gross button{position:absolute;top:16px;right:20px;background:none;border:0;
	color:#fff;font-size:var(--t-4xl);line-height:1;cursor:pointer;padding:6px}

/* ---------- Eingabeleiste ---------- */
.chat-eingabe{display:flex;align-items:flex-end;gap:8px;padding:9px 14px;flex:none;
	background:var(--chat-leiste);border-top:1px solid var(--chat-rand);position:relative}
.chat-eingabe textarea{flex:1;resize:none;border:0;border-radius:var(--r-xl);
	padding:11px 16px;font-family:var(--schrift),var(--emoji);font-size:var(--t-base);line-height:1.4;
	max-height:130px;background:var(--card);color:var(--text)}
.chat-eingabe textarea:focus{outline:none}

.chat-werkzeug{width:40px;height:40px;border-radius:50%;border:0;flex:none;cursor:pointer;
	background:none;color:var(--chat-mute);display:grid;place-items:center;font-size:var(--t-xl);
	font-family:var(--emoji);transition:background .15s ease}
.chat-werkzeug svg{display:block}
.chat-senden{width:42px;height:42px;border-radius:50%;border:0;flex:none;cursor:pointer;
	background:var(--red);color:#fff;display:grid;place-items:center;transition:background .15s ease}
.chat-datei{display:none}

/* Wartebalken beim Bild-Hochladen */
.chat-laedt{position:absolute;left:0;right:0;top:0;height:3px;background:rgba(0,0,0,.07);overflow:hidden}
.chat-laedt::after{content:"";position:absolute;inset:0;width:38%;background:var(--red);
	animation:tf-laden 1.05s ease-in-out infinite}
@keyframes tf-laden{0%{left:-38%}100%{left:100%}}

/* ---------- Emoji-Auswahl ---------- */
.emoji-w{position:absolute;bottom:64px;left:12px;width:min(340px,calc(100% - 24px));
	background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:var(--r-l);
	box-shadow:0 14px 40px -12px rgba(16,24,40,.4);z-index:30;overflow:hidden}
.emoji-w[hidden]{display:none}
.emoji-reiter{display:flex;gap:2px;padding:8px 8px 0;border-bottom:1px solid var(--line);
	overflow-x:auto}
.emoji-reiter button{background:none;border:0;cursor:pointer;padding:6px 9px 8px;
	font-size:var(--t-l);font-family:var(--emoji);border-bottom:2px solid transparent;opacity:.55}
.emoji-reiter button.aktiv{opacity:1;border-bottom-color:var(--red-text)}
.emoji-feld{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:10px;
	max-height:212px;overflow-y:auto}
.emoji-feld button{background:none;border:0;cursor:pointer;padding:5px 0;border-radius:var(--r-s);
	font-size:var(--t-2xl);line-height:1.25;font-family:var(--emoji)}

/* ---------- Handy: entweder Liste oder Gespräch ---------- */
@media(max-width:780px){
	.chat{grid-template-columns:1fr;height:calc(100dvh - 210px);min-height:420px}
	.chat-liste{border-right:0}
	/* Ohne das führende ".chat " traf diese Regel JEDES .chat-fenster auf
	   der Seite – auch das der kleinen Chat-Blase unten rechts, die gar
	   nicht in einem .chat-Container steckt und darum nie wieder auf
	   display:flex zurückgesetzt wurde. Ergebnis: Das Gespräch blieb dort
	   unterhalb von 780px Breite dauerhaft unsichtbar (leere weiße Fläche),
	   egal wie oft man neu lud oder das Layout neu berechnen ließ. */
	.chat .chat-fenster{display:none}
	.chat.hat-offen .chat-liste{display:none}
	.chat.hat-offen .chat-fenster{display:flex}
	.chat-zurueck{display:block}
	.chat-verlauf{padding:14px 12px}
	.blase{max-width:84%}
	.blase.mit-bild{max-width:74%}
}

/* ============================================================
   DAS KLEINE FENSTER UNTEN RECHTS
   Immer erreichbar, egal auf welcher Portalseite man gerade ist.
   Auf dem Handy nimmt es den ganzen Bildschirm ein – dort ist ein
   schwebendes Kästchen unbedienbar.
   ============================================================ */
/* Sitzt über dem „Nach oben“-Knopf (der steht auf bottom:20px) –
   sonst überdecken sich die beiden runden Schaltflächen.
   Bewusst über die ID (#tf-mini) statt der Klasse "mini" angesprochen:
   Klein geschriebene Buttons überall im Portal tragen ebenfalls die
   Klasse "mini" (als Größenangabe, z. B. "btn light mini" bei
   "Öffnen"-Knöpfen) – mit einer bloßen .mini-Regel hätte sich dieses
   feste position:fixed auf JEDEN dieser Buttons sitemate-weit gelegt
   (sichtbar als nach oben verrutschte "Öffnen"-Knöpfe in Listen). */
#tf-mini{position:fixed;right:20px;bottom:78px;z-index:120;
	display:flex;flex-direction:column;align-items:flex-end;gap:12px}

.mini-start{width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;flex:none;
	background:var(--red);color:#fff;display:grid;place-items:center;position:relative;
	box-shadow:0 8px 22px -6px rgba(196,17,48,.6);transition:transform .18s var(--feder), background .18s ease}
.mini-start svg{display:block}
.mini-start-zahl{position:absolute;top:-2px;right:-2px;min-width:21px;height:21px;padding:0 5px;
	border-radius:var(--r-m);background:#25D366;color:#fff;font-size:var(--t-xs);font-weight:800;
	line-height:21px;text-align:center;border:2px solid #fff}
.mini-start-zahl[hidden]{display:none}

.mini-tafel{width:360px;max-width:calc(100vw - 32px);height:520px;max-height:calc(100vh - 190px);
	background:var(--card);border-radius:var(--r-l);overflow:hidden;display:flex;flex-direction:column;
	box-shadow:0 24px 60px -14px rgba(16,24,40,.5);border:1px solid var(--line)}
.mini-tafel[hidden]{display:none}
.mini-titel{flex:1;min-width:0}
.mini-titel b{display:block;font-size:var(--t-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-titel small{display:block;font-size:var(--t-xs);color:rgba(255,255,255,.6);line-height:1.3}
.mini-titel small.ist-an{color:#7EE2A8}

.mini-kopf{display:flex;align-items:center;gap:11px;padding:12px 14px;flex:none;
	background:var(--ink);color:#fff}
.mini-kopf .chat-bild{width:34px;height:34px}
.mini-knopf{background:none;border:0;color:rgba(255,255,255,.75);cursor:pointer;
	font-size:var(--t-xl);line-height:1;padding:3px 6px;border-radius:var(--r-s);flex:none;
	text-decoration:none;display:grid;place-items:center}
.mini-zurueck{font-size:var(--t-2xl)}

.mini-inhalt{flex:1;min-height:0;display:flex;flex-direction:column}
.mini-rollen{flex:1;overflow-y:auto}
.mini-leer{margin:auto;text-align:center;color:var(--muted);font-size:var(--t-m);padding:26px}
.mini-leer a{color:var(--red-text);font-weight:600;display:block;margin-top:8px}

/* Im kleinen Fenster wird alles eine Spur kompakter */
#tf-mini .chat-eintrag{padding:10px 13px}
#tf-mini .chat-bild{width:40px;height:40px}
#tf-mini .chat-fenster{flex:1;min-height:0}
#tf-mini .chat-verlauf{padding:14px 12px}
#tf-mini .blase{max-width:86%}
#tf-mini .blase p{font-size:var(--t-m)}
#tf-mini .blase.mit-bild{max-width:76%}
#tf-mini .chat-eingabe{padding:8px 10px;gap:5px}
#tf-mini .chat-eingabe textarea{padding:9px 13px;font-size:var(--t-m)}
#tf-mini .chat-werkzeug{width:36px;height:36px;font-size:var(--t-l)}
#tf-mini .chat-senden{width:38px;height:38px}
#tf-mini .emoji-w{bottom:58px;left:8px;width:calc(100% - 16px)}
#tf-mini .emoji-feld{max-height:170px}

@media(max-width:780px){
	#tf-mini{right:14px;bottom:14px}
	.mini-start{width:52px;height:52px}
	/* height:100% wäre hier die falsche Wahl: In einem position:fixed-Kasten
	   löst Safari/iOS Prozent-Höhen beim allerersten Rendern manchmal noch
	   nicht richtig auf (Adressleiste noch nicht eingerechnet) – der Kasten
	   bleibt dann leer weiß, bis man wegtippt und zurückkommt. 100dvh
	   rechnet direkt mit der tatsächlichen sichtbaren Höhe, 100vh dahinter
	   ist die Absicherung für sehr alte Safari-Versionen ohne dvh. */
	.mini-tafel{position:fixed;inset:0;width:100%;max-width:100%;
		height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;
		border-radius:0;border:0}
	/* Wenn das Fenster offen ist, stört der Startknopf nur */
	#tf-mini.offen .mini-start{display:none}
}

/* Auf der großen Chat-Seite braucht es das kleine Fenster nicht */
.tf-chatseite #tf-mini{display:none}


/* ---------- Einsatz-Board: Datum & leuchtende Status ---------- */
.board-head .date{color:#fff;font-weight:700;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:4px 11px;border-radius:var(--r-xl)}
.board .st{animation:stglow 2.2s ease-in-out infinite}
.board .st.run{--glow:60,214,120}
.board .st.up{--glow:243,183,78}
.board .st.perm{--glow:96,170,255}
@keyframes stglow{
	0%,100%{box-shadow:0 0 4px 0 rgba(var(--glow),.35)}
	50%{box-shadow:0 0 14px 2px rgba(var(--glow),.85)}
}
@media (prefers-reduced-motion: reduce){.board .st{animation:none}}

/* ---------- Hauptmenü: Unterpunkte ---------- */
.mainnav li.menu-item-has-children > a::after{content:" ▾";font-size:.72em;opacity:.7}
.mainnav .sub-menu{display:none}

/* ---------- Elementor-Seiten: volle Breite ---------- */
.content-elementor{width:100%}

/* ---------- Rollen-Tags: lange Funktionsnamen sauber darstellen ---------- */
.member .tag,.avatar-row .tag,.tx .tag,.mit-card .tag{white-space:normal;line-height:1.45;text-transform:none;letter-spacing:0;text-align:left}

/* ---------- Einsatz-Karte: Datums-Badge ---------- */
.einsatz .ort-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.einsatz .edat{font-size:var(--t-2xs);font-weight:700;color:rgba(255,255,255,.8);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:2px 8px;border-radius:var(--r-xl);flex:none;font-variant-numeric:tabular-nums}

/* ---------- Zugänge & Rechte im Portal ----------
   Eine Karte je Person statt einer breiten Tabelle. Eine Tabelle mit acht
   Rechte-Spalten ist am Schreibtisch noch lesbar, am Telefon nicht mehr –
   und laut Produktvorgabe zählen beide Situationen gleich viel. Die Karte
   funktioniert in beiden, ohne zweite Ansicht. */
.vw-liste{display:grid;gap:12px}
.vw-person{padding:15px 18px}
.vw-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.vw-wer b{display:block;font-size:var(--t-base);font-weight:600}
.vw-wer small{display:block;color:var(--muted);font-size:var(--t-s);margin-top:2px}
.vw-rolle{flex:none;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.vw-rolle label{color:var(--muted)}
.vw-rolle select{min-width:170px}

.vw-rechte{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.vw-recht{display:inline-flex;align-items:center;gap:7px;background:var(--paper);border:1px solid var(--line);
	border-radius:var(--r-xl);padding:6px 13px 6px 10px;font-size:var(--t-s);cursor:pointer;line-height:1.3;
	transition:border-color .15s ease,background .15s ease}
.vw-recht:hover{border-color:var(--marke-grau)}
.vw-recht input{flex:none;margin:0}
.vw-recht:has(input:checked){background:var(--red-soft);border-color:var(--red);font-weight:600}
.vw-recht.ist-fest{opacity:.55;cursor:default}
.vw-recht.ist-fest:hover{border-color:var(--line)}
.vw-recht em{font-style:normal;color:var(--muted);font-weight:400}

/* Klebt unten fest: bei zwanzig Personen je Seite ist der Speichern-Knopf
   sonst außer Sicht, und man klickt ihn nach dem Häkchensetzen nicht mehr. */
.vw-speichern{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;
	position:sticky;bottom:0;background:var(--paper);padding:12px 0;border-top:1px solid var(--line);z-index:2}
.vw-speichern small{color:var(--muted);font-size:var(--t-s)}

@media(max-width:620px){
	.vw-rolle{align-items:flex-start;width:100%}
	.vw-rolle select{width:100%}
}

/* ---------- Fahrgemeinschaften ----------
   Eine Karte je Termin, darin die angebotenen Fahrten. Bewusst schlicht:
   die Entscheidung ist „passt die Abfahrt, ist noch Platz" – dafür braucht
   es keine aufwendige Gestaltung, sondern gut lesbare Zeilen. */
.fahrt-liste{display:grid;gap:16px}
.fahrt-karte{padding:0;overflow:hidden}
.fahrt-kopf{padding:15px 18px;border-bottom:1px solid var(--line);background:var(--paper)}
.fahrt-kopf b{display:block;font-size:var(--t-base)}
.fahrt-kopf small{display:block;color:var(--muted);font-size:var(--t-s);margin-top:3px}
.fahrt-leer{margin:0;padding:16px 18px;color:var(--muted);font-size:var(--t-m)}

.fahrt-zeile{display:flex;align-items:flex-start;gap:13px;padding:14px 18px;border-bottom:1px solid var(--line)}
.fahrt-zeile.bin-dabei{background:var(--green-soft)}
.fahrt-ic{flex:none;font-size:var(--t-xl);line-height:1.4}
.fahrt-info{flex:1;min-width:0}
.fahrt-info b{display:block;font-size:var(--t-base);font-weight:600}
.fahrt-info small{display:block;color:var(--muted);font-size:var(--t-s);margin-top:2px;line-height:1.45}
.fahrt-hinweis{font-style:italic}
.fahrt-wer{color:var(--text) !important}
.fahrt-akt{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.fahrt-akt form{margin:0}

.fahrt-neu{border-top:1px solid var(--line)}
.fahrt-neu > summary{padding:13px 18px;cursor:pointer;font-weight:600;font-size:var(--t-m);list-style:none}
.fahrt-neu > summary::-webkit-details-marker{display:none}
.fahrt-neu > summary::before{content:"+ ";color:var(--red);font-weight:800}
.fahrt-neu[open] > summary::before{content:"– "}
.fahrt-neu .f-grid{padding:0 18px 18px}

@media(max-width:620px){
	.fahrt-zeile{flex-wrap:wrap}
	.fahrt-akt{flex-direction:row;align-items:center;width:100%;justify-content:flex-start;flex-wrap:wrap}
}

/* ---------- „Passt zu deiner Funktion": Stern in Markenrot ----------
   Bewusst nur ein Zeichen, kein Farb-Tag: an denselben Karten hängen schon
   die Kategorie- und Veranstaltungsort-Farben, ein weiteres farbiges Etikett
   würde mit ihnen um Aufmerksamkeit konkurrieren. Der Stern trägt keine
   Information allein – daneben steht immer der Text, und für Screenreader
   liegt die Erklärung als .sr-only im Element. */
.fn-stern{display:inline-flex;align-items:center;color:var(--red);margin-right:5px;vertical-align:-1px;flex:none}
.einsatz .fn-stern{color:#FF6B7D}   /* Board-Karten stehen auf dunklem Grund */
.kpip .fn-stern{color:currentColor;margin-right:3px}
.kpip .fn-stern svg{width:10px;height:10px}

/* ---------- Bereichsseiten: aufklappbares Gruppen-Team ---------- */
.personen-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
@media(max-width:760px){.personen-grid{grid-template-columns:1fr}}
.person-mini{display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);padding:10px 12px}
.pm-foto{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.pm-init{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--ink),var(--ink3));flex:none;font-size:var(--t-base)}
.pm-tx b{font-size:var(--t-m);display:block}
.pm-tx small{display:block;color:var(--muted);font-size:var(--t-s);margin-top:2px}
.pm-tx small a{color:var(--red-text);text-decoration:none;font-weight:600}

/* ---------- Mitarbeiter-Seite ---------- */
.mit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:10px}
@media(max-width:1000px){.mit-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.mit-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.mit-grid{grid-template-columns:1fr}}
.mit-card{padding:22px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px}
.mit-card .mf{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid var(--line)}
.mit-card .mi{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:var(--t-3xl);color:#fff;background:linear-gradient(135deg,var(--ink),var(--ink3))}
.mit-card b{font-size:var(--t-base)}
.mit-card .geb{font-size:var(--t-s);color:var(--muted)}
.mit-card.is-supervisor{border-color:#E3A008;box-shadow:0 0 0 1px rgba(227,160,8,.35)}
.tf-supervisor-stern{color:#E3A008}
.tf-supervisor-tag{display:inline-block;font-size:var(--t-xs);font-weight:700;letter-spacing:0;color:#8A6100;background:#FCF0CF;border:1px solid rgba(227,160,8,.4);border-radius:var(--r-xl);padding:2px 9px}
@media (prefers-color-scheme: dark){
	:root:not([data-theme="light"]) .tf-supervisor-tag{color:#F5D580;background:rgba(227,160,8,.16);border-color:rgba(227,160,8,.45)}
}
:root[data-theme="dark"] .tf-supervisor-tag{color:#F5D580;background:rgba(227,160,8,.16);border-color:rgba(227,160,8,.45)}

/* ---------- Checkboxen in Portal-Formularen ---------- */
.f-grid .check{display:flex;gap:9px;align-items:flex-start;font-size:var(--t-m);font-weight:500;line-height:1.5;cursor:pointer}
.f-grid .check input{margin-top:3px;flex:none}

/* ---------- Instagram-Feed auf der Startseite (schmale Spalte) ---------- */
.insta-card{margin-top:14px;padding:8px}
.insta-card .ig-grid{grid-template-columns:repeat(4,1fr);gap:5px}

/* ---------- Fix: Checkboxen nicht wie Textfelder auf volle Breite strecken ---------- */
.f-grid .check{grid-column:1/-1}
.f-field input[type=checkbox],.f-grid .check input[type=checkbox]{width:auto;padding:0;flex:none;margin-top:3px}

/* ---------- Team-Boxen: lange E-Mail-Adressen sauber umbrechen ---------- */
.pm-tx{min-width:0}
.pm-tx small{overflow-wrap:anywhere}

/* ---------- Mitarbeiter-Karten: Kontakt-Pillen ---------- */
.mit-card .m-kontakt{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.mit-card .m-kontakt a{font-size:var(--t-s);font-weight:600;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);padding:6px 11px;text-decoration:none;color:var(--text)}

/* ---------- Kudos: "Danke sagen"-Knopf & Danke-Wand ---------- */
/* Aktionen unter einer Mitarbeiterkarte: „Danke sagen“ und – neu – die
   Freundschaftsanfrage. Beide sind gleichrangig und sehen deshalb gleich
   aus. Steht statt eines Knopfes ein Zustand da („Verbunden“, „Anfrage
   läuft“), ist das bewusst kein Knopf: Es gibt dort nichts zu drücken. */
.m-aktionen{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:2px}
.m-anfrage-form{margin:0;display:flex}
.m-verbunden{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-s);font-weight:600;
	color:var(--green-text);background:var(--green-soft);border-radius:var(--r-xl);padding:6px 12px}
.m-verbunden::before{content:"✓";font-weight:700}
.m-wartet{color:var(--amber-text);background:var(--amber-soft)}
.m-wartet::before{content:"⏳"}

/* Ein Kästchen, das über die ganze Kartenbreite läuft. Innerhalb von
   .pf-karte macht das die Regel weiter oben schon; die hier greift überall
   sonst, damit die Klasse nicht nur an einer Stelle etwas bedeutet. */
.f-check-voll{width:100%;border-radius:var(--r-m);padding:12px 14px;align-items:flex-start}

.m-danke{margin-top:2px;font-size:var(--t-s);font-weight:600;background:var(--paper);
	border:1px solid var(--line);border-radius:var(--r-xl);padding:6px 12px;cursor:pointer;color:var(--text)}
/* Die Danke-Wand.
   Vorher: eine einzige Karte über die volle Breite, in der jeder Eintrag
   eine Zeile war. Bei einem kurzen Satz wie „Danke fürs Einspringen“ stand
   damit ein Meter Leerraum daneben. Und die Gewichtung war verkehrt herum –
   der Textbaustein fett, die eigentliche Nachricht grau.

   Jetzt ist jedes Dankeschön eine eigene kleine Karte in einem Raster, das
   sich nach der Breite richtet. Die Nachricht steht oben und groß, darunter
   eine Fußzeile mit Bild, Namen und Datum. Kurze Sätze bekommen kleine
   Karten, lange bekommen große. */
.danke-gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.danke{display:flex;flex-direction:column;gap:14px;
	background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
	box-shadow:var(--schatten-1);padding:18px 20px 15px;
	transition:transform .22s var(--weich),box-shadow .22s ease,border-color .22s ease}
/* Die Nachricht ist der Inhalt, also steht sie in voller Textfarbe. */
.danke-text{margin:0;font-size:var(--t-l);line-height:1.45;font-weight:500;color:var(--text);
	overflow-wrap:anywhere;hyphens:auto}
.danke-fuss{display:flex;align-items:center;gap:10px;margin-top:auto;
	padding-top:13px;border-top:1px solid var(--line)}
.danke-av{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;display:block}
.danke-av-init{display:grid;place-items:center;font-size:var(--t-xs);font-weight:700;color:#fff;
	background:linear-gradient(135deg,var(--ink),var(--ink3))}
/* Nichts in der Fußzeile wird abgeschnitten. Ein Name, der als „TES…“
   endet, ist keine Angabe mehr – und bei wem sich jemand bedankt hat, ist
   die halbe Nachricht. Deshalb umbricht hier alles, statt zu kürzen: Das
   Datum steht oben neben dem Absender, die Empfängerin bekommt eine eigene
   Zeile über die volle Breite. */
.danke-wer{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.35}
.danke-oben{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.danke-oben b{font-size:var(--t-s);font-weight:700}
.danke-wer small{font-size:var(--t-xs);color:var(--muted);overflow-wrap:anywhere}
.danke-wer small b{font-weight:700;color:var(--text)}
.danke-zeit{font-size:var(--t-xs);color:var(--muted);white-space:nowrap}

/* ---------- Direkter Draht: mehrere Kontakt-Zeilen ---------- */
.shift-card .draht-row{margin-top:14px}
.shift-card .draht-row + .draht-row{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.shift-card .draht-row b{display:block;font-size:var(--t-xs);font-weight:800;letter-spacing:var(--ls-weit);text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:7px}

/* ---------- Installations-Hinweis fürs Handy (PWA) ---------- */
.pwa-banner{position:fixed;left:12px;right:12px;bottom:12px;z-index:300;
	display:flex;align-items:center;gap:12px;
	padding:14px 14px calc(14px + env(safe-area-inset-bottom)) 16px;
	background:var(--ink);color:#fff;border-radius:var(--r-l);
	box-shadow:0 16px 40px -12px rgba(0,0,0,.5);
	transform:translateY(140%);opacity:0;
	transition:transform .35s cubic-bezier(.22,.75,.28,1),opacity .3s ease}
.pwa-banner.ist-da{transform:translateY(0);opacity:1}
.pwa-banner-ic{font-size:var(--t-2xl);flex:none}
.pwa-banner-tx{flex:1;min-width:0}
.pwa-banner-tx b{display:block;font-size:var(--t-m)}
.pwa-banner-tx small{display:block;color:rgba(255,255,255,.7);font-size:var(--t-s);line-height:1.4;margin-top:2px}
.pwa-banner-btn{flex:none;background:var(--red);color:#fff;border:0;border-radius:var(--r-m);
	padding:9px 14px;font-weight:700;font-size:var(--t-m);white-space:nowrap}
.pwa-banner-btn:hover{background:var(--red-d)}
.pwa-banner-zu{position:absolute;top:-9px;right:-9px;width:26px;height:26px;border-radius:50%;
	background:var(--card);color:var(--text);border:1px solid var(--line);display:grid;place-items:center;
	font-size:var(--t-base);line-height:1;cursor:pointer;padding:0;box-shadow:var(--shadow)}
@media(min-width:821px){.pwa-banner{display:none !important}}
@media(prefers-reduced-motion:reduce){.pwa-banner{transition:opacity .2s ease;transform:none}}

/* ---------- Social-Live & Einbettungen ---------- */
.sm-feed{padding:16px;margin-top:14px;overflow:hidden}
.content-prose iframe{max-width:100%;border-radius:var(--r-m)}

/* ---------- Instagram-Kachelraster (eigene Social-Media-Seite & Startseite) ---------- */
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ig-grid a{position:relative;display:block;aspect-ratio:1;border-radius:var(--r-m);overflow:hidden;background:var(--paper)}
.ig-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.ig-grid a:hover img{transform:scale(1.06)}
.ig-grid a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.4),transparent 55%);opacity:0;transition:opacity .2s ease}
.ig-grid a:hover::after{opacity:1}
.ig-typ{position:absolute;top:8px;right:8px;color:#fff;font-size:var(--t-m);text-shadow:0 1px 3px rgba(0,0,0,.6);opacity:0;transition:opacity .2s ease}
.ig-grid a:hover .ig-typ{opacity:1}

/* ---------- Facebook-Beitragsliste (eigene Social-Media-Seite) ---------- */
.fb-liste{display:flex;flex-direction:column;gap:14px}
.fb-post{display:block;text-decoration:none;color:inherit;padding:16px;border:1px solid var(--line);
	border-radius:var(--radius);background:var(--card);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.fb-post:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--red-text)}
.fb-post time{font-size:var(--t-xs);font-weight:700;letter-spacing:var(--ls-weit);text-transform:uppercase;color:var(--muted)}
.fb-post p{margin:8px 0 0;font-size:var(--t-m);line-height:1.55;color:var(--text)}
.fb-post img{width:100%;max-height:280px;object-fit:cover;border-radius:var(--r-m);margin-top:10px;display:block}

/* ---------- Seitenkopf: Foto-Ansprechpartner ---------- */
.contact-strip img.pa{object-fit:cover;padding:0}

/* ---------- Formulare: mehr Luft zwischen Kopf und Suche ---------- */
.lib-tools{margin:30px 0 18px;row-gap:12px}

/* ---------- Rundmail-Portalseite ---------- */
.rm-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;margin-top:8px}
@media(max-width:960px){.rm-grid{grid-template-columns:1fr}}
.rm-vorschau{width:100%;height:620px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper)}

/* ---------- Online-Formulare: Anträge & Meldungen ---------- */
.f-formular{margin-top:6px}
.f-formular .f-block{padding:22px}
.f-titel{font-size:var(--t-l);font-weight:700;letter-spacing:var(--ls-eng);margin-bottom:4px;padding-bottom:12px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.f-titel::before{content:"";width:16px;height:4px;background:var(--red);border-radius:2px;flex:none}
.f-formular .f-grid{margin-top:16px}
.f-hinweis{grid-column:1/-1;font-size:var(--t-m);color:var(--muted);background:var(--paper);border-left:3px solid var(--line);border-radius:0 var(--r-m) var(--r-m) 0;padding:10px 14px;margin-top:14px}
.f-field .f-klein,.f-klein{font-size:var(--t-s);color:var(--muted);line-height:1.5}
.f-fehler{padding:14px 18px;margin-bottom:16px;border-left:4px solid var(--red);color:var(--red-text);font-weight:600}
.f-field input[readonly]{background:var(--paper);color:var(--muted)}

/* Wochentage nebeneinander */
.f-tage{grid-column:1/-1;display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
@media(max-width:860px){.f-tage{grid-template-columns:repeat(4,1fr)}}
@media(max-width:520px){.f-tage{grid-template-columns:repeat(2,1fr)}}
.f-tage .f-field{grid-column:auto}
.f-tage .f-field label{font-size:var(--t-xs);color:var(--muted);font-weight:600}
.f-tage .f-field input{padding:9px 8px;text-align:center}

/* Ein-/Ausschalter für ganze Bereiche (Stammdaten-Meldung) */
.f-schalter{grid-column:1/-1}
.f-schalter-label{width:100%;background:var(--red-soft);border-color:#F5AEB6;border-radius:var(--r-m);padding:11px 14px;font-weight:700}
.f-bedingt[style*="none"]{display:none !important}

/* Unterschriftenfeld */
.sig-wrap{border:1px dashed #C9CED6;border-radius:var(--r-m);background:#fff;padding:10px}
.sig-pad{width:100%;height:180px;touch-action:none;cursor:crosshair;border-bottom:1px solid var(--line);display:block;background:repeating-linear-gradient(180deg,#fff 0 178px,#F3F4F6 178px 180px)}
.sig-tools{display:flex;align-items:center;gap:12px;margin-top:9px;flex-wrap:wrap}

/* Datenansicht (Freigabe, Personalabteilung, Adminbereich) */
.tf-ansicht{margin-top:6px}
.tf-abschnitt{font-size:var(--t-base);font-weight:700;margin:22px 0 8px;border-left:3px solid var(--red);padding-left:10px}
.tf-daten{width:100%;border-collapse:collapse;font-size:var(--t-m)}
.tf-daten td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tf-daten .tf-l{color:var(--muted);width:44%}
.tf-daten .tf-w{font-weight:600;overflow-wrap:anywhere}
.tf-daten a{color:var(--red-text);font-weight:700}
@media(max-width:560px){.tf-daten .tf-l{width:50%}}

/* ---------- Bestätigung nach dem Absenden ---------- */
.tf-bestaetigung{padding:30px 28px;text-align:left;max-width:720px;margin-top:8px;border-top:4px solid var(--green)}
.tf-bestaetigung .tf-haken{width:56px;height:56px;border-radius:50%;background:var(--green-soft);color:var(--green-text);display:grid;place-items:center;font-size:var(--t-3xl);font-weight:800;margin-bottom:16px}
.tf-bestaetigung h2{font-size:var(--t-2xl);font-weight:750;letter-spacing:var(--ls-eng);margin-bottom:8px}
.tf-bestaetigung > p{color:var(--muted);margin-bottom:18px;max-width:60ch}
.tf-bestaetigung .tf-daten{margin-bottom:22px}
.tf-bestaetigung-aktionen{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* ---------- Anträge: Filterleiste & Aktionen ---------- */
.lib-tools a.chip{text-decoration:none}
.lib-tools a.chip.active{background:var(--flaeche-stark);border-color:var(--flaeche-stark);color:var(--auf-stark)}
.doc .row-forms .btn.mini{white-space:nowrap}

/* ---------- Absende-Rückmeldung ---------- */
.tf-senden{position:fixed;inset:0;z-index:900;background:rgba(20,23,28,.55);backdrop-filter:blur(3px);display:grid;place-items:center;padding:20px}
.tf-senden-box{background:var(--card);border-radius:var(--r-l);box-shadow:var(--shadow-lg);padding:28px 34px;text-align:center;max-width:360px;display:flex;flex-direction:column;align-items:center;gap:10px}
.tf-senden-box b{font-size:var(--t-l)}
.tf-senden-box small{color:var(--muted);font-size:var(--t-s);line-height:1.5}
.tf-spinner{width:38px;height:38px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--red-text);animation:tfdreh .8s linear infinite}
@keyframes tfdreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.tf-spinner{animation-duration:2.4s}}
button[data-alt][disabled]{opacity:.75;cursor:progress}

/* ---------- Vorschau-Fenster (Anhänge, Unterschrift, PDF) ---------- */
.tf-vorschau{position:fixed;inset:0;z-index:950;background:rgba(20,23,28,.62);backdrop-filter:blur(3px);display:grid;place-items:center;padding:20px}
.tf-vorschau-box{background:var(--card);border-radius:var(--r-l);box-shadow:var(--shadow-lg);width:min(940px,100%);max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.tf-vorschau-kopf{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--paper)}
.tf-vorschau-kopf b{font-size:var(--t-base);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-vorschau-aktionen{margin-left:auto;display:flex;gap:8px;align-items:center;flex:none}
.tf-vorschau-zu{width:34px;height:34px;border:1px solid var(--line);background:var(--card);border-radius:var(--r-m);font-size:var(--t-base);line-height:1;color:var(--muted)}
.tf-vorschau-inhalt{overflow:auto;background:var(--paper);display:grid;place-items:center;padding:16px}
.tf-vorschau-inhalt.ist-bild img{max-width:100%;max-height:74vh;background:#fff;border-radius:var(--r-m);box-shadow:var(--shadow)}
.tf-vorschau-inhalt.ist-pdf{padding:0}
.tf-vorschau-inhalt.ist-pdf iframe{width:100%;height:78vh;border:0;display:block}

/* ---------- Unterschrift & Anhänge in der Datenansicht ---------- */
.tf-sig-bild{max-width:230px;max-height:80px;background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:6px;cursor:zoom-in;display:block}
a.tf-datei{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);padding:6px 13px 6px 6px;font-size:var(--t-m);font-weight:600;text-decoration:none;margin:0 6px 6px 0;color:var(--text)}
.tf-datei-ic{background:var(--red-soft);color:var(--red-text);border-radius:var(--r-xl);padding:3px 9px;font-size:var(--t-2xs);font-weight:800;letter-spacing:var(--ls-weit)}
.tf-vorschau-inhalt.ist-pdf object{width:100%;height:78vh;border:0;display:block}
.tf-vorschau-ersatz{display:flex;flex-direction:column;align-items:center;gap:14px;padding:48px 20px;text-align:center;color:var(--muted)}
@media(max-width:700px){.tf-vorschau-inhalt.ist-pdf object,.tf-vorschau-inhalt.ist-pdf iframe{height:62vh}.tf-vorschau-aktionen .btn{padding:8px 11px;font-size:var(--t-s)}}

/* ---------- Mein Profil: Verlauf der eigenen Formulare ---------- */
.verlauf{padding:4px 18px}
.verlauf-zeile{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line)}
.verlauf-zeile:last-child{border-bottom:0}
.verlauf-ic{width:34px;height:34px;border-radius:var(--r-m);display:grid;place-items:center;font-weight:800;flex:none;font-size:var(--t-base);background:var(--paper);color:var(--muted)}
.verlauf-ic.green{background:var(--green-soft);color:var(--green-text)}
.verlauf-ic.red{background:var(--red-soft);color:var(--red-text)}
.verlauf-ic.amber{background:var(--amber-soft);color:var(--amber-text)}
.verlauf-ic.blue{background:var(--blue-soft);color:var(--blue-text)}
.verlauf-tx{min-width:0;flex:1}
.verlauf-tx b{display:block;font-size:var(--t-base);line-height:1.35}
.verlauf-tx small{display:block;color:var(--muted);font-size:var(--t-s);margin-top:3px;overflow-wrap:anywhere}
.verlauf-akt{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:none;justify-content:flex-end}
@media(max-width:720px){.verlauf-zeile{flex-wrap:wrap}.verlauf-akt{margin-left:48px;width:100%;justify-content:flex-start}}
.statuslegende{padding:16px 18px;margin-top:14px;display:flex;flex-direction:column;gap:8px;font-size:var(--t-m);color:var(--muted)}
.statuslegende b{color:var(--text);font-size:var(--t-m);margin-bottom:2px}
.statuslegende span{display:flex;gap:9px;align-items:center;flex-wrap:wrap}

/* ============ Benachrichtigungen ============ */
.tf-glocke{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r-m);color:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.16);text-decoration:none;transition:color .15s ease,border-color .15s ease,background .15s ease}
.tf-glocke.hat-neue{color:#fff}
.tf-glocke-zahl{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:var(--r-m);background:var(--red);color:#fff;font-size:var(--t-2xs);font-weight:800;line-height:17px;text-align:center;border:2px solid var(--ink)}
.nachrichten{display:flex;flex-direction:column;gap:10px}
.n-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.n-kopf h2{font-size:var(--t-2xl);font-weight:800;letter-spacing:var(--ls-titel);margin:0 0 2px}
.n-kopf p{font-size:var(--t-m);color:var(--muted);margin:0}
.n-kopf-aktionen{display:flex;gap:8px;align-items:center}
.n-kopf-aktionen form{margin:0}
.nachricht{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:16px 18px;transition:border-color .15s ease}
.nachricht.neu{border-color:var(--red-text);background:var(--red-soft)}
.nachricht .n-ic{flex:none;width:36px;height:36px;border-radius:var(--r-m);display:flex;align-items:center;justify-content:center;font-size:var(--t-m);font-weight:800}
.nachricht .n-ic.gruen{background:var(--green-soft);color:var(--green-text)}
.nachricht .n-ic.rot{background:var(--red-soft);color:var(--red-text)}
.nachricht .n-ic.blau{background:var(--blue-soft);color:var(--blue-text)}
.nachricht .n-ic.gelb{background:var(--amber-soft);color:var(--amber-text)}
.nachricht .n-ic.grau{background:var(--paper);color:var(--muted)}
.nachricht .n-tx{flex:1;min-width:0}
.n-oben{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.n-oben b{font-size:var(--t-base);font-weight:700;color:var(--text);line-height:1.35}
.n-punkt{flex:none;width:7px;height:7px;border-radius:50%;background:var(--red)}
.nachricht .n-tx p{font-size:var(--t-m);color:var(--muted);line-height:1.5;margin:0 0 8px}
.n-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:var(--t-xs);color:var(--muted)}
.n-marke{padding:2px 9px;border-radius:var(--r-xl);font-size:var(--t-2xs);font-weight:700;letter-spacing:0}
.n-marke.gruen{background:var(--green-soft);color:var(--green-text)}
.n-marke.rot{background:var(--red-soft);color:var(--red-text)}
.n-marke.blau{background:var(--blue-soft);color:var(--blue-text)}
.n-marke.gelb{background:var(--amber-soft);color:var(--amber-text)}
.n-marke.grau{background:var(--paper);color:var(--muted)}
.nachricht .n-akt{flex:none;display:flex;gap:6px;align-items:center}
.nachricht .n-akt form{margin:0}
.n-weg{width:30px;height:30px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:var(--t-base);line-height:1;cursor:pointer;font-family:inherit;transition:color .15s ease,border-color .15s ease,background .15s ease}
.btn.still{background:var(--card);color:var(--text);border:1px solid var(--line)}
.n-fuss{font-size:var(--t-s);color:var(--muted);margin-top:14px}
@media(max-width:680px){
	.nachricht{flex-wrap:wrap}
	.nachricht .n-akt{width:100%;padding-left:50px;justify-content:flex-start}
}

/* ============ Beitrags-Editor ============ */
.tf-editor{border:1.5px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:var(--card)}
.tf-werkzeuge{display:flex;flex-wrap:wrap;align-items:center;gap:3px;padding:8px;background:var(--paper);border-bottom:1px solid var(--line)}
.tf-werkzeuge button{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;
	background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:0 8px;
	font-size:var(--t-s);font-weight:700;color:var(--text);cursor:pointer;font-family:inherit;line-height:1}
.tf-werkzeuge button svg{display:block;flex:none}
.tf-werkzeuge button.aktiv{background:var(--flaeche-stark);border-color:var(--flaeche-stark);color:var(--auf-stark)}
.tf-werkzeuge button:disabled{opacity:.5;cursor:not-allowed}
.tf-werkzeuge button.laedt svg{animation:tfdreh .8s linear infinite}
.tf-trenn{width:1px;align-self:stretch;background:var(--line);margin:2px 3px;flex:none}
.tf-fuss{display:flex;justify-content:flex-end;padding:6px 14px;background:var(--paper);border-top:1px solid var(--line)}
.tf-anzahl{font-size:var(--t-xs);color:var(--muted)}
.tf-flaeche{min-height:190px;padding:16px 18px;font-size:var(--t-base);line-height:1.65;outline:none;color:var(--text)}
.tf-flaeche:focus{box-shadow:inset 0 0 0 2px rgba(196,17,48,.12)}
.tf-flaeche.ist-leer::before{content:attr(data-platzhalter);color:var(--muted);pointer-events:none;display:block}
.tf-flaeche h2,.content-prose h2{font-size:var(--t-xl);margin:26px 0 10px}
.tf-flaeche h3,.content-prose h3{font-size:var(--t-l);margin:22px 0 8px}
.tf-flaeche ul,.tf-flaeche ol{margin:8px 0 8px 22px}
.tf-flaeche a{color:var(--red-text);font-weight:600}
.tf-flaeche blockquote,.content-prose blockquote{border-left:3px solid var(--red);padding:6px 14px;background:var(--red-soft);border-radius:0 var(--r-m) var(--r-m) 0;margin:10px 0}
.tf-flaeche img,.content-prose img{max-width:100%;border-radius:var(--r-m);margin:10px 0;display:block}
.tf-flaeche hr,.content-prose hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.tf-optionen{display:flex;flex-direction:column;gap:8px}
.tf-optionen input{width:100%}

/* ============ Umfrage im Beitrag ============ */
.umfrage{margin-top:18px;padding:22px 24px}
.u-kopf{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.u-marke{font-size:var(--t-2xs);font-weight:800;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--red-text)}
.u-frage{font-size:var(--t-l);font-weight:700;margin:0 0 16px;color:var(--text)}
.u-ergebnis{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.u-zeile.meine .u-label span{font-weight:700;color:var(--text)}
.u-label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:var(--t-m);margin-bottom:5px;color:var(--text)}
.u-label b{font-size:var(--t-m);white-space:nowrap}
.u-label small{color:var(--muted);font-weight:500}
.u-balken{height:9px;border-radius:var(--r-s);background:var(--paper);overflow:hidden}
.u-balken span{display:block;height:100%;border-radius:var(--r-s);background:var(--text)}
.u-zeile.meine .u-balken span{background:var(--red)}
.u-fuss{font-size:var(--t-s);color:var(--muted);margin:0 0 14px}
.u-form{border-top:1px solid var(--line);padding-top:16px;margin-top:4px}
.u-optionen{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.anhaenge{margin-top:18px;padding:20px 24px}
.a-titel{font-size:var(--t-base);font-weight:700;margin:0 0 12px;color:var(--text)}

/* ============ Reiter unter „Mein Profil“ ============ */
.profil-reiter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.profil-reiter a{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--r-xl);background:var(--card);border:1px solid var(--line);color:var(--text);font-size:var(--t-m);font-weight:600;text-decoration:none;transition:color .15s ease,border-color .15s ease}
.profil-reiter a.aktiv{background:var(--flaeche-stark);border-color:var(--flaeche-stark);color:var(--auf-stark)}
.profil-reiter .reiter-zahl{min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-m);background:var(--red);color:#fff;font-size:var(--t-xs);font-weight:800;line-height:20px;text-align:center}
.profil-reiter a.aktiv .reiter-zahl{background:var(--red)}
@media(max-width:640px){.profil-reiter{gap:6px}.profil-reiter a{padding:9px 14px;font-size:var(--t-m)}}

/* ============ Updates & Änderungen ============ */
.tf-oeffentlich .subhero{margin-top:0}
.up-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.up-filter a{padding:8px 16px;border-radius:var(--r-xl);background:var(--card);border:1px solid var(--line);color:var(--text);font-size:var(--t-m);font-weight:600;text-decoration:none;transition:color .15s ease,border-color .15s ease}
.up-filter a.aktiv{background:var(--flaeche-stark);border-color:var(--flaeche-stark);color:var(--auf-stark)}
.up-liste{list-style:none;margin:0;padding:0;position:relative}
.up-liste::before{content:"";position:absolute;left:117px;top:8px;bottom:8px;width:2px;background:var(--line)}
.up-eintrag{display:flex;gap:26px;align-items:flex-start;padding:0 0 30px;position:relative}
.up-eintrag:last-child{padding-bottom:0}
.up-links{flex:none;width:104px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding-top:2px}
.up-links time{font-size:var(--t-s);color:var(--muted);font-variant-numeric:tabular-nums}
.up-version{font-size:var(--t-xs);font-weight:700;color:var(--muted);background:var(--paper);border-radius:var(--r-s);padding:2px 7px}
.up-marke{padding:3px 10px;border-radius:var(--r-xl);font-size:var(--t-xs);font-weight:800;letter-spacing:0}
.up-marke.gruen{background:var(--green-soft);color:var(--green-text)}
.up-marke.rot{background:var(--red-soft);color:var(--red-text)}
.up-marke.blau{background:var(--blue-soft);color:var(--blue-text)}
.up-marke.gelb{background:var(--amber-soft);color:var(--amber-text)}
.up-marke.grau{background:var(--paper);color:var(--muted)}
.up-rechts{flex:1;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:18px 22px;position:relative}
.up-rechts::before{content:"";position:absolute;left:-31px;top:20px;width:11px;height:11px;border-radius:50%;background:var(--card);border:2px solid var(--red-text)}
.up-rechts h3{font-size:var(--t-l);font-weight:700;color:var(--text);margin:0 0 6px;line-height:1.35}
.up-text{font-size:var(--t-m);color:var(--text);line-height:1.6}
.up-text p{margin:0 0 8px}
.up-text p:last-child{margin-bottom:0}
.up-text ul,.up-text ol{margin:8px 0 8px 20px}
.up-text a{color:var(--red-text);font-weight:600}
.up-weg{margin-top:12px}
@media(max-width:680px){
	.up-liste::before{display:none}
	.up-eintrag{flex-direction:column;gap:10px}
	.up-links{flex-direction:row;align-items:center;width:auto}
	.up-rechts::before{display:none}
}

/* ============ Hilfe & Anleitungen ============ */
.hilfe-suche{display:flex;align-items:center;gap:10px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-l);padding:8px 8px 8px 16px;margin:0 0 18px;max-width:720px}
.hilfe-suche svg{flex:none;color:var(--muted)}
.hilfe-suche input{flex:1;border:0;outline:none;font-size:var(--t-base);font-family:inherit;padding:8px 0;background:transparent;color:var(--text)}
.hilfe-suche .btn{flex:none;padding:10px 20px;font-size:var(--t-m)}
.hilfe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.hilfe-karte{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;text-decoration:none;color:inherit;position:relative;transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.hilfe-karte .h-bild{display:block;height:132px;background-size:cover;background-position:center;background-color:var(--paper)}
.hilfe-karte .h-text{display:flex;flex-direction:column;gap:6px;padding:18px 20px 44px}
.hilfe-karte .h-bereich{font-size:var(--t-2xs);font-weight:800;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--red-text)}
.hilfe-karte .h-text b{font-size:var(--t-base);font-weight:700;color:var(--text);line-height:1.35}
.hilfe-karte .h-text small{font-size:var(--t-m);color:var(--muted);line-height:1.5}
.hilfe-karte .h-pfeil{position:absolute;left:20px;bottom:16px;font-size:var(--t-base);color:var(--text);font-weight:700;opacity:.35;transition:opacity .16s ease}
.hilfe-titelbild{width:100%;max-height:340px;object-fit:cover;border-radius:var(--r-l);margin-bottom:18px;display:block}
.hilfe-inhalt h2{font-size:var(--t-xl);margin:26px 0 10px}
.hilfe-inhalt h3{font-size:var(--t-l);margin:20px 0 8px}
.hilfe-inhalt img{border-radius:var(--r-m);border:1px solid var(--line);max-width:100%;height:auto}
.hilfe-inhalt ol,.hilfe-inhalt ul{margin:10px 0 14px 22px}
.hilfe-inhalt li{margin-bottom:6px}
.hilfe-fuss{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:var(--t-s);color:var(--muted)}
.hilfe-hinweis{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px;padding:16px 20px;background:var(--paper)}
.hilfe-hinweis b{font-size:var(--t-m)}
.hilfe-hinweis span{flex:1;min-width:240px;font-size:var(--t-m);color:var(--muted)}

/* ============ Wortmarke ============
   „teamflex“ wird nie in Versalien gesetzt – auch nicht dort, wo die
   Umgebung Großbuchstaben vorsieht. */
.marke{text-transform:none!important;letter-spacing:var(--ls-titel);font-weight:800;font-size:var(--t-base);color:#fff}
.marke i{color:#C41130;font-style:italic;font-weight:800}
.marke-zusatz{font-weight:700}
.marke-zusatz.gross{text-transform:uppercase;letter-spacing:var(--ls-label);font-size:var(--t-s)}
.foot-bottom .marke{font-size:var(--t-m);color:inherit}
.foot-bottom .marke i{color:#C41130}
.foot-bottom .marke-zusatz{font-weight:400;font-size:var(--t-s);letter-spacing:0;text-transform:none}
.site-footer h4 .marke{font-size:var(--t-base)}
.eyebrow .marke{font-size:var(--t-m);color:var(--stark);letter-spacing:var(--ls-titel)}
.eyebrow .marke i{color:#C41130}
.eyebrow .marke-zusatz.gross{font-size:var(--t-xs);letter-spacing:var(--ls-label);color:var(--muted);font-weight:700}

/* ============================================================
   FUNKTIONEN – mehrere Funktionen als einzelne Marken
   Statt einem langen Fließtext bekommt jede Funktion ihre
   eigene Marke. Das bleibt auch bei fünf Einträgen lesbar,
   weil sie umbrechen statt sich zu quetschen.
   ============================================================ */
.funktionen{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-start;margin:5px 0 3px}
.funktionen .funktion{
	display:inline-block;background:var(--paper);color:var(--text);
	font-size:var(--t-xs);font-weight:600;line-height:1.35;letter-spacing:0;
	padding:3px 9px;border-radius:var(--r-s);border:1px solid var(--line);
	overflow-wrap:anywhere;text-align:left;
	/* Bei langen Funktionsbezeichnungen (z. B. "Bereichsleiter Messe-,
	   Kongress- und Veranstaltungen") zieht sich der Hintergrund sonst
	   bis zur vollen Kartenbreite und lässt die zweite Zeile unschön
	   halbleer wirken – auf breiteren Karten (z. B. "Unser Team", 3
	   Spalten) reichte text-wrap:balance allein nicht, weil einfach mehr
	   Platz zum Ausdehnen da war. Eine feste Höchstbreite (statt nur
	   100%) sorgt jetzt unabhängig von der Kartenbreite für einen
	   kompakten, gleichmäßigen Umbruch. */
	max-width:min(230px,100%);width:fit-content;text-wrap:balance;
}
/* Die erste Angabe ist die Hauptfunktion – sie bekommt die Hausfarbe,
   sofern für sie keine eigene Farbe hinterlegt ist (siehe unten). */
.funktionen .funktion.haupt{
	background:var(--red-soft);color:var(--red-text);border-color:rgba(196,17,48,.16);font-weight:700;
}
/* Eigene Funktionsfarbe (wp-admin → Portal-Formulare → Funktionsfarben) überschreibt
   Standard-Grau wie auch die automatische Hauptfunktions-Hervorhebung. Hell-/
   Dunkelvariante kommen fertig berechnet als Inline-Variablen vom Server, damit
   im Dunkelmodus genug Kontrast bleibt. */
.funktionen .funktion.funktion-eigenfarbe{
	background:var(--f-bg);color:var(--f-fg);font-weight:700;
}
@media (prefers-color-scheme: dark){
	:root:not([data-theme="light"]) .funktionen .funktion.funktion-eigenfarbe{
		background:var(--f-bg-dunkel);color:var(--f-fg-dunkel);
	}
}
:root[data-theme="dark"] .funktionen .funktion.funktion-eigenfarbe{
	background:var(--f-bg-dunkel);color:var(--f-fg-dunkel);
}
.funktionen.klein .funktion{font-size:var(--t-2xs);padding:2px 8px}
.wer .funktionen{margin-top:5px}
/* In den mittigen Karten laufen die Marken mittig mit */
.mit-card .funktionen{justify-content:center}
.mit-card .funktionen .funktion{text-align:center}

/* ============================================================
   WORDPRESS-ADMINLEISTE – bleibt im Portal ausgeblendet
   Die schwarze Leiste gehört zur Verwaltung, nicht zum Portal.
   Der Filter blendet sie aus, diese Regeln räumen den Abstand
   weg, den WordPress im <html>-Element bereits gesetzt hat.
   ============================================================ */
html{margin-top:0 !important}
* html body{margin-top:0 !important}
@media screen and (max-width:782px){html{margin-top:0 !important}}
#wpadminbar{display:none !important}

/* ============================================================
   DIENSTPLAN-APP (HypeGuard)
   Dienstpläne stehen nicht im Portal. Diese Box sagt das
   überall gleich – ruhig, aber nicht zu übersehen.
   ============================================================ */
.hg-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;border-left:4px solid var(--red)}
.hg-kopf{display:flex;gap:14px;align-items:flex-start;min-width:260px;flex:1}
.hg-ic{font-size:var(--t-2xl);line-height:1}
.hg-kopf b{display:block;font-size:var(--t-base);margin-bottom:3px}
.hg-kopf small{display:block;color:var(--muted);font-size:var(--t-m);line-height:1.5}
.hg-fuss{color:var(--muted);font-size:var(--t-s)}

/* ---------- Persönlicher Kalenderlink (Dienstplan-Reiter) ---------- */
.dp-linkzeile{display:flex;gap:8px;align-items:center}
.dp-linkzeile input{flex:1;font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
	font-size:var(--t-s);color:var(--text);background:var(--paper)}
.dp-linkzeile .btn{flex:none}

/* ---------- Dienstplan: nach Monat gruppiert ----------
   August bleibt in August, auch wenn im selben Abruf schon Schichten im
   September dabei sind – jeder Monat ist eine eigene, in sich
   geschlossene Gruppe mit eigener Kopfzeile und eigener Stundensumme. */
.dp-monat{margin-bottom:34px}
.dp-monat:last-child{margin-bottom:0}
.dp-monat-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
	padding-bottom:11px;margin-bottom:14px;border-bottom:2px solid var(--line);position:relative}
.dp-monat-kopf::after{content:"";position:absolute;left:0;bottom:-2px;width:40px;height:2px;background:var(--red)}
.dp-monat-kopf h3{font-size:var(--t-xl);font-weight:800;letter-spacing:var(--ls-titel);margin:0;text-transform:capitalize}
.dp-monat-summe{font-size:var(--t-xs);font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;
	background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);padding:5px 12px;white-space:nowrap}

.dp-liste{display:flex;flex-direction:column;gap:10px}
.dp-schicht{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);
	border-radius:var(--radius);padding:14px 18px;
	transition:transform .18s var(--weich), box-shadow .18s ease, border-color .18s ease, background .18s ease}
.dp-schicht.dp-naechste{background:var(--red-soft);border-color:var(--red)}

.dp-datum{flex:none;width:46px;text-align:center;line-height:1.15}
.dp-tagname{display:block;font-size:var(--t-2xs);font-weight:700;letter-spacing:var(--ls-weit);text-transform:uppercase;color:var(--muted)}
.dp-naechste .dp-tagname{color:var(--red-text)}
.dp-tagzahl{display:block;font-size:var(--t-2xl);font-weight:800;letter-spacing:var(--ls-titel);font-variant-numeric:tabular-nums}
.dp-trennlinie{width:1px;align-self:stretch;background:var(--line);flex:none}
.dp-naechste .dp-trennlinie{background:rgba(196,17,48,.28)}

.dp-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.dp-naechste-marke{display:block;font-size:var(--t-2xs);font-weight:800;letter-spacing:var(--ls-weit);text-transform:uppercase;color:var(--red-text)}
.dp-info b{font-size:var(--t-base);font-weight:700}
.dp-zeile{display:flex;align-items:center;gap:6px;font-size:var(--t-m);color:var(--muted)}
.dp-zeile svg{flex:none;opacity:.7}

@media(max-width:560px){
	.dp-schicht{flex-wrap:wrap;row-gap:8px}
	.dp-datum{width:auto;display:flex;align-items:baseline;gap:6px;text-align:left}
	.dp-trennlinie{display:none}
}

/* ============================================================
   BELEHRUNGEN & LESEBESTÄTIGUNG
   Offene Belehrungen sollen auffallen, ohne die Seite zu
   übertönen: farbige Kante links, alles andere ruhig.
   ============================================================ */
.belehrung{padding:20px;margin-bottom:12px;border-left:4px solid var(--red)}
.belehrung.spaet{border-left-color:#A00E27;background:var(--red-soft)}
.belehrung.fertig{border-left-color:#1E8E4E;opacity:.85}
.bel-kopf{display:flex;gap:13px;align-items:flex-start}
.bel-ic{font-size:var(--t-2xl);line-height:1.2}
.bel-kopf b{display:block;font-size:var(--t-base)}
.bel-kopf small{display:block;color:var(--muted);font-size:var(--t-s);margin-top:2px}
.belehrung.spaet .bel-kopf small{color:var(--red-text);font-weight:600}
.bel-text{margin-top:14px;font-size:var(--t-m);line-height:1.65}
.bel-form{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.bel-check{display:flex;gap:9px;align-items:flex-start;font-size:var(--t-m);cursor:pointer;flex:1;min-width:220px}
.bel-check input{margin-top:3px;width:17px;height:17px;accent-color:#C41130;flex:none}
.bel-fuss{display:block;margin-top:9px;color:var(--muted);font-size:var(--t-xs)}

/* ============================================================
   NOTFALL & ERREICHBARKEIT
   Große, antippbare Nummern. Im Ernstfall zählt jede Sekunde,
   deshalb keine Aufklapp-Menüs und keine Filter.
   ============================================================ */
.nf-regel{padding:18px 20px;border-left:4px solid var(--red);margin-bottom:22px}
.nf-regel b{display:block;font-size:var(--t-base);margin-bottom:4px}
.nf-regel span{color:var(--muted);font-size:var(--t-m);line-height:1.6}
.nf-stufe{margin-bottom:26px}
.nf-stufe-kopf{margin-bottom:12px}
/* Ein farbiger Punkt vor jeder Stufen-Überschrift genügt, um die
   Dringlichkeit zu zeigen – ohne zusätzliche Bedienelemente. */
.nf-stufe-kopf h2{font-size:var(--t-l);margin:0;display:flex;align-items:center;gap:9px}
.nf-stufe-kopf h2::before{content:"";width:10px;height:10px;border-radius:50%;flex:none;background:var(--marke-grau)}
.nf-stufe.sofort .nf-stufe-kopf h2::before{background:var(--red)}
.nf-stufe.einsatz .nf-stufe-kopf h2::before{background:var(--blue)}
.nf-stufe-kopf small{color:var(--muted);font-size:var(--t-m);margin-left:19px}
.nf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.nf-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.nf-grid{grid-template-columns:1fr}}
.nf-karte{padding:18px;display:flex;flex-direction:column;gap:7px}
.nf-name{font-size:var(--t-base)}
.nf-zeit{font-size:var(--t-s);color:var(--muted);font-weight:600;letter-spacing:0}
.nf-nummer{display:inline-block;margin-top:4px;font-size:var(--t-xl);font-weight:800;letter-spacing:var(--ls-eng);color:var(--red-text);text-decoration:none;overflow-wrap:anywhere}
.nf-hinweis{color:var(--muted);font-size:var(--t-s);line-height:1.55}
.nf-stufe.sofort .nf-karte{border-color:rgba(196,17,48,.3);background:var(--red-soft)}
.nf-stufe.einsatz .nf-karte{border-color:rgba(27,79,156,.25)}
.nf-stufe.einsatz .nf-nummer{color:var(--blue-text)}
/* Bei Lebensgefahr zählt die Nummer selbst als Knopf, nicht nur als Text –
   ein Antippen in Stresssituationen soll sich nicht anders anfühlen als
   ein echter Anruf-Knopf. */
.nf-stufe.sofort .nf-nummer{display:flex;align-items:center;font-size:var(--t-2xl);background:var(--red);color:#fff;
	padding:13px 18px;border-radius:var(--r-m);justify-content:center;gap:9px;
	box-shadow:0 10px 22px -12px rgba(196,17,48,.6)}
.nf-stufe.sofort .nf-nummer:hover{background:var(--red-d);text-decoration:none}
.nf-fuss{color:var(--muted);font-size:var(--t-s);margin-top:6px}
.quick.notfall .ic{filter:none}


/* ============================================================
   ZAHLEN ZUM PORTAL
   Eine eigene Seite, nur für die Administration.

   Bewusst ohne Diagramm-Bibliothek: Die Säulen sind Elemente mit
   Prozenthöhe. Das lädt sofort, funktioniert ohne JavaScript,
   druckt sauber und lässt sich in fünf Jahren noch nachvollziehen –
   anders als eine Bibliothek, deren Version dann niemand kennt.

   Die Bewegung steckt in assets/zahlen.js. Ohne JavaScript ist die
   Seite vollständig und richtig, nur eben ohne Animation.
   ============================================================ */

/* --- Rahmen --- */
.z-seite{background:
	radial-gradient(1200px 420px at 12% -8%, rgba(196,17,48,.055), transparent 62%),
	radial-gradient(900px 380px at 92% 4%, rgba(159,161,164,.16), transparent 60%);
	padding-bottom:20px}
.z-seite .z-hero{padding-bottom:0;background:none;border:0}
.z-seite .z-hero .crumbs{margin-bottom:0}

.z-kopf{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;margin:20px 0 30px}
.z-kopf h1{font-size:var(--t-4xl);margin:0 0 8px;letter-spacing:var(--ls-titel);line-height:1.12}
.z-kopf p{margin:0;color:var(--muted);font-size:var(--t-m);line-height:1.62;max-width:58ch}
.z-filter{display:flex;align-items:center;gap:10px;flex:none;background:var(--card);border:1px solid var(--line);
	border-radius:var(--r-m);padding:7px 9px 7px 14px;box-shadow:var(--shadow)}
.z-filter label{font-size:var(--t-s);color:var(--muted);font-weight:700;letter-spacing:var(--ls-weit);text-transform:uppercase}
.z-filter select{padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper);color:var(--text);
	font:inherit;font-size:var(--t-m);font-weight:600;cursor:pointer;transition:border-color .15s ease}

/* --- Abschnitte --- */
.z-block{margin-bottom:46px}
.z-block-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;padding-bottom:12px;margin-bottom:18px;
	border-bottom:1px solid var(--line);position:relative}
.z-block-kopf::after{content:"";position:absolute;left:0;bottom:-1px;width:46px;height:3px;
	background:var(--red);border-radius:2px}
.z-block-kopf h2{font-size:var(--t-l);margin:0;letter-spacing:var(--ls-titel)}
.z-block-kopf small{color:var(--muted);font-size:var(--t-m)}

/* --- Kennzahl-Kacheln --- */
.z-kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:16px}
@media(max-width:900px){.z-kacheln{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.z-kacheln{grid-template-columns:1fr}}

.z-kachel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:20px 21px;
	box-shadow:0 1px 2px rgba(16,24,40,.05);position:relative;overflow:hidden;
	transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .2s ease}
/* Randstreifen: feste Breite (der spätere Hover-Maximalwert), die Verjüngung
   selbst läuft über transform statt width – width löst bei jedem Frame eine
   Layout-Neuberechnung aus, transform nicht. */
.z-kachel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
	transform:scaleX(.6);transform-origin:left;
	background:var(--marke-grau);transition:transform .2s ease}
.z-kachel::after{content:"";position:absolute;right:-70px;top:-70px;width:190px;height:190px;border-radius:50%;
	background:radial-gradient(circle closest-side,rgba(196,17,48,.055),rgba(196,17,48,.02) 55%,transparent 78%);
	pointer-events:none}
.z-kachel.gross::before,.z-kachel.gut::before{background:var(--red)}
.z-kachel.warn::before{background:var(--amber)}
.z-kachel.warn::after{background:radial-gradient(circle closest-side,rgba(216,155,20,.09),rgba(216,155,20,.03) 55%,transparent 78%)}

.z-kachel b{display:block;font-size:var(--t-4xl);line-height:1.02;font-weight:800;letter-spacing:var(--ls-titel);
	font-variant-numeric:tabular-nums}
.z-kachel.gross b{font-size:var(--t-5xl);background:linear-gradient(135deg,var(--red),#8A0C21);
	-webkit-background-clip:text;background-clip:text;color:transparent}
.z-kachel.warn b{color:var(--amber-text)}
.z-titel{display:block;margin-top:8px;font-size:var(--t-m);font-weight:600;color:var(--text)}
.z-zusatz{display:block;margin-top:4px;font-size:var(--t-xs);color:var(--muted);line-height:1.45}

/* --- Stehende Säulen --- */
.z-diagramm{padding:24px;border-radius:var(--r-l);transition:box-shadow .2s ease}
.z-diagramm h3{font-size:var(--t-base);margin:0 0 3px;letter-spacing:var(--ls-eng)}
.z-diagramm-kopf{margin-bottom:18px}
.z-diagramm-kopf small{color:var(--muted);font-size:var(--t-s)}

.z-saeulen{display:flex;align-items:flex-end;gap:6px;height:180px;padding-top:20px;
	border-bottom:1px solid var(--line)}
.z-saeulen.eng{gap:3px}
.z-saeule{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;
	min-width:0;position:relative;cursor:default}
.z-wert{font-size:var(--t-2xs);font-weight:700;color:var(--muted);margin-bottom:4px;font-variant-numeric:tabular-nums;
	line-height:1;transition:color .15s ease}
.z-saeulen.eng .z-wert{display:none}
/* Wächst über transform:scaleY() statt height – die Box steht schon in
   voller Höhe, nur die sichtbare Füllung skaliert. PHP/JS liefern den
   Zielwert über die Custom Property --z (0–100), siehe inc/statistik.php
   und assets/zahlen.js. */
.z-balken{display:block;width:100%;height:100%;border-radius:var(--r-s) var(--r-s) 0 0;
	transform:scaleY(calc(var(--z, 0) / 100));transform-origin:bottom;
	background:linear-gradient(180deg,#D6203E,#A00E27);
	transition:transform .75s cubic-bezier(.22,.75,.3,1), filter .15s ease}
.z-saeule.we .z-balken{background:linear-gradient(180deg,#F0C3CC,#E4A9B5)}
.z-label{display:block;margin-top:8px;font-size:var(--t-2xs);color:var(--muted);white-space:nowrap;line-height:1}

/* --- Liegende Balken --- */
.z-zeile{display:grid;grid-template-columns:minmax(96px,36%) 1fr auto;gap:12px;align-items:center;margin-bottom:10px}
.z-name{font-size:var(--t-m);color:var(--text);overflow-wrap:anywhere}
.z-strich{background:var(--paper);border-radius:var(--r-xl);height:10px;overflow:hidden}
/* Wächst über transform:scaleX() statt width, aus demselben Grund wie
   .z-balken oben – --z kommt ebenfalls aus PHP/JS. */
.z-strich span{display:block;height:100%;width:100%;border-radius:var(--r-xl);
	transform:scaleX(calc(var(--z, 0) / 100));transform-origin:left;
	background:linear-gradient(90deg,#D6203E,#A00E27);
	transition:transform .8s cubic-bezier(.22,.75,.3,1)}
.z-strich span.gruen{background:linear-gradient(90deg,#28A05C,#137333)}
.z-strich span.grau{background:linear-gradient(90deg,#B3B5B8,#8E9093)}
.z-strich span.rot{background:linear-gradient(90deg,#A00E27,#7A0A1D)}
.z-strich span.gelb{background:linear-gradient(90deg,#E8B037,#C68A0B)}
.z-zahl{font-size:var(--t-m);font-weight:700;min-width:36px;text-align:right;font-variant-numeric:tabular-nums}

/* --- Zwei Spalten --- */
.z-spalten{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:13px}
@media(max-width:900px){.z-spalten{grid-template-columns:1fr}}

/* --- Liste zuletzt registrierter Konten --- */
.z-liste{padding:24px;border-radius:var(--r-l)}
.z-liste h3{font-size:var(--t-base);margin:0 0 16px}
.z-tabelle{width:100%;border-collapse:collapse}
.z-tabelle td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.z-tabelle tr:last-child td{border-bottom:0}
.z-tabelle tr{transition:background .15s ease}
.z-tabelle b{display:block;font-size:var(--t-m);font-weight:600}
.z-tabelle small{display:block;font-size:var(--t-xs);color:var(--muted);margin-top:2px}
/* Kopfzeile: bisher hatte keine z-tabelle eine, die Abteilungs-Auswertung schon. */
.z-tabelle th{padding:0 0 8px;border-bottom:1px solid var(--line);text-align:left;font-size:var(--t-xs);font-weight:600;letter-spacing:var(--ls-weit);text-transform:uppercase;color:var(--muted)}
.z-tabelle th.z-rechts{text-align:right}
.z-rechts{text-align:right;white-space:nowrap}
.z-warn{color:var(--amber-text) !important;font-weight:600}
.z-grau{color:var(--muted) !important}

/* --- Hinweise & Fazit --- */
.z-hinweis{padding:18px 21px;border-left:4px solid var(--red);border-radius:var(--r-l);margin-top:15px}
.z-hinweis.warn{border-left-color:var(--amber);background:var(--amber-soft)}
.z-hinweis.grau{border-left-color:var(--marke-grau);background:var(--paper)}
.z-hinweis b{display:block;font-size:var(--t-base);margin-bottom:5px}
.z-hinweis span{display:block;color:var(--muted);font-size:var(--t-m);line-height:1.62}
.z-hinweis small{display:block;margin-top:10px;color:var(--muted);font-size:var(--t-s);line-height:1.6}
.z-jung{margin:0 0 26px}

.z-fazit{display:flex;gap:17px;align-items:flex-start;padding:26px;border-radius:var(--r-l);
	background:linear-gradient(135deg,var(--card) 40%,var(--red-soft));border-left:4px solid var(--marke-grau)}
.z-fazit.gut{border-left-color:var(--green);background:linear-gradient(135deg,var(--card) 40%,var(--green-soft))}
.z-fazit.warn{border-left-color:var(--amber);background:linear-gradient(135deg,var(--card) 40%,var(--amber-soft))}
.z-fazit-ic{font-size:var(--t-3xl);line-height:1;flex:none}
.z-fazit b{display:block;font-size:var(--t-l);margin-bottom:6px;letter-spacing:var(--ls-titel)}
.z-fazit p{margin:0;color:var(--text);font-size:var(--t-base);line-height:1.68}

.z-fein{color:var(--muted);font-size:var(--t-s);margin-top:13px;line-height:1.6}
.z-leer{color:var(--muted);font-size:var(--t-m);margin:6px 0}
.z-fuss{color:var(--muted);font-size:var(--t-s);text-align:center;margin:30px 0 10px}

/* ------------------------------------------------------------
   BEWEGUNG
   Abschnitte fliegen bewusst nicht ein – die Seite steht sofort
   vollständig da. Bewegt wird nur noch das, was etwas erklärt:
   die Zahlen zählen hoch, die Balken wachsen auf ihre Länge.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce){
	.z-balken,.z-strich span{transition:none}
	.z-kachel:hover{transform:none}
}

@media print{
	.z-filter,.site-footer,.suite{display:none !important}
	.z-block{break-inside:avoid}
	.z-seite{background:none}
}

/* ============================================================
   ================  BEWEGUNG & MODERNES BILD  ================
   ============================================================

   Alles, was das Portal lebendig macht. Drei Regeln, an die sich
   dieser ganze Abschnitt hält:

   1. Nichts wartet. Jeder Klick reagiert sofort; Bewegung erklärt,
      was passiert, sie hält es nicht auf.
   2. Nichts fliegt ein. Inhalte sind beim Laden sofort und
      vollständig da – auch beim Scrollen. Bewegt wird nur, was
      auf eine Handlung antwortet (Hover, Klick, Seitenwechsel).
   3. „Bewegung reduzieren“ im Betriebssystem schaltet alles ab.
      Das steht ganz unten und überschreibt den Rest.
   ============================================================ */

:root{
	--takt:.55s;                              /* Grunddauer */
	--weich:cubic-bezier(.22,.75,.28,1);      /* weiches Ausrollen */
	--feder:cubic-bezier(.34,1.4,.42,1);      /* leichtes Überschwingen */
}

/* ---------- Überblendung beim Seitenwechsel ----------
   Die einzige verbliebene Ganzseiten-Bewegung: Beim Klick auf einen
   Link blendet die alte Seite weg, damit der Wechsel nicht hart
   springt. Kein Einfliegen – die neue Seite ist sofort da. */
.tf-bewegt.tf-geht main,
.tf-bewegt.tf-geht .hero{opacity:0;transition:opacity .28s ease}

/* ---------- Kopfzeile ---------- */
.suite{transition:padding .25s var(--weich), box-shadow .25s ease, background .25s ease}
.tf-gescrollt .suite{padding-top:7px;padding-bottom:7px;
	box-shadow:0 8px 24px -12px rgba(0,0,0,.6);
	background:rgba(20,23,28,.94);backdrop-filter:blur(10px)}
.brand .wm{transition:font-size .25s var(--weich)}
.tf-gescrollt .brand .wm{font-size:var(--t-l)}
@keyframes tf-wink{50%{transform:translateY(-3px) rotate(-3deg)}}
.brand .wm .flex{display:inline-block}

.mainnav{transition:box-shadow .25s ease}
.tf-gescrollt .mainnav{box-shadow:0 6px 18px -14px rgba(16,24,40,.5)}

/* Menüpunkte: Unterstrich wächst aus der Mitte */
.mainnav li a{position:relative;transition:color .2s ease}
.mainnav li a::after{content:"";position:absolute;left:50%;right:50%;bottom:-3px;height:3px;
	background:var(--red);border-radius:2px;transition:left .25s var(--weich), right .25s var(--weich)}
.mainnav li.current-menu-item > a::after,
.mainnav li.current_page_item > a::after{left:12px;right:12px}

/* Suchfeld wächst beim Tippen */
.suite-search{transition:background .2s ease, border-color .2s ease, max-width .3s var(--weich)}
.suite-search:focus-within{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34);max-width:600px}

/* ---------- Dunkler Kopfbereich ---------- */
.hero{--tf-tiefe:0px}
.hero::after{transform:translateY(var(--tf-tiefe));transition:transform .05s linear}
.hero::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:70%;pointer-events:none;
	background:radial-gradient(60% 60% at 22% 0%, rgba(196,17,48,.22), transparent 70%);
	animation:tf-atmen 14s ease-in-out infinite}
@keyframes tf-atmen{0%,100%{opacity:.75;transform:translate3d(0,0,0)}50%{opacity:1;transform:translate3d(3%,2%,0)}}
.hero-grid{will-change:transform}

/* ---------- Hero-Auftakt beim ersten Laden ----------
   Der einzige Einfliege-Moment der Seite, bewusst: einmalig beim
   Laden, nicht bei jedem Scrollen – widerspricht also nicht dem
   Grundsatz oben, dass Inhalte beim Scrollen sofort da sind. Startet
   nur, solange ".tf-bewegt" ohne ".tf-bereit" da ist; im Ruhemodus
   (".tf-ruhig") oder ganz ohne JavaScript bleibt alles von Anfang an
   sichtbar. */
.tf-bewegt:not(.tf-bereit) .hero-grid>div:first-child>*,
.tf-bewegt:not(.tf-bereit) .shift-card{opacity:0}
.tf-bewegt.tf-bereit .hero-grid>div:first-child>*{animation:tf-hero-auf .6s var(--weich) both}
.tf-bewegt.tf-bereit .hero-grid>div:first-child>*:nth-child(1){animation-delay:.05s}
.tf-bewegt.tf-bereit .hero-grid>div:first-child>*:nth-child(2){animation-delay:.12s}
.tf-bewegt.tf-bereit .hero-grid>div:first-child>*:nth-child(3){animation-delay:.2s}
.tf-bewegt.tf-bereit .hero-grid>div:first-child>*:nth-child(4){animation-delay:.28s}
.tf-bewegt.tf-bereit .shift-card{animation:tf-hero-auf .6s var(--weich) .36s both}
@keyframes tf-hero-auf{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- Karten ---------- */
.card{transition:transform .22s var(--weich), box-shadow .22s ease, border-color .22s ease}
.quick,.news,.dept,.form-card,.member,.mit-card,.person-mini{
	transition:transform .22s var(--weich), box-shadow .22s ease, border-color .22s ease}

/* Das Symbol im Schnellzugriff dreht sich leicht mit */
.quick .ic{transition:transform .3s var(--feder), background .25s ease}
.quick .go,.dept .go{display:inline-block;transition:transform .25s var(--weich)}

/* Vorschaubild atmet beim Draufzeigen – 300ms statt vorher 500ms: für einen
   5%-Zoom ist eine halbe Sekunde länger, als die zurückgelegte Distanz
   rechtfertigt, und wirkt träge statt sanft. */
.news .cover{transition:transform .3s var(--weich)}
.news{overflow:hidden}
.member .foto{transition:transform .3s var(--weich)}

/* ---------- Knöpfe ---------- */
.btn{position:relative;overflow:hidden;
	transition:background .18s ease, transform .18s var(--weich), box-shadow .18s ease}
/* Der Druck selbst reagiert sofort (0ms) – nur beim Loslassen greift wieder
   die normale Transition-Dauer von .btn oben. Ein Knopf, der beim Drücken
   noch die Hover-Timing mitbringt, fühlt sich einen Wimpernschlag zu spät an. */
.btn:active{transform:translateY(0) scale(.985);transition-duration:0s}

/* Die Welle unter dem Finger */
.tf-welle{position:absolute;width:14px;height:14px;border-radius:50%;pointer-events:none;
	background:rgba(255,255,255,.55);transform:translate(-50%,-50%) scale(0);
	animation:tf-welle .55s ease-out forwards}
.quick .tf-welle,.chip .tf-welle,.btn.light .tf-welle{background:rgba(196,17,48,.22)}
@keyframes tf-welle{to{transform:translate(-50%,-50%) scale(16);opacity:0}}

.sec-link,.act{transition:color .18s ease, transform .22s var(--weich)}

/* ---------- Marken, Kennzeichen ---------- */
.tag,.funktionen .funktion{transition:transform .2s var(--feder)}

/* ---------- Formulare ---------- */
.f-field input,.f-field select,.f-field textarea,
input[type=text],input[type=email],input[type=date],input[type=search],
input[type=password],input[type=number],select,textarea{
	transition:border-color .18s ease, box-shadow .18s ease, background .18s ease}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus,
input:focus,select:focus,textarea:focus{
	box-shadow:0 0 0 4px rgba(196,17,48,.12)}
.f-field label{transition:color .18s ease}
.f-field:focus-within label{color:var(--red-text)}
.f-check{transition:background .18s ease, transform .18s var(--weich)}
input[type=checkbox],input[type=radio]{accent-color:#C41130;transition:transform .18s var(--feder)}

/* ---------- Reiter (Mein Profil) ---------- */
.profil-reiter a{position:relative;transition:color .2s ease, background .2s ease}
.profil-reiter a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:3px;
	background:var(--red);border-radius:2px;transition:left .3s var(--weich), right .3s var(--weich)}
.profil-reiter a.aktiv::after{left:0;right:0}
.reiter-zahl{animation:tf-puls 2.4s ease-in-out infinite}
@keyframes tf-puls{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}

/* ---------- Aufklappbares ---------- */
details summary{transition:color .18s ease, background .18s ease}
details summary::marker{color:var(--red-text)}
.tf-bewegt details[open] > *:not(summary){animation:tf-klappt .35s var(--weich) both}
@keyframes tf-klappt{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- Tabellenzeilen ---------- */
tbody tr{transition:background .15s ease}

/* ---------- Meldungen ---------- */
.f-ok{animation:tf-melden .5s var(--feder) both}
@keyframes tf-melden{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- Einsatz-Board ---------- */
.einsatz{transition:transform .22s var(--weich), background .22s ease, border-left-width .18s ease}

/* ---------- Fußbereich ---------- */
.site-footer a{transition:color .18s ease, padding-left .2s var(--weich)}

/* ---------- Nach oben scrollen ---------- */
.tf-hoch{position:fixed;right:20px;bottom:20px;width:44px;height:44px;border-radius:50%;
	border:1px solid var(--line);background:var(--card);color:var(--red-text);font-size:var(--t-l);
	box-shadow:var(--schatten-2);display:grid;place-items:center;
	opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;z-index:70;
	transition:opacity .25s ease, transform .25s var(--feder), background .18s ease}
.tf-gescrollt .tf-hoch{opacity:1;transform:none;pointer-events:auto}

/* ---------- Ruhemodus: alles aus ---------- */

/* ---------- Hover nur auf Geräten mit echtem Zeigegerät ----------
   Auf reinem Touch bleibt ein :hover sonst nach dem Tippen "hängen",
   bis woanders hingetippt wird. Alle Hover-Effekte des Stylesheets
   stehen deshalb gebündelt hier; Fokus-Zustände (Tastatur) sind davon
   unberührt, die bleiben regulär aktiv. */
@media (hover: hover) and (pointer: fine) {
.se-eintrag:hover{background:var(--paper)}
.suite-profil:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.24)}
.mainnav li a:hover{color:var(--text)}
.sec-link:hover{text-decoration:underline}
.btn:hover{background:var(--red-d)}
.btn.ghost:hover{background:rgba(255,255,255,.2)}
.btn.light:hover{background:var(--red-soft);filter:brightness(.96)}
.naechster-termin:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.naechster-termin:hover .nt-pfeil{color:var(--red-text)}
.quick:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.news:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.kfilter:hover{transform:translateY(-1px)}
.kalender-nav:hover{background:var(--paper)}
.kmehr:hover{color:var(--red-text);text-decoration:underline}
.tf-ed-close button:hover{background:var(--paper)}
.dept:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.crumbs a:hover{text-decoration:underline}
.reaktion:hover{border-color:var(--red-text);transform:translateY(-1px)}
.site-footer a:hover{color:#fff}
.member:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.member .m-kontakt a:hover{border-color:var(--red-text);color:var(--red-text)}
a.form-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--red-text)}
.pf-mgmt:hover{border-color:var(--linie-stark);background:var(--card)}
.pf-stufe-chip:hover{background:var(--card);border-color:var(--red-text);transform:translateY(-1px)}
.danke:hover{transform:translateY(-2px);box-shadow:var(--schatten-2);border-color:var(--linie-stark)}
.fr-neu:hover{color:var(--red-text)}
.fr-akt .btn:hover{background:var(--red);color:#fff}
.fr-weg:hover{color:var(--red-text);background:var(--red-soft)}
.chat-plus:hover{background:var(--red-d);color:#fff}
.chat-eintrag:hover{background:var(--paper)}
.blase:hover .blase-weg{opacity:1}
.blase-weg:hover{color:var(--red-text)}
.blase-datei:hover .blase-datei-ic{background:rgba(11,20,26,.13)}
.chat-sprung:hover{color:var(--red-text)}
.chat-anhang-vorschau button:hover{color:var(--red-text)}
.chat-werkzeug:hover{background:rgba(0,0,0,.06)}
.chat-senden:hover{background:var(--red-d)}
.emoji-feld button:hover{background:var(--paper)}
.mini-start:hover{background:var(--red-d);transform:scale(1.06)}
.mini-knopf:hover{color:#fff;background:rgba(255,255,255,.12)}
.mit-card .m-kontakt a:hover{border-color:var(--red-text);color:var(--red-text)}
.m-danke:hover{border-color:var(--red-text);color:var(--red-text)}
.tf-vorschau-zu:hover{border-color:var(--red-text);color:var(--red-text)}
.tf-sig-bild:hover{border-color:var(--red-text)}
a.tf-datei:hover{border-color:var(--red-text);color:var(--red-text)}
.tf-glocke:hover{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06)}
.nachricht:hover{border-color:var(--muted)}
.n-weg:hover{border-color:var(--red-text);color:var(--red-text);background:var(--red-soft)}
.btn.still:hover{border-color:var(--linie-stark);color:var(--text);background:var(--paper)}
.tf-werkzeuge button:hover{border-color:var(--linie-stark);background:var(--paper)}
.profil-reiter a:hover{border-color:var(--linie-stark);color:var(--text)}
.up-filter a:hover{border-color:var(--linie-stark);color:var(--text)}
.hilfe-karte:hover{border-color:var(--linie-stark);transform:translateY(-2px);box-shadow:var(--schatten-2)}
.hilfe-karte:hover .h-pfeil{opacity:1}
.dp-schicht:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.nf-nummer:hover{text-decoration:underline}
.z-filter select:hover{border-color:var(--red-text)}
.z-kachel:hover{transform:translateY(-3px);box-shadow:var(--schatten-2);border-color:var(--muted)}
.z-kachel:hover::before{transform:scaleX(1)}
.z-diagramm:hover{box-shadow:var(--schatten-1)}
.z-saeule:hover .z-balken{filter:brightness(1.12)}
.z-saeule:hover .z-wert{color:var(--red-text)}
.brand:hover .wm .flex{animation:tf-wink .5s var(--weich)}
.mainnav li a:hover::after{left:12px;right:12px}
.quick:hover,.news:hover,.dept:hover,.member:hover,.mit-card:hover{
	transform:translateY(-4px);box-shadow:var(--schatten-3);border-color:var(--linie-stark)}
a.card:hover,.form-card:hover{transform:translateY(-3px);box-shadow:var(--schatten-3)}
.person-mini:hover{transform:translateX(3px)}
.quick:hover .ic{transform:scale(1.12) rotate(-6deg);background:var(--red-soft)}
.quick:hover .go,.dept:hover .go{transform:translateX(5px)}
.news:hover .cover{transform:scale(1.05)}
.member:hover .foto{transform:scale(1.04)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(196,17,48,.7)}
.btn.ghost:hover{box-shadow:0 10px 22px -14px rgba(0,0,0,.6)}
.sec-link:hover,.card:hover .act{transform:translateX(4px)}
.card:hover .tag{transform:translateY(-1px)}
.f-check:hover{transform:translateX(2px)}
input[type=checkbox]:hover,input[type=radio]:hover{transform:scale(1.12)}
.profil-reiter a:hover::after{left:10px;right:10px}
.z-tabelle tr:hover,.widefat tbody tr:hover{background:var(--paper)}
.einsatz:hover{transform:translateY(-3px);background:rgba(255,255,255,.09);border-left-width:5px}
.site-footer li a:hover{padding-left:4px;color:#fff}
.tf-hoch:hover{background:var(--red);color:#fff;border-color:var(--red-text)}
}

@media (prefers-reduced-motion: reduce){
	.tf-bewegt main,.tf-bewegt .hero{opacity:1 !important;transform:none !important}
	.hero::before,.reiter-zahl,.live{animation:none !important}
	.tf-welle{display:none}
	.tf-hoch{transition:none}
	.card:hover,.quick:hover,.news:hover,.btn:hover,.member:hover,.mit-card:hover,.dept:hover{transform:none}
}

/* ---------- Einsatzleiter-Board Messe Berlin ---------- */
/* Signatur: die Aufgaben laufen als dauerhaft dunkle "Konsole" – wie ein
   echtes Lagezentrum-Display, unabhängig vom Hell/Dunkel-Modus des übrigen
   Portals. Prozesse, Kalender und PDF-Konverter bleiben in der normalen,
   hellen Portal-Optik – das Board ist der eine Ort mit eigenem Charakter. */
.md-konsole{
	--mk-bg:#22262C; --mk-panel:#2C3138; --mk-panel2:#1B1E23; --mk-linie:#3C424A;
	--mk-text:#F0F2F4; --mk-muted:#9BA3AC;
	--mk-offen:#FF8C5A; --mk-live:#3DDC97; --mk-angenommen:#5E9EFF; --mk-bearbeitung:#F5C44B; --mk-alarm:#FF5C5C;
	--mk-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
	position:relative;background-color:var(--mk-bg);
	background-image:
		linear-gradient(rgba(129,180,255,.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(129,180,255,.055) 1px, transparent 1px);
	background-size:28px 28px;
	border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-lg);
}

.md-konsole-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding:16px 22px;border-bottom:1px solid var(--mk-linie);font-family:var(--mk-mono)}
.md-signal{display:inline-flex;align-items:center;gap:9px;color:var(--mk-live);font-weight:700;font-size:var(--t-xs);letter-spacing:var(--ls-label);text-transform:uppercase}
.md-live-punkt{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mk-live);box-shadow:0 0 0 3px rgba(61,220,151,.18),0 0 9px 1px rgba(61,220,151,.55);animation:md-puls 1.8s ease-in-out infinite}
@keyframes md-puls{0%{box-shadow:0 0 0 3px rgba(61,220,151,.18),0 0 9px 1px rgba(61,220,151,.55)}70%{box-shadow:0 0 0 8px rgba(61,220,151,0),0 0 9px 1px rgba(61,220,151,.35)}100%{box-shadow:0 0 0 3px rgba(61,220,151,0),0 0 9px 1px rgba(61,220,151,0)}}
@media (prefers-reduced-motion: reduce){.md-live-punkt{animation:none}}

/* Kennzahlen als kleine "Leuchtanzeige" – wie die Zähler eines echten
   Konsolen-Panels, statt schlichter Fließtext-Zahlen. */
.md-kennzahlen{display:flex;gap:10px}
.md-kennzahl{display:flex;flex-direction:column;align-items:center;gap:1px;background:var(--mk-panel2);border:1px solid var(--mk-linie);border-radius:var(--r-s);padding:4px 14px 5px;min-width:58px}
.md-kennzahl strong{font-size:var(--t-l);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1;color:var(--mk-offen);text-shadow:0 0 12px rgba(255,140,90,.45)}
.md-kennzahl span{font-size:var(--t-2xs);color:var(--mk-muted);text-transform:uppercase;letter-spacing:var(--ls-weit)}
.md-kennzahl-erledigt strong{color:var(--mk-live);text-shadow:0 0 12px rgba(61,220,151,.45)}

.md-konsole-werkzeuge{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.md-sync{font-size:var(--t-xs);color:var(--mk-muted)}
.md-hg-btn{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.04);border:1px solid var(--mk-linie);color:var(--mk-text);border-radius:var(--r-xl);padding:5px 14px 5px 11px;font-size:var(--t-xs);font-weight:600;font-family:inherit;text-decoration:none;letter-spacing:0;transition:border-color .15s ease,background .15s ease,transform .15s var(--feder)}
.md-hg-btn span{font-size:var(--t-m);line-height:1}
.md-hg-btn:hover{background:rgba(255,255,255,.08);border-color:var(--mk-offen);transform:translateY(-1px)}
.md-hg-btn:focus-visible{outline:2px solid var(--mk-offen);outline-offset:2px}
.md-glocke{background:transparent;border:1px solid var(--mk-linie);color:var(--mk-muted);border-radius:var(--r-xl);padding:5px 12px;font-size:var(--t-xs);font-weight:600;cursor:pointer;font-family:inherit;transition:border-color .15s ease,color .15s ease}
.md-glocke:hover{color:var(--mk-text);border-color:var(--mk-muted)}
.md-glocke:disabled{color:var(--mk-live);border-color:var(--mk-live);cursor:default;opacity:.85}
.md-glocke:focus-visible{outline:2px solid var(--mk-offen);outline-offset:2px}

.md-neu{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 22px;border-bottom:1px solid var(--mk-linie);background:rgba(255,255,255,.015)}
.md-neu-marker{color:var(--mk-offen);font-family:var(--mk-mono);font-weight:700;font-size:var(--t-l);flex-shrink:0}
.md-neu-titel,.md-neu-uid,.md-neu-notiz,.md-neu-prioritaet,.md-neu-faellig{background:var(--mk-panel);border:1px solid var(--mk-linie);color:var(--mk-text);border-radius:var(--r-s);padding:9px 12px;font-size:var(--t-m);font-family:inherit}
.md-neu-titel{flex:2;min-width:200px}
.md-neu-uid{flex:1;min-width:170px}
.md-neu-notiz{flex:1;min-width:170px}
.md-neu-prioritaet{flex:0 0 auto;min-width:120px}
.md-neu-faellig{flex:0 0 auto;min-width:170px;color-scheme:dark}
.md-neu-titel::placeholder,.md-neu-notiz::placeholder{color:var(--mk-muted)}
.md-neu-titel:focus,.md-neu-uid:focus,.md-neu-notiz:focus,.md-neu-prioritaet:focus,.md-neu-faellig:focus{outline:none;border-color:var(--mk-offen);box-shadow:0 0 0 3px rgba(255,122,69,.18)}
.md-neu-btn{background:var(--mk-offen);color:#1A0F08;font-weight:700;border:0;border-radius:var(--r-s);padding:9px 18px;font-size:var(--t-m);cursor:pointer;flex-shrink:0;transition:filter .15s ease,transform .15s var(--feder)}
.md-neu-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.md-neu-btn:disabled{opacity:.6;cursor:default;transform:none}
.md-neu-btn:focus-visible{outline:2px solid var(--mk-offen);outline-offset:2px}
.md-hinweis{margin:0;padding:14px 22px;color:var(--mk-muted);font-size:var(--t-s);border-bottom:1px solid var(--mk-linie)}

.md-filter{display:flex;gap:8px;flex-wrap:wrap;padding:12px 22px;border-bottom:1px solid var(--mk-linie)}
.md-filter-chip{background:transparent;border:1px solid var(--mk-linie);color:var(--mk-muted);border-radius:var(--r-xl);padding:5px 13px;font-size:var(--t-xs);font-weight:600;cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease}
.md-filter-chip:hover{color:var(--mk-text);border-color:var(--mk-muted)}
.md-filter-chip.is-aktiv{background:var(--mk-offen);border-color:var(--mk-offen);color:#1A0F08}
.md-filter-chip:focus-visible{outline:2px solid var(--mk-offen);outline-offset:2px}

.md-manifest{list-style:none;margin:0;padding:0;max-height:460px;overflow-y:auto}
.md-aufgabe{display:flex;align-items:center;gap:12px;padding:12px 22px;border-bottom:1px solid var(--mk-linie);transition:background .12s ease;flex-wrap:wrap}
.md-aufgabe[hidden]{display:none}
.md-manifest li.md-aufgabe:last-child{border-bottom:0}
.md-aufgabe:hover{background:rgba(255,255,255,.025)}
.md-status-punkt{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--mk-offen)}
.md-stufe-angenommen .md-status-punkt{background:var(--mk-angenommen)}
.md-stufe-in_bearbeitung .md-status-punkt{background:var(--mk-bearbeitung)}
.md-stufe-erledigt .md-status-punkt{background:var(--mk-live)}
.md-zeit{font-family:var(--mk-mono);font-size:var(--t-s);color:var(--mk-muted);flex-shrink:0;min-width:2.6em}
.md-aufgabe-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 200px}
.md-aufgabe-text b{color:var(--mk-text);font-size:var(--t-m);font-weight:600;line-height:1.4;word-break:break-word}
.md-aufgabe-text small{color:var(--mk-muted);font-size:var(--t-xs)}
.md-aufgabe.md-ist-erledigt{opacity:.6}
.md-aufgabe.md-ist-erledigt .md-aufgabe-text b{text-decoration:line-through;font-weight:500}
.md-aufgabe.md-ist-dringend{background:rgba(255,140,90,.06);border-left:3px solid var(--mk-offen)}
.md-aufgabe.md-ist-dringend:hover{background:rgba(255,140,90,.1)}
.md-dringend-fahne{color:var(--mk-offen);margin-right:5px;display:inline-block}
.md-aufgabe.md-ist-ueberfaellig .md-aufgabe-text small{color:var(--mk-alarm);font-weight:600}
.md-leer{list-style:none;padding:30px 22px;color:var(--mk-muted);font-size:var(--t-m);text-align:center}

.md-status-chip{flex-shrink:0;font-size:var(--t-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-weit);padding:3px 9px;border-radius:var(--r-xl)}
.md-status-offen{background:rgba(255,140,90,.16);color:var(--mk-offen)}
.md-status-angenommen{background:rgba(94,158,255,.16);color:var(--mk-angenommen)}
.md-status-in_bearbeitung{background:rgba(245,196,75,.16);color:var(--mk-bearbeitung)}
.md-status-erledigt{background:rgba(61,220,151,.16);color:var(--mk-live)}

.md-stufe-btn{flex-shrink:0;background:var(--mk-panel);border:1px solid var(--mk-linie);color:var(--mk-text);border-radius:var(--r-s);padding:7px 13px;font-size:var(--t-s);font-weight:600;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.md-stufe-btn:hover{border-color:var(--mk-offen);color:var(--mk-offen)}
.md-stufe-btn:disabled{opacity:.5;cursor:default}
.md-stufe-btn:focus-visible{outline:2px solid var(--mk-offen);outline-offset:2px}

.md-erledigt-block{border-top:1px solid var(--mk-linie)}
.md-erledigt-block summary{display:block;width:100%;box-sizing:border-box;padding:13px 22px;cursor:pointer;font-size:var(--t-s);font-weight:600;color:var(--mk-muted);font-family:var(--mk-mono);letter-spacing:0;list-style:none}
.md-erledigt-block summary::-webkit-details-marker{display:none}
.md-erledigt-block summary::before{content:'▸ ';display:inline-block;transition:transform .15s ease}
.md-erledigt-block[open] summary::before{transform:rotate(90deg)}
.md-erledigt-block summary:focus-visible{outline:2px solid var(--mk-muted);outline-offset:2px}
.md-erledigt-block .md-manifest{max-height:320px}

/* ---------- Prozesse & Verteiler: Karteikarten-Optik, durchsuchbar ---------- */
.md-prozess-suche{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);max-width:420px;color:var(--muted)}
.md-prozess-suche input{flex:1;border:0;outline:none;background:transparent;color:var(--text);font-size:var(--t-m);padding:2px 0}
.md-prozess-leer{margin-top:14px;padding:24px;text-align:center;color:var(--muted);font-size:var(--t-m);background:var(--card);border:1px solid var(--line);border-radius:var(--r-m)}

.md-prozess-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:14px;align-items:start}
.md-prozess-grid.md-eingeklappt .md-prozess-card:nth-child(n+4){display:none}
.md-prozess-mehr{display:block;margin:14px auto 0;padding:9px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);color:var(--text);font-size:var(--t-m);font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.md-prozess-mehr[hidden]{display:none}
.md-prozess-mehr:hover{border-color:var(--red-text);color:var(--red-text)}
.md-prozess-card{position:relative;display:flex;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;transition:transform .15s var(--feder),box-shadow .15s ease}
.md-prozess-card[hidden]{display:none}
.md-prozess-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.md-prozess-lasche{width:6px;flex-shrink:0;background:var(--red)}
.md-prozess-card.is-favorit .md-prozess-lasche{background:#E3A008}
.md-prozess-inhalt{padding:16px 18px;flex:1;min-width:0}
.md-prozess-kopf{display:flex;flex-direction:column;gap:9px}
.md-prozess-titelzeile{display:flex;align-items:flex-start;gap:8px}
.md-prozess-titelzeile h3{flex:1;min-width:0}
.md-favorit-btn{flex-shrink:0;width:22px;height:22px;padding:0;margin-top:1px;border:0;background:transparent;color:var(--line);font-size:var(--t-l);line-height:1;cursor:pointer;transition:color .15s ease,transform .15s var(--feder)}
.md-favorit-btn:hover{color:#E3A008;transform:scale(1.12)}
.md-favorit-btn[aria-pressed="true"]{color:#E3A008}
.md-prozess-aktionen{display:flex;gap:8px;flex-wrap:wrap}
.md-kopieren-cc{background:var(--card)}
.md-prozess-card h3{margin:0;font-size:var(--t-base);color:var(--text)}
.md-prozess-details{margin-top:10px}
.md-prozess-details summary{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;box-sizing:border-box;cursor:pointer;font-size:var(--t-xs);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:var(--ls-weit);list-style:none;padding:10px 4px;margin-top:10px;border-top:1px solid var(--line);border-radius:var(--r-s);transition:background .15s ease,color .15s ease}
.md-prozess-details summary::-webkit-details-marker{display:none}
.md-prozess-details summary::after{content:'▾';display:inline-block;font-size:var(--t-m);transition:transform .15s ease}
.md-prozess-details[open] summary::after{transform:rotate(180deg)}
.md-prozess-details summary:hover{color:var(--red-text);background:var(--paper)}
.md-prozess-details[open] summary{color:var(--red-text)}
.md-prozess-details summary:focus-visible{outline:2px solid var(--red-text);outline-offset:2px}
.md-prozess-schritte{list-style:none;margin:12px 0;padding:0;display:flex;flex-direction:column;gap:7px}
.md-prozess-schritte li{position:relative;padding-left:15px;color:var(--muted);font-size:var(--t-s);line-height:1.5}
.md-prozess-schritte li::before{content:'';position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--red)}
.md-prozess-zeile{display:flex;gap:8px;font-size:var(--t-s);color:var(--muted);margin:0 0 6px;align-items:baseline}
.md-prozess-zeile b{flex-shrink:0;color:var(--text);font-weight:600;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:var(--ls-weit);min-width:68px}
.md-prozess-zeile code{background:var(--paper);border-radius:var(--r-s);padding:2px 7px;color:var(--text);font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:var(--t-s)}
.md-ablage-wert{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.md-ablage-link{color:var(--text);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px}
.md-ablage-link:hover{color:var(--red-text);text-decoration-color:var(--red-text)}
.md-pfad-kopieren{padding:2px 6px;font-size:var(--t-m);line-height:1;border-radius:var(--r-s)}
.md-empfaenger{margin-top:12px}
.md-empfaenger > b{display:block;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:var(--ls-weit);color:var(--muted);margin-bottom:6px}
.md-empfaenger-liste{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:var(--t-s);color:var(--text);line-height:1.7;word-break:break-word;background:var(--paper);border-radius:var(--r-s);padding:10px 12px}
.md-kopieren{flex-shrink:0;border:1px solid var(--line);background:var(--paper);color:var(--text);border-radius:var(--r-s);padding:7px 12px;font-size:var(--t-s);font-weight:600;cursor:pointer;transition:border-color .15s ease,color .15s ease}
.md-kopieren:hover{border-color:var(--red-text);color:var(--red-text)}
.md-kopieren:focus-visible{outline:2px solid var(--red-text);outline-offset:2px}

/* ---------- Messe-Board (wiederverwendet vom Startseiten-Einsatzboard) ---------- */
.md-messe-board{margin-top:0}
.md-messe-board .board-scroll{scroll-snap-type:none}
.md-messe-board .einsatz{scroll-snap-align:none}
.einsatz{text-decoration:none;display:block}
.md-messe-scroll-wrap{position:relative;display:flex;align-items:center}
.md-messe-pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(20,23,28,.85);color:#fff;font-size:var(--t-xl);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease,transform .15s var(--feder)}
.md-messe-pfeil[hidden]{display:none}
.md-messe-pfeil:hover{background:rgba(196,17,48,.85);transform:translateY(-50%) scale(1.06)}
.md-messe-pfeil:focus-visible{outline:2px solid #fff;outline-offset:2px}
.md-messe-pfeil-links{left:8px}
.md-messe-pfeil-rechts{right:8px}
@media (prefers-reduced-motion: reduce){.md-messe-pfeil{transition:none}.md-messe-pfeil:hover{transform:translateY(-50%)}}

.md-pdf-card{padding:20px;display:flex;flex-direction:column;gap:14px}
.md-pdf-card form{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.md-pdf-datei{flex:1;min-width:220px;font-size:var(--t-m);color:var(--text)}

@media (prefers-reduced-motion: reduce){
	.md-prozess-card,.md-neu-btn,.md-hg-btn{transition:none}
	.md-prozess-card:hover,.md-hg-btn:hover{transform:none}
}

/* ---------- Gemeinschaftsunterkünfte: Objekt-Übersicht & Objekt-Seite ---------- */
.uk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:14px}
.uk-card{overflow:hidden;display:flex;flex-direction:column;padding:0;text-decoration:none;color:inherit;transition:transform .15s var(--feder),box-shadow .15s ease}
.uk-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.uk-cover{height:120px;background-size:cover;background-position:center;background-color:var(--paper)}
.uk-cover-platzhalter{display:flex;align-items:center;justify-content:center;font-size:var(--t-4xl);background:linear-gradient(135deg,var(--ink2),var(--ink3))}
.uk-body{padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.uk-body b{font-size:var(--t-base);line-height:1.35}
.uk-body small{color:var(--muted);font-size:var(--t-s)}
.uk-body .act{margin-top:8px;font-size:var(--t-m);font-weight:700;color:var(--red-text);transition:transform .15s var(--feder)}
.uk-card:hover .act{transform:translateX(4px)}

.uk-info-card{padding:18px}
.uk-zeile{display:flex;gap:10px;font-size:var(--t-m);margin:0 0 10px;align-items:baseline;flex-wrap:wrap}
.uk-zeile:last-child{margin-bottom:0}
.uk-zeile b{flex-shrink:0;min-width:64px;color:var(--muted);font-weight:600;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:var(--ls-weit)}
.uk-zeile span,.uk-zeile a{color:var(--text)}
.uk-zeile a{text-decoration:none;font-weight:600}
.uk-zeile a:hover{color:var(--red-text)}
.uk-leer{color:var(--muted);font-size:var(--t-m);margin:0}
.uk-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.uk-liste li{position:relative;padding-left:15px;font-size:var(--t-m);line-height:1.5;color:var(--text)}
.uk-liste li::before{content:'';position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--red)}
.uk-titelbild{width:100%;max-height:360px;object-fit:cover;border-radius:var(--radius);margin-top:14px;display:block}

@media (prefers-reduced-motion: reduce){.uk-card{transition:none}.uk-card:hover{transform:none}.uk-card:hover .act{transform:none}}


/* ============================================================
   ==============  FEINSCHLIFF & NEUE BEWEGUNG  ===============
   ============================================================

   Dieser Block kam beim Umbau auf Skalen dazu. Er hält sich an
   dieselben drei Regeln wie der Bewegungsteil weiter oben:
   nichts wartet, nichts fliegt ein, „Bewegung reduzieren“
   schaltet alles ab. Neu ist vor allem, dass Bewegung, die
   bisher mit JavaScript nachgebaut wurde, jetzt der Browser
   selbst übernimmt – das ist ruhiger und läuft auch dann, wenn
   das Skript noch nicht geladen ist.
   ============================================================ */

/* ---------- Klebende Kopfleiste: feste Geometrie ----------
   Vorher stand im Hauptmenü top:52px, während die Kopfleiste je
   nach Scrollzustand 52 oder 58 Pixel hoch war. Im ungescrollten
   Zustand schob sich das Menü deshalb sechs Pixel unter die
   Leiste. Mit fester Mindesthöhe stimmt die Rechnung in beiden
   Zuständen – und bleibt auch dann richtig, wenn die Schrift
   einmal anders rendert. */
.suite{min-height:58px;transition:padding .25s var(--weich),min-height .25s var(--weich),box-shadow .25s ease,background .25s ease}
.tf-gescrollt .suite{min-height:var(--kopf-h)}
.mainnav{top:var(--kopf-h)}

/* ---------- Gewichte auf das, was die Schrift kann ----------
   Plex Sans reicht bis 700. Alles, was im Bestand mit 750 oder
   800 ausgezeichnet war, meint ohnehin „so fett wie möglich“. */
.hero h1,.z-zahl,.avatar-init,.geb-init,.pm-init,.mit-card .mi,
.member .foto-init,.tf-glocke-zahl{font-weight:700}

/* ============================================================
   1) SEITENWECHSEL
   Bisher blendete ein Skript die alte Seite per Opazität weg.
   Browser, die Ansichtsübergänge können, machen das selbst –
   sauber über den echten Seitenwechsel hinweg, ohne Flackern
   und ohne dass Kopfleiste und Fußbereich mitblitzen.
   ============================================================ */
@view-transition{navigation:auto}

/* Was auf jeder Seite gleich bleibt, wird nicht mitübergeblendet,
   sondern bleibt einfach stehen. */
.suite{view-transition-name:tf-kopf}
.mainnav{view-transition-name:tf-menue}
.site-footer{view-transition-name:tf-fuss}

/* Reine Überblendung, kein Einfliegen – siehe Regel 2 oben. */
::view-transition-old(root){animation:tf-vt-weg .16s ease both}
::view-transition-new(root){animation:tf-vt-her .24s var(--weich) both}
@keyframes tf-vt-weg{to{opacity:0}}
@keyframes tf-vt-her{from{opacity:0}}

/* Der Nachbau per Skript hält sich heraus, sobald der Browser
   seitenübergreifende Übergänge kann – die Umschaltung steht in
   assets/bewegung.js, damit es genau einen Ort dafür gibt. Ohne
   das Skript wird die Klasse .tf-geht nie gesetzt, die alte
   Überblendungsregel weiter oben läuft dann einfach leer. */

/* ============================================================
   2) AUFKLAPPEN MIT ECHTER HÖHE
   Der bisherige Effekt war eine Attrappe: Der Inhalt wurde
   eingeblendet, die Höhe sprang trotzdem hart. Mit
   interpolate-size kann der Browser von 0 auf auto rechnen,
   also klappt es wirklich auf.
   ============================================================ */
:root{interpolate-size:allow-keywords}

@supports selector(details::details-content){
	details::details-content{
		block-size:0;overflow:clip;opacity:0;
		transition:block-size .3s var(--weich),opacity .22s ease,content-visibility .3s allow-discrete;
	}
	details[open]::details-content{block-size:auto;opacity:1}
	/* Die alte Attrappe hat dann ausgedient. */
	.tf-bewegt details[open] > *:not(summary){animation:none}
}
summary{list-style-position:outside}
summary::marker{transition:none}

/* ============================================================
   3) EINBLENDENDE ÜBERLAGERUNGEN
   Suchvorschläge, Terminfenster und Rückmeldungen liegen im
   Ruhezustand auf display:none. Bisher waren sie deshalb
   schlagartig da. @starting-style gibt ihnen einen Anfangs-
   zustand, aus dem heraus sie sich bewegen dürfen.
   ============================================================ */
.suche-ergebnisse{
	opacity:1;transform:none;
	transition:opacity .16s ease,transform .16s var(--weich),
	           display .16s allow-discrete,overlay .16s allow-discrete;
}
.suche-ergebnisse[hidden]{display:none;opacity:0;transform:translateY(-6px)}
@starting-style{.suche-ergebnisse:not([hidden]){opacity:0;transform:translateY(-6px)}}

/* ============================================================
   4) DIE RÄNDER DER QUERSCROLLER
   Das Einsatz-Board und das Hauptmenü blenden ihre Ränder weich
   aus. Bisher galt das immer – auch ganz links, wo gar nichts
   mehr kommt. Die erste Einsatzkarte war dadurch dauerhaft
   angegraut, obwohl sie vollständig sichtbar war. Jetzt hängt
   die Weichzeichnung am tatsächlichen Scrollstand: Kante nur
   dort, wo wirklich noch etwas liegt.
   ============================================================ */
/* Beide Startwerte stehen auf 0. Das ist der Fall „passt ohnehin
   nebeneinander“: Dann läuft keine Zeitachse, die Werte bleiben auf
   0 und es wird gar nichts weichgezeichnet. Erst wenn wirklich
   gescrollt werden kann, setzen die beiden Animationen unten die
   Ränder – jeden für sich, je nach Scrollstand. */
@property --tf-rand-l{syntax:"<length>";inherits:false;initial-value:0px}
@property --tf-rand-r{syntax:"<length>";inherits:false;initial-value:0px}

/* Nur das Einsatz-Board. Die Hauptnavigation hatte diese Maske
   ebenfalls – und eine Maske schneidet alles ab, was außerhalb des
   Elementkastens gezeichnet wird. Das aufgeklappte Untermenü hängt
   genau dort: unterhalb der Leiste. Es öffnete sich, war aber
   unsichtbar. Die Leiste braucht die Maske auch gar nicht mehr, seit
   dort nur noch fünf Punkte stehen. */
.board-scroll{
	-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--tf-rand-l),
	        #000 calc(100% - var(--tf-rand-r)),transparent 100%);
	mask-image:linear-gradient(90deg,transparent 0,#000 var(--tf-rand-l),
	        #000 calc(100% - var(--tf-rand-r)),transparent 100%);
}
@supports (animation-timeline:scroll()){
	@media (prefers-reduced-motion:no-preference){
		.board-scroll{
			animation:tf-rand-anfang linear both,tf-rand-ende linear both;
			animation-timeline:scroll(self inline),scroll(self inline);
			animation-range:0 40px,calc(100% - 40px) 100%;
		}
	}
}
@keyframes tf-rand-anfang{from{--tf-rand-l:0px}to{--tf-rand-l:28px}}
@keyframes tf-rand-ende{from{--tf-rand-r:28px}to{--tf-rand-r:0px}}

/* ============================================================
   5) DIE KANTE
   Das Einsatz-Board hatte schon immer eine rote Kante links an
   jeder Karte. Sie ist das einzige Zeichen im Portal, das nichts
   schmückt, sondern etwas aussagt: hier läuft gerade etwas. Aus
   dem Einzelfall wird jetzt ein durchgehendes Mittel – aber nur
   dort, wo die Aussage auch stimmt. Eine Kante ohne laufenden
   Vorgang wäre eine Behauptung.
   ============================================================ */
/* Der Leerzustand im Einsatz-Board hatte bisher dieselbe rote Kante wie
   ein laufender Einsatz und dazu den grünen Status „Bereit“. Beides sagt
   „hier läuft etwas“ – auf einer Karte, die gerade meldet, dass nichts
   läuft. Die Kante wird deshalb grau und tritt zurück. */
.einsatz.leer{border-left-color:rgba(255,255,255,.22);background:rgba(255,255,255,.03)}
.einsatz.leer .ort{color:rgba(255,255,255,.45)}
.einsatz.leer .ev{font-weight:400;color:rgba(255,255,255,.62)}
/* Und sie hebt sich beim Draufzeigen nicht an: Eine Karte, die auf
   Berührung reagiert, verspricht, dass dahinter etwas liegt. */
.einsatz.leer:hover{transform:none;border-left-width:3px;background:rgba(255,255,255,.03)}

.kante{position:relative;padding-left:var(--sp-4)}
.kante::before{
	content:"";position:absolute;left:0;top:2px;bottom:2px;width:3px;
	border-radius:var(--r-voll);background:var(--marke-grau);
	transition:background .2s ease,width .2s var(--weich);
}
.kante.laeuft::before{background:var(--red)}
.kante.wartet::before{background:var(--amber)}
.kante.fertig::before{background:var(--green)}

/* ============================================================
   6) HANDBEDIENUNG
   Das Portal wird laut Aufgabenstellung zur Hälfte am Handy im
   Einsatz benutzt – oft im Stehen, oft mit Handschuh. Auf
   Geräten ohne Maus bekommen deshalb alle Bedienelemente eine
   Mindesthöhe, mit der man sie sicher trifft.
   ============================================================ */
@media (pointer:coarse){
	.btn,.chip,.kfilter,.up-filter a,.profil-reiter a,.tf-werkzeuge button,
	.kalender-nav,.pagination .page-numbers,.sec-link,.m-danke,.reaktion{
		min-height:44px;display:inline-flex;align-items:center;justify-content:center;
	}
	.mainnav li a{padding-top:15px;padding-bottom:12px}
}

/* ============================================================
   7) FORMULARE
   ============================================================ */
/* Mehrzeilige Felder wachsen mit dem Text mit, statt eine feste
   Höhe zu behalten, in der man scrollen muss. */
@supports (field-sizing:content){
	textarea{field-sizing:content;min-height:4lh;max-height:20lh}
}
/* Fehler erst zeigen, wenn jemand das Feld auch bearbeitet hat.
   :invalid allein würde ein leeres Pflichtfeld schon beim Öffnen
   rot einfärben – das liest sich wie ein Vorwurf, bevor überhaupt
   etwas passiert ist. */
input:user-invalid,select:user-invalid,textarea:user-invalid{
	border-color:var(--red) !important;box-shadow:0 0 0 4px rgba(196,17,48,.14) !important;
}
.f-field:has(:user-invalid) label{color:var(--red-text)}

/* ============================================================
   8) LESBARKEIT & KONTRAST
   ============================================================ */
/* Karten heben sich im Dunkelmodus allein über den Rahmen ab –
   ein Schatten trägt auf dunklem Grund nichts. Eine hauchdünne
   helle Oberkante übernimmt das, so wie es echtes Licht täte. */
@media (prefers-color-scheme:dark){
	:root:not([data-theme="light"]) .card,
	:root:not([data-theme="light"]) .quick,
	:root:not([data-theme="light"]) .news,
	:root:not([data-theme="light"]) .dept{
		background-image:linear-gradient(rgba(255,255,255,.045),rgba(255,255,255,0) 40%);
	}
}
:root[data-theme="dark"] .card,:root[data-theme="dark"] .quick,
:root[data-theme="dark"] .news,:root[data-theme="dark"] .dept{
	background-image:linear-gradient(rgba(255,255,255,.045),rgba(255,255,255,0) 40%);
}

/* Wer im Betriebssystem mehr Kontrast eingestellt hat, bekommt
   kräftigere Linien statt derselben zarten Grautöne. */
@media (prefers-contrast:more){
	:root{--line:#9AA1AC;--muted:#4A505A;--linie-stark:#14171C}
	.card,.quick,.news,.dept,.member,.form-card{border-width:2px}
	:focus-visible{outline-width:4px}
}

/* Im Kontrastmodus von Windows zeichnet das System selbst. Dann
   müssen wenigstens die Ränder da sein, die sonst die Farbe macht. */
@media (forced-colors:active){
	.card,.quick,.news,.dept,.btn,.chip,.tag,.einsatz{border:1px solid CanvasText}
	.btn{forced-color-adjust:none;background:ButtonFace;color:ButtonText}
	:focus-visible{outline:3px solid Highlight}
}

/* Fließtext liest sich in längeren Beiträgen ruhiger mit etwas
   mehr Durchschuss und begrenzter Zeilenlänge. */
.artikel-inhalt p,.beitrag-text p,.uk-text p{line-height:1.7;max-width:68ch}

/* ============================================================
   9) DRUCKGEFÜHL
   Jedes Bedienelement quittiert den Druck sofort. Der Wert ist
   bewusst klein: Es soll sich nach Widerstand anfühlen, nicht
   nach Wackelpudding.
   ============================================================ */
.chip:active,.kfilter:active,.quick:active,.tag:active,.reaktion:active,
.profil-reiter a:active,.up-filter a:active,.tf-werkzeuge button:active,
.kalender-nav:active,.m-danke:active{transform:scale(.975);transition-duration:0s}

/* ============================================================
   10) RUHEMODUS
   Steht bewusst zuletzt und überschreibt alles darüber.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
	@view-transition{navigation:none}
	/* Die Sammelregel ganz oben in dieser Datei setzt alle Dauern auf
	   nahezu null – sie gilt aber für *, und Ansichtsübergänge laufen in
	   einem eigenen Pseudo-Element-Baum, den * nicht erfasst. Ohne diese
	   drei Zeilen bliebe ausgerechnet die auffälligste Bewegung des
	   Portals im Ruhemodus an. Und sollte ein Browser @view-transition
	   innerhalb von @media nicht auswerten, greift wenigstens das hier. */
	::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){
		animation:none !important;mix-blend-mode:normal !important;
	}
	details::details-content{transition:none}
	.suche-ergebnisse{transition:none}
	.board-scroll{animation:none}
	.kante::before{transition:none}
	.chip:active,.kfilter:active,.quick:active,.tag:active,.reaktion:active,
	.profil-reiter a:active,.up-filter a:active,.tf-werkzeuge button:active,
	.kalender-nav:active,.m-danke:active{transform:none}
}

/* ============================================================
   ==================  HAUPTNAVIGATION  =======================
   ============================================================

   Das Portal hat rund 25 erreichbare Seiten. Als flache Reihe
   passte das auf keinen Bildschirm; auf dem Handy war es ein
   Querscroller, in dem man raten musste, was rechts noch kommt.

   Jetzt gibt es zwei Ausprägungen desselben Menüs:

     ab 900 Pixel   – Leiste mit Aufklappbereichen
     darunter       – ein Knopf, der eine Tafel über die ganze
                      Höhe öffnet, in der alles ausgeklappt
                      untereinander steht

   Beide bekommen dieselbe Ausgabe aus wp_nav_menu (siehe
   header.php), es gibt also keinen zweiten Pflegeort.
   ============================================================ */

/* ---------- Der Knopf für schmale Bildschirme ---------- */
.mainnav-knopf{
	display:none;align-items:center;gap:9px;margin:0 auto;
	background:none;border:0;color:var(--text);
	font-size:var(--t-m);font-weight:700;padding:13px 16px;
	border-radius:var(--r-s);transition:background .18s ease,color .18s ease;
}
.mainnav-knopf svg{flex:none}

/* ---------- Aufklappbereiche in der Leiste ----------
   Der Schalter steht als eigenes Element neben dem Link, nicht
   an seiner Stelle. Vorher fing das Skript den Klick auf den
   Elternpunkt ab – wer auf „Personal“ klickte, kam nie auf die
   Seite „Personal“, sondern immer nur ins Aufklappmenü. Wo es
   gar keine eigene Seite gibt (Adresse „#“), macht das Skript
   aus dem Link ganz einen Schalter. */
.mainnav-auf{
	background:none;border:0;padding:14px 8px 11px 2px;margin-left:-6px;
	color:var(--muted);line-height:1;border-bottom:3px solid transparent;
	transition:color .18s ease,transform .25s var(--weich);
}
.mainnav-auf svg{display:block;transition:transform .25s var(--weich)}
.mainnav-auf[aria-expanded="true"] svg{transform:rotate(180deg)}
.mainnav li.menu-item-has-children > a::after{content:none}
.mainnav li.offen > a,.mainnav li.offen > .mainnav-auf{color:var(--text)}

/* Der aufgeklappte Bereich. Er hängt an seinem Menüpunkt statt an
   festen Bildschirmkoordinaten – dadurch wandert er beim Scrollen
   mit, statt sich schließen zu müssen. */
.mainnav li{position:relative}
.mainnav .sub-menu{
	display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:300;
	min-width:246px;max-width:320px;
	background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
	box-shadow:var(--schatten-3);padding:8px;list-style:none;margin:0;
}
.mainnav li.offen > .sub-menu{display:block}
.mainnav .sub-menu li{display:block;position:static}
.mainnav .sub-menu li a{
	display:block;padding:10px 13px;border:0;border-radius:var(--r-s);
	color:var(--text);font-weight:600;font-size:var(--t-m);text-decoration:none;
	white-space:normal;
}
.mainnav .sub-menu li a::after{content:none}
.mainnav .sub-menu li.current-menu-item > a{color:var(--red-text);background:var(--red-soft)}

/* Der Bereich klappt auf, statt zu erscheinen. */
@media (prefers-reduced-motion:no-preference){
	.mainnav li.offen > .sub-menu{animation:tf-menue-auf .2s var(--weich) both}
	@keyframes tf-menue-auf{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}

/* Bereiche ohne eigene Seite werden ganz zum Schalter. */
.mainnav .mainnav-nurschalter{
	display:flex;align-items:center;gap:5px;
	background:none;border:0;font:inherit;cursor:pointer;
	padding:14px 14px 11px;white-space:nowrap;
	font-size:var(--t-m);font-weight:600;color:var(--muted);
	border-bottom:3px solid transparent;transition:color .18s ease,border-color .18s ease;
}
.mainnav .mainnav-nurschalter svg{transition:transform .25s var(--weich)}
.mainnav .mainnav-nurschalter[aria-expanded="true"]{color:var(--text)}
.mainnav .mainnav-nurschalter[aria-expanded="true"] svg{transform:rotate(180deg)}
/* Enthält der Bereich die Seite, auf der man gerade ist, bekommt er
   denselben roten Strich wie ein aktiver Punkt. Sonst weiß man auf
   Unterseiten nicht mehr, wo man sich befindet. */
.mainnav li.hat-aktuelle > .mainnav-nurschalter,
.mainnav li.hat-aktuelle > a{color:var(--text);border-bottom-color:var(--red-text)}

/* ============================================================
   DIE TAFEL FÜR SCHMALE BILDSCHIRME
   Ein <dialog> mit showModal(): Der Browser übernimmt damit von
   sich aus die Escape-Taste, den Hintergrund-Abschluss und die
   Tastaturführung, die man sonst von Hand nachbauen müsste.
   ============================================================ */
.menue-tafel{
	margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(360px,88vw);
	max-width:none;border:0;padding:0;overflow:hidden;
	background:var(--card);color:var(--text);
	border-left:1px solid var(--line);box-shadow:var(--schatten-3);
}
/* Der Aufbau gilt nur im geöffneten Zustand. Stünde display:flex
   auf .menue-tafel selbst, überschriebe es die Regel des Browsers
   dialog:not([open]){display:none} – Autoren-CSS schlägt das
   Standardblatt unabhängig von der Spezifität. Die Tafel stünde dann
   dauerhaft auf jeder Seite, ohne je geöffnet worden zu sein. */
.menue-tafel[open]{display:flex;flex-direction:column}

/* Der Einschub gilt nur fürs Öffnen. Eine Animation beim Schließen
   bräuchte einen Übergang auf display – und wenn der hakt, bleibt die
   Tafel stehen. Das ist genau der Fehler, den wir eben hatten. */
@media (prefers-reduced-motion:no-preference){
	.menue-tafel[open]{animation:tf-tafel-auf .22s var(--weich)}
	@keyframes tf-tafel-auf{from{transform:translateX(100%)}}
	.menue-tafel[open]::backdrop{animation:tf-tafel-grund .22s ease}
	@keyframes tf-tafel-grund{from{opacity:0}}
}
.menue-tafel::backdrop{background:rgba(10,13,18,.55);backdrop-filter:blur(2px)}
.menue-tafel-kopf{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	padding:16px 12px 16px 20px;border-bottom:1px solid var(--line);flex:none;
}
.menue-tafel-titel{font-size:var(--t-xs);font-weight:700;letter-spacing:var(--ls-label);
	text-transform:uppercase;color:var(--muted)}
.menue-tafel-zu{
	width:40px;height:40px;display:grid;place-items:center;flex:none;
	background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);
	color:var(--text);transition:color .18s ease,border-color .18s ease;
}
.menue-tafel-inhalt{flex:1;min-height:0;overflow-y:auto;padding:10px 12px 26px;overscroll-behavior:contain}

/* In der Tafel steht alles untereinander und offen. Ein Menü, in dem
   man erst aufklappen muss, um zu sehen, was es gibt, hilft genau dort
   am wenigsten, wo der Bildschirm klein ist. */
.menue-tafel-inhalt ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.menue-tafel-inhalt li{position:static}
.menue-tafel-inhalt > ul > li{margin-bottom:2px}
.menue-tafel-inhalt a{
	display:block;padding:13px 14px;border-radius:var(--r-s);
	color:var(--text);font-weight:600;font-size:var(--t-base);text-decoration:none;
	border-bottom:0;
}
.menue-tafel-inhalt a::after{content:none}
.menue-tafel-inhalt .current-menu-item > a{color:var(--red-text);background:var(--red-soft)}

/* Die Bereichsüberschrift ist kein Link, sondern eine Beschriftung –
   in der Tafel gibt es nichts aufzuklappen. */
.menue-tafel-inhalt .menu-item-has-children > a,
.menue-tafel-inhalt .menu-item-has-children > .mainnav-nurschalter{
	font-size:var(--t-xs);font-weight:700;letter-spacing:var(--ls-label);
	text-transform:uppercase;color:var(--muted);
	padding:18px 14px 6px;pointer-events:none;background:none;border:0;
	display:block;width:100%;text-align:left;
}
.menue-tafel-inhalt .sub-menu{
	display:block;position:static;background:none;border:0;box-shadow:none;
	padding:0;min-width:0;max-width:none;animation:none;
}
.menue-tafel-inhalt .sub-menu a{padding-left:14px}
.menue-tafel-inhalt .mainnav-auf{display:none}

/* ============================================================
   DER UMSCHALTPUNKT
   ============================================================ */
@media (max-width:899px){
	.mainnav-wrap{display:none}
	.mainnav-knopf{display:flex}
	/* display:flex würde sonst das hidden-Attribut aushebeln, mit dem
	   der Knopf bis zum Laden des Skripts wegbleibt. */
	.mainnav-knopf[hidden]{display:none}
	.mainnav{text-align:center}
}
@media (min-width:900px){
	.menue-tafel{display:none}

	/* Der Querscroller von früher muss weg: Ein aufgeklappter Bereich
	   liegt absolut in seinem Menüpunkt, und ein Elternteil mit
	   overflow-x:auto schneidet ihn ab – overflow-y rechnet der Browser
	   dabei automatisch mit. Genau deshalb hatte die alte Fassung feste
	   Bildschirmkoordinaten benutzt und musste beim Scrollen schließen.

	   Nötig ist der Scroller ohnehin nicht mehr: In der Leiste stehen
	   fünf Punkte. Sollten es doch einmal mehr werden, bricht die Zeile
	   um, statt rechts abgeschnitten zu werden. */
	.mainnav-wrap{overflow:visible}
	.mainnav ul{flex-wrap:wrap}
}

@media (hover:hover) and (pointer:fine){
	.mainnav-knopf:hover{background:var(--paper);color:var(--red-text)}
	.mainnav-auf:hover{color:var(--text)}
	.mainnav .mainnav-nurschalter:hover{color:var(--text)}
	.mainnav .sub-menu li a:hover{background:var(--paper);color:var(--red-text)}
	.menue-tafel-zu:hover{border-color:var(--red-text);color:var(--red-text)}
	.menue-tafel-inhalt a:hover{background:var(--paper);color:var(--red-text)}
}

@media (prefers-reduced-motion:reduce){
	.mainnav-auf svg,.mainnav .mainnav-nurschalter svg{transition:none}
	.menue-tafel::backdrop{backdrop-filter:none}
}

/* ============================================================
   SUCHE AUF SCHMALEN BILDSCHIRMEN

   Bis Version 50.6 war die Suche unter 720 Pixeln einfach
   ausgeblendet – ersatzlos. Für ein Portal, in dem man
   Formulare und Seiten sucht, ist das ausgerechnet dort ein
   Verlust, wo man am wenigsten Zeit zum Blättern hat: unterwegs
   am Einsatzort.

   Aufgeklappt wird dasselbe Feld, nicht ein zweites. Die
   Live-Suche in assets/suche.js hängt an festen IDs; eine Kopie
   hätte jede davon doppelt im Dokument. Verschoben wird also nur
   die Position, und das rein über CSS – dann geht auch beim
   Drehen des Geräts nichts kaputt.
   ============================================================ */
.suite-suche-knopf{
	display:none;width:34px;height:34px;flex:none;
	place-items:center;border-radius:var(--r-s);
	background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
	color:rgba(255,255,255,.85);
	transition:background .18s ease,border-color .18s ease,color .18s ease;
}

@media (max-width:720px){
	.suite-suche-knopf{display:grid}

	/* Zugeklappt bleibt es bei display:none aus der Regel weiter oben.
	   Aufgeklappt hängt das Feld unter der Leiste – als Überlagerung,
	   nicht als zweite Zeile: Eine zweite Zeile würde die Kopfleiste
	   höher machen, und darauf ist die klebende Position des
	   Hauptmenüs berechnet. */
	body.tf-suche-offen .suite-search{
		display:flex;position:absolute;left:12px;right:12px;top:calc(100% - 6px);
		max-width:none;margin:0;z-index:80;
		background:var(--ink2);border-color:rgba(255,255,255,.24);
		box-shadow:var(--schatten-3);padding:11px 14px;
	}
	body.tf-suche-offen .suite-search input{font-size:var(--t-base)}
	body.tf-suche-offen .suite-suche-knopf{
		background:var(--red);border-color:var(--red);color:#fff;
	}
}

@media (hover:hover) and (pointer:fine){
	.suite-suche-knopf:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3);color:#fff}
}

/* ============================================================
   FAHRGEMEINSCHAFTEN: ANFRAGEN

   Seit 50.8 steigt man nicht mehr direkt ein, sondern fragt an.
   Zwei neue Zustände in der Zeile: die eigene laufende Anfrage,
   und – nur für den Fahrer – die Liste der offenen Anfragen zu
   seiner Fahrt.

   Die Liste steht bewusst unter der jeweiligen Fahrt und nicht
   in einem eigenen Bereich: Entschieden wird dort, wo der
   Zusammenhang steht, nicht in einer Sammelliste, in der man
   erst nachsehen muss, worum es ging.
   ============================================================ */

/* ---------- Das Anfrage-Formular ---------- */
.fahrt-anfrage{position:relative}
.fahrt-anfrage > summary{list-style:none;cursor:pointer}
.fahrt-anfrage > summary::-webkit-details-marker{display:none}
.fahrt-anfrage form{
	display:flex;flex-direction:column;gap:7px;margin-top:9px;
	background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);
	padding:13px 14px;min-width:min(300px,74vw);text-align:left;
}
.fahrt-anfrage label{font-size:var(--t-s);font-weight:700;color:var(--stark)}
.fahrt-anfrage textarea{
	width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-s);
	font:inherit;font-size:var(--t-m);background:var(--card);color:var(--text);resize:vertical;
}
.fahrt-anfrage .f-hint{font-size:var(--t-xs);color:var(--muted);line-height:1.45}
.fahrt-anfrage .btn{align-self:flex-start}

/* ---------- Die offenen Anfragen beim Fahrer ---------- */
.fahrt-anfragen{
	padding:12px 18px 14px;border-bottom:1px solid var(--line);
	background:var(--amber-soft);
	display:flex;flex-direction:column;gap:9px;
}
.fahrt-anfragen-titel{
	font-size:var(--t-xs);font-weight:700;letter-spacing:var(--ls-label);
	text-transform:uppercase;color:var(--amber-text);
}
.fahrt-anfrage-zeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fahrt-anfrage-zeile form{margin:0}
.fahrt-av{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;display:block}
.fahrt-av-init{
	display:grid;place-items:center;font-size:var(--t-xs);font-weight:700;color:#fff;
	background:linear-gradient(135deg,var(--ink),var(--ink3));
}
.fahrt-anfrage-wer{flex:1;min-width:120px;display:flex;flex-direction:column;line-height:1.3}
.fahrt-anfrage-wer b{font-size:var(--t-m);font-weight:700}
.fahrt-anfrage-wer small{font-size:var(--t-xs);color:var(--muted);font-variant-numeric:tabular-nums}
.fahrt-anfrage-zeile .btn[disabled]{opacity:.5;cursor:not-allowed}

@media(max-width:640px){
	.fahrt-anfrage-wer{min-width:100%;order:-1}
	.fahrt-anfrage form{min-width:0;width:100%}
}

/* ---------- Fahrgemeinschaften: wer schon mitfährt ----------
   Für den Fahrer wird aus der Aufzählung eine Liste mit Aktion. Sie steht
   optisch ruhiger als die gelben offenen Anfragen darüber: Hier ist nichts
   zu entscheiden, hier ist etwas geregelt. Nur wenn wirklich jemand raus
   muss, klappt das Feld für die Nachricht auf. */
.fahrt-crew{
	padding:11px 18px 13px;border-bottom:1px solid var(--line);
	background:var(--paper);display:flex;flex-direction:column;gap:8px;
}
.fahrt-crew-titel{
	font-size:var(--t-xs);font-weight:700;letter-spacing:var(--ls-label);
	text-transform:uppercase;color:var(--muted);
}
.fahrt-crew-zeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fahrt-crew-wer{flex:1;min-width:110px}
.fahrt-crew-wer b{font-size:var(--t-m);font-weight:600}

.fahrt-raus > summary{list-style:none;cursor:pointer}
.fahrt-raus > summary::-webkit-details-marker{display:none}
.fahrt-raus form{
	display:flex;flex-direction:column;gap:7px;margin-top:9px;
	background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
	padding:13px 14px;min-width:min(320px,74vw);
}
.fahrt-raus label{font-size:var(--t-s);font-weight:700;color:var(--stark)}
.fahrt-raus textarea{
	width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-s);
	font:inherit;font-size:var(--t-m);background:var(--card);color:var(--text);resize:vertical;
}
.fahrt-raus .f-hint{font-size:var(--t-xs);color:var(--muted);line-height:1.45}
.fahrt-raus .btn{align-self:flex-start}

@media(max-width:640px){
	.fahrt-crew-wer{min-width:100%}
	.fahrt-raus form{min-width:0;width:100%}
}

/* ---------- Fahrgemeinschaften: Filterleiste ----------
   Die Zahl am Filter ist keine Zierde: Sie sagt vorher, ob sich das
   Klicken lohnt. „Mit Fahrtangebot 0“ erspart den Klick ins Leere. */
.fahrt-filter{margin-top:0}
.fahrt-filter .chip{display:inline-flex;align-items:center;gap:8px}
.chip-zahl{
	font-family:"Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;
	font-size:var(--t-2xs);font-weight:600;line-height:1;
	background:var(--paper);color:var(--muted);
	border-radius:var(--r-voll);padding:3px 7px;
}
.chip.active .chip-zahl{background:rgba(255,255,255,.16);color:inherit}

/* ---------- Deine Fahrten: die Rolle als Marke ----------
   Steht in einer <small>-Zeile und muss sich deshalb an der Grundlinie
   des Fließtexts ausrichten, nicht daneben schweben. */
.doc small .tag{
	display:inline-block;vertical-align:baseline;margin-right:4px;
	text-transform:none;letter-spacing:0;font-size:var(--t-2xs);
}

/* ============================================================
   ================  CHAT: KARTE & BLASEN  ====================
   ============================================================ */

/* ---------- Die vorläufige Blase ----------
   Steht da, sobald man Senden drückt – nicht erst, wenn der Server
   geantwortet hat. Sie sieht aus wie eine fertige Blase, ist aber
   leicht zurückgenommen und trägt statt des Häkchens eine Uhr. Kommt
   die Bestätigung, wird sie durch die echte ersetzt; bleibt sie aus,
   färbt sie sich und bietet an, es noch einmal zu versuchen. */
.blase-wartet{opacity:.72}
.blase-uhr{font-family:var(--emoji);font-size:var(--t-2xs);opacity:.8}
.blase-fehler{background:var(--red-soft);opacity:1}
.blase-nochmal{
	display:block;width:100%;margin-top:6px;text-align:left;
	background:none;border:0;padding:0;cursor:pointer;
	font-size:var(--t-xs);font-weight:700;color:var(--red-text);
	text-decoration:underline;text-underline-offset:2px;
}

/* Neue Blasen setzen sich, statt zu erscheinen. Sehr kurz – im Gespräch
   will man lesen, nicht zusehen. */
@media (prefers-reduced-motion:no-preference){
	.blase{animation:tf-blase .16s var(--weich) both}
	@keyframes tf-blase{from{opacity:0;transform:translateY(6px)}}
}

/* ---------- Der Kopf als Schalter ----------
   Bild und Name führen zur Profilkarte. Vorher war der Kopf reine
   Beschriftung; jetzt ist er ein Bedienelement und muss auch so
   aussehen und für die Tastatur erreichbar sein. */
.chat-profil-auf{
	background:none;border:0;padding:4px 8px;margin-left:-8px;
	text-align:left;min-width:0;flex:1;border-radius:var(--r-s);
	color:inherit;font:inherit;cursor:pointer;
	transition:background .18s ease;
}
.chat-profil-auf b{display:block;font-size:var(--t-base);font-weight:600}

/* ---------- Die Profilkarte ---------- */
.chat-profil{width:min(370px,92vw);padding:0;overflow:hidden}
.cp-inhalt{padding:26px 24px 22px;text-align:center}
.cp-laedt{color:var(--muted);font-size:var(--t-m);padding:26px 0}
.cp-kopf{display:flex;flex-direction:column;align-items:center;gap:9px}
.cp-bild{width:96px;height:96px;border-radius:50%;object-fit:cover;
	border:3px solid var(--line);display:block}
.cp-bild-init{
	display:grid;place-items:center;font-size:var(--t-2xl);font-weight:700;color:#fff;
	background:linear-gradient(135deg,var(--ink),var(--ink3));border-color:transparent;
}
.cp-kopf h3{font-size:var(--t-xl);font-weight:700;letter-spacing:var(--ls-eng);margin:2px 0 0}
.cp-kopf .funktionen{justify-content:center;margin-top:2px}

.cp-zeile{
	display:flex;align-items:center;gap:11px;text-align:left;
	margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
}
.cp-ic{flex:none;font-size:var(--t-l);font-family:var(--emoji)}
.cp-zeile span span,.cp-zeile > span:last-child{display:flex;flex-direction:column;line-height:1.35}
.cp-zeile b{font-size:var(--t-s);font-weight:700}
.cp-zeile small{color:var(--muted);font-size:var(--t-s)}
.cp-danke{width:100%;justify-content:center;margin-top:18px}

@media (hover:hover) and (pointer:fine){
	.chat-profil-auf:hover{background:rgba(127,127,127,.12)}
}

/* ============================================================
   =========  CHAT: ANTWORTEN, TON, ERWÄHNUNG, SUCHE  =========
   ============================================================ */

/* ---------- Antworten mit Zitat ---------- */
.blase{padding-right:14px}
.blase-antworten{
	position:absolute;top:2px;right:2px;width:26px;height:26px;
	display:grid;place-items:center;border:0;border-radius:var(--r-voll);
	background:var(--chat-leiste);color:var(--chat-mute);
	opacity:0;cursor:pointer;transition:opacity .15s ease,color .15s ease;
}
.blase-antworten:focus-visible{opacity:1}
/* Auf Touch gibt es kein Draufzeigen. Dort öffnet ein langer Druck auf die
   Blase dasselbe – der Knopf bleibt weg, statt dauerhaft im Weg zu stehen. */
@media (hover:hover) and (pointer:fine){
	.blase:hover .blase-antworten{opacity:1}
	.blase-antworten:hover{color:var(--red-text)}
}
@media (pointer:coarse){ .blase-antworten{display:none} }

.blase-zitat{
	display:flex;flex-direction:column;gap:1px;
	border-left:3px solid var(--red);border-radius:var(--r-xs);
	background:rgba(127,127,127,.12);
	padding:6px 9px;margin:0 0 5px;
}
.blase-zitat.eigen{border-left-color:var(--marke-grau)}
.blase-zitat b{font-size:var(--t-xs);font-weight:700;color:var(--red-text)}
.blase-zitat.eigen b{color:var(--chat-mute)}
.blase-zitat span{font-size:var(--t-s);color:var(--chat-mute);line-height:1.35;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Der Balken über der Eingabe, solange man antwortet */
.chat-zitat-leiste{
	display:flex;align-items:center;gap:10px;flex:none;
	padding:9px 14px;background:var(--chat-leiste);
	border-top:1px solid var(--chat-rand);
}
.chat-zitat-leiste[hidden]{display:none}
.chat-zitat-strich{width:3px;align-self:stretch;border-radius:var(--r-voll);background:var(--red);flex:none}
.chat-zitat-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.chat-zitat-text b{font-size:var(--t-xs);font-weight:700;color:var(--red-text)}
.chat-zitat-text small{font-size:var(--t-s);color:var(--chat-mute);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-zitat-leiste > button{
	flex:none;width:30px;height:30px;border:0;border-radius:var(--r-voll);
	background:none;color:var(--chat-mute);font-size:var(--t-l);cursor:pointer;
}

/* Beim Springen aus der Suche kurz hervorheben */
.blase-gefunden{outline:2px solid var(--red);outline-offset:2px}

/* ---------- Sprachnachricht ---------- */
.blase-ton{margin:2px 0 4px;min-width:min(260px,58vw)}
.blase-ton audio{width:100%;height:38px;display:block}
.blase-ton-hol{
	display:inline-block;font-size:var(--t-m);font-weight:600;
	color:var(--red-text);text-decoration:underline;text-underline-offset:2px;
}
.blase-ton small{display:block;margin-top:3px;font-size:var(--t-xs);color:var(--chat-mute);line-height:1.4}

.chat-mikro[hidden]{display:none}
.chat-eingabe.nimmt-auf textarea,
.chat-eingabe.nimmt-auf [data-emoji-auf],
.chat-eingabe.nimmt-auf [data-datei-auf]{opacity:.3;pointer-events:none}
.chat-eingabe.nimmt-auf .chat-mikro{color:var(--red);transform:scale(1.12)}

.chat-aufnahme{
	display:flex;align-items:center;gap:11px;flex:none;
	padding:10px 14px;background:var(--red-soft);
	border-top:1px solid var(--chat-rand);
}
.chat-aufnahme[hidden]{display:none}
.chat-aufnahme-punkt{
	width:10px;height:10px;border-radius:50%;background:var(--red);flex:none;
	animation:tf-aufnahme 1.2s ease-in-out infinite;
}
@keyframes tf-aufnahme{0%,100%{opacity:1}50%{opacity:.3}}
.chat-aufnahme-zeit{font-size:var(--t-m);font-weight:700;color:var(--red-text);flex:none}
.chat-aufnahme-hinweis{flex:1;min-width:0;font-size:var(--t-xs);color:var(--red-text);opacity:.85;line-height:1.35}
.chat-aufnahme-weg{
	flex:none;border:0;background:none;cursor:pointer;
	font-size:var(--t-s);font-weight:700;color:var(--red-text);text-decoration:underline;
}
@media (prefers-reduced-motion:reduce){ .chat-aufnahme-punkt{animation:none} }

/* ---------- @-Erwähnung ---------- */
.chat-nennen{
	display:flex;flex-direction:column;flex:none;max-height:200px;overflow-y:auto;
	background:var(--chat-leiste);border-top:1px solid var(--chat-rand);
}
.chat-nennen[hidden]{display:none}
.chat-nennen button{
	text-align:left;border:0;background:none;cursor:pointer;
	padding:11px 16px;font-size:var(--t-m);font-weight:600;color:var(--text);
}

/* ---------- Suche im Verlauf ---------- */
.chat-suche{flex:none;background:var(--chat-leiste);border-bottom:1px solid var(--chat-rand);
	display:flex;flex-direction:column;max-height:52%}
.chat-suche[hidden]{display:none}
.chat-suche-kopf{display:flex;align-items:center;gap:8px;padding:10px 14px;flex:none}
.chat-suche-kopf input{
	flex:1;min-width:0;padding:9px 12px;border:1px solid var(--chat-rand);
	border-radius:var(--r-m);font:inherit;font-size:var(--t-m);
	background:var(--chat-papier);color:var(--text);
}
.chat-suche-kopf button{
	flex:none;width:32px;height:32px;border:0;border-radius:var(--r-voll);
	background:none;color:var(--chat-mute);font-size:var(--t-l);cursor:pointer;
}
.chat-suche-treffer{flex:1;min-height:0;overflow-y:auto;padding:0 8px 10px}
.chat-suche-leer{padding:14px 8px;color:var(--chat-mute);font-size:var(--t-m);text-align:center}
.chat-suche-zeile{
	display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;
	border:0;background:none;cursor:pointer;padding:10px 10px;border-radius:var(--r-s);
}
.chat-suche-zeile b{font-size:var(--t-xs);font-weight:700;color:var(--red-text)}
.chat-suche-zeile span{font-size:var(--t-m);color:var(--text);line-height:1.4}
.chat-suche-weit{color:var(--chat-mute);font-size:var(--t-xs);margin-top:3px}

@media (hover:hover) and (pointer:fine){
	.chat-nennen button:hover,.chat-suche-zeile:hover{background:var(--chat-papier)}
	.chat-zitat-leiste > button:hover,.chat-suche-kopf button:hover{color:var(--red-text)}
}

/* Mikrofon vorhanden, aber gesperrt – meist, weil die Seite über http
   läuft. Der Knopf bleibt sichtbar und erklärt beim Antippen, warum. */
.chat-mikro-aus{opacity:.45}

/* =====================================================================
   DER TEAMFLEX HELFER IM CHAT

   Er sitzt in derselben Liste und in denselben Blasen wie alle anderen
   Gespräche – das ist Absicht, denn er ist ein Gesprächspartner und
   keine zweite Oberfläche. Unterschieden wird er nur an zwei Stellen:
   an seinem Bild in der Liste und an den Auswahlknöpfen unter seinen
   Nachrichten.
   ===================================================================== */

/* Sein Bild: kein Namenskürzel, sondern ein Zeichen auf ruhigem Grund.
   Zwei Initialen würden ihn wie eine Kollegin aussehen lassen, die man
   irgendwann einmal getroffen hat. */
.chat-bild.chat-helfer{
	background:var(--red-soft);color:var(--red-text);
	font-family:var(--emoji);font-size:var(--t-l);font-weight:400;
}
.chat-eintrag-helfer b::after{
	content:"Assistent";
	margin-left:7px;padding:1px 7px;border-radius:var(--r-voll);
	background:var(--paper);color:var(--muted);
	font-size:var(--t-2xs);font-weight:600;letter-spacing:var(--ls-weit);
	text-transform:uppercase;vertical-align:middle;
}

/* Die Auswahlknöpfe unter einer Helfer-Nachricht.
   Sie sitzen in der Blase, nicht darunter: Sie gehören zu dieser einen
   Nachricht, und im Verlauf stehen später weitere. Frei schwebend wäre
   nach drei Fragen nicht mehr klar, zu welcher sie gehören. */
.blase-wahl{
	display:flex;flex-wrap:wrap;gap:6px;
	margin:10px 0 2px;padding-top:10px;
	border-top:1px solid var(--line);
}
.blase-wahl-knopf{
	display:inline-flex;align-items:center;
	padding:7px 13px;border-radius:var(--r-voll);
	border:1px solid var(--line);background:var(--card);
	color:var(--text);font:inherit;font-size:var(--t-s);font-weight:600;
	text-align:left;line-height:1.35;cursor:pointer;
	transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.blase-wahl-knopf:active{transform:translateY(1px)}

@media (hover:hover) and (pointer:fine){
	.blase-wahl-knopf:hover{border-color:var(--red);background:var(--red-soft)}
}

@media (max-width:640px){
	.blase-wahl{flex-direction:column;align-items:stretch}
	.blase-wahl-knopf{width:100%;justify-content:flex-start}
}

@media (prefers-reduced-motion:reduce){
	.blase-wahl-knopf{transition:none}
}

/* =====================================================================
   DIE BEGRÜSSUNG IM HERO

   Das Datum steht klein und in Versalien als Augenbraue – an der Stelle,
   an der vorher „WILLKOMMEN IM MITARBEITERPORTAL“ stand. Darunter der
   Gruß in Satzgröße, mit dem Namen als stärkstem Teil: Die Tageszeit ist
   austauschbar, der Name ist der Grund, warum da überhaupt etwas steht.

   Deshalb ist der Gruß selbst zurückgenommen (helles Grau, normales
   Gewicht) und der Name voll weiß und schwer. Beides gleich stark zu
   setzen hätte die Zeile nur größer gemacht, nicht deutlicher.
   ===================================================================== */
.hero-gruss{
	display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;
	margin:0 0 20px;
	font-size:clamp(var(--t-xl),2.9vw,var(--t-3xl));
	font-weight:500;letter-spacing:var(--ls-titel);line-height:1.18;
	color:rgba(255,255,255,.68);
}

/* Eigene Zeile über dem Gruß – flex-basis statt eines zweiten Elements,
   damit der Gruß auf schmalen Bildschirmen weiter umbrechen darf. */
.hero-gruss-datum{
	flex-basis:100%;
	margin-bottom:6px;
	font-size:var(--t-xs);font-weight:600;
	letter-spacing:var(--ls-label);text-transform:uppercase;
	color:rgba(255,255,255,.5);
}

.hero-gruss-name{color:#fff;font-weight:750}
.hero-gruss-ic{font-family:var(--emoji);font-size:.9em;line-height:1}

/* Am Geburtstag wärmer, aber ohne Konfetti: Das helle Sandgelb steht im
   Portal ohnehin für Hinweise und hat auf dem dunklen Hero genug Kontrast. */
.hero-gruss.feiert .hero-gruss-name{color:var(--amber-soft)}

@media (max-width:640px){
	.hero-gruss{gap:0 10px;margin-bottom:16px}
	.hero-gruss-datum{margin-bottom:4px}
}