/* ============================================================
   BeDoE-Orga-App · Design-System (hell + dunkel, minimalistisch)
   ============================================================ */
@font-face{
  font-family:"tabler-icons";
  font-style:normal;font-weight:400;font-display:block;
  src:url("assets/tabler.woff2?f=4") format("woff2");
}
.ti{font-family:"tabler-icons"!important;speak:none;font-style:normal;font-weight:400;
  font-variant:normal;text-transform:none;line-height:1;display:inline-block;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.ti-abc:before{content:"\f567"}.ti-activity:before{content:"\ed23"}.ti-adjustments-horizontal:before{content:"\ec38"}.ti-alert-circle:before{content:"\ea05"}.ti-alert-triangle:before{content:"\ea06"}.ti-arrow-back-up:before{content:"\eb77"}.ti-arrow-left:before{content:"\ea19"}.ti-arrow-right:before{content:"\ea1f"}.ti-arrow-up-right:before{content:"\ea24"}.ti-bandage:before{content:"\eb7a"}.ti-bell:before{content:"\ea35"}.ti-bell-ringing:before{content:"\ed07"}.ti-book:before{content:"\ea39"}.ti-book-2:before{content:"\efc5"}.ti-building-warehouse:before{content:"\ebe3"}.ti-bulb:before{content:"\ea51"}.ti-calculator:before{content:"\eb80"}.ti-calendar:before{content:"\ea53"}.ti-calendar-event:before{content:"\ea52"}.ti-calendar-off:before{content:"\ee1f"}.ti-calendar-plus:before{content:"\ebba"}.ti-calendar-star:before{content:"\f830"}.ti-calendar-stats:before{content:"\ee20"}.ti-calendar-user:before{content:"\fd1f"}.ti-camera:before{content:"\ea54"}.ti-camera-off:before{content:"\ecee"}.ti-camera-plus:before{content:"\ec3b"}.ti-car:before{content:"\ebbb"}.ti-certificate:before{content:"\ed76"}.ti-chart-bar:before{content:"\ea59"}.ti-check:before{content:"\ea5e"}.ti-checks:before{content:"\ebaa"}.ti-chevron-down:before{content:"\ea5f"}.ti-chevron-left:before{content:"\ea60"}.ti-chevron-right:before{content:"\ea61"}.ti-chevron-up:before{content:"\ea62"}.ti-circle-check:before{content:"\ea67"}.ti-circle-half-2:before{content:"\eff3"}.ti-circle-x:before{content:"\ea6a"}.ti-clipboard-check:before{content:"\ea6c"}.ti-clock:before{content:"\ea70"}.ti-clock-exclamation:before{content:"\f847"}.ti-clock-hour-4:before{content:"\f319"}.ti-cloud:before{content:"\ea76"}.ti-cloud-rain:before{content:"\ea72"}.ti-copy:before{content:"\ea7a"}.ti-database-export:before{content:"\ee6e"}.ti-device-floppy:before{content:"\eb62"}.ti-device-laptop:before{content:"\eb64"}.ti-device-mobile:before{content:"\ea8a"}.ti-door-enter:before{content:"\ef4c"}.ti-dots:before{content:"\ea95"}.ti-download:before{content:"\ea96"}.ti-drone:before{content:"\ed79"}.ti-edit:before{content:"\ea98"}.ti-external-link:before{content:"\ea99"}.ti-eye:before{content:"\ea9a"}.ti-file:before{content:"\eaa4"}.ti-file-check:before{content:"\ea9c"}.ti-file-off:before{content:"\ecf2"}.ti-flag:before{content:"\eaa6"}.ti-folder:before{content:"\eaad"}.ti-folder-plus:before{content:"\eaab"}.ti-gavel:before{content:"\ef90"}.ti-heart-rate-monitor:before{content:"\ef61"}.ti-home:before{content:"\eac1"}.ti-id:before{content:"\eac3"}.ti-key:before{content:"\eac7"}.ti-license:before{content:"\ebc0"}.ti-link:before{content:"\eade"}.ti-lock:before{content:"\eae2"}.ti-login-2:before{content:"\fc76"}.ti-logout:before{content:"\eba8"}.ti-logout-2:before{content:"\fa7e"}.ti-map-2:before{content:"\eae7"}.ti-map-pin:before{content:"\eae8"}.ti-mars:before{content:"\ec80"}.ti-medal:before{content:"\ec78"}.ti-message:before{content:"\eaef"}.ti-message-2:before{content:"\eaec"}.ti-message-circle:before{content:"\eaed"}.ti-messages:before{content:"\eb6c"}.ti-microphone:before{content:"\eaf0"}.ti-moon:before{content:"\eaf8"}.ti-notebook:before{content:"\eb96"}.ti-package:before{content:"\eaff"}.ti-packages:before{content:"\f2c9"}.ti-palette:before{content:"\eb01"}.ti-pencil:before{content:"\eb04"}.ti-photo:before{content:"\eb0a"}.ti-plane:before{content:"\eb6f"}.ti-plus:before{content:"\eb0b"}.ti-point:before{content:"\eb0c"}.ti-printer:before{content:"\eb0e"}.ti-radio:before{content:"\ef2d"}.ti-refresh:before{content:"\eb13"}.ti-rosette:before{content:"\f599"}.ti-run:before{content:"\ec82"}.ti-school:before{content:"\ecf7"}.ti-search:before{content:"\eb1c"}.ti-send:before{content:"\eb1e"}.ti-settings:before{content:"\eb20"}.ti-shield:before{content:"\eb24"}.ti-shield-bolt:before{content:"\f9c0"}.ti-shield-check:before{content:"\eb22"}.ti-shirt:before{content:"\ec0a"}.ti-star:before{content:"\eb2e"}.ti-stretching:before{content:"\f2db"}.ti-sun:before{content:"\eb30"}.ti-switch-horizontal:before{content:"\eb31"}.ti-table:before{content:"\eba1"}.ti-target:before{content:"\eb35"}.ti-tool:before{content:"\eb40"}.ti-trash:before{content:"\eb41"}.ti-upload:before{content:"\eb47"}.ti-urgent:before{content:"\eb48"}.ti-user:before{content:"\eb4d"}.ti-user-plus:before{content:"\eb4b"}.ti-users:before{content:"\ebf2"}.ti-venus:before{content:"\ec86"}.ti-video:before{content:"\ed22"}.ti-wind:before{content:"\ec34"}.ti-world:before{content:"\eb54"}.ti-x:before{content:"\eb55"}

/* ---------- Tokens ---------- */
:root{
  --accent:#42C0FB;            /* wird je Nutzer überschrieben */
  --accent-ink:#08243a;        /* lesbarer Text auf Akzentfläche */
  --bg:#EEF1F6; --bg-2:#E7ECF3;
  --surface:#FFFFFF; --surface-2:#F6F8FB; --info-tint:#F5ECE3;
  --text:#171F2B; --muted:#69748450; --muted-1:#697484;
  --border:#E4E9F0; --border-2:#EDF1F6; --upl-cell-bd:#000000; --upl-num-col:#171F2B;
  --upl-row-sep:#E9EDF3; --upl-we:rgba(99,116,140,.10); --upl-today:rgba(62,143,224,.15); --upl-band:#FAFBFD;
  --shadow:0 1px 2px rgba(20,30,48,.05),0 6px 20px rgba(20,30,48,.06);
  --shadow-lg:0 8px 30px rgba(20,30,48,.14);
  --r:18px; --r-sm:12px; --r-lg:26px;
  --green:#2FA86A; --amber:#E8A13A; --red:#E2604F; --blue:#3E8FE0; --violet:#8B6DEF;
  --safe-top:env(safe-area-inset-top,0px); --safe-bot:env(safe-area-inset-bottom,0px);
}
[data-theme="dark"]{
  --accent-ink:#08243a;
  --bg:#0C1320; --bg-2:#0A111C;
  --surface:#152033; --surface-2:#1B2840; --info-tint:#152033;
  --text:#ECF1F8; --muted-1:#93A1B5;
  --border:#243246; --border-2:#1E2B3D;
  --upl-num-col:#9FB0C6; --upl-row-sep:#222F43; --upl-we:rgba(150,170,200,.08); --upl-today:rgba(66,192,251,.15); --upl-band:rgba(255,255,255,.018);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 10px 36px rgba(0,0,0,.5);
}
/* Sand – warmes Hell */
[data-theme="sand"]{
  --bg:#F2EDE3; --bg-2:#EAE3D5;
  --surface:#FFFDF8; --surface-2:#F6F0E5; --info-tint:#E7EEE9;
  --text:#2A2419; --muted:#7A706050; --muted-1:#7A7060;
  --border:#E4DBC9; --border-2:#EFE9DC;
  --upl-num-col:#2A2419; --upl-row-sep:#E8E0D0; --upl-we:rgba(120,108,90,.10); --upl-today:rgba(11,77,162,.12); --upl-band:#FBF8F1;
}
/* Duderstadt – Stadtfarben Blau/Rot (Akzent wird per JS auf Blau gesetzt) */
[data-theme="duderstadt"]{
  --bg:#ECF1F8; --bg-2:#E0E8F4;
  --surface:#FFFFFF; --surface-2:#F1F6FD; --info-tint:#FBE7E7;
  --text:#152339; --muted:#5C6B8650; --muted-1:#5C6B86;
  --border:#D6E1F0; --border-2:#E8EEF8;
  --red:#C8102E; --blue:#0B4DA2;
  --upl-num-col:#152339; --upl-row-sep:#E2EAF5; --upl-we:rgba(11,77,162,.06); --upl-today:rgba(11,77,162,.13); --upl-band:#F7FAFE;
}
/* Mitternacht – tiefes Marineblau (dunkel) */
[data-theme="mitternacht"]{
  --accent-ink:#08243a;
  --bg:#080C1A; --bg-2:#05080F;
  --surface:#121A33; --surface-2:#192448; --info-tint:#121A33;
  --text:#E9EEFB; --muted-1:#8B9AC4;
  --border:#23304F; --border-2:#1A2440;
  --upl-num-col:#9FB0D6; --upl-row-sep:#212E4C; --upl-we:rgba(150,170,220,.08); --upl-today:rgba(66,192,251,.16); --upl-band:rgba(255,255,255,.02);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.42);
  --shadow-lg:0 10px 36px rgba(0,0,0,.55);
}
/* Schiefer – neutrales Graphit (dunkel) */
[data-theme="schiefer"]{
  --accent-ink:#08243a;
  --bg:#16171B; --bg-2:#101115;
  --surface:#1F2127; --surface-2:#282B33; --info-tint:#1F2127;
  --text:#ECEDF0; --muted-1:#9A9DA6;
  --border:#31343D; --border-2:#262931;
  --upl-num-col:#A9ACB5; --upl-row-sep:#2D303A; --upl-we:rgba(160,162,170,.07); --upl-today:rgba(66,192,251,.14); --upl-band:rgba(255,255,255,.02);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.42);
  --shadow-lg:0 10px 36px rgba(0,0,0,.55);
}
/* Wald – ruhiges Salbeigrün (hell, Akzent Tannengrün) */
[data-theme="wald"]{
  --bg:#ECF2EC; --bg-2:#DFEBE0;
  --surface:#FFFFFF; --surface-2:#F1F7F1; --info-tint:#F7ECE1;
  --text:#1B2A20; --muted:#5E706450; --muted-1:#5E7064;
  --border:#D5E3D7; --border-2:#E7F0E8;
  --green:#2F8E58;
  --upl-num-col:#1B2A20; --upl-row-sep:#E2EDE3; --upl-we:rgba(47,125,84,.07); --upl-today:rgba(47,125,84,.13); --upl-band:#F6FBF6;
}
/* Ozean – frisches Petrol/Türkis (hell, Akzent Teal) */
[data-theme="ozean"]{
  --bg:#E9F3F4; --bg-2:#DAEBED;
  --surface:#FFFFFF; --surface-2:#EFF8F9; --info-tint:#FBEBE2;
  --text:#14272B; --muted:#56737A50; --muted-1:#56737A;
  --border:#CFE4E7; --border-2:#E4F0F1;
  --blue:#0E7C86;
  --upl-num-col:#14272B; --upl-row-sep:#DDEBED; --upl-we:rgba(14,124,134,.07); --upl-today:rgba(14,124,134,.13); --upl-band:#F4FBFB;
}
/* Lavendel – sanftes Flieder (hell, Akzent Violett) */
[data-theme="lavendel"]{
  --bg:#F0EEF8; --bg-2:#E6E2F3;
  --surface:#FFFFFF; --surface-2:#F5F2FC; --info-tint:#F4F0DF;
  --text:#221E33; --muted:#6A648050; --muted-1:#6A6480;
  --border:#DED9EE; --border-2:#ECE8F7;
  --violet:#6C5CB8;
  --upl-num-col:#221E33; --upl-row-sep:#E5E0F2; --upl-we:rgba(108,92,184,.07); --upl-today:rgba(108,92,184,.13); --upl-band:#F8F6FD;
}
/* Rosé – warmes Altrosa (hell, Akzent Beere) */
[data-theme="rose"]{
  --bg:#F7ECEC; --bg-2:#F1DEDF;
  --surface:#FFFFFF; --surface-2:#FCF1F1; --info-tint:#E8F2EA;
  --text:#2E1F22; --muted:#7C606650; --muted-1:#7C6066;
  --border:#EED7D9; --border-2:#F7E7E8;
  --red:#BC5A72;
  --upl-num-col:#2E1F22; --upl-row-sep:#F0DEE0; --upl-we:rgba(188,90,114,.07); --upl-today:rgba(188,90,114,.12); --upl-band:#FCF6F6;
}
/* Tann – tiefes Waldgrün (dunkel, Akzent Minze) */
[data-theme="tann"]{
  --accent-ink:#08243a;
  --bg:#0C1611; --bg-2:#08110D;
  --surface:#142219; --surface-2:#1B2E22; --info-tint:#142219;
  --text:#E7F1EA; --muted-1:#8FA899;
  --border:#243D2E; --border-2:#1B2E22;
  --green:#5FC58B;
  --upl-num-col:#9FC6AE; --upl-row-sep:#223A2C; --upl-we:rgba(150,200,170,.08); --upl-today:rgba(95,197,139,.16); --upl-band:rgba(255,255,255,.02);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.42);
  --shadow-lg:0 10px 36px rgba(0,0,0,.55);
}
/* Wein – tiefes Burgund (dunkel, Akzent Rosé) */
[data-theme="wein"]{
  --accent-ink:#2a0e16;
  --bg:#1A0E13; --bg-2:#120A0E;
  --surface:#2A1820; --surface-2:#35202A; --info-tint:#2A1820;
  --text:#F4E7EC; --muted-1:#C29AA8;
  --border:#432934; --border-2:#341F28;
  --red:#E08098;
  --upl-num-col:#D6A8B6; --upl-row-sep:#3E2630; --upl-we:rgba(220,150,175,.08); --upl-today:rgba(224,128,152,.16); --upl-band:rgba(255,255,255,.02);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.42);
  --shadow-lg:0 10px 36px rgba(0,0,0,.55);
}

/* Duderstadt – Wappen als dezentes Wasserzeichen hinter den Monatsrastern */
[data-theme="duderstadt"] .cal-month{ position:relative; z-index:0; }
[data-theme="duderstadt"] .cal-month::before{
  content:""; position:absolute; inset:-2px; z-index:-1; pointer-events:none;
  /* --wappen wird beim Start aus js/einheit.js gesetzt (Schwester-Apps) */
  background:var(--wappen,url("assets/wappen-duderstadt.jpg")) no-repeat center 64% / auto 104%;
  opacity:.08;
  -webkit-mask-image:radial-gradient(ellipse 58% 56% at 50% 56%, #000 30%, transparent 80%);
  mask-image:radial-gradient(ellipse 58% 56% at 50% 56%, #000 30%, transparent 80%);
}

/* ---------- Basis ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
/* overscroll-behavior:none schaltet die eingebaute „Zum Neuladen ziehen"-Geste
   des Browsers ab. Sie loeste bei jedem leichten Zug nach unten aus, lud die
   App neu und warf einen dabei auf die Startseite zurueck (Rueckmeldung Ecki
   01.08.2026).

   ES MUSS "none" SEIN, "contain" GENUEGT NICHT. Das ist der Unterschied:
     contain – verhindert nur, dass das Ueberziehen an die Seite
               WEITERGEREICHT wird. Die oertliche Reaktion des Browsers
               (Gummiband UND Aktualisieren) bleibt erlaubt.
     none    – verhindert zusaetzlich diese Reaktion.
   Mit "contain" kam auf einem Samsung S24 weiterhin Vibration und
   Aktualisierungssymbol (v514, von Ecki gemeldet). Preis von "none": kein
   Gummiband mehr am oberen und unteren Seitenende. Bewusst in Kauf genommen.

   Zweite Sperre in js/app.js faengt zusaetzlich den Zug am oberen Ende ab.
   Sie allein reicht NICHT: Wer in einem durchgehenden Wisch nach oben
   scrollt und dabei oben ankommt, dessen Geste hat der Browser laengst
   uebernommen – preventDefault wird dann ignoriert.

   Aktualisiert wird ohnehin von selbst (beim Zurueckkehren in die App) bzw.
   ueber Einstellungen -> System -> Nach Update suchen. */
/* Dem Browser sagen, ob es hell oder dunkel zugeht (v607).
   Ohne diese Angabe malt er alles, was IHM gehoert, in Hell: die Flaeche
   hinter dem Gummiband-Effekt beim Ueberwischen, Bildlaufleisten,
   Eingabefelder. Auf dem iPhone tauchte deshalb im Dunkelmodus links am
   Urlaubsplaner ein weisser Streifen auf, sobald man ueber den Anfang der
   Tabelle hinauszog (Rueckmeldung Ecki 09.08.2026).
   Dazu bekommt html denselben Hintergrund wie body – die Leinwand hinter
   allem darf nie durchscheinen. */
:root{color-scheme:light;}
[data-theme="dark"],[data-theme="mitternacht"],[data-theme="schiefer"],
[data-theme="tann"],[data-theme="wein"]{color-scheme:dark;}
html{background:var(--bg);}
html,body{margin:0;height:100%;overflow-x:hidden;overscroll-behavior:none;}
/* Zusaetzlich auf den Zwischenebenen: Welches Element der Browser als
   scrollende Flaeche ansieht, haengt vom Geraet ab. Auf einem Samsung S24 kam
   die Geste auf der Startseite weiterhin durch, obwohl html und body bereits
   auf none standen. Diese drei kosten nichts und schliessen die Luecke,
   egal welche Ebene der Browser waehlt. */
#app,#view-app,#view{overscroll-behavior:none;}

/* Kein seitliches „Überwischen" (natives Horizontal-Overscroll/Gummiband) in der
   normalen Oberfläche – jede Bewegung bleibt auf die Bildschirmbreite begrenzt. */
html{touch-action:pan-y;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;
}
#app{max-width:480px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;
  background:var(--bg);position:relative;z-index:0;}

/* Dynamische Hintergründe (BgDyn-Tönung + BgLife Aurora/Himmel/Funkeln) in
   v428 komplett entfernt – sie ruckelten auf echten Geräten (Team-Entscheid). */

/* Einrichtungsassistent (nur beim allerersten Start einer neuen Installation) */
#setup-ov{position:fixed;inset:0;z-index:10090;background:var(--bg);overflow-y:auto;
  display:flex;align-items:flex-start;justify-content:center;padding:calc(24px + var(--safe-top)) 16px calc(24px + var(--safe-bot));}
.setup-card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--shadow-lg);padding:18px 18px 20px;}

.hidden{display:none!important;}
h1{font-size:24px;font-weight:750;letter-spacing:-.02em;margin:0;}
h2{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0;}
.muted{color:var(--muted-1);}
.row{display:flex;align-items:center;gap:10px;}
.sp{margin-left:auto;}
.scroll{flex:1;overflow:visible;padding:calc(14px + var(--safe-top)) 16px 110px;}

/* ---------- Karten ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow);padding:16px;}
.card+.card{margin-top:12px;}
.section-title{font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:var(--muted-1);margin:22px 2px 10px;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  border:none;border-radius:14px;padding:13px 16px;font-size:15px;font-weight:650;
  cursor:pointer;font-family:inherit;transition:transform .1s,filter .15s,background .15s;}
.btn:active{transform:scale(.975);}
.btn-accent{background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 35%,transparent);}
.btn-ghost{background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:var(--shadow);}
.btn-soft{background:color-mix(in srgb,var(--accent) 14%,var(--surface));color:var(--accent);}
.btn i{font-size:18px;}
.iconbtn{background:none;border:none;color:var(--muted-1);font-size:22px;cursor:pointer;
  padding:6px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;}
.iconbtn:active{background:var(--surface-2);}

/* ---------- Avatare ---------- */
.av{border-radius:50%;object-fit:cover;background:var(--surface-2);
  box-shadow:0 0 0 2px var(--surface),0 0 0 4px color-mix(in srgb,var(--accent) 60%,transparent);}
.av-plain{border-radius:50%;object-fit:cover;background:var(--surface-2);}

/* ---------- Chips / Pills ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:650;
  padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted-1);
  border:none;font-family:inherit;cursor:default;}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none;}

/* ---------- Felder ---------- */
.field{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:12px;
  color:var(--text);padding:12px 13px;font-size:15px;font-family:inherit;margin-top:6px;}
.field:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent);}
label.lbl{font-size:13px;font-weight:600;color:var(--muted-1);display:block;margin-top:14px;}

/* ---------- Bottom-Navigation ---------- */
.tabbar{position:sticky;bottom:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  align-items:center;background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border-top:1px solid var(--border);padding:8px 2px calc(8px + var(--safe-bot));z-index:20;}
.tabbar .tab{display:flex;flex-direction:column;align-items:center;gap:2px;border:none;
  background:none;color:var(--muted-1);font-weight:600;font-family:inherit;
  min-width:0;max-width:100%;cursor:pointer;padding:4px 0;position:relative;}
.tabbar .tab i{font-size:21px;line-height:1;}
.tabbar .tab .tab-svg{width:23px;height:23px;display:block;}
.tabbar .tab .tlbl{display:block;width:100%;text-align:center;font-size:8.5px;letter-spacing:-.2px;
  white-space:nowrap;overflow:hidden;text-overflow:clip;}
.tabbar .tab.active{color:var(--accent);}
.tabbar .add{justify-self:center;}
.tabbar .add .fab{width:50px;height:50px;border-radius:50%;background:var(--accent);
  color:var(--accent-ink);display:flex;align-items:center;justify-content:center;border:none;
  cursor:pointer;box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 45%,transparent);
  transition:transform .1s;}
.tabbar .add .fab:active{transform:scale(.93);}
/* Plus per CSS gezeichnet -> garantiert mittig (unabhaengig von Font-Metriken) */
.fab-plus{position:relative;width:26px;height:26px;color:var(--accent-ink);}
.fab-plus::before,.fab-plus::after{content:"";position:absolute;top:50%;left:50%;
  background:currentColor;border-radius:2px;}
.fab-plus::before{width:25px;height:3.4px;transform:translate(-50%,-50%);}
.fab-plus::after{width:3.4px;height:25px;transform:translate(-50%,-50%);}

/* ---------- Sheet / Toast ---------- */
/* WICHTIG: nur die ABDUNKLUNG animieren (background-color), NIE die opacity des
   Containers – sonst gleitet das Blatt halbtransparent hoch und der Hintergrund
   (Kalender/Chat) scheint durch den Inhalt („Bildüberlagerung", per Video belegt).
   will-change hebt das Overlay auf eine eigene Ebene – die Scroll-Sperre (body-
   Umbau) ließ es auf Samsung sonst für einen Frame komplett verschwinden. */
.sheet-bg{position:fixed;inset:0;background:rgba(8,12,20,.45);z-index:90;display:flex;
  align-items:flex-end;justify-content:center;animation:sheetdim .2s;will-change:transform;}
@keyframes sheetdim{from{background-color:rgba(8,12,20,0)}to{background-color:rgba(8,12,20,.45)}}
.sheet{background:var(--surface);width:100%;max-width:480px;max-height:88vh;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  border-radius:24px 24px 0 0;padding:18px 18px calc(22px + var(--safe-bot));
  box-shadow:var(--shadow-lg);animation:slideup .26s cubic-bezier(.2,.8,.25,1);}
.sheet-bg{overscroll-behavior:contain;touch-action:none;}
.sheet-bg .sheet{touch-action:pan-y;}
.sheet-grip{width:38px;height:4px;border-radius:2px;background:var(--border);margin:0 auto 12px;}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes cal-next{from{opacity:.4;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}
@keyframes cal-prev{from{opacity:.4;transform:translateX(-100%)}to{opacity:1;transform:translateX(0)}}
.cal-slide-in-next{animation:cal-next .26s cubic-bezier(.22,.8,.3,1) both}
.cal-slide-in-prev{animation:cal-prev .26s cubic-bezier(.22,.8,.3,1) both}
/* Kalender-Schiene: fingergeführter Rail [Vor|aktuell|Folge] wie die Fotos */
.cal-rail-vp{overflow:hidden;margin-top:12px;}
.cal-rail{display:flex;width:300%;transform:translateX(-33.3333%);will-change:transform;touch-action:pan-y;}
.cal-rail-panel{width:33.3333%;flex:0 0 33.3333%;min-width:0;}
.toast{position:fixed;left:50%;bottom:calc(96px + var(--safe-bot));transform:translateX(-50%) translateY(10px);
  background:var(--text);color:var(--bg);padding:11px 18px;border-radius:999px;font-size:13.5px;
  /* z-index über allen Overlays (Picker 9500, Foto 10000, Splash 20000):
     ein Toast ist Rückmeldung und darf nie verdeckt sein; pointer-events:none
     blockiert dabei nichts (Review-Befund v490). */
  font-weight:650;z-index:20010;opacity:0;transition:.25s;box-shadow:var(--shadow-lg);pointer-events:none;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- Leerer Zustand ---------- */
.empty{text-align:center;color:var(--muted-1);padding:40px 16px;}
.empty i{font-size:40px;opacity:.5;display:block;margin-bottom:10px;}

/* ============================================================
   Startseite
   ============================================================ */
/* Dashboard-Kopf bis zum Nachrichtenstreifen fixiert (scrollt nicht aus dem Bild) */
.home-fixed{position:sticky;top:0;z-index:30;background:var(--bg);
  margin:calc(-14px - var(--safe-top)) -16px 10px;padding:calc(14px + var(--safe-top)) 16px 9px;
  box-shadow:0 6px 14px -10px rgba(0,0,0,.5);}
.home-head{display:flex;align-items:center;gap:8px;margin:4px 0 6px;position:relative;}
.home-head h1{line-height:1.1;}
.home-head > .row{flex:1;min-width:0;}
.list .ev-row{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--border-2);cursor:pointer;}
.list .ev-row:first-child{border-top:none;}
.ev-row .ev-t{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ev-row .ev-s{color:var(--muted-1);font-size:12.5px;}
.next-einsatz{cursor:pointer;}
.next-einsatz .ne-t{font-weight:750;font-size:18px;letter-spacing:-.01em;margin:10px 0 2px;}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px;}
.tile{text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow);padding:15px;cursor:pointer;font-family:inherit;}
.tile:active{transform:scale(.98);}
.tile-ic{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:23px;margin-bottom:10px;}
.tile-t{font-weight:700;font-size:15px;}
.tile-s{color:var(--muted-1);font-size:12.5px;}

/* ============================================================
   Login-Trommel
   ============================================================ */
#view-login{display:flex;flex-direction:column;min-height:100vh;}
.login-wrap{display:flex;flex-direction:column;flex:1;min-height:100vh;position:relative;
  padding:calc(16px + var(--safe-top)) 18px calc(20px + var(--safe-bot));
  background-color:color-mix(in srgb, var(--accent) 20%, var(--bg));
  transition:background-color .55s ease;}
.login-wrap::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(95% 55% at 50% -5%, color-mix(in srgb,var(--accent) 34%, transparent), transparent 72%),
    radial-gradient(85% 45% at 50% 105%, color-mix(in srgb,var(--accent) 16%, transparent), transparent 70%);}
.login-wrap>*{position:relative;z-index:1;}
.login-top{display:flex;align-items:center;justify-content:space-between;}
.login-brand{display:flex;align-items:center;gap:11px;}
.login-logo{width:42px;height:42px;border-radius:13px;overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.15);}
.login-title{font-weight:800;font-size:18px;letter-spacing:-.02em;}
.login-sub{color:var(--muted-1);font-size:12px;}
.drum-stage{position:relative;flex:1;min-height:510px;perspective:1500px;margin:6px -18px;overflow:hidden;transition:min-height .28s ease,flex-basis .28s ease;}
.drum-track{position:absolute;inset:0;transform-style:preserve-3d;touch-action:pan-y;cursor:grab;transition:transform .28s ease;}
/* Passwort fokussiert → Trommel weicht einem großen runden Avatar (füllt die kompakte Fläche) */
.login-kbav{display:none;}
.login-wrap.kb .drum-stage{min-height:0;flex:0 0 34vh;}
.login-wrap.kb .drum-track{display:none;}
.login-wrap.kb .drum-dots{display:none;}
.login-wrap.kb .login-kbav{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;}
.login-wrap.kb .login-kbav>span{width:min(58vw,34vh)!important;height:min(58vw,34vh)!important;}
/* kompakt oben, damit die Tastatur unten Platz hat (kein Hochscrollen/Abschneiden) */
.login-wrap.kb{min-height:0;}
.login-wrap.kb .login-actions{margin-top:16px;}
.drum-track:active,.drum-track.dragging{cursor:grabbing;}
.drum-track{user-select:none;-webkit-user-select:none;}
.ucard,.uphoto{-webkit-user-drag:none;}
/* Karten werden per JS (applyDrum) positioniert: Nachbarn liegen versetzt
   & transparent HINTER der gewählten Karte – echtes Wählrad, 360°-Schleife. */
.ucard{position:absolute;top:50%;left:50%;width:80vw;max-width:333px;aspect-ratio:9/16;
  border-radius:26px;overflow:hidden;cursor:pointer;background:var(--surface-2);
  transform:translate(-50%,-50%);transform-origin:center center;
  will-change:transform,opacity;backface-visibility:hidden;
  box-shadow:0 16px 36px rgba(8,12,20,.32);}
.ucard.active{box-shadow:
  0 0 0 4px color-mix(in srgb,var(--accent) 92%,transparent),  /* klarer Farbring = harte Kante */
  0 0 0 6px rgba(8,12,20,.30),                                  /* dünne dunkle Trennlinie     */
  0 0 26px 10px rgba(8,12,20,.55),                              /* rundum-Schatten (auch seitlich) auf die hinteren Karten */
  0 18px 46px rgba(8,12,20,.55);}
.uphoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.uveil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.8) 100%);}
.umeta{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:#fff;}
.unm{font-size:19px;font-weight:800;letter-spacing:.2px;text-shadow:0 2px 10px rgba(0,0,0,.6);}
.urole{font-size:12px;opacity:.9;text-shadow:0 2px 10px rgba(0,0,0,.6);}
.ucheck{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;
  font-size:17px;opacity:0;transform:scale(.6);transition:.25s;
  box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 50%,transparent);}
.ucard.active .ucheck{opacity:1;transform:scale(1);}
.drum-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
  background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(8px);
  border:1px solid var(--border);color:var(--text);display:flex;align-items:center;justify-content:center;
  font-size:21px;cursor:pointer;z-index:4;box-shadow:var(--shadow);}
.drum-arrow.left{left:10px;} .drum-arrow.right{right:10px;}
.drum-dots{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;max-width:300px;margin:6px auto 10px;}
.drum-dots span{width:6px;height:6px;border-radius:50%;background:var(--border);transition:.2s;}
.drum-dots span.on{background:var(--accent);width:18px;border-radius:3px;}
.login-hint{text-align:center;color:var(--muted-1);font-size:12.5px;margin-bottom:8px;}
.login-actions{margin-top:auto;}

/* ============================================================
   Kalender
   ============================================================ */
.seg{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:13px;padding:4px;margin:6px 0 12px;}
.seg-b{flex:1;border:none;background:none;font-family:inherit;font-size:13.5px;font-weight:650;
  color:var(--muted-1);padding:8px 4px;border-radius:9px;cursor:pointer;}
.seg-b.on{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow);}
.cal-title{font-size:16px;font-weight:750;letter-spacing:-.01em;min-width:120px;text-align:center;}
.cal-filters{display:flex;gap:7px;overflow-x:auto;padding:2px 0 4px;margin-bottom:8px;scrollbar-width:none;}
.cal-filters::-webkit-scrollbar{display:none;}
.fchip{flex:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);
  background:var(--surface);color:var(--muted-1);font-family:inherit;font-size:12.5px;font-weight:600;
  padding:6px 12px;border-radius:999px;cursor:pointer;opacity:.6;transition:.15s;}
.fchip.on{opacity:1;color:var(--text);border-color:color-mix(in srgb,var(--c) 55%,var(--border));
  background:color-mix(in srgb,var(--c) 12%,var(--surface));}
.conf-note{display:flex;align-items:center;gap:7px;background:color-mix(in srgb,var(--amber) 14%,var(--surface));
  color:var(--amber);border:1px solid color-mix(in srgb,var(--amber) 35%,transparent);
  border-radius:12px;padding:9px 12px;font-size:12.5px;font-weight:600;margin-bottom:4px;}

/* Monatsraster */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.cal-grid.head{margin-bottom:5px;gap:5px;}
.cal-dow{text-align:center;font-size:11px;font-weight:700;color:var(--muted-1);padding:2px 0;}
.cal-dow.we{color:var(--accent);}
.cal-cell{position:relative;min-height:34px;min-width:0;overflow:hidden;border:none;border-right:.5px solid var(--border-2);
  background:transparent;border-radius:0;padding:4px 0;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:3px;transition:background .12s;}
.cal-cell:active{background:var(--surface-2);}
.cal-cell.out{opacity:.4;}
.cal-cell.we{background:color-mix(in srgb,var(--muted-1) 6%,var(--surface));}
.cal-n{font-size:13px;font-weight:600;color:var(--text);width:22px;height:22px;line-height:1;display:flex;align-items:center;justify-content:center;}
.cal-cell.today{box-shadow:inset 0 0 0 1.5px var(--muted-1);border-radius:9px;}
.cal-cell.today .cal-n{color:var(--text);font-weight:800;}
.cal-cell.sel:not(.today){background:color-mix(in srgb,var(--accent) 8%,var(--surface));}
.cal-cell.sel:not(.today) .cal-n{box-shadow:inset 0 0 0 1.5px var(--accent);border-radius:50%;color:var(--accent);font-weight:700;}
.cal-daylist{margin-top:10px;}
.cal-daylist-head{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;color:var(--text);margin-bottom:9px;}
.cal-daylist-fei{font-size:11px;font-weight:600;color:var(--amber);}
.cal-daylist-empty{font-size:12.5px;color:var(--muted-1);padding:14px 2px;text-align:center;}
/* Tages-Kopf (großer Tag + Wochentag) + Karten (Samsung-Stil) */
.cal-dl-head{display:flex;align-items:baseline;gap:8px;margin:2px 2px 10px;}
.cal-dl-n{font-size:26px;font-weight:800;color:var(--text);line-height:1;}
.cal-dl-wd{font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--muted-1);text-transform:uppercase;}
.cal-dl-add{margin-left:auto;align-self:center;}
.cal-dl-list{display:flex;flex-direction:column;gap:8px;}
.cal-daycard{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:13px;
  background:color-mix(in srgb,var(--bc) 16%,var(--surface));border:1px solid color-mix(in srgb,var(--bc) 22%,var(--border));}
.cal-daycard.tap{cursor:pointer;}
.cal-daycard.tap:active{filter:brightness(.96);}
.cal-daycard-ic{font-size:19px;color:var(--bc);flex:none;}
.cal-daycard-body{flex:1;min-width:0;}
.cal-daycard-t{font-size:15px;font-weight:700;color:var(--text);line-height:1.25;word-break:break-word;}
.cal-daycard-s{font-size:12.5px;color:var(--muted-1);margin-top:2px;}
/* Teilen und Löschen lagen als 25-px-Ziele 11 px nebeneinander – mit
   Handschuh ein Fehlgriff mit Datenverlust (Prüfung 09.08.2026).
   Jetzt 43 px Trefferfläche und ein sichtbarer Abstand dazwischen. */
.cal-daycard-del{flex:none;color:var(--muted-1);font-size:17px;padding:13px 12px;margin-left:2px;}
.cal-daycard-del:active{color:var(--red);}
/* Einsatz-Tag-Schiene: smooth zwischen mehreren Einsätzen des Tages blättern */
.ek-rail-vp{overflow:hidden;}
.ek-rail{display:flex;align-items:flex-start;will-change:transform;touch-action:pan-y;}
.ek-rail-panel{flex:1 0 0;min-width:0;padding:0 3px;box-sizing:border-box;}
.ek-dots{display:flex;justify-content:center;gap:6px;padding:11px 0 2px;}
.ek-dot{width:7px;height:7px;border-radius:50%;background:var(--border);transition:width .18s,background .18s;}
.ek-dot.on{background:var(--accent);width:18px;border-radius:4px;}
/* Monatsraster groß (Ziehgriff) */
.cal-cell.big{min-height:74px;justify-content:flex-start;gap:2px;}
.cal-evs{display:flex;flex-direction:column;gap:1px;width:100%;padding:0 3px;overflow:hidden;}
.cal-ev{font-size:9px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;}
.cal-evmore{font-size:8.5px;font-weight:700;color:var(--muted-1);text-align:left;}
/* Aufgeräumter Kalender-Kopf: Aktionen */
.cal-hdr-actions{display:flex;align-items:center;gap:7px;flex:none;}
.cal-hdr-icon,.cal-hdr-warn,.cal-hdr-filter{display:inline-flex;align-items:center;justify-content:center;height:34px;
  border:1px solid var(--border);background:var(--surface);border-radius:999px;cursor:pointer;font-family:inherit;}
.cal-hdr-icon{width:34px;color:var(--muted-1);}
.cal-hdr-icon i{font-size:17px;}
.cal-hdr-warn{gap:4px;padding:0 11px;font-size:13.5px;font-weight:700;color:var(--amber);
  border-color:color-mix(in srgb,var(--amber) 40%,var(--border));background:color-mix(in srgb,var(--amber) 13%,var(--surface));}
.cal-hdr-warn i{font-size:15px;}
.cal-hdr-filter{gap:6px;padding:0 13px;font-size:13.5px;font-weight:600;color:var(--text);}
.cal-hdr-filter.on{color:var(--accent);border-color:var(--accent);}
.cal-fdot{width:7px;height:7px;border-radius:50%;background:var(--muted-1);}
.cal-hdr-filter.on .cal-fdot{background:var(--accent);}
/* Inhalts-Kalender (Stärke/Einsatz/Fortbildung): höhere Zellen */
.cal-month-tall .cal-cell{min-height:58px;justify-content:flex-start;padding-top:5px;gap:2px;}
/* Stärkekalender: Stärkezahl + Marker */
.sk-num{font-size:17px;font-weight:750;line-height:1;margin-top:3px;}
.sk-num.high{color:var(--green);}
.sk-num.mid{color:var(--amber);}
.sk-num.low{color:var(--red);}
.sk-marks{display:flex;align-items:center;justify-content:center;gap:3px;height:12px;margin-top:1px;}
.sk-marks .sk-ez{width:6px;height:6px;border-radius:50%;background:var(--red);display:inline-block;}
/* Zeitraum-Auswahl */
.cal-cell.cal-rstart{border-color:var(--accent)!important;box-shadow:inset 0 0 0 2px var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--surface))!important;}
.cal-cell.cal-rstart .cal-n{color:var(--accent);font-weight:800;}
.cal-cell.cal-rbetween{background:color-mix(in srgb,var(--accent) 9%,var(--surface))!important;}

/* ============================================================
   Haupt-Kalender · Monatsansicht (Google/Samsung-Stil, mv-*)
   Termine als Chips, deren Höhe (--mv-h) beim Aufziehen mitwächst:
   klein = dünner Balken, groß = Titel-Chip. Nur der Haupt-Kalender.
   ============================================================ */
/* Frisch eingefügter Kalender: Aufbau-Animationen aus (Chips „ploppten" sonst
   bei jedem Ansichtswechsel auf ihre Endhöhe, weil transition:height schon beim
   ersten Layout griff und mvFit die Höhe nachträglich setzte). Die Klasse wird
   nach dem ersten Layout wieder entfernt → Aufzieh-Gesten animieren normal. */
.cal-boot .mv-chip,.cal-boot .mv-chip-t,.cal-boot .mv-wkwrap{transition:none!important;}
.mv-head{display:grid;grid-template-columns:repeat(7,1fr);column-gap:4px;padding:0 2px;margin-bottom:4px;}
.mv-dow{font-size:11px;font-weight:700;color:var(--muted-1);text-align:center;}
.mv-dow.we{color:color-mix(in srgb,var(--red) 70%,var(--muted-1));}
/* Helligkeit der Tageskacheln – abgesetzt vom (dunklen) Hintergrund */
.mv-month{--mv-tile:color-mix(in srgb,var(--surface) 80%,var(--text) 20%);display:flex;flex-direction:column;padding:0 2px;}
/* Wochen-Hülle: klappt im Klein-Zustand alle außer der gewählten Woche weich zusammen (grid 1fr↔0fr) */
.mv-wkwrap{display:grid;grid-template-rows:1fr;margin-bottom:4px;transition:grid-template-rows .34s cubic-bezier(.22,.8,.3,1),margin .34s ease,opacity .26s ease;}
.mv-wkwrap:last-child{margin-bottom:0;}
.mv-wkwrap>.mv-week{min-height:0;overflow:hidden;}
.mv-month.mv-small .mv-wkwrap:not(.sel){grid-template-rows:0fr;opacity:0;margin-bottom:0;}
.mv-week{position:relative;display:grid;grid-template-columns:repeat(7,1fr);column-gap:4px;}
/* Kachel = heller Tages-Hintergrund (füllt die ganze Zelle, alle gleich groß) */
.mv-tile{grid-row:1/-1;position:relative;min-width:0;border:none;padding:0;font-family:inherit;cursor:pointer;z-index:0;
  background:var(--mv-tile);border-radius:10px;}
.mv-tile:active{filter:brightness(1.08);}
.mv-tile.out{background:color-mix(in srgb,var(--mv-tile) 45%,transparent);}
.mv-tile.we{background:color-mix(in srgb,var(--mv-tile) 86%,var(--muted-1) 14%);}
.mv-tile.today{box-shadow:inset 0 0 0 1.6px var(--muted-1);}
.mv-tile.sel:not(.today){box-shadow:inset 0 0 0 1.6px var(--accent);}
.mv-tile.cal-rstart{box-shadow:inset 0 0 0 2px var(--accent);}
.mv-tile.cal-rbetween{background:color-mix(in srgb,var(--mv-tile) 80%,var(--accent) 20%);}
.mv-more{position:absolute;right:5px;bottom:3px;font-size:9px;font-weight:800;color:var(--muted-1);}
/* Tageszahl (eigene Ebene über Kachel + Band) */
.mv-daynum{grid-row:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;padding-top:4px;pointer-events:none;z-index:2;overflow:hidden;}
.mv-daynum.out{opacity:.4;}
.mv-n{font-size:13px;font-weight:600;color:var(--text);width:24px;height:21px;display:flex;align-items:center;justify-content:center;line-height:1;}
.mv-daynum.we .mv-n{color:var(--muted-1);}
.mv-daynum.so .mv-n{color:color-mix(in srgb,var(--red) 78%,var(--text));}
.mv-daynum.today .mv-n{font-weight:800;color:var(--text);}
.mv-fei{font-size:8px;line-height:1.05;color:var(--green);max-width:100%;padding:0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Termin-Chips: Höhe = --mv-h (Balken ↔ Titel-Chip), Titel blendet mit --mv-topa ein */
/* Termin-Chips sind reine Anzeige – der Tipp gehört der Tageskachel darunter
   (sonst trifft man im vollen Monat den Termin statt des Tages). */
.mv-chip{height:var(--mv-h,6px);margin:0 3px 2px;overflow:hidden;border-radius:4px;display:flex;align-items:center;pointer-events:none;z-index:3;
  background:color-mix(in srgb,var(--bc) var(--mv-chipmix,42%),var(--mv-tile,var(--surface)));transition:height .27s cubic-bezier(.22,.8,.3,1);}
.cal-vgrow.mv-dragging .mv-chip{transition:none;}
.mv-chip.multi{background:color-mix(in srgb,var(--bc) calc(var(--mv-chipmix,42%) + 14%),var(--mv-tile,var(--surface)));justify-content:center;}
.mv-chip.cl{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-4px;}
.mv-chip.cr{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-4px;}
.mv-chip.fei{background:color-mix(in srgb,var(--green) 15%,var(--mv-tile,var(--surface)));}
/* Titel: schwarz im Hell-, weiß im Dunkelmodus (var --text folgt dem Theme); Chip trägt die Themengebiet-Farbe.
   Bewusst klein & schlank (nicht fett) → mehr Text passt in die Zelle. */
.mv-chip-t{font-size:9.5px;font-weight:600;line-height:1.15;padding:0 4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  color:var(--text);
  opacity:var(--mv-topa,1);transition:opacity .2s ease;}
.cal-vgrow.mv-dragging .mv-chip-t{transition:none;}
.mv-chip.multi .mv-chip-t{font-weight:650;}
.mv-band{grid-row:1/-1;align-self:stretch;border-radius:10px;background:color-mix(in srgb,var(--bc) 14%,transparent);z-index:1;pointer-events:none;}

/* Jahresübersicht: 12 Mini-Monate */
.yv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 2px;}
.yv-month{border:none;font-family:inherit;cursor:pointer;text-align:left;padding:8px 7px 7px;border-radius:12px;
  background:color-mix(in srgb,var(--surface) 84%,var(--text) 16%);}
.yv-month:active{filter:brightness(1.08);}
.yv-title{font-size:11.5px;font-weight:800;color:var(--accent);margin-bottom:5px;}
.yv-days{display:grid;grid-template-columns:repeat(7,1fr);row-gap:3px;}
.yv-d{position:relative;font-size:8px;font-weight:600;color:var(--text);text-align:center;line-height:1.55;}
.yv-d.we{color:var(--muted-1);}
.yv-d.today{background:var(--accent);color:var(--accent-ink);border-radius:50%;font-weight:800;}
.yv-dot{position:absolute;left:50%;transform:translateX(-50%);bottom:-2px;width:3px;height:3px;border-radius:50%;display:block;}

/* Touch-Foto-Editor (Admin: Avatar-Kreis / Trommel-Raster) */
#ape-ov{position:fixed;inset:0;z-index:10060;background:rgba(5,8,14,.94);display:flex;flex-direction:column;
  padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px));}
  /* z-index 10060: über Foto-Langdruck-Menü (10000) UND Dashboard-Foto-Sheet (10050) */
.ape-head{color:#fff;font-size:16px;font-weight:750;text-align:center;flex:none;}
.ape-hint{font-size:12px;font-weight:500;color:rgba(255,255,255,.55);margin-top:3px;}
.ape-stage{flex:1;display:flex;align-items:center;justify-content:center;touch-action:none;min-height:0;}
.ape-vp{position:relative;overflow:hidden;box-shadow:0 0 0 2000px rgba(5,8,14,.55);background:#111;
  border-radius:16px;border:2.5px solid rgba(255,255,255,.85);}   /* Größe kommt inline (Seitenverhältnis) */
.ape-vp.round{border-radius:50%;}
.ape-img{position:absolute;left:50%;top:50%;max-width:none;will-change:transform;pointer-events:none;user-select:none;-webkit-user-drag:none;}
.ape-btns{display:flex;gap:10px;flex:none;}
.ape-btns .btn{flex:1;}
.ape-btns .btn-ghost{color:#fff;border-color:rgba(255,255,255,.3);}

/* Chat-Häkchen (WhatsApp-Logik): ✓ gesendet · ✓✓ zugestellt · ✓✓ blau gelesen */
.msg-ticks{font-size:11px;font-weight:800;letter-spacing:-2.5px;color:var(--muted-1);margin-left:4px;vertical-align:baseline;}
.msg-ticks.read{color:#34A9F2;}

/* Chat-Reaktionen (Langdruck auf Nachricht) */
.chat-reacts{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px;padding:0 4px;}
.chat-mine .chat-reacts{justify-content:flex-end;}
.chat-react-chip{border:1px solid var(--border);background:var(--surface-2);border-radius:999px;
  padding:2px 8px;font-size:13px;line-height:1.4;cursor:pointer;color:var(--text);font-family:inherit;}
.chat-react-chip b{font-size:11px;font-weight:700;color:var(--muted-1);}
.chat-react-chip.mine{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--surface));}
.chat-react-chip.mine b{color:var(--accent);}
#chat-rx-picker{position:fixed;inset:0;z-index:10040;background:transparent;}
#chat-rx-picker .chat-rx-wrap{position:fixed;display:flex;flex-direction:column;gap:6px;align-items:center;
  animation:rxPop .16s cubic-bezier(.2,1.4,.4,1);}
#chat-rx-picker .chat-rx-row{display:flex;gap:2px;background:var(--surface);
  border:1px solid var(--border);border-radius:999px;padding:5px 7px;box-shadow:var(--shadow-lg);}
#chat-rx-picker .chat-rx-row.grid{flex-wrap:wrap;justify-content:center;max-width:276px;border-radius:20px;}
.chat-rx-more{color:var(--muted-1);font-size:17px!important;display:flex;align-items:center;justify-content:center;}
.chat-rx-act{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column;min-width:190px;}
.chat-rx-actbtn{border:none;background:none;padding:12px 16px;font-size:14.5px;font-weight:600;
  color:var(--text);cursor:pointer;display:flex;align-items:center;gap:11px;font-family:inherit;
  text-align:left;width:100%;touch-action:manipulation;}
.chat-rx-actbtn+.chat-rx-actbtn{border-top:1px solid var(--border);}
.chat-rx-actbtn i{font-size:18px;color:var(--muted-1);width:20px;text-align:center;}
.chat-rx-actbtn:active{background:color-mix(in srgb,var(--text) 8%,transparent);}
.chat-rx-actbtn.chat-rx-del{color:var(--red);}
.chat-rx-actbtn.chat-rx-del i{color:var(--red);}
.chat-rx-btn{border:none;background:transparent;font-size:23px;line-height:1;padding:5px 6px;
  cursor:pointer;border-radius:50%;transition:transform .12s;font-family:inherit;}
.chat-rx-btn:active{transform:scale(1.35);}
.chat-rx-btn.on{background:color-mix(in srgb,var(--accent) 20%,transparent);}
@keyframes rxPop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}

/* Offline-Hinweis */
#offline-chip{position:fixed;top:calc(8px + env(safe-area-inset-top,0px));left:50%;z-index:85;
  transform:translateX(-50%) translateY(-56px);display:flex;align-items:center;gap:6px;
  background:color-mix(in srgb,var(--amber) 18%,var(--surface));border:1px solid color-mix(in srgb,var(--amber) 45%,var(--border));
  color:var(--text);font-size:12px;font-weight:700;padding:6px 13px;border-radius:999px;box-shadow:var(--shadow-lg);
  pointer-events:none;transition:transform .35s cubic-bezier(.22,.8,.3,1);}
#offline-chip i{color:var(--amber);font-size:15px;}
#offline-chip.show{transform:translateX(-50%) translateY(0);}

.cal-range-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;
  background:color-mix(in srgb,var(--accent) 12%,var(--surface));
  border-radius:10px;margin-bottom:8px;font-size:13px;color:var(--text);}
.ek-cell-title{font-size:8.5px;font-weight:700;line-height:1.2;width:100%;text-align:center;
  padding:0 3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;}
/* Einsatzkalender Stacked-Card Detail */
.ek-mc-front{border-radius:14px;padding:14px;background:var(--surface);
  box-shadow:0 2px 16px rgba(0,0,0,.1);margin-top:8px;}
[data-theme="dark"] .ek-mc-front{box-shadow:0 2px 16px rgba(0,0,0,.35);}
.ek-mc-back{display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:12px;
  background:var(--surface-2);cursor:pointer;opacity:.78;transition:opacity .12s;}
.ek-mc-back:active{opacity:1;}
.cal-dots{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;max-width:80%;}
.cal-dots i{width:6px;height:6px;border-radius:50%;display:block;}
/* ===== Protokoll-Eintrag: Anhang-Chips (Foto/Datei/Memo) ===== */
.memo-att-chip{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:9px;padding:6px 10px;margin:0 8px 8px 0;font-size:12.5px;}
.memo-att-chip > .ti-x{cursor:pointer;color:var(--muted-1);font-size:15px;}
#memo-mic.recording{color:var(--red);box-shadow:inset 0 0 0 1.5px var(--red);}

/* ===== „Mein Tag" – Tagesüberblick (Mein Bereich) ===== */
.mt-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:13px 14px;margin:0 14px 4px;box-shadow:var(--shadow);}
.mt-date{font-size:12px;color:var(--muted-1);font-weight:600;margin-bottom:9px;}
.mt-hero{background:color-mix(in srgb,var(--c) 13%,var(--surface-2));border:1px solid color-mix(in srgb,var(--c) 28%,var(--border));border-radius:12px;padding:11px 12px;}
.mt-hero-row{display:flex;align-items:center;gap:10px;}
.mt-hero-ic{width:34px;height:34px;border-radius:10px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;flex:none;}
.mt-hero-t{font-weight:750;font-size:15px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mt-hero-s{font-size:12px;color:var(--muted-1);}
.mt-chips{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap;}
.mt-chip{font-size:11px;font-weight:650;padding:4px 9px;border-radius:8px;background:var(--surface);border:1px solid var(--border);color:var(--text);}
.mt-chip.g{color:var(--green);}
.mt-sec{font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--muted-1);text-transform:uppercase;margin:14px 2px 7px;}
.mt-item{display:flex;align-items:center;gap:11px;background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--muted-1);border-radius:11px;padding:9px 11px;margin-bottom:7px;}
.mt-tm{font-size:12px;font-weight:700;width:48px;flex:none;text-align:center;}
.mt-it{font-size:13.5px;font-weight:650;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mt-is{font-size:11.5px;color:var(--muted-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mt-chev{color:var(--muted-1);font-size:15px;flex:none;}

/* ===== Wochenplan – konsolidierte Wochenansicht ===== */
.wp2-kw{font-size:14px;font-weight:800;color:var(--text);padding:2px 6px 10px;}
.wp2-list{padding:0 4px;}
.wp2-day{display:flex;align-items:stretch;gap:11px;padding:11px 6px;border-bottom:1px solid var(--border);cursor:pointer;}
.wp2-day:active{background:var(--surface-2);}
.wp2-day.we{opacity:.66;}
.wp2-dcol{width:34px;flex:none;text-align:center;align-self:center;}
.wp2-wd{font-size:11px;font-weight:700;color:var(--muted-1);}
.wp2-wd.tod{color:var(--accent);}
.wp2-dn{font-size:16px;font-weight:800;color:var(--text);width:26px;height:26px;line-height:26px;margin:1px auto 0;}
.wp2-dn.tod{background:var(--accent);color:var(--accent-ink);border-radius:8px;}
.wp2-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;justify-content:center;}
.wp2-pill{align-self:flex-start;max-width:100%;box-sizing:border-box;font-size:12.5px;font-weight:600;padding:4px 9px;border-radius:8px;
  background:color-mix(in srgb,var(--c) 14%,var(--surface-2));color:var(--c);border-left:2.5px solid var(--c);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wp2-pill b{font-weight:800;}
.wp2-frei{font-size:12.5px;color:var(--muted-1);align-self:center;}
.wp2-hrs{flex:none;align-self:center;text-align:right;font-weight:800;font-size:14px;color:var(--text);min-width:42px;}
.wp2-tot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding:12px 14px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:12px;font-size:13px;color:var(--muted-1);}
.wp2-tot b{font-size:16px;color:var(--text);}
.wp2-soll{font-size:12px;font-weight:600;color:var(--muted-1);}

/* ===== Einsatz-Briefing („Startklar") ===== */
.bf-open{display:flex;align-items:center;gap:9px;width:100%;margin-bottom:14px;padding:13px 14px;border:none;border-radius:13px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--ec),color-mix(in srgb,var(--ec) 70%,#000));box-shadow:0 8px 20px color-mix(in srgb,var(--ec) 40%,transparent);}
.bf-open i{font-size:18px;}
.bf-wrap{padding-bottom:26px;}
.bf-hero{position:relative;padding:46px 16px 18px;color:#fff;background:linear-gradient(135deg,var(--ec),color-mix(in srgb,var(--ec) 60%,#000));overflow:hidden;}
.bf-hero::after{content:"";position:absolute;right:-50px;top:-50px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.08);}
.bf-back{position:absolute;top:12px;left:10px;width:36px;height:36px;border-radius:10px;border:none;background:rgba(255,255,255,.18);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;}
.bf-tags{display:flex;gap:7px;margin-bottom:9px;position:relative;z-index:1;}
.bf-bd{font-size:10px;font-weight:800;letter-spacing:.05em;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.22);}
.bf-bd.gl{background:rgba(255,255,255,.22);}
.bf-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;opacity:.82;margin-bottom:3px;position:relative;z-index:1;}
.bf-htitle{font-size:20px;font-weight:850;line-height:1.16;text-shadow:0 2px 10px rgba(0,0,0,.25);position:relative;z-index:1;}
.bf-hsub{font-size:12.5px;opacity:.92;margin-top:6px;position:relative;z-index:1;}
.bf-body{padding:15px;}
.bf-tl{display:flex;align-items:flex-start;justify-content:space-between;position:relative;margin-bottom:4px;}
.bf-tl::before{content:"";position:absolute;left:26px;right:26px;top:7px;height:2px;background:var(--border);}
.bf-stp{position:relative;z-index:2;text-align:center;flex:1;}
.bf-dot{width:14px;height:14px;border-radius:50%;background:var(--surface-1);border:3px solid var(--muted-1);margin:0 auto 6px;}
.bf-tt{font-size:13px;font-weight:850;color:var(--text);font-variant-numeric:tabular-nums;}
.bf-kk{font-size:8.5px;font-weight:700;letter-spacing:.02em;color:var(--muted-1);text-transform:uppercase;margin-top:1px;}
.bf-crew{margin:18px 0 8px;}
.bf-crew+.bf-crew{margin-top:14px;}
.bf-crewhd{font-size:11.5px;font-weight:800;letter-spacing:.06em;color:var(--muted-1);text-transform:uppercase;margin-bottom:9px;text-align:center;}
.bf-crewhd b{color:var(--ec);}
.bf-bandsub{font-weight:600;color:var(--muted-1);text-transform:none;letter-spacing:0;}
.bf-stage-empty{align-self:center;margin:auto;font-size:11.5px;font-weight:600;color:#fff;text-transform:none;letter-spacing:0;text-shadow:0 1px 4px rgba(0,0,0,.6);padding:0 18px;text-align:center;}
.bf-bandmat{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:9px;}
/* „Dicke Linie um alle ziehen": Team als ein gerahmtes Mannschaftsbild, groß & im Fokus */
.bf-stage{display:flex;justify-content:center;align-items:flex-end;aspect-ratio:4/3;min-height:150px;padding:0 8px 0;border:4px solid var(--ec);border-radius:18px;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,color-mix(in srgb,var(--ec) 9%,var(--surface-2)) 0%,color-mix(in srgb,var(--ec) 27%,var(--surface-2)) 100%);box-shadow:0 12px 28px color-mix(in srgb,var(--ec) 26%,transparent),inset 0 1px 0 rgba(255,255,255,.07);}
.bf-fig{width:auto;align-self:flex-end;filter:drop-shadow(0 7px 9px rgba(0,0,0,.34));}
.bf-fig:first-child{margin-left:0;}
.bf-fig.lead{filter:drop-shadow(0 11px 14px rgba(0,0,0,.48));}
.bf-names{text-align:center;font-size:12px;font-weight:600;color:var(--text);margin-top:9px;line-height:1.45;}
/* Lagekarte + Wetter */
.bf-geo{margin:4px 0 2px;}
.bf-map{height:172px;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--surface-2);}
.bf-map-off{min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:16px;border:1px dashed var(--border);background:var(--surface-2);color:var(--muted-1);font-size:12.5px;text-align:center;padding:12px;}
.bf-map-off>i{font-size:22px;}
.bf-adr{display:flex;align-items:center;gap:8px;margin-top:9px;background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:3px 5px 3px 11px;}
.bf-adr-ic{color:var(--accent);font-size:17px;flex:none;}
.bf-adr-in{flex:1;min-width:0;border:none;background:transparent;color:var(--text);font-size:13px;font-family:inherit;padding:7px 0;outline:none;}
.bf-adr-in::placeholder{color:var(--muted-1);}
.bf-adr-btn{flex:none;width:34px;height:34px;border-radius:9px;border:none;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer;}
.bf-maprow{display:flex;align-items:center;gap:8px;margin:9px 2px 0;}
.bf-coord{flex:1;font-size:12px;color:var(--muted-1);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bf-maplink{flex:none;border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:9px;padding:5px 10px;font-size:12px;font-weight:650;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:4px;}
.bf-anfahrt{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:12.5px;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:8px 11px;}
.bf-anfahrt i{color:var(--accent);font-size:16px;flex:none;}
.bf-anfahrt b{font-weight:750;}
.bf-anf-est{color:var(--muted-1);font-weight:500;}
.bf-sun{display:flex;justify-content:space-around;gap:10px;margin-top:9px;padding:9px 11px;border-radius:11px;background:color-mix(in srgb,var(--amber) 12%,var(--surface-2));border:1px solid color-mix(in srgb,var(--amber) 30%,var(--border));font-size:12.5px;color:var(--text);}
.bf-sun b{font-weight:800;font-variant-numeric:tabular-nums;}
.bf-wx{margin-top:11px;}
.bf-wxload{font-size:12.5px;color:var(--muted-1);padding:8px 2px;}
.bf-amp{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:12px;background:color-mix(in srgb,var(--ac) 13%,var(--surface-2));border:1px solid color-mix(in srgb,var(--ac) 38%,var(--border));color:var(--text);font-size:12.5px;margin-bottom:9px;}
.bf-amp i{color:var(--ac);font-size:19px;flex:none;}
.bf-wxgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.bf-wxc{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);}
.bf-wxc i{font-size:17px;color:var(--accent);}
.bf-wxc b{font-size:14px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;}
.bf-wxc small{font-size:9.5px;font-weight:600;letter-spacing:.02em;color:var(--muted-1);text-transform:uppercase;}
.bf-verort{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:1.5px dashed color-mix(in srgb,var(--ec,var(--accent)) 50%,var(--border));background:color-mix(in srgb,var(--ec,var(--accent)) 7%,var(--surface-2));border-radius:14px;padding:13px 14px;cursor:pointer;font-family:inherit;color:var(--text);}
.bf-verort-ic{width:38px;height:38px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ec,var(--accent)) 20%,transparent);color:var(--ec,var(--accent));font-size:20px;}
.bf-verort-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.bf-verort-tx b{font-size:14px;}
.bf-verort-tx small{font-size:12px;color:var(--muted-1);line-height:1.3;}
.bf-verort>.ti-chevron-right{color:var(--muted-1);flex:none;}
.bf-pinmap{height:300px;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:var(--surface-2);}
.bf-pincoord{margin-top:8px;font-size:12.5px;color:var(--muted-1);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:5px;}
.bf-pin span{display:block;width:18px;height:18px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--ec,var(--accent));border:2px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.4);}
/* Karte: antippbar → Vollbild */
.bf-mapbox{position:relative;cursor:pointer;isolation:isolate;}
.bf-mapbox .bf-map{pointer-events:none;}
.bf-mapexpand{position:absolute;right:9px;top:9px;z-index:600;display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;background:color-mix(in srgb,var(--surface) 86%,transparent);color:var(--text);border:1px solid var(--border);font-size:12px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.22);backdrop-filter:blur(3px);}
.bf-mapexpand i{font-size:15px;color:var(--accent);}
.bf-mapfull{position:fixed;inset:0;z-index:4000;background:var(--surface);display:flex;flex-direction:column;}
.bf-mapfull-bar{display:flex;align-items:center;gap:10px;padding:12px 12px;padding-top:max(12px,env(safe-area-inset-top));background:var(--surface);border-bottom:1px solid var(--border);}
.bf-mapfull-x,.bf-mapfull-ext{flex:none;width:40px;height:40px;border-radius:11px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;text-decoration:none;}
.bf-mapfull-t{flex:1;min-width:0;font-size:15px;font-weight:750;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bf-mapfull-map{flex:1;min-height:0;}
/* Live-Züge (eingebettetes geOps-Portal) */
.lz-frame{flex:1;min-height:0;width:100%;border:0;background:#fff;}
.lz-hint{flex:none;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 12px;padding-bottom:max(9px,env(safe-area-inset-bottom));background:var(--surface-2);border-top:1px solid var(--border);font-size:12.5px;color:var(--muted-1);}
.lz-hint a{display:inline-flex;align-items:center;gap:5px;color:var(--accent);font-weight:700;text-decoration:none;}
/* Notizen & Memos */
.bf-memos{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.bf-memo{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:9px 11px;}
.bf-memo-hd{display:flex;align-items:center;gap:6px;margin-bottom:5px;}
.bf-memo-nm{font-size:11.5px;font-weight:700;color:var(--text);}
.bf-memo-vis{font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:1px 6px;border-radius:6px;background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green);}
.bf-memo-vis.priv{background:color-mix(in srgb,var(--violet) 18%,transparent);color:var(--violet);}
.bf-memo-dt{flex:1;text-align:right;font-size:11px;color:var(--muted-1);}
.bf-memo-del{font-size:14px;color:var(--red);cursor:pointer;padding:2px 3px;}
.bf-memo-tx{font-size:13px;line-height:1.5;color:var(--text);white-space:pre-wrap;}
.bf-memo-empty{font-size:12.5px;color:var(--muted-1);padding:4px 2px 10px;}
.bf-memo-actions{display:flex;gap:8px;}
.bf-memo-add{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 8px;border-radius:11px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:12.5px;font-weight:650;font-family:inherit;cursor:pointer;}
.bf-memo-add i{font-size:16px;color:var(--accent);}
/* Einsätze: Schnellzugriff Einsatzbesprechung */
.bsp-quickwrap{margin:2px 0 16px;}
.bsp-quick-h{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-1);margin:2px 2px 9px;}
.bsp-quick-h i{font-size:15px;color:var(--accent);}
.bsp-quick{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:1px solid var(--border);border-left:4px solid var(--ec);background:color-mix(in srgb,var(--ec) 7%,var(--surface));border-radius:13px;padding:11px 13px;margin-bottom:8px;cursor:pointer;font-family:inherit;color:var(--text);}
.bsp-q-cd{flex:none;min-width:50px;text-align:center;font-size:12px;font-weight:850;letter-spacing:.02em;color:var(--ec);background:color-mix(in srgb,var(--ec) 14%,transparent);border-radius:9px;padding:7px 8px;font-variant-numeric:tabular-nums;}
.bsp-q-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.bsp-q-tx b{font-size:14px;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bsp-q-tx small{font-size:11.5px;color:var(--muted-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bsp-q-go{flex:none;color:var(--muted-1);font-size:18px;}
/* Crew als überlappende Porträt-Karten (Alternative zu freigestellt) */
.bf-card{width:84px;height:150px;flex:none;margin-left:-46px;border-radius:14px;background-size:cover;background-position:center 20%;border:3px solid var(--surface-1);box-shadow:0 7px 16px rgba(0,0,0,.34);}
.bf-card:first-child{margin-left:0;}
.bf-card.lead{width:96px;height:168px;box-shadow:0 10px 24px rgba(0,0,0,.45);}
/* Material mit echten Fotos */
.bf-leaf{gap:8px;}
.bf-mph{display:flex;flex-direction:column;align-items:center;gap:4px;width:62px;}
.bf-mimg{width:58px;height:58px;border-radius:10px;background-size:cover;background-position:center;border:2px solid var(--border);background-color:var(--surface-2);}
.bf-mlbl{font-size:9.5px;font-weight:600;color:var(--text);text-align:center;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62px;}
.bf-info{font-size:13px;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:10px 12px;margin-top:12px;}
.bf-info i{color:var(--muted-1);}
.bf-sec{font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--muted-1);text-transform:uppercase;margin:18px 2px 10px;}
.bf-tree{margin-left:6px;border-left:2px solid var(--border);}
.bf-tn{position:relative;padding-left:16px;}
.bf-tn::before{content:"";position:absolute;left:0;top:18px;width:12px;height:2px;background:var(--border);}
.bf-tc{display:flex;align-items:center;gap:9px;padding:7px 0;}
.bf-ic{width:28px;height:28px;border-radius:9px;background:color-mix(in srgb,var(--c) 15%,var(--surface-2));color:var(--c);display:flex;align-items:center;justify-content:center;font-size:15px;flex:none;}
.bf-tnm{font-size:12.5px;font-weight:750;color:var(--text);}
.bf-ct{margin-left:auto;font-size:10.5px;color:var(--muted-1);font-weight:700;}
.bf-leaf{display:flex;flex-wrap:wrap;gap:5px;padding:0 0 7px 37px;}
.bf-pm{font-size:11px;font-weight:600;padding:3px 9px;border-radius:7px;background:color-mix(in srgb,var(--c) 12%,var(--surface-2));color:var(--c);}
.bf-note{font-size:13px;line-height:1.5;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:11px 12px;white-space:pre-wrap;}
.bf-laws{display:flex;flex-wrap:wrap;gap:6px;}
.bf-law{font-size:11.5px;font-weight:650;padding:5px 10px;border-radius:8px;background:color-mix(in srgb,var(--violet) 13%,var(--surface-2));color:var(--violet);cursor:pointer;}
.bf-cta{display:flex;gap:9px;margin-top:18px;}
.bf-b{flex:1;text-align:center;font-size:13.5px;font-weight:800;padding:13px;border-radius:13px;display:flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;border:none;cursor:pointer;font-family:inherit;}
.bf-b.p{background:var(--ec,var(--accent));color:#fff;box-shadow:0 8px 18px color-mix(in srgb,var(--ec,var(--accent)) 38%,transparent);}
.bf-b.g{background:var(--surface-2);border:1px solid var(--border);color:var(--text);}

/* ===== Termin-Erinnerungen – Banner (Startseite) ===== */
.rem-banner{display:flex;flex-direction:column;gap:8px;margin:0 0 14px;}
.rem-item{display:flex;align-items:center;gap:11px;background:color-mix(in srgb,var(--c) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--c) 30%,var(--border));border-left:3px solid var(--c);border-radius:13px;padding:11px 12px;cursor:pointer;}
.rem-item:active{filter:brightness(.98);}
.rem-ic{font-size:19px;color:var(--c);flex:none;}
.rem-tx{flex:1;min-width:0;}
.rem-lbl{font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--c);}
.rem-t{font-size:13px;font-weight:650;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.rem-x{font-size:16px;color:var(--muted-1);flex:none;padding:3px;cursor:pointer;}

/* ===== Geburtstags-Banner (Startseite) – festlich, aber im App-Stil ===== */
.bday-hero{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;
  border-radius:16px;padding:12px 14px;margin:0 0 12px;cursor:pointer;color:#fff;
  background:linear-gradient(125deg,#f7b733,#ef6f3d 58%,#e14d8b);
  box-shadow:0 6px 18px rgba(225,120,60,.28);}
.bday-hero.me{background:linear-gradient(125deg,#ffb03a,#ff6a8b 55%,#a06cff);
  box-shadow:0 7px 22px rgba(170,90,190,.34);}
.bday-hero:active{filter:brightness(.97);}
.bday-cake{font-size:30px;flex:none;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.28));}
.bday-avs{display:flex;flex:none;}
.bday-avs>*{margin-left:-11px;box-shadow:0 0 0 2px #fff;border-radius:50%;}
.bday-avs>*:first-child{margin-left:0;}
.bday-more{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.28);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;
  margin-left:-11px;box-shadow:0 0 0 2px #fff;}
.bday-tx{flex:1;min-width:0;}
.bday-hd{font-size:15px;font-weight:800;line-height:1.15;text-shadow:0 1px 2px rgba(0,0,0,.22);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bday-sub{font-size:12px;font-weight:600;opacity:.93;margin-top:2px;text-shadow:0 1px 2px rgba(0,0,0,.18);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bday-chev{font-size:20px;flex:none;opacity:.85;}
.bday-confetti{position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(circle,rgba(255,255,255,.9) 1.4px,transparent 2px),
    radial-gradient(circle,rgba(255,255,255,.55) 1.4px,transparent 2px);
  background-size:26px 26px,40px 40px;background-position:0 0,13px 17px;
  animation:bdayDrift 7s linear infinite;}
@keyframes bdayDrift{from{background-position:0 0,13px 17px;}to{background-position:26px 26px,53px 57px;}}
@media (prefers-reduced-motion:reduce){.bday-confetti{animation:none;}}
/* Geburtstags-Karte im Tages-Sheet */
.bday-daycard{background:color-mix(in srgb,var(--amber) 13%,var(--surface));
  border:1px solid color-mix(in srgb,var(--amber) 45%,var(--border));border-radius:12px;
  padding:10px 12px;margin-bottom:12px;}
.bday-daycard-hd{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--amber);margin-bottom:4px;}
.bday-daycard-row{display:flex;align-items:center;gap:10px;padding:7px 0;}
.bday-daycard-row+.bday-daycard-row{border-top:1px solid color-mix(in srgb,var(--amber) 18%,transparent);}
.bday-daycard-row:active{filter:brightness(.98);}

/* ===== Wochenquiz ===== */
.quiz-tile-ph{background:linear-gradient(135deg,#7C5CFF,#4361ee 55%,#2ec5b6);display:flex;align-items:center;justify-content:center;}
.quiz-tile-emoji{font-size:52px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3));}
.quiz-tabs{display:flex;gap:6px;margin-bottom:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.quiz-tab{flex:none;border:1px solid var(--border);background:var(--surface);color:var(--muted-1);
  border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;}
.quiz-tab.on{background:var(--accent);color:#fff;border-color:var(--accent);}
.quiz-load,.quiz-empty{text-align:center;color:var(--muted-1);font-size:14px;padding:34px 16px;}
.quiz-empty{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:38px;}
.quiz-empty div{font-size:14px;max-width:260px;}
.quiz-hero{border-radius:18px;padding:20px 18px;color:#fff;background:linear-gradient(135deg,#5b6bff,#7C5CFF 55%,#b14cff);box-shadow:0 8px 22px rgba(90,80,200,.3);}
.quiz-hero-kw{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.85;}
.quiz-hero-t{font-size:22px;font-weight:800;margin-top:3px;text-shadow:0 1px 2px rgba(0,0,0,.2);}
.quiz-hero-s{font-size:13px;opacity:.92;margin-top:5px;line-height:1.4;}
.quiz-hero-done{margin-top:14px;font-size:14px;display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.16);border-radius:10px;padding:9px 12px;}
.quiz-cats{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;}
.quiz-cchip{font-size:11px;font-weight:700;color:var(--c);background:color-mix(in srgb,var(--c) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--c) 30%,var(--border));border-radius:999px;padding:4px 9px;}
.quiz-board-head{font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted-1);margin:2px 0 10px;}
.quiz-board{display:flex;flex-direction:column;gap:7px;}
.quiz-row{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:9px 12px;}
.quiz-row.me{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));background:color-mix(in srgb,var(--accent) 8%,var(--surface));}
.quiz-row.win{background:linear-gradient(90deg,color-mix(in srgb,var(--amber) 16%,var(--surface)),var(--surface));}
.quiz-rank{width:26px;text-align:center;font-weight:800;font-size:15px;flex:none;}
.quiz-row-n{flex:1;min-width:0;font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.quiz-row-sub{font-size:11px;font-weight:500;color:var(--muted-1);margin-top:1px;}
.quiz-row-sc{font-weight:800;font-size:17px;color:var(--accent);flex:none;}
.quiz-row-sc span{font-size:11px;font-weight:600;color:var(--muted-1);}
.quiz-arch{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:11px 12px;margin-bottom:8px;cursor:pointer;}
.quiz-arch:active{filter:brightness(.98);}
/* Spiel-Overlay */
.quiz-play{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;flex-direction:column;overscroll-behavior:contain;touch-action:pan-y;}
.quiz-top{display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;}
.quiz-x{width:34px;height:34px;flex:none;border:none;background:var(--surface-2);border-radius:50%;color:var(--text);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.quiz-prog{flex:1;height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden;}
.quiz-prog-fill{height:100%;background:var(--accent);border-radius:4px;transition:width .25s ease;}
.quiz-count{font-size:13px;font-weight:800;color:var(--muted-1);flex:none;min-width:40px;text-align:right;}
.quiz-body{flex:1;overflow-y:auto;padding:6px 18px 18px;}
.quiz-cat{display:inline-block;font-size:12px;font-weight:800;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent);border-radius:999px;padding:4px 11px;margin-bottom:14px;}
.quiz-q{font-size:20px;font-weight:800;line-height:1.3;margin-bottom:20px;}
.quiz-opts{display:flex;flex-direction:column;gap:10px;}
.quiz-opt{display:flex;align-items:center;gap:12px;text-align:left;width:100%;border:1.5px solid var(--border);background:var(--surface);border-radius:14px;padding:14px 14px;font-family:inherit;font-size:15px;color:var(--text);cursor:pointer;transition:border-color .15s,background .15s;}
.quiz-opt:active{border-color:var(--accent);}
.quiz-opt-k{width:26px;height:26px;flex:none;border-radius:50%;background:var(--surface-2);color:var(--muted-1);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;}
.quiz-opt-t{flex:1;font-weight:600;}
.quiz-opt-ic{flex:none;font-size:19px;}
.quiz-opt.correct{border-color:var(--green);background:color-mix(in srgb,var(--green) 14%,var(--surface));}
.quiz-opt.correct .quiz-opt-k{background:var(--green);color:#fff;}
.quiz-opt.correct .quiz-opt-ic{color:var(--green);}
.quiz-opt.wrong{border-color:var(--red);background:color-mix(in srgb,var(--red) 12%,var(--surface));}
.quiz-opt.wrong .quiz-opt-k{background:var(--red);color:#fff;}
.quiz-opt.wrong .quiz-opt-ic{color:var(--red);}
.quiz-opt.dim{opacity:.55;}
.quiz-exp{margin-top:16px;font-size:13.5px;line-height:1.5;color:var(--text);background:var(--surface-2);border-radius:12px;padding:12px 14px;}
/* Texteingabe (Flaggen/Hauptstädte) */
.quiz-input-wrap{margin-top:4px;}
.quiz-input{width:100%;border:1.5px solid var(--border);background:var(--surface);border-radius:14px;padding:15px 16px;
  font-size:17px;font-weight:600;color:var(--text);font-family:inherit;outline:none;}
.quiz-input:focus{border-color:var(--accent);}
.quiz-input-wrap.correct .quiz-input{border-color:var(--green);background:color-mix(in srgb,var(--green) 12%,var(--surface));}
.quiz-input-wrap.wrong .quiz-input{border-color:var(--red);background:color-mix(in srgb,var(--red) 10%,var(--surface));}
.quiz-inres{margin-top:12px;font-size:15px;font-weight:700;}
.quiz-inres.ok{color:var(--green);}
.quiz-inres.no{color:var(--red);}
.quiz-foot{padding:12px 18px calc(14px + env(safe-area-inset-bottom,0px));}
.quiz-next{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;}
/* Ergebnis */
.quiz-result{flex:1;overflow-y:auto;display:flex;flex-direction:column;justify-content:center;padding:24px 22px calc(24px + env(safe-area-inset-bottom,0px));text-align:center;}
.quiz-res-ring{position:relative;width:154px;height:154px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;
  background:conic-gradient(var(--accent) calc(var(--p) * 3.6deg), var(--surface-2) 0);}
.quiz-res-ring::after{content:'';position:absolute;inset:13px;border-radius:50%;background:var(--bg);}
.quiz-res-num{position:relative;font-size:42px;font-weight:800;color:var(--text);line-height:1;}
.quiz-res-num span{font-size:19px;color:var(--muted-1);font-weight:700;}
.quiz-res-msg{font-size:20px;font-weight:800;margin-top:14px;}
.quiz-res-sub{font-size:13px;color:var(--muted-1);margin-top:5px;}
/* Auflösung */
.quiz-review{padding-top:2px;}
.quiz-rev-item{border-bottom:1px solid var(--border);padding:12px 0;}
.quiz-rev-q{display:flex;gap:9px;font-weight:700;font-size:14px;line-height:1.35;}
.quiz-rev-ic{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;}
.quiz-rev-ic.ok{background:var(--green);}
.quiz-rev-ic.no{background:var(--red);}
.quiz-rev-a{font-size:13px;color:var(--muted-1);margin:5px 0 0 31px;}
.quiz-rev-e{font-size:12.5px;color:var(--muted-1);margin:4px 0 0 31px;font-style:italic;opacity:.9;}
/* In-Overlay-Bestätigung (Abbrechen) */
.quiz-confirm{position:absolute;inset:0;background:rgba(8,12,20,.55);display:flex;align-items:center;justify-content:center;padding:24px;z-index:2;}
.quiz-confirm-box{background:var(--surface);border-radius:18px;padding:20px;max-width:320px;width:100%;box-shadow:var(--shadow-lg);}

/* ===== Behördenportal – einklappbare Kategorien ===== */
.beh-acc{background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:10px;padding:11px 13px;box-shadow:var(--shadow);}
.beh-acc-h{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;}
.beh-acc .list{margin-top:8px;}

/* ===== News-Ticker (Startseite, unter Avatar / über Suche) ===== */
.newsticker{display:flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:13px;height:38px;padding:0 6px 0 0;margin:0 0 12px;overflow:hidden;cursor:pointer;transition:filter .12s;}
.newsticker:active{filter:brightness(.97);}
.newsticker .nt-ico{flex:none;width:34px;display:flex;align-items:center;justify-content:center;color:var(--muted-1);font-size:17px;}
.newsticker.has-eil .nt-ico{color:var(--red);}
.nt-vp{flex:1;min-width:0;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.nt-track{display:inline-flex;align-items:center;gap:16px;white-space:nowrap;will-change:transform;animation:ntmarquee 90s linear infinite;}
.newsticker:active .nt-track{animation-play-state:paused;}
.nt-it{font-size:13px;color:var(--text);font-weight:550;}
.nt-it .nt-src{color:var(--blue);font-weight:700;}
.nt-eil{background:var(--red);color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.03em;padding:2px 6px;border-radius:6px;display:inline-block;line-height:1.3;}
.nt-sep{color:var(--muted-1);opacity:.45;}
.nt-more{color:var(--muted-1);flex:none;font-size:16px;margin-left:2px;}
@keyframes ntmarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .nt-track{animation-duration:120s;} }
/* Allgemeiner Kalender (kompakt): Zahl oben anheften, Platz für gestapelte Striche darunter */
.cal-month:not(.cal-month-tall) .cal-cell:not(.big){justify-content:flex-start;padding-top:6px;min-height:54px;}
/* Eintägige Termine: je Termin ein farbiger, abgerundeter Strich (gestapelt, am Zellenboden) */
.cal-lines{margin-top:auto;width:100%;padding:0 6px 1px;display:flex;flex-direction:column;gap:2px;align-items:stretch;}
.cal-lines i{height:3px;border-radius:2px;display:block;}
.cal-lines b{font-size:8px;font-weight:700;color:var(--muted-1);line-height:1;text-align:center;margin-top:1px;}
.cal-more{font-size:9px;font-weight:700;color:var(--muted-1);line-height:1;}
/* Feiertag-Label in Tageszelle */
.cal-feiertag{font-size:7.5px;font-weight:700;color:var(--amber);text-transform:uppercase;
  letter-spacing:.02em;line-height:1;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Mini-Avatare in Tageszelle */
.cal-mini-avs{display:flex;gap:1px;align-items:center;margin-top:auto;}
.cal-mini-av{width:13px;height:13px;border-radius:50%;object-fit:cover;border:1px solid var(--surface);}
.cal-mini-more{font-size:8px;font-weight:700;color:var(--muted-1);}
/* Feiertag in Wochenansicht */
.wk-feiertag{font-size:11px;font-weight:600;color:var(--amber);margin-left:8px;}
/* Feiertag in Agenda */
.agenda-feiertag{font-size:11px;font-weight:600;color:var(--amber);margin-left:8px;vertical-align:middle;}

/* Wochenliste */
.wk-day{margin-bottom:9px;}
.wk-head{font-size:13.5px;color:var(--text);margin-bottom:5px;display:flex;align-items:center;gap:8px;cursor:pointer;}
.wk-head b{font-weight:750;}
.wk-day.today .wk-head{color:var(--accent);}
.wk-empty{color:var(--muted-1);font-size:12.5px;padding:1px 2px 5px;border-bottom:1px solid var(--border-2);}
.wk-evs{display:flex;flex-direction:column;gap:4px;}
/* Farbig hervorgehobene Terminzeile (Woche + Agenda) */
.ev-row.ev-colored{border-top:none;padding:7px 11px;border-radius:10px;cursor:pointer;gap:8px;display:flex;align-items:center;}
.ev-row.ev-colored>div{flex:1;min-width:0;}
.ev-row.ev-colored:first-child{border-top:none;}
.ev-row.ev-colored .ev-s{font-size:12px;margin-top:1px;}
.ev-row.ev-colored .pill{flex:none;align-self:center;}
/* Bearbeitungsprotokoll */
.ev-audit{font-size:10.5px;color:var(--muted-1);margin-top:2px;display:flex;align-items:center;gap:4px;}

/* Wochenplan – tippbare Terminblöcke */
.wp-block{position:absolute;left:2px;right:2px;z-index:2;cursor:pointer;overflow:hidden;
  padding:2px 4px;border-radius:5px;
  background:color-mix(in srgb,var(--c) 18%,var(--surface));
  border:1px solid color-mix(in srgb,var(--c) 32%,var(--border));
  border-left:3px solid var(--c);transition:filter .1s;}
.wp-block:active{filter:brightness(.94);}
.wp-block-t{font-size:9.5px;font-weight:700;color:var(--c);line-height:1.15;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;}
.wp-block-s{font-size:8.5px;color:var(--muted-1);margin-top:1px;white-space:nowrap;}
/* Ganztägige Abwesenheiten – schmale Chips oberhalb der Dienstzeit */
.wp-allday{min-width:0;cursor:pointer;border-radius:0 5px 5px 0;padding:3px 5px;
  background:color-mix(in srgb,var(--c) 16%,var(--surface));
  border-left:3px solid var(--c);transition:filter .1s;}
.wp-allday:active{filter:brightness(.94);}
.wp-allday span{display:block;font-size:9.5px;font-weight:700;color:var(--c);line-height:1.1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Agenda */
.agenda-day{margin-bottom:13px;}
.agenda-h{font-size:13px;font-weight:750;color:var(--text);margin:0 2px 7px;
  text-transform:uppercase;letter-spacing:.03em;}

/* ============================================================
   Eintragen-Formulare
   ============================================================ */
.add-choice{display:flex;align-items:center;gap:13px;width:100%;background:var(--surface-2);
  border:1px solid var(--border);border-radius:14px;padding:13px 14px;margin-bottom:9px;cursor:pointer;
  font-family:inherit;text-align:left;}
.add-choice:active{transform:scale(.99);}
.add-ic{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  font-size:21px;flex:none;}
.add-l{font-size:15px;font-weight:650;color:var(--text);}
.add-go{margin-left:auto;color:var(--muted-1);font-size:18px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.teiln{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px;}
.tchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface);
  color:var(--muted-1);font-family:inherit;font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:999px;
  cursor:pointer;opacity:.7;transition:.15s;}
.tchip.on{opacity:1;color:var(--text);border-color:color-mix(in srgb,var(--c) 55%,var(--border));
  background:color-mix(in srgb,var(--c) 14%,var(--surface));}

/* Avatar-Picker (Teilnehmer-Auswahl im Formular) */
/* Trupp-Aufteilung im Einsatz-Formular */
.trupp-block{margin-bottom:4px;}
.trupp-block.multi{border:1px solid var(--border);border-left:4px solid var(--tc);border-radius:12px;
  padding:12px 12px 2px;margin-bottom:12px;background:color-mix(in srgb,var(--tc) 5%,var(--surface));}
.trupp-hd{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.trupp-dot{width:11px;height:11px;border-radius:50%;flex:none;}
.trupp-num{font-weight:800;font-size:14px;flex:1;}
.trupp-del{background:none;border:none;color:var(--muted-1);cursor:pointer;padding:2px 4px;font-size:17px;line-height:1;}
.trupp-row2{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:2px;}
.trupp-row2 .field{flex:1;min-width:130px;margin-bottom:8px;}
.av-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.av-chip{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 6px 8px;
  border-radius:14px;border:2.5px solid transparent;background:var(--surface-2);
  font-family:inherit;cursor:pointer;min-width:60px;opacity:.65;transition:.15s;}
.av-chip.on{opacity:1;border-color:var(--c,var(--accent));
  background:color-mix(in srgb,var(--c,var(--accent)) 13%,var(--surface));}
.av-pick{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--surface-3);display:block;}
.av-chip span{font-size:10.5px;font-weight:600;color:var(--muted-1);line-height:1.2;
  text-align:center;max-width:60px;word-break:break-word;}
.av-chip.on span{color:var(--fg);}

/* Einsatz-Farbtyp Chips */
.ecol-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:20px;
  font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;
  border:1.5px solid var(--border);background:var(--surface);color:var(--muted-1);transition:all .12s;}
.ecol-chip.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--text);}
.ecol-dot{width:10px;height:10px;border-radius:50%;flex:none;}
.ecol-dot-def{background:var(--red);opacity:.6;}

/* Fortbildungs-Detail Sheet */
.det-rows{display:flex;flex-direction:column;gap:0;border-radius:14px;overflow:hidden;border:1px solid var(--border);}
.det-row{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;background:var(--surface);border-bottom:1px solid var(--border);}
.det-row:last-child{border-bottom:none;}
.det-ic{font-size:17px;color:var(--muted-1);margin-top:1px;flex:none;width:18px;text-align:center;}
.det-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted-1);margin-bottom:2px;}
.det-val{font-size:14.5px;color:var(--fg);}

/* Fortbildungs-Kategorie Event-Karte */
.fb-ev-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:13px 14px;cursor:pointer;transition:.12s;}
.fb-ev-card:active{opacity:.75;}
.fb-ev-title{font-weight:700;font-size:15px;margin-bottom:6px;color:var(--fg);}
.fb-ev-meta{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--muted-1);font-size:12.5px;}
.fb-ev-meta i{margin-right:3px;font-size:13px;vertical-align:-1px;}
.fb-ev-parts{display:flex;gap:3px;margin-top:9px;flex-wrap:wrap;}

/* Fortbildung: Ampel-Dot auf Karte */
.fb-ampel-dot{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.3);}
/* Fälligkeiten-Box */
.fb-fällig-box{background:color-mix(in srgb,var(--amber) 8%,var(--surface));
  border:1px solid color-mix(in srgb,var(--amber) 30%,transparent);
  border-radius:14px;padding:14px;margin-bottom:4px;}
.fb-fällig-ok{background:color-mix(in srgb,var(--green) 8%,var(--surface));
  border:1px solid color-mix(in srgb,var(--green) 30%,transparent);
  border-radius:14px;padding:14px;margin-bottom:4px;
  display:flex;align-items:center;gap:10px;}
.fb-fällig-head{font-size:11px;font-weight:800;color:var(--amber);text-transform:uppercase;
  letter-spacing:.5px;margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.fb-fällig-row{padding:8px 0;border-bottom:1px solid var(--border-2);}
.fb-fällig-row:last-child{border-bottom:none;padding-bottom:0;}
/* Fortschrittsbalken */
.fb-prog-track{height:5px;background:var(--surface-2);border-radius:999px;overflow:hidden;margin-top:6px;}
.fb-prog-fill{height:100%;border-radius:999px;transition:width .4s;}
/* Soll-Block in Kategorie-Detail */
.fb-soll-block{background:var(--surface-2);border-radius:12px;padding:14px;margin:12px 14px 4px;}

/* ============================================================
   Mein Bereich · Profil-Dashboard (angelehnt an UI-Referenzen)
   ============================================================ */
.profile-hero{position:relative;border-radius:22px;overflow:hidden;height:200px;margin-top:4px;
  box-shadow:var(--shadow);}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 18%;transform:scale(1.04);}
.hero-veil{position:absolute;inset:0;background:
  linear-gradient(180deg, color-mix(in srgb,var(--pc) 30%,transparent) 0%, transparent 30%, rgba(8,12,20,.35) 60%, rgba(8,12,20,.88) 100%);}
.hero-set{position:absolute;top:10px;right:8px;color:#fff;z-index:2;}
.hero-content{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;z-index:1;}
.hero-content .av{box-shadow:0 0 0 3px rgba(255,255,255,.85),0 0 0 6px color-mix(in srgb,var(--pc) 70%,transparent) !important;margin-bottom:8px;}
.hero-name{font-size:24px;font-weight:800;color:#fff;letter-spacing:-.02em;text-shadow:0 2px 12px rgba(0,0,0,.5);}
.hero-role{font-size:13px;color:rgba(255,255,255,.92);display:flex;align-items:center;gap:7px;text-shadow:0 2px 10px rgba(0,0,0,.5);}

/* Ring-Gauges */
.ring-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.ring-tile{display:flex;flex-direction:column;align-items:center;gap:6px;}
.ring{width:84px;height:84px;}
.ring-bg{fill:none;stroke:var(--border);stroke-width:8;}
.ring-fg{fill:none;stroke-width:8;stroke-linecap:round;transform:rotate(-90deg);transform-origin:44px 44px;
  transition:stroke-dashoffset .7s cubic-bezier(.2,.8,.25,1);}
.ring-v{fill:var(--text);font-size:24px;font-weight:800;text-anchor:middle;font-family:inherit;}
.ring-label{font-size:12px;font-weight:650;color:var(--muted-1);}

/* Balkendiagramm */
.bars{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;height:130px;}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;}
.bar-v{font-size:12px;font-weight:700;color:var(--text);}
.bar-track{width:100%;max-width:34px;flex:1;display:flex;align-items:flex-end;background:var(--surface-2);
  border-radius:8px;overflow:hidden;}
.bar-fill{width:100%;background:var(--accent);border-radius:8px;min-height:4px;
  transition:height .6s cubic-bezier(.2,.8,.25,1);}
.bar-l{font-size:11px;color:var(--muted-1);font-weight:600;}

/* ============================================================
   UAS · Flugwetter
   ============================================================ */
.wx-load{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted-1);
  font-size:13.5px;padding:20px 0;}
.spin{display:inline-block;animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.lnk{color:var(--accent);font-weight:650;cursor:pointer;text-decoration:none;font-size:12.5px;}
.wx-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px;}
.wx-top b{font-size:15px;}
/* UAS-Karte (Leaflet) */
.wx-map-wrap{position:relative;margin-bottom:12px;}
#wx-map{position:relative;height:210px;width:100%;border-radius:14px;z-index:0;background:var(--surface-2);}
.wx-map-expand{position:absolute;top:8px;right:8px;z-index:1;display:flex;align-items:center;gap:6px;
  padding:7px 11px;border:none;border-radius:10px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:700;
  background:rgba(8,12,20,.72);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.35);backdrop-filter:blur(2px);}
.wx-map-expand i{font-size:14px;}
.wx-map-expand:active{background:rgba(8,12,20,.85);}
.leaflet-container{font:inherit;border-radius:14px;background:var(--surface-2);}
.wx-map-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;}
.wx-rad-group{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:2px;gap:2px;}
.wx-rad{border:none;background:transparent;color:var(--muted-1);font-size:12px;font-weight:700;padding:6px 9px;border-radius:8px;cursor:pointer;}
.wx-rad.on{background:var(--accent);color:var(--accent-ink);}
.wx-mybtn{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);font-size:12px;font-weight:700;padding:7px 11px;border-radius:10px;cursor:pointer;}
.wx-mybtn i{color:var(--accent);font-size:14px;}
.wx-maphint{font-size:11px;color:var(--muted-1);text-align:center;margin-top:6px;}
.wx-map-off{height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  background:var(--surface-2);border:1px dashed var(--border);border-radius:14px;color:var(--muted-1);padding:0 16px;}
.wx-map-off i{font-size:28px;color:var(--muted-1);}
.wx-pin{background:none;border:none;}
.wx-pin span{display:block;width:18px;height:18px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--accent);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45);margin:3px;}
/* UAS: Koordinaten-senden-Button + Entfernungsanzeige */
.uas-coord-btn{display:flex;align-items:center;gap:10px;width:100%;margin-bottom:14px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 86%,#000),var(--accent));
  color:var(--accent-ink);border:none;border-radius:16px;padding:15px 16px;
  font-size:15px;font-weight:750;cursor:pointer;box-shadow:var(--shadow);font-family:inherit;}
.uas-coord-btn>span{flex:1;text-align:left;}
.uas-coord-btn>i{font-size:20px;flex:none;}
.uas-coord-btn:active{filter:brightness(.95);}
.coord-dist{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  color:var(--green);background:color-mix(in srgb,var(--green) 12%,var(--surface-2));border-radius:10px;padding:9px 12px;}
.coord-dist.over{color:var(--red);background:color-mix(in srgb,var(--red) 12%,var(--surface-2));}
.coord-dist i{font-size:16px;}
.ampel{display:flex;align-items:center;gap:12px;background:color-mix(in srgb,var(--ac) 12%,var(--surface));
  border:1px solid color-mix(in srgb,var(--ac) 40%,transparent);border-radius:14px;padding:12px 14px;margin-bottom:14px;}
.ampel>i{font-size:30px;color:var(--ac);flex:none;}
.ampel-t{font-size:15px;font-weight:750;color:var(--ac);}
.ampel-s{font-size:12.5px;color:var(--muted-1);margin-top:1px;}
.wx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.wx-cell{background:var(--surface-2);border-radius:13px;padding:12px 6px;text-align:center;}
.wx-cell>i{font-size:20px;color:var(--accent);}
.wx-v{font-size:16px;font-weight:750;margin-top:5px;letter-spacing:-.01em;}
.wx-l{font-size:11px;color:var(--muted-1);margin-top:1px;}
.wx-note{font-size:11px;color:var(--muted-1);text-align:center;margin-top:12px;line-height:1.5;}
.wx-zones{margin-top:14px;border-top:1px solid var(--border);padding-top:12px;}
.wx-zones-head{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:650;color:var(--text-2);margin-bottom:8px;}
.wx-zones-head i{font-size:16px;color:var(--amber);}
.wx-zones-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px;}
.wx-ztag{font-size:11px;padding:3px 8px;border-radius:8px;background:var(--surface-2);color:var(--muted-1);border:1px solid var(--border);}
.wx-zones-note{font-size:12px;color:var(--muted-1);margin:2px 0 9px;line-height:1.45;}
.wx-zones-btns{display:flex;flex-direction:column;gap:7px;}
.wx-zones-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:9px 0;border-radius:11px;background:color-mix(in srgb,var(--amber) 15%,var(--surface-2));color:var(--amber);font-size:13px;font-weight:650;text-decoration:none;border:1px solid color-mix(in srgb,var(--amber) 30%,transparent);}
.wx-zones-btn.ghost{background:var(--surface-2);color:var(--text);border-color:var(--border);}

/* UAS – Quartal-Selector */
.uas-q-bar{display:flex;align-items:center;gap:10px;padding:12px 14px;}
.uas-sel{flex:1;margin:0;}

/* UAS – Piloten-Fortschritt */
.uas-pilot-grid{display:flex;flex-direction:column;gap:14px;padding:14px 16px;}
.uas-pilot-card{display:flex;align-items:center;gap:14px;}
.uas-pilot-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.uas-pilot-name{font-size:14px;font-weight:700;line-height:1.2;}
.uas-prog-track{height:10px;background:var(--surface-2);border-radius:5px;overflow:hidden;
  border:1px solid var(--border);}
.uas-prog-fill{height:100%;border-radius:5px;transition:width .4s ease;}
.uas-prog-meta{font-size:12px;color:var(--muted-1);line-height:1.3;}

/* ============================================================
   Schießfortbildung – Status-Karten
   ============================================================ */
.schuss-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px;}
.schuss-card{background:none;border:none;padding:0;cursor:pointer;font-family:inherit;text-align:left;width:100%;}
.schuss-card-inner{border-radius:14px;padding:12px 13px;display:flex;flex-direction:column;gap:5px;
  border:1px solid var(--border);transition:opacity .15s;}
.schuss-card:active .schuss-card-inner{opacity:.75;}
.schuss-card-lbl{font-size:13px;font-weight:700;color:var(--text);line-height:1.25;}
.schuss-card-st{font-size:12px;font-weight:650;display:flex;align-items:center;gap:4px;}
.schuss-card-date{font-size:11px;color:var(--muted-1);margin-top:3px;display:flex;align-items:center;gap:4px;}
.schuss-ref-val{font-size:11px;color:var(--muted-1);}

/* Schuss-Rechner im Sheet */
.schuss-calc-row{display:flex;align-items:flex-end;gap:8px;margin-bottom:4px;}
.schuss-calc-cell{flex:1;min-width:0;display:flex;flex-direction:column;}
.schuss-calc-op{font-size:22px;font-weight:700;color:var(--muted-1);padding-bottom:10px;flex:none;}
.schuss-ref-box{background:var(--surface-2);font-weight:700;font-size:17px;
  text-align:center;display:flex;align-items:center;justify-content:center;}
.schuss-hint{font-size:12.5px;font-weight:600;min-height:18px;margin-top:4px;}

/* Toggle */
.toggle-row{display:flex;align-items:center;gap:12px;padding:10px 0;cursor:pointer;user-select:none;}
.toggle-ic{width:46px;height:26px;border-radius:13px;position:relative;flex:none;transition:background .2s;}
.toggle-ic::after{content:'';position:absolute;width:20px;height:20px;border-radius:50%;
  top:3px;background:#fff;transition:transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.3);}
.t-on{background:var(--green);}
.t-on::after{transform:translateX(22px);}
.t-off{background:var(--muted-1);}
.t-off::after{transform:translateX(3px);}

/* DSA – Deutsches Sportabzeichen */
.dsa-gender-row{display:flex;gap:10px;margin-bottom:12px;}
.dsa-gender-btn{flex:1;padding:10px 0;border-radius:12px;border:2px solid var(--muted-1);
  background:var(--surface-2);color:var(--text-2);font-size:14px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:6px;transition:all .18s;}
.dsa-gender-btn.dsa-g-on{border-color:var(--accent);background:var(--accent-tint);color:var(--accent);}
/* Je Teilbereich eine eigene Kachel in seiner Farbe, Beschriftung oben,
   Felder darunter über die volle Breite (Wunsch Ecki 06.08.2026 – vorher
   quetschten sie sich neben einem 90-px-Label und ragten aus dem Bild).
   min-width:0 bleibt Pflicht, sonst blähen die festen Feldbreiten die
   Zeile wieder auf; flex-wrap ist der Notausgang für schmale Geräte. */
.dsa-disc-row{display:flex;flex-direction:column;gap:7px;margin-bottom:10px;
  padding:11px 13px;border-radius:14px;border-left:4px solid var(--c);
  background:linear-gradient(104deg,color-mix(in srgb,var(--c) 15%,var(--surface)) 0%,
    color-mix(in srgb,var(--c) 5%,var(--surface)) 55%,var(--surface) 100%);
  box-shadow:var(--shadow);}
.dsa-disc-lbl{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--c);display:flex;align-items:center;gap:7px;}
.dsa-disc-lbl::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);flex:none;}
.dsa-disc-fields{display:flex;gap:8px;min-width:0;flex-wrap:wrap;}
.dsa-sport-in{flex:1;min-width:0;}
.dsa-wert-sel{flex:0 1 100px;width:auto;min-width:84px;}
/* v539: Übung aus dem DOSB-Katalog (Trommel), Leistung, Datum, Sollwerte */
.dsa-sport-btn{flex:1;min-width:0;text-align:left;cursor:pointer;font-family:inherit;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dsa-sport-btn.leer{color:var(--muted-1);font-weight:500;}
/* Grundbreiten zusammen unter der schmalsten Spalte halten (320-px-Gerät:
   224 px). flex-wrap bricht um, BEVOR geschrumpft wird – zu große
   Grundbreiten schickten das Datumsfeld sonst in eine zweite Zeile. */
.dsa-leist-in{flex:1 1 78px;min-width:0;}
.dsa-datum-in{flex:0 1 126px;width:auto;min-width:118px;font-size:12.5px;color:var(--muted-1);}
.dsa-soll{font-size:11px;color:var(--muted-1);line-height:1.5;}
.dsa-soll b{color:var(--text-2);font-weight:750;}
.dsa-soll:empty,.dsa-mhint:empty{display:none;}
.dsa-mhint{font-size:11px;color:var(--muted-1);line-height:1.4;}
/* Karten der Übungs-Trommel */
/* Farbe kommt je Disziplingruppe aus dem Skript (--c). Der Verlauf läuft
   seitlich aus statt in ein weißes Feld zu kippen (Wunsch Ecki
   06.08.2026: „nicht ein einfaches weißes Feld, sondern ein Farbverlauf,
   von der einen Seite zur anderen leicht auslaufend"). */
/* .pk-dcard steht weiter unten in dieser Datei und gewinnt bei gleicher
   Spezifität – deshalb hier zweistufig, sonst schlagen deren
   align-items:center und padding durch (der Textblock war dadurch
   eingerückt und der Verlauf lief ins Leere). */
.pk-dcard.dsw-karte{flex-direction:column;align-items:stretch;gap:4px;padding:11px 14px;
  border-left:4px solid var(--c);
  background:linear-gradient(104deg,color-mix(in srgb,var(--c) 17%,var(--surface)) 0%,
    color-mix(in srgb,var(--c) 6%,var(--surface)) 52%,var(--surface) 100%);}
/* Foto randlos über der Karte – fällt weg, solange keins geliefert ist.
   4:3 wie geliefert, damit nichts abgeschnitten wird. */
.dsw-foto{display:block;flex:none;margin:-11px -14px 2px -10px;aspect-ratio:4/3;overflow:hidden;
  background:var(--surface-2);}
/* Textteil füllt den Rest, sitzt mittig darin und trägt den Verlauf
   selbst – unter dem Foto wäre der Verlauf der Karte sonst schon
   ausgelaufen und der Bereich wirkte weiß. */
.dsw-txt{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:4px;
  margin:0 -14px -11px -10px;padding:8px 14px 10px 10px;
  background:linear-gradient(104deg,color-mix(in srgb,var(--c) 15%,var(--surface)) 0%,
    color-mix(in srgb,var(--c) 5%,var(--surface)) 55%,var(--surface) 100%);}
.dsw-foto img{width:100%;height:100%;object-fit:cover;display:block;}
.dsw-titel{font-size:15.5px;font-weight:800;letter-spacing:-.01em;line-height:1.2;}
.dsw-meta{font-size:11.5px;font-weight:700;color:var(--c);}
.dsw-soll{display:flex;gap:8px;margin-top:2px;}
.dsw-soll span{flex:1;min-width:0;border-radius:9px;padding:5px 6px;text-align:center;
  background:color-mix(in srgb,var(--c) 10%,var(--surface-2));}
.dsw-soll small{display:block;font-size:9px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted-1);}
.dsw-soll b{display:block;font-size:13px;font-weight:800;margin-top:1px;}
.dsw-einheit{font-size:10px;color:var(--muted-1);text-align:right;}
.dsw-ohne,.dsw-zus{font-size:11.5px;color:var(--muted-1);font-weight:600;}
.dsw-hinweis{font-size:11px;color:var(--muted-1);line-height:15px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  max-height:30px;}
/* Platzhalter nicht in 32 px setzen – „Noch keine Wertungen eingetragen"
   füllte sonst drei Zeilen (06.08.2026) */
.dsa-total .muted{font-size:13.5px;font-weight:600;}
.dsa-total{text-align:center;font-size:32px;font-weight:800;padding:10px 0 4px;
  background:var(--surface-2);border-radius:14px;margin:12px 0;}

/* ============================================================
   Monatskalender – Wochenraster mit Balken für mehrtägige Events
   ============================================================ */
.cal-week-head{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:5px;padding:0 1px;}
.cal-month{border:.5px solid var(--border-2);border-radius:12px;overflow:hidden;background:var(--surface);}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:.5px solid var(--border-2);}
.cal-week:last-child{border-bottom:none;}
/* Mehrtägiger Balken */
.cal-mbar{
  height:15px;min-width:0;
  background:color-mix(in srgb,var(--bc) 20%,var(--surface));
  color:var(--bc);
  font-size:9px;font-weight:660;
  padding:0 5px;margin:0 1px 1.5px;
  display:flex;align-items:center;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  cursor:pointer;border-radius:3px;
  transition:filter .12s;
}
.cal-mbar:active{filter:brightness(.85);}
.cal-mbar.ms{border-radius:4px 0 0 4px;border-left:2.5px solid var(--bc);}
.cal-mbar.me{border-radius:0 4px 4px 0;}
.cal-mbar.ms.me{border-radius:4px;}
/* Kompakt-Modus: dünnes, durchgehendes Ribbon ohne Titel (wie Einsatzkalender) */
.cal-mbar.mini{height:6px;padding:0;margin:0 0 2px;border-radius:0;
  background:var(--bc);color:transparent;border-left:none;}
.cal-mbar.mini.ms{border-radius:3px 0 0 3px;margin-left:3px;border-left:none;}
.cal-mbar.mini.me{border-radius:0 3px 3px 0;margin-right:3px;}
.cal-mbar.mini.ms.me{border-radius:3px;}

/* ============================================================
   Konflikte – Detail-Sheet
   ============================================================ */
.conf-pair{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;
  padding:10px 12px;margin-bottom:10px;}
.conf-vs{font-size:12px;font-weight:650;color:var(--amber);
  display:flex;align-items:center;gap:5px;padding:4px 0;margin:0 4px;}

/* ============================================================
   Zeitauswahl (Auswahlrad = native <select>)
   ============================================================ */
.time-pick{display:flex;align-items:center;gap:6px;margin-top:6px;}
.time-sel{width:auto;flex:1;text-align:center;padding:10px 6px;
  appearance:none;-webkit-appearance:none;cursor:pointer;}
.time-sep{font-size:18px;font-weight:700;color:var(--muted-1);flex:none;}
/* Zeit-Rad: tippbare Pille */
.time-pill{display:inline-flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-top:6px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:11px 12px;
  font-size:16px;font-weight:800;color:var(--text);cursor:pointer;transition:filter .1s,border-color .1s;}
.time-pill i{color:var(--muted-1);font-size:16px;font-weight:400;}
.time-pill:active{filter:brightness(.97);}
.time-pill:focus-visible{outline:none;border-color:var(--accent);}
/* Dienstzeiten im Einsatz-Detail: schmale Spalten – Uhr-Symbol raus (lief
   ueber den Kastenrand, und dass es eine Zeit ist, ist selbsterklaerend),
   Pille kompakt und mittig (Rueckmeldung Ecki 30.07.2026) */
.dzrow .time-pill{justify-content:center;padding:9px 6px;font-size:15px;margin-top:4px;}
.dzrow .time-pill i{display:none;}
/* Zeit-Rad: Wähl-Overlay */
.tw-ov{position:fixed;inset:0;z-index:200;background:rgba(8,12,20,.5);display:flex;align-items:flex-end;justify-content:center;
  animation:tw-fade .18s ease;}
@keyframes tw-fade{from{opacity:0}to{opacity:1}}
.tw-card{background:var(--surface);width:100%;max-width:480px;border-radius:22px 22px 0 0;
  padding:16px 18px calc(18px + var(--safe-bot));box-shadow:var(--shadow-lg);animation:tw-up .22s cubic-bezier(.2,.8,.25,1);}
@keyframes tw-up{from{transform:translateY(18px)}to{transform:translateY(0)}}
.tw-head{font-weight:800;font-size:17px;text-align:center;margin-bottom:6px;}
.tw-wheels{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;height:220px;}
.tw-band{position:absolute;left:50%;transform:translateX(-50%);width:184px;top:88px;height:44px;
  border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);pointer-events:none;}
.tw-col{height:220px;overflow-y:auto;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;width:78px;text-align:center;}
.tw-col::-webkit-scrollbar{display:none;}
.tw-pad{height:88px;flex:none;}
.tw-item{height:44px;line-height:44px;font-size:23px;font-weight:600;color:var(--muted-1);
  scroll-snap-align:center;cursor:pointer;transition:color .12s,transform .12s,opacity .12s;opacity:.5;}
.tw-item.sel{color:var(--text);font-weight:800;transform:scale(1.12);opacity:1;}
.tw-colon{font-size:24px;font-weight:800;color:var(--text);flex:none;}
.tw-actions{display:flex;gap:10px;margin-top:14px;}
.tw-actions .btn{flex:1;justify-content:center;}
.tw-ok{background:var(--accent);color:var(--accent-ink);border:none;}

/* Zeitspannen-Editor fuers Schwarze Brett (v660): „Termin"-Knopf je Zeile +
   Overlay mit Kalender und Zeit-Trommel. Das Overlay liegt UNTER der Trommel
   (z-index 190 < .tw-ov 200), damit die Trommel darueber aufgeht. */
.bt-terminbtn{display:flex;align-items:center;gap:7px;width:100%;padding:9px 11px;
  border:1px dashed var(--border);border-radius:10px;background:var(--surface-2);
  color:var(--muted-1);font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-align:left;}
.bt-terminbtn>i:first-child{color:var(--accent);font-size:16px;flex:none;}
.bt-terminbtn .bt-terminlbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.bt-terminbtn.gesetzt{border-style:solid;border-color:color-mix(in srgb,var(--accent) 40%,var(--border));
  background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--text);}
.bt-tz-ov{position:fixed;inset:0;z-index:190;background:rgba(8,12,20,.5);
  display:flex;align-items:flex-end;justify-content:center;}
.bt-tz-card{background:var(--surface);width:100%;max-width:480px;border-radius:22px 22px 0 0;
  padding:16px 16px 20px;max-height:90vh;overflow-y:auto;box-shadow:0 -8px 30px rgba(0,0,0,.35);}
.bt-tz-ganz{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13.5px;font-weight:600;cursor:pointer;}
.bt-tz-ganz input{width:18px;height:18px;flex:none;}

/* ============================================================
   Dashboard – Start-Screen
   ============================================================ */
.dash-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;cursor:pointer;margin-top:12px;
  transition:transform .1s,box-shadow .1s;
  display:flex;flex-direction:column;}
/* Info-Bereich füllt die Karte – sonst zeigt eine in der Rasterzeile gestreckte,
   kürzere Karte unten einen weißen Streifen (Kartenhintergrund) */
.dash-section>.dash-info{flex:1 1 auto;}
.dash-section:active{transform:scale(.985);box-shadow:var(--shadow-lg);}
.dash-hero .dash-ph{height:200px;}
.dash-ph{height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;position:relative;
  /* Fotos freundlicher: leicht aufgehellt + minimal gesättigt (Eckis Wunsch –
     v. a. in dunklen Themes wirkten die Kacheln düster). Statischer Filter,
     wird einmal gemalt – keine Dauer-GPU-Last wie bei animierten Filtern. */
  filter:brightness(1.16) saturate(1.05);}
.dash-ph-badge{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:12px;font-weight:650;
  padding:5px 12px;border-radius:999px;backdrop-filter:blur(6px);}
.dash-avs{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;max-width:180px;}
/* Info-Panel unter dem Bild: komplementärer Ton je Hell-Theme (--info-tint), Dunkel-Themes neutral (--surface) */
.dash-info{padding:12px 14px;background:var(--info-tint, var(--surface));}
.dash-title{font-size:14px;font-weight:750;letter-spacing:.01em;}
.dash-sub{font-size:12.5px;color:var(--muted-1);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Frei gestaltbares Dashboard (Einheit): pro Person Reihenfolge + Größe */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;}
.dash-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;cursor:pointer;position:relative;transition:transform .1s;
  display:flex;flex-direction:column;}
.dash-tile>.dash-info{flex:1 1 auto;}   /* füllt die Karte – kein weißer Streifen bei kürzeren Kacheln */
.dash-tile.gross{grid-column:1 / -1;}
.dash-grid .dash-tile{margin-top:0;}    /* Einsatz/Fortbildung-Kacheln sind auch .dash-section (margin-top) → im Raster neutralisieren */
.dash-tile .dash-ph{height:116px;}
.dash-tile.gross .dash-ph{height:150px;}
.dash-tile:active{transform:scale(.985);}
.dash-badge{position:absolute;top:8px;right:8px;background:var(--red);color:#fff;border-radius:20px;
  padding:4px 9px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:4px;box-shadow:0 2px 6px rgba(0,0,0,.4);}
.dash-badge i{font-size:11px;}
/* Anordnen-Modus */
.dash-grid.arranging .dash-tile{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;
  animation:matWobble .4s ease-in-out infinite;}
.dash-grid.arranging .dash-tile:nth-child(2n){animation-delay:-.2s;}
body.reorder-dragging .dash-grid.arranging .dash-tile{animation:none!important;}
.dash-tile.dash-src{opacity:.32;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 60%,transparent);}
.dash-tile.dash-src,.dash-grid.arranging .dash-tile{transition:transform .18s cubic-bezier(.2,.8,.3,1);}
.dash-ghost{border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.45);opacity:.97;animation:none!important;}
.dash-size-btn{position:absolute;top:8px;left:8px;z-index:4;min-width:34px;height:30px;padding:0 9px;
  border-radius:999px;border:none;cursor:pointer;background:rgba(0,0,0,.6);color:#fff;
  font-size:13px;font-weight:800;font-family:inherit;letter-spacing:.03em;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.4);}
.dash-arr-bar{display:flex;align-items:center;gap:10px;margin:12px 0 2px;padding:10px 13px;border-radius:12px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-size:12.5px;font-weight:600;}
.dash-arr-bar span{flex:1;line-height:1.35;}
.dash-arr-bar button{flex:none;border:none;background:var(--accent);color:#fff;border-radius:999px;
  padding:8px 18px;font-weight:800;font-family:inherit;cursor:pointer;}
.dash-row{display:grid;grid-template-columns:3fr 5fr;gap:12px;margin-top:12px;}
.dash-row .dash-section{margin-top:0;}
/* Haupt-Dashboard: alle Foto-Karten einheitlich groß im 16:9-Format, Beschreibung darunter */
.home-cards .dash-ph{aspect-ratio:16/9;height:auto;}
.home-cards .dash-hero .dash-ph{aspect-ratio:16/9;height:auto;}
.home-cards .dash-row{grid-template-columns:1fr;}
/* Mein Bereich + Stärkekalender nebeneinander im 9:16-Hochformat */
.home-cards .dash-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;}
.home-cards .dash-row2 .dash-section{margin-top:0;}
.home-cards .dash-row2 .dash-ph{aspect-ratio:9/16;height:auto;}

/* Belehrungen (Infothek) */
.bel-block{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 15px;box-shadow:var(--shadow);margin-bottom:12px;}
.bel-block.bel-muted{background:var(--surface-2);box-shadow:none;}
.bel-title{font-weight:800;font-size:14px;color:var(--accent);margin-bottom:8px;}
.bel-muted .bel-title{color:var(--muted-1);font-size:12.5px;}
.bel-body{font-size:14.5px;line-height:1.62;color:var(--fg);}
.bel-muted .bel-body{font-size:12.5px;line-height:1.55;color:var(--muted-1);}
.bel-note{font-size:11px;color:var(--muted-1);line-height:1.5;margin-top:4px;padding:0 2px;}

/* Polizeiberichte (Infothek) */
.pol-list{display:flex;flex-direction:column;gap:10px;}
.pol-item{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 13px;cursor:pointer;box-shadow:var(--shadow);}
.pol-item:active{opacity:.8;}
.pol-item-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;}
.pol-item-ago{font-size:11.5px;color:var(--muted-1);flex:none;}
.pol-item-title{font-weight:700;font-size:14.5px;line-height:1.3;color:var(--fg);}
.pol-item-teaser{font-size:12.5px;color:var(--muted-1);margin-top:4px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.pol-item-src{font-size:11px;color:var(--accent);margin-top:8px;display:flex;align-items:center;gap:4px;}

/* Länder der Welt (Infothek → Nachschlagewerke) */
.land-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.02em;padding:1px 6px;border-radius:999px;vertical-align:middle;margin-left:5px;line-height:1.5;}
.land-badge.eu{background:rgba(37,99,235,.14);color:var(--blue);}
.land-badge.sg{background:rgba(22,163,74,.16);color:#16a34a;}
.land-badge.no{background:var(--surface-2);color:var(--muted-1);}
.land-hero{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:15px 16px;box-shadow:var(--shadow);margin-bottom:12px;}
.land-flag{font-size:52px;line-height:1;flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18));}
.land-name{font-weight:800;font-size:21px;line-height:1.15;color:var(--text);}
.land-off{font-size:12.5px;color:var(--muted-1);margin-top:2px;line-height:1.35;}
.land-badges{margin-top:8px;}
.land-badges .land-badge{margin-left:0;margin-right:6px;}
.land-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:4px 15px 10px;box-shadow:var(--shadow);}
.land-sec{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:14px 0 4px;}
.land-sec:first-child{margin-top:8px;}
.land-row{display:flex;gap:12px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--border);}
.land-row:last-child{border-bottom:none;}
.land-k{flex:0 0 40%;max-width:132px;font-size:12.5px;color:var(--muted-1);}
.land-v{flex:1;min-width:0;font-size:14px;color:var(--text);font-weight:600;word-break:break-word;}
.land-note{font-size:12px;color:var(--muted-1);line-height:1.5;margin:8px 0 2px;padding:8px 10px;background:var(--surface-2);border-radius:10px;}
/* Lagekarte (SVG-Locator, aus Natural-Earth-Grenzen selbst gerendert) */
.land-mapwrap{margin-bottom:12px;}
.land-map{width:100%;height:auto;max-height:260px;display:block;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;}
.land-map path{vector-effect:non-scaling-stroke;}
.land-map .lm-ctx path{fill:var(--muted-1);fill-opacity:.22;stroke:var(--surface);stroke-width:.6;stroke-opacity:.7;}
.land-map .lm-hl{fill:var(--accent);fill-opacity:.16;}
.land-map .lm-t{fill:var(--accent);fill-opacity:.95;stroke:#fff;stroke-opacity:.6;stroke-width:1;}
.land-map .lm-halo{fill:#fff;}
.land-map .lm-cap{fill:#e11d48;}
.land-map .lm-ring{fill:none;stroke:#e11d48;stroke-width:1.6;stroke-opacity:.85;}
.land-mapbox{position:relative;}
.land-mapmode{position:absolute;top:8px;right:8px;display:flex;gap:2px;background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid var(--border);border-radius:9px;padding:2px;backdrop-filter:blur(3px);}
.land-mapmode button{border:none;background:none;font-family:inherit;font-size:11px;font-weight:700;color:var(--muted-1);padding:4px 9px;border-radius:7px;cursor:pointer;line-height:1.3;}
.land-mapmode button.on{background:var(--accent);color:#fff;}
.land-mapcap{font-size:11.5px;color:var(--muted-1);text-align:center;margin-top:6px;}
.land-mapdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#e11d48;vertical-align:middle;box-shadow:0 0 0 2px var(--surface-2);}

/* ============================================================
   Schnappschüsse (Pinnwand) – Jahr/Monat, Jahres-Chips, Alben
   ============================================================ */
.snp-seg{display:flex;gap:6px;background:var(--surface-2);border-radius:12px;padding:4px;margin-bottom:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.snp-seg button{flex:1;border:none;background:none;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--muted-1);padding:8px 6px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.12s;}
.snp-seg button.on{background:var(--surface);color:var(--fg);box-shadow:var(--shadow);}
.snp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.snp-chips button{border:1.5px solid var(--border);background:var(--surface);color:var(--muted-1);font-family:inherit;font-size:12.5px;font-weight:700;padding:5px 13px;border-radius:20px;cursor:pointer;transition:.12s;}
.snp-chips button.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--fg);}
.snp-year{margin-bottom:4px;}
.snp-year-h{display:flex;align-items:center;gap:10px;padding:12px 4px;cursor:pointer;border-bottom:1px solid var(--border);}
.snp-month-h{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-1);margin:14px 2px 8px;}
.snp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.snp-thumb{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;cursor:pointer;background:var(--surface-2);}
.snp-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.snp-thumb-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.62) 0%,transparent 55%);pointer-events:none;}
.snp-thumb-cap{position:absolute;bottom:6px;left:7px;right:7px;}
.snp-thumb-t{font-size:11px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;margin-bottom:2px;}
.snp-thumb-m{display:flex;align-items:center;gap:4px;}
.snp-thumb-av{width:15px;height:15px;border-radius:50%;background-size:cover;flex:none;border:1px solid rgba(255,255,255,.4);}
.snp-thumb-m span{font-size:10px;color:rgba(255,255,255,.78);}
.snp-thumb-edit{position:absolute;top:7px;right:7px;width:30px;height:30px;border-radius:50%;border:none;background:rgba(0,0,0,.45);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.snp-thumb-edit i{font-size:14px;}
.snp-album-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.snp-album{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;cursor:pointer;box-shadow:var(--shadow);}
.snp-album-cover{position:relative;aspect-ratio:4/3;background-size:cover;background-position:center;background-color:var(--surface-2);display:flex;align-items:center;justify-content:center;}
.snp-album-info{padding:9px 11px;}
.snp-album-name{font-weight:750;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.snp-album-cnt{font-size:11.5px;color:var(--muted-1);margin-top:1px;}
.snp-album-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;}
/* Vollbild-Viewer (dreht im Querformat mit; object-fit:contain nutzt die volle Fläche) */
.snp-fs{position:fixed;inset:0;z-index:10000;background:#000;display:flex;align-items:center;justify-content:center;touch-action:none;overflow:hidden;}
/* Bild-Schiene: Vorgänger · Aktuell · Nachfolger — folgt dem Finger 1:1 (wie die Login-Trommel) */
.snp-fs-track{position:absolute;top:0;bottom:0;left:0;width:300vw;display:flex;will-change:transform;}
.snp-fs-slide{width:100vw;height:100%;flex:none;display:flex;align-items:center;justify-content:center;}
.snp-fs-img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .25s;user-select:none;-webkit-user-drag:none;}
.snp-fs-img.rot90{max-width:100dvh;max-height:100dvw;}
.snp-fs-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 12px 12px;background:linear-gradient(rgba(0,0,0,.55),transparent);transition:opacity .2s;}
.snp-fs-count{color:#fff;font-size:13px;font-weight:700;letter-spacing:.04em;}
.snp-fs-btn{width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;font-size:18px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);flex:none;}
.snp-fs-cap{position:absolute;left:0;right:0;bottom:0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,rgba(0,0,0,.74));color:#fff;transition:opacity .2s;}
.snp-fs-min .snp-fs-top,.snp-fs-min .snp-fs-cap{opacity:0;pointer-events:none;}
.snp-fs-cap-t{font-weight:800;font-size:16.5px;}
.snp-fs-cap-d{font-size:12.5px;opacity:.85;margin-top:3px;line-height:1.45;}
.snp-fs-cap-m{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:9px;font-size:12px;opacity:.92;}
.snp-fs-cap-av{width:22px;height:22px;border-radius:50%;background-size:cover;flex:none;border:1px solid rgba(255,255,255,.4);}
.snp-fs-actions{display:flex;gap:8px;margin-top:11px;}
.snp-fs-act{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:999px;border:none;
  background:rgba(255,255,255,.14);color:#fff;font-size:12.5px;font-weight:700;cursor:pointer;backdrop-filter:blur(6px);font-family:inherit;}

/* ============================================================
   Boot-Splash: Duderstadt-Wappen rotiert & löst sich auf → Login-Trommel
   ============================================================ */
#boot-splash{position:fixed;inset:0;z-index:20000;background:#0C1320;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  perspective:1500px;}
#boot-splash .boot-wappen{width:min(64vw,270px);max-height:72vh;object-fit:contain;
  border-radius:10px;filter:drop-shadow(0 12px 44px rgba(0,0,0,.55));
  transform:rotateY(0deg) scale(.9);opacity:0;transform-style:preserve-3d;backface-visibility:visible;-webkit-user-drag:none;}
#boot-splash.boot-go .boot-wappen{animation:bootWappen 1.6s cubic-bezier(.42,0,.25,1) forwards;}
#boot-splash.boot-go{animation:bootFade .55s ease 1.05s forwards;}
/* 360°-Drehung um die senkrechte Längsachse (3D), danach transparent auflösen */
@keyframes bootWappen{
  0%{transform:rotateY(0deg) scale(.9);opacity:0;}
  18%{opacity:1;}
  74%{transform:rotateY(360deg) scale(1.04);opacity:1;}
  100%{transform:rotateY(360deg) scale(1.16);opacity:0;}
}
@keyframes bootFade{to{opacity:0;}}
@media (prefers-reduced-motion:reduce){
  #boot-splash .boot-wappen{transform:none;}
  #boot-splash.boot-go .boot-wappen{animation:bootFade .5s ease .5s forwards;}
}

/* ============================================================
   Profil – Ring-Kacheln anklickbar
   ============================================================ */
.ring-tile:active{transform:scale(.95);}
.ring-tile .ring-label{font-size:12px;font-weight:650;color:var(--muted-1);}

/* ============================================================
   Teamchat
   ============================================================ */
.chat-overlay{position:fixed;inset:0;z-index:80;transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.25,1);will-change:transform;overflow:hidden;overscroll-behavior:none;}
.chat-overlay.chat-in{transform:translateX(0);}
/* Wisch-Navigation: neuen Screen von links/rechts hereingleiten (Infothek rein / zurück) */
#view-app{overflow-x:clip;}   /* clip statt hidden: klippt den Wisch-Slide, ohne sticky (Tab-/Kopfleiste) zu brechen */
@keyframes navInLeft{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes navInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
#view.nav-in-left{animation:navInLeft .28s cubic-bezier(.22,.8,.3,1)}
#view.nav-in-right{animation:navInRight .28s cubic-bezier(.22,.8,.3,1)}
/* „Neue Seite legt sich ueber die alte" (v665) – beim Oeffnen aus der
   Ordner-Trommel. Waehrend der Bewegung braucht #view einen EIGENEN
   Hintergrund und eine Ebene ueber dem eingefrorenen Standbild (z-index 10),
   aber unter der Tab-Leiste (20): sonst schiene die alte Seite durch, weil
   #view sonst durchsichtig ist und den Seitenhintergrund nur durchreicht. */
@keyframes seiteDrueber{from{transform:translateY(26px);opacity:0}to{transform:translateY(0);opacity:1}}
#view.seite-drueber{position:relative;z-index:11;background:var(--bg);
  animation:seiteDrueber .30s cubic-bezier(.22,.8,.3,1);}
.chat-panel{display:flex;flex-direction:column;height:100%;max-width:480px;margin:0 auto;
  background:var(--bg);}

/* Header */
.chat-header{display:flex;align-items:center;gap:10px;padding:calc(14px + var(--safe-top)) 14px 14px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  /* halbrunder, moderner Abschluss statt gerader Trennlinie */
  border-radius:0 0 22px 22px;box-shadow:0 7px 18px -11px rgba(0,0,0,.28);
  flex:none;position:relative;z-index:3;}
.chat-back{flex:none;}
/* Ab 7 Mitgliedern war die Avatarreihe 174 px breit und „flex:none" – für
   den Titel blieben 24 px, bei 320 px gar nichts (Prüfung 09.08.2026).
   Die Reihe darf jetzt schrumpfen und schneidet sich selbst ab. */
.chat-header-av-row{display:flex;gap:-4px;flex:0 1 auto;max-width:102px;overflow:hidden;}
.chat-hav{width:30px;height:30px;border-radius:50%;object-fit:cover;
  margin-left:-6px;border:2px solid var(--bg);background:var(--surface-2);}
.chat-hav:first-child{margin-left:0;}
.chat-hdr-tap{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer;}
.chat-header-info{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;}
.chat-header-title{font-size:16px;font-weight:750;color:var(--text);}
.chat-header-sub{font-size:11.5px;color:var(--muted-1);}

/* Nachrichten */
.chat-messages{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 12px 8px;display:flex;flex-direction:column;gap:4px;
  touch-action:pan-y;overscroll-behavior:contain;}   /* nur vertikal scrollen – kein seitliches Gummiband */
.chat-loading,.chat-empty{text-align:center;color:var(--muted-1);font-size:13.5px;
  margin:auto;display:flex;flex-direction:column;align-items:center;gap:10px;}
.chat-empty i{font-size:38px;opacity:.4;}

/* Chat-Übersicht (Liste aller Unterhaltungen) */
.chat-list{flex:1;overflow-y:auto;padding:6px 0 16px;}
.chat-list-item{display:flex;align-items:center;gap:12px;padding:11px 16px;cursor:pointer;
  transition:background .12s;}
.chat-list-item:active{background:var(--surface-2);}
.cli-av{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid var(--border);background:var(--surface-2);}
.cli-glyph{display:flex;align-items:center;justify-content:center;}
.cli-glyph i{font-size:22px;}
.cli-mid{flex:1;min-width:0;border-bottom:1px solid var(--border-2);padding-bottom:11px;
  margin-top:-11px;padding-top:11px;}
.chat-list-item:last-child .cli-mid{border-bottom:none;}
.cli-top{display:flex;align-items:baseline;gap:8px;}
.cli-name{font-size:15.5px;font-weight:700;color:var(--text);flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cli-time{font-size:11.5px;color:var(--muted-1);flex:none;}
.cli-time-unread{color:var(--accent);font-weight:700;}
.cli-bot{display:flex;align-items:center;gap:8px;margin-top:2px;}
.cli-preview{font-size:13px;color:var(--muted-1);flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cli-unread{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--accent);color:#fff;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;}

/* Auswahl-Zeile in Chat-Sheets (Person/Gruppe) */
.chat-pick-row{display:flex;align-items:center;gap:12px;padding:9px 4px;border-radius:10px;}
.chat-pick-row .cli-av{width:40px;height:40px;}

/* Zeitraum-Kalender im Anlegen/Bearbeiten-Formular */
.fcal{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;
  padding:8px 10px 10px;margin-bottom:2px;}
/* ---------- Urlaubsantrag prüfen (genehmigen · Rückfrage · ablehnen) ---------- */
.upl-pruef{padding:0 16px 20px;}
.upl-pruef-kopf{display:flex;align-items:center;gap:11px;padding:16px 0 10px;}
.upl-pruef-kopf b{display:block;font-size:17px;line-height:1.2;}
.upl-pruef-kopf span{display:block;font-size:12.5px;color:var(--muted-1);margin-top:2px;}
.upl-pruef-kopf img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;}
.upl-pruef-zr{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;
  padding:10px 12px;font-size:13.5px;font-weight:600;text-align:center;margin-bottom:14px;}
.upl-pruef-grund{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;
  padding:12px 14px;font-size:14px;line-height:1.5;font-style:italic;margin-bottom:8px;}
.upl-pruef-von{font-size:12px;color:var(--muted-1);text-align:center;margin-bottom:4px;}
/* Folgen-Block (v627): die Antwort auf „passt das in die Stärke?" direkt im
   Blatt. Nur Kipp-Tage werden gelistet; ohne Engpass ein ruhiger Einzeiler. */
.upl-pruef-folgen{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;
  padding:9px 12px;margin:0 0 8px;font-size:12.5px;line-height:1.55;font-variant-numeric:tabular-nums;}
.upl-pruef-folgen b{display:block;font-size:11px;color:var(--muted-1);font-weight:700;
  letter-spacing:.02em;margin-bottom:3px;}
.upl-pruef-folgen.ruhig{color:var(--muted-1);text-align:center;}
/* Namens-Pillen im grünen „Anträge zu prüfen"-Balken (v627) */
.upl-pend-btn{flex:none;display:inline-flex;align-items:center;font-size:12px;font-weight:700;
  padding:3px 10px;border-radius:999px;border:1px solid rgba(30,158,90,.55);
  background:var(--surface);color:var(--text);cursor:pointer;white-space:nowrap;}
.upl-pend-btn:active{filter:brightness(.94);}
/* Engpass-Spannen in der Dreizustands-Zeile (v627): amber = Quote erreicht,
   rot = überschritten. Knöpfe, weil ein Tipp zum Tag scrollt. */
.upl-eng-btn{flex:none;display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;
  padding:2px 8px;border-radius:999px;border:1px solid var(--amber);
  background:transparent;color:var(--amber);cursor:pointer;font-variant-numeric:tabular-nums;}
.upl-eng-btn.ueber{border-color:var(--red);color:#fff;background:var(--red);}
.upl-eng-btn:active{filter:brightness(.92);}
/* Rückgängig-Riegel nach dem Löschen (v628). Am body, nicht im Kopf:
   er muss die Jahresansicht (z-index 9200) und den go()-Neuaufbau
   überleben. Kein Dauer-Puls (Lehre v428). */
#upl-undo{position:fixed;left:50%;transform:translateX(-50%);z-index:9300;
  bottom:calc(96px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:12px;max-width:min(92vw,420px);
  background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:9px 10px 9px 16px;box-shadow:var(--shadow-lg);font-size:13px;color:var(--text);}
#upl-undo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#upl-undo button{flex:none;border:none;border-radius:999px;padding:7px 14px;
  background:var(--accent);color:var(--accent-ink);font-size:12.5px;font-weight:800;cursor:pointer;}
#upl-undo button:active{filter:brightness(.92);}
body.upl-voll-an #upl-undo{bottom:14px;}   /* in der Vollansicht gibt es keine Tabbar */

/* Jahressprung (v630): Pfeile am Titel der Vollansicht … */
.uplv-jahr{display:inline-flex;align-items:center;gap:2px;flex:none;}
.uplv-jb{width:26px;height:26px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);font-size:15px;font-weight:700;
  line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.uplv-jb:active{filter:brightness(.92);}
/* … und die Jahr-und-Monat-Wahl im Blatt */
.upl-jw-jahr{padding:7px 14px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);font-size:14px;font-weight:700;cursor:pointer;}
.upl-jw-jahr.an{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.upl-jw-monat{padding:11px 0;border-radius:11px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;}
.upl-jw-monat.an{border-color:var(--accent);color:var(--accent);font-weight:800;}
.upl-jw-monat.heute{box-shadow:inset 0 0 0 1.5px var(--green);}
.upl-jw-monat:active,.upl-jw-jahr:active{filter:brightness(.94);}
.upl-pruef-warn{background:color-mix(in srgb,var(--red) 12%,var(--surface));
  border:1px solid color-mix(in srgb,var(--red) 34%,var(--border));border-radius:12px;
  padding:10px 12px;font-size:12.5px;line-height:1.45;margin-bottom:12px;color:var(--red);}
.upl-pruef-ok{width:100%;margin-top:4px;background:var(--green);color:#fff;border:none;}
.upl-pruef-nein{width:100%;margin-top:8px;background:var(--red);color:#fff;border:none;}

/* Urlaub: was der gewählte Zeitraum wirklich kostet (ohne Sa/So/Feiertage) */
.f-utage{margin:6px 2px 2px;font-size:12.5px;line-height:1.45;color:var(--muted-1);
  display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}
.f-utage b{color:var(--green);font-size:13.5px;}
.f-utage .ti{color:var(--green);}
.fcal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
.fcal-title{font-weight:700;font-size:14.5px;}
.fcal-grid{display:grid;grid-template-columns:repeat(7,1fr);}
.fcal-wds{margin-bottom:2px;}
.fcal-wd{text-align:center;font-size:10.5px;font-weight:700;color:var(--muted-1);padding:2px 0;}
.fcal-cell{height:38px;display:flex;align-items:center;justify-content:center;font-size:13.5px;
  cursor:pointer;user-select:none;color:var(--text);border-radius:9px;}
.fcal-blank{cursor:default;}
.fcal-cell.fcal-in{background:color-mix(in srgb,var(--accent) 16%,var(--surface));border-radius:0;}
.fcal-cell.fcal-start,.fcal-cell.fcal-end{background:var(--accent);color:var(--accent-ink);font-weight:700;}
.fcal-cell.fcal-start{border-radius:9px 0 0 9px;}
.fcal-cell.fcal-end{border-radius:0 9px 9px 0;}
.fcal-cell.fcal-start.fcal-end{border-radius:9px;}
.fcal-cell.fcal-today:not(.fcal-in):not(.fcal-start):not(.fcal-end){box-shadow:inset 0 0 0 1.5px var(--accent);}
.fcal-sel{margin-top:9px;font-size:13px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  border-top:1px solid var(--border-2);padding-top:9px;}
.fcal-sel .muted{font-size:12px;}

/* Gruppen-Symbolbild & Farbprofil (Anlegen/Bearbeiten) */
.grp-img-ph{width:84px;height:84px;border-radius:50%;background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;font-size:30px;border:1px solid var(--border);}
.grp-img-edit{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;border-radius:50%;
  background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;
  border:2.5px solid var(--surface);font-size:14px;}
/* Bildausschnitt-Dialog (Gruppensymbol) */
.crop-ov{position:fixed;inset:0;z-index:5000;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;padding:20px;}
.crop-card{background:var(--surface);border-radius:18px;padding:18px;max-width:340px;width:100%;box-shadow:0 20px 50px rgba(0,0,0,.5);}
.crop-ttl{font-weight:700;font-size:16px;text-align:center;margin-bottom:3px;color:var(--text);}
.crop-hint{font-size:12px;color:var(--muted-1);text-align:center;margin-bottom:14px;}
.crop-vp{position:relative;margin:0 auto;overflow:hidden;border-radius:14px;background:#000;touch-action:none;cursor:grab;max-width:100%;}
.crop-vp:active{cursor:grabbing;}
.crop-img{position:absolute;left:0;top:0;transform-origin:top left;will-change:transform;user-select:none;-webkit-user-drag:none;}
.crop-mask{position:absolute;inset:0;pointer-events:none;box-shadow:0 0 0 999px rgba(0,0,0,.5);border-radius:50%;}
.crop-zoom{width:100%;margin:16px 0 6px;accent-color:var(--accent);}
.crop-btns{display:flex;gap:8px;margin-top:8px;}
.crop-btns .btn{flex:1;}
.grp-img-src{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:12.5px;font-weight:650;font-family:inherit;cursor:pointer;text-decoration:none;}
.grp-img-tip{margin:10px 4px 0;font-size:11.5px;line-height:1.45;color:var(--muted-1);text-align:center;}
/* In-App-Bildersuche */
.imgs-ov{position:fixed;inset:0;z-index:5001;background:rgba(3,5,10,.72);display:flex;align-items:flex-end;justify-content:center;
  padding:0;animation:fadeIn .16s ease;}
.imgs-card{width:100%;max-width:560px;max-height:88vh;background:var(--surface);border-radius:20px 20px 0 0;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -8px 30px rgba(0,0,0,.4);padding-bottom:env(safe-area-inset-bottom);}
.imgs-head{display:flex;gap:8px;align-items:center;padding:12px 12px 10px;border-bottom:1px solid var(--border);}
.imgs-q{flex:1;min-width:0;font-size:15px;font-family:inherit;padding:11px 14px;border-radius:12px;
  border:1px solid var(--border);background:var(--surface-2);color:var(--text);}
.imgs-go,.imgs-x{flex:none;width:42px;height:42px;border-radius:12px;border:none;cursor:pointer;font-size:18px;
  display:flex;align-items:center;justify-content:center;}
.imgs-go{background:var(--accent);color:#fff;}
.imgs-x{background:var(--surface-2);color:var(--muted-1);}
.imgs-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px;min-height:120px;}
.imgs-thumb{padding:0;border:none;background:var(--surface-2);border-radius:10px;overflow:hidden;cursor:pointer;aspect-ratio:1;}
.imgs-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.imgs-thumb:active{filter:brightness(.9);}
.imgs-info{grid-column:1/-1;text-align:center;color:var(--muted-1);font-size:13px;padding:26px 12px;}
.imgs-foot{padding:8px 14px calc(8px + env(safe-area-inset-bottom));font-size:11px;color:var(--muted-1);text-align:center;border-top:1px solid var(--border);}
.grp-img-src i{font-size:15px;color:var(--accent);}
.grp-color-row{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:16px;padding:0 2px;}
.grp-color{width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;padding:0;
  outline:2px solid transparent;outline-offset:2px;transition:transform .1s,outline-color .1s;}
.grp-color.sel{outline-color:var(--text);transform:scale(1.1);}

/* Datums-Trenner */
.chat-daysep{text-align:center;margin:10px 0 6px;flex:none;}
.chat-daysep span{font-size:11.5px;font-weight:650;color:var(--muted-1);
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:999px;padding:3px 12px;}

/* Nachrichten-Zeilen */
.chat-msg{display:flex;align-items:flex-end;gap:7px;max-width:88%;flex:none;}
.chat-mine{align-self:flex-end;flex-direction:row-reverse;}
.chat-av{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none;
  align-self:flex-end;}
/* Antippbar = Privatnachricht an diese Person (kurzes Eindrücken als Rückmeldung) */
.chat-av-dm{cursor:pointer;transition:transform .12s ease;}
.chat-av-dm:active{transform:scale(.88);}

/* Bubble-Wrap (für Swipe-Animation + Reply-Icon) */
.chat-bubble-wrap{position:relative;display:flex;align-items:center;max-width:100%;}
.chat-reply-ico{position:absolute;font-size:18px;color:var(--accent);opacity:0;
  transition:opacity .15s;pointer-events:none;}
.chat-msg:not(.chat-mine) .chat-reply-ico{left:-28px;}
.chat-mine .chat-reply-ico{right:-28px;}
.chat-bubble{background:var(--surface);border:1px solid var(--border);
  border-radius:18px 18px 18px 4px;padding:8px 11px;
  box-shadow:var(--shadow);max-width:100%;
  transition:transform .18s cubic-bezier(.2,.8,.25,1);
  /* Langdruck = Reaktion, NICHT Text markieren/kopieren (Kopieren übers Reaktions-Menü) */
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
.chat-mine .chat-bubble{border-radius:18px 18px 4px 18px;}
.chat-sender{font-size:11.5px;font-weight:700;margin-bottom:3px;}
.chat-text{font-size:14.5px;line-height:1.45;color:var(--text);white-space:pre-wrap;word-break:break-word;}
.chat-link{color:var(--accent);text-decoration:underline;text-underline-offset:2px;word-break:break-all;}
.chat-mine .chat-link{color:inherit;text-decoration:underline;font-weight:600;}
/* YouTube-Vorschaukarte im Chat */
.chat-yt{display:block;margin-top:6px;max-width:240px;border-radius:12px;overflow:hidden;
  border:1px solid var(--border);text-decoration:none;background:var(--surface-2);}
.chat-yt-thumb{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/9;
  background-size:cover;background-position:center;background-color:#000;}
.chat-yt-play{width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:17px;padding-left:3px;}
.chat-yt-cap{display:block;padding:7px 10px;font-size:12px;color:var(--text);}
.chat-yt-cap b{color:#FF0033;}

/* In-App-YouTube-Player (Vollbild-Overlay) */
.yt-player{position:fixed;inset:0;z-index:10075;background:rgba(3,5,10,.95);
  display:flex;flex-direction:column;justify-content:center;padding-top:env(safe-area-inset-top);}
.yt-player-bar{position:absolute;top:calc(6px + env(safe-area-inset-top));left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;padding:6px 12px;z-index:2;}
.yt-player-open{color:#fff;font-size:12.5px;font-weight:600;text-decoration:none;
  background:rgba(255,255,255,.14);padding:7px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;}
.yt-player-x{width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,.14);
  color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.yt-player-frame{width:100%;max-width:min(100vw,calc((100vh - 120px)*16/9));aspect-ratio:16/9;
  margin:0 auto;background:#000;}
.yt-player-frame iframe{width:100%;height:100%;border:0;display:block;}

/* Mediathek */
.med-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px;-webkit-overflow-scrolling:touch;}
.med-chips button{flex:none;border:1px solid var(--border);background:var(--surface);color:var(--text);
  font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;}
.med-chips button.on{background:var(--accent);color:#fff;border-color:var(--accent);}
.med-chip-add{width:38px;padding:0!important;display:inline-flex;align-items:center;justify-content:center;color:var(--accent);}
.med-list{display:flex;flex-direction:column;gap:10px;}
.med-card{display:flex;gap:11px;background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow);padding:9px;cursor:pointer;align-items:center;}
.med-thumb{width:112px;flex:none;aspect-ratio:16/9;border-radius:9px;background:#000;background-size:cover;
  background-position:center;position:relative;display:flex;align-items:center;justify-content:center;}
.med-thumb-link{background:linear-gradient(135deg,var(--surface-2),var(--border));color:var(--muted-1);font-size:26px;}
.med-play{width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:13px;
  padding-left:2px;display:flex;align-items:center;justify-content:center;}
.med-play-big{width:60px;height:60px;font-size:22px;padding-left:4px;}
.med-body{flex:1;min-width:0;}
.med-title{font-weight:700;font-size:14px;line-height:1.3;margin-bottom:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.med-note{font-size:12px;color:var(--muted-1);line-height:1.35;margin-bottom:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.med-meta{font-size:11px;color:var(--muted-1);}
.med-cmt{padding:7px 0;border-top:1px solid var(--border);}
.med-cmt:first-child{border-top:none;}
.med-cmt-h{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted-1);margin-bottom:2px;}
.med-cmt-h b{color:var(--text);font-size:12.5px;}
.med-cmt-del{border:none;background:none;color:var(--muted-1);cursor:pointer;margin-left:auto;font-size:12px;}
.med-cmt-t{font-size:13.5px;line-height:1.4;color:var(--text);word-break:break-word;}
.chat-img{max-width:220px;max-height:260px;border-radius:12px;display:block;
  object-fit:cover;cursor:pointer;margin-bottom:4px;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;}
.chat-audio{width:220px;max-width:100%;display:block;margin-bottom:4px;}
/* Im Chat nichts nativ markieren/kopieren (Kopieren läuft übers Reaktions-Menü).
   Wichtig: die Regeln MÜSSEN auf ALLE Kind-Elemente (sonst markieren iOS/Samsung
   beim Langdruck einzelne Zeichen/Emoji trotzdem) und auf den GESAMTEN Chat
   inkl. Kopfzeile/Liste sowie das Reaktions-Menü (#chat-rx-picker hängt am
   body, NICHT im Overlay!). Eingabefelder bleiben ausgenommen (Cursor/Tippen). */
.chat-overlay,.chat-overlay *,#chat-rx-picker,#chat-rx-picker *,
.chat-messages,.chat-messages *,.chat-bubble,.chat-bubble *{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
.chat-overlay textarea,.chat-overlay input{
  -webkit-user-select:text;user-select:text;}
.chat-link{-webkit-touch-callout:none;}
/* Einsatzanlässe verwalten (Admin) */
.anl-row{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--border);
  border-left:4px solid var(--muted-1);border-radius:12px;padding:10px 10px 10px 12px;margin-bottom:9px;
  box-shadow:var(--shadow);}
.anl-dot{width:13px;height:13px;border-radius:50%;flex:none;}
.anl-name{font-size:14.5px;font-weight:700;line-height:1.2;}
.anl-kw{font-size:11.5px;color:var(--muted-1);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.anl-row .iconbtn{flex:none;font-size:16px;padding:5px 7px;}
.anl-col{width:34px;height:34px;border-radius:50%;border:3px solid transparent;cursor:pointer;padding:0;}
.anl-col.on{border-color:var(--text);box-shadow:0 0 0 2px var(--surface) inset;}

/* Konfliktliste: Tages-Überschrift + Zeile mit Direkt-Aktionen */
.conf-day{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;color:var(--muted-1);
  text-transform:uppercase;letter-spacing:.04em;margin:16px 2px 8px;}
.conf-day:first-of-type{margin-top:4px;}
.conf-ev{display:flex;align-items:center;gap:10px;padding:9px 4px;}
.conf-ev .ev-t{font-size:14px;font-weight:700;line-height:1.25;}
.conf-ev .ev-s{font-size:12px;color:var(--muted-1);margin-top:1px;}
.conf-ev .iconbtn{flex:none;font-size:16px;padding:5px 7px;}

/* ---------- Nachfragen an Terminen ---------- */
/* Zahl offener Nachfragen auf dem Kalender-Tab */
.tab-badge{position:absolute;top:4px;left:calc(50% + 5px);min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--red);color:#fff;font-size:10.5px;font-weight:800;line-height:17px;
  text-align:center;box-shadow:0 0 0 2px var(--surface);pointer-events:none;}
/* Kennung am einzelnen Termin (Zahl = neue Nachfragen, sonst Gesamtzahl) */
.evc-chip{display:inline-flex;align-items:center;gap:3px;margin-left:7px;vertical-align:middle;
  font-size:10.5px;font-weight:700;padding:1px 7px 1px 5px;border-radius:999px;
  background:var(--surface-2);color:var(--muted-1);}
.evc-chip.neu{background:color-mix(in srgb,var(--red) 15%,var(--surface));color:var(--red);}
.evc-chip i{font-size:11px;}
/* Nachfragen-Liste im Termin-Blatt */
.evc-list{display:flex;flex-direction:column;gap:10px;margin-top:9px;}
.evc-item{display:flex;gap:9px;align-items:flex-start;}
.evc-av{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid var(--border);flex:none;}
.evc-body{flex:1;min-width:0;background:var(--surface-2);border-radius:12px;padding:8px 11px;}
.evc-head{display:flex;align-items:center;gap:8px;margin-bottom:2px;}
.evc-head b{font-size:12.5px;}
.evc-when{font-size:10.5px;color:var(--muted-1);}
.evc-del{margin-left:auto;border:none;background:none;color:var(--muted-1);cursor:pointer;font-size:12px;padding:2px 4px;}
.evc-text{font-size:13.5px;line-height:1.45;color:var(--text);white-space:pre-wrap;word-break:break-word;}
.evc-empty{font-size:12.5px;color:var(--muted-1);padding:6px 2px;}
.evc-new{display:flex;gap:8px;align-items:flex-end;margin-top:11px;}
.evc-input{flex:1;min-width:0;resize:none;font-family:inherit;font-size:14px;line-height:1.4;
  padding:10px 13px;border-radius:16px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);}
.evc-send{flex:none;width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:var(--accent);color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;}
.evc-send:active{filter:brightness(.94);}

/* Mikro-Knopf: Vertikalbewegung darf NICHT als Scrollen gedeutet werden –
   sonst feuert der Browser pointercancel und das Hochwisch-Einrasten bricht ab */
.chat-mic{touch-action:none;}
/* Eingerastete Sprachaufnahme (nach Hochwischen): Verwerfen/Senden-Knöpfe.
   NICHT in der schmalen Aufnahme-Leiste (dort quetschten sie sich über
   Mikro/Senden), sondern als schwebende Insel KNAPP ÜBER dem Eingabefeld –
   überlagert nur den untersten Rand des Verlaufs, keine Bedienelemente. */
.chat-rec-lockbar{position:absolute;bottom:calc(100% + 10px);right:0;z-index:5;
  display:flex;gap:8px;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:6px 8px;box-shadow:var(--shadow-lg);}
.chat-rec-btn{border:none;border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:700;
  cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;}
.chat-rec-btn.del{background:color-mix(in srgb,var(--red) 14%,var(--surface));color:var(--red);}
.chat-rec-btn.go{background:var(--accent);color:#fff;}
.chat-rec-hint{line-height:1.25;}

/* Reaktions-Blatt: wer hat reagiert */
.rx-who{display:flex;align-items:center;gap:11px;padding:9px 2px;border-top:1px solid var(--border);}
.rx-who:first-child{border-top:none;}
/* Nach-unten-Knopf */
.chat-scrollbtn{position:absolute;right:14px;bottom:calc(74px + env(safe-area-inset-bottom,0px));z-index:6;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--surface);
  color:var(--accent);box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;
  font-size:22px;cursor:pointer;}
.chat-scrollbtn:active{filter:brightness(.97);}
/* Sprung zur zitierten Nachricht: kurz hervorheben */
@keyframes chatFlash{0%,100%{background:transparent}25%{background:color-mix(in srgb,var(--accent) 26%,transparent)}}
.chat-flash .chat-bubble{animation:chatFlash 1.3s ease;}
/* ===== Chat v379: Suche, Weiterleiten, Info, Ungelesen, schwebendes Datum ===== */
.chat-search{display:flex;align-items:center;gap:5px;padding:7px 10px;border-bottom:1px solid var(--border);background:var(--surface);flex:none;}
.chat-search input{flex:1;min-width:0;border:none;background:transparent;font-size:15px;color:var(--text);outline:none;font-family:inherit;}
.chat-search-count{font-size:11.5px;color:var(--muted-1);white-space:nowrap;}
.chat-search .iconbtn.sp{width:32px;height:32px;flex:none;color:var(--muted-1);}
.chat-daychip{position:absolute;top:calc(60px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);
  z-index:5;background:var(--surface);border:1px solid var(--border);color:var(--muted-1);
  font-size:11.5px;font-weight:700;padding:4px 12px;border-radius:999px;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .25s;}
.chat-daychip.show{opacity:.96;}
.chat-unread-sep{text-align:center;margin:12px 0 8px;}
.chat-unread-sep span{background:color-mix(in srgb,var(--accent) 15%,var(--surface));color:var(--accent);
  font-size:11px;font-weight:800;padding:4px 13px;border-radius:999px;letter-spacing:.03em;}
.chat-fwd{font-size:11.5px;color:var(--muted-1);font-style:italic;display:flex;align-items:center;gap:4px;margin-bottom:2px;}
.rx-ic-emo{font-size:17px;width:20px;text-align:center;display:inline-block;flex:none;}
.fwd-list{max-height:60vh;overflow-y:auto;}
.fwd-row{display:flex;align-items:center;gap:11px;padding:9px 2px;border-top:1px solid var(--border);cursor:pointer;font-weight:600;font-size:14px;}
.fwd-row:first-child{border-top:none;}
.fwd-row:active{filter:brightness(.97);}
.fwd-row .cli-av,.fwd-row img{width:34px;height:34px;border-radius:50%;flex:none;object-fit:cover;}
.info-sec{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted-1);margin:12px 0 4px;}
.info-row{display:flex;align-items:center;gap:10px;padding:6px 2px;}
/* Schnappschüsse: Likes & Kommentare */
.snp-fs-actions{flex-wrap:wrap;}
.snp-like .snp-heart{font-size:16px;line-height:1;}
.snp-like.on{color:#FF6B81;}
.snp-fs-likes{font-size:11.5px;color:rgba(255,255,255,.78);margin-top:7px;}
.snp-thumb-soc{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.55);color:#fff;
  font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px;
  display:flex;align-items:center;gap:3px;backdrop-filter:blur(2px);}
.snp-cmt{position:absolute;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:flex-end;z-index:5;}
.snp-cmt-box{background:var(--surface);width:100%;border-radius:18px 18px 0 0;max-height:72%;
  display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom);}
.snp-cmt-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 6px;}
.snp-cmt-list{flex:1;overflow-y:auto;padding:4px 14px;min-height:120px;}
.snp-cmt-row{display:flex;gap:9px;padding:7px 0;}
.snp-cmt-av{width:30px;height:30px;border-radius:50%;background-size:cover;background-position:center;flex:none;}
.snp-cmt-meta{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted-1);}
.snp-cmt-meta b{color:var(--text);font-size:12.5px;}
.snp-cmt-del{border:none;background:none;color:var(--muted-1);cursor:pointer;padding:0 2px;font-size:12px;margin-left:auto;}
.snp-cmt-txt{font-size:13.5px;line-height:1.45;color:var(--text);word-break:break-word;}
.snp-cmt-inrow{display:flex;gap:8px;padding:8px 14px 14px;border-top:1px solid var(--border);}
.snp-cmt-inrow .field{flex:1;min-width:0;}
.snp-cmt-send{width:42px;height:42px;border-radius:50%;border:none;background:var(--accent);color:#fff;
  font-size:16px;flex:none;cursor:pointer;display:flex;align-items:center;justify-content:center;}
/* Schnappschüsse: Karte, Foto-Pins, Collage-Knopf */
.snp-map{position:fixed;inset:0;z-index:10055;background:var(--bg);display:flex;flex-direction:column;}
.snp-map-head{display:flex;align-items:center;gap:10px;padding:12px 14px;padding-top:calc(12px + env(safe-area-inset-top));
  background:var(--surface);border-bottom:1px solid var(--border);}
.snp-map-cv{flex:1;min-height:0;}
.snp-map-foot{display:flex;gap:8px;padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--border);}
.snp-pin{width:42px;height:42px;border-radius:12px;background-size:cover;background-position:center;
  border:2.5px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.4);}
.snp-pin-dot{width:22px;height:22px;border-radius:50%;background:var(--accent);border:3px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.35);}
.snp-col-btn{border:none;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);
  font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;font-family:inherit;}
/* DBEB/DUZ-Abgabe: Monats-Häkchen */
.dbeb-chk{width:26px;height:26px;border-radius:8px;border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;flex:none;}
.dbeb-chk.on{background:var(--green);border-color:var(--green);}
/* Sprachnachricht: eigener Player mit Fortschritts-Slider */
.chat-au{display:flex;align-items:center;gap:8px;width:222px;max-width:100%;padding:3px 0 4px;}
.chat-au-btn{width:34px;height:34px;border-radius:50%;border:none;background:var(--accent);color:#fff;
  font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;
  flex:none;font-family:inherit;}
.chat-au-bar{flex:1;min-width:0;height:22px;accent-color:var(--accent);touch-action:none;margin:0;}
.chat-au-time{font-size:10px;color:var(--muted-1);flex:none;font-variant-numeric:tabular-nums;
  min-width:56px;text-align:right;}
/* Standort-Nachricht */
.chat-loc{display:block;width:226px;max-width:100%;border-radius:12px;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--border);text-decoration:none;margin-bottom:4px;}
.chat-loc-map{position:relative;height:120px;background:var(--bg-2);}
.chat-loc-map img{width:100%;height:100%;object-fit:cover;display:block;}
.chat-loc-map.noimg::after{content:"\eae8";font-family:"tabler-icons";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--muted-1);}
.chat-loc-pin{position:absolute;width:14px;height:14px;border-radius:50% 50% 50% 0;
  background:var(--red);border:2px solid #fff;transform:translate(-50%,-100%) rotate(-45deg);
  box-shadow:0 1px 4px rgba(0,0,0,.5);}
.chat-loc-info{display:flex;align-items:center;gap:8px;padding:8px 10px;}
.chat-loc-info>i{color:var(--accent);font-size:18px;flex:none;}
.chat-loc-name{font-size:13.5px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-loc-co{font-size:11.5px;color:var(--muted-1);}
.chat-loc-ext{color:var(--muted-1)!important;font-size:15px!important;}

/* Formular-Unterschrift: Feld auf dem letzten Schritt */
.ff-sig-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:96px;border:2px dashed var(--border);border-radius:14px;background:var(--surface-2);
  cursor:pointer;padding:14px;text-align:center;transition:border-color .15s;}
.ff-sig-box:active{border-color:var(--accent);}
.ff-sig-box.signed{border-style:solid;background:var(--surface);position:relative;}
.ff-sig-hint{font-size:11.5px;color:var(--muted-1);display:flex;align-items:center;gap:5px;}
.ff-sig-prev{max-width:100%;max-height:120px;object-fit:contain;}
/* Dunkelmodus: dunkle Unterschrift-Tinte in der Vorschau hell darstellen */
[data-theme="dark"] .ff-sig-prev,
[data-theme="mitternacht"] .ff-sig-prev,
[data-theme="schiefer"] .ff-sig-prev,
[data-theme="tann"] .ff-sig-prev,
[data-theme="wein"] .ff-sig-prev{filter:brightness(0) invert(1);}
/* Dunkelmodus: native Autofill-Vorschlagsliste (<datalist>) hell rendern,
   damit sie lesbar bleibt (sonst dunkle Schrift auf dunklem Popup).
   Das Eingabefeld selbst behaelt durch .field seine dunkle Optik. */
[data-theme="dark"] input[data-af],
[data-theme="mitternacht"] input[data-af],
[data-theme="schiefer"] input[data-af],
[data-theme="tann"] input[data-af],
[data-theme="wein"] input[data-af]{color-scheme:light;}
.ff-sig-re{position:absolute;top:8px;right:10px;font-size:12px;font-weight:700;color:var(--accent);display:flex;align-items:center;gap:4px;}
/* Vollbild-Unterschrift-Pad */
.sig-ov{position:fixed;inset:0;z-index:10000;background:#fff;}
#sig-cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;background:#fff;}
.sig-top{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;
  padding:calc(8px + var(--safe-top)) 16px 8px;}
.sig-ttl{font-weight:800;font-size:16px;color:#0b1b2e;}
.sig-tbtn{background:none;border:none;font-size:14px;font-weight:700;color:#2563EB;cursor:pointer;padding:6px 4px;font-family:inherit;}
.sig-save{position:absolute;left:16px;right:16px;bottom:calc(16px + var(--safe-bot));z-index:2;
  background:#2563EB;color:#fff;border:none;border-radius:14px;padding:15px;font-size:15px;font-weight:750;
  cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;}
.sig-guide{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .2s;}
.sig-guide-line{position:absolute;left:34%;top:16%;bottom:17%;border-left:2px dashed #cfd5de;}
.sig-guide-x{position:absolute;left:34%;bottom:14%;transform:translate(-50%,50%);font-size:28px;color:#aeb6c2;}
.sig-guide-t{position:absolute;left:64%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);white-space:nowrap;
  text-align:center;color:#9aa3b0;font-size:14px;font-weight:700;line-height:1.6;}
.sig-guide-t span{font-size:11px;font-weight:500;}
.chat-meta{font-size:10.5px;color:var(--muted-1);text-align:right;margin-top:4px;}

/* Zitat-Block (Antwort auf Nachricht) */
.chat-quote{border-left:3px solid var(--accent);background:rgba(0,0,0,.07);
  border-radius:6px;padding:5px 9px;margin-bottom:6px;}
.chat-quote-name{font-size:11px;font-weight:700;display:block;margin-bottom:2px;}
.chat-quote-text{font-size:12.5px;color:var(--muted-1);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* Reply-Leiste über Eingabe */
.chat-reply-bar{display:flex;align-items:center;gap:8px;
  padding:7px 12px 5px;border-top:1px solid var(--border);
  background:color-mix(in srgb,var(--accent) 8%,var(--surface-2));flex:none;}
.chat-reply-preview{flex:1;min-width:0;font-size:13px;
  display:flex;flex-direction:column;gap:2px;}
.chat-reply-name{font-weight:700;font-size:11.5px;}
.chat-reply-txt{color:var(--muted-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* @ Mention Picker */
.chat-mention-picker{flex-direction:column;gap:2px;
  padding:6px 8px;border-top:1px solid var(--border);
  background:var(--surface);max-height:180px;overflow-y:auto;flex:none;}
.chat-mention-item{display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:none;border-radius:10px;padding:7px 8px;
  cursor:pointer;font-family:inherit;text-align:left;}
.chat-mention-item:hover,.chat-mention-item:focus{background:var(--surface-2);}

/* Eingabeleiste */
.chat-bar{display:flex;align-items:flex-end;gap:6px;
  padding:8px 10px calc(10px + var(--safe-bot));
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--border);flex:none;}
.chat-icon-btn{width:38px;height:38px;flex:none;border-radius:50%;font-size:20px;
  color:var(--muted-1);}
.chat-input-wrap{flex:1;min-width:0;background:var(--surface-2);
  border:1px solid var(--border);border-radius:20px;position:relative;
  padding:6px 12px;display:flex;flex-direction:column;gap:6px;}
/* Sprachaufnahme: deutlich sichtbare Leiste mit Timer + Lautstärke-Linien */
.chat-recbar{position:absolute;inset:0;display:flex;align-items:center;gap:9px;padding:0 14px;border-radius:20px;z-index:4;
  background:color-mix(in srgb,#ef4444 14%,var(--surface-2));border:1px solid color-mix(in srgb,#ef4444 45%,var(--border));}
.chat-rec-dot{width:11px;height:11px;border-radius:50%;background:#ef4444;flex:none;animation:rec-pulse 1s infinite;}
@keyframes rec-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.65)}}
.chat-rec-time{font-size:13px;font-weight:800;color:#ef4444;font-variant-numeric:tabular-nums;flex:none;min-width:34px;}
.chat-rec-wave{flex:1;min-width:0;height:26px;}
.chat-rec-hint{font-size:11px;font-weight:600;color:var(--muted-1);flex:none;}
.chat-pending{display:flex;align-items:center;gap:8px;padding-bottom:4px;
  border-bottom:1px solid var(--border);}
.chat-input{width:100%;background:none;border:none;outline:none;
  color:var(--text);font-size:15px;font-family:inherit;resize:none;
  line-height:1.45;max-height:120px;overflow-y:auto;}
.chat-send-btn{width:40px;height:40px;border-radius:50%;background:var(--accent);
  color:var(--accent-ink);border:none;display:flex;align-items:center;
  justify-content:center;font-size:19px;cursor:pointer;flex:none;
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 40%,transparent);
  transition:transform .1s;}
.chat-send-btn:active{transform:scale(.92);}
.chat-mic.recording{color:var(--red);animation:pulse-mic .7s ease infinite alternate;}
@keyframes pulse-mic{from{opacity:1}to{opacity:.4}}

/* Teamchat-Button im Dashboard-Header */
/* Runde, dezent getönte Kopf-Icons (Suche · Stechuhr · Glocke · Chat) */
.home-icons{display:flex;align-items:center;gap:8px;flex:none;}
.hbtn{width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:19px;position:relative;
  background:color-mix(in srgb,var(--c) 16%,var(--surface));color:var(--c);
  -webkit-tap-highlight-color:transparent;transition:filter .12s;}
.hbtn:active{filter:brightness(.93);}
/* Schlanke Statuszeile (Tag · Stärke · Einsätze) */
.home-status{display:flex;align-items:center;gap:7px;background:var(--surface);
  border:1px solid var(--border-2);border-radius:13px;padding:9px 12px;margin:0 0 12px;
  cursor:pointer;font-size:13px;overflow:hidden;}
.home-status:active{background:var(--surface-2);}
.home-status .hs-ic{font-size:15px;color:var(--muted-1);flex:none;}
.hs-date{font-weight:650;color:var(--text);white-space:nowrap;}
.hs-dot{color:var(--muted-1);}
.hs-n{font-weight:800;color:var(--green);} .hs-n.mid{color:var(--amber);} .hs-n.low{color:var(--red);}
.hs-tot{color:var(--muted-1);}
.home-status .today-pill{flex:none;}
.hs-chev{margin-left:auto;color:var(--muted-1);font-size:16px;flex:none;}

.chat-open-btn{
  width:46px;height:46px;border-radius:14px;
  border:none;cursor:pointer;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:23px;color:#fff;
  box-shadow:0 3px 10px rgba(0,0,0,.3);
  position:relative;
}
.chat-badge{
  position:absolute;top:-5px;right:-5px;
  min-width:18px;height:18px;padding:0 4px;
  background:var(--red);color:#fff;
  border-radius:9px;font-size:10.5px;font-weight:700;
  display:none;align-items:center;justify-content:center;
  border:2px solid var(--bg);line-height:1;white-space:nowrap;
}

/* Qualifikations-Chips (unter Profil-Hero) */
.qual-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  color:var(--muted-1);background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:4px 11px;}

/* ============================================================
   Einsatz-Bereich
   ============================================================ */

/* Crew-Fotostreifen */
/* Geteilte Einsatz-Darstellung (mehrere Trupps) */
.trupp-lanes{display:flex;flex-direction:column;gap:8px;padding:10px 10px 2px;}
.trupp-lane{border:1px solid var(--border);border-left:4px solid var(--tc);border-radius:10px;
  background:color-mix(in srgb,var(--tc) 6%,var(--surface-2));padding:8px;}
.trupp-lane-hd{display:flex;align-items:center;gap:7px;margin-bottom:7px;}
.tl-dot{width:9px;height:9px;border-radius:50%;flex:none;}
.trupp-lane-ruf{font-weight:800;font-size:13.5px;color:var(--tc);flex:none;}
.trupp-lane-zug{font-size:12px;color:var(--muted-1);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.trupp-lane-cnt{margin-left:auto;font-size:12px;font-weight:800;color:var(--tc);flex:none;}
.tl-mat{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px;}
.tl-chip{font-size:11px;font-weight:600;color:var(--muted-1);background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:3px 7px;}
.einsatz-crew{display:flex;gap:4px;width:100%;border-radius:14px 14px 0 0;overflow:hidden;justify-content:center;}
/* In den Einsatzkarten (Aktuelle Einsätze) nicht randlos: Luft zwischen
   Kartenrand und Mitarbeiterkärtchen, damit die Kärtchen auf der getönten
   Fläche „schweben" statt am Rand zu kleben */
.einsatz-card .einsatz-crew{padding:12px 12px 0;width:auto;}
.einsatz-crew>div{flex:1;min-width:0;}
/* offener Platz (Silhouette = ausgegrauter Cutout) – Einsatzkarten/-detail */
.einsatz-crew-sil{position:relative;overflow:hidden;border-radius:14px;
  border:2px dashed color-mix(in srgb,var(--muted-1) 38%,transparent);background:var(--surface-2);}
.einsatz-crew-sil img{width:100%;height:100%;object-fit:contain;object-position:center bottom;opacity:.92;}
/* offener Platz (Silhouette) – Einsatzbesprechung */
.bf-fig.bf-sil{align-self:flex-end;filter:drop-shadow(0 7px 9px rgba(0,0,0,.22));opacity:.9;cursor:pointer;}
.bf-card.bf-sil{cursor:pointer;background-size:cover;background-position:center top;border-style:dashed;opacity:.9;}

/* Einsatz-Karte (Aktuelle Einsätze) */
.einsatz-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;cursor:pointer;transition:transform .1s;position:relative;}
/* „NEU"-Marke am zuletzt angelegten Einsatz (Farbe = Anlass-Farbe der Karte) */
.einsatz-new-badge{position:absolute;top:10px;right:10px;z-index:2;color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.8px;padding:4px 11px;border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.28);animation:einsatzNewPulse 2.2s ease-in-out infinite;}
@keyframes einsatzNewPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
/* Kategorie-Chip (Grenze/Fußball/…) rechts in der Titelzeile */
.einsatz-cat-chip{float:right;font-size:10.5px;font-weight:700;letter-spacing:.3px;
  padding:3px 10px;border-radius:999px;border:1px solid;margin-left:8px;white-space:nowrap;}
.einsatz-card:active{transform:scale(.985);}
.einsatz-card-body{padding:14px;}
.einsatz-card-title{font-weight:750;font-size:16px;letter-spacing:-.01em;color:var(--text);margin-bottom:12px;}

/* Schlüsselinfos (Ort + Zeit) prominent */
.einsatz-key-info{display:flex;flex-direction:column;gap:7px;}
.einsatz-key-item{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--text);}
.einsatz-key-item i{font-size:17px;color:var(--red);flex:none;width:18px;text-align:center;}

.einsatz-card-footer{font-size:12px;color:var(--muted-1);margin-top:10px;padding-top:10px;
  border-top:1px solid var(--border-2);}

/* Einsatztagebuch-Karte */
.einsatz-log-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow);padding:14px;cursor:pointer;transition:transform .1s;}
.einsatz-log-card:active{transform:scale(.985);}
.einsatz-meta{display:flex;flex-wrap:wrap;gap:5px 14px;color:var(--muted-1);font-size:12.5px;margin-top:7px;}
.einsatz-meta i{margin-right:3px;font-size:13px;vertical-align:-1px;}

/* ============================================================
   Einheit – Org-Chart
   ============================================================ */
.page-head{display:flex;align-items:center;gap:10px;padding:14px 16px 14px;
  position:sticky;top:0;z-index:10;
  background:var(--surface);
  /* halbrunder, moderner Abschluss statt gerader Trennlinie */
  border-radius:0 0 22px 22px;box-shadow:0 7px 18px -11px rgba(0,0,0,.28);}
.page-head h2{margin:0;font-size:18px;font-weight:700;}
.back-btn{width:36px;height:36px;border-radius:10px;background:var(--surface-2);
  border:none;display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--text);cursor:pointer;flex:none;}
.page-body{padding:12px 14px 32px;}

.eq-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:4px;}
.eq-row-2{grid-template-columns:repeat(2,1fr);}
.eq-card{background:var(--surface);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow);}
/* Mitarbeiter-Fotos im 9:16-Format — die Personen-Karten (720×1280) erscheinen komplett ohne Beschnitt */
.eq-photo{aspect-ratio:9/16;height:auto;background-size:cover;background-position:center top;}
.eq-info{padding:8px 10px 10px;}
.eq-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.eq-role{font-size:11px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.eq-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;}
.eq-badge{font-size:15px;}

/* ============================================================
   Material – Geräteübersicht
   ============================================================ */
/* Klappbare Materialgruppen (v666, Wunsch Ecki: „einen ordentlichen
   anklickbaren Button, nicht nur der Schriftzug mit dem Pfeil"). Deshalb ein
   echter <button> ueber die volle Breite mit Farbpunkt der Kategorie, Anzahl
   und drehendem Pfeil – kein angeklickter Textabsatz. */
.mat-acc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;margin:12px 0 0;}
.mat-acc-btn{display:flex;align-items:center;gap:11px;width:100%;padding:13px 14px;
  border:none;background:none;font:inherit;color:var(--text);cursor:pointer;text-align:left;}
.mat-acc-btn:active{background:var(--surface-2);}
.mat-acc-dot{width:11px;height:11px;border-radius:50%;flex:none;}
/* Umbrechen statt kuerzen: „FOTO/VIDEO SÄTZE (KOMPLETT)" endete sonst als
   „FOTO/VIDEO SÄTZE (K…" – abgeschnittene Beschriftungen sind genau das,
   was Ecki an Kachelrastern stoert. */
.mat-acc-t{flex:1;min-width:0;font-weight:800;font-size:15.5px;line-height:1.2;
  overflow-wrap:break-word;}
.mat-acc-n{flex:none;font-size:12px;font-weight:700;color:var(--muted-1);
  background:var(--surface-2);border-radius:999px;padding:2px 9px;}
.mat-acc-chev{flex:none;font-size:18px;color:var(--muted-1);transition:transform .2s;}
.mat-acc-body{padding:0 12px 12px;}
/* Ueberschrift ueber jeder Kategorie-Trommel (v666) – gleiche Bausteine wie
   der Klapp-Knopf, aber ohne Knopf: hier gibt es nichts aufzuklappen. */
.mat-tr-kopf{display:flex;align-items:center;gap:10px;padding:14px 4px 6px;}
.mat-tr-t{flex:1;min-width:0;font-weight:800;font-size:14px;letter-spacing:.02em;
  color:var(--muted-1);line-height:1.2;overflow-wrap:break-word;}
/* Materialkarte in der seitlichen Trommel: wie die Ordnerkarte, aber mit
   einer zweiten, leisen Zeile fuer die Kategorie. Der Titel darf zwei Zeilen
   nehmen – Geraetenamen wie „Bearbeitungsfahrzeug grün" passen sonst nicht. */
.mat-card .ordner-titel{padding:8px 9px 2px;line-height:1.15;white-space:normal;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.mat-card-kat{display:block;flex:none;padding:0 9px 9px;text-align:center;
  font-size:10.5px;font-weight:700;color:var(--muted-1);letter-spacing:.03em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pk-ditem:not(.mitte) .mat-card-kat{opacity:.72;}
/* Gesperrtes Geraet in der Trommel */
.mat-rad-sperr{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:color-mix(in srgb,var(--red) 90%,transparent);color:#fff;font-size:12px;
  font-weight:800;padding:4px 12px;border-radius:999px;letter-spacing:.02em;}
.mat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:4px;}
.mat-grid-2{grid-template-columns:repeat(2,1fr);}
.mat-item{background:var(--surface);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow);cursor:pointer;transition:opacity .15s;}
.mat-item:active{opacity:.75;}
.mat-bk-row{display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-bottom:1px solid var(--border);}
.mat-bk-row:last-child{border-bottom:none;}
/* Material umsortieren („Anordnen"-Modus) */
.mat-arr-hint{margin:0 0 14px;padding:9px 12px;border-radius:10px;font-size:12.5px;line-height:1.4;
  background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);
  display:flex;align-items:center;gap:8px;font-weight:600;}
.mat-item.mat-arr{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;
  animation:matWobble .4s ease-in-out infinite;}
.mat-item.mat-arr:nth-child(2n){animation-delay:-.2s;}
.mat-item.mat-arr .mat-photo{pointer-events:none;}
/* Ziel-Lücke: die gehobene Kachel bleibt als klarer „hier lande ich"-Platzhalter */
.mat-arr-src{opacity:.32;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 60%,transparent);}
.mat-arr-src, .mat-item.mat-arr{transition:transform .16s cubic-bezier(.2,.8,.3,1);}
/* Während aktiv gezogen wird, die Wackel-Animation pausieren – sie nutzt
   transform:rotate und würde das sanfte FLIP-Gleiten (transform:translate) stören */
body.reorder-dragging .mat-item.mat-arr{animation:none!important;}
.mat-arr-ghost{border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.4);opacity:.96;
  animation:none!important;}
.mat-arr-ghost .mat-photo{border-radius:12px;overflow:hidden;}
@keyframes matWobble{0%{transform:rotate(-.9deg)}50%{transform:rotate(.9deg)}100%{transform:rotate(-.9deg)}}
@media(prefers-reduced-motion:reduce){.mat-item.mat-arr{animation:none;}}
.mat-photo{position:relative;aspect-ratio:4/3;width:100%;}
.mat-photo-lg{aspect-ratio:4/3;}
.mat-img{position:absolute;inset:0;background-size:cover;background-position:center;}
.mat-img-r{left:50%;}
.mat-img-divider{position:absolute;left:50%;top:6px;bottom:6px;width:2px;
  background:rgba(255,255,255,.35);transform:translateX(-50%);border-radius:1px;}
.mat-lbl{padding:6px 8px 8px;font-size:12px;font-weight:600;line-height:1.3;
  text-align:center;color:var(--text);overflow-wrap:break-word;word-break:break-word;hyphens:auto;}
/* Material gesperrt: dicker roter Strich übers Foto */
.mat-item.mat-unavail .mat-photo{opacity:.5;filter:grayscale(.45);}
.mat-strike{position:absolute;inset:0;pointer-events:none;z-index:2;}
.mat-strike::before{content:"";position:absolute;top:50%;left:-8%;width:116%;height:7px;
  background:var(--red);transform:translateY(-50%) rotate(-16deg);border-radius:4px;
  box-shadow:0 0 0 2px rgba(255,255,255,.7);}
.mat-badge{display:inline-block;font-size:9px;font-weight:800;text-transform:uppercase;
  letter-spacing:.4px;color:#fff;background:var(--red);border-radius:5px;padding:1px 5px;vertical-align:middle;}
.mat-status{display:flex;align-items:center;gap:10px;border-radius:12px;padding:10px 12px;}
.mat-status>i{font-size:22px;flex:none;}
.mat-status-off{background:color-mix(in srgb,var(--red) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--red) 35%,transparent);}
.mat-status-off>i{color:var(--red);}
.mat-status-on{background:color-mix(in srgb,var(--green) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--green) 30%,transparent);}
.mat-status-on>i{color:var(--green);}

/* ============================================================
   Urlaubsplaner
   ============================================================ */
.up-head-row{display:flex;align-items:center;padding:8px 10px;
  border-bottom:1px solid var(--border);background:var(--surface-2);}
.up-row{display:flex;align-items:center;padding:8px 10px;
  border-bottom:1px solid var(--border);}
.up-row:last-child{border-bottom:none;}
.up-who{display:flex;align-items:center;gap:6px;width:80px;flex:none;}
.up-who-hd{width:80px;flex:none;}
.up-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.up-months{display:grid;grid-template-columns:repeat(12,1fr);gap:2px;flex:1;}
.up-mhead{text-align:center;font-size:10px;font-weight:700;color:var(--muted-1);}
.up-cell{height:18px;border-radius:3px;background:var(--surface-2);}
.up-cell-on{background:var(--green);opacity:.8;}
.up-days{width:26px;text-align:right;font-size:12px;font-weight:600;
  color:var(--muted-1);flex:none;}
.up-days-hd{width:26px;text-align:right;font-size:10px;font-weight:700;
  color:var(--muted-1);flex:none;}

/* ============================================================
   Material-Picker im Einsatz-Formular
   ============================================================ */
.mpick-cat{font-size:10px;font-weight:700;color:var(--muted-1);text-transform:uppercase;
  letter-spacing:.5px;margin:10px 0 4px;}
.mpick-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:2px;}
.mpick-item{position:relative;width:62px;padding:0;background:var(--surface-2);
  border:2px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;
  transition:background .15s;}
.mpick-item.on{background:color-mix(in srgb,var(--accent) 15%,var(--surface-2));}
.mpick-img{width:62px;height:62px;background-size:cover;background-position:center;}
.mpick-lbl{font-size:9px;font-weight:600;text-align:center;padding:2px 2px 4px;
  line-height:1.2;color:var(--text);}
.mpick-chk{display:none;position:absolute;top:3px;right:3px;width:16px;height:16px;
  border-radius:50%;background:var(--accent);color:#fff;font-size:10px;
  align-items:center;justify-content:center;}
.mpick-item.on .mpick-chk{display:flex;}
/* gesperrtes Material im Picker: nicht wählbar */
.mpick-item.mpick-off{opacity:.5;filter:grayscale(.4);cursor:not-allowed;}
.mpick-strike{position:absolute;inset:0;pointer-events:none;}
.mpick-strike::before{content:"";position:absolute;top:50%;left:-6%;width:112%;height:4px;
  background:var(--red);transform:translateY(-50%) rotate(-18deg);border-radius:2px;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.7);}

/* Material-Thumbnails im Einsatz-Detail-Sheet */
.mat-thumb-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.mat-thumb{width:58px;background:var(--surface-2);border:2px solid var(--border);
  border-radius:8px;overflow:hidden;}
.mat-thumb-img{width:58px;height:58px;background-size:cover;background-position:center;}
.mat-thumb-lbl{font-size:8px;font-weight:600;text-align:center;padding:2px 2px 3px;
  line-height:1.2;color:var(--text);}

/* ============================================================
   Stärkekalender
   ============================================================ */
.sk-bar{display:flex;align-items:center;gap:3px;width:100%;padding:0 3px;box-sizing:border-box;
  border-radius:4px;height:18px;overflow:hidden;margin-top:1px;}
.sk-bar-dot{width:14px;height:14px;border-radius:50%;flex:none;background-size:cover;background-position:center top;}
.sk-bar-lbl{font-size:9px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;line-height:1;}
.sk-more{font-size:9px;font-weight:700;color:var(--muted-1);padding:0 3px;}
/* Verfügbarkeitszahl (absolut, oben rechts) */
.sk-avail{position:absolute;top:4px;right:5px;font-size:9px;font-weight:800;line-height:1;
  color:var(--green);}
.sk-avail.mid{color:var(--amber);}
.sk-avail.low{color:var(--red);}
/* Einsatz-Indikator-Streifen (absolut, unten) */
.sk-ez-ind{position:absolute;bottom:0;left:6px;right:6px;height:3px;
  background:var(--amber);border-radius:2px 2px 12px 12px;opacity:.85;}

/* Portrait-Streifen Tagesansicht (5:16) */
/* overscroll-behavior haelt die Quergeste in der Reihe – ohne das zog ein
   Wisch ueber das Reihenende das ganze Blatt mit (v583). */
.sk-strips{display:flex;gap:5px;overflow-x:auto;padding:8px 0 4px;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;}
.sk-strips::-webkit-scrollbar{display:none;}
.sk-strip{flex:none;width:52px;border-radius:10px;overflow:hidden;position:relative;cursor:default;}
.sk-strip-photo{width:52px;height:166px;background-size:cover;background-position:center top;}
.sk-strip-foot{padding:4px 3px 5px;text-align:center;background:var(--surface-2);}
.sk-strip-name{font-size:9px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;}
.sk-strip-status{font-size:8px;font-weight:600;margin-top:1px;line-height:1;}
.sk-status-head{font-size:11px;font-weight:700;color:var(--muted-1);text-transform:uppercase;
  letter-spacing:.5px;margin:14px 0 6px;padding:0 2px;}
/* Dashboard: Heute-Block */
.today-block{background:var(--surface);border:1px solid var(--border-2);border-radius:14px;
  padding:12px 14px;margin-bottom:14px;cursor:pointer;transition:background .12s;}
.today-block:active{background:var(--surface-2);}
.today-block-label{font-size:10px;font-weight:800;color:var(--muted-1);
  letter-spacing:.6px;text-transform:uppercase;margin-bottom:7px;}
.today-stat-n{font-size:22px;font-weight:800;color:var(--green);}
.today-stat-n.mid{color:var(--amber);}
.today-stat-n.low{color:var(--red);}
.today-pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
  padding:4px 9px;border-radius:999px;white-space:nowrap;}
.today-pill-red{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red);}
.today-pill-blue{background:color-mix(in srgb,var(--blue) 12%,transparent);color:var(--blue);}
/* Einheitlicher Tagesblick – Stärke-Banner im Sheet */
.today-ov-staerke{display:flex;align-items:center;gap:10px;
  background:var(--surface-2);border-radius:12px;padding:12px 14px;
  margin-bottom:4px;cursor:pointer;transition:background .12s;}
.today-ov-staerke:active{background:color-mix(in srgb,var(--accent) 8%,var(--surface-2));}
/* Personalstärke-Banner im Einsatzkalender-Sheet */
.ek-staerke-banner{background:var(--surface-2);border-radius:10px;padding:10px 12px;
  margin-bottom:14px;display:flex;gap:14px;align-items:center;}

/* ============================================================
   Fortbildungskalender – Dienstplan Wochenansicht
   ============================================================ */
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;align-items:start;}
.dp-head{text-align:center;font-size:10px;font-weight:700;color:var(--muted-1);
  padding:5px 0 4px;border-bottom:2px solid var(--border);}
.dp-head.we{color:var(--accent);}
.dp-head.today{color:var(--accent);border-color:var(--accent);}
.dp-col{display:flex;flex-direction:column;gap:4px;min-height:40px;padding-top:4px;}
.dp-ev{border-radius:8px;padding:5px 6px;font-size:10px;line-height:1.3;
  border-left:3px solid var(--bc,var(--accent));
  background:color-mix(in srgb,var(--bc,var(--accent)) 14%,var(--surface));cursor:pointer;}
.dp-ev-t{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dp-ev-s{color:var(--text-2);font-size:9px;margin-top:1px;}
.dp-empty{color:var(--muted-1);font-size:11px;text-align:center;padding:10px 0;}

/* ============================================================
   Privater Kalender (Mein Bereich)
   ============================================================ */
.priv-cal-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.priv-cal-head h3{flex:1;margin:0;font-size:15px;font-weight:750;}

/* Kompakter Mini-Kalender im Profil-Screen */
.cal-mini .cal-cell{height:58px;}

/* Event-Titel in Listenkarten: 2 Zeilen erlaubt, Silbentrennung für Deutsche Komposita */
.list .ev-t{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word;hyphens:auto;}

/* ============================================================
   Chat – Sound-Toggle (Glocke mit/ohne Durchstreichung)
   ============================================================ */
.chat-snd{position:relative;display:inline-flex;align-items:center;justify-content:center;}
.chat-snd-off::after{
  content:'';
  position:absolute;
  width:150%;height:2px;
  background:currentColor;
  border-radius:1px;
  transform:rotate(-45deg);
  opacity:.9;
}

/* ============================================================
   Chat – Foto-Lightbox
   ============================================================ */
.chat-photo-ov{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.92);
  display:flex;align-items:center;justify-content:center;
  animation:fadeIn .18s ease;
}
.chat-photo-fs{
  max-width:100%;max-height:100%;
  object-fit:contain;
  border-radius:4px;
  touch-action:none;              /* Zoom & Verschieben werden selbst behandelt */
  transform-origin:center center;
  will-change:transform;
  cursor:grab;
  -webkit-user-drag:none;user-select:none;
}
.chat-photo-fs.zoomed{cursor:grab;}
.chat-photo-close{
  position:absolute;top:max(16px,env(safe-area-inset-top));right:16px;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.18);border:none;
  color:#fff;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.chat-photo-close:active{background:rgba(255,255,255,.32);}
.chat-photo-save{
  position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:7px;
  padding:10px 18px;border-radius:999px;border:none;cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;font-size:14px;font-weight:600;font-family:inherit;
}
.chat-photo-save:active{background:rgba(255,255,255,.34);}
.chat-photo-del{
  /* über den Speichern-Button gestapelt (überlappt nicht) */
  position:absolute;bottom:calc(max(24px,env(safe-area-inset-bottom)) + 54px);left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:7px;
  padding:10px 18px;border-radius:999px;border:none;cursor:pointer;
  background:rgba(225,29,72,.92);color:#fff;font-size:14px;font-weight:600;font-family:inherit;
}
.chat-photo-del:active{background:rgba(190,18,60,.95);}
/* Galerie-Zähler „3 / 12" oben mittig im Vollbild-Viewer */
.chat-photo-count{
  position:absolute;top:max(22px,calc(env(safe-area-inset-top) + 6px));left:50%;transform:translateX(-50%);
  color:#fff;font-size:13px;font-weight:700;letter-spacing:.4px;
  background:rgba(255,255,255,.16);padding:6px 14px;border-radius:999px;pointer-events:none;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* Team-Foto-Bühne: iOS-Bildmenü beim Langdruck unterdrücken → unser eigenes Menü greift */
.bf-stage,.bf-stage *{-webkit-touch-callout:none;}

/* ===== Picker · große Auswahl-Overlays (Wolke/Bühne/Trommel) ============
   Themefähig über die App-Variablen. Unschärfe nur solange offen;
   Dauer-Animationen ausschließlich transform/opacity (Lehre v428). */
.pk-ov{position:fixed;inset:0;z-index:9500;display:flex;flex-direction:column;}
.pk-bg{position:absolute;inset:0;background:rgba(12,18,28,.38);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;transition:opacity .28s cubic-bezier(.2,.8,.2,1);}
.pk-ov.on .pk-bg{opacity:1;}
.pk-head{position:relative;z-index:2;display:grid;grid-template-columns:46px minmax(0,1fr) 46px;
  align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top)) 14px 8px;
  opacity:0;transform:translateY(-6px);transition:opacity .28s,transform .28s;}
.pk-ov.on .pk-head{opacity:1;transform:none;}
.pk-hbtn{grid-column:auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.22);cursor:pointer;}
.pk-hbtn[hidden]{display:none;}   /* hidden-Attribut schlaegt display:grid sonst nicht */
#pk-back{grid-column:1;}
.pk-title{grid-column:2;text-align:center;color:#fff;font-size:17px;font-weight:800;
  letter-spacing:-.01em;text-shadow:0 1px 8px rgba(0,0,0,.3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#pk-x{grid-column:3;}
.pk-body{position:relative;z-index:1;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;padding:8px 14px 90px;}
.pk-foot{position:absolute;z-index:3;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));
  display:flex;justify-content:center;pointer-events:none;}
.pk-done{pointer-events:auto;min-width:210px;padding:14px 26px;border:none;border-radius:999px;
  background:var(--accent);color:var(--accent-ink,#fff);font-weight:800;font-size:15.5px;cursor:pointer;
  box-shadow:0 12px 30px rgba(0,0,0,.35);opacity:0;transform:translateY(14px);
  transition:opacity .3s .12s,transform .3s .12s;}
.pk-ov.on .pk-done{opacity:1;transform:none;}
.pk-hint{color:rgba(255,255,255,.92);font-size:13px;font-weight:600;
  background:rgba(10,16,26,.55);padding:8px 16px;border-radius:999px;}

/* --- Karten (Wolke + Bühne gemeinsam) --- */
.pk-flow{max-width:430px;margin:0 auto;}
.pk-card{position:relative;border:none;cursor:pointer;font-family:inherit;text-align:left;
  border-radius:18px;color:var(--text);background:var(--surface);
  box-shadow:0 10px 26px rgba(8,14,24,.30);
  animation:pkIn .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*.045s);}
@keyframes pkIn{from{opacity:0;transform:translateY(26px) scale(.9);}to{opacity:1;transform:none;}}
.pk-card:active{filter:brightness(.96);}
.pk-chk{position:absolute;top:-7px;right:-7px;z-index:3;width:26px;height:26px;border-radius:50%;
  background:var(--c,var(--accent));display:none;place-items:center;
  box-shadow:0 3px 9px rgba(0,0,0,.3);}
.pk-card.sel .pk-chk,.pk-dcard.sel .pk-chk{display:grid;}
.pk-card.sel{outline:2.5px solid var(--c,var(--accent));outline-offset:-1px;}

/* Anlass-Karte: volle Farbfläche */
.pk-anl{display:flex;flex-direction:column;justify-content:center;min-height:84px;padding:14px 16px;
  background:var(--c);   /* Rückfall für Browser ohne color-mix */
  background:color-mix(in srgb,var(--c) 82%,#20242B);color:#fff;}
.pk-anl .pk-anl-dot{display:none;}
.pk-anl-l{font-size:17px;font-weight:800;letter-spacing:-.01em;text-shadow:0 1px 4px rgba(0,0,0,.22);}
.pk-anl-s{font-size:12px;font-weight:600;opacity:.85;margin-top:3px;}
.pk-anl.sel{outline:3px solid #fff;outline-offset:-3px;}
.pk-anl .pk-chk{background:#fff;}
.pk-anl .pk-chk svg path{stroke:var(--c);}

/* Personen-Karte */
.pk-per{display:flex;align-items:center;gap:11px;min-height:76px;padding:12px;}
.pk-av{flex:0 0 50px;width:50px;height:50px;border-radius:50%;padding:2.5px;background:var(--c,var(--accent));
  display:grid;place-items:center;position:relative;}
.pk-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;}
.pk-av-fb{display:none;position:absolute;inset:2.5px;border-radius:50%;place-items:center;
  background:var(--surface-2);color:var(--text);font-weight:800;font-size:15px;}
.pk-av.noimg .pk-av-fb{display:grid;}
.pk-per-t{flex:1;min-width:0;}
.pk-per-t b{display:block;font-size:14.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pk-per-t small{display:block;margin-top:2px;font-size:10.5px;font-weight:600;color:var(--muted-1);line-height:1.3;}

/* Material: randloses 16:9-Bild oben, Label unten (Wunsch: kein weißer Rand) */
.pk-media{display:block;width:100%;aspect-ratio:16/9;border-radius:14px 14px 0 0;
  background-color:var(--surface-2);background-size:cover;background-position:center;}
.pk-mat{display:flex;flex-direction:column;padding:0;overflow:hidden;}
.pk-mat-t{display:block;padding:9px 11px 11px;font-size:12.5px;font-weight:750;line-height:1.3;}
.pk-mat-t small{display:block;font-weight:600;color:var(--red);margin-top:2px;font-size:10.5px;}
.pk-mat.unav{opacity:.45;cursor:default;}
.pk-kat{display:flex;flex-direction:column;padding:0;overflow:hidden;}
.pk-kat .pk-media{border-radius:14px 14px 0 0;}
.pk-kat-t{display:block;padding:10px 12px 12px;font-size:14.5px;font-weight:800;}
.pk-kat-t small{display:block;font-weight:600;color:var(--muted-1);font-size:11px;margin-top:2px;}
.pk-kat-ch{position:absolute;right:10px;bottom:14px;color:var(--muted-1);}
.pk-kat-n{position:absolute;top:8px;right:8px;z-index:2;background:var(--accent);color:var(--accent-ink,#fff);
  font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;box-shadow:0 3px 9px rgba(0,0,0,.3);}

/* --- Bühne: ruhiges 2er-Raster + minimales Schweben --- */
.pk-look-buehne .pk-flow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:13px;}
.pk-look-buehne .pk-anl{grid-column:1 / -1;}
.pk-look-buehne .pk-card{animation:pkIn .5s cubic-bezier(.2,.8,.2,1) both,pkFloat 5.2s ease-in-out infinite;
  animation-delay:calc(var(--i,0)*.045s),calc(var(--i,0)*.35s + .5s);}
@keyframes pkFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}

/* --- Wolke: gestreute, leicht gedrehte Karten + stärkeres Schweben --- */
.pk-look-wolke .pk-flow{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:flex-start;}
.pk-look-wolke .pk-card{--rot:0deg;
  animation:pkInW .55s cubic-bezier(.2,.8,.2,1) both,pkFloatW 5.6s ease-in-out infinite;
  animation-delay:calc(var(--i,0)*.05s),calc(var(--i,0)*.42s + .55s);}
.pk-look-wolke .pk-card:nth-child(3n){--rot:2.4deg;margin-top:14px;}
.pk-look-wolke .pk-card:nth-child(3n+1){--rot:-2.2deg;}
.pk-look-wolke .pk-card:nth-child(4n){margin-top:22px;}
.pk-look-wolke .pk-card:nth-child(5n+2){--rot:1.6deg;margin-top:6px;}
@keyframes pkInW{from{opacity:0;transform:translateY(30px) rotate(var(--rot)) scale(.88);}
  to{opacity:1;transform:rotate(var(--rot));}}
@keyframes pkFloatW{0%,100%{transform:translateY(0) rotate(var(--rot));}50%{transform:translateY(-5px) rotate(var(--rot));}}
.pk-look-wolke .pk-anl{width:auto;min-width:150px;min-height:66px;border-radius:22px;}
.pk-look-wolke .pk-per{width:150px;flex-direction:column;text-align:center;gap:8px;padding:14px 10px;border-radius:22px;}
.pk-look-wolke .pk-av{flex:none;width:72px;height:72px;}
.pk-look-wolke .pk-per-t b{white-space:normal;}
.pk-look-wolke .pk-kat,.pk-look-wolke .pk-mat{width:46%;min-width:150px;}

/* --- Trommel: 3D-Rad --- */
.pk-look-trommel .pk-body{overflow:hidden;padding:0;}
.pk-stage{position:absolute;inset:0;perspective:900px;touch-action:none;cursor:grab;}
.pk-stage:active{cursor:grabbing;}
.pk-drum{position:absolute;left:50%;top:50%;width:min(78vw,340px);transform:translateX(-50%);
  transform-style:preserve-3d;}
.pk-ditem{position:absolute;left:0;top:0;width:100%;will-change:transform,opacity;}
.pk-dcard{position:relative;height:100%;border-radius:18px;background:var(--surface);color:var(--text);
  box-shadow:0 12px 30px rgba(8,14,24,.32);display:flex;align-items:center;gap:11px;padding:12px 14px;
  overflow:hidden;}
.pk-ditem:not(.mitte) .pk-dcard{pointer-events:none;}
.pk-danl{justify-content:center;flex-direction:column;background:var(--c);background:color-mix(in srgb,var(--c) 82%,#20242B);color:#fff;}
.pk-danl-l{font-size:19px;font-weight:800;text-shadow:0 1px 4px rgba(0,0,0,.22);}
.pk-danl-s{font-size:12px;font-weight:600;opacity:.85;margin-top:3px;}
.pk-dper .pk-av{flex:0 0 56px;width:56px;height:56px;}
.pk-dper{background:var(--surface);
  background:linear-gradient(315deg, color-mix(in srgb,var(--c) 46%,transparent) 0%, transparent 72%), var(--surface);}
.pk-dmat,.pk-dkat{padding:0;gap:0;}
/* Bildfeld exakt 16:9: cover auf einer 16:9-Fläche beschneidet ein
   16:9-Foto NICHT (Rückmeldung Ecki 30.07.: Fotos wurden angeschnitten) */
.pk-dmat .pk-media,.pk-dkat .pk-media{width:auto;height:100%;aspect-ratio:16/9;border-radius:16px 0 0 16px;flex:none;}
.pk-dmat .pk-mat-t{flex:1;min-width:0;padding:8px 10px;font-size:12.5px;line-height:1.3;font-weight:800;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-word;hyphens:auto;}
.pk-dkat .pk-kat-t{flex:1;min-width:0;padding:8px 10px;font-size:13px;}
.pk-dkat .pk-kat-ch{position:static;margin-right:10px;}
.pk-dcard.sel{outline:3px solid var(--c,var(--accent));outline-offset:-2px;}
/* Drehrad eingebettet im Bildschirm (Einsatztagebuch) statt Overlay */
.pk-stage-inline{position:relative;inset:auto;width:100%;height:100%;}
/* Einsatztagebuch-Trommelkarte: Anlassfarbe als Verlauf, wie die Log-Karten */
.etb-dcard{flex-direction:column;align-items:stretch;justify-content:center;gap:4px;
  padding:12px 14px;border-left:4px solid var(--c);
  background:var(--surface);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 26%,var(--surface)) 0%,color-mix(in srgb,var(--c) 8%,var(--surface)) 65%,var(--surface) 100%);}
.etb-dc-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.etb-dc-pill{font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:60%;}
.etb-dc-datum{font-size:11.5px;font-weight:700;color:var(--muted-1);white-space:nowrap;}
.etb-dc-titel{font-size:15.5px;font-weight:800;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.etb-dc-sub{font-size:11.5px;color:var(--muted-1);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.etb-dc-crew{display:flex;align-items:center;margin-top:3px;}
.etb-dc-crew img{width:22px;height:22px;border-radius:50%;object-fit:cover;
  border:2px solid var(--surface);margin-left:-6px;flex:none;}
.etb-dc-crew img:first-child{margin-left:0;}
.etb-dc-mehr{font-size:10.5px;font-weight:700;color:var(--muted-1);margin-left:3px;white-space:nowrap;}
.pk-dcard.unav{opacity:.45;}
.pk-dcard .pk-chk{top:7px;right:7px;}
/* --- Übungs-Trommel Dienstsport (Wunsch Ecki 06.08.2026): das Drehrad
   ersetzt die Listenauswahl. Übungskarten mit 16:9-Foto, Muskelgruppen und
   Kurzbeschreibung; Gruppenkarten wie die Material-Kategorien. --- */
.spt-gkarte{padding:0;gap:0;border-left:4px solid var(--c);
  background:var(--surface);
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 16%,var(--surface)),var(--surface) 62%);}
.spt-gfoto{position:relative;height:100%;aspect-ratio:4/3;flex:none;overflow:hidden;background:var(--surface-2);}
.spt-gfoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.spt-gtxt{flex:1;min-width:0;padding:10px 12px;}
.spt-gtxt b{display:block;font-size:14.5px;font-weight:800;line-height:1.25;}
.spt-gtxt small{display:block;font-size:11px;font-weight:600;color:var(--muted-1);margin-top:3px;}
.spt-fb{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted-1);opacity:.5;}
.spt-ukarte{flex-direction:column;align-items:stretch;gap:0;padding:0;}
/* 4:3 = das Format, in dem die Übungsfotos geliefert werden. Vorher stand
   hier 16:9, dadurch schnitt cover oben und unten je ein Achtel weg
   (Rückmeldung Ecki 06.08.2026: „volles Format, nichts abschneiden"). */
.spt-foto{position:relative;width:100%;aspect-ratio:4/3;flex:none;background:var(--surface-2);}
.spt-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.spt-info{position:absolute;right:8px;bottom:8px;width:33px;height:33px;border-radius:50%;border:none;cursor:pointer;
  display:grid;place-items:center;background:rgba(10,16,26,.58);color:#fff;font-size:16px;}
.spt-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding:9px 13px 11px;
  border-left:4px solid var(--c);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 13%,var(--surface)),var(--surface) 86%);}
.spt-titel{font-size:15px;font-weight:800;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.spt-mus{font-size:11.5px;font-weight:700;color:var(--c);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Ganzzahlige Zeilenhöhe UND passende Maximalhöhe: 12 px x 1.4 = 16.8 px
   ergaben 50.4 px für drei Zeilen, der Kasten war aber 50 px hoch – die
   dritte Zeile wurde unten angeschnitten und im Dunkelmodus blieben helle
   Buchstabenreste stehen (Rückmeldung Ecki 06.08.2026). */
.spt-desc{font-size:12px;line-height:17px;color:var(--muted-1);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  max-height:51px;}
.spt-eig{justify-content:center;gap:11px;border:2px dashed var(--border);box-shadow:none;}
.spt-eig b{display:block;font-size:14.5px;font-weight:800;}
.spt-eig small{display:block;font-size:11px;font-weight:600;color:var(--muted-1);margin-top:2px;}
.spt-plus{flex:none;width:36px;height:36px;border-radius:50%;background:var(--green);color:#fff;
  display:grid;place-items:center;font-size:18px;}

/* --- große Auswahl-Felder im Formular --- */
.pk-feld{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;margin-top:12px;margin-bottom:12px;
  padding:11px 13px;border:1px solid var(--border);border-radius:16px;background:var(--surface);
  cursor:pointer;font-family:inherit;text-align:left;color:var(--text);
  box-shadow:var(--shadow);transition:transform .15s;}
.pk-feld+.pk-feld{margin-top:0;}   /* Folge-Feld: 12px vom Vorgänger reichen */
.pk-feld:active{transform:scale(.985);}
.pk-feld-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--surface-2);
  background:color-mix(in srgb,var(--pf,var(--accent)) 15%,var(--surface));color:var(--pf,var(--accent));}
.pk-feld-tx{flex:1;min-width:0;}
.pk-feld-tx small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted-1);margin-bottom:2px;}
.pk-feld-val{display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:700;min-width:0;}
.pk-feld-val .leer{color:var(--muted-1);font-weight:600;}
.pk-feld-val .dot{width:11px;height:11px;border-radius:50%;flex:none;}
.pk-feld-val .avs{display:flex;flex:none;}
.pk-feld-val .avs img{width:24px;height:24px;border-radius:50%;object-fit:cover;
  border:2px solid var(--surface);margin-left:-7px;}
.pk-feld-val .avs img:first-child{margin-left:0;}
.pk-feld-val .txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.pk-feld-ch{flex:none;color:var(--muted-1);}

@media (prefers-reduced-motion: reduce){
  .pk-card,.pk-look-buehne .pk-card,.pk-look-wolke .pk-card{animation-duration:.01s !important;animation-delay:0s !important;}
  .pk-look-buehne .pk-card,.pk-look-wolke .pk-card{animation-name:pkIn !important;}
}

/* ===== Ordner-Trommel (horizontales Rad, Bereiche Einheit/Fortbildung) ===== */
/* Horizontale Trommeln lassen die Seite SENKRECHT weiterscrollen:
   touch-action:none schluckte auch Hoch-/Runterwischen – wer den Finger auf
   der Trommel hatte, bekam die Seite nicht mehr bewegt (Rueckmeldung Ecki
   09.08.2026; betraf auch Boards und Schaltzentrale). pan-y gibt die
   senkrechte Richtung an den Browser zurueck; beim seitlichen Ziehen kommen
   die Pointer-Events weiter bei der Trommel an, und kippt eine diagonale
   Geste ins Scrollen, beendet das pointercancel den Zug sauber (endDrag
   rastet ein). Senkrechte Raeder behalten none – dort IST die Geste das Rad. */
.pk-stage-hor{perspective:1050px;touch-action:pan-y;}
/* Senkrechte Trommel, die das Quer-Wischen der App durchlaesst (v607). */
.pk-stage-quer .pk-stage,.pk-stage-quer.pk-stage{touch-action:pan-x;}
/* Flach-Modus: Karten liegen als Streifen nebeneinander. Perspektive UND
   preserve-3d müssen weg – sonst rechnet der Browser weiter im 3D-Raum
   (unnötige Neuberechnung je Bild, und ein Rest-Fluchtpunkt bliebe sichtbar). */
.pk-stage-flach{perspective:none;}
.pk-stage-flach .pk-drum{transform-style:flat;}
.ordner-card{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;}
.ordner-bild{display:block;flex:1;min-height:0;position:relative;
  background-color:var(--surface-2);background-size:cover;background-position:center;}
.ordner-emoji{position:absolute;inset:0;display:grid;place-items:center;font-size:46px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.3));}
.ordner-ampel{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-size:12px;box-shadow:0 2px 7px rgba(0,0,0,.3);}
.ordner-badge{position:absolute;top:8px;left:8px;background:var(--red);color:#fff;
  font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:999px;box-shadow:0 2px 7px rgba(0,0,0,.3);}
.ordner-titel{display:block;flex:none;padding:9px 10px;font-size:13.5px;font-weight:800;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--surface);}
.ordner-info{margin-top:10px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--shadow);padding:13px 15px;min-height:84px;}
/* Tiefenschärfe: nur der mittlere Ordner ist scharf, die Nachbarn leicht
   unscharf und werden scharf, sobald man sie in die Mitte zieht
   (Wunsch Ecki 01.08.2026).
   v428-WACHSAMKEIT: filter:blur hat schon einmal Team-Handys ausgebremst.
   Deshalb bewusst der billige Weg – FESTER Radius, der nur beim Wechsel
   der Klasse .mitte umgeschaltet wird, statt eines je Bild neu
   berechneten Werts (das muesste der Browser jedes Bild neu rastern).
   Betroffen sind zwei kleine Karten, nicht die Bildschirmflaeche.
   Unschaerfe liegt auf dem BILD, nicht auf der Karte: so bleiben Kante,
   Rundung und Titel scharf – eine unscharfe Kartenkante sieht matschig
   aus. scale(1.04) deckt den transparenten Saum ab, den der Weichzeichner
   sonst am Bildrand hinterlaesst. */
.ordner-bild{transition:filter .2s ease, transform .2s ease;}
.pk-ditem:not(.mitte) .ordner-bild{filter:blur(2.6px);transform:scale(1.04);}
.pk-ditem:not(.mitte) .ordner-titel{opacity:.72;}
/* Beim Nachschwingen KEINE Ueberblendung: dort rauschen mehrere Karten
   kurz hintereinander durch die Mitte, jede wuerde 0,2 s lang einen sich
   aendernden Weichzeichner-Radius animieren – also genau das teure
   Neurastern je Bild, das wir vermeiden wollen. Beim langsamen Ziehen
   (da sieht man es) bleibt die Ueberblendung. */
.pk-stage.schnell .ordner-bild{transition:none;}
@media (prefers-reduced-motion: reduce){
  .ordner-bild{transition:none;}
}

/* ===== Schnellzugriff (Zieh-Feld vom oberen Rand, v517) =====
   Unschaerfe NUR im Ruhezustand (.offen) – waehrend des Ziehens wird
   ausschliesslich opacity/transform bewegt (Lehre v428). Ohne
   backdrop-filter-Unterstuetzung bleibt die Abdunklung (Muster .pk-bg). */
#sz-ov{position:fixed;inset:0;z-index:88;}   /* ueber Chat (80), unter Sheets (90) */
/* Samsung-Optik (Wunsch Ecki): Das FELD ist durchscheinend – man sieht die
   App dahinter, im Ruhezustand weichgezeichnet. Die Abdunklung + Unschaerfe
   liegen auf .sz-bg (ganze Flaeche); Feld und Kacheln sind nur getoent, der
   Frost-Eindruck kommt von der Flaeche dahinter durch sie hindurch. */
#sz-ov .sz-bg{position:absolute;inset:0;background:rgba(10,16,26,.44);opacity:0;}
#sz-ov.offen .sz-bg{-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);}
.sz-panel{position:absolute;left:50%;top:0;width:100%;max-width:480px;
  transform:translate(-50%,-100%);will-change:transform;
  background:color-mix(in srgb,var(--surface) 22%,transparent);
  border-radius:0 0 26px 26px;
  border-bottom:1px solid color-mix(in srgb,var(--border) 55%,transparent);
  box-shadow:0 18px 44px rgba(4,8,16,.35);
  padding-top:calc(6px + var(--safe-top));}
.sz-inhalt{max-height:calc(84vh - var(--safe-top));overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:2px 16px 6px;}
/* Griff bewusst gross (36 px): Er ist die EINZIGE Zuzieh-Zone, sobald die
   Kachel-Liste scrollt – siehe Kommentar in js/schnellzugriff.js. */
.sz-griff{height:36px;display:grid;place-items:center;cursor:grab;}
.sz-griff::before{content:'';width:52px;height:5px;border-radius:999px;
  background:color-mix(in srgb,var(--text) 38%,transparent);}
.sz-gruppe{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text);opacity:.75;margin:12px 2px 8px;}
.sz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
/* Kacheln durchscheinend (Samsung-Optik): getoentes Glas, durch das der
   weichgezeichnete Hintergrund sichtbar bleibt. Deckende Grundfarbe waere
   hier falsch – die Toenung MUSS transparent mischen, sonst ist der
   Frost-Effekt weg. */
.sz-kachel{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;border:1px solid color-mix(in srgb,var(--border) 45%,transparent);
  border-radius:18px;background:color-mix(in srgb,var(--surface) 52%,transparent);
  color:var(--text);cursor:pointer;font-family:inherit;padding:6px;min-width:0;
  transition:transform .12s;}
.sz-kachel:active{transform:scale(.95);background:color-mix(in srgb,var(--surface) 70%,transparent);}
.sz-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--c,var(--accent)) 26%,transparent);color:var(--c,var(--accent));}
.sz-ic i{font-size:22px;}
.sz-kachel .t{font-size:11.5px;font-weight:700;text-align:center;line-height:1.15;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.sz-kachel small{font-size:10px;font-weight:700;color:var(--text);opacity:.65;text-transform:uppercase;letter-spacing:.04em;}
@media (prefers-reduced-motion: reduce){
  .sz-panel,#sz-ov .sz-bg,.sz-kachel{transition:none!important;}
}

/* ===== Foto-Kopf der Unterbereiche (Variante A „Auslauf") ===== */
.bereich-kopf{position:relative;height:212px;
  /* bricht aus dem .scroll-Innenabstand aus, bis unter die Statusleiste.
     Unten KEINE Überlappung mehr: Karten im Auslauf erzeugten eine sichtbare
     Kante im Foto (Rückmeldung Ecki, Nachweis-Stand bei LebEL). */
  margin:calc(-14px - var(--safe-top)) -16px 2px;}
.bk-foto{position:absolute;inset:0;background-size:cover;background-position:center;
  background-color:var(--surface-2);
  /* Auslauf erreicht VOR dem Elementende volle Transparenz – der alte
     Verlauf (transparent erst bei 100%) ließ auf dunklen Fotos eine
     sichtbare Kante stehen (Rückmeldung Ecki, Nützliche Hinweise) */
  -webkit-mask-image:linear-gradient(180deg,#000 42%,rgba(0,0,0,.45) 72%,transparent 96%);
  mask-image:linear-gradient(180deg,#000 42%,rgba(0,0,0,.45) 72%,transparent 96%);}
.bk-text{position:absolute;left:18px;right:18px;bottom:48px;z-index:2;}
/* Lesbarkeits-Schutz: sanfte Abdunklung hinter dem Text, unabhängig vom Foto */
.bk-text::before{content:'';position:absolute;left:-34px;top:-26px;bottom:-30px;
  width:min(88%,340px);z-index:-1;
  background:radial-gradient(ellipse at 22% 62%,rgba(7,11,18,.58),transparent 72%);}
.bk-text h1{font-size:25px;font-weight:850;color:#fff;letter-spacing:-.02em;margin:0;
  text-shadow:0 2px 14px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,.55);}
.bk-text small{display:block;margin-top:3px;font-size:12.5px;font-weight:650;
  color:rgba(255,255,255,.94);text-shadow:0 1px 8px rgba(0,0,0,.75);}
/* Flacher Kopf für Bildschirme, die die Höhe fürs Raster brauchen
   (Urlaubsplaner: ALLE Mitarbeiter sollen gleichzeitig zu sehen sein).
   Höhe muss zu window._kopfHoehe() in app.js passen, sonst landet die
   Flug-Kopie aus der Ordner-Trommel daneben. */
/* ---- Wanderndes Panorama im Foto-Kopf (v592) ----
   Der Rahmen bleibt 16:9-artig, das Bild darin ist breiter (21:9) und
   faehrt langsam von links nach rechts und wieder zurueck. Bewegt wird
   ausschliesslich per transform: Das laeuft auf der Grafikkarte, ohne dass
   der Browser die Flaeche je Bild neu zeichnet – anders als eine Animation
   auf background-position (Lehre v428).
   Der Weg ist genau der Ueberstand: eigene Breite minus Bildschirmbreite.
   DAUER 75 s (v654, vorher 100 s in v653): Das Panorama ist 5,4:1, der Weg
   auf der Einsatzkarte 695 px (gemessen, 341x192-Flaeche). 75 s ergeben
   ~9,3 px/s – Eckis Nachjustierung „etwas schneller" (+33 % gegenueber
   v653). Nicht unter ~70 s gehen: die 44er-Dauer ergaebe 15,8 px/s und war
   im v653-Test als Karussell verworfen. */
/* container-type gibt uns 100cqw = Breite DIESER Flaeche. Vorher stand hier
   100vw – das stimmt nur beim randlosen Foto-Kopf; die Einsatzkarte der
   Startseite ist schmaler, das Bild waere zu weit gelaufen (v593).
   Ohne cqw-Unterstuetzung wird die Ziel-Transformation ungueltig, die
   Animation greift nicht und das Bild steht links am Bahnhof – ein
   brauchbarer Rueckfall. */
.bk-pan{overflow:hidden;container-type:inline-size;}
.bk-pan-img{position:absolute;top:0;left:0;height:100%;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  will-change:transform;animation:bkPan 75s cubic-bezier(.45,0,.55,1) infinite alternate;}
@keyframes bkPan{ from{transform:translateX(0)} to{transform:translateX(calc(100cqw - 100%))} }
/* Bewegung reduzieren: Bild steht still – und zwar links am Bahnhof,
   derselbe Anfang wie bei der Bewegung (Wunsch Ecki 09.08.2026). */
@media (prefers-reduced-motion: reduce){
  .bk-pan-img{animation:none;transform:translateX(0);}
}
/* Plakat: Der Abdunklungs-Verlauf liegt als eigene Schicht ueber dem
   wandernden Bild – im Hintergrund wuerde er mitwandern. */
.hz-plakat-ph.bk-pan::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,transparent 46%,rgba(0,0,0,.68));}
.hz-pl-txt{position:relative;z-index:1;}
.hz-neu{z-index:2;}
.bereich-kopf.kompakt{height:132px;}
.bereich-kopf.kompakt .bk-text{bottom:22px;}
.bereich-kopf.kompakt .bk-text h1{font-size:21px;}
.bereich-kopf.kompakt .bk-text small{font-size:11.5px;}
.bk-akt{position:absolute;top:calc(10px + var(--safe-top));right:12px;z-index:3;
  display:flex;gap:8px;align-items:center;}
.bk-akt .iconbtn{width:40px;height:40px;border-radius:50%;color:#fff;
  background:rgba(20,26,36,.45);border:1px solid rgba(255,255,255,.25);}
/* Zurück INNERHALB des Bereichs (Album/Ordner) – klein & dezent oben links */
.bk-back{position:absolute;top:calc(10px + var(--safe-top));left:12px;z-index:3;}
.bk-back button{width:40px;height:40px;border-radius:50%;color:#fff;cursor:pointer;
  display:grid;place-items:center;font-size:17px;padding:0;
  background:rgba(20,26,36,.45);border:1px solid rgba(255,255,255,.25);}
/* Live-Vorschau unter der Ordner-Trommel */
.ordner-vs-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px;}
.ordner-vs-kopf b{font-size:15px;font-weight:800;}
.ordner-vs-kopf span{font-size:10.5px;color:var(--muted-1);font-weight:600;text-align:right;flex:none;}
/* Vorschau ist BEDIENBAR (Wunsch Ecki 31.07.2026): Knöpfe, Reiter und
   Fotos funktionieren direkt aus der Vorschau heraus. Aktionen, die den
   Bereich neu aufbauen, springen dabei in die Vollansicht – gewollt. */
.ordner-vs .page-head,.ordner-vs .home-head{display:none!important;}
/* Eigener Bezugsrahmen (v662): Was in der Vorschau absolut positioniert ist,
   soll sich an der Karte ausrichten und nicht an der Seite dahinter. */
.ordner-vs{position:relative;}
.ordner-vs-lade{padding:18px 0;text-align:center;color:var(--muted-1);font-size:12.5px;}

/* Einsatztagebuch: Jahres-Chips ueber der Trommel */
.etb-chips{display:flex;gap:7px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 2px 4px;}
.etb-chip{flex:none;border:1.5px solid var(--border);background:var(--surface);color:var(--text);
  font-weight:800;font-size:13px;padding:7px 16px;border-radius:999px;cursor:pointer;}
.etb-chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink,#fff);}

/* Körperkarte (Dienstsport): Eckis generiertes Bild + Muskel-Overlay.
   Der weiße Bildhintergrund verschwindet per multiply auf hellen Karten;
   in den dunklen Themes wird das Bild invertiert und per screen gemischt
   (Schwarz verschwindet), hue-rotate holt den kühlen Blauton zurück. */
.kk-wrap{position:relative;max-width:330px;margin:2px auto 0;}
.kk-wrap img{width:100%;display:block;mix-blend-mode:multiply;}
[data-theme="dark"] .kk-wrap img,[data-theme="mitternacht"] .kk-wrap img,
[data-theme="schiefer"] .kk-wrap img,[data-theme="tann"] .kk-wrap img,
[data-theme="wein"] .kk-wrap img{filter:invert(1) hue-rotate(180deg);mix-blend-mode:screen;}
.kk-wrap svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}

/* Muskel-Editor (eigene Übung): zoombarer Rahmen, Flächen antippbar */
.kk-zoom{position:relative;overflow:hidden;border-radius:14px;border:1.5px solid var(--border);
  background:var(--surface);touch-action:none;aspect-ratio:1122/1402;}
.kk-zoom .kk-pan{position:absolute;inset:0;transform-origin:0 0;will-change:transform;}
.kk-zoom img{width:100%;display:block;mix-blend-mode:multiply;-webkit-user-select:none;user-select:none;}
[data-theme="dark"] .kk-zoom img,[data-theme="mitternacht"] .kk-zoom img,
[data-theme="schiefer"] .kk-zoom img,[data-theme="tann"] .kk-zoom img,
[data-theme="wein"] .kk-zoom img{filter:invert(1) hue-rotate(180deg);mix-blend-mode:screen;}
.kk-zoom svg{position:absolute;inset:0;width:100%;height:100%;}
.kk-zoom svg .kk-fl{cursor:pointer;}
.kk-zbtn{width:36px;height:36px;border-radius:11px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer;
  font-size:16px;box-shadow:var(--shadow);}

/* Leistungs-Gesamtübersicht (Einheitsführung) */
/* gap:0 – die Abstände zwischen den Ampeln kommen aus .lst-punkt; ein
   zusätzlicher Flex-Gap fraß 21 px, die dem Namen fehlten */
.lst-zeile{display:flex;align-items:center;gap:0;padding:9px 0;border-top:1px solid var(--border-2);cursor:pointer;}
.lst-zeile:first-child{border-top:none;}
/* Avatar in eigener Spalte: der Name klebte sonst am Bild
   (Rückmeldung Ecki 06.08.2026) */
.lst-av{flex:none;width:30px;height:30px;display:block;}
.lst-name{flex:1;min-width:0;font-weight:700;font-size:13px;margin-left:10px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lst-punkt{flex:none;width:15px;height:15px;border-radius:50%;margin:0 7px;display:inline-grid;place-items:center;
  font-size:13px;font-weight:800;box-shadow:inset 0 0 0 1px rgba(0,0,0,.10);}
/* Kopfzeile: gemischte Schreibweise statt Versalien – so passt „Schuss"
   vollständig und liest sich besser als winziges Großgeschriebenes.
   Spaltenbreite = Punkt (15) + beidseitiger Abstand (2×7). */
.lst-kopf{flex:none;width:29px;text-align:center;font-size:7.5px;font-weight:800;letter-spacing:-.25px;
  color:var(--muted-1);white-space:nowrap;}

/* Übungslagen: Vollbild-Overlays für Lagebild-Editor und Erklärmodus */
.ul-ov{position:fixed;inset:0;z-index:340;display:flex;flex-direction:column;background:var(--bg);}
.ul-kopf{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 8px;
  background:var(--surface);border-bottom:1px solid var(--border);}
.ul-wz{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:8px 10px;
  background:var(--surface);border-bottom:1px solid var(--border);flex:none;}
.ul-wz-kn{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:56px;
  border:1.5px solid var(--border);background:var(--surface);color:var(--muted-1);
  border-radius:12px;padding:7px 9px;cursor:pointer;font-family:inherit;}
.ul-wz-kn small{font-size:9.5px;font-weight:700;}
.ul-wz-kn.akt{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent);}
.ul-stage{position:relative;flex:1;min-height:0;overflow:hidden;background:#101722;touch-action:none;}
.ul-stage svg{position:absolute;}
.ul-stage .fang{cursor:pointer;}
.ul-stage .griff{fill:#fff;stroke:#1B84FF;stroke-width:2.5;opacity:.96;cursor:grab;}
.ul-zoomkn{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px;z-index:5;}
.ul-zoomkn button{width:40px;height:40px;border-radius:12px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text);font-size:21px;font-weight:700;cursor:pointer;box-shadow:var(--shadow);}
.ul-eigen{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 12px calc(env(safe-area-inset-bottom,0px) + 9px);
  background:var(--surface);border-top:1px solid var(--border);min-height:52px;font-size:13px;}
.ul-eigen .field{margin-top:0;padding:8px 10px;font-size:13.5px;flex:1;min-width:120px;width:auto;}
.ul-eigen b{font-size:13px;flex:none;}
.ul-hin{font-size:12px;color:var(--muted-1);line-height:1.4;}
.ul-kn{width:auto;padding:8px 13px;font-size:13px;flex:none;}
.ul-farben{display:inline-flex;gap:5px;align-items:center;flex:none;}
.ul-farben button{width:24px;height:24px;border-radius:50%;border:2px solid var(--surface);
  box-shadow:0 0 0 1.5px var(--border);cursor:pointer;padding:0;}
.ul-farben button.akt{box-shadow:0 0 0 2.5px var(--accent);}
.ul-farben input[type=color]{width:26px;height:26px;border:none;border-radius:8px;padding:0;background:transparent;cursor:pointer;}
.ul-gr{display:inline-flex;gap:4px;}
.ul-gr button{width:32px;height:30px;border-radius:9px;border:1.5px solid var(--border);background:var(--surface);
  color:var(--muted-1);font-weight:800;font-size:11.5px;cursor:pointer;}
.ul-gr button.akt{border-color:var(--accent);color:var(--accent);}
.ul-schalter{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;flex:none;cursor:pointer;}
.ul-schalter input{width:17px;height:17px;accent-color:var(--accent);}
/* Routen: fließende Strichelung (nur Erklärmodus) bzw. ruhende Strichelung */
.ul-fluss{animation:ulFluss 1.1s linear infinite;}
@keyframes ulFluss{to{stroke-dashoffset:var(--ul-zyklus,-24px);}}
/* Erklärmodus */
.ul-praes{background:#0B111C;}
.ul-praes .ul-stage{background:#0B111C;}
.ul-praes-titel{flex:1;min-width:0;color:#fff;font-weight:800;font-size:15px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ul-praes-zaehler{color:#93A1B5;font-size:12.5px;font-weight:700;flex:none;}
.ul-pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:52px;height:76px;
  border:none;border-radius:16px;background:rgba(20,28,44,.55);color:#fff;font-size:34px;
  cursor:pointer;backdrop-filter:none;}
.ul-pfeil-l{left:6px;} .ul-pfeil-r{right:6px;}
.ul-praes-fuss{flex:none;padding:10px 14px calc(env(safe-area-inset-bottom,0px) + 12px);background:rgba(13,19,31,.92);}
.ul-praes-punkte{display:flex;gap:6px;justify-content:center;margin-bottom:7px;}
.ul-praes-punkte span{width:7px;height:7px;border-radius:50%;background:#3A4557;}
.ul-praes-punkte span.akt{background:#fff;}
.ul-praes-text{color:#D9E1EC;font-size:13.5px;line-height:1.55;max-height:26vh;overflow-y:auto;}

/* Farbwähler im Apple-Stil (Raster · Spektrum · Regler), Port aus dem
   Lagemonitor – gestylt über Theme-Variablen, läuft hell wie dunkel */
.fk{width:36px;height:36px;border-radius:50%;border:2px solid var(--surface);cursor:pointer;
  flex:0 0 auto;padding:0;box-shadow:0 0 0 1.5px var(--border),0 1px 4px rgba(0,0,0,.18);}
#fpHg{position:fixed;inset:0;z-index:9000;background:rgba(8,12,20,.45);}
#fp{position:fixed;z-index:9001;width:340px;max-width:94vw;border-radius:24px;
  background:var(--surface);border:1px solid var(--border);
  box-shadow:0 30px 90px rgba(0,0,0,.35);overflow:hidden;color:var(--text);
  animation:fpRein .18s cubic-bezier(.22,.8,.28,1);}
@keyframes fpRein{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.fp-kopf{display:flex;align-items:center;padding:15px 16px 10px;font-size:16px;font-weight:800;}
.fp-kopf button{margin-left:auto;width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;
  background:var(--surface-2);color:var(--muted-1);display:flex;align-items:center;justify-content:center;font-size:15px;}
.fp-seg{display:flex;gap:2px;margin:0 16px 14px;padding:2px;border-radius:10px;background:var(--surface-2);}
.fp-seg button{flex:1;border:0;background:transparent;color:var(--muted-1);border-radius:8px;
  padding:7px 4px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;}
.fp-seg button.akt{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.18);font-weight:700;}
.fp-koerper{padding:0 16px;min-height:212px;}
.fp-abschnitt{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-1);margin:0 0 8px;}
.fp-signal{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-bottom:14px;}
.fp-signal button{aspect-ratio:1;border-radius:50%;border:2.5px solid transparent;cursor:pointer;padding:0;}
.fp-signal button.akt{border-color:var(--surface);box-shadow:0 0 0 3px var(--accent);}
.fp-raster{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;}
.fp-raster button{aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(0,0,0,.06);cursor:pointer;padding:0;}
.fp-raster button.akt{border-color:var(--surface);box-shadow:0 0 0 2px var(--accent);}
.fp-sv{position:relative;height:150px;border-radius:14px;cursor:crosshair;margin-bottom:14px;
  touch-action:none;border:1px solid var(--border);}
.fp-sv i{position:absolute;width:22px;height:22px;border-radius:50%;border:3px solid #fff;
  transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.45);}
.fp-hue{position:relative;height:28px;border-radius:14px;cursor:pointer;touch-action:none;
  border:1px solid var(--border);
  background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);}
.fp-hue i{position:absolute;top:50%;width:26px;height:26px;border-radius:50%;border:3px solid #fff;
  transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.45);}
.fp-regler{display:grid;gap:13px;padding-top:6px;}
.fp-r{display:grid;grid-template-columns:22px 1fr 46px;gap:10px;align-items:center;font-size:13px;}
.fp-r b{color:var(--muted-1);font-weight:700;}
.fp-r span{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted-1);}
.fp-r input[type=range]{-webkit-appearance:none;appearance:none;height:22px;border-radius:11px;outline:none;
  border:1px solid var(--border);}
.fp-r input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;
  border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.3);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.35);}
.fp-fuss{display:flex;align-items:center;gap:10px;padding:14px 16px 16px;margin-top:12px;
  border-top:1px solid var(--border);}
.fp-vor{width:44px;height:44px;border-radius:50%;border:2px solid var(--surface);flex:0 0 auto;
  box-shadow:0 0 0 1.5px var(--border),0 2px 8px rgba(0,0,0,.2);}
.fp-hex{width:104px;background:var(--surface-2);color:var(--text);border:1px solid var(--border);
  border-radius:9px;padding:9px 10px;font-size:14px;font-family:inherit;
  text-transform:uppercase;letter-spacing:.05em;}
.fp-zuletzt{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap;padding-bottom:4px;}
.fp-zuletzt button{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--border);cursor:pointer;padding:0;}

/* ===== Historie · einheitliches Format für alle Blöcke ==================
   Rückmeldung Ecki 06.08.2026: „Aktuelle Version", „Versionen" und
   „Änderungspakete" sahen unterschiedlich aus, und die großen Etappen
   sollen sich wie die Monatskarten klappen lassen. Beides läuft jetzt
   über dieselben Klassen – ein Baustein, ein Aussehen. */
.hist-kacheln{display:flex;align-items:stretch;gap:8px;margin-bottom:8px;}
/* margin:0 ist Pflicht: die App gibt aufeinanderfolgenden .card einen
   Abstand nach oben – in einer Flex-ZEILE hätte das die zweite und dritte
   Kachel um 12 px tiefer gesetzt (genau der ungleiche Eindruck, den Ecki
   am 06.08.2026 gemeldet hat). */
.hist-kacheln .hist-kachel{flex:1 1 0;min-width:0;margin:0;padding:12px 6px 11px;
  text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.hist-kachel-w{font-size:21px;font-weight:800;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
/* Zwei Zeilen fest reserviert: „Änderungspakete" passt sonst nicht in die
   Kachelbreite und würde abgeschnitten – so bleiben alle drei gleich hoch,
   egal wie lang die Beschriftung ist (Rückmeldung Ecki 06.08.2026). */
.hist-kachel-l{font-size:10.5px;color:var(--muted-1);font-weight:700;line-height:1.25;
  margin-top:4px;height:26px;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;hyphens:auto;}
.hist-karte{padding:0;margin-bottom:10px;overflow:hidden;}
.hist-kopf{display:flex;align-items:center;gap:10px;padding:13px 15px;cursor:pointer;}
.hist-titel{flex:1;min-width:0;font-weight:800;font-size:15px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hist-anz{flex:none;font-size:12px;color:var(--muted-1);font-weight:600;}
.hist-body{padding:0 15px 12px;}

/* Inhalts-Trommeln nutzen die volle Bildschirmbreite: Übungen, Trainings
   und DSA-Disziplinen haben Fotos und mehrzeilige Texte, die bei 78vw
   umbrachen ("Kurzhantel & Kettlebell" auf zwei Zeilen, Beschreibungen
   angeschnitten – Rückmeldung Ecki 06.08.2026). Die schmalen Auswahl-
   Overlays (Anlass, Crew, Material, Einsatztagebuch) bleiben unberührt.
   #spt-ov gibt es seit v671 nicht mehr – die Übungsauswahl Dienstsport
   läuft jetzt ebenfalls über Picker.auswahlTrommel (#pkat-ov). */
#pkat-ov .pk-drum{width:min(93vw,430px);}

/* --- Auswahl-Overlay: Trommel ODER Liste (v671) ---
   Der Kopf bekommt für den Ansicht-Knopf zwei zusätzliche Spalten –
   symmetrisch (46 · 46 · Titel · 46 · 46), damit der Titel mittig bleibt.
   Die Liste zeigt dieselben Karten in derselben Breite und Höhe wie die
   Trommel (Spaltenbreite = .pk-drum-Breite, Höhe kommt als Inline-Stil
   aus fuellen) – am PC stellt auto-fill mehrere Spalten nebeneinander.
   Unten Luft für den schwebenden Fertig-Knopf. */
#pkat-ov .pk-head{grid-template-columns:46px 46px minmax(0,1fr) 46px 46px;}
#pkat-ov.liste .pk-body{overflow-y:auto;padding:0;}
.pkat-flow{display:grid;grid-template-columns:repeat(auto-fill,min(93vw,430px));justify-content:center;
  gap:12px;padding:10px 12px calc(96px + env(safe-area-inset-bottom));}
.pkat-li{position:relative;cursor:pointer;}
.pkat-li .pk-dcard{transition:transform .12s;}
.pkat-li:active .pk-dcard{transform:scale(.985);}

/* Umschalter Karte/Luftbild im Kartenausschnitt (v546) */
.ul-luftum{display:flex;gap:0;flex:none;border:1.5px solid var(--border);border-radius:999px;overflow:hidden;}
.ul-luftum button{border:none;background:var(--surface);color:var(--muted-1);
  font-family:inherit;font-size:12px;font-weight:700;padding:7px 13px;cursor:pointer;}
.ul-luftum button.akt{background:var(--accent);color:var(--accent-ink,#fff);}

/* ============================================================
   Ungelesen-Marke am rechten Rand (v553)
   ============================================================
   Der Wurzelknoten liegt bildschirmfuellend an document.body – NICHT in
   #view, denn den baut go()/_uiRefresh bei jeder neuen Nachricht komplett
   neu und eine laufende Bewegung wuerde von vorn beginnen.
   pointer-events:none, damit alle Gesten hindurchgehen; nur die schmale
   Tippflaeche faengt einen echten Tipp ab.
   Farbe kommt aus --ungel (js/ungelesen.js setzt sie am Wurzelelement),
   damit Randmarke und Zeilenstriche nie auseinanderlaufen. */
.ungel-rand{position:fixed;inset:0;z-index:89;pointer-events:none;}
.ungel-seg{position:absolute;display:block;border-radius:3px;
  background:var(--ungel,var(--red));box-shadow:0 0 12px -3px var(--ungel,var(--red));
  will-change:transform;}
.ungel-pfad{fill:none;stroke:var(--ungel,var(--red));stroke-linecap:round;}
.ungel-tipp{position:absolute;right:0;width:26px;padding:0;margin:0;border:none;
  background:none;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;}

/* Herzschlag der „stillen Kante": dreimal kurz kraeftiger, dann Ruhe.
   Bewusst endlich (3 Durchgaenge) – Dauer-Animationen sind seit v428 tabu. */
@keyframes ungelHerz{0%,100%{transform:scaleX(1)}50%{transform:scaleX(2.2)}}
.ungel-seg.ungel-herz{transform-origin:right center;animation:ungelHerz .42s ease-in-out 3;}

/* Derselbe Strich, jetzt vor der Chatzeile. */
.chat-list-item{position:relative;}
.cli-strich{position:absolute;left:0;top:12px;bottom:12px;width:3px;
  border-radius:0 3px 3px 0;background:var(--ungel,var(--red));
  transform-origin:left center;pointer-events:none;}

/* Vorfuehr-Buehne in den Einstellungen */
.ungel-probe{position:relative;height:150px;border-radius:14px;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--border);margin-bottom:12px;}
.ungel-probe-zeilen{position:absolute;left:0;right:56px;top:16px;display:flex;
  flex-direction:column;gap:10px;}
.ungel-probe-zeile{position:relative;display:flex;align-items:center;gap:9px;
  height:34px;padding-left:12px;}
.ungel-probe-av{width:26px;height:26px;border-radius:50%;background:var(--border);flex:none;}
.ungel-probe-txt{height:8px;border-radius:4px;background:var(--border);flex:1;margin-right:10px;}
.ungel-probe .cli-strich{top:4px;bottom:4px;}

@media (prefers-reduced-motion: reduce){
  .ungel-seg.ungel-herz{animation:none;}
  .cli-strich{transition:none !important;}
}

/* ============================================================
   Einstellungen: Bereichs-Kacheln (v554)
   ============================================================
   Ersetzt die dreizehn gleich aussehenden Klappbalken auf der obersten
   Ebene. Optik bewusst nah an den Dashboard-Kacheln, damit sich die
   Einstellungen nicht wie ein Fremdkoerper anfuehlen. */
.set-raster{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.set-kachel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow);padding:14px 14px 13px;cursor:pointer;min-width:0;
  display:flex;flex-direction:column;gap:2px;transition:transform .12s ease;}
.set-kachel:active{transform:scale(.975);}
.set-kachel-kopf{display:flex;align-items:center;justify-content:space-between;
  gap:6px;margin-bottom:8px;min-height:24px;}
.set-kachel-kopf .ti{font-size:23px;flex:none;}
.set-kachel-marke{font-size:10px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
  color:var(--green);background:color-mix(in srgb,var(--green) 15%,transparent);
  border-radius:999px;padding:2px 7px;flex:none;}
.set-kachel-t{font-weight:700;font-size:14.5px;line-height:1.25;
  /* Lange Einzelwoerter duerfen trennen statt herauszuragen. hyphens greift
     an &shy;-Stellen (und wo der Browser eine deutsche Trennung kennt),
     overflow-wrap ist die Notbremse fuer kuenftige lange Titel. */
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;min-width:0;}
.set-kachel-s{font-size:11.5px;color:var(--muted-1);line-height:1.35;}

/* ============================================================
   Sachverhalts-Bibliothek (v559)
   ============================================================ */
.svb-siegel{font-size:10px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
  border-radius:999px;padding:2px 7px;white-space:nowrap;vertical-align:1px;}
.svb-ok{color:var(--green);background:color-mix(in srgb,var(--green) 15%,transparent);}
.svb-vor{color:var(--amber);background:color-mix(in srgb,var(--amber) 18%,transparent);}
.svb-von{display:block;font-size:11px;color:var(--muted-1);margin-top:4px;}
.svb-text{font-size:12.5px;color:var(--muted-1);line-height:1.5;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.svb-voll{font-size:14px;line-height:1.65;white-space:pre-wrap;background:var(--surface-2);
  border:1px solid var(--border);border-radius:12px;padding:13px 15px;}

.svb-chips{display:flex;flex-wrap:wrap;gap:7px;}
.svb-chip{border:1.5px solid var(--border);background:var(--surface);color:var(--muted-1);
  font-family:inherit;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;cursor:pointer;}
.svb-chip.on{border-color:var(--accent);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,var(--surface));}
.svb-chip.svb-ph{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;}
.svb-hint{font-size:11.5px;color:var(--muted-1);line-height:1.45;margin:10px 0 6px;}
.svb-vorschau{font-size:13px;line-height:1.55;background:var(--surface-2);
  border:1px solid var(--border);border-radius:10px;padding:10px 12px;min-height:38px;}

/* Fundstellen der Anonymisierungs-Pruefung. Bewusst auffaellig: eine Warnung,
   die man ueberliest, ist keine. */
.svb-alarm{margin-top:14px;border:1.5px solid var(--red);border-radius:14px;padding:12px 14px;
  background:color-mix(in srgb,var(--red) 8%,var(--surface));}
.svb-alarm-kopf{display:flex;align-items:center;gap:7px;font-weight:800;font-size:14px;
  color:var(--red);margin-bottom:9px;}
.svb-alarm-zeile{font-size:12.5px;line-height:1.5;margin-bottom:9px;}
.svb-alarm-tipp{font-size:11.5px;color:var(--muted-1);line-height:1.45;margin-top:2px;}
.svb-fund{display:inline-block;background:color-mix(in srgb,var(--red) 20%,transparent);
  border-radius:5px;padding:1px 5px;margin:1px 2px 1px 0;font-weight:600;}
.svb-alarm-fuss{font-size:12px;color:var(--text);line-height:1.5;border-top:1px solid var(--border);
  padding-top:9px;margin-top:3px;}

/* Baustein-Karte in der Trommel */
.pk-dcard.svb-tkarte{display:flex;flex-direction:column;gap:5px;padding:14px 15px;text-align:left;justify-content:flex-start;}
.svb-tgrp{font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--accent);}
.svb-ttitel{font-size:15px;font-weight:700;line-height:1.25;}
.svb-ttext{font-size:12.5px;line-height:17px;max-height:68px;overflow:hidden;color:var(--muted-1);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;}

/* Fortschrittsring in Listenzeilen (v567) */
.ui-ring{display:inline-grid;place-items:center;flex:none;line-height:0;}

/* ============================================================
   „Mein Bereich" – Schaltzentrale (v571)
   ============================================================
   Aufbau: links das Hero-Foto, rechts Zahlen und „Dienst beginnen",
   darunter die Bereichs-Trommel und die Kurzfassung. */

/* align-items:stretch ist hier der ganze Trick: Das Foto bekommt KEINE feste
   Höhe, sondern wächst auf die Höhe der rechten Spalte – also bis zur
   Unterkante von „Dienst beginnen" (Wunsch Ecki 08.08.2026). Läuft ein
   Dienst, wird der Block rechts höher und das Foto wächst mit; eine Lücke
   kann gar nicht erst entstehen. */
/* Zwei Drittel Foto, ein Drittel Bedienfelder (Wunsch Ecki 08.08.2026).
   Ueber flex-Anteile statt fester Breiten, damit das Verhaeltnis auf jedem
   Geraet stimmt. min-width auf der rechten Spalte ist die Notbremse: Auf
   320 px waeren echte 1/3 nur 88 px – „+60:30" braucht mit Symbol und
   Innenabstand 100 (nachgemessen), die Zahl wuerde abgeschnitten. */
.mbz-kopf{display:flex;align-items:stretch;gap:9px;margin:10px 14px 0;}
.mbz-hero{position:relative;flex:2 1 0;min-width:0;border-radius:14px;overflow:hidden;
  background:var(--surface-2);cursor:pointer;box-shadow:var(--shadow);}
.mbz-hero-bg{position:absolute;inset:0;background-size:cover;background-position:50% 18%;}
.mbz-hero-veil{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.84) 0%,rgba(0,0,0,.30) 46%,rgba(0,0,0,.02) 100%);}
.mbz-hero-txt{position:absolute;left:0;right:0;bottom:0;padding:10px 12px 11px;}
.mbz-name{font-size:20px;font-weight:800;color:#fff;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mbz-rolle{font-size:12px;color:rgba(255,255,255,.86);margin-top:2px;line-height:1.25;}
.mbz-qual{font-size:10px;color:rgba(255,255,255,.68);margin-top:4px;line-height:1.3;}

/* Kompakter als in v573: Die Felder sollen den Blick nicht vom Foto ziehen. */
.mbz-rechts{flex:1 1 0;min-width:102px;display:flex;flex-direction:column;gap:6px;}
.mbz-wert{display:flex;align-items:center;gap:7px;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;padding:6px 8px;cursor:pointer;}
.mbz-wert.on{border-color:var(--accent);}
.mbz-wert>i{font-size:15px;flex:none;}
.mbz-wz{font-size:16px;font-weight:800;line-height:1.05;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mbz-wt{font-size:12px;font-weight:700;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mbz-wl{font-size:9.5px;color:var(--muted-1);margin-top:1px;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Der Dienst-Block wächst als Letztes – er trägt die Höhe des Kopfblocks. */
.mbz-tun{background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:8px;display:flex;flex-direction:column;justify-content:center;}
.mbz-tun .btn{padding:11px 4px!important;font-size:13px!important;line-height:1.25;
  white-space:normal;text-align:center;}
/* Symbol raus: In einer 84 px breiten Taste schiebt es „Dienst beginnen" so
   zusammen, dass der Text an der Kante klebt (nachgemessen, 1 px Überhang).
   Der Text sagt ohnehin alles; auf dem e-Plan-Bildschirm bleibt das Symbol. */
.mbz-tun .btn>i{display:none;}
/* Der Untertitel „Tagdienst · Einsatz · Bereitschaft" bricht in einer 100 px
   schmalen Spalte auf drei Zeilen und macht den Block unnoetig hoch. */
.mbz-tun>div[style*="text-align:center"]{font-size:10px!important;margin-top:5px!important;}

/* Trommelkarten. Gleiche Bauart wie die Ordner-Trommel, nur kleiner und mit
   zwei Fußzeilen (Name und Stand) statt einer. */
.mbz-card{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;}
.mbz-bild{display:block;flex:1;min-height:0;position:relative;
  background-color:var(--surface-2);background-repeat:no-repeat;}
.mbz-ring{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.45);
  border-radius:50%;padding:3px;line-height:0;}
.mbz-punkt{position:absolute;top:9px;right:9px;width:12px;height:12px;border-radius:50%;
  box-shadow:0 2px 7px rgba(0,0,0,.35);}
.mbz-fuss2{display:block;flex:none;padding:8px 9px 9px;background:var(--surface);text-align:center;}
.mbz-t{display:block;font-size:14px;font-weight:800;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mbz-s{display:block;font-size:11px;font-weight:700;margin-top:2px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Tiefenschärfe wie bei der Ordner-Trommel: fester Weichzeichner, nur beim
   Wechsel der Klasse .mitte umgeschaltet – nichts, was je Bild neu gerastert
   werden müsste (Lehre v428). */
.mbz-bild{transition:filter .2s ease, transform .2s ease;}
.pk-ditem:not(.mitte) .mbz-bild{filter:blur(2.2px);transform:scale(1.04);}
.pk-ditem:not(.mitte) .mbz-fuss2{opacity:.72;}
.pk-stage.schnell .mbz-bild{transition:none;}
@media (prefers-reduced-motion: reduce){ .mbz-bild{transition:none;} }

/* Kurzfassung unter der Trommel */
.mbz-det{margin:10px 14px 0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--shadow);padding:12px 14px;min-height:150px;}
.mbz-dk{display:flex;align-items:center;gap:9px;margin-bottom:8px;}
.mbz-dk b{font-size:15.5px;font-weight:800;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mbz-dr{font-size:11px;color:var(--muted-1);font-weight:700;flex:none;}
.mbz-dz{display:flex;align-items:baseline;gap:10px;padding:5px 0;
  border-bottom:1px dashed var(--border);font-size:12.5px;}
.mbz-dz:last-child{border-bottom:none;}
.mbz-dz>span{color:var(--muted-1);flex:1;min-width:0;}
.mbz-dz>b{font-weight:700;flex:none;text-align:right;max-width:58%;}
.mbz-sec{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted-1);margin:9px 0 2px;}
.mbz-leer{padding:16px 0;text-align:center;color:var(--muted-1);font-size:12.5px;}
.mbz-mehr{margin-top:10px;padding-top:8px;border-top:1px solid var(--border);
  font-size:11px;color:var(--muted-1);text-align:center;}
.mbz-bar{height:8px;border-radius:999px;background:var(--border);overflow:hidden;margin:2px 0 8px;}
.mbz-bar-f{height:100%;border-radius:999px;background:var(--accent);}

/* .mbz-fuss / .mbz-fuss-txt entfielen mit dem Probe-Schalter (v619). */

/* ============================================================
   Vollansicht eines Bereichs (v574)
   ============================================================ */
.mbv-kopf{position:relative;height:132px;background-size:cover;background-repeat:no-repeat;
  display:flex;align-items:flex-end;padding:12px 14px 12px;}
.mbv-back{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.42);color:#fff;border:none;}
.mbv-kopf-txt{min-width:0;}
.mbv-kopf-t{font-size:23px;font-weight:800;color:#fff;line-height:1.1;
  text-shadow:0 1px 3px rgba(0,0,0,.6);}
.mbv-kopf-s{font-size:12px;color:rgba(255,255,255,.86);margin-top:3px;
  text-shadow:0 1px 3px rgba(0,0,0,.6);}

/* Vergleichstabelle: erste Spalte Jahr, Rest gleich breit. Kein <table> –
   ein Grid bricht auf schmalen Geräten nicht aus dem Kasten aus. */
.mbv-tab{display:grid;gap:0 8px;align-items:baseline;}
/* Kein letter-spacing: Auf 320 px ist eine Spalte rund 57 px breit, und die
   Sperrung kostete genau die zwei Zeichen, die „Schwimm" fehlten. */
.mbv-th{font-size:9.5px;font-weight:800;text-transform:uppercase;
  color:var(--muted-1);padding:2px 0 6px;border-bottom:1px solid var(--border);
  text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mbv-th:first-child{text-align:left;}
/* Farbe ausdruecklich setzen: Der Kasten von fbCollCard vererbt die
   gedaempfte Schrift, Zellen ohne eigene Farbe waeren sonst zu blass
   (nachgemessen: Kopf- und Datenzeile hatten dieselbe Farbe). */
.mbv-td{font-size:12.5px;padding:7px 0;border-bottom:1px dashed var(--border);
  color:var(--text);text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;
  overflow-wrap:break-word;}
.mbv-td.j{text-align:left;font-weight:800;color:var(--muted-1);font-variant-numeric:tabular-nums;}
.mbv-td b{font-weight:700;}
.mbv-td small{display:block;font-size:9.5px;color:var(--muted-1);line-height:1.2;}
.mbv-leer{color:var(--muted-1);}
.mbv-ohne{color:var(--muted-1);}

/* Messwert-Zeile: links was es ist, rechts die Zahl */
.mbv-mess{display:flex;align-items:baseline;gap:10px;padding:7px 2px;
  border-bottom:1px dashed var(--border);font-size:13px;color:var(--text);}
.mbv-mess:last-child{border-bottom:none;}
.mbv-mess-k{flex:1;min-width:0;}
.mbv-mess-k b{font-weight:700;display:block;}
.mbv-mess-k small{display:block;font-size:11px;color:var(--muted-1);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mbv-mess-w{flex:none;text-align:right;max-width:56%;font-size:12.5px;}
.mbv-mess-w small{display:block;font-size:11px;margin-top:1px;}

/* Termin-Archiv, nach Jahr gruppiert */
.mbv-jahr{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:13px;font-weight:800;margin:12px 2px 4px;padding-bottom:4px;
  border-bottom:1px solid var(--border);}
.mbv-jahr:first-child{margin-top:2px;}
.mbv-jahr span{font-size:11px;font-weight:600;color:var(--muted-1);flex:none;}
.mbv-ev{display:flex;align-items:baseline;gap:9px;padding:6px 2px;cursor:pointer;font-size:12.5px;}
.mbv-ev-d{flex:none;color:var(--muted-1);font-size:11.5px;font-variant-numeric:tabular-nums;}
.mbv-ev-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mbv-ev-t small{color:var(--muted-1);}
.mbv-ev>i{flex:none;color:var(--muted-1);font-size:15px;}

.mbv-hinweis{margin:14px 16px 0;font-size:11.5px;color:var(--muted-1);line-height:1.55;}
.mbv-link{color:var(--accent);cursor:pointer;font-weight:700;}

/* ============================================================
   Infothek – senkrechte Trommel + Listenzeilen (v587)
   ============================================================
   Karte: Foto 16:9 oben, zweizeiliger Fuss darunter. Die Trommel ist das
   3D-Rad (senkrecht) – der flache Streifen der Boards rechnet nur in x. */
/* Karteikarte statt randloser Kachel (Wunsch Ecki 09.08.2026): Format bleibt,
   dazu ein heller Kartenrand, eine feine Trennlinie unter dem Foto und ein
   farbiger Reiter in der Bereichsfarbe – so liest sich die Trommel wie ein
   Karteikasten und nicht wie ein Stapel Fotos. */
.ith-card{flex-direction:column;align-items:stretch;gap:0;padding:5px;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);
  box-shadow:0 1px 3px rgba(0,0,0,.10), 0 8px 20px rgba(0,0,0,.10);}
.ith-card::before{content:"";position:absolute;left:14px;right:14px;top:0;height:4px;
  border-radius:0 0 4px 4px;background:var(--c,var(--accent));opacity:.9;}
.ith-innen{display:flex;flex-direction:column;height:100%;border-radius:13px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--border) 70%,transparent);}
/* aspect-ratio statt flex:1 – so ist das Foto garantiert 16:9, und ein
   Rest an Kartenhoehe landet im Fuss statt im Bild. */
.ith-bild{flex:none;aspect-ratio:16/9;width:100%;position:relative;background-color:var(--surface-2);
  background-repeat:no-repeat;display:grid;place-items:center;}
.ith-fuss{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;
  padding:9px 11px 10px;background:var(--surface);text-align:center;
  border-top:1px solid color-mix(in srgb,var(--border) 80%,transparent);}
.ith-t{display:block;font-size:14.5px;font-weight:800;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ith-s{display:block;font-size:11px;color:var(--muted-1);font-weight:600;margin-top:2px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Tiefenschaerfe wie bei den anderen Traedern: fester Weichzeichner, nur
   beim Wechsel der Klasse .mitte umgeschaltet (Lehre v428). */
.ith-bild{transition:filter .2s ease, transform .2s ease;}
.pk-ditem:not(.mitte) .ith-bild{filter:blur(2.4px);transform:scale(1.04);}
.pk-ditem:not(.mitte) .ith-fuss{opacity:.72;}
.pk-stage.schnell .ith-bild{transition:none;}
@media (prefers-reduced-motion: reduce){ .ith-bild{transition:none;} }
/* Listenansicht: kleines 16:9-Vorschaubild statt Symbol */
/* ============================================================
   Urlaubsplaner im Querformat – ganzes Jahr (v596)
   ============================================================
   Ueber Klassen statt Inline-Stilen: 366 Spalten x 14 Zeilen sind ueber
   5000 Zellen. Je Zelle einen Stil-String zu bauen kostet spuerbar Zeit
   und Speicher – mit Klassen teilt der Browser die Regeln (Lehre v428).
   --uc = Spaltenbreite, --un = Breite der Namensspalte. */
/* Vollbild-Tabelle (v596). Sie liegt UEBER der App – so umgeht sie die
   480-px-Spalte von #app, ohne deren Layout anzufassen, und blendet Kopf-
   wie Tab-Leiste aus. Genau das meinte Ecki mit „kompletten Bildschirm
   fuellen, im Stile einer ordentlichen Tabelle". */
/* „Ganzes Jahr": gefuellt statt Umriss, direkt ueber der Tabelle statt im
   Foto-Kopf – dort war er nur ein blasser Umriss auf einem Bildmotiv. */
.upl-voll-btn{flex:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:12px;font-weight:800;padding:7px 13px;border-radius:999px;border:none;
  background:var(--accent);color:var(--accent-ink);cursor:pointer;
  box-shadow:0 1px 6px rgba(0,0,0,.14);}
.upl-voll-btn i{font-size:14px;}
/* Jede Schicht traegt ihre Farbe selbst (v608). Beim ersten Anlauf stand die
   Farbe nur auf dem Rahmen – Bildlauf-Ebene und Tabelle blieben ohne. Auf dem
   iPhone kam links trotzdem ein heller Streifen durch. Jetzt sind Rahmen,
   Bildlauf-Flaeche und Tabelle eingefaerbt, das Ueberziehen nach links ist
   gestoppt (overscroll-behavior) und die Sicherheitsabstaende der Querlage
   (Notch) gehoeren zum dunklen Rahmen statt zur weissen Leinwand. */
#upl-voll{position:fixed;inset:0;z-index:9200;background:var(--bg);display:flex;flex-direction:column;
  padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);box-sizing:border-box;}
#upl-voll::before{content:"";position:fixed;inset:-60px;background:var(--bg);z-index:-1;}
#upl-voll table{background:var(--bg);}
body.upl-voll-an{overflow:hidden;}
.uplv-bar{display:flex;align-items:center;gap:10px;padding:6px 10px;flex:none;
  background:var(--surface);border-bottom:1px solid var(--border);
  padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));}
.uplv-back{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;
  padding:6px 12px;border-radius:999px;border:1.5px solid var(--accent);background:transparent;
  color:var(--accent);cursor:pointer;flex:none;}
.uplv-t{font-size:14px;font-weight:800;flex:none;}
.uplv-hint{font-size:11px;color:var(--amber);font-weight:600;}
.uplv-mode>div{display:flex;gap:6px;flex-wrap:nowrap;margin:0!important;}
.uplv-root{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;
  background:var(--bg);overscroll-behavior:contain;}
.uplj{border-collapse:separate;border-spacing:0;table-layout:fixed;background:var(--surface);font-size:11px;}
/* Monatsname bleibt sichtbar, solange sein Monat im Bild ist – ohne das
   steht „Januar" am linken Ende einer 558 px breiten Zelle und ist beim
   Scrollen laengst aus dem Fenster (nachgemessen: -5566 px). */
.uplj-mon>span{position:sticky;left:var(--un);padding-left:6px;display:inline-block;}
.uplj th,.uplj td{padding:0;box-sizing:border-box;}
/* Monatstrennung: kraeftige Linie am Monatsersten */
.uplj .trenn{border-left:2px solid var(--upl-mon-sep,color-mix(in srgb,var(--text) 42%,transparent));}
/* Kopfzeilen – alle drei bleiben oben stehen */
.uplj-mon{position:sticky;top:0;z-index:6;height:20px;background:var(--surface-2);
  font-size:11px;font-weight:800;letter-spacing:.02em;color:var(--text);
  border-bottom:.5px solid var(--border);white-space:nowrap;}
.uplj-mon.alt{background:color-mix(in srgb,var(--accent) 7%,var(--surface-2));}
.uplj-wd{position:sticky;top:20px;z-index:5;height:16px;width:var(--uc);min-width:var(--uc);
  text-align:center;font-size:8px;font-weight:700;color:var(--muted-1);background:var(--surface);}
.uplj-dd{position:sticky;top:36px;z-index:5;height:20px;width:var(--uc);min-width:var(--uc);
  text-align:center;font-size:9.5px;font-weight:600;color:var(--muted-1);background:var(--surface);
  border-bottom:.5px solid var(--border);}
.uplj-wd.we,.uplj-dd.we{background:var(--upl-we,rgba(99,116,140,.10));}
.uplj-wd.ft,.uplj-dd.ft{background:var(--upl-we,rgba(99,116,140,.10));color:#E59D08;}
.uplj-wd.heute,.uplj-dd.heute{background:var(--upl-today,rgba(62,143,224,.15));color:var(--accent);font-weight:800;}
.uplj-dd.heute{border-bottom:2px solid var(--accent);}
/* Namensspalte bleibt links stehen */
.uplj-n{position:sticky;left:0;width:var(--un);min-width:var(--un);background:var(--surface);z-index:3;
  border-right:1px solid var(--border);}
.uplj-h0{top:0;z-index:8;height:20px;background:var(--surface-2);}
.uplj-h1{top:20px;z-index:8;height:16px;}
.uplj-h2{top:36px;z-index:8;height:20px;border-bottom:.5px solid var(--border);
  font-size:10px;font-weight:800;color:var(--muted-1);text-align:center;}
.uplj-name{border-bottom:.5px solid var(--border);}
.uplj-name.me{background:color-mix(in srgb,var(--accent) 9%,var(--surface));border-left:3px solid var(--accent);}
.uplj-nrow{display:flex;align-items:center;gap:6px;padding:0 6px;min-width:0;}
.uplj-nrow>span{font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.uplj-nrow small{font-size:8px;color:var(--accent);font-weight:700;}
.uplj-nrow small.id{color:var(--muted-1);}
.uplj tbody tr.inn{opacity:.55;}
/* Tageszellen – Hintergrund setzt _uplRC je Zelle */
.uplj-c{position:relative;width:var(--uc);min-width:var(--uc);border-bottom:.5px solid var(--border);cursor:pointer;}
/* Die Quote klebt UNTEN am Fenster (v668, Wunsch Ecki: „soll unten immer fest
   im Bildschirm stehen"). Dieselbe Technik wie die Kopfzeilen oben, nur
   andersherum – sie sass bisher nur links fest und scrollte nach unten weg,
   sobald die Tabelle laenger war als das Bild. */
.uplj-q{width:var(--uc);min-width:var(--uc);height:24px;text-align:center;font-size:9px;
  background:var(--surface-2);border-top:1px solid var(--border);
  position:sticky;bottom:0;z-index:4;}
.uplj-q.we{background:var(--upl-we,rgba(99,116,140,.10));}
.uplj-q.heute{background:var(--upl-today,rgba(62,143,224,.15));}
/* Eckzelle: klebt links UND unten – deshalb die hoechste Ebene der Tabelle. */
.uplj-quote{background:var(--surface-2);border-top:1px solid var(--border);height:24px;
  font-size:10px;font-weight:700;color:var(--muted-1);text-align:right;padding:0 8px;white-space:nowrap;
  bottom:0;z-index:9;}

/* ---- Erste Hilfe (v594) ---- */
.eh-notruf{display:flex;gap:9px;margin:4px 0 12px;}
.eh-notruf-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;padding:11px 6px;border-radius:12px;text-decoration:none;
  background:color-mix(in srgb,var(--red) 13%,var(--surface-2));color:var(--red);
  border:1px solid color-mix(in srgb,var(--red) 32%,transparent);}
.eh-notruf-btn span{font-size:25px;font-weight:800;line-height:1;letter-spacing:.01em;}
.eh-notruf-btn small{font-size:10.5px;font-weight:600;color:var(--muted-1);text-align:center;}
.eh-notruf-btn.eh-blau{background:color-mix(in srgb,var(--blue) 13%,var(--surface-2));color:var(--blue);
  border-color:color-mix(in srgb,var(--blue) 32%,transparent);}
.eh-h{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted-1);margin:14px 0 4px;}
.eh-w{background:var(--surface-2);border-radius:10px;padding:9px 12px;font-size:13px;font-weight:700;
  line-height:1.6;}

/* ---- Schemazeichnungen (v599) ----
   Gezeichnet statt fotografiert: keine Lizenzfrage, offline, und sie nehmen
   die Farben der App mit – hell wie „Mitternacht". Siehe js/ehbilder.js. */
.eh-figs{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:11px 0 3px;}
.eh-figs.eh-1{grid-template-columns:1fr;max-width:250px;margin-inline:auto;}
.eh-fig{margin:0;background:var(--surface-2);border:1px solid var(--border);
  border-radius:11px;padding:9px 9px 8px;}
/* Feste Bildhöhe, damit die nummerierten Unterschriften nebeneinander auf
   gleicher Höhe beginnen – bei „height:auto" richtet sich jede Spalte nach
   ihrem eigenen Seitenverhältnis und die Nummern stehen versetzt. */
.eh-fig svg{width:100%;height:138px;display:block;}
/* Ungerade Anzahl: das letzte Bild nimmt beide Spalten, statt eine Lücke
   danebenstehen zu lassen – die Zeichnung selbst bleibt gleich groß. */
.eh-figs > .eh-fig:last-child:nth-child(odd),
.eh-figs > .eh-fig.eh-breit{grid-column:1/-1;}
.eh-figs > .eh-fig:last-child:nth-child(odd) svg{max-width:165px;margin-inline:auto;}
.eh-figs > .eh-fig.eh-breit svg{height:158px;}
.eh-fig-cap{font-size:11.5px;line-height:1.4;color:var(--text-2);margin-top:6px;}
.eh-fig-nr{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  border-radius:50%;background:var(--red);color:#fff;font-size:10px;font-weight:800;
  margin-right:5px;vertical-align:1px;}
.eh-fig .k{fill:none;stroke:var(--muted-1);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.eh-fig .f{fill:color-mix(in srgb,var(--muted-1) 15%,transparent);stroke:none;}
.eh-fig .a{fill:none;stroke:var(--red);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.eh-fig .af{fill:color-mix(in srgb,var(--red) 24%,transparent);stroke:none;}
.eh-fig .p{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.eh-fig .t{fill:var(--muted-1);font-size:11px;font-weight:700;}

.ith-mini{flex:none;width:54px;height:30px;border-radius:8px;background-color:var(--surface-2);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  display:grid;place-items:center;overflow:hidden;}

/* ============================================================
   Startseite – Lagezentrale (v580)
   ============================================================ */
/* Tages-Hero: Datum gross, Staerke als Ring mit Zahl. Linke Kante in der
   persoenlichen Farbe – derselbe Akzent wie die Schaltzentrale.
   VOLLE BREITE (Wunsch Ecki 09.08.2026): #view traegt 16 px Innenabstand,
   der negative Rand hebt genau den auf – die Karte laeuft von Bildschirm-
   kante zu Bildschirmkante, deshalb auch keine Rundung und rechts keine
   Linie. */
.hz-hero{position:relative;background:var(--surface);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  border-left:3px solid var(--pc,var(--accent));border-right:none;border-radius:0;
  box-shadow:var(--shadow);margin:8px -16px 0;padding:13px 16px 10px;cursor:pointer;}
/* News-Band zwischen Gruss und Hero, volle Breite (Rueckmeldung Ecki
   09.08.2026). Im Band verliert der Ticker Rundung und Seitenlinien –
   randlos mit runden Ecken saehe angeschnitten aus. */
.hz-band{margin:4px -16px 0;}
.hz-band .newsticker{margin:0;border-radius:0;border-left:none;border-right:none;}
.hz-hero:active{background:var(--surface-2);}
.hz-hero-top{display:flex;align-items:center;gap:12px;}
.hz-klein{font-size:11.5px;font-weight:700;color:var(--muted-1);letter-spacing:.02em;}
.hz-datum{font-size:26px;font-weight:800;line-height:1.05;margin-top:1px;}
.hz-pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;}
.hz-wx{background:color-mix(in srgb,var(--muted-1) 13%,transparent);color:var(--muted-1);}
.hz-ring{flex:none;text-align:center;}
.hz-ring .ring{width:78px;height:78px;}
.hz-ring-l{font-size:9.5px;color:var(--muted-1);font-weight:600;margin-top:1px;max-width:82px;}
.hz-evs{border-top:1px dashed var(--border);margin-top:10px;padding-top:5px;}
.hz-ev{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13px;min-width:0;}
.hz-ev-t{flex:none;color:var(--muted-1);font-size:11.5px;font-variant-numeric:tabular-nums;width:46px;}
.hz-ev-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
.hz-ev-mehr{color:var(--muted-1);font-size:12px;}
/* Schwarzes Brett als eigener Ring NEBEN dem Staerkering (v659, Wunsch Ecki:
   „genau so gross wie den Staerkering"). Der Rand faehrt dreifarbig die
   Dringlichkeit (rot/gelb/gruen).
   MITTE (v661): der Pin 📌 statt einer Zahl – derselbe wie auf der leeren
   Brett-Seite. Der Pin STEHT STILL; nur der Hof hinter ihm pulsiert (Wunsch
   Ecki), rot bei neuer Checkliste, violett bei neuer/offener Umfrage. Ein
   Emoji kann seine Farbe nicht wechseln, deshalb traegt sie der Hof.
   Bei „Bewegung reduzieren" steht der Hof ruhig und faerbt fest. */
.hz-brettcol{flex:none;text-align:center;align-self:center;}
.hz-brk{position:relative;width:78px;height:78px;padding:0;border:none;background:none;
  cursor:pointer;display:inline-flex;line-height:0;}
.hz-brk:active{transform:scale(.96);}
.hz-brk-pin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;}
/* Der Hof holt seine Farbe ueber eine EIGENE Regel, nicht ueber currentColor
   des Elternteils. Erster Anlauf setzte dafuer color:transparent auf
   .hz-brk-pin – Chrome reicht das an -webkit-text-fill-color weiter und
   blendet damit auch Emoji aus: Bei Ecki war der Ring leer, der Pin
   unsichtbar (gemeldet 15.08.2026). Farbe nie ueber den Textfluss vererben,
   wenn im selben Element ein Emoji steht. */
/* 24 statt 30 px = 20 % kleiner (Wunsch Ecki 15.08.2026). */
.hz-brk-em{font-size:24px;line-height:1;position:relative;z-index:1;
  color:var(--text);-webkit-text-fill-color:currentColor;}
.hz-brk-hof{position:absolute;width:48px;height:48px;border-radius:50%;
  background:var(--muted-1);opacity:0;}
.hz-brk-pin.rot .hz-brk-hof{background:var(--red);}
.hz-brk-pin.lila .hz-brk-hof{background:var(--violet);}
.hz-brk-pin.puls .hz-brk-hof{animation:brkHof 1.8s ease-in-out infinite;}
@keyframes brkHof{0%,100%{transform:scale(.70);opacity:.12}50%{transform:scale(1);opacity:.34}}
@media (prefers-reduced-motion:reduce){ .hz-brk-pin.puls .hz-brk-hof{animation:none;opacity:.26} }
.hz-brett-cl{font-size:9.5px;color:var(--muted-1);font-weight:600;margin-top:3px;
  max-width:82px;line-height:1.15;}

/* Plakat: Einsatz in den naechsten 7 Tagen. Muss NACH .home-cards .dash-ph
   stehen (gleiche Spezifitaet, spaeter gewinnt), sonst zieht deren
   16:9-Regel die Hoehe wieder platt. Auf dem Foto stehen seit v581 nur noch
   Zeile und Titel – Datum, Ort, Stand und Gesichter liegen darunter auf
   ruhigem Grund (Rueckmeldung Ecki: Schrift auf dem Foto zu ueberladen). */
.home-cards .hz-plakat-ph{height:200px;aspect-ratio:auto;
  justify-content:flex-end;align-items:stretch;}
.hz-pl-txt{padding:12px 14px;text-align:left;}
.hz-pl-k{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#FFA79D;
  text-shadow:0 1px 2px rgba(0,0,0,.5);}
.hz-pl-t{font-size:20px;font-weight:800;color:#fff;line-height:1.15;margin-top:2px;
  text-shadow:0 1px 3px rgba(0,0,0,.55);}
.hz-pl-crew{display:flex;align-items:center;margin-top:8px;}
.hz-pl-crew .av{border:1.5px solid var(--surface);margin-right:-6px;flex:none;}
.hz-pl-mehr{font-size:11px;color:var(--muted-1);font-weight:700;margin-left:12px;flex:none;}
.hz-pl-stand{font-size:11.5px;color:var(--muted-1);font-weight:700;margin-left:14px;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Einsatzkarte (normaler Modus): Kopfzeile mit Datums-Pill rechts */
.hz-eins-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.hz-datpill{flex:none;font-size:11px;font-weight:700;color:var(--red);
  background:color-mix(in srgb,var(--red) 11%,transparent);border-radius:999px;padding:3px 9px;}
.hz-neu{position:absolute;top:10px;right:10px;background:var(--red);color:#fff;border-radius:20px;
  padding:5px 11px;font-size:12px;font-weight:700;display:flex;align-items:center;gap:5px;
  box-shadow:0 2px 8px rgba(0,0,0,.4);}

/* ============================================================
   Lichtbildmappe unterwegs (v610)
   ============================================================ */
.lbm-thumb{flex:none;width:62px;height:46px;border-radius:8px;background:var(--surface-2);
  background-size:cover;background-position:center;border:1px solid var(--border);
  display:grid;place-items:center;overflow:hidden;}
.lbm-thumb.lbm-leer{color:var(--muted-1);font-size:20px;}
.lbm-zeile{display:flex;align-items:center;gap:8px;padding:9px 12px;
  border-bottom:1px solid var(--border);}
.lbm-zeile:last-child{border-bottom:none;}
.lbm-zeile-akt{display:flex;flex-direction:column;gap:2px;flex:none;}
.lbm-zeile-akt .iconbtn{width:30px;height:26px;}
.lbm-zeile-akt .iconbtn[disabled]{opacity:.28;pointer-events:none;}
.lbm-knopfreihe{display:flex;gap:8px;}
.lbm-knopfreihe .btn{flex:1;min-width:0;padding-inline:8px;font-size:13px;}

/* Bühne: das Bild bestimmt die Höhe, das SVG liegt exakt darüber.
   touch-action:none – hier zieht der Finger Markierungen, nicht die Seite. */
.lbm-buehne{margin:0 0 10px;border-radius:12px;overflow:hidden;background:var(--surface-2);
  border:1px solid var(--border);position:relative;}   /* relative: Anker für den Zoom-Chip (v631) */
/* Foto-Zoom (v631): gezoomt gehört die Fläche dem Foto – kneifen und
   schwenken, kein Seiten-Scroll. Der Chip zeigt die Stufe und setzt zurück. */
.lbm-buehne.lbm-zoomt svg,.lbm-sk-buehne.lbm-zoomt svg{touch-action:none!important;}
#lbm-zoomchip,#lbm-sk-zoomchip{position:absolute;top:8px;right:8px;z-index:2;
  font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;
  border:none;background:rgba(0,0,0,.62);color:#fff;cursor:pointer;}
#lbm-zoomchip:active,#lbm-sk-zoomchip:active{filter:brightness(1.2);}
.lbm-sk-buehne{position:relative;}   /* Anker für den Skizzen-Zoom-Chip (v633) */
.lbm-buehne svg,.lbm-sk-buehne svg{display:block;width:100%;height:auto;}
.lbm-sk-buehne{margin:0;border-radius:12px;overflow:hidden;background:#fff;
  border:1px solid var(--border);max-height:52vh;}
.lbm-sk-buehne svg{max-height:52vh;width:auto;margin-inline:auto;}
.lbm-griff{fill:#fff;stroke:#e2001a;stroke-width:6;}
.lbm-sel{filter:drop-shadow(0 0 10px rgba(226,0,26,.65));}
.lbm-sk-sel{filter:drop-shadow(0 0 14px rgba(226,0,26,.5));}

/* Umbrechen statt seitwärts schieben (Prüfung 09.08.2026): Die Leiste war
   470 px breit auf 315 px Platz – „Löschen" lag außerhalb des Bildschirms und
   nichts wies auf das Schieben hin. Eine falsch gesetzte Markierung im
   Beweisfoto muss man mit EINEM Finger loswerden können. */
.lbm-werkzeuge{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:2px 0 6px;}
.lbm-wz{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;
  min-width:52px;padding:8px 4px;border-radius:11px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);cursor:pointer;}
.lbm-wz i{font-size:19px;color:var(--accent);}
.lbm-wz span{font-size:10.5px;font-weight:700;}
.lbm-wz:active{filter:brightness(.95);}
.lbm-wz[disabled]{opacity:.4;pointer-events:none;}
/* .lbm-wz{display:flex} schlaegt [hidden]{display:none} – der ausgeblendete
   „Ändern"-Knopf steuerte trotzdem 68 px zur Leistenbreite bei und schob
   „Löschen" aus dem Bild (Pruefung 09.08.2026). */
.lbm-wz[hidden]{display:none;}
.lbm-wz.lbm-weg i{color:var(--red);}

.lbm-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;}
.lbm-chip{font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);cursor:pointer;}
.lbm-chip:active{filter:brightness(.94);}

.lbm-palette{margin-top:4px;}
.lbm-pgruppe{margin-bottom:8px;}
.lbm-pkopf{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted-1);margin:0 0 4px 2px;}
.lbm-preihe{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;}
.lbm-psym{flex:none;width:68px;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 4px;border-radius:10px;border:1px solid var(--border);background:#fff;cursor:pointer;}
.lbm-psym svg{width:100%;height:34px;}
.lbm-psym span{font-size:9.5px;font-weight:700;color:#333;line-height:1.1;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.lbm-psym:active{filter:brightness(.94);}

/* Lichtbildmappe – Nachbesserungen aus der Prüfung (v611) */
.lbm-wz svg{width:21px;height:21px;fill:none;stroke:var(--accent);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;}
.lbm-wz.lbm-weg svg{stroke:var(--red);}
.lbm-kopfknopf{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  border:1px solid var(--border);background:var(--surface);cursor:pointer;}
/* --text-2 ist in keinem Thema definiert. Bei „color" faellt das unbemerkt auf
   die geerbte Farbe zurueck – bei „stroke" wird daraus „none" und der Knopf
   ist leer (Pruefung 09.08.2026). Nicht currentColor: der Knopf traegt in
   jedem Thema schwarz, das waere in „Mitternacht" unsichtbar. */
.lbm-kopfknopf svg{width:20px;height:20px;fill:none;stroke:var(--text);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;}
/* Solange nichts ausgewählt ist, darf der Finger die Seite scrollen. Erst mit
   Auswahl gehört die Fläche dem Ziehen (.lbm-faengt). */
.lbm-buehne svg,.lbm-sk-buehne svg{touch-action:pan-y;}
.lbm-buehne.lbm-faengt svg,.lbm-sk-buehne.lbm-faengt svg{touch-action:none;}

/* ---------- Vollbild fürs Markieren (v625) ----------
   Buehne und Werkzeugreihe WANDERN hier hinein (siehe vollAn() in
   lichtbildmappe.js) – deshalb steht hier nur, wie sie sich in der grossen
   Flaeche verhalten, nicht wie sie aussehen. Hintergrund bewusst schwarz:
   ein Beweisfoto beurteilt man nicht auf hellgrauer Flaeche. */
#lbm-voll{position:fixed;inset:0;z-index:9200;background:#000;display:flex;flex-direction:column;
  padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);box-sizing:border-box;}
body.lbm-voll-an{overflow:hidden;}
.lbm-vbar{flex:none;display:flex;align-items:center;gap:10px;padding:calc(6px + env(safe-area-inset-top,0px)) 12px 6px;
  background:var(--surface);border-bottom:1px solid var(--border);}
.lbm-vfertig{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:12.5px;font-weight:700;
  padding:6px 12px;border-radius:999px;border:1.5px solid var(--accent);background:transparent;
  color:var(--accent);cursor:pointer;}
.lbm-vfertig svg{width:17px;height:17px;fill:none;stroke:var(--accent);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;}
.lbm-vt{font-size:13.5px;font-weight:800;flex:none;}
.lbm-vhinweis{flex:1;text-align:right;font-size:10.5px;color:var(--muted-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lbm-vkoerper{flex:1;min-height:0;display:flex;flex-direction:column;}
.lbm-vflaeche{flex:1;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.lbm-vwz{flex:none;background:var(--surface);border-top:1px solid var(--border);
  padding:4px 6px calc(4px + env(safe-area-inset-bottom,0px));}
/* Quer gehalten waere das Bild MIT Werkzeugreihe unten kleiner als hochkant
   (nachgemessen: 356x267 gegen 375x281) – Leiste und Reihe fressen genau die
   Hoehe, die quer knapp ist. Also wandern die Werkzeuge quer an die Seite. */
@media (orientation:landscape){
  .lbm-vkoerper{flex-direction:row;}
  .lbm-vwz{border-top:none;border-left:1px solid var(--border);overflow-y:auto;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));}
  #lbm-voll .lbm-werkzeuge{flex-direction:column;flex-wrap:nowrap;gap:4px;}
  /* Sieben Knoepfe muessen in rund 330 Punkte Hoehe passen, sonst haengt
     „Löschen" wieder halb aus dem Bild (Lehre aus der Pruefung 09.08.2026).
     Gerechnet: 39 + 4 Zwischenraum = 43 je Knopf, sieben also 301. */
  #lbm-voll .lbm-wz{min-width:54px;padding:4px;gap:1px;}
  #lbm-voll .lbm-wz svg{width:18px;height:18px;}
  #lbm-voll .lbm-wz span{font-size:9.5px;}
}
/* Rahmen und Ecken weg – im Vollbild zaehlt nur das Bild. Die MASSE setzt
   vollAnpassen() in Bildpunkten: „width:auto" gibt einem Inline-SVG im
   Flex-Kasten keine Groesse, gemessen 0 x 0 (10.08.2026). */
#lbm-voll .lbm-buehne{margin:0;border:none;border-radius:0;background:transparent;}
#lbm-voll .lbm-buehne svg{width:100%;height:100%;
  touch-action:none;}   /* hier gibt es nichts zu scrollen: der Finger markiert */
#lbm-voll .lbm-werkzeuge{padding:0;}

/* ============================================================
   Karteikarten-Optik für ALLE Trommeln (v617)
   ============================================================
   Wunsch Ecki 09.08.2026: „Ich finde den Umbau in der Infothek mit den
   Karteikarten sehr gut. Ich möchte, dass du jede Trommel genau auf dieses
   Format anpasst."

   Drei Merkmale machen die Karteikarte aus, und die gelten jetzt überall:
   heller Rand mit Schatten, ein schmaler Reiter in der Bereichsfarbe oben,
   und – bei Karten mit Foto – ein innerer Rahmen, der Bild und Fuß fasst.
   Bei reinen Textkarten entfällt der innere Rahmen: dort liefe er mitten
   durch die Schrift. */
.pk-dcard{border:1px solid var(--border);
  box-shadow:0 1px 3px rgba(0,0,0,.10), 0 8px 20px rgba(0,0,0,.10);}
.pk-dcard::before{content:"";position:absolute;left:14px;right:14px;top:0;height:4px;
  border-radius:0 0 4px 4px;background:var(--c,var(--accent));opacity:.9;z-index:3;
  pointer-events:none;}
/* Vollflächig eingefärbte Karten (Anlass-Auswahl) tragen ihre Farbe schon –
   ein Reiter darauf wäre unsichtbar. */
.pk-dcard.pk-danl::before{display:none;}

/* Karten mit Foto: 5 px Polster und ein innerer Rahmen um Bild und Fuß. */
.ith-card,.ordner-card,.mbz-card,.pk-dmat,.pk-dkat,.spt-ukarte,.spt-gkarte,.spt-eig{padding:5px;}
.ordner-card::after,.mbz-card::after,.pk-dmat::after,.pk-dkat::after,
.spt-ukarte::after,.spt-gkarte::after,.spt-eig::after{
  content:"";position:absolute;inset:5px;border-radius:13px;pointer-events:none;z-index:2;
  border:1px solid color-mix(in srgb,var(--border) 70%,transparent);}
/* Die Ecken der Inhalte müssen dem inneren Rahmen folgen, sonst sitzt das
   Foto mit rechtem Winkel in einer runden Ecke. */
.ordner-card .ordner-bild,.mbz-card .mbz-bild{border-radius:13px 13px 0 0;}
.ordner-card .ordner-titel,.mbz-card .mbz-fuss2{border-radius:0 0 13px 13px;
  border-top:1px solid color-mix(in srgb,var(--border) 80%,transparent);}
.pk-dmat .pk-media,.pk-dkat .pk-media{border-radius:13px 0 0 13px;}
.spt-ukarte,.spt-gkarte,.spt-eig{overflow:hidden;}
.spt-ukarte>*:first-child,.spt-gkarte>*:first-child,.spt-eig>*:first-child{border-radius:13px 13px 0 0;}

/* Letzte Moeglichkeit fuer den weissen Streifen an der Frontkamera (v621).
   Abgedeckt waren bisher: Rahmen, Bildlauf-Flaeche, Tabelle, eine Schicht
   60 px darueber hinaus, html, color-scheme und die Sicherheitsabstaende.
   Was blieb: der VOLLBILD-MODUS. uplVollAn ruft requestFullscreen auf dem
   Wurzelelement – und in dem Zustand malt der Browser den Bereich um den
   Kamera-Ausschnitt selbst, mit seiner eigenen Vorgabe statt mit unserer.
   Beide Wege werden hier eingefaerbt: die Flaeche hinter dem Vollbild
   (::backdrop) und die Wurzel im Vollbildzustand. */
#upl-voll::backdrop{background:var(--bg);}
:root:fullscreen,:root:-webkit-full-screen{background:var(--bg);}
:root:fullscreen body,:root:-webkit-full-screen body{background:var(--bg);}

/* Zoom in der Jahres-Vollansicht (v621) */
.uplv-zoom{display:inline-flex;align-items:center;gap:2px;flex:none;font-size:11px;
  font-weight:700;color:var(--muted-1);}
.uplv-zoom>span{min-width:38px;text-align:center;}
.uplv-zb{width:30px;height:28px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-size:16px;font-weight:700;line-height:1;
  cursor:pointer;}
.uplv-zb:active{filter:brightness(.94);}
/* Zwei Finger gehören dem Zoom, ein Finger scrollt weiter. */
.uplv-root{touch-action:pan-x pan-y;}
.uplv-root table{transform-origin:0 0;will-change:transform;}

/* ============================================================
   Informationsmonitor (v637)
   Eigene Ebene ueber der App – die 480-px-Spalte von #app gilt hier
   nicht (gleiches Muster wie die Jahresansicht des Urlaubsplaners).
   Groessen in rem-Naehe gehalten, damit die Kacheln auf 13 Zoll wie auf
   55 Zoll lesbar bleiben; die Schrift skaliert ueber clamp() mit.
   ============================================================ */
#mon-voll{position:fixed;inset:0;z-index:9250;background:var(--bg);color:var(--text);
  display:flex;flex-direction:column;overflow:hidden;
  padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);}
body.mon-an{overflow:hidden;}
.mon-bar{flex:none;display:flex;align-items:center;gap:clamp(10px,1.4vw,22px);
  padding:clamp(8px,1vw,16px) clamp(12px,1.6vw,26px);
  background:var(--surface);border-bottom:1px solid var(--border);}
.mon-datum b{display:block;font-size:clamp(15px,1.5vw,26px);font-weight:800;line-height:1.15;}
.mon-datum span{display:block;font-size:clamp(10px,.85vw,14px);color:var(--muted-1);}
.mon-uhr{font-size:clamp(22px,2.6vw,46px);font-weight:800;font-variant-numeric:tabular-nums;
  letter-spacing:.01em;margin-left:clamp(6px,1vw,18px);}
.mon-nav{display:flex;gap:6px;flex-wrap:nowrap;}
.mon-nb{font-size:clamp(11px,.9vw,15px);font-weight:700;padding:7px 14px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface-2);color:var(--text);cursor:pointer;white-space:nowrap;}
.mon-nb.an{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.mon-nb:active{filter:brightness(.94);}
.mon-modus{border-style:dashed;color:var(--muted-1);}
.mon-zu{width:34px;height:34px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);font-size:20px;line-height:1;cursor:pointer;flex:none;}
.mon-fill{flex:1;}
/* ---- Kopfleiste auf dem Handy (v646) ----
   Auf 375 px standen Datum, Uhr, sechs Seitenknoepfe, „Neu" und die Betriebsart
   in EINER Zeile – das Kreuz wurde rechts aus dem Bild geschoben und war
   nirgends erreichbar. Da die Zurueck-Geste den Monitor damals nicht kannte,
   blieb nur, die App kalt zu schliessen (Ecki, 11.08.2026).
   Jetzt: Leiste bricht um, das Kreuz steht VORNE und ist ein Daumenziel, die
   Seitenknoepfe bekommen eine eigene, seitlich schiebbare Zeile. */
@media (max-width:820px){
  .mon-bar{flex-wrap:wrap;gap:8px 10px;padding:8px 10px;}
  .mon-zu{order:-1;width:42px;height:42px;font-size:24px;}
  .mon-fill{display:none;}
  .mon-wach{display:none;}                 /* Wandmonitor-Auskunft, am Handy ohne Wert */
  .mon-uhr{margin-left:auto;}
  .mon-nav{order:9;flex:1 0 100%;overflow-x:auto;scrollbar-width:none;
    padding-bottom:2px;-webkit-overflow-scrolling:touch;}
  .mon-nav::-webkit-scrollbar{display:none;}
  .mon-nb{padding:8px 15px;}               /* groessere Ziele fuer den Daumen */
}
/* Neu anlegen direkt am Monitor (v645). */
.mon-neu{display:flex;align-items:center;gap:6px;flex:none;cursor:pointer;white-space:nowrap;
  font-size:clamp(11px,.9vw,15px);font-weight:800;padding:7px 15px 7px 12px;border-radius:999px;
  border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);}
.mon-neu i{font-size:1.25em;}
.mon-neu:active{filter:brightness(.94);}
/* Die Formulare der App liegen auf Ebene 90 und waeren unter dem Monitor
   (9250) unsichtbar. Solange der Monitor offen ist, kommen Blatt, Menue,
   Meldung und Datumswaehler darueber – sonst tippt man ins Leere. */
body.mon-an .sheet-bg{z-index:9400;}
body.mon-an .toast,body.mon-an #toast{z-index:9500;}
.mon-flaeche{flex:1;min-height:0;overflow:auto;padding:clamp(10px,1.4vw,24px);}

.mon-grid{display:grid;gap:clamp(10px,1.2vw,20px);height:100%;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  grid-template-rows:minmax(0,1fr) minmax(0,1fr);}
@media (max-aspect-ratio:1/1){ .mon-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;} }
.mon-kachel{background:var(--surface);border:1px solid var(--border);border-radius:clamp(14px,1.2vw,22px);
  padding:clamp(12px,1.2vw,22px);display:flex;flex-direction:column;min-height:0;overflow:hidden;
  box-shadow:var(--shadow);}
.mon-kt{font-size:clamp(11px,.85vw,15px);font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-1);margin-bottom:clamp(6px,.7vw,12px);flex:none;
  display:flex;align-items:baseline;gap:8px;}
.mon-ktmehr{margin-left:auto;font-weight:700;letter-spacing:0;text-transform:none;
  color:var(--muted-2);font-size:.92em;}

/* ---- Aushaenge: „Nächste Einsätze" / „Nächste Fortbildungen" (v646) ----
   Vorher eine gekuerzte Zeile je Termin („Oktoberfest M…"), obwohl daneben die
   halbe Spalte leer blieb. Jetzt bekommt jeder Termin einen eigenen Block mit
   ausgeschriebenem Titel und der geplanten Mannschaft darunter. */
.mon-aushaenge{flex:1;min-height:0;display:flex;flex-direction:column;
  gap:clamp(7px,.8vw,14px);overflow:hidden;}
.mon-aushang{display:flex;flex-direction:column;gap:clamp(2px,.25vw,5px);
  padding-bottom:clamp(6px,.7vw,12px);border-bottom:1px solid var(--border);}
.mon-aushang:last-child{border-bottom:none;padding-bottom:0;}
.mon-auwann{font-size:clamp(10px,.82vw,15px);font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;}
/* Der Titel DARF umbrechen – das ist der ganze Punkt der Aenderung. */
.mon-autitel{font-size:clamp(14px,1.25vw,24px);font-weight:800;line-height:1.2;
  overflow-wrap:anywhere;}
.mon-aumeta{font-size:clamp(10px,.82vw,15px);color:var(--muted-1);font-weight:600;
  line-height:1.35;}
.mon-auteam{display:flex;flex-wrap:wrap;align-items:flex-end;
  gap:clamp(3px,.32vw,6px);margin-top:clamp(3px,.35vw,6px);
  --hh:clamp(48px,8vh,112px);}
.mon-auteam .mon-held{flex:0 0 auto;}
.mon-aurest{align-self:center;font-size:clamp(10px,.85vw,16px);font-weight:800;
  color:var(--muted-2);padding-left:2px;}
.mon-auleer{font-size:clamp(10px,.8vw,14px);color:var(--muted-2);font-style:italic;
  margin-top:2px;}
.mon-staerke{align-items:center;text-align:center;justify-content:center;}
.mon-ring{position:relative;display:inline-flex;align-items:center;justify-content:center;}
.mon-ring .ui-ring{width:clamp(120px,11vw,200px)!important;height:clamp(120px,11vw,200px)!important;}
.mon-ring .ui-ring svg{width:100%;height:100%;}
.mon-ringzahl{position:absolute;font-size:clamp(40px,4.4vw,78px);font-weight:800;
  font-variant-numeric:tabular-nums;line-height:1;}
.mon-gross{font-size:clamp(40px,4.4vw,78px);font-weight:800;line-height:1;}
.mon-unter{font-size:clamp(12px,1vw,18px);color:var(--muted-1);margin-top:6px;}
.mon-liste{display:flex;flex-wrap:wrap;justify-content:center;gap:6px clamp(10px,1vw,18px);
  margin-top:clamp(8px,1vw,16px);font-size:clamp(11px,.9vw,16px);color:var(--muted-1);}
.mon-liste b{margin-left:5px;color:var(--text);font-variant-numeric:tabular-nums;}
.mon-zeilen{display:flex;flex-direction:column;gap:clamp(5px,.5vw,10px);overflow:auto;min-height:0;}
/* Zwei Spalten statt einer Reihe: Uhrzeit links, darunter nichts – Titel und
   Ort teilen sich die volle Restbreite UNTEREINANDER. Als Flex-Reihe drängten
   sich Zeit, Titel und Ort nebeneinander; in einer Viertelspalte blieben dem
   Titel keine 150 px, und „Dienstbesprechung" wurde mitten im Wort umbrochen. */
.mon-zeile{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(8px,.9vw,16px);row-gap:1px;align-items:baseline;
  padding-bottom:clamp(4px,.4vw,8px);border-bottom:1px solid var(--border-2);}
.mon-zeit,.mon-wann{grid-column:1;flex:none;font-size:clamp(11px,.95vw,17px);font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--muted-1);min-width:clamp(52px,5vw,96px);}
.mon-zeile .mon-txt{grid-column:2;}
.mon-zeile .mon-ort{grid-column:2;max-width:100%;}
/* Volle Titel statt Auslassungspunkten (v648). Auf einem 27-Zoll-Monitor ist
   Platz genug – „UAS – Nachqualifi…" zwingt zum Raten, obwohl daneben die
   halbe Zeile frei bleibt. Die Zeile darf dafuer umbrechen. */
.mon-txt{flex:1;min-width:0;font-size:clamp(13px,1.15vw,21px);font-weight:600;
  overflow-wrap:break-word;}
.mon-ort{flex:none;font-size:clamp(10px,.85vw,15px);color:var(--muted-1);
  max-width:40%;overflow-wrap:break-word;}
.mon-leer{color:var(--muted-1);font-size:clamp(12px,1vw,18px);margin:auto 0;}
.mon-mehr{font-size:clamp(10px,.8vw,14px);color:var(--muted-1);}

.mon-woche{height:100%;display:flex;flex-direction:column;}
.mon-wochegrid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:clamp(6px,.8vw,14px);}
.mon-tag{background:var(--surface);border:1px solid var(--border);border-radius:clamp(10px,1vw,18px);
  padding:clamp(8px,.9vw,16px);display:flex;flex-direction:column;min-height:0;overflow:hidden;}
.mon-tag.heute{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);}
.mon-tagkopf{display:flex;justify-content:space-between;align-items:baseline;
  font-size:clamp(10px,.9vw,16px);color:var(--muted-1);}
.mon-tagkopf b{font-size:clamp(12px,1.05vw,19px);color:var(--text);}
.mon-tagzahl{font-size:clamp(24px,2.6vw,46px);font-weight:800;line-height:1.1;
  font-variant-numeric:tabular-nums;margin-top:clamp(2px,.3vw,6px);}
.mon-tagsub{font-size:clamp(9px,.75vw,13px);color:var(--muted-1);}
.mon-tagliste{margin-top:clamp(6px,.7vw,12px);display:flex;flex-direction:column;gap:4px;
  overflow:auto;min-height:0;}
/* Volle Titel auch in der Woche (v649). Anders als im Tagesplan ist hier
   wenig Luft: Drei Tageszeit-Baender teilen sich die Spaltenhoehe, und ein
   ausufernder Titel wuerde die Termine darunter aus seinem Band druecken.
   Deshalb Umbruch JA, aber hoechstens vier Zeilen – das reicht in einer
   260-px-Spalte fuer die laengsten Bezeichnungen und laesst dem Band Rest. */
.mon-tagev{font-size:clamp(9px,.8vw,14px);font-weight:600;padding:3px 7px;border-radius:7px;
  background:var(--surface-2);overflow:hidden;overflow-wrap:break-word;line-height:1.3;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;flex:none;}
.mon-tagev.einsatz{background:color-mix(in srgb,var(--red) 18%,var(--surface-2));}
.mon-tagev.training{background:color-mix(in srgb,var(--blue) 18%,var(--surface-2));}
.mon-tagev.sport{background:color-mix(in srgb,var(--green) 18%,var(--surface-2));}
/* Tageszeiten-Baender (v641): drei gleich hohe Faecher je Tag, damit man
   Ueberschneidungen sieht statt nur eine Liste. Gleich hoch heisst: die
   Spalte „Nachmittag" liegt an allen sieben Tagen auf derselben Hoehe. */
.mon-tagzeiten{margin-top:clamp(5px,.6vw,10px);flex:1;min-height:0;
  display:grid;grid-template-rows:repeat(var(--tzn,3),minmax(0,1fr));gap:clamp(3px,.4vw,7px);}
.mon-tz{min-height:0;display:flex;flex-direction:column;gap:3px;overflow:hidden;
  border-top:1px solid var(--border);padding-top:3px;}
.mon-tzl{font-size:clamp(7px,.6vw,11px);font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted-2);flex:none;}
.mon-tz.leer .mon-tzl{opacity:.45;}
.mon-tzi{flex:1;min-height:0;display:flex;flex-direction:column;gap:3px;overflow:hidden;}
/* Anfangszeit vor dem Titel – bei zwei Terminen im selben Band ist sie das,
   was den Unterschied macht. */
.mon-evz{font-variant-numeric:tabular-nums;font-weight:800;opacity:.7;margin-right:5px;
  display:inline;}

/* Monatsseite und Einsatzplanung des Monitors (v638) */
.mon-monat{height:100%;display:flex;flex-direction:column;}
.mon-mgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(4px,.5vw,9px);}
.mon-mgrid:not(.kopf){flex:1;min-height:0;grid-template-rows:repeat(6,minmax(0,1fr));}
.mon-mgrid.kopf{margin-bottom:clamp(4px,.5vw,8px);}
.mon-mwd{text-align:center;font-size:clamp(9px,.8vw,14px);font-weight:800;color:var(--muted-1);
  letter-spacing:.06em;}
.mon-mz{background:var(--surface);border:1px solid var(--border);border-radius:clamp(7px,.7vw,12px);
  padding:clamp(3px,.4vw,8px);display:flex;flex-direction:column;gap:2px;min-height:0;overflow:hidden;}
.mon-mz.aus{opacity:.35;}
.mon-mz.heute{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);}
.mon-mzkopf{display:flex;justify-content:space-between;align-items:baseline;flex:none;}
.mon-mzkopf span{font-size:clamp(9px,.8vw,14px);color:var(--muted-1);}
.mon-mzkopf b{font-size:clamp(13px,1.3vw,24px);font-variant-numeric:tabular-nums;line-height:1;}
/* Monatszelle: der Titel darf umbrechen. Hoechstens drei Zeilen, damit eine
   lange Bezeichnung nicht die ganze Zelle auffrisst und die Stärkezahl
   verdraengt – abgeschnitten wird also erst, wenn es wirklich nicht passt. */
.mon-mzev{font-size:clamp(8px,.7vw,12px);font-weight:600;padding:1px 5px;border-radius:5px;
  background:var(--surface-2);overflow:hidden;overflow-wrap:anywhere;line-height:1.25;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;}
.mon-mzev.einsatz{background:color-mix(in srgb,var(--red) 20%,var(--surface-2));}
.mon-mzev.training{background:color-mix(in srgb,var(--blue) 20%,var(--surface-2));}
.mon-mzev.sport{background:color-mix(in srgb,var(--green) 20%,var(--surface-2));}

/* Karten in natuerlicher Hoehe und oben ausgerichtet: bei nur EINEM Einsatz
   wurde die Karte sonst ueber den ganzen Bildschirm gezogen und wirkte leer. */
/* ---- Checklisten am Monitor (v667) ----
   Nebeneinander statt untereinander: Ein Monitor ist breit, und drei Listen
   nebeneinander bleiben aus fuenf Metern lesbar. Bei einer einzigen Liste
   nimmt sie die ganze Breite. Hochkant (Aspekt < 1) untereinander.
   Alle Masse mit clamp – der Monitor kann 24" oder 65" sein. */
/* v668: Die Karten wachsen mit ihrem Inhalt, nichts wird gekuerzt. Passt es
   nicht aufs Bild, scrollt .mon-flaeche (overflow:auto steht dort schon).
   Deshalb min-height statt height und Zeilen nach Inhaltshoehe. */
.mon-ckl{min-height:100%;display:grid;gap:clamp(10px,1.1vw,20px);
  align-content:start;grid-auto-rows:min-content;
  grid-template-columns:repeat(var(--sp,3),minmax(0,1fr));}
.mon-ckl[data-n="1"]{--sp:1;} .mon-ckl[data-n="2"]{--sp:2;} .mon-ckl[data-n="3"]{--sp:3;}
@media (max-aspect-ratio:1/1){ .mon-ckl{grid-template-columns:minmax(0,1fr);} }
.mon-cl{background:var(--surface);border:1px solid var(--border);border-radius:clamp(12px,1.1vw,20px);
  padding:clamp(10px,1.1vw,20px);display:flex;flex-direction:column;gap:clamp(5px,.6vw,10px);
  min-height:0;overflow:hidden;box-shadow:var(--shadow);}
.mon-cl-kopf{display:flex;align-items:baseline;gap:10px;flex:none;}
.mon-cl-t{flex:1;min-width:0;font-size:clamp(15px,1.45vw,27px);font-weight:800;line-height:1.15;}
.mon-cl-z{flex:none;font-size:clamp(12px,1vw,19px);font-weight:800;color:var(--muted-1);
  font-variant-numeric:tabular-nums;}
.mon-cl-bar{flex:none;height:clamp(6px,.5vw,10px);border-radius:999px;background:var(--surface-2);overflow:hidden;}
.mon-cl-bar>span{display:block;height:100%;background:var(--green);border-radius:999px;}
/* overflow sichtbar (v668): jeder Punkt steht ausgeschrieben da. */
.mon-cl-liste{flex:1;min-height:0;display:flex;flex-direction:column;
  gap:clamp(3px,.35vw,7px);margin-top:clamp(2px,.3vw,6px);}
/* Punkt: Haken links, Information oben, Zeit darunter – dieselbe Ordnung wie
   in der App (Wunsch Ecki), nur groesser. */
.mon-cl-p{display:flex;align-items:flex-start;gap:clamp(7px,.7vw,13px);
  padding:clamp(3px,.35vw,7px) 0;border-bottom:1px dashed var(--border);}
.mon-cl-p:last-child{border-bottom:none;}
.mon-cl-hk{flex:none;width:clamp(17px,1.4vw,26px);height:clamp(17px,1.4vw,26px);border-radius:50%;
  border:2px solid var(--border);display:grid;place-items:center;color:#fff;
  font-size:clamp(10px,.85vw,16px);font-weight:900;line-height:1;}
.mon-cl-p.ok .mon-cl-hk{background:var(--green);border-color:var(--green);}
.mon-cl-p.rot .mon-cl-hk{border-color:var(--red);}
.mon-cl-p.gelb .mon-cl-hk{border-color:var(--amber);}
.mon-cl-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:clamp(1px,.15vw,4px);}
.mon-cl-info{font-size:clamp(13px,1.15vw,22px);font-weight:700;line-height:1.2;overflow-wrap:break-word;}
.mon-cl-p.ok .mon-cl-info{color:var(--muted-1);text-decoration:line-through;font-weight:600;}
.mon-cl-zeit{font-size:clamp(11px,.9vw,17px);font-weight:800;align-self:flex-start;
  border-radius:999px;padding:1px clamp(6px,.6vw,11px);}
.mon-cl-zeit.rot{color:var(--red);background:color-mix(in srgb,var(--red) 15%,transparent);}
.mon-cl-zeit.gelb{color:#8a6008;background:color-mix(in srgb,var(--amber) 22%,transparent);}
.mon-cl-zeit.gruen{color:var(--green);background:color-mix(in srgb,var(--green) 15%,transparent);}
.mon-cl-mehr,.mon-cl-fuss{font-size:clamp(11px,.85vw,16px);color:var(--muted-1);font-weight:700;}
.mon-cl-fuss{flex:none;border-top:1px solid var(--border);padding-top:clamp(4px,.45vw,9px);}
.mon-cl-rest{text-align:center;color:var(--muted-1);font-weight:700;
  font-size:clamp(11px,.85vw,16px);margin-top:clamp(6px,.6vw,12px);}
.mon-eins{height:100%;display:grid;gap:clamp(8px,1vw,18px);
  grid-auto-rows:min-content;align-content:start;overflow:auto;}
.mon-ekarte{background:var(--surface);border:1px solid var(--border);border-radius:clamp(12px,1.1vw,20px);
  padding:clamp(10px,1.1vw,20px);display:flex;flex-direction:column;gap:clamp(5px,.6vw,11px);
  min-height:0;overflow:hidden;box-shadow:var(--shadow);}
.mon-ekopf{display:flex;align-items:baseline;gap:12px;}
.mon-etitel{flex:1;min-width:0;font-size:clamp(15px,1.5vw,28px);font-weight:800;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mon-ewann{flex:none;font-size:clamp(11px,1vw,18px);font-weight:800;color:var(--red);}
.mon-emeta{font-size:clamp(10px,.9vw,16px);color:var(--muted-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Die drei Gruppen stehen NEBENEINANDER, nicht untereinander (v639). Mit den
   vollen Mitarbeiterbildern waeren drei gestapelte Reihen je Einsatz rund
   1500 px hoch – bei drei Einsaetzen laeuft das aus jedem Bildschirm. Als
   Spalten braucht eine Einsatzkarte nur EINE Bildhoehe. */
.mon-ekarte{flex-direction:column;}
.mon-egruppen{display:flex;align-items:stretch;gap:clamp(10px,1.2vw,24px);
  min-height:0;flex-wrap:wrap;}
.mon-ereihe{display:flex;flex-direction:column;gap:clamp(4px,.45vw,8px);min-width:0;min-height:0;}
.mon-ereihe.warn{background:color-mix(in srgb,var(--red) 10%,transparent);
  border-radius:clamp(8px,.7vw,13px);padding:clamp(4px,.45vw,8px) clamp(6px,.6vw,11px);}
.mon-elabel{flex:none;font-size:clamp(9px,.8vw,14px);font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted-1);white-space:nowrap;}
.mon-elabel b{color:var(--text);margin-left:4px;font-size:clamp(12px,1.05vw,18px);}
.mon-ekoepfe{display:flex;gap:clamp(3px,.35vw,7px);align-items:flex-end;min-width:0;}
.mon-egrund{font-size:clamp(9px,.8vw,14px);color:var(--red);font-weight:600;}
.mon-leer2{font-size:clamp(10px,.85vw,15px);color:var(--muted-1);font-style:normal;
  align-self:center;padding:0 6px;}

/* Volle Mitarbeiterbilder ("Heldenkarten") statt runder Koepfe.
   --hh ist die Bildhoehe; sie haengt an der Zahl der Einsaetze UND an der
   Fensterbreite: min(...vh, ...vw) – sonst passt entweder die Hoehe nicht
   (drei Karten untereinander) oder die Breite nicht (14 Bilder nebeneinander). */
.mon-eins[data-n="1"]{--hh:min(46vh,15vw);}
.mon-eins[data-n="2"]{--hh:min(34vh,13vw);}
.mon-eins[data-n="3"]{--hh:min(15vh,6.8vw);}   /* nachgemessen: 8.6vw lief 101 px unten raus */
.mon-held{position:relative;height:var(--hh,120px);width:calc(var(--hh,120px)*.5625);
  flex:0 1 auto;min-width:0;border-radius:clamp(6px,.55vw,11px);overflow:hidden;
  background:color-mix(in srgb,var(--pc,var(--blue)) 22%,var(--surface-2));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--pc,var(--blue)) 45%,transparent);}
.mon-heldfoto{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;}
.mon-heldname{position:absolute;left:0;right:0;bottom:0;padding:clamp(8px,.9vw,16px) 3px clamp(2px,.25vw,5px);
  text-align:center;color:#fff;font-weight:700;line-height:1.05;
  font-size:clamp(8px,.72vw,13px);letter-spacing:-.01em;
  background:linear-gradient(transparent,rgba(0,0,0,.78));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mon-heldnotiz{position:absolute;left:0;right:0;top:0;padding:clamp(2px,.22vw,4px) 2px;
  text-align:center;color:#fff;font-weight:700;font-size:clamp(7px,.62vw,11px);
  background:var(--red);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Wer fehlt, ist ausgegraut – auf einen Blick unterscheidbar, ohne den Text zu lesen. */
.mon-held.warn .mon-heldfoto{filter:grayscale(.85);opacity:.62;}
.mon-held.warn{box-shadow:0 0 0 2px var(--red);}
/* Unbesetzter Platz: gestrichelter Rahmen, damit die Luecke als Luecke
   gelesen wird und nicht als dunkles Foto (v641). */
.mon-held.leer{background:var(--surface-2);box-shadow:none;
  border:2px dashed color-mix(in srgb,var(--red) 55%,var(--border));
  color:color-mix(in srgb,var(--muted-1) 60%,transparent);}
.mon-held.leer .mon-heldfoto{display:flex;align-items:flex-end;justify-content:center;padding:12% 18% 0;}
.mon-held.leer .mon-heldname{background:none;color:var(--muted-1);font-weight:600;}
.mon-evon{display:block;font-size:.72em;font-weight:600;opacity:.75;letter-spacing:0;}

/* ---- Tagesseite: Heldentafel links, „was kommt" rechts (v641) ---- */
/* VIER GLEICHE VIERTEL (v645): Staerke · Heute · Einsaetze · Fortbildungen.
   Vorher nahm die Heldentafel rund drei Viertel und war damit „zu praesent". */
.mon-tagseite{display:grid;gap:clamp(10px,1.2vw,20px);height:100%;min-height:0;
  grid-template-columns:repeat(4,minmax(0,1fr));}
/* Der Rueckfall auf 2x2 kommt SPAET (unter 1200 px). Gemessen auf 1366x768:
   in zwei Reihen bleiben je Zelle 292 px, davon nimmt allein der Staerkering
   135 – fuer drei Gruppen blieben 23 px Bildhoehe, die Tafel lief unten raus.
   Vier schmale Spalten mit VOLLER Hoehe sind dort das kleinere Uebel: der
   Staerkebereich braucht Hoehe, nicht Breite. */
@media (max-width:1199px){ .mon-tagseite{grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));} }
/* In der 2x2-Fassung ist die Zelle kurz – dann muss der Ring kleiner werden. */
@media (max-width:1199px){ .mon-tafelkopf .mon-ring.klein svg{width:84px;height:84px;} }
@media (max-aspect-ratio:1/1){ .mon-tagseite{grid-template-columns:minmax(0,1fr);
  grid-template-rows:none;} }
.mon-spalte{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,20px);min-height:0;}
.mon-spalte .mon-kachel{flex:1 1 0;min-height:0;}
.mon-tafel{display:flex;flex-direction:column;min-height:0;
  background:var(--surface);border:1px solid var(--border);border-radius:clamp(10px,1vw,18px);
  padding:clamp(10px,1.1vw,20px);gap:clamp(6px,.7vw,12px);}
.mon-tafelkopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex:none;}
.mon-tafelsub{font-size:clamp(12px,1.05vw,19px);font-weight:700;color:var(--muted-1);margin-top:2px;}
.mon-ring.klein{margin:0;flex:none;}
.mon-ringfrei{font-size:clamp(28px,3vw,54px);font-weight:800;color:var(--muted-1);line-height:1;}
/* Mittig: Bei 14 Leuten begrenzt die BREITE die Bildgroesse, nicht die Hoehe –
   es bleibt also fast immer Luft ubrig. Oben angeschlagen sieht das aus, als
   waere unten etwas abgeschnitten; mittig sieht es gewollt aus. */
.mon-gruppen{flex:1;min-height:0;display:grid;align-content:center;
  grid-template-columns:repeat(var(--gspalten,1),minmax(0,1fr));
  gap:clamp(4px,.5vw,10px);overflow:hidden;}
.mon-gruppe{display:flex;align-items:center;gap:clamp(8px,.9vw,16px);min-height:0;}
.mon-gruppe.voll{grid-column:1/-1;}
/* In einer geteilten Spalte ist die Beschriftung schmaler – sonst frisst sie
   den Platz, den die Gesichter brauchen. */
.mon-gruppe:not(.voll) .mon-glabel{width:clamp(74px,6.5vw,124px);}
/* Feste Beschriftungsbreite: sonst rutschen die Bilderreihen je Gruppe
   unterschiedlich weit ein und die Tafel wirkt zerfranst. */
.mon-glabel{flex:none;width:clamp(96px,9vw,168px);font-size:clamp(10px,.85vw,15px);
  font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--muted-1);
  border-left:3px solid var(--gc,var(--border));padding-left:clamp(6px,.5vw,10px);line-height:1.25;
  overflow-wrap:anywhere;}   /* Notbremse gegen abgeschnittene lange Woerter */
.mon-glabel b{display:block;font-size:clamp(15px,1.5vw,28px);letter-spacing:-.02em;}
/* ---- Staerkebereich als Viertelspalte (v645) ----
   Beschriftung UEBER die Gesichter statt daneben: in einer 440-px-Spalte
   frisst ein 120-px-Schild ein Viertel der Bildflaeche. Untereinander bekommt
   jede Statusgruppe eine eigene Zeile ueber die volle Breite – „Im Tagdienst",
   „Im Einsatz", „Urlaub", „Ausgleich", jeweils mit Zahl und Gesichtern. */
.mon-gruppen.schmal{align-content:start;gap:clamp(6px,.8vw,14px);}
.mon-gruppen.schmal .mon-gruppe{flex-direction:column;align-items:stretch;
  gap:clamp(3px,.35vw,7px);}
.mon-gruppen.schmal .mon-glabel{width:auto;display:flex;align-items:baseline;
  gap:8px;border-left:none;padding-left:0;
  border-bottom:2px solid var(--gc,var(--border));padding-bottom:3px;}
.mon-gruppen.schmal .mon-glabel b{display:inline;margin-left:auto;
  font-size:clamp(14px,1.3vw,24px);}
/* Nicht schrumpfen, UMBRECHEN: mit flex-shrink quetscht die Reihe die Karten
   schmaler, statt eine zweite Zeile anzufangen – aus 9:16 wird dann 1:4. */
.mon-gruppen.schmal .mon-ghelden{justify-content:flex-start;align-content:flex-start;}
.mon-gruppen.schmal .mon-held{flex:0 0 auto;}
.mon-ghelden{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:clamp(3px,.4vw,8px);align-content:center;}
/* Bildgroesse nach Anzahl der Gruppen – bei acht Gruppen liefe die Tafel
   sonst unten aus dem Bild (ein Monitor scrollt nicht). Nachgemessen. */
.mon-gruppen[data-g="1"],.mon-gruppen[data-g="2"],.mon-gruppen[data-g="3"]{--hh:min(21vh,10.5vw);}
.mon-gruppen[data-g="4"],.mon-gruppen[data-g="5"]{--hh:min(14vh,7.5vw);}
.mon-gruppen[data-g="6"],.mon-gruppen[data-g="7"],.mon-gruppen[data-g="8"]{--hh:min(9vh,5.2vw);}

/* ---- Nachrichtenband unter der Kopfleiste (v641) ----
   Dieselbe Laufschrift wie auf der Startseite, nur fuer die Entfernung
   vergroessert: aus 38 px Hoehe und 13 px Schrift wird knapp das Dreifache. */
/* Das Band laeuft ueber die GANZE Breite und hat oben wie unten Luft.
   Vorher klebte es randlos an der Kopfleiste und an der Flaeche darunter –
   drei Kaesten auf Stoss, das sah nach Versehen aus (Ecki, 11.08.2026).
   Keine abgerundeten Ecken: eine Laufschrift, die von rechts nach links aus
   dem Bild laeuft, darf keine sichtbaren Enden haben – sonst wirkt sie wie
   ein Kaestchen mit Text darin statt wie ein durchlaufendes Band. */
.mon-band{flex:none;padding:0;margin:clamp(8px,.9vw,16px) 0;}
.mon-band .newsticker{height:clamp(40px,4.4vh,64px);margin:0;border-radius:0;
  background:var(--surface);cursor:default;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.mon-band .nt-ico{width:clamp(34px,3vw,56px);font-size:clamp(17px,1.7vw,30px);}
.mon-band .nt-it{font-size:clamp(14px,1.45vw,27px);font-weight:600;}
.mon-band .nt-track{gap:clamp(16px,2vw,40px);}
.mon-band .nt-eil{font-size:clamp(10px,.95vw,17px);padding:3px 9px;}
.mon-band .nt-more{display:none;}   /* nichts anzutippen – der Monitor haengt an der Wand */

/* ---- Urlaubsplan als Monitorseite (v641) ----
   Die Tabelle ist dieselbe wie in der Handy-Vollansicht; hier bekommt sie nur
   die ganze Monitorflaeche und eine eigene Werkzeugleiste. */
/* Schmaler Rand nur fuer den Urlaubsplan (v668) – gemessen fehlten der
   Jahrestabelle 11 px auf die volle Seite; hier kommen rund 24 px zusammen. */
.mon-flaeche-eng{padding-top:clamp(4px,.45vw,9px);padding-bottom:clamp(4px,.45vw,9px);}
.mon-upl{height:100%;display:flex;flex-direction:column;min-height:0;gap:clamp(3px,.35vw,7px);}
.mon-uplbar{flex:none;display:flex;align-items:center;gap:clamp(8px,1vw,18px);flex-wrap:wrap;}
.mon-uplbar .uplv-t{font-size:clamp(14px,1.3vw,24px);}
.mon-uplroot{flex:1;min-height:0;overflow:auto;}
/* Volle Karte statt rundem Avatar in der Namensspalte. */
.uplj-held{flex:none;border-radius:4px;background-size:cover;background-repeat:no-repeat;
  box-shadow:0 0 0 1px var(--border);}

/* ---- Leistungsseite je Person (v641) ---- */
.mon-leist{height:100%;display:flex;flex-direction:column;min-height:0;gap:clamp(8px,1vw,16px);}
.mon-lleiste{flex:none;display:flex;gap:clamp(4px,.5vw,9px);overflow-x:auto;padding-bottom:2px;
  --hh:clamp(56px,7vh,96px);}
.mon-lp{flex:none;padding:0;border:none;background:none;cursor:pointer;border-radius:8px;
  opacity:.5;transition:opacity .12s,transform .12s;}
.mon-lp.an{opacity:1;transform:translateY(-2px);}
.mon-lblatt{flex:1;min-height:0;display:flex;flex-direction:column;gap:clamp(8px,1vw,16px);
  background:var(--surface);border:1px solid var(--border);
  border-radius:clamp(10px,1vw,18px);padding:clamp(10px,1.1vw,20px);overflow:auto;}
.mon-lkopf{flex:none;display:flex;align-items:center;gap:clamp(10px,1.2vw,20px);--hh:clamp(64px,9vh,120px);}
.mon-lname{font-size:clamp(20px,2.2vw,40px);font-weight:800;line-height:1.1;}
.mon-lrolle{font-size:clamp(11px,1vw,18px);color:var(--muted-1);font-weight:600;}
/* Hoechstens DREI Spalten: auto-fit machte auf 1920 px sechs Spalten a 291 px –
   sechs schmale, halbleere Saeulen nebeneinander. Drei breite Karten in zwei
   Reihen fuellen sich und bleiben aus der Entfernung lesbar.
   align-items:start, damit eine lange Karte die Nachbarn nicht mitzieht. */
.mon-lspalten{flex:1;min-height:0;display:grid;gap:clamp(8px,1vw,16px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  align-content:start;align-items:start;overflow:auto;}
@media (min-width:1100px){ .mon-lspalten{grid-template-columns:repeat(3,minmax(0,1fr));} }
.mon-lkarte{background:var(--surface-2);border-radius:clamp(8px,.8vw,14px);
  padding:clamp(9px,1vw,17px);display:flex;flex-direction:column;gap:clamp(3px,.4vw,7px);}
.mon-lz{display:flex;align-items:center;gap:clamp(5px,.6vw,10px);
  font-size:clamp(11px,1vw,18px);padding:2px 0;}
.mon-lpunkt{flex:none;width:.7em;height:.7em;border-radius:50%;}
.mon-llbl{flex:none;font-weight:700;}
.mon-lwert{flex:1;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;}
.mon-lsub{font-size:clamp(9px,.78vw,14px);color:var(--muted-2);line-height:1.35;}
.mon-lreihe{display:flex;flex-wrap:wrap;gap:clamp(3px,.35vw,6px);margin-top:2px;}
/* Quartale und Kontrolluebungen als Kaestchen: vier Felder sagen aus der
   Entfernung mehr als der Satz „2 von 3 erfuellt". */
.mon-lq,.mon-lku{font-size:clamp(9px,.8vw,15px);font-weight:800;padding:2px clamp(5px,.5vw,9px);
  border-radius:6px;background:var(--surface);color:var(--muted-2);
  box-shadow:inset 0 0 0 1px var(--border);}
.mon-lq.ok,.mon-lku.ok{background:color-mix(in srgb,var(--green) 22%,var(--surface));
  color:var(--green);box-shadow:inset 0 0 0 1px var(--green);}
.mon-lq.offen{background:color-mix(in srgb,var(--red) 16%,var(--surface));
  color:var(--red);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--red) 55%,transparent);}
.mon-lq.laufend{background:color-mix(in srgb,var(--blue) 18%,var(--surface));color:var(--blue);
  box-shadow:inset 0 0 0 1px var(--blue);}
.mon-lbar{flex:1;height:clamp(6px,.6vh,10px);border-radius:999px;background:var(--surface);
  overflow:hidden;box-shadow:inset 0 0 0 1px var(--border);}
.mon-lbar>span{display:block;height:100%;border-radius:999px;}
.mon-lwarn{font-size:clamp(10px,.85vw,15px);font-weight:700;color:var(--amber);margin-top:2px;}
.mon-ltab{width:100%;border-collapse:collapse;font-size:clamp(9px,.82vw,15px);margin-top:3px;}
.mon-ltab th{text-align:left;font-size:.86em;letter-spacing:.03em;text-transform:uppercase;
  color:var(--muted-2);font-weight:800;padding:2px 4px 3px;border-bottom:1px solid var(--border);}
.mon-ltab td{padding:3px 4px;border-bottom:1px dashed var(--border);}
.mon-ltab .m-gold{color:#B8860B;font-weight:800;}
.mon-ltab .m-silber{color:#8A94A6;font-weight:800;}
.mon-ltab .m-bronze{color:#A9662F;font-weight:800;}

/* ============================================================
   Leistungsseite bebildert (v645)
   Wunsch Ecki: „schöner, grafischer, moderner" – mit den Fotos, die in der
   App schon auf den Ordnerkacheln liegen. Jede Karte bekommt ihr Bild als
   Kopf, darueber einen Verlauf, damit Titel und Zahl auch auf hellen Fotos
   lesbar bleiben. Keine neuen Dateien, kein zweiter Bilderstand.
   ============================================================ */
.mon-lkopf .mon-lz{margin-left:auto;background:var(--surface-2);border-radius:999px;
  padding:6px clamp(10px,1vw,18px);gap:8px;}
.mon-lkarte.foto{padding:0;overflow:hidden;gap:0;background:var(--surface);
  box-shadow:0 1px 3px rgba(0,0,0,.10);border:1px solid var(--border);}
.mon-lkbild{position:relative;height:clamp(64px,8.4vh,118px);flex:none;
  background-image:var(--bild);background-size:cover;background-position:center 42%;
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:clamp(7px,.8vw,14px) clamp(9px,1vw,17px);gap:8px;}
/* Ohne Bild kein leerer grauer Kasten, sondern eine ruhige Farbflaeche. */
.mon-lkbild.ohne{background:linear-gradient(135deg,var(--surface-2),var(--bg-2));}
.mon-lkschleier{position:absolute;inset:0;
  background:linear-gradient(transparent 20%,rgba(0,0,0,.72));}
.mon-lkbild.ohne .mon-lkschleier{background:none;}
.mon-lktitel{position:relative;font-size:clamp(12px,1.05vw,20px);font-weight:800;
  letter-spacing:.02em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);line-height:1.15;}
.mon-lkbild.ohne .mon-lktitel{color:var(--text);text-shadow:none;}
.mon-lkwert{position:relative;font-size:clamp(15px,1.5vw,28px);font-weight:800;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,.75);}
.mon-lkinhalt{padding:clamp(8px,.9vw,15px);display:flex;flex-direction:column;
  gap:clamp(4px,.45vw,8px);min-height:0;}
/* Quartals-/Halbjahreskaestchen mit Zeichen: aus zwei Metern Abstand liest
   man ein Haekchen schneller als eine Farbe – und Rot/Gruen allein waere
   fuer Rotgruenblinde gar keine Auskunft. */
.mon-lq{display:inline-flex;flex-direction:column;align-items:center;line-height:1.1;
  min-width:clamp(30px,2.6vw,48px);padding:clamp(3px,.35vw,6px) clamp(4px,.4vw,8px);}
.mon-lq i{font-style:normal;font-size:1.15em;}
.mon-lq.kuenftig{opacity:.5;}
/* Kontrolluebungen: je Waffe ihr eigenes Foto als Kachel. */
.mon-lkus{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(5px,.5vw,9px);}
.mon-lkuk{--bild:none;position:relative;aspect-ratio:4/3;border-radius:clamp(6px,.6vw,11px);overflow:hidden;
  background-image:var(--bild);background-size:cover;background-position:center;
  background-color:var(--surface);display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(4px,.45vw,8px);box-shadow:inset 0 0 0 1px var(--border);
  filter:grayscale(.75) brightness(.82);}
.mon-lkuk.ok{filter:none;box-shadow:inset 0 0 0 2px var(--green);}
.mon-lkuk::after{content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 35%,rgba(0,0,0,.78));}
.mon-lkuh{position:relative;z-index:1;font-size:clamp(9px,.8vw,15px);font-weight:800;color:#fff;}
.mon-lkuz{position:relative;z-index:1;font-size:clamp(8px,.7vw,13px);font-weight:700;
  color:rgba(255,255,255,.82);}
.mon-lkuk.ok .mon-lkuz{color:#7BE0A8;}
/* Sportabzeichen: je Disziplin eine Zeile mit dem Foto der gewaehlten Uebung. */
.mon-ldsas{display:flex;flex-direction:column;gap:clamp(4px,.4vw,7px);}
/* --bild:none als Vorgabe – sonst ERBEN die Zeilen das Bild der Elternkarte
   (eigene Eigenschaften vererben sich!) und jede Disziplin ohne gewaehlte
   Uebung trug das Medaillenfoto der Karte. Ein gesetztes style="--bild:…"
   am Element selbst sticht diese Regel. */
.mon-ldsa{--bild:none;display:grid;grid-template-columns:clamp(30px,2.6vw,46px) 1fr auto;
  align-items:center;gap:clamp(5px,.5vw,9px);padding:clamp(1px,.15vw,3px) 0;
  border-bottom:1px dashed var(--border);}
.mon-ldsa::before{content:"";width:100%;aspect-ratio:4/3;border-radius:6px;
  background-image:var(--bild);background-size:cover;background-position:center;
  background-color:var(--surface);box-shadow:inset 0 0 0 1px var(--border);}
.mon-ldsad{font-size:clamp(9px,.78vw,14px);font-weight:800;line-height:1.2;}
.mon-ldsau{grid-column:2;grid-row:2;font-size:clamp(8px,.68vw,12px);color:var(--muted-1);
  margin-top:-1px;line-height:1.2;}
.mon-ldsa{grid-template-rows:auto auto;}
.mon-ldsa::before{grid-row:1/3;}
.mon-ldsaw{grid-column:3;grid-row:1/3;font-size:clamp(9px,.78vw,14px);font-weight:700;
  color:var(--muted-2);text-align:right;}
.mon-ldsa.m-gold .mon-ldsaw{color:#B8860B;}
.mon-ldsa.m-silber .mon-ldsaw{color:#8A94A6;}
.mon-ldsa.m-bronze .mon-ldsaw{color:#A9662F;}
/* Fortbildungsstunden: kleines Ordnerbild, Name, Balken, Wert. */
.mon-lfb{--bild:none;display:grid;grid-template-columns:clamp(28px,2.4vw,44px) auto 1fr auto;
  align-items:center;gap:clamp(6px,.6vw,11px);padding:clamp(3px,.3vw,6px) 0;}
.mon-lfb::before{content:"";width:100%;aspect-ratio:1;border-radius:6px;
  background-image:var(--bild);background-size:cover;background-position:center;
  background-color:var(--surface);box-shadow:inset 0 0 0 1px var(--border);}
.mon-lfbn{font-size:clamp(10px,.86vw,16px);font-weight:800;}

/* Bildschirmsperre: Stand offen anzeigen statt still zu scheitern. */
.mon-wach{flex:none;font-size:clamp(9px,.72vw,13px);font-weight:700;letter-spacing:.03em;
  padding:3px clamp(6px,.55vw,10px);border-radius:999px;color:var(--muted-1);
  background:var(--surface-2);white-space:nowrap;}
.mon-wach:empty{display:none;}
.mon-wach.an{color:var(--green);background:color-mix(in srgb,var(--green) 14%,transparent);}
.mon-wach.warn{color:var(--amber);background:color-mix(in srgb,var(--amber) 14%,transparent);}


/* ============================================================
   „Neu eingetragen" auf dem Monitor (v648)
   Roter Rahmen um alles, was in den letzten drei Tagen angelegt wurde –
   damit im Vorbeigehen auffaellt, was dazugekommen ist. Bewusst nur ein
   Rahmen und KEINE Animation: Der Monitor laeuft stundenlang, alles, was
   dauerhaft blinkt, kostet Strom und nervt (Lehre v428).
   ============================================================ */
.mon-frisch{position:relative;
  box-shadow:0 0 0 2px var(--red), 0 0 0 4px color-mix(in srgb,var(--red) 22%,transparent);
  border-radius:clamp(6px,.6vw,11px);}
/* Zeilen und Riegel haben von Haus aus keinen Innenabstand fuer den Rahmen. */
.mon-zeile.mon-frisch{padding:clamp(4px,.45vw,9px) clamp(7px,.7vw,13px);
  border-bottom-color:transparent;}
.mon-tagev.mon-frisch,.mon-mzev.mon-frisch{box-shadow:inset 0 0 0 2px var(--red);}
.mon-aushang.mon-frisch{padding:clamp(7px,.7vw,13px);border-bottom:none;}
.mon-ekarte.mon-frisch{box-shadow:0 0 0 2px var(--red), var(--shadow);}
/* Kleines Schild, damit die Farbe auch benannt ist – Rot allein ist fuer
   Rotgruenblinde keine Auskunft (dieselbe Regel wie bei den Quartalen). */
.mon-frisch::after{content:"NEU";position:absolute;top:0;right:0;
  transform:translate(30%,-45%);
  background:var(--red);color:#fff;font-size:clamp(7px,.6vw,11px);font-weight:800;
  letter-spacing:.06em;padding:1px 5px;border-radius:999px;pointer-events:none;z-index:2;}
.mon-mzev.mon-frisch::after,.mon-tagev.mon-frisch::after{transform:translate(18%,-38%);
  font-size:clamp(6px,.5vw,9px);padding:0 4px;}

/* ============================================================
   Probebetrieb (v650) – Schattenkonto angemeldet
   Ein Streifen, der nicht zu übersehen ist: Solange er steht, erreicht
   KEIN Datensatz den Team-Server. Oben statt unten, weil die Tableiste
   unten schon belegt ist; die App rückt um seine Höhe nach.
   Bewusst ohne Animation – er steht unter Umständen stundenlang (v428).
   ============================================================ */
#probe-band{position:fixed;top:0;left:0;right:0;z-index:9600;
  background:repeating-linear-gradient(135deg,#7A6BD8,#7A6BD8 12px,#6A5CC8 12px,#6A5CC8 24px);
  color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;text-align:center;
  padding:5px 12px calc(5px + env(safe-area-inset-top,0px));
  box-shadow:0 1px 6px rgba(0,0,0,.25);pointer-events:none;}
#probe-band b{font-weight:900;letter-spacing:.06em;text-transform:uppercase;}
/* Die App nach unten schieben, sonst liegt der Streifen auf der Kopfzeile. */
body.probe-an #app{padding-top:26px;}
/* Über dem Monitor liegt er auch – dort ist die Verwechslungsgefahr am
   größten, weil die Fläche wie ein echtes Lagebild aussieht. */
body.probe-an.mon-an #probe-band{z-index:9600;}

/* ============================================================
   Schwarzes Brett (v655)
   Umfrage-Optionen und Checklisten-Punkte als tippbare Zeilen.
   Balken WAAGERECHT (die .bar-track der Wochenuebersicht ist eine
   Saeule) – schmal und unaufgeregt, die Gesichter sind die Auskunft.
   ============================================================ */
.bt-opt{border:1.5px solid var(--border);border-radius:12px;padding:10px 12px;
  margin-bottom:8px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.bt-opt:active{background:var(--surface-2);}
/* Eigene Wahl: Akzentrahmen statt Haekchen – bei Mehrfachauswahl koennen
   es mehrere Zeilen gleichzeitig sein. */
.bt-opt.meine{border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 7%,var(--surface));}
.bt-optkopf{display:flex;align-items:baseline;gap:8px;}
.bt-opttext{flex:1;min-width:0;font-size:14px;font-weight:600;overflow-wrap:break-word;}
.bt-optzahl{flex:none;font-size:15px;font-variant-numeric:tabular-nums;color:var(--accent);}
.bt-bar{display:block;height:6px;border-radius:999px;background:var(--surface-2);
  overflow:hidden;margin-top:6px;}
.bt-bar>span{display:block;height:100%;border-radius:999px;background:var(--accent);
  min-width:0;transition:width .25s;}
.bt-koepfe{display:flex;align-items:center;gap:3px;margin-top:7px;flex-wrap:wrap;}
.bt-mehr{font-size:11.5px;font-weight:800;color:var(--muted-1);padding-left:3px;}
/* Checklisten-Punkt: Kreis vorn, erledigt = gruen + durchgestrichen. */
.bt-punkt{display:flex;align-items:center;gap:10px;padding:9px 2px;
  border-bottom:1px dashed var(--border);cursor:pointer;
  -webkit-tap-highlight-color:transparent;}
.bt-punkt:last-child{border-bottom:none;}
.bt-punkt:active{background:var(--surface-2);}
.bt-chk{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:#fff;}
.bt-punkt.done .bt-chk{background:var(--green);border-color:var(--green);}
/* Zwei Zeilen statt einer (v667, Wunsch Ecki: „oben Information, unten
   drunter die Zeit beziehungsweise den Zeitraum"). Vorher lief der Termin-Chip
   hinter dem Text mit und rutschte bei langen Punkten in eine unruhige
   zweite Zeile – jetzt hat er seine eigene, immer an derselben Stelle. */
.bt-ptext{flex:1;min-width:0;font-size:14px;overflow-wrap:break-word;
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
.bt-punkt.done .bt-ptext{color:var(--muted-1);text-decoration:line-through;}
.bt-von{flex:none;display:flex;align-items:center;gap:5px;font-size:11px;
  color:var(--muted-1);white-space:nowrap;}

/* ---- Abgabetermine auf der Checkliste (v656) ----
   Farbstreifen links + Termin-Chip. Die Farbe traegt nie allein: der
   Termin steht ausgeschrieben im Chip (Rotgruenblinden-Regel), und die
   Reihenfolge (dringend oben) ist die dritte Kodierung. */
.bt-punkt.rot{border-left:3px solid var(--red);padding-left:8px;}
.bt-punkt.gelb{border-left:3px solid var(--amber);padding-left:8px;}
.bt-punkt.gruen{border-left:3px solid var(--green);padding-left:8px;}
/* Klapp-Knopf der Checkliste (v667): traegt zugleich den Fortschrittsbalken,
   der vorher als eigene Zeile darueber stand – eine Zeile weniger, und der
   Balken ist jetzt selbst die Anfassflaeche. */
.bt-klapp{display:flex;align-items:center;gap:10px;width:100%;padding:7px 2px 9px;
  border:none;background:none;font:inherit;color:inherit;cursor:pointer;}
.bt-klapp:active{opacity:.7;}
.bt-klapp-bar{flex:1;min-width:0;height:7px;border-radius:999px;background:var(--surface-2);
  overflow:hidden;display:block;}
.bt-klapp-bar>span{display:block;height:100%;background:var(--green);border-radius:999px;}
.bt-klapp-n{flex:none;font-size:11.5px;font-weight:700;color:var(--muted-1);}
.bt-klapp-chev{flex:none;font-size:17px;color:var(--muted-1);transition:transform .2s;}
.bt-frist{display:inline-block;font-size:11px;font-weight:800;border-radius:999px;
  padding:1px 8px;margin-left:7px;white-space:nowrap;vertical-align:1px;}
.bt-frist.rot{color:var(--red);background:color-mix(in srgb,var(--red) 14%,transparent);}
.bt-frist.gelb{color:#8a6008;background:color-mix(in srgb,var(--amber) 20%,transparent);}
.bt-frist.gruen{color:var(--green);background:color-mix(in srgb,var(--green) 14%,transparent);}
/* Verknuepfter-Termin-Chip unter dem Checklisten-Kopf (v658). */
.bt-termin{display:flex;align-items:center;gap:8px;margin:2px 0 10px;padding:7px 10px;
  border:1px solid color-mix(in srgb,var(--blue) 26%,var(--border));border-radius:9px;
  background:color-mix(in srgb,var(--blue) 8%,var(--surface));color:var(--blue);
  font-size:12px;font-weight:700;cursor:pointer;}
.bt-termin:active{background:color-mix(in srgb,var(--blue) 16%,var(--surface));}
.bt-termin span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}