/* ==== 01-grundlagen.css ==== */
/* ==================================================================
   GREWE.MEDIA Tool – Design-System
   Eine Schrift (Roboto), eine Größenskala, eine Höhenskala.
   ================================================================== */

@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/roboto-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/roboto-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/roboto-latin-700-normal.woff2') format('woff2')}

:root{
  /* ---- Schrift ---- */
  --font:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --fs-xs:11px;      /* Spaltenköpfe, Kürzel */
  --fs-sm:12.5px;    /* Sekundärtext, Tags */
  --fs-base:14px;    /* Standard: Tabellen, Formulare, Buttons, Navigation */
  --fs-md:15px;      /* Fließtext in Detailansichten */
  --fs-lg:17px;      /* Abschnittsüberschriften */
  --fs-xl:22px;      /* Seitentitel */
  --fs-2xl:30px;     /* Kennzahlen, Uhr */
  --lh:1.5;

  /* ---- Höhen & Abstände ---- */
  --h-ctl:36px;      /* Buttons, Eingaben, Auswahlfelder */
  --h-pill:30px;     /* Status-Dropdowns, Pillen */
  /* Starre Spalten links (Untermenüs): Höhe der Kopfzeile kommt aus 70-untermenue.js */
  --starr-oben:calc(var(--kopf-h, 70px) + 6px);
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --team-karte-b:240px;      /* Team: Mindestbreite einer Personen-Kachel (alle gleich groß) */
  --org-team-b:260px;        /* Einstellungen › Abteilungen & Teams: Mindestbreite einer Team-Karte */
  --org-chip-b:160px;        /* … darin: so breit darf ein Name im Personen-Chip werden */
  --persnr-b:96px;           /* Einstellungen › Benutzer: Feld Personalnummer */
  --userpfeil:18px;          /* Pfeil-Kreis unten rechts im Profilbild (oben rechts) */
  --kchat-b:340px; --kchat-h:480px;   /* Kunden-Chat: Fenster unten rechts (offen) – Kundenbereich nutzt dieselben Maße (portal/stil.css) */
  --kchat-weich:cubic-bezier(.2,.8,.3,1);   /* Öffnen/Schließen des Chat-Fensters */
  --kchat-abstand:var(--sp-4);        /* … schwebt so weit über der Unterkante, rundum rund */
  --kchat-leiste-b:210px; --kchat-kopf-h:36px;   /* … und als angeheftete Leiste (zu) */
  --spalte-b:300px;          /* Breite einer Board-Spalte (Aufgaben, Redaktionsplan, Kunden) */
  --dp-drawer-b:1320px;      /* Drehplanung: Seitenansicht breiter – ab 980 px Platz steht die Vorschau rechts */
  --dp-vorschau-b:440px;     /* … so breit ist die Live-Vorschau daneben */
  --dp-tab-b:150px;          /* … Mindestbreite eines Drehtag-Reiters */
  --dp-check:26px;           /* … Haken „erledigt“ in der Shotliste (am Handy größer: --dp-check-handy) */
  --dp-check-handy:40px;
  --karte-bild-h:320px;      /* Redaktionsplan „Inhalt anzeigen“: so hoch darf das Bild oben auf der Karte werden */
  --karte-bild-r:10px;       /* … seine Rundung */
  --karte-bild-rand:8px;     /* … und sein Abstand zum Kartenrand */
  --board-rand:56px;
  --r-sm:6px; --r:8px; --r-lg:10px;
  --nav-w:236px;
  --reiter-h:34px;           /* Pillen der Reiter-Leiste (Modul-Register) – wie .viewswitch */
  --an-balken-h:120px;       /* Analytics: Höhe der Monatsbalken */
  --nav-mehr-b:260px;        /* Seitenleiste: Breite der „Mehr“-Liste */
  --nav-sub-h:34px;          /* Seitenleiste: Höhe eines Punkts im aufgeklappten Untermenü */
  --nav-sub-icon:17px;       /* … und sein (kleineres) Symbol */
  --nav-sub-bg:color-mix(in srgb,var(--brand) 9%,transparent);   /* leichter Hintergrund des Untermenüs */
  --nav-sub-t:220ms;         /* Auf-/Zuklappen */
  --seite-t:200ms;           /* Seitenwechsel: neuer Inhalt gleitet weich herein */
  --weich:cubic-bezier(.2,.8,.2,1);
  /* Einrichtungs-Fragebogen (0.29.0, 84-einrichtung.css): über Seitenleiste und Dock, unter Dialogen und Toast */
  --ebene-einrichtung:90;
  --einrichtung-b:780px;     /* Breite des Assistenten */
  --ei-punkt-h:4px;          /* Fortschrittsbalken oben */
  --ei-kachel-b:170px; --ei-kachel-h:64px;   /* Auswahl-Kacheln (Unterkategorie, Daten) */
  --ei-tupfer:18px;          /* Farbvorschlag aus dem Logo */
  --hg-b:360px; --hg-griff:24px; --hg-kreis:36px; --hg-flaeche-h:150px; --hg-vorschau-max:220px; --hg-oben:84px; --hg-unschaerfe:14px;   /* Hintergrund-Editor */
  --eiv-h:236px; --eiv-leiste-b:96px; --eiv-logo-h:22px; --eiv-zeile-h:9px; --eiv-markierung:3px;   /* Mini-Vorschau */

  /* ---- Farben ---- */
  --bg:#FAF8F6; --card:#FFFFFF; --card-2:#F5F2EF;
  --ink:#1A1613; --ink-2:#5C554E; --ink-3:#8E867E;
  --ueberschrift:#4C4C4C;   /* Abschnitts-Überschriften in Seitenansichten (Kontakte, Notizen …) */
  --line:#E7E1DA; --line-soft:#F1ECE6;
  --brand:#FF6E00; --brand-text:#C24E00; --brand-soft:#FFF1E5; --brand-line:#FFD1AC;
  --on-brand:#FFFFFF;

  --c-grau:#5C554E;    --c-grau-bg:#EFEAE4;    --c-grau-l:#DED6CC;
  --c-neutral:#5C554E; --c-neutral-bg:#F1ECE6; --c-neutral-l:#E2DAD1;
  --c-gruen:#1F7A4D;   --c-gruen-bg:#E4F2EA;   --c-gruen-l:#A9D8C0;
  --c-blau:#2B6CB0;    --c-blau-bg:#E6EFF9;    --c-blau-l:#AFCBEA;
  --c-orange:#C24E00;  --c-orange-bg:#FFF1E5;  --c-orange-l:#FFC79A;
  --c-gold:#8A6A16;    --c-gold-bg:#F8EFD6;    --c-gold-l:#E3CE93;
  --c-lila:#6B4EA8;    --c-lila-bg:#EEEAF8;    --c-lila-l:#C7B9EA;
  --c-braun:#8A5A3B;   --c-braun-bg:#F3E8E0;   --c-braun-l:#DCC0AA;
  --c-beere:#9B3F6B;   --c-beere-bg:#F8E6EF;   --c-beere-l:#E5B4CD;
  --c-rot:#C0341F;     --c-rot-bg:#FCEBE8;     --c-rot-l:#F0B7AC;

  --shadow:0 1px 2px rgba(26,22,19,.05), 0 10px 28px -18px rgba(26,22,19,.28);
  --shadow-lift:0 2px 6px rgba(26,22,19,.08), 0 18px 40px -20px rgba(26,22,19,.35);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ color-scheme:dark;
    --bg:#14110E; --card:#1D1916; --card-2:#252019;
    --ink:#F2EDE8; --ink-2:#BDB4AA; --ink-3:#8B8279; --ueberschrift:#C9C3BC;
    --line:#332C25; --line-soft:#282219;
    --brand:#FF8534; --brand-text:#FF9A57; --brand-soft:#33200F; --brand-line:#5C3818;
    --on-brand:#1A1613;
    --c-grau:#BDB4AA;    --c-grau-bg:#2A241E;    --c-grau-l:#443B31;
    --c-neutral:#BDB4AA; --c-neutral-bg:#262019; --c-neutral-l:#3D352C;
    --c-gruen:#5FBF8E;   --c-gruen-bg:#14291F;   --c-gruen-l:#2C5943;
    --c-blau:#79B4E8;    --c-blau-bg:#152330;    --c-blau-l:#2C4B68;
    --c-orange:#FF9A57;  --c-orange-bg:#33200F;  --c-orange-l:#66401D;
    --c-gold:#DDBB63;    --c-gold-bg:#2E2611;    --c-gold-l:#5C4B24;
    --c-lila:#B49AE8;    --c-lila-bg:#211B32;    --c-lila-l:#453769;
    --c-braun:#CFA184;   --c-braun-bg:#2B211A;   --c-braun-l:#573F2E;
    --c-beere:#E093B7;   --c-beere-bg:#2E1824;   --c-beere-l:#5E2F47;
    --c-rot:#F08573;     --c-rot-bg:#331A16;     --c-rot-l:#68332B;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -18px rgba(0,0,0,.8);
    --shadow-lift:0 2px 8px rgba(0,0,0,.5), 0 20px 44px -20px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{ color-scheme:dark;
  --bg:#14110E; --card:#1D1916; --card-2:#252019;
  --ink:#F2EDE8; --ink-2:#BDB4AA; --ink-3:#8B8279; --ueberschrift:#C9C3BC;
  --line:#332C25; --line-soft:#282219;
  --brand:#FF8534; --brand-text:#FF9A57; --brand-soft:#33200F; --brand-line:#5C3818;
  --on-brand:#1A1613;
  --c-grau:#BDB4AA;    --c-grau-bg:#2A241E;    --c-grau-l:#443B31;
  --c-neutral:#BDB4AA; --c-neutral-bg:#262019; --c-neutral-l:#3D352C;
  --c-gruen:#5FBF8E;   --c-gruen-bg:#14291F;   --c-gruen-l:#2C5943;
  --c-blau:#79B4E8;    --c-blau-bg:#152330;    --c-blau-l:#2C4B68;
  --c-orange:#FF9A57;  --c-orange-bg:#33200F;  --c-orange-l:#66401D;
  --c-gold:#DDBB63;    --c-gold-bg:#2E2611;    --c-gold-l:#5C4B24;
  --c-lila:#B49AE8;    --c-lila-bg:#211B32;    --c-lila-l:#453769;
  --c-braun:#CFA184;   --c-braun-bg:#2B211A;   --c-braun-l:#573F2E;
  --c-beere:#E093B7;   --c-beere-bg:#2E1824;   --c-beere-l:#5E2F47;
  --c-rot:#F08573;     --c-rot-bg:#331A16;     --c-rot-l:#68332B;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -18px rgba(0,0,0,.8);
  --shadow-lift:0 2px 8px rgba(0,0,0,.5), 0 20px 44px -20px rgba(0,0,0,.9);
}
:root[data-theme="light"]{ color-scheme:light }

/* ---------- Grundlagen ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:var(--fs-base); line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
}
/* Nur echte Überlagerungen fangen das Scrollen ab – Tabellen und Listen
   geben es an die Seite weiter, sonst bleibt das Mausrad darüber hängen. */
.drawer-panel,.dd-liste{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.table-wrap{-webkit-overflow-scrolling:touch}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.25;letter-spacing:-.01em;font-weight:700}
h1{font-size:var(--fs-xl)}
h2{font-size:var(--fs-lg);font-weight:500}
h3{font-size:var(--fs-base);font-weight:500}
p{margin:0 0 var(--sp-2)}
.small{font-size:var(--fs-sm)}
.muted{color:var(--ink-3)}
.warn{color:var(--c-rot);font-weight:500}
.grow{flex:1;min-width:0}
.spacer{flex:1}
.nums{font-variant-numeric:tabular-nums}
[hidden]{display:none !important}


/* ==== 02-navigation.css ==== */
/* ---------- Navigation ---------- */
#nav{
  position:fixed; inset:0 auto 0 0; width:var(--nav-w);
  background:var(--card); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:var(--sp-4) var(--sp-3);
  gap:var(--sp-5); z-index:50;
}
.brand{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-2);min-height:40px}
.brand .logo{display:flex;align-items:center;min-width:0}
.brand .logo img{height:30px;width:auto;max-width:180px;flex:none;
  object-fit:contain;display:block}
.brand .logo img[data-invert="1"]{filter:invert(1)}
.brand .fallback{display:flex;align-items:center;gap:var(--sp-2)}
.brand strong{display:block;font-size:var(--fs-base);font-weight:700;letter-spacing:.01em}
.brand small{display:block;color:var(--ink-3);font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.1em}
.dot{width:12px;height:12px;border-radius:4px;background:var(--brand);flex:none}
#nav nav{display:flex;flex-direction:column;gap:2px}
#nav nav a{
  display:flex;align-items:center;gap:var(--sp-2);
  height:var(--h-ctl);padding:0 var(--sp-2)var(--sp-2);padding:0 10px;
  border-radius:var(--r);text-decoration:none;color:var(--ink-2);
  font-size:var(--fs-base);font-weight:400;
}
#nav nav a svg{width:18px;height:18px;flex:none;opacity:.75}
#nav nav a:hover{background:var(--card-2);color:var(--ink)}
#nav nav a.active{background:var(--brand-soft);color:var(--brand-text);font-weight:500}
#nav nav a.active svg{opacity:1}
.nav-foot{margin-top:auto;display:flex;gap:var(--sp-2)}
.nav-foot .themebtn{flex:1}
.nav-foot .iconbtn{flex:none}
#navScrim{position:fixed;inset:0;background:rgba(20,17,14,.45);z-index:45;display:none}
body.nav-open #navScrim{display:block}

main{margin-left:var(--nav-w);min-height:100vh}
#topbar{
  position:sticky;top:0;z-index:30;display:flex;gap:var(--sp-2);align-items:center;
  padding:var(--sp-3) var(--sp-5);background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
#view{padding:var(--sp-5);max-width:1680px;width:100%}
.only-mobile{display:none !important}

/* ---------- Suche ---------- */
.search{position:relative;flex:1;max-width:520px}
.search input{width:100%}
#results{
  position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
  overflow:hidden;max-height:60vh;overflow-y:auto;
}
#results button{
  display:flex;width:100%;gap:var(--sp-2);align-items:center;justify-content:space-between;
  padding:var(--sp-2) var(--sp-3);background:none;border:0;
  border-bottom:1px solid var(--line-soft);
  text-align:left;cursor:pointer;color:var(--ink);font:inherit;font-size:var(--fs-base);
}
#results button:hover{background:var(--card-2)}
#results .rsub{color:var(--ink-3);font-size:var(--fs-sm)}

/* ---------- Benutzer oben rechts ---------- */
.userbox{display:flex;align-items:center;gap:var(--sp-2);flex:none}
.avatar{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:30px;height:30px;border-radius:50%;
  background:var(--brand-soft);color:var(--brand-text);border:1px solid var(--brand-line);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;
}
.avatar.mini{width:22px;height:22px;font-size:10px;
  background:var(--c-neutral-bg);color:var(--c-neutral);border-color:var(--c-neutral-l)}
/* Eigenes Profilbild statt Kürzel – füllt denselben Kreis */
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}


/* ==== 03-eingaben.css ==== */
/* ---------- Eingaben & Buttons ---------- */
input,select,textarea,button{font-family:var(--font);font-size:var(--fs-base)}
/* Einzeilige Felder sind so rund wie die Knöpfe (Pille), mehrzeilige
   bekommen den großen Kartenradius – seit 30.09.2026 überall gleich. */
input,select,textarea{
  color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:999px;
  height:var(--h-ctl);padding:0 14px;
}
select{
  padding-right:34px;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E867E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:15px;
}
:root[data-theme="dark"] select,
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B8279' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E")}}
textarea{height:auto;width:100%;min-height:84px;resize:vertical;border-radius:var(--r-lg);
  padding:var(--sp-2) 14px;line-height:var(--lh)}
/* Fokus überall gleich: ein dünner Rand in der Markenfarbe (1 px), kein zweiter Ring (0.49.2) */
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand)}
/* Eingaben in einem Feld fuellen ihre Spalte – sonst behalten sie ihre
   Standardbreite und Zeilen mit Auswahlfeldern daneben wirken schief.
   Kaestchen, Radios und der Farbwaehler behalten ihre eigene Groesse. */
.field input:not([type="checkbox"]):not([type="radio"]):not([type="color"]){width:100%}
/* Zeilen, in denen ein schmales Datum neben einem breiten Feld steht:
   das Datum bekommt nur seine Breite, der Rest geht an das Nachbarfeld. */
.row2.eng-links {grid-template-columns:auto 1fr}
.row2.eng-rechts{grid-template-columns:1fr auto}
.row3.eng-links2{grid-template-columns:auto auto 1fr}
.eng-links > .field:first-child input,
.eng-rechts > .field:last-child input,
.eng-links2 > .field:first-child input,
.eng-links2 > .field:nth-child(2) input{width:auto}
input:disabled,select:disabled,textarea:disabled{
  background:var(--card-2);color:var(--ink-2);border-color:var(--line-soft);
  opacity:1;cursor:default}
label{display:block;font-size:var(--fs-sm);font-weight:500;color:var(--ink-2);
  margin:0 0 var(--sp-1)}
.field{margin-bottom:var(--sp-3)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp-3)}

.datectl{
  display:inline-flex;align-items:center;gap:var(--sp-2);height:var(--h-ctl);
  padding:0 var(--sp-1) 0 10px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin:0;
}
.datectl>span{font-size:var(--fs-sm);font-weight:500;color:var(--ink-3);margin:0}
.datectl input{border:0;height:34px;padding:0 6px 0 0;background:transparent}
.datectl input:focus{outline:none}
.datectl:focus-within{border-color:var(--brand);outline:0}

button{cursor:pointer}
.btn,.ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:var(--h-ctl);padding:0 14px;border-radius:var(--r);
  font-size:var(--fs-base);font-weight:500;text-decoration:none;white-space:nowrap;
}
.btn{background:var(--brand);color:var(--on-brand);border:1px solid var(--brand)}
.btn:hover{filter:brightness(1.06)}
.ghost{background:var(--card);color:var(--ink-2);border:1px solid var(--line)}
.ghost:hover{background:var(--card-2);color:var(--ink)}
.ghost.on{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-text)}
.ghost.subtle{background:transparent;border-color:transparent;color:var(--ink-3);font-weight:400}
.ghost.subtle:hover{background:var(--card-2);border-color:var(--line);color:var(--ink-2)}
.ghost.subtle.on{background:var(--card-2);border-color:var(--line);color:var(--ink)}
.danger{color:var(--c-rot)}
.danger:hover{background:var(--c-rot-bg);border-color:var(--c-rot-l);color:var(--c-rot)}
.iconbtn{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:var(--h-ctl);height:var(--h-ctl);padding:0;
  background:var(--card);color:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r);
}
.iconbtn:hover{background:var(--card-2);color:var(--ink)}
.iconbtn svg{width:16px;height:16px}
.iconbtn.klein{width:30px;height:30px}
.iconbtn.klein svg{width:14px;height:14px}
.themebtn{width:100%;justify-content:center}
.themebtn svg{width:16px;height:16px}

/* ---------- Eigenes Auswahlfeld (farbige Pille) ---------- */
.dd{position:relative;display:inline-block}
.dd-btn{
  display:inline-flex;align-items:center;gap:6px;
  height:var(--h-pill);padding:0 8px 0 12px;border-radius:999px;
  font-family:var(--font);font-size:var(--fs-sm);font-weight:500;
  border:1px solid transparent;cursor:pointer;max-width:100%;
}
.dd-btn svg{width:14px;height:14px;opacity:.6;flex:none;transition:transform .15s}
.dd.offen .dd-btn svg{transform:rotate(180deg)}
.dd-btn .dd-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.dd-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.dd.schlicht .dd-btn:focus-visible{outline:0;border-color:var(--brand)}
/* schlichte Variante – gleiche Optik wie Buttons und Eingabefelder */
.dd.schlicht .dd-btn{
  height:var(--h-ctl);border-radius:var(--r);padding:0 8px 0 12px;gap:8px;
  background:var(--card);color:var(--ink);border:1px solid var(--line);
  font-size:var(--fs-base);font-weight:400;min-width:0;
}
.dd.schlicht .dd-btn:hover{background:var(--card-2);border-color:var(--line-strong,var(--line))}
.dd.schlicht.offen .dd-btn{border-color:var(--brand)}
.dd.schlicht .dd-btn svg{margin-left:auto}
.dd.schlicht[data-gesperrt] .dd-btn{
  background:var(--card-2);color:var(--ink-2);border-color:var(--line-soft);cursor:default}
.dd.schlicht[data-gesperrt] .dd-btn svg{opacity:.25}
.toolbar .dd.schlicht .dd-btn{min-width:150px}

.dd-menu{
  position:absolute;top:calc(100% + 6px);left:0;z-index:70;min-width:190px;
  max-width:min(360px,calc(100vw - 20px));
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lift);padding:var(--sp-1);
  animation:ddauf .13s ease-out;
}
.dd-liste{max-height:min(340px,60vh);overflow:auto;overscroll-behavior:contain}
.dd-suchzeile{padding:2px 2px var(--sp-1)}
.dd-suche{width:100%;height:32px;font-size:var(--fs-sm)}
.dd-suche::-webkit-search-cancel-button{cursor:pointer}
.dd-gruppe{
  padding:var(--sp-2) 10px var(--sp-1);font-size:var(--fs-xs,11px);font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.dd-gruppe:first-child{padding-top:var(--sp-1)}
.dd-leer{margin:0;padding:10px;color:var(--ink-3);font-size:var(--fs-sm);text-align:center}
.dd-opt-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-menu.hoch{top:auto;bottom:calc(100% + 6px)}
@keyframes ddauf{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.dd-opt{
  display:flex;align-items:center;gap:var(--sp-2);width:100%;
  padding:7px 10px;border:0;border-radius:var(--r-sm);background:none;
  font-family:var(--font);font-size:var(--fs-base);color:var(--ink);text-align:left;
}
.dd-opt:hover{background:var(--card-2)}
/* Markierung beim Blättern mit den Pfeiltasten */
.dd-opt.markiert{background:var(--card-2);box-shadow:inset 2px 0 0 var(--brand)}
.dd-opt.aktiv{font-weight:500}
.dd-opt .haken{margin-left:auto;opacity:0;display:inline-flex}
.dd-opt.aktiv .haken{opacity:1;color:var(--brand-text)}
.dd-opt .haken svg{width:14px;height:14px}
.dd-opt > svg{width:15px;height:15px;opacity:.7;flex:none}
.pkt{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block}
.f-grau{background:var(--c-grau-l)}       .f-neutral{background:var(--c-neutral-l)}
.f-gruen{background:var(--c-gruen)}       .f-blau{background:var(--c-blau)}
.f-orange{background:var(--c-orange)}     .f-gold{background:var(--c-gold)}
.f-lila{background:var(--c-lila)}         .f-braun{background:var(--c-braun)}
.f-beere{background:var(--c-beere)}       .f-rot{background:var(--c-rot)}
.f-leer{background:var(--line);}
/* im Formular volle Breite und Feldhöhe */
.field .dd{width:100%}
.field .dd-btn{width:100%;height:var(--h-ctl);border-radius:999px;justify-content:space-between}
.field .dd-btn .dd-text{flex:1}
.fixw .dd{width:100%}
.fixw .dd-btn{width:100%;justify-content:center;position:relative;padding:0 22px}
.fixw .dd-btn svg{position:absolute;right:7px}


/* ==== 04-bausteine.css ==== */
/* ---------- Statusfarben ---------- */
.tag{
  display:inline-flex;align-items:center;justify-content:center;
  height:24px;padding:0 10px;border-radius:999px;
  font-size:var(--fs-sm);font-weight:500;white-space:nowrap;
  border:1px solid transparent;
}
.t-grau,   .dd-btn.t-grau   {background:var(--c-grau-bg);   color:var(--c-grau);   border-color:var(--c-grau-l)}
.t-neutral,.dd-btn.t-neutral{background:var(--c-neutral-bg);color:var(--c-neutral);border-color:var(--c-neutral-l)}
.t-gruen,  .dd-btn.t-gruen  {background:var(--c-gruen-bg);  color:var(--c-gruen);  border-color:var(--c-gruen-l)}
.t-blau,   .dd-btn.t-blau   {background:var(--c-blau-bg);   color:var(--c-blau);   border-color:var(--c-blau-l)}
.t-orange, .dd-btn.t-orange {background:var(--c-orange-bg); color:var(--c-orange); border-color:var(--c-orange-l)}
.t-gold,   .dd-btn.t-gold   {background:var(--c-gold-bg);   color:var(--c-gold);   border-color:var(--c-gold-l)}
.t-lila,   .dd-btn.t-lila   {background:var(--c-lila-bg);   color:var(--c-lila);   border-color:var(--c-lila-l)}
.t-braun,  .dd-btn.t-braun  {background:var(--c-braun-bg);  color:var(--c-braun);  border-color:var(--c-braun-l)}
.t-beere,  .dd-btn.t-beere  {background:var(--c-beere-bg);  color:var(--c-beere);  border-color:var(--c-beere-l)}
.t-rot,    .dd-btn.t-rot    {background:var(--c-rot-bg);    color:var(--c-rot);    border-color:var(--c-rot-l)}
.t-leer,   .dd-btn.t-leer   {background:transparent;color:var(--ink-3);border-color:var(--line)}


/* ---------- Bausteine ---------- */
.page-head{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  margin-bottom:var(--sp-4)}
.page-head h1{margin-bottom:2px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-4)}
.card.highlight{background:var(--brand-soft);border-color:var(--brand-line)}
.card.clickable{cursor:pointer}
.card.clickable:hover{border-color:var(--brand-line);box-shadow:var(--shadow)}
.grid{display:grid;gap:var(--sp-3);align-items:start}
.stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:stretch}
/* Alle Kacheln gleich hoch: Zusatzzeile immer unten, auch wenn sie fehlt */
.stat{display:flex;flex-direction:column;height:100%}
.stat .n{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.stat .l{color:var(--ink-3);font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.08em;margin-top:2px}
.stat .sub{color:var(--ink-2);font-size:var(--fs-sm);margin-top:auto;padding-top:var(--sp-2);
  min-height:calc(var(--fs-sm) * 1.5)}
.cols2{grid-template-columns:1fr 1fr;align-items:start}
/* Ohne min-width:0 wachsen Rasterfelder auf die Breite ihres breitesten
   Kindes – ein einzelnes zu breites Element schiebt sonst die ganze Seite. */
.grid > *{min-width:0}
@media(max-width:900px){.cols2{grid-template-columns:1fr}}
.toolbar{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;
  margin-bottom:var(--sp-3)}

/* Hero / Uhr */
.hero{
  display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-4);border-radius:var(--r-lg);
  background:var(--card);border:1px solid var(--line);
}
.hero>div:first-child{flex:1;min-width:220px}
.hero-date{margin-top:var(--sp-1);font-size:var(--fs-lg);font-weight:500;
  color:var(--brand-text)}

/* Schnell-Eingabe */
.quickadd{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.quickadd input:first-child{flex:1;min-width:170px}
.quickadd.two{display:grid;grid-template-columns:minmax(120px,1fr) minmax(120px,1fr) auto}
.quickadd .dd.schlicht .dd-btn{min-width:150px}

/* ---------- Tabellen ---------- */
table{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
.table-wrap{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow-x:auto}
th{
  text-align:left;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-3);font-weight:500;padding:10px var(--sp-3);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
td{padding:9px var(--sp-3);border-bottom:1px solid var(--line-soft);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--card-2)}
td.nowrap,th.nowrap{white-space:nowrap}
td.nostretch,th.nostretch{width:1%}
th.mitte,td.mitte{text-align:center}
.kdnr{font-variant-numeric:tabular-nums;color:var(--ink-2);font-weight:500}
.empty{padding:var(--sp-6);text-align:center;color:var(--ink-3)}

/* gleich breite Status-/Typ-Spalten, zentriert */
.fixw{display:inline-flex;justify-content:center;width:158px}
.fixw .tag{width:100%}

.list-item{display:flex;gap:var(--sp-2);align-items:flex-start;
  padding:10px 0;border-bottom:1px solid var(--line-soft)}
.list-item:last-child{border-bottom:0}
.list-item .t{font-weight:500;text-decoration:none}


/* ==== 05-aufgaben.css ==== */
/* ---------- Aufgabenkarten ---------- */
.task{
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:var(--r);padding:10px var(--sp-3);margin-bottom:var(--sp-2);
}
.task.t-rand-grau  {border-left-color:var(--c-grau-l)}
.task.t-rand-gruen {border-left-color:var(--c-gruen)}
.task.t-rand-blau  {border-left-color:var(--c-blau)}
.task.t-rand-orange{border-left-color:var(--c-orange)}
.task.t-rand-lila  {border-left-color:var(--c-lila)}
.task.t-rand-gold  {border-left-color:var(--c-gold)}
.task.t-rand-rot   {border-left-color:var(--c-rot)}
.task.t-rand-braun {border-left-color:var(--c-braun)}
.task.t-rand-beere {border-left-color:var(--c-beere)}
.task.t-rand-neutral,.task.t-rand-leer{border-left-color:var(--c-neutral-l)}
/* Im Raster sorgt die Lücke des Rasters für den Abstand */
.grid > .task{margin-bottom:0}
.task:hover{box-shadow:var(--shadow)}
.task[draggable]{cursor:grab}

.task-top{display:flex;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-1)}
.task{cursor:pointer}
.task-title{font-weight:500;flex:1;line-height:1.35;min-width:0}
.task:hover .task-title{color:var(--brand-text)}
.task-desc{
  font-size:var(--fs-sm);color:var(--ink-3);line-height:1.45;margin:0 0 var(--sp-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.task-foot{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:nowrap;overflow:hidden}
.task-foot .trenner{color:var(--ink-3);flex:none;font-size:var(--fs-sm)}
.task-foot .bezug{
  font-size:var(--fs-sm);color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.task-foot .frist{font-size:var(--fs-sm);color:var(--ink-2);flex:none;white-space:nowrap}
.task-foot .frist.spaet{color:var(--c-rot);font-weight:500}

.board{display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start}
.col{background:var(--card-2);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:10px}
.col-head{display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-1) var(--sp-1) 10px;border-bottom:2px solid var(--line);
  margin-bottom:10px}
.col-head.t-rand-grau  {border-bottom-color:var(--c-grau-l)}
.col-head.t-rand-gruen {border-bottom-color:var(--c-gruen)}
.col-head.t-rand-orange{border-bottom-color:var(--c-orange)}
.col-head.t-rand-lila  {border-bottom-color:var(--c-lila)}
.col-head.t-rand-blau  {border-bottom-color:var(--c-blau)}
.col-head.t-rand-gold  {border-bottom-color:var(--c-gold)}
.col-head.t-rand-rot   {border-bottom-color:var(--c-rot)}
.col-head.t-rand-braun {border-bottom-color:var(--c-braun)}
.col-head.t-rand-beere {border-bottom-color:var(--c-beere)}
.col-head.t-rand-neutral,.col-head.t-rand-leer{border-bottom-color:var(--c-neutral-l)}
.col-head h2{font-size:var(--fs-base);font-weight:500;flex:1}
.col-head .colplus{margin-left:var(--sp-1);opacity:.45;background:transparent;border-color:transparent}
.col-head:hover .colplus{opacity:1}
.col-head .colplus:hover{background:var(--card);border-color:var(--line);color:var(--brand-text)}
.col-body{min-height:64px;border-radius:var(--r)}

/* ---------- Unteraufgaben ---------- */
.sub{display:flex;align-items:center;gap:var(--sp-2);padding:7px 0;
  border-bottom:1px solid var(--line-soft)}
.sub:last-of-type{border-bottom:0}
.sub .check{
  width:20px;height:20px;flex:none;padding:0;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--card);
  display:inline-flex;align-items:center;justify-content:center;color:transparent;
}
.sub .check:hover{border-color:var(--brand)}
.sub .check.done{background:var(--c-gruen);border-color:var(--c-gruen);color:#fff}
.sub .check svg{width:13px;height:13px}
.sub .txt{flex:1;min-width:0;cursor:text;padding:3px 6px;margin-left:-6px;border-radius:var(--r-sm)}
.sub .txt:hover{background:var(--card-2)}
.sub .subedit{flex:1;min-width:0;height:30px;padding:0 6px}
.sub .iconbtn.klein{opacity:0;transition:opacity .12s}
.sub:hover .iconbtn.klein,.sub:focus-within .iconbtn.klein{opacity:1}
.sub.erledigt .txt{text-decoration:line-through;color:var(--ink-3)}
.fortschritt{font-size:var(--fs-sm);color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ---------- Kommentare ---------- */
/* ---------- Kommentare: schlank, ohne Kästen ---------- */
.komm{
  position:relative;display:flex;gap:var(--sp-2);align-items:flex-start;
  padding:var(--sp-2) 0;border:0;
}
.komm .avatar.mini{margin-top:1px;flex:0 0 auto}
.komm-body{flex:1;min-width:0}
.komm-kopf{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap}
.komm-kopf .wer{font-weight:600;font-size:var(--fs-base)}
.komm-kopf .wann{font-size:var(--fs-sm);color:var(--ink-3)}
.komm-text{
  margin-top:2px;padding-left:var(--sp-1);
  white-space:pre-wrap;line-height:1.5;font-size:var(--fs-base);overflow-wrap:anywhere;
}
.komm-text a{color:var(--brand-text);text-decoration:underline;text-underline-offset:2px}
/* Antworten stehen unter ihrem Ursprung, aber nur eine Ebene tief */
.komm.antwort{margin-left:var(--sp-5);padding-left:var(--sp-3);border-left:2px solid var(--line)}
/* Aktionen erscheinen erst, wenn man über der Zeile steht */
.komm-aktionen{
  display:flex;gap:2px;flex:0 0 auto;align-self:center;
  opacity:0;transition:opacity .12s ease-out;
}
.komm:hover .komm-aktionen,
.komm:focus-within .komm-aktionen{opacity:1}
@media (hover:none){ .komm-aktionen{opacity:1} }
@media (prefers-reduced-motion:reduce){ .komm-aktionen{transition:none} }
.komm-antwortauf{
  display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3);
  padding:6px 6px 6px 10px;border-radius:var(--r-sm);
  background:var(--brand-soft);color:var(--brand-text);font-size:var(--fs-sm);
}
.komm-antwortauf span{flex:1}


/* Dashboard „Offene Aufgaben“: ab morgen etwas blasser – der Blick bleibt bei Überfälligem und Heute (0.48.0) */
.task.spaeter{opacity:.62;
  transition:box-shadow .16s ease-out, transform .16s ease-out, border-color .16s ease-out, opacity .16s ease-out}   /* alles zusammen, sonst fällt das Anheben aus der Übergangsliste von 47-dynamik.css */
.task.spaeter:hover,.task.spaeter:focus-within{opacity:1}

/* ==== 06-notizen-drawer.css ==== */
/* ---------- Notizen ---------- */
.note{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:10px var(--sp-3);margin-bottom:var(--sp-2);cursor:pointer}
.note:hover{border-color:var(--brand-line)}
.note-head{display:flex;justify-content:space-between;gap:var(--sp-2);
  align-items:center;margin-bottom:var(--sp-1)}
.note-meta{display:inline-flex;align-items:center;gap:var(--sp-2);flex:none}
.notecard{cursor:pointer;display:flex;flex-direction:column;gap:var(--sp-2)}
.notecard:hover{border-color:var(--brand-line);box-shadow:var(--shadow)}
.notetext{margin:0;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5}
.prose{white-space:pre-wrap;line-height:1.6;font-size:var(--fs-md)}

/* Ansichtsumschalter */
.viewswitch{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;height:var(--h-ctl)}
.viewswitch button{
  display:inline-flex;align-items:center;gap:6px;height:100%;padding:0 12px;
  background:var(--card);color:var(--ink-3);border:0;
  border-right:1px solid var(--line);font-size:var(--fs-base);font-weight:400;
}
.viewswitch button:last-child{border-right:0}
.viewswitch button:hover{background:var(--card-2);color:var(--ink-2)}
.viewswitch button.on{background:var(--brand-soft);color:var(--brand-text);font-weight:500}
.viewswitch svg{width:15px;height:15px}

/* ---------- Drawer ---------- */
#drawer{position:fixed;inset:0;z-index:60}
.drawer-backdrop{position:absolute;inset:0;background:rgba(20,17,14,.4)}
.drawer-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(640px,100%);
  background:var(--bg);border-left:1px solid var(--line);
  overflow-y:auto;padding:var(--sp-5) var(--sp-5) var(--sp-6);box-shadow:var(--shadow-lift);
}
.drawer-head{display:flex;gap:var(--sp-2);align-items:flex-start;margin-bottom:var(--sp-4)}
.drawer-head .ueber{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-1);
  min-height:20px}
.drawer-head h1{margin-bottom:2px}
.drawer-head .ghost,.drawer-head .iconbtn{flex:none}
.drawer-panel{width:min(720px,100%)}
.section{margin-top:var(--sp-5)}
/* Karten in der Seitenansicht kleben nie aneinander (09.10.2026) */
#drawerPanel > * + .card{margin-top:var(--sp-4)}
.section>h3{margin-bottom:var(--sp-2);color:var(--ink-2);
  font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.07em;font-weight:500}
.kv{display:grid;grid-template-columns:120px 1fr;gap:var(--sp-2) var(--sp-3);
  font-size:var(--fs-base);margin:0}
.kv dt{color:var(--ink-3);font-size:var(--fs-sm);padding-top:1px}
.kv dd{margin:0;word-break:break-word}
.hinweis{
  background:var(--card-2);border:1px solid var(--line);
  border-left:3px solid var(--c-gold);border-radius:var(--r);
  padding:10px var(--sp-3);font-size:var(--fs-sm);color:var(--ink-2);
  margin-bottom:var(--sp-3);
}
.aktionen{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}


/* ---------- Seitenansicht: schmal (Standard) oder Vollbild ----------
   Der Knopf oben rechts schaltet um; die Wahl merkt sich der Browser.
   Im Vollbild bleibt das Seitenmenü links stehen – die Ansicht nimmt den
   ganzen Rest ein, genau wie eine normale Seite. */
/* Umgeschaltet wird nur die Breite des Panels – der Rahmen #drawer bleibt
   immer über dem ganzen Fenster. Verschöbe man stattdessen seine linke Kante,
   spränge sie beim Zuklappen ohne Übergang zurück auf 0: das Panel wäre einen
   Wimpernschlag über die volle Bildschirmbreite gezogen und würde erst danach
   auf seine Breite schrumpfen. Genau das sah man vorher als Ruckler. */
.drawer-panel{transition:width .18s ease-out}
#drawer[data-voll] .drawer-panel{
  width:calc(100% - var(--nav-w));
  border-left:0;
  padding:var(--sp-5) var(--sp-5) var(--sp-6);
}
/* Im Vollbild liegt der Rahmen zwar über dem Seitenmenü, lässt Klicks aber
   hindurch – sonst wäre die Navigation blockiert. */
#drawer[data-voll]{pointer-events:none}
#drawer[data-voll] .drawer-panel{pointer-events:auto}
#drawer[data-voll] .drawer-backdrop{
  left:var(--nav-w);background:transparent;pointer-events:auto;
}

@media (prefers-reduced-motion:reduce){ .drawer-panel{transition:none} }

/* Auf schmalen Bildschirmen füllt die Ansicht ohnehin alles aus */
@media (max-width:900px){
  .drawer-head .nurbreit{display:none}
  #drawer[data-voll] .drawer-panel{width:100%}
  #drawer[data-voll] .drawer-backdrop{left:0}
}

/* Seitenansichten (0.49.0): kein großer weißer Kasten um die Felder und Felder ohne Rahmen – nur weiße Fläche,
   der Rahmen kommt erst wieder beim Offenhalten/Fokus (orange). Farbige Pillen (Status in Listen) bleiben wie sie sind. */
:root #drawerPanel > .card{background:none;border:0;box-shadow:none;padding:0;border-radius:0}
:root #drawerPanel input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color])),
:root #drawerPanel textarea,
:root #drawerPanel select,
:root #drawerPanel .dd.schlicht .dd-btn{border-color:transparent}
:root #drawerPanel .dd.schlicht .dd-btn:hover{border-color:transparent}
:root #drawerPanel input:focus:focus,:root #drawerPanel textarea:focus,:root #drawerPanel select:focus,
:root #drawerPanel .dd.schlicht.offen .dd-btn{border-color:var(--brand)}

/* Auch ohne Rahmen (0.49.1): Eingabekapseln, Datumsfeld, Textfeld mit Leiste, Kunden-Chat-Verlauf; Status-Pillen auf den Dashboard-Karten */
:root #drawerPanel .sk-feld,:root #drawerPanel .dfeld,:root #drawerPanel .dfeld:hover,
:root #drawerPanel .editor,:root #drawerPanel .kundenchat .kchat-verlauf{border-color:transparent}
:root #drawerPanel .sk-feld:focus-within,:root #drawerPanel .dfeld:focus-within,:root #drawerPanel .dfeld.offen,
:root #drawerPanel .editor:focus-within{border-color:var(--brand)}
:root .dash-grid .task .dd-btn{border-color:transparent}

/* Unteraufgabe umbenennen (0.50.0): sieht aus wie beim Drüberfahren; beim Schreiben leicht weiß mit ganz leichtem orangenem Rand */
:root #drawerPanel .sub .subedit{background:var(--card-2);border:1px solid transparent;border-radius:var(--r-sm);height:30px;padding:0 6px;
  transition:background-color .2s ease,border-color .2s ease}
:root #drawerPanel .sub .subedit:focus{background:var(--card);border-color:var(--brand-line);outline:0}

/* Beschreibungs-Editor in der Seitenansicht: keine weiße Kante um die graue Leiste – nur die Schreibfläche ist weiß (0.50.1) */
:root #drawerPanel .editor{background:none}
:root #drawerPanel .editor-flaeche{background:var(--card)}

/* Chat mit dem Kunden: Verlauf oben so rund wie die Eingabekapsel darunter (0.50.2) */
:root #drawerPanel .kundenchat .kchat-verlauf{border-radius:var(--sk-r-klein,22px)}

/* ==== 07-wissen-editor.css ==== */
/* ---------- Wissen ---------- */
.md{font-size:var(--fs-md)}
.md h1{font-size:var(--fs-xl);margin:var(--sp-4) 0 var(--sp-2)}
.md h2{font-size:var(--fs-lg);margin:var(--sp-4) 0 var(--sp-1)}
.md h3{font-size:var(--fs-md);margin:var(--sp-3) 0 var(--sp-1)}
.md p{margin:var(--sp-2) 0}
.md ul,.md ol{margin:var(--sp-2) 0;padding-left:22px}
.md li{margin:3px 0}
.md code{background:var(--card-2);padding:1px 5px;border-radius:var(--r-sm);
  font-size:var(--fs-sm)}
.md table{margin:10px 0;border:1px solid var(--line);border-radius:var(--r)}
.md td,.md th{border:1px solid var(--line-soft)}

/* ---------- Text-Editor ---------- */
.editor{border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden}
.editor:focus-within{border-color:var(--brand);outline:0}
.editor-bar{
  display:flex;align-items:center;gap:2px;flex-wrap:wrap;
  padding:var(--sp-1) var(--sp-1);border-bottom:1px solid var(--line);background:var(--card-2);
}
.editor-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:28px;border:0;border-radius:var(--r-sm);
  background:none;color:var(--ink-2);
}
.editor-btn:hover{background:var(--card);color:var(--ink)}
.editor-btn svg{width:15px;height:15px}
.editor-trenner{width:1px;height:18px;background:var(--line);margin:0 var(--sp-1)}
.editor-flaeche{
  padding:10px 12px;font-size:var(--fs-base);line-height:1.6;outline:none;
  overflow-y:auto;max-height:420px;
}
.editor-flaeche:empty::before{content:attr(data-leer);color:var(--ink-3)}
.editor-flaeche p{margin:0 0 var(--sp-2)}
.editor-flaeche ul,.editor-flaeche ol{margin:var(--sp-2) 0;padding-left:22px}
.editor-flaeche li{margin:2px 0}
.editor-flaeche a{color:var(--brand-text);text-decoration:underline}


/* ==== 08-einstellungen.css ==== */
/* ---------- Bereiche links, Inhalt rechts ----------
   Gleiche Sprache wie die Rollenliste darunter: schmale Spalte, die
   mitscrollt, und eine ruhige Inhaltsspalte, in der alles untereinander
   steht statt nebeneinander. */
.einstlayout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--sp-4);align-items:start}
/* Breiter als bei 16:9 werden die Einstellungen nicht (21:9 / 32:9): so breit wie
   bei der normalen Höchstbreite von #view (1680 px minus Rand). */
.einstlayout{max-width:1652px}
/* Ohne min-width:0 sprengt eine breite Tabelle die Spalte, statt in ihrem
   eigenen Rahmen zu scrollen – der Knopf rechts wäre dann abgeschnitten. */
#einstInhalt{min-width:0}
.einstnav{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-2);position:sticky;top:76px;display:flex;flex-direction:column;
}
.einstnav button{
  display:flex;align-items:center;gap:var(--sp-2);width:100%;margin-bottom:2px;
  padding:9px 10px;border:1px solid transparent;border-radius:var(--r);
  background:none;font-family:var(--font);font-size:var(--fs-base);
  color:var(--ink-2);text-align:left;
}
.einstnav button svg{width:16px;height:16px;flex:none;opacity:.7}
.einstnav button .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.einstnav button:hover{background:var(--card-2);color:var(--ink)}
.einstnav button.on{
  background:var(--brand-soft);border-color:var(--brand-line);
  color:var(--brand-text);font-weight:500;
}
.einstnav button.on svg{opacity:1}

/* Rechts steht alles untereinander – die Karten sind schon schmaler,
   zwei Spalten darin würden nur quetschen. */
#einstInhalt > .grid.cols2{grid-template-columns:1fr}
#einstInhalt > .card,
#einstInhalt > .grid{margin-bottom:0}

@media (max-width:900px){
  .einstlayout{grid-template-columns:1fr}
  .einstnav{position:static;flex-direction:row;flex-wrap:wrap;padding:var(--sp-1)}
  .einstnav button{width:auto;margin-bottom:0}
}

/* ---------- Einstellungen ---------- */
.optzeile{display:flex;align-items:center;gap:var(--sp-2);padding:5px 0;
  border-bottom:1px solid var(--line-soft)}
.optzeile:last-child{border-bottom:0}
.optzeile .optname{flex:1;min-width:0;height:32px}
.optzeile .optfarbe{width:132px;flex:none}
.optzeile .optfarbe .dd-btn{width:100%;height:32px}
.optzeile .iconbtn.klein{opacity:.35}
.optzeile:hover .iconbtn.klein{opacity:1}
.optzeile span.iconbtn{cursor:default;background:transparent;border-color:transparent}

/* ---------- Rollen ----------
   Übersicht und Rechtevergabe sind zwei Ansichten hintereinander, nicht zwei
   Spalten nebeneinander: die Rechteliste ist zu lang für eine halbe Breite. */
.rollenkarten{display:flex;flex-direction:column}
.rollenzeile{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-1);border-bottom:1px solid var(--line-soft);
}
.rollenzeile:last-child{border-bottom:0}
.rollenzeile .t{display:flex;align-items:center;gap:6px;font-weight:500}
.rollenzeile small{display:block;font-size:var(--fs-sm)}
.rollenzeile .schlosssymbol{display:inline-flex;opacity:.45}
.rollenzeile .schlosssymbol svg{width:14px;height:14px}
.rollenzeile .ghost{flex:none}

.zurueckzeile{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  margin-bottom:var(--sp-3);
}
/* .btn/.ghost geben Symbolen keine Größe – ohne das rutscht das SVG auf
   seine Standardgröße und sprengt den Knopf. */
.zurueckzeile .ghost svg,.rollenkarten + .quickadd .ghost svg{
  width:15px;height:15px;flex:none;
}
.zurueckzeile .ghost,.rollenkarten + .quickadd .ghost{
  display:inline-flex;align-items:center;gap:6px;
}

.rollendetail{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-4)}
.rollenkopf{display:flex;gap:var(--sp-3);align-items:flex-end;margin-bottom:var(--sp-4)}
.rechtegruppe{border-top:1px solid var(--line-soft);padding-top:var(--sp-3);margin-top:var(--sp-3)}
.rechtegruppe:first-of-type{border-top:0;margin-top:0}
.rechtegruppe h3{margin-bottom:var(--sp-1);font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-3);font-weight:600}
.rechtegruppe > .muted.small{margin:0 0 var(--sp-3)}
.schalter.recht{align-items:flex-start;margin-bottom:var(--sp-3)}
.schalter.recht .schieber{margin-top:2px}
.schalter.recht small{display:block;line-height:1.4}
.schalter.recht.geerbt{opacity:.55;cursor:default}


.schalter{display:flex;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-3);cursor:pointer}
.schalter input{position:absolute;opacity:0;width:0;height:0}
.schalter .schieber{
  position:relative;width:40px;height:23px;border-radius:999px;flex:none;
  background:var(--line);transition:background .16s;
}
.schalter .schieber::after{
  content:'';position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;
  background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .16s;
}
.schalter input:checked + .schieber{background:var(--brand)}
.schalter input:checked + .schieber::after{transform:translateX(17px)}
.schalter input:focus-visible + .schieber{outline:2px solid var(--brand);outline-offset:2px}
.schalter > span:last-child{display:flex;flex-direction:column;line-height:1.35}
.schalter small{font-size:var(--fs-sm)}
.schalter.nur-box{margin:0;justify-content:center}

.mit-einheit{display:flex;align-items:center;gap:var(--sp-2)}
.mit-einheit input{width:90px}
.mit-einheit span{color:var(--ink-3);font-size:var(--fs-sm)}
.field small{display:block;margin-top:var(--sp-1);font-size:var(--fs-sm)}
code{background:var(--card-2);padding:1px 5px;border-radius:var(--r-sm);font-size:var(--fs-sm)}
.avatar[style*="--av"]{background:color-mix(in srgb,var(--av) 15%,transparent);
  color:var(--av);border-color:color-mix(in srgb,var(--av) 40%,transparent)}

/* Ausklappbares Archiv */
.klapp summary{
  cursor:pointer;font-size:var(--fs-sm);color:var(--ink-3);
  padding:var(--sp-2) 0;list-style:none;display:flex;align-items:center;gap:6px;
}
.klapp summary::-webkit-details-marker{display:none}
.klapp summary::before{content:'▸';transition:transform .15s;display:inline-block}
.klapp[open] summary::before{transform:rotate(90deg)}
.klapp summary:hover{color:var(--ink-2)}


/* ---------- Kundenbereich: Sichtbarkeitsregler ---------- */
/* Drei Zustände in einem Regler: „folgt dem Standard" ist der Ruhezustand,
   ein Klick macht daraus eine ausdrückliche Entscheidung. */
.sichtfeld{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3);border:1px solid var(--line-soft);border-radius:var(--r);
  background:var(--card-2);
}
.sichtfeld .schalter{flex:1;min-width:0}
.sichtfeld .ghost.klein{flex:none}
.sichtfeld.folgt .schieber{opacity:.6}

/* Übersicht der Kundenzugänge im Einstellungsreiter (02.10.2026: eigene Kacheln
   mit Abstand, Ampel vorne, klare Knöpfe). Zwischen zwei Zeilen steht ein
   verborgenes .kundeneinst – darum Abstand per Flex-gap, nicht per „+“. */
#portalKunden{display:flex;flex-direction:column;gap:10px}
#portalKunden > .kundeneinst > .card{margin:0 !important}
.zugangzeile{display:flex;align-items:center;gap:var(--sp-3);padding:12px var(--sp-3) 12px var(--sp-4);
  border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);
  transition:border-color .15s,box-shadow .15s}
.zugangzeile:hover{border-color:var(--brand-line);box-shadow:0 6px 18px -14px rgba(0,0,0,.35)}
.zugangzeile .kdnr{font-variant-numeric:tabular-nums;color:var(--ink-3);
  font-size:var(--fs-sm);flex:none;width:62px}
.zugangzeile .t{font-weight:600;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.zugangzeile .aktionen{display:flex;gap:6px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.zugangzeile.ohne .t{color:var(--ink-2)}
.zugangzeile .grow{min-width:0}
.zugangzeile .zk-grund{margin-top:2px;color:color-mix(in srgb,var(--c-orange) 80%,var(--ink));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zugangzeile.ampel-rot .zk-grund{color:var(--c-rot)}
.zk-marke{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:999px;
  background:var(--card-2);color:var(--ink-2);font-size:11.5px;font-weight:500}
.zk-marke svg{width:12px;height:12px}

/* Ampel */
.ampel{flex:none;width:12px;height:12px;border-radius:50%;background:var(--amp, var(--c-grau));
  box-shadow:0 0 0 4px color-mix(in srgb, var(--amp, var(--c-grau)) 18%, transparent)}
.ampel-gruen{--amp:var(--c-gruen)}
.ampel-orange{--amp:var(--c-orange)}
.ampel-rot{--amp:var(--c-rot)}
.ampel-legende{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-3)}
.ampel-chip{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 10px;
  border-radius:999px;background:var(--card-2);font-size:var(--fs-sm);color:var(--ink-2)}
.ampel-chip .ampel{width:9px;height:9px;box-shadow:0 0 0 3px color-mix(in srgb, var(--amp) 18%, transparent)}
.ampel-chip b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* Knöpfe in der Zeile: Symbol + Text, als Pille wie überall */
.zk-knopf{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--ink-2);font:inherit;
  font-size:var(--fs-sm);font-weight:500;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s}
.zk-knopf svg{width:15px;height:15px;flex:none}
.zk-knopf:hover{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-text)}
.zk-knopf.haupt{background:var(--brand);border-color:transparent;color:var(--on-brand);font-weight:600}
.zk-knopf.haupt:hover{filter:brightness(1.06);color:var(--on-brand);background:var(--brand)}
.zk-knopf.nur-icon{width:34px;padding:0;justify-content:center}
.zk-knopf.nur-icon svg{width:16px;height:16px}

@media (max-width:1100px){
  .zugangzeile{flex-wrap:wrap}
  .zugangzeile .grow{flex:1 1 200px}
  .zugangzeile .aktionen{flex:1 1 100%;justify-content:flex-start;padding-left:calc(12px + 62px + 2 * var(--sp-3))}
}
@media (max-width:640px){
  .zugangzeile{padding:12px}
  .zugangzeile .aktionen{padding-left:0}
  .zk-knopf:not(.haupt):not(.nur-icon) span{display:none}
  .zk-knopf:not(.haupt){width:38px;height:38px;padding:0;justify-content:center}
  .zk-knopf.haupt{height:38px}
}

/* Änderungswunsch – der auffälligste Zustand, den ein Beitrag haben kann */
.wunschkasten{
  border:1px solid var(--c-rot-l);border-left:4px solid var(--c-rot);
  background:var(--c-rot-bg);border-radius:var(--r);
  padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-3);
}
.wunschkasten .kopf{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--c-rot)}
.wunschkasten .kopf svg{width:16px;height:16px;flex:none}
.wunschkasten .text{margin-top:6px;white-space:pre-line}
.wunschkasten .wann{font-size:var(--fs-sm);color:var(--ink-3);margin-top:6px}
/* Nachrichten, die der Kunde im Kundenbereich geschrieben hat */
.kundenpost{
  border:1px solid var(--brand-line);border-left:4px solid var(--brand);
  background:var(--brand-soft);border-radius:var(--r);
  padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-3);
}
.kundenpost .kopf{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--brand-text)}
.kundenpost .kopf svg{width:16px;height:16px;flex:none}
.kundenpost .zeile{margin-top:var(--sp-2)}
.kundenpost .text{white-space:pre-line}
.kundenpost .wann{font-size:var(--fs-sm);color:var(--ink-3);margin-top:2px}
/* Chat mit dem Kunden – im Beitrag und in der Aufgabe aus dem Änderungswunsch */
.kundenchat .kchat-verlauf{
  display:flex;flex-direction:column;gap:var(--sp-2);
  max-height:340px;overflow:auto;padding:var(--sp-3);
  border:1px solid var(--line);border-radius:var(--r);background:var(--card-2);
}
.kchat-zeile{display:flex;flex-direction:column;gap:3px;max-width:82%}
.kchat-zeile.vom-kunden{align-self:flex-start;align-items:flex-start}
.kchat-zeile.von-uns{align-self:flex-end;align-items:flex-end}
.kchat-kopf{font-size:var(--fs-xs);color:var(--ink-3)}
.kchat-blase{
  padding:8px 12px;border-radius:var(--r-sm);white-space:pre-line;line-height:1.5;
  background:var(--card);border:1px solid var(--line);
}
.kchat-zeile.von-uns .kchat-blase{background:var(--brand-soft);border-color:var(--brand-line)}
.kchat-blase.wunsch{border-color:var(--c-rot-l);background:var(--c-rot-bg)}
.kchat-notiz{align-self:center;font-size:var(--fs-sm);color:var(--c-gruen)}
.kchat-neu{margin-top:var(--sp-2)}
@media (max-width:640px){
  .kchat-zeile{max-width:100%}
}

.wunschmarke{
  display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:600;
  color:var(--c-rot);background:var(--c-rot-bg);border-radius:999px;padding:2px 8px;
}
.wunschmarke svg{width:13px;height:13px;flex:none}

/* ---------- Selbstprüfung des Kundenbereichs ---------- */
.befunde{display:flex;flex-direction:column;gap:6px;margin-top:var(--sp-3)}
.befund{display:flex;gap:var(--sp-3);align-items:flex-start;
  padding:8px var(--sp-3);border-radius:var(--r);background:var(--card-2)}
.befund .zeichen{flex:none;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff}
.befund.ok .zeichen{background:var(--c-gruen)}
.befund.warnung .zeichen{background:var(--c-gold)}
.befund.fehler .zeichen{background:var(--c-rot)}

.avatar-modal{max-width:360px;text-align:center}
.avatar-crop{
  position:relative;width:240px;height:240px;margin:0 auto;overflow:hidden;
  border-radius:50%;background:var(--card-2);border:1px solid var(--line);
  cursor:grab;touch-action:none;
}
.avatar-crop:active{cursor:grabbing}
.avatar-crop img{position:absolute;top:0;left:0;transform-origin:0 0;
  user-select:none;-webkit-user-drag:none;pointer-events:none}
.befund.fehler{background:var(--c-rot-bg)}

/* ---- Verbindungen (Dropbox) ---- */
.vb-karte{display:grid;gap:var(--sp-3);max-width:820px}
.vb-kopf{display:flex;align-items:center;gap:var(--sp-3)}
.vb-logo{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#0061fe;color:#fff;flex:none}
.vb-stand{font-size:var(--fs-xs);font-weight:600;padding:4px 10px;border-radius:999px;background:var(--card-2);color:var(--ink-3)}
.vb-stand.an{background:var(--c-gruen-bg, #e6f4ea);color:var(--c-gruen, #2e7d4f)}
.vb-zeile{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.vb-schritte{margin:0;padding-left:22px;display:grid;gap:var(--sp-3);color:var(--ink-2)}
.vb-schritte li > span{display:block}
.vb-schritte code{font-size:var(--fs-xs);background:var(--card-2);padding:1px 6px;border-radius:6px}
.vb-kopie{display:flex;align-items:center;gap:var(--sp-2);margin-top:6px;flex-wrap:wrap}
.vb-kopie code{font-size:var(--fs-sm);padding:6px 10px;user-select:all;word-break:break-all}
.vb-form{display:flex;gap:var(--sp-2);margin-top:6px;flex-wrap:wrap}
.vb-form input{flex:1;min-width:200px;margin:0}
.vb-ohne summary{cursor:pointer}
/* 0.22.0: „Zurück“ dorthin, wo man vor den Einstellungen war */
.einst-zurueck{margin:0 0 var(--sp-1) calc(-1 * var(--sp-2))}

/* Bereichs-Überschriften in der linken Liste (nur Desktop) */
.einst-gruppe{display:block;padding:var(--sp-3) var(--sp-3) var(--sp-1);font-size:var(--fs-sm);font-weight:600;color:var(--muted)}
.einst-gruppe:first-child{padding-top:0}
@media (max-width:900px){ .einst-gruppe{display:none} }

/* ==== 09-rueckmeldung.css ==== */
/* ---------- Konfetti ---------- */
#konfetti{
  position:fixed;inset:0;z-index:100;pointer-events:none;
}

/* ---------- Toast: Aussehen kommt aus der Vorlage 72-hinweis-unten.css ---------- */


/* ==== 10-mobil.css ==== */
/* ---------- Mobil ---------- */
@media(max-width:860px){
  .only-mobile{display:inline-flex !important}
  #nav{transform:translateX(-100%);transition:transform .18s ease;
    box-shadow:var(--shadow-lift)}
  body.nav-open #nav{transform:none}
  main{margin-left:0}
  #view,#topbar{padding-left:var(--sp-3);padding-right:var(--sp-3)}
  .row2,.row3,.quickadd.two,
  .row2.eng-links,.row2.eng-rechts,.row3.eng-links2{grid-template-columns:1fr}
  /* Untereinander: Abstand nur vom Feld – sonst doppelt (Feldrand + Rasterlücke) */
  .row2,.row3{row-gap:0}
  .row2 > .field:not(:last-child),.row3 > .field:not(:last-child){margin-bottom:var(--sp-3) !important}
  .eng-links > .field input,.eng-rechts > .field input,
  .eng-links2 > .field input{width:100%}
  .drawer-panel{padding:var(--sp-4) var(--sp-4) var(--sp-6)}
  .kv{grid-template-columns:100px 1fr}
  .hero{align-items:flex-start}
  .quickadd input,.quickadd select,.quickadd button{flex:1 1 140px}
  /* Profil bleibt bedienbar – nur kompakt: Kürzel plus Pfeil */
  .userbox #userSel .dd-text{display:none}
  .userbox #userSel .dd-btn{padding:0 6px;min-width:0}
  .userbox #userSel .dd-btn .pkt{margin-left:2px}
  .userbox{border-left:0;padding-left:0;gap:var(--sp-1)}
  .logo{display:none}
  .search input{font-size:var(--fs-base)}
  .toolbar .spacer{display:none}
  .toolbar .ghost.subtle{border-color:var(--line)}
}


/* ==== 20-kalender.css ==== */
/* ---------- Kalender ---------- */
.kalkopf{align-items:center;container-type:inline-size}
/* Schmal: Monat/Woche/Tag → M/W/T, Liste → nur Symbol (Kapsel zieht über ResizeObserver in 82-reiter.js nach) */
@container (max-width: 900px){
  :root .kalkopf .al-voll{display:none}
  :root .kalkopf .al-kurz{display:inline-flex;align-items:center}
  :root .kalkopf #ktNeu{min-width:40px;padding-inline:0;justify-content:center}
}
.kaltitel{font-size:var(--fs-lg);font-weight:500;margin-left:var(--sp-2)}
/* Termin: Datum · von · bis · Ganztägig in einer Zeile. Ganztägig: Uhrzeit und „bis“-Datum liegen übereinander
   und blenden nur über (Deckkraft + leichtes Gleiten) – die Zeile selbst ändert ihre Breite nicht, nichts ruckelt */
.kt-zeitzeile{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2)}
.kt-zeitzeile > input,.kt-zeitzeile > .dfeld{flex:0 1 170px;min-width:140px}
.kt-zz-wort{color:var(--ink-2);font-size:var(--fs-sm)}
.kt-zz-wechsel{display:grid;align-items:center;flex:none}
.kt-zz-teil .dfeld{flex:none;max-width:none}      /* sonst schrumpft das Feld im Raster auf 20 px (max-width:100 %) */
.kt-zz-teil{grid-area:1/1;display:inline-flex;align-items:center;gap:var(--sp-2);white-space:nowrap;
  transition:opacity .26s ease .1s,transform .34s var(--weich, ease) .1s,visibility 0s 0s}
.kt-zz-zeit .dfeld,.kt-zz-zeit > input{width:120px}
:root .kt-zz-bis .dfeld,.kt-zz-bis > input{width:170px}   /* so breit wie das Startdatum */
.kt-zeitzeile:not(.ganz) .kt-zz-bis,.kt-zeitzeile.ganz .kt-zz-zeit{opacity:0;transform:translateX(-10px);visibility:hidden;pointer-events:none;
  transition:opacity .16s ease,transform .16s ease,visibility 0s .16s}
.kt-zeitzeile .schalter{margin:0 0 0 auto;flex:none}   /* bricht bei schmaler Seitenansicht um, statt unter die Zeit zu rutschen */
.kt-senden{display:flex;justify-content:flex-end;margin-top:var(--sp-3)}
.kt-senden[hidden]{display:none}
@media (prefers-reduced-motion: reduce){.kt-zz-teil{transition:none !important}}
.kalender{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;
}
.kalkopfzeile,.kalwoche{display:grid;grid-template-columns:34px repeat(7,1fr)}
.kalkopfzeile{
  background:var(--card-2);border-bottom:1px solid var(--line);
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);
  font-weight:600;
}
.kalkopfzeile > *{padding:var(--sp-2) var(--sp-2);text-align:center}
.kalkw{
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-xs);color:var(--ink-3);background:var(--card-2);
  border-right:1px solid var(--line);font-variant-numeric:tabular-nums;
}
.kaltag{
  height:112px;padding:4px;border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:2px;
  cursor:pointer;transition:background .12s;overflow:hidden;
}
.kalliste{display:flex;flex-direction:column;gap:2px;min-height:0;overflow:hidden}
.kaltag:hover{background:var(--card-2)}
.kaltag:last-child{border-right:0}
.kalwoche:last-child .kaltag{border-bottom:0}
.kaltag.fremd{background:color-mix(in srgb,var(--card-2) 55%,transparent);opacity:.6}
.kalnr{
  font-size:var(--fs-sm);color:var(--ink-2);font-variant-numeric:tabular-nums;
  padding:2px 4px;align-self:flex-start;line-height:1.2;flex:none;
  border-radius:999px;min-width:22px;text-align:center;
}
.kalnr:hover{background:var(--card-2);color:var(--ink)}
.kaltag.heute .kalnr{
  background:var(--brand);color:var(--on-brand);border-radius:999px;
  min-width:22px;text-align:center;font-weight:600;
}
.kaleintrag{
  display:flex;align-items:center;gap:5px;width:100%;
  padding:2px 6px;border:1px solid transparent;border-radius:var(--r-sm);
  font-family:var(--font);font-size:var(--fs-sm);text-align:left;
  overflow:hidden;white-space:nowrap;
}
.kaleintrag .txt{overflow:hidden;text-overflow:ellipsis}
.kaleintrag .zeit{font-variant-numeric:tabular-nums;opacity:.75;flex:none}
.kaleintrag:hover{filter:brightness(.96)}
.kaleintrag.aufgabe{background:transparent;color:var(--ink-2);
  border-style:dashed;border-color:var(--line)}
.kalmehr{
  font-size:var(--fs-xs);color:var(--ink-3);padding:1px 6px;text-align:left;
  background:none;border:0;font-family:var(--font);border-radius:var(--r-sm);
}
.kalmehr:hover{background:var(--card-2);color:var(--ink-2)}
.kaleintrag{flex:none}

.agenda{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:0 var(--sp-4) var(--sp-2)}
.agendatag{
  position:sticky;top:64px;background:var(--card);z-index:2;
  display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3) 0 var(--sp-1);margin-top:var(--sp-2);
  font-size:var(--fs-sm);font-weight:500;color:var(--ink-2);
  border-bottom:1px solid var(--line-soft);
}
.agenda .list-item{cursor:pointer}
.agendazeit{width:96px;flex:none;font-size:var(--fs-sm);color:var(--ink-2)}
.kw{
  font-size:var(--fs-xs);color:var(--ink-3);background:var(--card-2);
  border:1px solid var(--line);border-radius:999px;padding:1px 8px;
  letter-spacing:.04em;white-space:nowrap;
}
/* Im Dashboard bleibt die KW schlichter Text hinter einem Punkt */
.hero-date .kw{background:none;border:0;padding:0;font-size:inherit;color:var(--ink-3)}
.hero-date .kw::before{content:' · '}
.privatmarke{display:inline-flex;vertical-align:-2px;color:var(--ink-3)}
.privatmarke svg{width:13px;height:13px}

@media(max-width:860px){
  .kalender{overflow-x:auto}
  .kalkopfzeile,.kalwoche{min-width:640px}
  .kaltag{min-height:84px}
  .agendazeit{width:64px}
  /* Titel links, Ansichtswahl rechts in derselben ersten Zeile */
  .kaltitel{flex:1 1 140px;order:-1;margin:0 0 var(--sp-1)}
  :root .kalkopf .ansicht-pillen{order:-1;margin-left:auto}
}


/* ---------- Zeitraster: Woche und Tag ---------- */
.zeitkalender{display:flex;flex-direction:column}
.zkopf{display:flex;border-bottom:1px solid var(--line);background:var(--card-2)}
.zspalte-zeit{width:56px;flex:none}
.ztagkopf{
  flex:1;min-width:0;display:flex;align-items:baseline;justify-content:center;gap:6px;
  padding:var(--sp-2) 4px;background:none;border:0;border-left:1px solid var(--line-soft);
  font-family:var(--font);color:var(--ink-2);
}
.ztagkopf:hover{background:var(--card)}
.ztagkopf .wt{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.ztagkopf .nr{font-size:var(--fs-base);font-weight:500;font-variant-numeric:tabular-nums}
.ztagkopf.heute .nr{background:var(--brand);color:var(--on-brand);
  border-radius:999px;padding:1px 7px;font-weight:600}
.ztagkopf.heute .wt{color:var(--brand-text)}

.zeitraster{display:flex;position:relative}
.zstunden{width:56px;flex:none;border-right:1px solid var(--line);position:relative}
.zstunde{
  position:absolute;right:6px;transform:translateY(-6px);
  font-size:var(--fs-xs);color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.zstunde:first-child{transform:translateY(0)}
.zsp{flex:1;min-width:0;border-left:1px solid var(--line-soft)}
.zganztagszeile{display:flex;border-bottom:1px solid var(--line);background:var(--card)}
.zganztagszeile .zspalte-zeit{
  display:flex;align-items:center;justify-content:flex-end;padding-right:6px;
  font-size:var(--fs-xs);color:var(--ink-3);
}
.zganztag{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;
  padding:4px;border-left:1px solid var(--line-soft);min-height:30px;
}
.zganztag.heute{background:color-mix(in srgb,var(--brand-soft) 45%,transparent)}
.zsp-flaeche{position:relative}
.zsp-arbeit{position:absolute;left:0;right:0;background:var(--card-2);pointer-events:none}
.zsp.heute .zsp-arbeit{background:var(--brand-soft);opacity:.5}
.zsp-linie{
  position:absolute;left:0;right:0;height:46px;border-top:1px solid var(--line-soft);
  cursor:pointer;
}
.zsp-linie:hover{background:color-mix(in srgb,var(--brand-soft) 60%,transparent)}
.ztermin{
  position:absolute;display:flex;flex-direction:column;gap:1px;overflow:hidden;
  padding:3px 6px;border:1px solid transparent;border-radius:var(--r-sm);
  font-family:var(--font);font-size:var(--fs-sm);text-align:left;line-height:1.25;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.ztermin:hover{filter:brightness(.97)}
.ztermin .zzeit{font-size:var(--fs-xs);opacity:.8;font-variant-numeric:tabular-nums}
.ztermin .ztitel{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ztermin .zbezug{font-size:var(--fs-xs);opacity:.75;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* Mehrere Zuständige nebeneinander */
.badges{display:inline-flex;align-items:center}
.badges .avatar.mini{margin-left:-6px;box-shadow:0 0 0 2px var(--card)}
.badges .avatar.mini:first-child{margin-left:0}
.avatar.mini.mehr{background:var(--card-2);color:var(--ink-3);border-color:var(--line)}
.task-top .badges{flex:none}

/* Mehrfachauswahl */
.dd.mehrfach .dd-opt .haken{opacity:.15}
.dd.mehrfach .dd-opt.aktiv .haken{opacity:1}

@media(max-width:860px){
  .zeitraster{max-height:60vh}
  .zspalte-zeit,.zstunden{width:44px}
  .ztagkopf{flex-direction:column;gap:0;align-items:center}
}

/* Arbeitstage-Auswahl */
.tagwahl{display:flex;gap:var(--sp-1);flex-wrap:wrap}
.tagwahl button{
  min-width:44px;height:var(--h-ctl);padding:0 10px;border-radius:var(--r);
  background:var(--card);color:var(--ink-2);border:1px solid var(--line);
  font-family:var(--font);font-size:var(--fs-base);font-weight:500;
}
.tagwahl button:hover{background:var(--card-2);color:var(--ink)}
.tagwahl button.on{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-text)}

.karten-kopf{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.karten-kopf h2{flex:1;min-width:0}
.ghost.klein{height:28px;padding:0 10px;font-size:var(--fs-sm)}
.list-item[data-dterm]{cursor:pointer;border-radius:var(--r);margin:0 calc(-1 * var(--sp-2))}
.list-item[data-dterm]:hover{background:var(--card-2)}
.list-item[data-dterm] .agendazeit{width:110px;line-height:1.3}


/* ==== 30-anmeldung.css ==== */
/* ---------- Anmeldung ---------- */
body.anmeldung > #nav, body.anmeldung > main,
body.anmeldung > #drawer, body.anmeldung > #navScrim{display:none}
#anmeldung{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:var(--sp-4);background:var(--bg);overflow:auto;
}
.anmeldekarte{
  width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lift);padding:var(--sp-5);
}
.anmeldemarke{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.anmeldemarke strong{display:block;font-size:var(--fs-lg)}
.anmeldemarke small{display:block;color:var(--ink-3);font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.1em}
/* Der Benutzername ist die Kennung und immer klein – erzwungen, damit ein
   Handy ihn nicht automatisch groß schreibt und die Anmeldung scheitert. */
#anName{text-transform:lowercase;letter-spacing:.02em;font-weight:500}
.btn.breit{width:100%}
.anmeldefuss{margin:var(--sp-3) 0 0;text-align:center}
.anmeldehilfe{margin:var(--sp-2) 0 0;text-align:center}
.alslink{
  background:none;border:0;padding:0;font:inherit;font-size:var(--fs-sm);
  color:var(--ink-3);text-decoration:underline;cursor:pointer;
}
.alslink:hover{color:var(--ink)}
/* Mail-Code (0.23.0): groß und gesperrt, damit er sich gut abtippen lässt */
.an-code{font-size:var(--fs-xl);letter-spacing:.4em;text-align:center;font-variant-numeric:tabular-nums}
.hinweis.warnung{background:var(--c-rot-bg);border-color:var(--c-rot-l);color:var(--c-rot)}

/* Zugangsdaten zum Weitergeben – einmalig sichtbar, darum groß genug
   zum Abschreiben und zum Markieren mit der Maus. */
.zugangsdaten{
  display:flex;gap:var(--sp-4);margin:var(--sp-3) 0;padding:var(--sp-3);
  background:var(--card-2);border:1px solid var(--line);border-radius:var(--r);
}
.zugangsdaten span{display:block}
.zugangsdaten code{
  display:block;margin-top:2px;font-size:var(--fs-lg);font-weight:500;
  letter-spacing:.04em;user-select:all;word-break:break-all;
}

/* Benutzer: Kürzel groß, Benutzername klein (Seitenansicht und Anlegen-Fenster) */
.kuerzelfeld{width:7ch;text-transform:uppercase;letter-spacing:.05em}
.namensfeld{text-transform:lowercase;font-family:var(--font-mono,var(--font))}

/* ==== 31-profilmenue.css ==== */
/* ---------- Profilmenü ----------
 * 0.22.0: kein Name mehr oben rechts – nur Profilbild + kleiner Pfeil (offen = Pfeil nach oben)
 * 0.27.1: Pfeil sitzt als kleiner Kreis unten rechts IM Profilbild (Wunsch Dustin) */
.userbox{gap:0;cursor:pointer;position:relative}
#userSel{position:absolute;right:-3px;bottom:-3px;line-height:0}
.userbtn{
  display:inline-flex;align-items:center;justify-content:center;width:var(--userpfeil);height:var(--userpfeil);padding:0;
  border-radius:50%;background:var(--card);border:2px solid var(--bg);color:var(--ink-2);box-shadow:var(--shadow);cursor:pointer;
}
.userbtn svg{width:10px;height:10px;opacity:.8;flex:none;transition:transform .18s var(--weich, ease)}
.userbox:hover .userbtn svg{opacity:1}
.userbox.offen .userbtn svg{transform:rotate(180deg);opacity:1;color:var(--brand-text)}
#profilMenue{min-width:230px}
#profilMenue .profilkopf{
  display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) 10px var(--sp-3);
  border-bottom:1px solid var(--line-soft);margin-bottom:var(--sp-1);
}
#profilMenue .profilkopf strong{display:block}
#profilMenue .profilkopf small{display:block;font-size:var(--fs-sm)}
#profilMenue .dd-opt svg{width:15px;height:15px;opacity:.7;flex:none}

/* Hell/Dunkel als Schalter im Menü (07.10.2026) */
#profilMenue .pm-thema{cursor:pointer}
#profilMenue .pm-thema .schalter{margin:0 0 0 auto;gap:0}
#profilMenue .pm-thema .schieber{transform:scale(.82);transform-origin:right center}
#profilMenue .pm-trenner{height:1px;background:var(--line-soft);margin:var(--sp-1) 0}

/* ==== 32-dateien-verlauf.css ==== */
/* ---------- Dateien ---------- */
.dateiliste{display:flex;flex-direction:column;gap:var(--sp-1);margin-bottom:var(--sp-3)}
.dateizeile{
  display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2);
  border:1px solid var(--line-soft);border-radius:var(--r);background:var(--card);
}
.dateizeile:hover{background:var(--card-2)}
.dateizeile .t{font-weight:500;text-decoration:none;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dateivorschau{
  width:40px;height:40px;flex:none;border-radius:var(--r-sm);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--card-2);border:1px solid var(--line-soft);
}
.dateivorschau img{width:100%;height:100%;object-fit:cover;display:block}
.dateisymbol{display:inline-flex;color:var(--ink-3)}
.dateisymbol svg{width:18px;height:18px}
.ablage{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:var(--sp-4);border:1.5px dashed var(--line);border-radius:var(--r-lg);
  color:var(--ink-3);font-size:var(--fs-sm);cursor:pointer;text-align:center;
  transition:background .12s,border-color .12s;
}
.ablage:hover{background:var(--card-2);color:var(--ink-2)}
.ablage.drueber{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-text)}
.ablage svg{width:16px;height:16px;vertical-align:-3px}
.ablage span{display:inline-flex;align-items:center;gap:6px}

/* ---------- Änderungsverlauf ---------- */
.verlauf .verlaufliste{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-2) 0}
.verlaufzeile{display:flex;gap:var(--sp-2);align-items:flex-start;font-size:var(--fs-sm)}
.verlaufzeile .alt{color:var(--ink-3);text-decoration:line-through}
.verlaufzeile .neu{color:var(--ink)}

/* ---------- Wiederholung ---------- */
.wdhfelder .field.gedimmt{opacity:.45;pointer-events:none}


/* ==== 33-projekte.css ==== */
/* ---------- Projekte ----------
   Die Projektkachel ist eine Aufgabenkarte: gleiche Fläche, gleicher
   Streifen, gleicher Hover. Hier stehen nur die Teile, die eine Aufgabe
   nicht hat – der Fortschrittsbalken und die Listenansicht. */
.projektkarte{display:flex;flex-direction:column;height:100%}
.projektkarte .task-foot{margin-top:auto;flex-wrap:wrap;row-gap:var(--sp-1)}
/* Kunde in eigener Zeile – der Punkt davor hing sonst allein am Zeilenende */
.projektkarte .task-foot .bezug,.beitragkarte .task-foot .bezug{flex-basis:100%}
.projektkarte .task-foot .trenner:has(+ .bezug),.beitragkarte .task-foot .trenner:has(+ .bezug){display:none}

/* Fortschritt: wie viele Aufgaben des Projekts erledigt sind */
.pj-balken{
  height:6px;border-radius:999px;background:var(--card-2);
  overflow:hidden;margin:0 0 var(--sp-2);
}
.pj-balken span{display:block;height:100%;border-radius:999px;background:var(--brand)}
.pj-balken.schmal{margin-bottom:2px;min-width:90px}

/* ==== 34-zeiterfassung.css ==== */
/* ---------- Zeiterfassung ---------- */
.zeitzeile{display:flex;align-items:center;gap:var(--sp-2);height:var(--h-ctl)}
.zeitzeile .nums{font-size:var(--fs-md);font-weight:500}
.ghost.klein{height:30px;padding:0 10px;font-size:var(--fs-sm);gap:5px}
.ghost.klein svg{width:13px;height:13px}
.ghost.klein.on{background:var(--c-rot-bg);border-color:var(--c-rot-l);color:var(--c-rot)}
.laufbtn{
  display:inline-flex;align-items:center;gap:var(--sp-2);height:var(--h-ctl);padding:0 12px;
  background:var(--c-rot-bg);color:var(--c-rot);border:1px solid var(--c-rot-l);
  border-radius:var(--r);font-family:var(--font);font-size:var(--fs-base);
}
.laufbtn:hover{filter:brightness(.97)}
.laufbtn svg{width:13px;height:13px;flex:none}
.laufzeit{font-variant-numeric:tabular-nums;font-weight:500}
.laufwas{color:var(--ink-3);font-size:var(--fs-sm);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}


/* Laufende Zeit in der Kopfleiste: gleiches Design wie die Uhr (.tc-uhr). Zeit grün = läuft, rot = pausiert. */
#uhrLauf{margin:0 var(--sp-3);flex:none}
.laufchip{
  display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 5px 0 16px;
  border-radius:999px;background:var(--card);box-shadow:var(--shadow);
  font:500 13px var(--f-mono);color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.laufchip .laufzeit{color:var(--c-gruen);font-weight:600}
.laufchip.pause .laufzeit{color:var(--c-rot)}
@media (min-width:641px){ :root #topbar .search{flex:4 1 340px;min-width:340px} }
.laufchip[data-aufgabe]{cursor:pointer}
.laufchip .laufwas{display:block;max-width:160px;overflow:hidden;white-space:nowrap}
.laufchip .laufname{display:inline-block;transition:transform linear}
.laufchip:hover .laufwas{color:var(--ink);text-overflow:clip}
.laufchip .iconbtn{color:var(--ink-3);background:none;border:0}
@media (max-width:1100px){ #uhrLauf{margin:0 auto 0 var(--sp-2)} }

/* ==== 35-redaktionsplan.css ==== */
/* ---------- Redaktionsplan ---------- */
.beitragkarte .task-foot{flex-wrap:wrap}
.beitragkarte .tag{flex:none}

@media(max-width:860px){
  .laufwas{display:none}
}

.exportliste{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.exportliste .ghost{text-decoration:none}
.backupliste{max-height:220px;overflow:auto;margin-top:var(--sp-2)}
.page-hinweis{padding:var(--sp-3);background:var(--card-2);border-radius:var(--r-lg)}
td.aktionen{display:flex;gap:var(--sp-1);justify-content:flex-end;align-items:center}
.kaleintrag.beitrag{border-style:solid;opacity:.95}
.kaleintrag.beitrag .pkt{width:7px;height:7px}

.kuerzelliste{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2) var(--sp-4)}
.kuerzelzeile{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm)}
kbd{
  display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:24px;
  padding:0 7px;background:var(--card-2);border:1px solid var(--line);border-bottom-width:2px;
  border-radius:var(--r-sm);font-family:var(--font);font-size:var(--fs-xs);font-weight:600;
  color:var(--ink-2);flex:none;
}
@media(max-width:860px){.kuerzelliste{grid-template-columns:1fr}}


/* ---------- Änderungswunsch: ein rotes Rufezeichen, mehr braucht es nicht ---------- */
.wunschpunkt{
  flex:none;width:20px;height:20px;border-radius:50%;
  display:inline-grid;place-items:center;
  background:var(--c-rot);color:#FFFFFF;
  font-size:13px;font-weight:700;line-height:1;
  box-shadow:0 0 0 3px var(--c-rot-bg);
}

/* ---------- Plattformen: eigene Zeile ganz unten, damit nichts verrutscht ---------- */
.task-plattformen{
  display:flex;flex-wrap:wrap;gap:4px;
  margin-top:var(--sp-2);padding-top:var(--sp-2);
  border-top:1px solid var(--line-soft);
}

/* ---------- Beim Kunden: Stand und Sende-Knopf ---------- */
/* Gestrichelt wie die Hinweise in den Einstellungen (60-hinweise.css):
   grau = noch nicht beim Kunden / liegt dort, grün = freigegeben, rot = Änderung. */
.vorlagekasten{
  display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  margin-top:var(--sp-3);padding:12px 16px;
  border:1px dashed var(--hw-rand);border-radius:12px;
  background:var(--hw-flaeche);box-shadow:none;
}
.vorlagekasten > .grow{display:flex;flex-direction:column;line-height:1.35;min-width:200px}
.vorlagekasten.freigegeben{border-color:var(--hw-gruen-rand);background:var(--c-gruen-bg)}
.vorlagekasten.aenderung{border-color:var(--hw-rot-rand);background:var(--c-rot-bg)}

/* Zähler im Untermenü */
.viewswitch .zaehler{
  display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  margin-left:4px;border-radius:999px;font-size:var(--fs-xs);font-weight:600;
  background:var(--brand);color:var(--on-brand);
}


/* „Inhalt anzeigen“ (10.10.2026): Bild oder Video über die ganze Kartenbreite oben, darunter der Rest.
   Der farbige Streifen (46-stil.css) läuft dann nur neben dem Text (.karte-text), nicht hinter dem Bild (12.10.2026).
   Ränder: Karte hat oben 12 px, links 20 px, rechts --sp-3 Polsterung – davon bleibt --karte-bild-rand. */
.karte-medium{position:relative;
  margin:calc(var(--karte-bild-rand) - 12px) calc(var(--karte-bild-rand) - var(--sp-3)) 12px calc(var(--karte-bild-rand) - 20px);
  border-radius:var(--karte-bild-r);overflow:hidden;background:var(--card-2);line-height:0}
.karte-medium img,.karte-medium video{display:block;width:100%;max-height:var(--karte-bild-h);object-fit:cover;pointer-events:none}
.task:has(> .karte-medium)::before{display:none}
.karte-medium + .karte-text{position:relative}
.karte-medium + .karte-text::before{content:"";position:absolute;left:-11px;top:0;bottom:0;width:3px;
  border-radius:999px;background:var(--streifen,var(--line))}
.karte-spielen{position:absolute;inset:0;display:grid;place-items:center;color:var(--on-brand)}
.karte-spielen svg{width:38px;height:38px;padding:10px;border-radius:50%;background:color-mix(in srgb,var(--ink) 55%,transparent)}

/* ==== 40-dialoge-hinweise.css ==== */
/* ---------- Kleine Dialoge (statt confirm und prompt) ---------- */
.modal{position:fixed;inset:0;z-index:220;display:flex;align-items:center;justify-content:center;
  padding:var(--sp-4)}
.dd-menu.ueber-modal{z-index:221}   /* Auswahlfeld im Fenster (05-auswahlfeld.js) */
.modal-hinter{position:absolute;inset:0;background:rgba(20,17,14,.45)}
.modal-karte{
  position:relative;width:100%;max-width:420px;min-width:0;box-sizing:border-box;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lift);
  padding:var(--sp-5);animation:ddauf .14s ease-out;
}
.modal-karte h2{font-size:var(--fs-lg);margin:0 0 var(--sp-2);overflow-wrap:anywhere;hyphens:auto}
.modal-karte p{margin:0 0 var(--sp-3);font-size:var(--fs-base);overflow-wrap:anywhere}
.modal-karte .field{margin-bottom:var(--sp-3)}
.modal-fuss{display:flex;justify-content:flex-end;gap:var(--sp-2);margin-top:var(--sp-4)}
.btn.gefahr{background:var(--c-rot);border-color:var(--c-rot);color:#fff}
.btn.gefahr:hover{filter:brightness(1.08)}

/* ---------- Hinweisfähnchen ---------- */
.hilfe-fahne{
  position:fixed;z-index:240;max-width:260px;pointer-events:none;
  padding:6px 9px;border-radius:var(--r-sm);
  background:var(--ink);color:var(--bg);font-size:var(--fs-sm);line-height:1.35;
  box-shadow:var(--shadow-lift);opacity:0;transform:translateY(-2px);
  transition:opacity .12s ease-out,transform .12s ease-out;
}
.hilfe-fahne.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .hilfe-fahne{transition:none}
  .modal-karte{animation:none}
}


/* ==== 41-glocke-sortierliste.css ==== */
/* ---------- Glocke ---------- */
/* Nur ein Symbol, kein Knopf: kein Rahmen, kein Hintergrund */
.glocke{
  position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border:0;background:none;color:var(--ink-2);
}
.glocke:hover{color:var(--ink)}
.glocke svg{width:19px;height:19px}
/* Zahl klein und ohne Umrandung an der Glocke – sie soll das Symbol nicht zudecken */
.glockenzahl{
  position:absolute;top:-1px;right:-1px;
  color:var(--brand);font-size:10px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;pointer-events:none;
}
.glockenmenue{min-width:320px;max-width:min(380px,calc(100vw - 20px));padding:0}
.glockenkopf{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-3) var(--sp-2);border-bottom:1px solid var(--line-soft)}
.glockenkopf strong{flex:1;font-size:var(--fs-base)}
.glockenmenue .dd-liste{max-height:min(400px,60vh);padding:var(--sp-1)}
.glockenfuss{padding:var(--sp-1) var(--sp-2) var(--sp-2);border-top:1px solid var(--line-soft)}
.meldung{
  display:flex;align-items:flex-start;gap:var(--sp-2);width:100%;
  padding:8px 10px;border:0;border-radius:var(--r-sm);background:none;text-align:left;
  font-family:var(--font);color:var(--ink);
}
.meldung:hover{background:var(--card-2)}
.meldung .grow{display:flex;flex-direction:column;gap:1px;min-width:0}
.meldung .t{font-size:var(--fs-base)}
.meldung.neu{background:var(--brand-soft)}
.meldung.neu .t{font-weight:600}
.meldung.neu:hover{background:var(--brand-soft);filter:brightness(.98)}

/* ---------- Sortierliste (Menüreihenfolge) ---------- */
.sortierliste{display:flex;flex-direction:column;gap:2px}
.sortierzeile{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:6px 6px 6px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--card-2);font-size:var(--fs-base);
}
.sortierzeile .grow{flex:1;min-width:0}
.sortierzeile .iconbtn[disabled]{opacity:.25;pointer-events:none}
/* Schalter in der Bausteinwahl stehen dichter */
.bloeckwahl{display:flex;flex-direction:column;gap:var(--sp-1)}
.schalter.schmal{padding:var(--sp-1) 0}
.schalter.schmal small{display:none}


/* Benachrichtigungen mit Luft dazwischen (02.10.2026): eigene Kärtchen statt aneinanderklebender Zeilen */
.glockenmenue .dd-liste{display:flex;flex-direction:column;gap:6px;padding:8px}
.glockenmenue .meldung{padding:10px 12px;gap:10px;border:1px solid var(--line-soft);border-radius:12px}
.glockenmenue .meldung .grow{gap:3px}
.glockenmenue .meldung.neu{border-color:var(--brand-line)}
.glockenmenue .meldung .avatar.mini{margin-top:1px}

/* ==== 42-detailfelder.css ==== */
/* ---------- Laufende Zeit in der Aufgabe ---------- */
.nums.gross{font-size:var(--fs-lg);font-weight:600;font-variant-numeric:tabular-nums}
.nums.laeuft{color:var(--brand-text)}

/* ---------- Projektdetail ---------- */
/* Beschreibung im Lesemodus – gleiche Optik wie ein gesperrtes Feld */
.lesetext{
  padding:10px 12px;border:1px solid var(--line-soft);border-radius:var(--r);
  background:var(--card-2);color:var(--ink-2);font-size:var(--fs-base);line-height:1.6;
  min-height:calc(var(--h-ctl) * 1.5);white-space:pre-wrap;overflow-wrap:anywhere;
}
.lesetext a{color:var(--brand-text);text-decoration:underline;text-underline-offset:2px}
/* „0.0 / 40.0 Std" – die Planzahl kleiner und ruhiger */
.stat .n .von{font-size:var(--fs-lg);color:var(--ink-3);font-weight:500;margin-left:2px}
.stat .n.warn{color:var(--c-rot)}
/* Erledigt-Kachel bekommt einen grünen Hauch, sobald etwas fertig ist */
.stat.erledigt{background:var(--c-gruen-bg);border-color:var(--c-gruen-l)}
.stat.erledigt .n{color:var(--c-gruen)}
/* Anklickbare Zeilen zeigen das auch */
/* Der Hover-Bereich reicht bis in den Kartenrand hinein – der negative Rand
   wird durch denselben Innenabstand wieder ausgeglichen, sonst wird die Zeile
   breiter als ihre Karte und schiebt auf schmalen Bildschirmen alles auf. */
.list-item.anklickbar{
  cursor:pointer;border-radius:var(--r);
  margin-inline:calc(-1 * var(--sp-2));padding-inline:var(--sp-2);
  box-sizing:border-box;max-width:calc(100% + 2 * var(--sp-2));
}
.list-item.anklickbar:hover{background:var(--card-2)}
.list-item.anklickbar:hover .t{color:var(--brand-text)}

/* ---------- Passwortfeld mit Auge ---------- */
.pw-feld{position:relative;display:block}
.pw-feld input{width:100%;padding-right:38px}
.pw-auge{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:28px;border:0;border-radius:var(--r-sm);
  background:none;color:var(--ink-3);
}
.pw-auge:hover{background:var(--card-2);color:var(--ink)}
.pw-auge svg{width:16px;height:16px}

/* Eine Ebene tiefer: die einzelnen Kennzahlkacheln unter „Kennzahlen oben" */
.unterwahl{
  margin:2px 0 var(--sp-2) var(--sp-5);padding-left:var(--sp-3);
  border-left:2px solid var(--line);
}
.unterwahl p{margin:var(--sp-1) 0 var(--sp-1)}

/* ---------- Knopf mit Pfeil für weitere Arten ---------- */
/* Sieht aus wie ein Knopf: außen rund, innen ohne Fuge und ohne Rundung. */
.knopfpaar{display:inline-flex;gap:0}
.knopfpaar > .btn{border-radius:0}
.knopfpaar > .btn:first-child{
  border-radius:var(--r) 0 0 var(--r);
  border-right:0;padding-right:8px}
/* Gerader Strich über die volle Knopfhöhe, in der Schriftfarbe */
.knopfpaar > .btn.pfeil{
  border-radius:0 var(--r) var(--r) 0;
  border-left:1px solid color-mix(in srgb, var(--on-brand) 45%, transparent);
  padding:0 8px 0 5px;min-width:0}
/* Der Strich gehört zum Knopf, nicht zum Rahmen: er bleibt beim Überfahren
   und beim Tastaturfokus unverändert stehen. */
.knopfpaar > .btn.pfeil:hover{
  border-left-color:color-mix(in srgb, var(--on-brand) 45%, transparent)}
.knopfpaar > .btn.pfeil svg{width:15px;height:15px}

/* Projektkacheln im Dashboard brauchen Luft dazwischen */
#dashProjekte{display:flex;flex-direction:column;gap:var(--sp-2)}
#dashProjekte .projektkarte{margin:0}


/* ==== 43-version-schnell.css ==== */
/* Hinweis „neuere Version“ und Rückgängig-Knopf: Vorlage 72-hinweis-unten.css */

/* ---------- Schnellerfassung ---------- */
#schnell{position:fixed;inset:0;z-index:230;display:flex;align-items:flex-start;
  justify-content:center;padding:12vh var(--sp-4) var(--sp-4)}
.schnell-karte{
  position:relative;width:100%;max-width:560px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lift);
  overflow:hidden;animation:ddauf .13s ease-out;
}
.schnell-zeile{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4)}
.schnell-plus{font-size:22px;line-height:1;color:var(--ink-3)}
#schnellFeld{
  flex:1;height:auto;padding:0;border:0;background:none;
  font-family:var(--font);font-size:var(--fs-lg);color:var(--ink);outline:none;
}
.schnell-arten{display:flex;gap:var(--sp-1);padding:0 var(--sp-4) var(--sp-3);flex-wrap:wrap}
.schnell-arten button{
  height:var(--h-pill);padding:0 12px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--ink-2);font-family:var(--font);font-size:var(--fs-sm);
}
.schnell-arten button:hover{background:var(--card-2);color:var(--ink)}
.schnell-arten button.on{
  background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-text);font-weight:600}
.schnell-fuss{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);
  border-top:1px solid var(--line-soft);background:var(--card-2)}
.schnell-fuss .grow{flex:1}
@media (prefers-reduced-motion:reduce){ .schnell-karte{animation:none} }
@media(max-width:600px){ #schnell{padding-top:6vh} }


/* ==== 44-ziehen-auswahl.css ==== */
/* ---------- Leere Spalte ---------- */
/* Platzhalter, damit man in eine leere Spalte zielen kann. Was beim Ziehen zu sehen ist,
   kommt allein aus dem Anheben (63-anheben.css) – es gibt keine zweite Zieh-Optik mehr. */
.einfuegemarke{height:0;margin:0}
.col-body:not(:has(.task, .beitragkarte)){min-height:88px}
.col-body:not(:has(.task, .beitragkarte)) .einfuegemarke{
  height:64px;border:1px dashed var(--line);border-radius:var(--r)}

/* ---------- Mehrfachauswahl ---------- */
.wahlspalte{width:34px}
.hakenfeld{display:inline-flex;cursor:pointer}
.hakenfeld input{position:absolute;opacity:0;width:0;height:0}
.haken-box{
  width:17px;height:17px;border:1.5px solid var(--line);border-radius:4px;
  background:var(--card);display:inline-block;position:relative;transition:all .12s}
.hakenfeld:hover .haken-box{border-color:var(--brand-line)}
.hakenfeld input:checked + .haken-box{background:var(--brand);border-color:var(--brand)}
.hakenfeld input:checked + .haken-box::after{
  content:'';position:absolute;left:5px;top:1px;width:4px;height:9px;
  border:solid var(--on-brand);border-width:0 2px 2px 0;transform:rotate(42deg)}
.hakenfeld input:indeterminate + .haken-box{background:var(--brand);border-color:var(--brand)}
.hakenfeld input:indeterminate + .haken-box::after{
  content:'';position:absolute;left:3px;top:6.5px;width:9px;height:0;
  border-top:2px solid var(--on-brand)}
tr.gewaehlt{background:var(--brand-soft)}
tr.gewaehlt:hover{background:var(--brand-soft)}
/* Auswahlleiste: Aussehen kommt aus der Vorlage 72-hinweis-unten.css */
.wahlliste{display:flex;flex-direction:column;gap:2px;margin-top:var(--sp-2)}


/* ==== 45-vorlagen-marke.css ==== */
/* ---------- Vorlagen ---------- */
.vorlage{padding:0;overflow:hidden}
.vorlage-kopf{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3)}
.vorlage-auf{
  flex:1;display:flex;align-items:center;gap:var(--sp-2);min-width:0;
  border:0;background:none;padding:var(--sp-1) 0;
  font-family:var(--font);font-size:var(--fs-base);color:var(--ink);text-align:left}
.vorlage-auf strong{font-weight:600}
.vorlage-auf svg{width:16px;height:16px;color:var(--ink-3);transition:transform .15s}
.vorlage:has(.vorlage-inhalt) .vorlage-auf svg{transform:rotate(180deg)}
.vorlage-inhalt{padding:0 var(--sp-3) var(--sp-3);border-top:1px solid var(--line-soft)}
.vorlage-inhalt .field{margin-top:var(--sp-3)}
@media (prefers-reduced-motion:reduce){ .vorlage-auf svg{transition:none} }

/* Feld, das noch ausgefüllt werden muss */
input.fehlt, textarea.fehlt{
  border-color:var(--c-rot);box-shadow:0 0 0 3px var(--c-rot-bg);
  animation:wackeln .3s ease-in-out}
@keyframes wackeln{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}
  75%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){ input.fehlt{animation:none} }

/* ---------- Erscheinungsbild: Logo und Farbe ---------- */
.logofeld{
  display:flex;align-items:center;justify-content:center;
  min-height:96px;padding:var(--sp-3);
  border:1px dashed var(--line);border-radius:var(--r);
  background:var(--card-2);
}
.logofeld.dunkel{background:#1A1613;border-color:#332C26}
.logofeld img{max-height:56px;max-width:100%;object-fit:contain}
.logoleer{color:var(--ink-3);font-size:var(--fs-sm)}
.logofeld.dunkel .logoleer{color:#8E867E}
.farbzeile{display:flex;align-items:center;gap:var(--sp-2)}
.farbzeile input[type=color]{
  width:44px;height:var(--h-ctl);padding:2px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--card);cursor:pointer}
.farbzeile input[type=text],.farbzeile #cdFarbeText{
  width:110px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ==== 46-stil.css ==== */
/* ==================================================================
   Oberflächenstil – weich, rund, luftig
   Seit 07.09.2026 der einzige Stil; die frühere Umschaltung zwischen
   „Klassisch" und „Modern" ist entfallen. Zuerst neue Werte für die
   Variablen aus 01-grundlagen.css, danach die Stellen mit eigener Regel.
   ================================================================== */
:root{
  /* ---- Höhen & Rundungen ---- */
  --h-ctl:40px;
  --h-pill:32px;
  --r-sm:10px; --r:14px; --r-lg:20px;
  --nav-w:246px;

  /* ---- Schatten statt harter Kanten ---- */
  --shadow:0 1px 2px rgba(26,22,19,.04), 0 8px 20px -14px rgba(26,22,19,.30);
  --shadow-lift:0 2px 8px rgba(26,22,19,.06), 0 26px 50px -24px rgba(26,22,19,.40);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 26px -16px rgba(0,0,0,.85);
    --shadow-lift:0 2px 10px rgba(0,0,0,.55), 0 28px 56px -24px rgba(0,0,0,.95);
  }
}
:root[data-theme="dark"]{
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 26px -16px rgba(0,0,0,.85);
  --shadow-lift:0 2px 10px rgba(0,0,0,.55), 0 28px 56px -24px rgba(0,0,0,.95);
}

/* ---------- Überschriften etwas enger ---------- */
:root h1,
:root h2,
:root h3{letter-spacing:-.025em}
:root h1{font-weight:600}
:root .stat .n{font-weight:600;letter-spacing:-.03em}

/* ---------- Navigation ---------- */
:root #nav{
  padding:var(--sp-4) 14px;
  border-right:1px solid var(--line-soft);
  background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
}
:root #nav nav{gap:4px}
:root #nav nav a{border-radius:999px;padding:0 14px}
/* Der aktive Punkt wird gefüllt – man sieht sofort, wo man ist */
:root #nav nav a.active{
  background:var(--brand);color:var(--on-brand);font-weight:600;
  box-shadow:0 8px 18px -10px color-mix(in srgb, var(--brand) 85%, transparent);
}
:root #nav nav a.active svg{opacity:1}
:root .dot{border-radius:8px}

/* ---------- Kopfzeile ---------- */
:root #topbar{border-bottom:1px solid var(--line-soft)}
:root .search input{
  border-radius:999px;background:var(--card-2);border-color:transparent;padding:0 16px}
:root .search input:focus{background:var(--card)}
:root .avatar{width:34px;height:34px}

/* ---------- Knöpfe: Pillen ---------- */
:root .btn,
:root .ghost,
:root .iconbtn,
:root .dd.schlicht .dd-btn{border-radius:999px}
:root .btn{
  font-weight:600;padding:0 10px;border-color:transparent;
  background:linear-gradient(140deg, color-mix(in srgb, var(--brand) 78%, #FFFFFF), var(--brand));
  box-shadow:0 10px 22px -12px color-mix(in srgb, var(--brand) 90%, transparent);
}
/* Löschen-Rückfrage: der Verlauf oben schlug sonst das Rot aus 40-dialoge-hinweise.css */
:root .btn.gefahr{background:var(--c-rot);box-shadow:none}
:root .knopfpaar{
  border-radius:999px;
  background:linear-gradient(140deg, color-mix(in srgb, var(--brand) 78%, #FFFFFF), var(--brand));
  box-shadow:0 10px 22px -12px color-mix(in srgb, var(--brand) 90%, transparent);
}
:root .knopfpaar > .btn{background:none;box-shadow:none}
:root .knopfpaar > .btn:first-child{
  border-radius:999px 0 0 999px;padding-left:20px}
:root .knopfpaar > .btn.pfeil{
  border-radius:0 999px 999px 0;
  border-left:1px solid rgba(255,255,255,.45);padding-right:12px}
:root .knopfpaar > .btn:hover{filter:none;background:rgba(255,255,255,.16)}

:root .ghost,
:root .iconbtn{background:var(--card-2);border-color:transparent}
:root .ghost:hover,
:root .iconbtn:hover{background:var(--card);border-color:var(--line)}
:root .ghost.subtle{background:transparent}

/* ---------- Karten: Schatten statt kräftigem Rahmen ---------- */
:root .card,
:root .hero,
:root .table-wrap{
  border-color:var(--line-soft);box-shadow:var(--shadow);
}
:root .hero{
  background:linear-gradient(120deg, var(--brand-soft) 0%, var(--card) 62%);
  border-color:var(--brand-line);
}
:root .card.clickable:hover{box-shadow:var(--shadow-lift)}

/* Kennzahlkacheln bekommen einen leisen Farbschein in der Ecke */
:root .stat{position:relative;overflow:hidden}
:root .stat::after{
  content:"";position:absolute;inset:auto -30px -40px auto;
  width:110px;height:110px;border-radius:50%;
  background:var(--brand-soft);opacity:.5;pointer-events:none;
}
:root .stat > *{position:relative}

/* ---------- Tabellen ---------- */
:root th{
  background:var(--card-2);border-bottom:0;padding:12px var(--sp-3);font-weight:600}
:root td{padding:11px var(--sp-3)}

/* ---------- Aufgabenkarten: Rand wird zum Streifen ---------- */
:root .task{
  position:relative;border:1px solid var(--line-soft);border-left:1px solid var(--line-soft);
  padding:12px var(--sp-3) 12px 20px;box-shadow:var(--shadow);
}
:root .task::before{
  content:"";position:absolute;left:9px;top:12px;bottom:12px;width:3px;
  border-radius:999px;background:var(--streifen,var(--line));
}
:root .task.t-rand-grau  {--streifen:var(--c-grau-l)}
:root .task.t-rand-gruen {--streifen:var(--c-gruen)}
:root .task.t-rand-blau  {--streifen:var(--c-blau)}
:root .task.t-rand-orange{--streifen:var(--c-orange)}
:root .task.t-rand-lila  {--streifen:var(--c-lila)}
:root .task.t-rand-gold  {--streifen:var(--c-gold)}
:root .task.t-rand-rot   {--streifen:var(--c-rot)}
:root .task.t-rand-braun {--streifen:var(--c-braun)}
:root .task.t-rand-beere {--streifen:var(--c-beere)}
:root .task.t-rand-neutral,
:root .task.t-rand-leer  {--streifen:var(--c-neutral-l)}
:root .task:hover{box-shadow:var(--shadow-lift)}

/* Board-Spalten ohne Rahmen, Trennlinie unter dem Kopf entfällt */
:root .col{border-color:transparent;padding:12px}
:root .col-head{border-bottom:0;padding-bottom:var(--sp-2)}

/* ---------- Kleinkram ---------- */
:root .sub .check{border-radius:8px}
:root .datectl{border-radius:999px;padding-left:14px}
:root .list-item{border-bottom-color:var(--line-soft)}

/* ==== 47-dynamik.css ==== */
/* ==================================================================
   Dynamik: Dashboard ohne Löcher, einheitliche Hover-Effekte
   ================================================================== */

/* ---------- Dashboard-Bausteine ----------
   Vorher ein zweispaltiges Raster: die kürzere Spalte hörte irgendwann auf
   und darunter blieb eine große Lücke. Jetzt fließen die Karten wie in
   einer Zeitung – jede rutscht dahin, wo Platz ist. */
.dash-grid{
  columns:2;
  column-gap:var(--sp-3);
}
.dash-grid > .card{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  margin:0 0 var(--sp-3);
  display:flex;
  flex-direction:column;
}
.dash-grid > .card:last-child{margin-bottom:0}
@media(max-width:1100px){ .dash-grid{columns:1} }

/* Kennzahlreihe: lieber gleichmäßig verteilt als eine halbleere zweite Zeile */
.grid.stats{grid-template-columns:repeat(auto-fit,minmax(clamp(150px,14vw,210px),1fr))}

/* Die Knopfzeile sitzt unten in der Karte, damit kein Rest darunter hängt.
   Die Karten setzen den Abstand selbst, hier nur das Runterschieben. */
.dash-grid > .card > .aktionen{margin-top:auto}

/* ---------- Hover: überall dieselbe Sprache ----------
   Karte hebt sich leicht, Titel nimmt die Akzentfarbe an. */
.task,
.projektkarte,
.card.clickable,
.list-item.anklickbar{
  transition:box-shadow .16s ease-out, transform .16s ease-out, border-color .16s ease-out;
}
.task:hover,
.projektkarte:hover,
.card.clickable:hover{
  box-shadow:var(--shadow-lift);
  transform:translateY(-1px);
}
.projektkarte:active,
.task:active{transform:translateY(0)}

/* Fortschrittsbalken: füllt sich weich statt zu springen */
.pj-balken span{transition:width .35s ease-out}

/* Kennzahlkacheln reagieren leise mit – sie sind nicht anklickbar,
   sollen sich beim Überfahren aber nicht tot anfühlen. */
.stat{transition:border-color .16s ease-out}
.stat:hover{border-color:var(--brand-line)}

/* Statuspillen und Knöpfe: kurzer Übergang, keine Zappelei */
.tag,.btn,.ghost,.iconbtn,.dd-btn{transition:background .14s ease-out, color .14s ease-out,
  border-color .14s ease-out, box-shadow .14s ease-out}

/* Listenzeilen im Drawer und auf dem Dashboard */
.list-item.anklickbar:hover{transform:none}

@media (prefers-reduced-motion:reduce){
  .task,.projektkarte,.card.clickable,.list-item.anklickbar,
  .tag,.btn,.ghost,.iconbtn,.dd-btn,.stat,.pj-balken span{transition:none}
  .task:hover,.projektkarte:hover,.card.clickable:hover{transform:none}
}

/* ==== 48-dashboard-listen.css ==== */
/* ==================================================================
   Dashboard-Listen (Termine, Beiträge, Lead-Erinnerungen, Top-Leads)
   Dieselbe Sprache wie die Aufgabenkarten – Kachel, Rundung, Hover –
   nur ruhiger: kein Farbstreifen, kein Schatten, kein Anheben.
   Jede Zeile ist als Ganzes anklickbar und führt in den Eintrag.
   ================================================================== */

.dash-liste{display:flex;flex-direction:column;gap:6px}

.dash-liste .list-item{
  align-items:center;
  gap:var(--sp-2);
  padding:10px var(--sp-3);
  margin:0;
  max-width:100%;
  background:var(--card-2);
  border:1px solid transparent;
  border-radius:var(--r);
  box-sizing:border-box;
}
.dash-liste .list-item:last-child{border-bottom:1px solid transparent}

.dash-liste .list-item .t{
  display:block;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dash-liste .list-item .grow{min-width:0}

/* Anklickbar: Rahmen nimmt die Akzentfarbe an, der Pfeil taucht auf */
.dash-liste .list-item.anklickbar{cursor:pointer}
.dash-liste .list-item.anklickbar:hover{
  background:var(--card);
  border-color:var(--brand-line);
}
.dash-liste .list-item.anklickbar:hover .t{color:var(--brand-text)}

.dash-pfeil{
  flex:none;width:12px;text-align:center;
  color:var(--ink-3);font-size:18px;line-height:1;
  opacity:0;transform:translateX(-3px);
  transition:opacity .14s ease-out, transform .14s ease-out;
}
.dash-liste .list-item.anklickbar:hover .dash-pfeil{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .dash-pfeil{transition:none}
}

/* Auf schmalen Bildschirmen zählt der Platz mehr als der Pfeil */
@media (max-width:640px){
  .dash-liste .list-item{padding:10px var(--sp-2)}
  .dash-pfeil{display:none}
}

/* ==== 49-mobil-plus.css ==== */
/* ================================================================== *
 * Responsive, zweite Runde (23.09.2026)
 * Stufen: > 1100 volle Seitenleiste · 641–1100 Symbolleiste ·
 *         ≤ 640 Handy (Hamburger, Karten, Bottom-Sheet)
 * ================================================================== */

/* ---------- Überall: Felder dürfen schmaler werden als ihr Inhalt ---------- */
.field, .row2 > *, .row3 > *{min-width:0}
.field .dd{display:block;min-width:0;max-width:100%}
.field .dd-btn{min-width:0}

/* ---------- Seitenansicht fährt herein ---------- */
@keyframes drawerRein{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes sheetRein{from{transform:translateY(60px);opacity:.4}to{transform:none;opacity:1}}
@keyframes blende{from{opacity:0}to{opacity:1}}
#drawer:not([hidden]) .drawer-panel{animation:drawerRein .2s cubic-bezier(.2,.8,.2,1)}
#drawer:not([hidden]) .drawer-backdrop{animation:blende .2s ease-out}
@media (prefers-reduced-motion:reduce){
  #drawer:not([hidden]) .drawer-panel, #drawer:not([hidden]) .drawer-backdrop{animation:none}
}

/* ---------- Tablet: schmale Symbolleiste statt Hamburger ---------- */
@media (min-width:641px) and (max-width:1100px){
  :root{--nav-w:68px}
  #nav{transform:none !important;box-shadow:none;padding:var(--sp-3) 10px;gap:var(--sp-4)}
  #nav .brand{display:none}
  #nav nav a{justify-content:center;padding:0}
  #nav nav a span{display:none}
  #nav nav a svg{width:20px;height:20px}
  .nav-foot{flex-direction:column;align-items:center}
  .nav-foot .themebtn{flex:none;width:var(--h-ctl);padding:0;justify-content:center}
  .nav-foot .themebtn span{display:none}
  main{margin-left:var(--nav-w) !important}
  #menuBtn{display:none !important}
  #navScrim{display:none !important}
}

/* ---------- Kopfzeile auf dem Handy ---------- */
@media (max-width:860px){
  #topbar .spacer{display:none}
  #topbar .search{flex:1 1 auto;min-width:0;max-width:none}
}
@media (max-width:640px){
  #topbar{gap:6px}
  #results{position:fixed;left:var(--sp-3);right:var(--sp-3);top:64px;max-height:70dvh}
}

/* ---------- Seitenköpfe: Titel oben, Knöpfe darunter ---------- */
@media (max-width:640px){
  .page-head{gap:var(--sp-2)}
  .page-head > .grow{flex:1 1 0;min-width:0}
  .page-head > .grow small{display:block;white-space:normal}
  .page-head > .viewswitch{order:3;flex:1 1 100%;display:flex;overflow-x:auto;scrollbar-width:none}
  .page-head > .viewswitch::-webkit-scrollbar{display:none}
  .page-head > .viewswitch button{flex:1 0 auto;justify-content:center;white-space:nowrap}
  .page-head > .viewswitch ~ .viewswitch{order:4}
  .page-head > .btn{order:2;flex:none}
  .page-head > .ghost{order:5}
}

/* ---------- Tabellen werden zu Karten ---------- */
@media (max-width:640px){
  .table-wrap.karten{background:none;border:0;overflow:visible;border-radius:0}
  .karten table, .karten tbody{display:block}
  .karten thead{display:none}
  .karten tbody tr{
    display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;position:relative;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
    padding:12px 14px;margin-bottom:var(--sp-2);
  }
  .karten tbody tr:hover td{background:none}
  .karten tbody tr:active{border-color:var(--brand-line)}
  .karten td{display:block;padding:0;border:0;width:auto !important;
    white-space:normal;text-align:left;font-size:var(--fs-sm);color:var(--ink-2)}
  .karten td.haupt{flex:1 0 100%;order:-1;font-size:var(--fs-base);color:var(--ink)}
  .karten td.leer{display:none}
  .karten td[data-label]:not(.haupt):not(.wahlspalte):not(.aktionen)::before{
    content:attr(data-label);display:block;font-size:10px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--ink-3);margin-bottom:1px}
  .karten td.wahlspalte{position:absolute;top:10px;right:10px}
  .karten tr:has(td.wahlspalte) td.haupt{padding-right:34px}
  .karten td.aktionen{margin-left:auto}
  .karten td.empty, .karten td[colspan]{flex:1 0 100%;text-align:center;padding:var(--sp-4)}
  .karten .fixw .dd-btn{min-width:0}
}

/* ---------- Filter einklappen ---------- */
.filterknopf{display:none}
@media (max-width:640px){
  .toolbar.filterbar .filterknopf{display:inline-flex;align-items:center;gap:6px;flex:none}
  .toolbar.filterbar.zu > :not(.filterknopf):not(input:first-child):not(.bleibt){display:none}
  .toolbar.filterbar > input:first-child{flex:1 1 140px;min-width:0}
  .toolbar.filterbar:not(.zu) > .dd, .toolbar.filterbar:not(.zu) > .dd .dd-btn{flex:1 1 45%;min-width:0}
  .filterknopf .zahl{display:inline-flex;align-items:center;justify-content:center;min-width:18px;
    height:18px;border-radius:9px;background:var(--brand);color:#fff;font-size:11px;padding:0 5px}
}

/* ---------- Boards: Spalten zum Wischen ---------- */
.board-reiter{display:none}
@media (max-width:640px){
  .board{grid-auto-flow:column;grid-auto-columns:86%;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin:0 calc(-1 * var(--sp-3));padding:0 var(--sp-3) var(--sp-2);scroll-padding:0 var(--sp-3);
    scrollbar-width:none}
  .board::-webkit-scrollbar{display:none}
  .board > .col{scroll-snap-align:start;min-width:0}
  .board .col-body{min-height:120px}
  .board-reiter{display:flex;gap:6px;overflow-x:auto;margin:0 0 var(--sp-2);scrollbar-width:none}
  .board-reiter::-webkit-scrollbar{display:none}
  .board-reiter button{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;
    padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);
    color:var(--ink-2);font:inherit;font-size:var(--fs-sm)}
  .board-reiter button.on{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-text);font-weight:500}
  .board-reiter .n{color:var(--ink-3);font-variant-numeric:tabular-nums}
}
/* Auf Touch: langes Drücken statt Ziehen, kein Markieren, kein Kontextmenü */
@media (hover:none){
  .task[draggable="true"], [data-beitrag][draggable="true"]{
    -webkit-user-drag:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
  .task.haelt{transform:scale(.97);transition:transform .15s;box-shadow:var(--shadow-lift)}
}

/* ---------- Seitenansicht als Blatt von unten ---------- */
.sheet-griff{display:none}
@media (max-width:640px){
  .drawer-panel{top:max(10px, env(safe-area-inset-top));width:100% !important;border-left:0;
    border-radius:18px 18px 0 0;padding-top:0;overscroll-behavior:contain;
    padding-bottom:calc(var(--sp-6) + env(safe-area-inset-bottom))}
  #drawer:not([hidden]) .drawer-panel{animation:sheetRein .24s cubic-bezier(.2,.8,.2,1)}
  .sheet-griff{display:block;position:sticky;top:0;z-index:5;height:22px;
    margin:0 calc(-1 * var(--sp-4)) 4px;background:var(--bg);touch-action:none}
  .sheet-griff::after{content:"";position:absolute;left:50%;top:8px;width:40px;height:5px;
    margin-left:-20px;border-radius:3px;background:var(--line)}
  .drawer-panel.zieht{transition:none;animation:none}
  .drawer-panel.federt{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){
  #drawer:not([hidden]) .drawer-panel{animation:none}
}
.filterknopf svg{width:15px;height:15px}

/* ---------- Sicherung ---------- */
.hinweis.ok{border-left-color:var(--c-gruen)}
.hinweis.warn{border-left-color:var(--c-orange)}
.hinweis code{word-break:break-all}
button.hinweis.dash-backup{display:block;width:100%;text-align:left;font:inherit;font-size:var(--fs-sm);
  cursor:pointer;margin:var(--sp-3) 0}

/* ==== 50-palette-heute-dreh.css ==== */
/* ================================================================== *
 * Befehlspalette, Mein Tag, Drehtag (24.09.2026)
 * ================================================================== */
.btn.klein{height:30px;padding:0 12px;font-size:var(--fs-sm);gap:5px}
.btn svg,.ghost svg{width:15px;height:15px;flex:none}
.linkknopf{background:none;border:0;padding:4px 0;min-height:36px;color:var(--brand-text);font:inherit;font-size:var(--fs-sm);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.rot{color:var(--c-rot)}

/* Abhak-Kreis – groß genug für den Daumen */
.abhaken{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--line);
  background:var(--card);cursor:pointer;position:relative;padding:0;transition:background .15s,border-color .15s}
.abhaken:hover:not(:disabled){border-color:var(--c-gruen)}
.abhaken.an{background:var(--c-gruen);border-color:var(--c-gruen)}
.abhaken.an::after{content:"";position:absolute;left:7px;top:4px;width:6px;height:11px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.abhaken:disabled{opacity:.4;cursor:default}
@media (hover:none){ .abhaken{width:30px;height:30px} .abhaken.an::after{left:9px;top:5px} }

/* ---------- Befehlspalette ---------- */
#palette{position:fixed;inset:0;z-index:240;display:flex;align-items:flex-start;justify-content:center;
  padding:11vh var(--sp-4) var(--sp-4)}
.pal-karte{position:relative;width:100%;max-width:640px;max-height:min(620px,78vh);display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lift);
  overflow:hidden;animation:ddauf .13s ease-out}
.pal-zeile{display:flex;align-items:center;gap:var(--sp-2);padding:12px var(--sp-4);border-bottom:1px solid var(--line-soft)}
.pal-zeile > svg{width:19px;height:19px;color:var(--ink-3);flex:none}
#palFeld{flex:1;min-width:0;height:auto;padding:0;border:0;background:none;font-family:var(--font);
  font-size:var(--fs-lg);color:var(--ink);outline:none;box-shadow:none}
.pal-liste{overflow-y:auto;padding:6px;overscroll-behavior:contain}
.pal-gruppe{padding:10px 10px 4px;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.pal-eintrag{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);cursor:pointer;min-height:42px}
.pal-eintrag.aktiv{background:var(--brand-soft)}
.pal-icon{width:28px;height:28px;border-radius:7px;background:var(--card-2);display:inline-flex;
  align-items:center;justify-content:center;flex:none;color:var(--ink-2)}
.pal-eintrag.aktiv .pal-icon{background:var(--card);color:var(--brand-text)}
.pal-icon svg{width:16px;height:16px}
.pal-text{display:flex;flex-direction:column;min-width:0;flex:1}
.pal-titel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.pal-sub{font-size:var(--fs-sm);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-eintrag kbd,.pal-zeile kbd,.pal-fuss kbd{min-width:0;height:20px;padding:0 6px;font-size:10.5px}
.pal-leer{padding:var(--sp-5) var(--sp-4);text-align:center}
.pal-fuss{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;padding:8px var(--sp-4);
  border-top:1px solid var(--line-soft);background:var(--card-2)}
.pal-fuss .grow{flex:1}
.pal-fuss span{display:inline-flex;gap:4px;align-items:center}
@media (max-width:640px){
  #palette{padding:max(10px, env(safe-area-inset-top)) 10px 10px}
  .pal-karte{max-height:calc(100dvh - 20px)}
  .pal-fuss{display:none}
  .pal-eintrag{min-height:48px}
}
@media (prefers-reduced-motion:reduce){ .pal-karte{animation:none} }

/* Hinweis im Suchfeld oben */
.search{position:relative}
.pal-hinweis{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:inline-flex;gap:2px;
  background:none;border:0;padding:2px;cursor:pointer}
.pal-hinweis kbd{min-width:0;height:20px;padding:0 5px;font-size:10.5px}
.search input{padding-right:64px}
@media (max-width:860px){ .pal-hinweis{display:none} .search input{padding-right:12px} }

/* ---------- Mein Tag ---------- */
.heute-kopf h1{font-size:28px}
.heute-satz{font-size:var(--fs-md);color:var(--ink-2);margin:calc(-1 * var(--sp-2)) 0 var(--sp-4);max-width:70ch}
.heute-raster{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--sp-4);align-items:start}
.heute-spalte{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4);min-width:0}
.heute-block{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-3) var(--sp-2)}
.heute-block > header,.heute-morgen > summary{display:flex;align-items:baseline;gap:var(--sp-2);padding:2px 6px 8px}
.heute-block h2{font-size:var(--fs-lg);font-weight:600;margin:0}
.heute-morgen > summary{cursor:pointer;list-style:none}
.heute-morgen > summary::-webkit-details-marker{display:none}
.heute-morgen > summary::after{content:"›";margin-left:auto;color:var(--ink-3);transition:transform .15s}
.heute-morgen[open] > summary::after{transform:rotate(90deg)}
.heute-unter{font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:6px 6px 4px}
.heute-unter.rot{color:var(--c-rot)}
.heute-liste{display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
.heute-zeile{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:52px;padding:8px 6px;
  border:0;border-radius:var(--r);background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.heute-zeile:hover{background:var(--card-2)}
.heute-zeile:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.heute-zeit{flex:none;width:70px;font-variant-numeric:tabular-nums;font-weight:500;font-size:var(--fs-base)}
.heute-zeit .muted{font-weight:400}
.heute-text{display:flex;flex-direction:column;min-width:0;flex:1}
.heute-text strong{font-weight:500;overflow:hidden;text-overflow:ellipsis}
.heute-text .muted{font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.heute-zeile.vorbei{opacity:.55}
.heute-zeile.als-naechstes{background:var(--brand-soft)}
.heute-zeile.erledigt .heute-text strong{text-decoration:line-through;color:var(--ink-3)}
.heute-zeile.erledigt{transition:opacity .5s .3s;opacity:.4}
.heute-zeile .btn.klein span{margin-left:2px}
.heute-leer{padding:4px 6px 10px;font-size:var(--fs-sm)}
.heute-frei{display:grid;gap:var(--sp-2)}
.jetzt{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3);background:var(--brand-soft);border-color:var(--brand-line)}
.jetzt > div{display:grid;gap:3px}
.jetzt-label{font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--brand-text)}
.jetzt-termin strong{font-size:var(--fs-lg);font-weight:600}
.jetzt-termin .aktionen{margin-top:var(--sp-2)}
.jetzt-uhr{grid-template-columns:1fr auto;align-items:center}
.jetzt-uhr .jetzt-label{grid-column:1 / -1}
.jetzt-wert{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.jetzt-uhr .jetzt-was{grid-column:1}
.jetzt-uhr .btn{grid-row:2 / span 2;grid-column:2}
.jetzt + .heute-block,.heute-spalte > .jetzt:only-child{margin-top:0}
@media (max-width:900px){ .heute-raster{grid-template-columns:minmax(0,1fr)} }
@media (max-width:640px){
  .heute-kopf h1{font-size:24px}
  .heute-block{padding:var(--sp-2)}
  .heute-zeit{width:58px;font-size:var(--fs-sm)}
  .heute-zeile{min-height:56px}
}

/* ---------- Drehtag ---------- */
.dreh{max-width:1180px}
.dreh-kopf{display:flex;gap:var(--sp-3);align-items:flex-start;margin-bottom:var(--sp-4)}
.dreh-kopf .grow{flex:1;min-width:0}
.dreh-kopf .eyebrow{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand-text);margin-bottom:4px}
.dreh-kopf .eyebrow svg{width:14px;height:14px}
.dreh-kopf h1{font-size:26px;line-height:1.15;margin:0 0 2px;text-wrap:balance}
.dreh-status{flex:none;font-size:var(--fs-sm);color:var(--ink-3);padding-top:6px;white-space:nowrap}
.dreh-knoepfe{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-2);margin-bottom:var(--sp-4)}
.dreh-knopf{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;
  min-height:62px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  color:var(--ink);text-decoration:none;font:inherit;text-align:left;cursor:pointer}
.dreh-knopf svg{grid-row:1 / span 2;width:22px;height:22px;color:var(--brand-text)}
.dreh-knopf span{font-weight:500}
.dreh-knopf small{color:var(--ink-3);font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.dreh-knopf:hover{border-color:var(--brand-line)}
.dreh-knopf.an{background:var(--brand-soft);border-color:var(--brand-line)}
.dreh-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);align-items:start}
.dreh-block{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-3);
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2);min-width:0}
.dreh-block > header{display:flex;align-items:center;gap:var(--sp-2)}
.dreh-block h2{font-size:var(--fs-lg);font-weight:600;margin:0;flex:1}
.dreh-zahl{font-variant-numeric:tabular-nums;font-size:var(--fs-sm);color:var(--ink-3);padding:2px 9px;
  border-radius:999px;background:var(--card-2)}
.dreh-zahl.voll{background:var(--c-gruen-bg);color:var(--c-gruen)}
.dreh-liste{display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
.dreh-punkt{display:flex;align-items:center;gap:var(--sp-3);min-height:50px;padding:6px 4px;border-radius:var(--r)}
.dreh-punkt:hover{background:var(--card-2)}
.dreh-text{flex:1;min-width:0;overflow-wrap:anywhere}
.dreh-punkt.erl .dreh-text{text-decoration:line-through;color:var(--ink-3)}
.dreh-weg{opacity:.35}
.dreh-punkt:hover .dreh-weg,.dreh-weg:focus-visible{opacity:1}
@media (hover:none){ .dreh-weg{opacity:.6} }
.dreh-neu{display:flex;gap:var(--sp-2)}
.dreh-neu input{flex:1;min-width:0;height:44px}
.dreh-neu .btn{width:44px;height:44px;padding:0;justify-content:center}
.dreh-ideen summary{cursor:pointer;color:var(--brand-text);font-size:var(--fs-sm);padding:4px 0}
.dreh-idee{display:flex;gap:var(--sp-2);align-items:flex-start;padding:8px 0;border-top:1px solid var(--line-soft)}
.dreh-idee .grow{flex:1;min-width:0}
#drehNotiz{min-height:150px;width:100%}
.dreh-kontakt{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;padding:6px 0;border-top:1px solid var(--line-soft)}
.dreh-kontakt:first-of-type{border-top:0}
.dreh-kontakt .grow{flex:1;min-width:160px}
.dreh-info{white-space:pre-wrap;color:var(--ink-2);margin:0}
.dreh-dateien .section{margin-top:0}
.dreh-dateien .section > h3{display:none}
.dreh-kamera{cursor:pointer}
.dreh-dateien{grid-column:1 / -1}
@media (max-width:900px){ .dreh-raster{grid-template-columns:minmax(0,1fr)} }
@media (max-width:640px){
  .dreh-kopf h1{font-size:22px}
  .dreh-knoepfe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dreh-knopf{min-height:58px;padding:8px 10px;column-gap:8px}
  .dreh-block{padding:var(--sp-2) var(--sp-3)}
}

/* ---------- KI-Assistent ---------- */
:root{--ki:#0F766E;--ki-bg:#E3F3F0;--ki-l:#A7DCD4}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--ki:#3CCFBD;--ki-bg:#12302C;--ki-l:#1F5C55} }
:root[data-theme="dark"]{--ki:#3CCFBD;--ki-bg:#12302C;--ki-l:#1F5C55}
.feldkopf{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-bottom:6px}
.feldkopf label{margin:0}
.kiknopf{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border-radius:999px;
  border:1px solid var(--ki-l);background:var(--ki-bg);color:var(--ki);font:inherit;font-size:var(--fs-sm);
  font-weight:500;cursor:pointer;white-space:nowrap}
.kiknopf:hover:not(:disabled){filter:brightness(.97)}
.kiknopf:disabled{opacity:.6;cursor:progress}
.ki-box{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2);margin-bottom:var(--sp-2);
  padding:var(--sp-2);border:1px dashed var(--ki-l);border-radius:var(--r-lg);background:var(--ki-bg)}
.ki-kopf{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--ki);font-weight:500}
.ki-kopf .muted{font-weight:400;margin-left:auto}
.ki-vorschlag{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;
  display:grid;gap:8px;min-width:0}
.ki-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fs-md);color:var(--ink)}
.ki-tags{font-size:var(--fs-sm);color:var(--ki);overflow-wrap:anywhere}
.ki-chips{display:flex;gap:6px;flex-wrap:wrap}
.ki-chip{height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  color:var(--ink-2);font:inherit;font-size:var(--fs-sm);cursor:pointer}
.ki-chip:hover:not(:disabled){border-color:var(--ki-l);color:var(--ki)}
.ki-fuss{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.ki-fehler{color:var(--c-rot);font-size:var(--fs-sm);padding:4px 2px}
.ki-vorschlag.laedt{opacity:.75}
.ki-balken{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--card-2) 0%,var(--card-2) 35%,var(--ki-bg) 50%,var(--card-2) 65%,var(--card-2) 100%);
  background-size:300% 100%;animation:kiSchimmer 2.4s ease-in-out infinite}
.ki-vorschlag:nth-child(3) .ki-balken{animation-delay:.25s}
.ki-vorschlag:nth-child(4) .ki-balken{animation-delay:.5s}
@keyframes kiSchimmer{from{background-position:100% 0}to{background-position:0 0}}
.ki-balken.kurz{width:60%}
textarea.ki-frisch{box-shadow:0 0 0 3px var(--ki-l);transition:box-shadow .4s}
@media (prefers-reduced-motion:reduce){ .ki-balken{animation:none} }
.ki-einst .karten-kopf{display:flex;align-items:center;gap:var(--sp-2);justify-content:space-between;flex-wrap:wrap}
.ki-schluessel{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.ki-schluessel input{flex:1 1 200px;min-width:0}
.ki-verbrauch{display:grid;gap:8px}
.ki-zahl{display:flex;flex-direction:column}
.ki-zahl strong{font-size:26px;font-variant-numeric:tabular-nums}
.ki-balkenhalter{height:8px;border-radius:5px;background:var(--card-2);overflow:hidden}
.ki-balkenhalter i{display:block;height:100%;background:var(--ki)}
.ki-balkenhalter i.voll{background:var(--c-rot)}
.ki-funktionsliste{display:grid;gap:4px;margin-top:var(--sp-2);font-size:var(--fs-sm)}
.ki-funktionsliste div{display:flex;justify-content:space-between;gap:var(--sp-2)}
.ki-fehlerliste summary{cursor:pointer;font-size:var(--fs-sm);color:var(--ink-2);margin-top:var(--sp-2)}
/* Credits (02.10.2026) */
.ki-paket{margin:0;font-weight:600}
.ki-anbieterkosten{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--line-soft)}
.ki-anbieterkosten summary{cursor:pointer;font-size:var(--fs-sm);color:var(--ink-2)}
.einstnav button svg.ki-nav{stroke:currentColor;stroke-width:.2}

/* Was die KI für die Vorschläge herangezogen hat */
.ki-kontext{margin:calc(var(--sp-2) * -1) 0 var(--sp-2);line-height:1.4}
.kd-ki .karten-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.kd-ki-hinweis{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;cursor:help;
  border:1px solid var(--ki-l);background:var(--ki-bg);color:var(--ki);font-size:var(--fs-xs, 12px);font-weight:500;white-space:nowrap}

/* ---------- KI-Icon (kiIcon() in 59-ki.js) ---------- */
.ki-ico{display:inline-block;width:1.15em;height:1.15em;flex:none;color:var(--ki);vertical-align:middle}
.ki-ico svg{display:block;width:100%;height:100%;overflow:visible}
.ki-ico .kt{fill:currentColor;stroke:currentColor;stroke-width:.2;stroke-linejoin:round;transform-box:fill-box;transform-origin:center}
@keyframes kiWelle{0%,100%{transform:scale(1);opacity:1}45%{transform:scale(.82);opacity:.5}}
.ki-ico.laeuft .kt-punkt{animation:kiWelle 2.8s ease-in-out infinite}
.ki-ico.laeuft .kt-mini{animation:kiWelle 2.8s ease-in-out .35s infinite}
.ki-ico.laeuft .kt-mittel{animation:kiWelle 2.8s ease-in-out .7s infinite}
.ki-ico.laeuft .kt-gross{animation:kiWelle 2.8s ease-in-out 1.05s infinite}
.kiknopf .ki-ico,.ki-kopf .ki-ico{font-size:16px}
.kd-ki-hinweis{gap:4px;padding-left:6px}
.kd-ki-hinweis .ki-ico{font-size:14px}
:is(.kiknopf:not(.laeuft),.kd-ki-hinweis):hover .kt-punkt{animation:kiWelle 1.6s ease-in-out 1}
:is(.kiknopf:not(.laeuft),.kd-ki-hinweis):hover .kt-mini{animation:kiWelle 1.6s ease-in-out .15s 1}
:is(.kiknopf:not(.laeuft),.kd-ki-hinweis):hover .kt-mittel{animation:kiWelle 1.6s ease-in-out .3s 1}
:is(.kiknopf:not(.laeuft),.kd-ki-hinweis):hover .kt-gross{animation:kiWelle 1.6s ease-in-out .45s 1}
/* Glitzern, solange die KI schreibt: blasser Lichtschleier + leiser Schein */
.kiknopf{position:relative;overflow:hidden;isolation:isolate;gap:6px;padding-left:10px}
.kiknopf::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .8s ease;pointer-events:none;
  background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--ki-l) 55%,transparent) 50%,transparent 80%);
  background-size:300% 100%;background-position:130% 0}
.kiknopf.laeuft::after{opacity:1;animation:kiSchleier 3.2s ease-in-out infinite}
.kiknopf.laeuft{animation:kiHauch 3.2s ease-in-out infinite}
.kiknopf.laeuft:disabled{opacity:1}
@keyframes kiSchleier{from{background-position:130% 0}to{background-position:-30% 0}}
@keyframes kiHauch{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--ki-l) 45%,transparent)}}
.ki-schritt{transition:opacity .45s ease}
@media (prefers-reduced-motion:reduce){ .ki-ico .kt,.kiknopf,.kiknopf::after,.ki-balken{animation:none!important} }

/* ==== 51-schnell-ki2.css ==== */
/* ================================================================== *
 * Schnell ändern, Stundenbudget, KI Stufe 2 (24.09.2026)
 * ================================================================== */

/* ---------- Datum direkt an der Karte ---------- */
.task-foot .fristknopf{font:inherit;font-size:var(--fs-sm);color:var(--ink-2);background:none;border:0;
  padding:2px 6px;margin:-2px -6px;border-radius:6px;cursor:pointer;white-space:nowrap;flex:none}
.task-foot .fristknopf:hover{background:var(--card-2);color:var(--ink)}
.task-foot .fristknopf.spaet{color:var(--c-rot);font-weight:500}
@media (pointer:coarse){ .task-foot .fristknopf{padding:6px 8px;margin:-6px -8px} }

/* ---------- Ungespeicherter Entwurf ---------- */
.entwurfkasten{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  border:1px solid var(--c-orange-l);border-left:4px solid var(--c-orange);background:var(--c-orange-bg);
  border-radius:var(--r);padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-3)}
.entwurfkasten .grow{flex:1 1 220px;min-width:0;display:grid;gap:2px}
.entwurfkasten strong{color:var(--c-orange)}
.entwurfkasten small{color:var(--ink-2);font-size:var(--fs-sm)}

/* ---------- Stundenbudget ---------- */
.knapp{color:var(--c-orange);font-weight:500}
.stat .n.knapp{color:var(--c-orange)}
.budgetkasten{display:flex;align-items:baseline;gap:6px var(--sp-3);flex-wrap:wrap;border-radius:var(--r);
  padding:var(--sp-2) var(--sp-3);margin-top:var(--sp-3);border:1px solid var(--c-orange-l);
  border-left:4px solid var(--c-orange);background:var(--c-orange-bg)}
.budgetkasten strong{color:var(--c-orange)}
.budgetkasten span{color:var(--ink-2);font-size:var(--fs-sm)}
.budgetkasten.voll{border-color:var(--c-rot-l);border-left-color:var(--c-rot);background:var(--c-rot-bg)}
.budgetkasten.voll strong{color:var(--c-rot)}

/* ---------- Feedback-Übersetzer im Chat ---------- */
.kchat-titel{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-2)}
.kchat-titel h3{margin:0}
.kundenchat > .ki-box{margin-bottom:var(--sp-3)}
.ki-gruppe{display:grid;gap:6px;min-width:0}
.ki-gruppe-titel{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.ki-gruppe-titel .muted{font-weight:400}
.ki-punkt{display:flex;align-items:flex-start;gap:8px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:6px 10px;min-width:0}
.ki-punkt > input[type=checkbox]{margin:9px 0 0;accent-color:var(--ki);width:16px;height:16px;flex:none}
.ki-punkt-inhalt{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.ki-punkt-text{flex:1 1 180px;min-width:0;border:0;background:transparent;font:inherit;color:var(--ink);
  padding:6px 4px;border-radius:6px}
.ki-punkt-text:focus{outline:none;background:var(--card-2)}
.ki-punkt:has(> input:not(:checked)) .ki-punkt-text{color:var(--ink-3)}
.zeitmarke{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--c-orange);
  background:var(--c-orange-bg);border-radius:4px;padding:1px 6px;flex:none}
.ki-antworthinweis{margin:-2px 0 2px 34px}
textarea.ki-antwort{width:100%;min-height:72px;resize:vertical}
.ki-box .aktionen{display:flex;gap:var(--sp-2);flex-wrap:wrap}

/* ---------- Schnellerfassung mit KI ---------- */
.schnell-fuss .kiknopf{height:32px}
.schnell-vorschau{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2);
  padding:var(--sp-2);border:1px dashed var(--ki-l);border-radius:var(--r-lg);background:var(--ki-bg);
  max-height:min(52vh,460px);overflow:auto;margin:var(--sp-3)}
.schnell-eintrag .tag{flex:none}
.schnell-meta{flex-basis:100%;padding-left:4px;overflow-wrap:anywhere}
.schnell-vorschau .aktionen{display:flex;gap:var(--sp-2);flex-wrap:wrap}
@media (max-width:640px){
  .schnell-fuss{flex-wrap:wrap}
  .schnell-fuss #schnellHinweis{flex-basis:100%}
}

/* ==== 52-lead-ki.css ==== */
/* ================================================================== *
 * Lead-KI (54-lead-ki.js): KI-Lead-Suche und KI-Analyse
 * ================================================================== */
/* KI-Teil am Knopf „+ Lead“ (wie der Pfeil bei „+ Aufgabe“) */
.knopfpaar.allein > .btn:first-child{border-radius:var(--r);padding-right:inherit}
:root .knopfpaar.allein > .btn:first-child{border-radius:999px;padding-right:20px}
.knopfpaar > .btn.lki-pfeil{padding:0 12px 0 9px}
.knopfpaar > .btn.lki-pfeil .ki-ico{color:currentColor;font-size:16px}
.knopfpaar > .btn.lki-pfeil svg{width:100%;height:100%}

.lki-titel{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.lki-titel h3{display:flex;align-items:center;gap:6px;margin:0}
.lki-titel h3 .ki-ico{font-size:17px}
.lki-eingabe{display:grid;gap:var(--sp-2)}
.lki-eingabe .field{margin:0}
.lki-leiste{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap}
.lki-leiste .schalter{margin:0}
.lki-ergebnis:not(:empty){margin-top:var(--sp-3);display:grid;gap:var(--sp-2)}
.lki-vorschlaege .aktionen{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.lki-vorschlaege .aktionen a{color:inherit}
.lki-feld{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--sp-2);align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px}
.lki-feld.hat{background:var(--card-2)}
.lki-haken{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:500;padding-top:7px;cursor:pointer}
.lki-wert{display:grid;gap:4px;min-width:0}
.lki-wert input,.lki-wert textarea{width:100%}
.lki-wert small{overflow-wrap:anywhere}

/* KI-Analyse: eigener Abschnitt, auf- und zuklappbar, mit Luft zu den Lead-Infos */
.lki-ana{margin-top:var(--sp-5)}
.lki-klapp{display:flex;align-items:center;gap:8px;background:none;border:0;padding:4px 0;color:inherit;font:inherit;cursor:pointer;min-width:0}
.lki-klapp > svg{width:15px;height:15px;flex:none;color:var(--ink-2);transition:transform .2s ease}
.lki-ana.zu .lki-klapp > svg{transform:rotate(-90deg)}
.lki-ana.zu .lki-titel{margin-bottom:0}
.lki-score{font-size:11.5px;font-weight:500;color:var(--ink-2);background:var(--card-2);border:1px solid var(--line);
  border-radius:999px;padding:1px 8px;font-variant-numeric:tabular-nums}
.lki-koerper{display:grid;gap:var(--sp-2)}
.lki-analyse{display:grid;gap:var(--sp-3);background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-4);box-shadow:var(--shadow)}
.lki-fazit{margin:0;font-weight:500}
.lki-schritt{display:grid;gap:2px;padding:10px 12px;border-radius:var(--r);background:var(--brand-soft);border:1px solid var(--brand-line)}
.lki-schritt span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--brand-text);font-weight:600}
.lki-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
@media (max-width:640px){.lki-raster{grid-template-columns:minmax(0,1fr)}.lki-feld{grid-template-columns:minmax(0,1fr)}.lki-haken{padding-top:0}}
.lki-block h4{margin:0 0 6px;font-size:var(--fs-sm);color:var(--ink-2);font-weight:600}
.lki-block ul{margin:0;padding-left:1.2em;display:grid;gap:3px}
.lki-block details{border-top:1px solid var(--line-soft);padding:6px 0}
.lki-block details summary{cursor:pointer;font-weight:500}
.lki-block details p{margin:6px 0 0;color:var(--ink-2)}
.lki-fuss{margin:0}
.lki-fuss a{color:inherit}

/* KI-Lead-Suche: kleiner Knopf in der Leiste wie „+ Aufgabe“ / „→ Kunde“ */
.lki-tb{display:inline-flex;align-items:center;gap:6px}
.lki-tb .ki-ico{font-size:15px}
#ldKiSuche{margin-top:var(--sp-3)}
.lki-kopfzeile{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lki-kopfzeile .ki-ico{font-size:16px}
.lki-kopfzeile .muted{margin-left:auto}

/* ==== 53-datumsfeld.css ==== */
/* ==================================================================
   Datumsfeld und Kalenderblatt (30.09.2026) – gehört zu 05-datumsfeld.js
   ================================================================== */

/* ---------- Das Feld: sieht aus wie jedes andere Eingabefeld ---------- */
.dfeld{
  position:relative;display:inline-flex;align-items:center;gap:2px;
  width:220px;max-width:100%;height:var(--h-ctl);padding:0 4px 0 14px;
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  container-type:inline-size;vertical-align:middle;
  transition:border-color .15s, box-shadow .15s;
}
.dfeld:hover{border-color:var(--line-strong,var(--ink-3))}
.dfeld:focus-within,.dfeld.offen{
  border-color:var(--brand);outline:0}
.field .dfeld{width:100%}
.eng-links > .field:first-child .dfeld,
.eng-rechts > .field:last-child .dfeld,
.eng-links2 > .field:first-child .dfeld,
.eng-links2 > .field:nth-child(2) .dfeld{width:220px}

.dfeld .dfeld-text,
.field .dfeld .dfeld-text{
  flex:1 1 0;width:0;min-width:0;height:100%;padding:0;margin:0;
  border:0;border-radius:0;background:transparent;outline:none;box-shadow:none;
  color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.dfeld .dfeld-text::placeholder{color:var(--ink-3);letter-spacing:.06em}
.dfeld .dfeld-text:read-only{cursor:pointer}
.dfeld-hinweis{
  flex:none;font-size:var(--fs-xs,11.5px);font-weight:500;color:var(--ink-3);
  white-space:nowrap;padding:3px 8px;border-radius:999px;background:var(--card-2);
  pointer-events:none;
}
.dfeld-hinweis:empty{display:none}
.dfeld-knopf{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border:0;border-radius:999px;
  background:transparent;color:var(--ink-3);cursor:pointer;
}
.dfeld-knopf svg{width:16px;height:16px}
.dfeld-knopf:hover{background:var(--card-2);color:var(--ink)}
.dfeld.offen .dfeld-knopf{background:var(--brand-soft);color:var(--brand-text)}
.dfeld.unklar{border-color:var(--c-gold)}
.dfeld.unklar .dfeld-hinweis{display:none}
.dfeld.falsch{border-color:var(--c-rot);outline-color:var(--c-rot);animation:dfWackeln .35s}
@keyframes dfWackeln{20%,60%{transform:translateX(-3px)}40%,80%{transform:translateX(3px)}}
.dfeld.gesperrt{background:var(--card-2);border-color:var(--line-soft)}
.dfeld.gesperrt .dfeld-knopf{display:none}
.dfeld.gesperrt .dfeld-text{color:var(--ink-2)}
/* schmales Feld: der Hinweis weicht zuerst */
@container (max-width: 200px){ .dfeld-hinweis{display:none} }

/* Zeiterfassung: „von / bis“ steckt schon in einer Pille */
.datectl .dfeld{width:168px;height:34px;border:0;outline:none;padding:0 0 0 2px;background:transparent}
.datectl .dfeld:focus-within,.datectl .dfeld.offen{outline:none}
.datectl .dfeld-hinweis{display:none}

/* ---------- Kalenderblatt ---------- */
.dpop{
  position:fixed;z-index:400;width:318px;max-width:calc(100vw - 16px);
  padding:10px;background:var(--card);color:var(--ink);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-lift);
  animation:dpopAuf .14s ease-out;font-size:var(--fs-base);
}
@keyframes dpopAuf{from{opacity:0;transform:translateY(-4px) scale(.985)}to{opacity:1;transform:none}}

.dpop-schnell{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;
  padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line-soft);
}
.dpop-schnell button{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;
  padding:7px 10px;border:1px solid transparent;border-radius:14px;
  background:var(--card-2);color:var(--ink);text-align:left;cursor:pointer;
  font-family:var(--font);transition:background .12s, color .12s;
}
.dpop-schnell b{font-size:13px;font-weight:600;white-space:nowrap}
.dpop-schnell small{font-size:11px;color:var(--ink-3);white-space:nowrap}
.dpop-schnell button:hover{background:var(--brand-soft);color:var(--brand-text)}
.dpop-schnell button:hover small{color:var(--brand-text);opacity:.8}
.dpop-schnell button.gewaehlt{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-text)}
.dpop-schnell button:disabled{opacity:.35;cursor:default}
.dpop-schnell button:focus-visible{outline:2px solid var(--brand);outline-offset:1px}

.dpop-kopf{display:flex;align-items:center;justify-content:space-between;padding:0 0 4px}
.dpop-nav{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border:0;border-radius:999px;
  background:none;color:var(--ink-2);cursor:pointer}
.dpop-nav svg{width:16px;height:16px}
.dpop-nav:hover{background:var(--card-2);color:var(--ink)}
.dpop-titel{
  border:0;background:none;padding:5px 12px;border-radius:999px;cursor:pointer;
  font-family:var(--font);font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.dpop-titel span{color:var(--ink-3);font-weight:500}
.dpop-titel:hover{background:var(--card-2)}

.dpop-raster{display:grid;grid-template-columns:24px repeat(7,minmax(0,1fr));gap:2px;align-items:center}
.dpop-wt{
  padding:4px 0;text-align:center;font-size:10.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.dpop-wt.we{opacity:.7}
.dpop-kw{text-align:center;font-size:10px;color:var(--ink-3);opacity:.65;font-variant-numeric:tabular-nums}
.dpop-kw.kopf{font-weight:600;letter-spacing:.04em}
.dpop-tag{
  position:relative;aspect-ratio:1;min-width:0;padding:0;border:0;border-radius:999px;
  background:none;color:var(--ink);cursor:pointer;
  font-family:var(--font);font-size:13.5px;font-variant-numeric:tabular-nums;
  transition:background .1s;
}
.dpop-tag:hover{background:var(--card-2)}
.dpop-tag.we{color:var(--ink-2)}
.dpop-tag.aus{color:var(--ink-3);opacity:.45}
.dpop-tag.heute{color:var(--brand-text);font-weight:700}
.dpop-tag.heute::after{
  content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;
  border-radius:50%;background:var(--brand)}
.dpop-tag.gewaehlt{
  color:var(--on-brand);font-weight:600;opacity:1;
  background:linear-gradient(140deg, color-mix(in srgb, var(--brand) 78%, #FFFFFF), var(--brand));
  box-shadow:0 8px 16px -10px color-mix(in srgb, var(--brand) 90%, transparent)}
.dpop-tag.gewaehlt.heute::after{background:var(--on-brand)}
.dpop-tag:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.dpop-tag:disabled{opacity:.2;cursor:default;background:none}

.dpop-fuss{
  display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px;
  margin-top:6px;padding-top:8px;border-top:1px solid var(--line-soft);
  font-size:11.5px;color:var(--ink-3)}
.dpop-tipp b{font-weight:600;color:var(--ink-2);background:var(--card-2);padding:1px 6px;border-radius:6px}
.dpop-leeren{
  margin-left:auto;padding:5px 12px;border:0;border-radius:999px;background:none;cursor:pointer;
  font-family:var(--font);font-size:12.5px;font-weight:500;color:var(--c-rot)}
.dpop-leeren:hover{background:var(--c-rot-bg)}

/* ---------- Handy: Blatt von unten, große Tipp-Flächen ---------- */
.dpop-hinter{position:fixed;inset:0;z-index:399;background:rgba(20,16,12,.38);animation:dpopHinter .18s}
@keyframes dpopHinter{from{opacity:0}}
.dpop.blatt{
  left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;
  padding:10px 16px calc(16px + env(safe-area-inset-bottom));
  border-radius:24px 24px 0 0;border-bottom:0;animation:dpopHoch .22s cubic-bezier(.2,.8,.2,1)}
.dpop.blatt::before{
  content:"";display:block;width:40px;height:4px;margin:0 auto 12px;border-radius:999px;background:var(--line)}
@keyframes dpopHoch{from{transform:translateY(100%)}}
.dpop.blatt .dpop-schnell button{padding:10px 12px}
.dpop.blatt .dpop-schnell b{font-size:14px}
.dpop.blatt .dpop-tag{font-size:16px}
.dpop.blatt .dpop-tipp{display:none}
.dpop.blatt .dpop-leeren{font-size:14px;padding:8px 14px}
html.dpop-offen{overflow:hidden}

@media (prefers-reduced-motion: reduce){
  .dpop,.dpop.blatt,.dpop-hinter,.dfeld.falsch{animation:none}
}

/* Schnellerfassung auf dem Handy: das Datum teilt sich die Zeile */
@media (max-width: 640px){ .quickadd .dfeld{flex:1 1 140px;width:auto} }

/* ==================================================================
   Uhrzeitfeld (03.10.2026) – gehört zu 05-zeitfeld.js.
   Feld und Blatt benutzen die Klassen des Datumsfelds, hier nur die
   Unterschiede: schmaleres Feld, zwei Raster (Stunde | Minute).
   ================================================================== */
.zfeld{width:150px}
.field .zfeld{width:100%}
.eng-links2 > .field:nth-child(2) .zfeld{width:150px}
.zpop{width:372px}
.zpop .dpop-schnell small{font-variant-numeric:tabular-nums}
.zpop-spalten{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px;padding-top:4px}
.zpop-spalte + .zpop-spalte{padding-left:12px;border-left:1px solid var(--line-soft)}
.zpop-titel{padding:2px 2px 6px;font-size:10.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3)}
.zpop-titel span{text-transform:none;letter-spacing:0;font-weight:500;opacity:.8}
.zpop-raster{display:grid;gap:3px}
.zpop-stunden{grid-template-columns:repeat(6,minmax(0,1fr))}
.zpop-minuten{grid-template-columns:repeat(3,minmax(0,1fr))}
.zpop .dpop-tag{aspect-ratio:auto;height:34px;font-size:13px}
.zpop .dpop-tag.heute::after{bottom:3px}
.dpop.zpop.blatt{width:auto}
.dpop.zpop.blatt .dpop-tag{height:42px;font-size:15px}

/* ==== 54-schnittplatz.css ==== */
/* ==================================================================
   „Schnittplatz“ – Oberfläche seit 30.09.2026
   Dock statt Seitenleiste, große Befehlszeile, breite Überschriften
   (Roboto Flex), Zahlen in Roboto Mono, Seitenansicht als schwebender
   Inspector. Der weiche Stil mit Schatten bleibt – nur weiter gedacht.
   Diese Datei liegt über allen anderen; sie ändert Aussehen, keine Logik.
   ================================================================== */

@font-face{font-family:"Roboto Flex";font-style:normal;font-display:block;
  font-weight:100 1000;font-stretch:25% 151%;
  src:url('/fonts/roboto-flex-latin.woff2') format('woff2-variations'),
      url('/fonts/roboto-flex-latin.woff2') format('woff2')}
@font-face{font-family:"Roboto Mono";font-style:normal;font-display:block;font-weight:100 700;
  src:url('/fonts/roboto-mono-latin.woff2') format('woff2-variations'),
      url('/fonts/roboto-mono-latin.woff2') format('woff2')}

:root{
  --font:"Roboto Flex",Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-base:14.5px; --fs-xl:26px; --fs-2xl:34px;
  --h-ctl:40px; --h-pill:32px;
  --r-sm:12px; --r:22px; --r-lg:24px;
  --nav-w:92px;

  --bg:#F5F1EC; --card:#FFFFFF; --card-2:#F0EAE3;
  --line:#E3DAD0; --line-soft:#ECE5DD;
  --ink:#1E1915; --ink-2:#5C534B; --ink-3:#8F847A;
  --brand-2:color-mix(in srgb, var(--brand) 72%, #FFFFFF);
  --shadow:0 1px 2px rgba(40,24,10,.05), 0 10px 26px -16px rgba(40,24,10,.32);
  --shadow-lift:0 2px 10px rgba(40,24,10,.07), 0 30px 60px -28px rgba(40,24,10,.45);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141110; --card:#1D1916; --card-2:#26211D;
    --line:#342D27; --line-soft:#2A241F;
    --ink:#F4EEE8; --ink-2:#BDB2A8; --ink-3:#877D74;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 28px -16px rgba(0,0,0,.9);
    --shadow-lift:0 2px 10px rgba(0,0,0,.55), 0 30px 60px -26px rgba(0,0,0,.95);
  }
}
:root[data-theme="dark"]{
  --bg:#141110; --card:#1D1916; --card-2:#26211D;
  --line:#342D27; --line-soft:#2A241F;
  --ink:#F4EEE8; --ink-2:#BDB2A8; --ink-3:#877D74;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 28px -16px rgba(0,0,0,.9);
  --shadow-lift:0 2px 10px rgba(0,0,0,.55), 0 30px 60px -26px rgba(0,0,0,.95);
}

body{font-variation-settings:"opsz" 14}
.mono,.nums,.kdnr,.stat .n,.nums.gross,#uhrLauf{
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---------- Überschriften: breit und kräftig ---------- */
:root h1{font-weight:700;letter-spacing:-.03em;font-stretch:118%;
  font-variation-settings:"opsz" 72;text-wrap:balance}
:root .page-head h1{font-size:clamp(28px, 2.6vw, 38px);line-height:1.05}
:root .page-head small.muted{font-size:13.5px}
:root .page-head{margin:6px 0 var(--sp-4);align-items:flex-end}
:root h2{letter-spacing:-.015em;font-stretch:108%}
:root .drawer-head h1{font-size:26px;font-stretch:112%}

/* ================= Dock (Navigation) ================= */
@media (min-width:641px){
  :root #nav{
    width:var(--nav-w);padding:16px 0 18px;gap:12px;align-items:center;
    background:transparent;border-right:0;box-shadow:none;transform:none !important;
  }
  :root #nav .brand{padding:0;min-height:0;justify-content:center;display:flex}
  :root #nav .brand .logo,:root #nav .brand .grow{display:none}
  :root #nav .brand::before{
    content:"G";display:grid;place-items:center;width:50px;height:50px;border-radius:17px;
    background:linear-gradient(140deg,var(--brand-2),var(--brand));color:var(--on-brand);
    font:800 23px/1 var(--font);font-stretch:135%;
    box-shadow:0 12px 24px -12px var(--brand);
  }
  :root #nav nav{
    gap:3px;padding:6px;border-radius:999px;background:var(--card);box-shadow:var(--shadow);
    align-items:center;
  }
  :root #nav nav a{
    position:relative;width:48px;height:46px;padding:0;justify-content:center;
    border-radius:999px;color:var(--ink-3);transition:background .15s,color .15s;
  }
  :root #nav nav a svg{width:21px;height:21px;opacity:1}
  :root #nav nav a:hover{background:var(--card-2);color:var(--ink)}
  :root #nav nav a.active{background:var(--brand);color:var(--on-brand);
    box-shadow:0 10px 20px -10px var(--brand)}
  /* Beschriftung als Sprechblase neben dem Dock */
  :root #nav nav a > span{
    display:block !important;position:absolute;left:58px;top:50%;
    transform:translate(-4px,-50%);white-space:nowrap;pointer-events:none;
    padding:5px 11px;border-radius:999px;background:var(--ink);color:var(--bg);
    font-size:12.5px;font-weight:500;opacity:0;transition:.12s;z-index:80;
  }
  :root #nav nav a:hover > span,:root #nav nav a:focus-visible > span{opacity:1;transform:translate(0,-50%)}
  :root .nav-foot{flex-direction:column;align-items:center;gap:8px;margin-top:auto}
  :root .nav-foot .themebtn,:root .nav-foot .iconbtn{
    width:44px;height:44px;padding:0;flex:none;border-radius:999px;background:var(--card);
    box-shadow:var(--shadow);border:0;color:var(--ink-2)}
  :root .nav-foot .themebtn span{display:none}
  :root .nav-foot .iconbtn.active,:root .nav-foot a.active{background:var(--brand);color:var(--on-brand)}
  :root main{margin-left:var(--nav-w) !important}
  :root #menuBtn,:root #navScrim{display:none !important}
}
@media (min-width:641px) and (max-height:760px){
  :root #nav nav a{height:38px;width:44px}
  :root #nav .brand::before{width:42px;height:42px;font-size:19px;border-radius:14px}
  :root #nav{gap:8px;padding-top:12px}
}

/* Handy: Menü fährt von links herein, mit Beschriftung */
@media (max-width:640px){
  :root{--nav-w:264px}
  :root #nav{border-right:0;border-radius:0 26px 26px 0;background:var(--card);box-shadow:var(--shadow-lift)}
  :root #nav nav a{height:44px;border-radius:999px;padding:0 14px}
  :root #nav nav a.active{background:var(--brand);color:var(--on-brand)}
}

/* ================= Kopfzeile ================= */
:root #topbar{
  background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:0;
  padding:14px var(--sp-5) 10px 4px;gap:10px;
}
:root .search{max-width:640px}
:root #topbar .search input{
  height:40px;border-radius:999px;background:var(--card);border:1px solid var(--line);
  padding:0 16px 0 44px;box-shadow:var(--shadow);font-size:14.5px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F847A' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:16px center;background-size:18px;
}
:root #topbar .search input:focus{background-color:var(--card);border-color:var(--brand);
  outline:none;box-shadow:0 0 0 3px var(--brand-soft),var(--shadow)}
:root #results{border-radius:var(--r);border-color:var(--line);box-shadow:var(--shadow-lift);padding:6px}
:root #results button{border-radius:14px;border-bottom:0}
.tc-uhr{
  display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 15px;flex:none;
  border-radius:999px;background:var(--card);box-shadow:var(--shadow);
  font:500 13px var(--f-mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.tc-uhr b{color:var(--ink);font-weight:600}
.tc-uhr i{width:7px;height:7px;border-radius:50%;background:var(--brand);animation:tcPuls 2s infinite}
@keyframes tcPuls{50%{opacity:.25}}
/* Sekunden-Uhren malen ins Canvas (01-sekunden.js) – sitzt wie Text in der Zeile */
canvas.sek{display:inline-block;vertical-align:middle}
.tc-uhr{cursor:pointer}
@media (max-width:1100px){ .tc-uhr{display:none} }
:root .avatar{width:40px;height:40px;font-size:12.5px;border:0}
:root .avatar.mini{width:24px;height:24px;font-size:10px}
:root .glocke{border-radius:999px}
:root #uhrLauf{border-radius:999px}
:root .dash-grid .task:not(:hover){box-shadow:none}
:root #view{padding:6px var(--sp-5) var(--sp-6) 4px}
@media (max-width:640px){
  :root #topbar{padding:10px 12px 8px}
  :root #view{padding:4px 14px var(--sp-6)}
  :root #topbar .search input{height:40px;padding-left:40px;background-position:14px center}
}

/* ================= Flächen ================= */
:root .card,:root .table-wrap{border-radius:var(--r-lg);border-color:transparent;box-shadow:var(--shadow)}
:root .card.clickable:hover{transform:translateY(-1px);box-shadow:var(--shadow-lift)}
:root .card.clickable{transition:transform .15s,box-shadow .15s}
:root .modal-karte{border-radius:28px}
:root .dd-menu{border-radius:20px;padding:6px}
:root .dd-opt{border-radius:12px}
:root .hinweis{border-radius:var(--r);border-left-width:1px;
  box-shadow:inset 3px 0 0 var(--c-gold)}

/* Tabellen: ruhig, Spaltenköpfe als Etiketten */
:root th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;background:transparent;border-bottom:1px solid var(--line-soft)}
:root tbody tr{transition:background .1s}
:root tbody tr:hover{background:var(--card-2)}
:root td{border-bottom-color:var(--line-soft)}

/* Segmentschalter statt Knopfreihe */
:root .viewswitch{border:0;border-radius:999px;background:var(--card-2);padding:4px;gap:3px;height:auto;overflow:visible}
:root .viewswitch button{border:0 !important;border-radius:999px;height:34px;padding:0 14px;
  background:transparent;color:var(--ink-2);font-weight:500}
:root .viewswitch button:hover{background:color-mix(in srgb,var(--card) 60%,transparent);color:var(--ink)}
:root .viewswitch button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow);font-weight:600}
:root .viewswitch button.on svg{color:var(--brand)}

/* Board-Spalten (Aufgaben, Redaktionsplan) */
:root .col{border-radius:26px;background:var(--card-2)}
:root .task{border-radius:18px}

/* Kennzahlen */
:root .stat .n{font-weight:600;letter-spacing:-.05em}
:root .stat .l{letter-spacing:.08em;font-weight:600}
:root .stat::after{opacity:.35}

/* Dashboard-Kopf: Tag wie auf dem Monitor */
:root .hero{background:transparent;border:0;box-shadow:none;padding:6px 0 4px;margin-bottom:var(--sp-4)}
:root .hero h1{font-size:clamp(28px,3vw,42px);line-height:1.05}
:root .hero-date{font-weight:500;color:var(--ink-2);font-size:15px}
:root .hero-date .kw{font-family:var(--f-mono);color:var(--ink-3)}

/* ================= Seitenansicht = Inspector ================= */
@media (min-width:641px){
  :root .drawer-panel{
    top:12px;right:12px;bottom:12px;width:min(720px,calc(100% - 24px));
    border:0;border-radius:30px;background:var(--bg);box-shadow:var(--shadow-lift);
  }
  :root .drawer-backdrop{background:rgba(20,16,12,.22);backdrop-filter:blur(2px)}
  :root #drawer[data-voll] .drawer-panel{width:calc(100% - var(--nav-w) - 12px)}
}
:root .drawer-head .iconbtn{border-radius:999px}
:root .section>h3{font-size:11px;letter-spacing:.09em;font-weight:700;color:var(--ueberschrift)}

/* Etiketten und Pillen etwas runder */
:root .tag{border-radius:999px}
:root .toast{border-radius:999px}

/* ==== 55-zeitstrahl.css ==== */
/* ==================================================================
   Zeitstrahl (30.09.2026) – gehört zu 57-zeitstrahl.js
   ================================================================== */
.zs{--zs-col:84px;--zs-name:220px;display:flex;flex-direction:column;gap:14px}

/* Marken: Kreis = Beitrag, Quadrat = Aufgabe, Raute = Termin */
.zs-m{display:inline-block;flex:none;width:9px;height:9px;background:var(--mk,var(--ink-3))}
.zs-m.kreis{border-radius:50%}
.zs-m.quadrat{border-radius:2px}
.zs-m.raute{transform:rotate(45deg);border-radius:2px;width:8px;height:8px}
.zs-m.wartet-ring{background:transparent;box-shadow:inset 0 0 0 2px var(--mk,var(--c-gold))}
.zs .t-grau{--mk:var(--c-grau-l)}   .zs .t-neutral{--mk:var(--c-neutral-l)} .zs .t-leer{--mk:var(--line)}
.zs .t-gruen{--mk:var(--c-gruen)}   .zs .t-blau{--mk:var(--c-blau)}         .zs .t-orange{--mk:var(--c-orange)}
.zs .t-gold{--mk:var(--c-gold)}     .zs .t-lila{--mk:var(--c-lila)}         .zs .t-braun{--mk:var(--c-braun)}
.zs .t-beere{--mk:var(--c-beere)}   .zs .t-rot{--mk:var(--c-rot)}

/* ---------- Hinweise ---------- */
.zs-hinweise{display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-height:36px}
.zs-hinweis{
  display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;border-radius:999px;
  border:0;cursor:pointer;font:inherit;font-weight:500;font-size:13.5px;
  background:var(--c-gold-bg);color:var(--c-gold);box-shadow:inset 0 0 0 1px var(--c-gold-l)}
.zs-hinweis.rot{background:var(--c-rot-bg);color:var(--c-rot);box-shadow:inset 0 0 0 1px var(--c-rot-l)}
.zs-hinweis b{font-weight:600}
.zs-hinweis:hover{filter:brightness(.97)}
.zs-hinweis.on{box-shadow:inset 0 0 0 2px currentColor}
.zs-ruhig{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 15px;border-radius:999px;
  background:var(--c-gruen-bg);color:var(--c-gruen);font-weight:500;font-size:13.5px}

.zs-leiste{margin:0}
.zs-leiste #zsQ{flex:0 1 260px;min-width:160px}
.zs-leiste .viewswitch button{gap:7px}
.zs-leiste .viewswitch .zs-m{--mk:var(--ink-3)}
.zs-leiste .viewswitch button.on .zs-m{--mk:var(--brand)}
.zs-nav{display:flex;gap:6px;align-items:center}
.zs-vorwaerts svg{transform:scaleX(-1)}

/* ---------- Spuren ---------- */
.zs-rahmen{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.zs-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.zs-gitter{display:grid;grid-template-columns:var(--zs-name) calc(var(--zs-col) * var(--zs-n));
  min-width:max-content;position:relative}
.zs-ecke{position:sticky;left:0;z-index:4;background:var(--card);display:flex;align-items:flex-end;
  padding:0 16px 10px;border-bottom:1px solid var(--line-soft);
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.zs-tage{display:grid;grid-template-columns:repeat(var(--zs-n), var(--zs-col));border-bottom:1px solid var(--line-soft)}
.zs-tag{position:relative;border:0;background:none;cursor:pointer;padding:16px 0 8px;font:inherit;
  display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--ink-3);border-left:1px solid transparent}
.zs-tag small{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.zs-tag b{font:600 15px var(--f-mono);color:var(--ink-2)}
.zs-tag.we{background:color-mix(in srgb,var(--card-2) 60%,transparent)}
.zs-tag.mo{border-left-color:var(--line)}
.zs-tag.mo::before{content:attr(data-kw);position:absolute;top:3px;left:5px;font:600 9px var(--f-mono);color:var(--ink-3);opacity:.8}
.zs-tag.erster:not(.mo)::before{content:attr(data-mon);position:absolute;top:3px;left:5px;font:700 9px var(--font);
  color:var(--brand-text);text-transform:uppercase;letter-spacing:.05em}
.zs-tag.heute b{color:var(--brand-text)}
.zs-tag.heute::after{content:"";position:absolute;bottom:3px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--brand)}
.zs-tag.fokus{background:var(--brand-soft)}
.zs-tag:hover{background:var(--card-2)}

.zs-name{position:sticky;left:0;z-index:3;background:var(--card);padding:10px 16px;
  border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;
  box-shadow:1px 0 0 var(--line-soft)}
.zs-name.dring{box-shadow:inset 3px 0 0 var(--c-rot),1px 0 0 var(--line-soft)}
.zs-kunde{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--ink);text-align:left;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
button.zs-kunde:hover{color:var(--brand-text)}
.zs-name .mono{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zs-name .rot{color:var(--c-rot);font-family:var(--font);font-weight:600}
.zs-name .gold{color:var(--c-gold);font-family:var(--font);font-weight:600}

.zs-spur{position:relative;border-bottom:1px solid var(--line-soft);
  background-image:repeating-linear-gradient(90deg,transparent 0 calc(var(--zs-col) - 1px),
    color-mix(in srgb,var(--line) 50%,transparent) calc(var(--zs-col) - 1px) var(--zs-col))}
.zs-vergangen{position:absolute;left:0;top:0;bottom:0;background:color-mix(in srgb,var(--card-2) 55%,transparent);pointer-events:none}
.zs-fokusspalte{position:absolute;top:0;bottom:0;width:var(--zs-col);background:color-mix(in srgb,var(--brand) 7%,transparent);pointer-events:none;transition:left .12s}
.zs-jetzt{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--brand);opacity:.75;pointer-events:none;z-index:2}
.zs-luecke{position:absolute;top:6px;bottom:6px;border-radius:14px;cursor:pointer;padding:0;
  border:1px dashed color-mix(in srgb,var(--c-rot) 45%,transparent);
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--c-rot) 12%,transparent) 0 6px,transparent 6px 12px)}
.zs-luecke span{position:absolute;right:10px;bottom:5px;font-size:11px;font-weight:600;color:var(--c-rot);white-space:nowrap}
.zs-luecke:hover{background-color:color-mix(in srgb,var(--c-rot) 6%,transparent)}

.zs-clip{
  position:absolute;z-index:1;height:24px;display:flex;align-items:center;gap:6px;padding:0 9px 0 8px;min-width:0;
  border:0;border-radius:999px;cursor:grab;touch-action:pan-y;user-select:none;font:inherit;
  font-size:12px;font-weight:500;color:var(--ink);text-align:left;
  background:color-mix(in srgb,var(--mk) 16%,var(--card));
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--mk) 60%,transparent);
  transition:box-shadow .12s,transform .12s,opacity .15s}
.zs-clip:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1.5px var(--mk),var(--shadow);z-index:3}
.zs-clip:focus-visible{outline:2px solid var(--brand);outline-offset:2px;z-index:3}
.zs-clip .zs-m{background:var(--mk)}
.zs-clip .zs-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.zs-clip .zs-t b{font-weight:600;color:var(--ink-2)}
.zs-clip.art-a{border-radius:8px}
.zs-clip.art-t{border-radius:7px;background:color-mix(in srgb,var(--mk) 10%,var(--card))}
.zs-clip.hoch .zs-t{font-weight:700}
.zs-clip.ueber{background:var(--c-rot-bg);box-shadow:inset 0 0 0 1.5px var(--c-rot);color:var(--c-rot)}
.zs-clip.wartet .zs-m{background:transparent;box-shadow:inset 0 0 0 2px var(--mk)}
.zs-clip.wartet{box-shadow:inset 0 0 0 1.5px var(--mk),0 0 0 3px color-mix(in srgb,var(--mk) 22%,transparent)}
.zs-clip .zs-badge{flex:none;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;
  background:var(--c-rot);color:#fff;font-size:10.5px;font-weight:800;margin-left:auto}
.zs-vor{font-weight:700;color:var(--c-rot);margin-right:-2px}
.zs-clip.zieht{cursor:grabbing;z-index:6;transition:none;transform:none;box-shadow:inset 0 0 0 2px var(--mk),var(--shadow-lift)}
.zs-clip.zieht::after{content:attr(data-ziel);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);
  white-space:nowrap;padding:3px 9px;border-radius:999px;background:var(--ink);color:var(--bg);font:600 11px var(--f-mono)}
.zs.gedimmt .zs-clip:not(.treffer),.zs.gedimmt .zs-luecke:not(.treffer){opacity:.18}
.zs-leer{grid-column:1/-1;padding:28px 16px;color:var(--ink-3)}

.zs-legende{display:flex;flex-wrap:wrap;gap:6px 16px;padding:12px 16px;border-top:1px solid var(--line-soft);
  font-size:12px;color:var(--ink-3)}
.zs-legende span{display:inline-flex;align-items:center;gap:6px}
.zs-legende .zs-m{background:var(--mk,var(--ink-3))}
.zs-legende .zs-m.wartet-ring{background:transparent}
.zs-tipp{margin-left:auto}

/* ---------- Fokustag ---------- */
.zs-fokusliste header{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.zs-fokusliste h2{font-size:19px;font-weight:700}
.zs-zeilen{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:4px 14px}
.zs-zeile{display:flex;align-items:center;gap:12px;padding:9px 10px;border:0;border-radius:14px;background:none;
  font:inherit;color:var(--ink);text-align:left;cursor:pointer;min-width:0}
.zs-zeile:hover{background:var(--card-2)}
.zs-zeile .zs-m{background:var(--mk)}
.zs-zeile .zs-m.wartet-ring{background:transparent}
.zs-zt{display:flex;flex-direction:column;min-width:0;flex:1}
.zs-zt b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zs-zt small{color:var(--ink-3);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Zeitband ---------- */
.zs-band{position:sticky;bottom:12px;z-index:20;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;
  padding:10px 18px 12px;border-radius:24px;background:color-mix(in srgb,var(--card) 92%,transparent);
  backdrop-filter:blur(10px);box-shadow:var(--shadow-lift)}
.zs-band-info{display:flex;flex-direction:column;gap:1px;min-width:118px}
.zs-band-info small{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.zs-band-info b{font-size:16px;font-weight:600}
.zs-band-info span{font-size:12px;color:var(--ink-3)}
.zs-band-spur{position:relative;height:50px;cursor:ew-resize;touch-action:none;user-select:none;border-radius:10px}
.zs-band-spur:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.zs-balken{position:absolute;inset:0 0 15px 0;display:grid;grid-template-columns:repeat(var(--zs-n),minmax(0,1fr));gap:3px;align-items:end}
.zs-balken i{border-radius:4px 4px 2px 2px;background:var(--card-2);min-height:3px}
.zs-balken i.voll{background:color-mix(in srgb,var(--brand) 55%,var(--card-2))}
.zs-balken i.we{opacity:.55}
.zs-balken i.alt{filter:saturate(.3)}
.zs-skala{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(var(--zs-n),minmax(0,1fr));
  font:500 9.5px var(--f-mono);color:var(--ink-3);white-space:nowrap}
.zs-skala span{overflow:visible}
.zs-band-heute{position:absolute;top:0;bottom:14px;width:2px;margin-left:-1px;background:var(--ink-3);opacity:.45}
.zs-band-kopf{position:absolute;top:-6px;bottom:10px;width:3px;margin-left:-1.5px;background:var(--brand);border-radius:2px;pointer-events:none}
.zs-band-kopf::before{content:attr(data-t);position:absolute;top:-3px;left:50%;transform:translate(-50%,-100%);
  white-space:nowrap;padding:3px 9px;border-radius:999px;background:var(--brand);color:var(--on-brand);font:600 10.5px var(--f-mono)}

@media (max-width:640px){
  .zs-kopf > .grow{flex:1 1 100%}
  .zs-kopf > .ghost,.zs-kopf > .btn{order:3;flex:1 1 auto}
  .zs{--zs-name:128px}
  .zs-name{padding:8px 10px}
  .zs-band{bottom:8px;grid-template-columns:minmax(0,1fr);gap:4px;padding:8px 14px 10px}
  .zs-leiste{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:2px 14px}
  .zs-leiste::-webkit-scrollbar{display:none}
  .zs-leiste > *{flex:none}
  .zs-leiste .spacer{display:none}
  .zs-band-info{flex-direction:row;align-items:baseline;gap:8px}
  /* Platz für das Datum am Kopf – sonst liegt es über „Fokus …“ */
  .zs-band-spur{margin-top:28px}
  .zs-leiste #zsQ{flex:0 0 190px}
  .zs-tipp{display:none}
  .zs-hinweis{height:32px;padding:0 12px;font-size:12.5px}
}

/* ==== 56-kunden-ansichten.css ==== */
/* ==================================================================
   Kunden: Karten und Board (30.09.2026) – gehört zu 22-kunden.js
   ================================================================== */

/* ---------- Karten: wie ein Medienordner ---------- */
.kd-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;align-items:start}
.kd-karte{background:var(--card);border-radius:24px;box-shadow:var(--shadow);overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s;min-width:0}
.kd-karte:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.kd-karte:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.kd-thumb{position:relative;aspect-ratio:16/8;max-width:100%;display:grid;place-items:center;overflow:hidden;
  border:0 !important;border-radius:0}
.kd-thumb::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 110% at 18% 0%,color-mix(in srgb,currentColor 34%,transparent) 0%,transparent 70%)}
.kd-thumb b{position:relative;font:800 46px/1 var(--font);font-stretch:140%;letter-spacing:-.04em;
  color:color-mix(in srgb,currentColor 80%,var(--ink))}
.kd-nr,.kd-plan{position:absolute;bottom:9px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;
  background:rgba(20,16,12,.62);color:#fff}
.kd-nr{left:10px} .kd-plan{right:10px}
.kd-info{padding:12px 14px 14px;display:flex;flex-direction:column;gap:9px;min-width:0}
.kd-titel{min-width:0}
.kd-titel h3{margin:0;font-size:15.5px;font-weight:650;font-stretch:104%;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kd-titel small{display:block;color:var(--ink-3);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* „Ehemals …“ nach einem Namenswechsel (0.62.0) – klein unter dem Namen, läuft von selbst ab */
.ehemals{display:block;color:var(--ink-3);font-size:var(--fs-xs);font-weight:400;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kd-status .dd{max-width:100%}
.kd-chips{display:flex;gap:6px;flex-wrap:wrap}
.kd-chips:empty{display:none}
.kd-chip{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--card-2);color:var(--ink-2)}
.kd-chip.rot{background:var(--c-rot-bg);color:var(--c-rot)}
.kd-chip.gold{background:var(--c-gold-bg);color:var(--c-gold)}
.kd-pegel{display:grid;grid-template-columns:repeat(21,minmax(0,1fr));gap:2px;height:12px}
.kd-pegel i{border-radius:3px;background:var(--line)}
.kd-pegel i.heute{box-shadow:inset 0 0 0 1.5px var(--brand)}
.kd-naechst{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);min-width:0}
.kd-naechst svg{width:14px;height:14px;flex:none;color:var(--ink-3)}
.kd-naechst span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Board: eine Spalte je Status ---------- */
.kd-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:14px;
  overflow-x:auto;padding-bottom:8px;align-items:start;scrollbar-width:thin}
.kd-spalte{background:var(--card-2);border-radius:26px;padding:12px;min-width:0}
.kd-spalte header{display:flex;align-items:center;gap:8px;padding:2px 4px 10px}
.kd-spalte h2{font-size:14.5px;font-weight:600;margin:0;flex:1}
.kd-spalte-body{display:flex;flex-direction:column;gap:8px;min-height:60px}
.kd-bkarte{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:11px 12px;cursor:pointer;
  display:flex;flex-direction:column;gap:8px;min-width:0;transition:box-shadow .12s,transform .12s}
.kd-bkarte:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px)}
.kd-bkarte:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.kd-bkarte[draggable="true"]{cursor:grab}
.kd-bkopf{display:flex;gap:10px;align-items:center;min-width:0}
.kd-av{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;border:0 !important;
  font:800 13px/1 var(--font);font-stretch:125%}
.kd-bkarte .kd-titel h3{font-size:14px;-webkit-line-clamp:1}
.kd-leer{margin:6px 4px;font-size:12.5px;text-align:center;padding:14px 0;border:1.5px dashed var(--line);border-radius:var(--r)}
.kd-status.nur-touch{display:none}
@media (pointer:coarse){ .kd-status.nur-touch{display:block} }

@media (max-width:640px){
  .kd-karten{grid-template-columns:minmax(0,1fr)}
  .kd-thumb{aspect-ratio:16/6}
  .kd-board{grid-auto-columns:minmax(240px,82vw);scroll-snap-type:x mandatory}
  .kd-spalte{scroll-snap-align:start}
}

/* ==== 57-responsive.css ==== */
/* ==================================================================
   Responsive, dritte Runde (01.10.2026)
   ≤ 640 Handy mit unterer Leiste · ab 2200 breit (21:9) · 32:9 begrenzt
   Liegt über allen anderen Dateien.
   ================================================================== */
:root{--unten:0px; --rand:0px}

/* ================= Handy: untere Leiste im Liquid-Glass-Stil ================= */
/* Glas: halbdurchsichtig, stark weichgezeichnet und gesättigt, mit Lichtkante
   oben und Glanz – getönt in der Markenfarbe. Alle vier Bereiche sind gleich,
   der aktive liegt unter einer gleitenden Glaslinse. „Mehr“ ist ein eigener
   runder Glasknopf daneben. */
:root{
  --glas-bg:rgba(255,252,248,.58);
  --glas-rand:rgba(255,255,255,.7);
  --glas-kante:rgba(255,255,255,.9);
  --glas-schatten:0 18px 40px -16px rgba(60,32,10,.38), 0 3px 10px rgba(60,32,10,.08);
  --glas-glanz:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.08) 42%,rgba(255,255,255,0) 60%,rgba(255,255,255,.14) 100%);
  --linse-bg:color-mix(in srgb,var(--brand) 15%,rgba(255,255,255,.55));
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --glas-bg:rgba(36,30,26,.55); --glas-rand:rgba(255,255,255,.14); --glas-kante:rgba(255,255,255,.28);
    --glas-schatten:0 18px 40px -14px rgba(0,0,0,.75), 0 3px 10px rgba(0,0,0,.35);
    --glas-glanz:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.03) 45%,rgba(255,255,255,0) 60%,rgba(255,255,255,.06) 100%);
    --linse-bg:color-mix(in srgb,var(--brand) 26%,rgba(255,255,255,.08));
  }
}
:root[data-theme="dark"]{
  --glas-bg:rgba(36,30,26,.55); --glas-rand:rgba(255,255,255,.14); --glas-kante:rgba(255,255,255,.28);
  --glas-schatten:0 18px 40px -14px rgba(0,0,0,.75), 0 3px 10px rgba(0,0,0,.35);
  --glas-glanz:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.03) 45%,rgba(255,255,255,0) 60%,rgba(255,255,255,.06) 100%);
  --linse-bg:color-mix(in srgb,var(--brand) 26%,rgba(255,255,255,.08));
}

#unten,#untenMenue,#untenScrim{display:none}
@media (max-width:640px){
  :root{--unten:calc(82px + env(safe-area-inset-bottom))}
  :root #menuBtn{display:none !important}
  /* Das Seitenmenü braucht es auf dem Handy nicht mehr – sonst ragen Teile davon in den Rand */
  :root #nav,:root #navScrim{display:none !important}
  :root #topbar{padding-top:max(10px, env(safe-area-inset-top))}
  :root #view{padding-bottom:calc(var(--unten) + 28px)}
  html{-webkit-tap-highlight-color:transparent}

  .glas{
    position:relative;isolation:isolate;
    background:var(--glas-bg);
    -webkit-backdrop-filter:blur(24px) saturate(1.9);backdrop-filter:blur(24px) saturate(1.9);
    border:1px solid var(--glas-rand);
    box-shadow:inset 0 1px 0 var(--glas-kante), inset 0 -1px 1px rgba(255,255,255,.12), var(--glas-schatten);
  }
  .glas::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
    background:var(--glas-glanz)}

  #unten{
    display:flex;gap:10px;align-items:stretch;position:fixed;z-index:55;
    left:14px;right:14px;bottom:max(12px, env(safe-area-inset-bottom));height:64px;
    transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s;
  }
  #unten:empty{display:none}

  .unten-tabs{flex:1;min-width:0;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));
    padding:4px;border-radius:999px}
  .unten-linse{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;
    width:calc((100% - 8px) / var(--n,4));border-radius:999px;
    transform:translateX(calc(var(--i,0) * 100%));opacity:0;
    background:var(--linse-bg);border:1px solid var(--glas-rand);
    box-shadow:inset 0 1px 0 var(--glas-kante), 0 6px 16px -8px color-mix(in srgb,var(--brand) 55%,transparent);
    transition:transform .42s cubic-bezier(.3,1.35,.5,1), opacity .2s, scale .2s}
  .unten-tabs.hat-linse .unten-linse{opacity:1}
  .unten-tabs:active .unten-linse{scale:1.06 1.1}

  .unten-tabs > a,#untenMehr{
    position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-width:0;border:0;background:none;color:var(--ink-2);text-decoration:none;cursor:pointer;
    font:500 10.5px/1.1 var(--font);letter-spacing:.01em;
    -webkit-user-select:none;user-select:none;touch-action:manipulation;transition:color .2s}
  .unten-tabs > a > span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
  .unten-tabs svg,#untenMehr svg{width:23px;height:23px;flex:none;transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
  .unten-tabs > a:active svg{transform:scale(.88)}
  .unten-tabs > a.on{color:var(--brand-text);font-weight:600}
  .unten-tabs > a.on svg{stroke-width:2.1}

  #untenMehr{flex:none;width:64px;border-radius:50%;padding:0}
  #untenMehr svg{width:24px;height:24px}
  #untenMehr.on{color:var(--brand-text);background:var(--linse-bg)}
  #untenMehr:active{transform:scale(.94)}
  body.unten-offen #untenMehr{color:var(--brand-text)}
  body.unten-offen #untenMehr svg{transform:rotate(180deg)}

  /* Beim Tippen in ein Feld macht die Leiste Platz */
  body:has(:is(input,textarea,select,[contenteditable="true"]):focus) #unten{transform:translateY(140%);opacity:0;pointer-events:none}

  /* Menü hinter dem Pfeil – ebenfalls Glas */
  #untenScrim:not([hidden]){display:block;position:fixed;inset:0;z-index:54;
    background:rgba(20,16,12,.18);animation:blende .2s}
  #untenMenue:not([hidden]){
    display:flex;flex-direction:column;gap:12px;position:fixed;z-index:56;
    left:14px;right:14px;bottom:calc(var(--unten) + 4px);max-height:calc(100dvh - var(--unten) - 80px);overflow:auto;
    padding:16px;border-radius:30px;
    background:var(--glas-bg);border:1px solid var(--glas-rand);
    -webkit-backdrop-filter:blur(30px) saturate(1.9);backdrop-filter:blur(30px) saturate(1.9);
    box-shadow:inset 0 1px 0 var(--glas-kante), var(--glas-schatten);
    transform-origin:92% 100%;animation:umAuf .32s cubic-bezier(.3,1.25,.5,1);overscroll-behavior:contain;
  }
  @keyframes umAuf{from{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:1;transform:none}}
  .um-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .um-kopf b{font-size:15px;font-weight:650;font-stretch:110%}
  .um-kopf small{display:block;color:var(--ink-2);font-size:12.5px;line-height:1.4;margin-top:3px}
  .um-kopf .ghost,.um-fuss .ghost,.um-fuss .knopf{background:rgba(255,255,255,.35);border:1px solid var(--glas-rand)}
  .um-kopf .ghost svg{width:15px;height:15px}
  .um-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .um-kachel{
    position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;
    padding:12px 4px 10px;border:1px solid var(--glas-rand);border-radius:var(--r);
    background:color-mix(in srgb,var(--card) 38%,transparent);
    box-shadow:inset 0 1px 0 var(--glas-kante);
    color:var(--ink-2);font:500 12px/1.2 var(--font);text-decoration:none;text-align:center;cursor:pointer;
    -webkit-user-select:none;user-select:none;transition:transform .2s cubic-bezier(.3,1.4,.5,1)}
  .um-kachel > span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .um-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--ink-2)}
  .um-ic svg{width:22px;height:22px}
  .um-kachel:active{transform:scale(.95)}
  .um-kachel.an{background:var(--linse-bg);color:var(--brand-text);font-weight:600}
  .um-kachel.an .um-ic{color:var(--brand-text)}
  .um-nr{position:absolute;top:7px;right:9px;display:grid;place-items:center;width:20px;height:20px;
    border-radius:50%;background:var(--brand);color:var(--on-brand);font:700 11px var(--f-mono);font-style:normal}
  .um-fuss{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:2px}
  .um-fuss .grow{flex:1}
  .um-fuss .ghost,.um-fuss .knopf{display:inline-flex;align-items:center;gap:7px}
  .um-fuss .btn{border:0}
  .um-fuss a.knopf{text-decoration:none}
  .um-fuss svg{width:17px;height:17px}
  .um-vorschau{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;justify-items:center;
    padding:8px 6px;border-radius:999px;border:1px solid var(--glas-rand);
    background:color-mix(in srgb,var(--card) 38%,transparent);box-shadow:inset 0 1px 0 var(--glas-kante)}
  .uv{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--ink-2)}
  .uv svg{width:20px;height:20px}
  .uv.leer{border:1.5px dashed var(--line);color:var(--ink-3)}
  .uv.leer b{font:600 12px var(--f-mono)}
  .uv.fest{color:var(--ink-3)}

  /* Alles, was unten schwebt, rückt über die Leiste */
  :root{--uh-abstand:calc(var(--unten) + 10px)}
  .zs-band{bottom:calc(var(--unten) + 8px)}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){
  #untenMenue:not([hidden]),#untenScrim:not([hidden]){animation:none}
  #unten,#unten svg,.unten-linse{transition:none}
}
/* Ohne Weichzeichner (ältere Browser): Glas wird deckend */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glas,#untenMenue{background:var(--card)}
}

/* ================= Seitenansicht: Bildlaufleiste in der Rundung ================= */
@media (min-width:641px){
  .drawer-panel{scrollbar-gutter:stable}
  .drawer-panel::-webkit-scrollbar{width:14px}
  .drawer-panel::-webkit-scrollbar-track{background:transparent;margin:30px 0}
  .drawer-panel::-webkit-scrollbar-thumb{
    border:4px solid transparent;border-radius:9px;background-clip:padding-box;
    background-color:color-mix(in srgb,var(--ink-3) 38%,transparent)}
  .drawer-panel::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--ink-3) 65%,transparent)}
  .drawer-panel::-webkit-scrollbar-corner{background:transparent}
  @supports not selector(::-webkit-scrollbar){
    .drawer-panel{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink-3) 45%,transparent) transparent}
  }
  /* Rechts genauso viel Luft wie links – die Leiste liegt im Rand, nicht über dem Inhalt */
  :root #drawer:not([data-voll]) .drawer-panel{padding-right:calc(var(--sp-5) - 14px)}
}

/* ================= Seitenansicht: Breite ziehen ================= */
.drawer-ziehen{display:none}
@media (min-width:641px){
  :root #drawer:not([data-voll]) .drawer-panel{width:min(var(--drawer-w,720px), calc(100% - 24px))}
  #drawer.zieht-breite .drawer-panel{transition:none}
  #drawer.zieht-breite{cursor:ew-resize;user-select:none;-webkit-user-select:none}
  #drawer:not([data-voll]) .drawer-ziehen{
    display:flex;align-items:center;justify-content:center;position:absolute;z-index:2;
    top:12px;bottom:12px;right:calc(min(var(--drawer-w,720px), 100% - 24px) + 12px);width:18px;
    transform:translateX(50%);cursor:ew-resize;touch-action:none;outline:0;animation:blende .25s;
  }
  .drawer-ziehen span{
    display:grid;place-items:center;width:22px;height:46px;border-radius:999px;
    background:var(--card);color:var(--ink-3);box-shadow:var(--shadow);
    transition:color .15s,background .15s,transform .15s,height .15s;
  }
  .drawer-ziehen svg{width:14px;height:14px}
  .drawer-ziehen:hover span,.drawer-ziehen:focus-visible span,#drawer.zieht-breite .drawer-ziehen span{
    background:var(--brand);color:var(--on-brand);height:58px}
  .drawer-ziehen:focus-visible span{box-shadow:0 0 0 3px var(--brand-soft),var(--shadow)}
}

/* ================= Breit (21:9, ab 2200 px) ================= */
@media (min-width:2200px){
  :root #view{max-width:none}
  #drawer{--drawer-w:50%}

  /* Vollbild: links die Angaben von oben, rechts alles Weitere */
  #drawer[data-voll] .drawer-panel.zweispaltig{display:flow-root;padding:28px 40px 48px}
  #drawer[data-voll] .drawer-panel.zweispaltig > .dz-l{float:left;clear:left;width:calc(50% - 20px)}
  #drawer[data-voll] .drawer-panel.zweispaltig > .dz-l + .dz-l{margin-top:var(--sp-4)}
  #drawer[data-voll] .drawer-panel.zweispaltig > :not(.drawer-head):not(.sheet-griff):not(.dz-l){
    margin-left:calc(50% + 20px)}
  #drawer[data-voll] .drawer-panel.zweispaltig > .dz-r1{margin-top:0}
  #drawer[data-voll] .drawer-panel.zweispaltig > .drawer-head{margin-bottom:var(--sp-5)}
}

/* ================= 32:9: höchstens 21:9, mittig ================= */
html.ultrabreit #nav{left:var(--rand)}
html.ultrabreit main{margin-left:calc(var(--nav-w) + var(--rand)) !important;margin-right:var(--rand)}
html.ultrabreit #drawer{left:var(--rand);right:var(--rand)}
html.ultrabreit body{
  --aussen:color-mix(in srgb,var(--bg) 93%,#f5f1ec);
  background:linear-gradient(90deg,var(--aussen) var(--rand),var(--bg) var(--rand),
    var(--bg) calc(100% - var(--rand)),var(--aussen) calc(100% - var(--rand))) fixed;
}

/* Redaktionsplan auf dem Handy: die Ansichts-Umschaltung (mit Zählern) war
   breiter als der Bildschirm und schob die ganze Seite seitlich (441 statt 390 px).
   Jetzt scrollt nur die Leiste selbst. (03.10.2026) */
@media (max-width:640px){
  /* :root .viewswitch{overflow:visible} aus 54-schnittplatz.css hob die Handy-Regel aus 49 auf */
  :root .page-head > .viewswitch{max-width:100%;min-width:0;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
  :root .page-head > .viewswitch::-webkit-scrollbar{display:none}
}

/* ==== 58-dock.css ==== */
/* ==================================================================
   Dock (02.10.2026) – ab 641 px
   Eine Glaskapsel mit der Navigation. Hell/Dunkel + Einstellungen stehen seit
   07.10.2026 im Profilmenü oben rechts (#themeBtn/#einstBtn bleiben unsichtbar
   im HTML – Palette und Handy-Menü lösen sie weiter aus).
   html.nav-breit (Standard, ab 1101 px): Titel daneben, oben nur das breite Logo.
   Sonst schmal: nur Symbole, Titel als Sprechblase, oben das Icon (.dock-marke).
   Werte aus der Feinjustierung: Markierung 220 ms, Federung 25 %, Dehnung 10 ms.
   ================================================================== */
:root{
  --dock-zu:60px; --dock-auf:236px;
  --dock-feder:cubic-bezier(.3,1.15,.5,1);
  --dock-t:260ms; --dock-t-linse:220ms;
  --dock-ph:46px; --dock-pw:calc(var(--dock-zu) - 14px);   /* = Innenbreite der Kapsel → Symbole exakt mittig */
  --linse-hover:rgba(255,255,255,.75);
  --dock-glas:rgba(255,252,248,.74); --dock-rand:rgba(255,255,255,.75);
  --dock-schatten:0 22px 50px -20px rgba(60,32,10,.42), 0 3px 10px rgba(60,32,10,.08);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --linse-hover:rgba(255,255,255,.09); --dock-glas:rgba(34,29,25,.74); --dock-rand:rgba(255,255,255,.12);
  --dock-schatten:0 22px 50px -18px rgba(0,0,0,.85), 0 3px 10px rgba(0,0,0,.4) } }
:root[data-theme="dark"]{
  --linse-hover:rgba(255,255,255,.09); --dock-glas:rgba(34,29,25,.74); --dock-rand:rgba(255,255,255,.12);
  --dock-schatten:0 22px 50px -18px rgba(0,0,0,.85), 0 3px 10px rgba(0,0,0,.4) }

.dock-kbd,.dock-marke{display:none}

/* Kachel oben links – auch für die Vorschau in den Einstellungen.
   Immer in der Akzentfarbe; ein Icon steht darauf als Silhouette in --on-brand. */
.marke-kachel{place-items:center;flex:none;width:50px;height:50px;border-radius:17px;overflow:hidden;
  background:linear-gradient(140deg,var(--brand-2,var(--brand)),var(--brand));color:var(--on-brand);
  box-shadow:0 12px 24px -12px var(--brand);font:800 23px/1 var(--font);font-stretch:135%;user-select:none}
.marke-kachel i{display:block;width:var(--icon-gr,62%);height:var(--icon-gr,62%);background:currentColor;
  -webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.marke-kachel[data-grund="voll"]{background:none}
.marke-kachel img{display:block;width:100%;height:100%;object-fit:cover}

@media (min-width:641px){
  @media (min-width:1101px){ :root.nav-breit{--nav-w:268px} }
  :root main{transition:margin-left var(--dock-t) cubic-bezier(.4,0,.2,1)}
  :root #nav{align-items:flex-start;padding-left:16px;padding-right:0;width:var(--nav-w);overflow:visible}

  /* ---------- Oben links: Icon (schmal) oder Logo (breit) ---------- */
  :root #nav .brand::before{content:none;display:none}
  :root #nav .brand{justify-content:flex-start;height:50px;padding:0;margin-left:5px;white-space:nowrap}
  :root #nav .brand .logo{display:none !important}
  .dock-marke{display:grid}
  @media (min-width:1101px){
    :root.nav-breit #nav .brand{margin-left:10px}
    :root.nav-breit #nav .dock-marke{display:none}
    :root.nav-breit #nav .brand .logo{display:flex !important;align-items:center}
    :root.nav-breit #nav .brand .logo img{max-width:200px}
    :root.nav-breit #nav .brand .fallback .dot{display:none}
  }

  /* ---------- Kapseln ---------- */
  :root #nav nav,:root #nav .nav-foot{
    position:relative;overflow:visible;display:flex;flex-direction:column;align-items:stretch;gap:3px;
    width:var(--dock-zu);padding:6px;border-radius:30px;margin:0;
    background:var(--dock-glas);border:1px solid var(--dock-rand);
    -webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);
    box-shadow:var(--dock-schatten);
    transition:width var(--dock-t) var(--dock-feder),border-radius var(--dock-t);
  }
  :root #nav .nav-foot{margin-top:auto}
  /* Flache Liste (20.10.2026): reicht die Höhe nicht, rücken die Punkte zusammen statt unten herauszuragen */
  :root #nav nav{flex:0 1 auto;min-height:0}
  :root #nav nav > a{height:auto !important;flex:0 1 var(--dock-ph);min-height:30px}
  @media (min-width:1101px){
    :root.nav-breit #nav nav,:root.nav-breit #nav .nav-foot{width:var(--dock-auf);border-radius:24px;overflow:hidden}
  }

  /* ---------- Punkte ---------- */
  :root #nav nav a,:root #nav .nav-foot .themebtn,:root #nav .nav-foot .iconbtn{
    position:relative;z-index:1;display:grid !important;grid-template-columns:var(--dock-pw) minmax(0,1fr) auto;
    align-items:center;justify-content:normal;width:100%;height:var(--dock-ph);padding:0;margin:0;
    border:0;border-radius:999px;background:transparent;box-shadow:none;color:var(--ink-3);
    font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:color .15s}
  :root #nav nav a svg,:root #nav .nav-foot svg{width:21px;height:21px;justify-self:center;opacity:1;transition:transform .15s}
  :root #nav nav a:active svg,:root #nav .nav-foot > *:active svg{transform:scale(.88)}
  :root #nav nav a:hover,:root #nav .nav-foot > *:hover{background:transparent;color:var(--ink)}

  /* Schmal: Titel als Sprechblase neben der Leiste (wie früher) */
  :root #nav nav a > span,:root #nav .nav-foot > * > span{
    display:block !important;position:absolute;left:calc(100% + 16px);top:50%;z-index:80;
    transform:translate(-4px,-50%);white-space:nowrap;pointer-events:none;
    padding:5px 11px;border-radius:999px;background:var(--ink);color:var(--bg);
    font-size:12.5px;font-weight:500;opacity:0;transition:opacity .12s,transform .12s}
  :root #nav nav a:hover > span,:root #nav nav a:focus-visible > span,
  :root #nav .nav-foot > *:hover > span,:root #nav .nav-foot > *:focus-visible > span{opacity:1;transform:translate(0,-50%)}

  /* Breit: Titel daneben, Kürzel rechts */
  @media (min-width:1101px){
    :root.nav-breit #nav nav a > span,:root.nav-breit #nav .nav-foot > * > span{
      position:static;transform:none;opacity:1;padding:0;background:none;border-radius:0;
      color:var(--ink-2);font-size:14px;overflow:hidden;text-overflow:ellipsis}
    :root.nav-breit.nav-wechsel #nav nav a > span,:root.nav-breit.nav-wechsel #nav .nav-foot > * > span{
      animation:dockTitel var(--dock-t) var(--dock-feder) both;animation-delay:calc(var(--n,0) * 7ms)}
    :root.nav-breit #nav nav a:hover > span,:root.nav-breit #nav .nav-foot > *:hover > span{color:var(--ink)}
    :root.nav-breit #nav .dock-kbd{display:block;margin-right:12px;background:none;border:0;box-shadow:none;
      padding:0;min-width:0;height:auto;line-height:1;font:500 10.5px var(--f-mono);color:var(--ink-3);opacity:.8}
    :root.nav-breit #nav nav a.active > span{color:var(--on-brand);font-weight:650}
    :root.nav-breit #nav nav a.active .dock-kbd{color:var(--on-brand)}
  }
  @keyframes dockTitel{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}

  /* Aktiv: Symbol auf der orangen Markierung */
  :root #nav nav a.active{background:transparent;box-shadow:none;color:var(--on-brand)}
  :root #nav nav:not(:has(.linse.aktiv[data-bereit])) a.active{background:var(--brand)}
  :root #nav .nav-foot .iconbtn.active{color:var(--brand-text)}
  :root #nav nav a:focus-visible,:root #nav .nav-foot > *:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--brand)}

  /* ---------- Linsen ---------- */
  #nav .linse{position:absolute;left:6px;right:6px;top:var(--oben,6px);height:var(--hoehe,var(--dock-ph));
    border-radius:23px;pointer-events:none;z-index:0;
    transition:top var(--dock-t-linse) var(--dock-feder),height var(--dock-t-linse) var(--dock-feder),opacity .15s}
  #nav .linse.hover{background:var(--linse-hover);opacity:0}
  #nav nav:hover .linse.hover,#nav .nav-foot:hover .linse.hover{opacity:1}
  #nav .linse.aktiv{background:var(--brand);box-shadow:0 8px 18px -10px var(--brand);opacity:0}
  #nav .linse.aktiv[data-bereit]{opacity:1}
  #nav .linse.aktiv.ohne{opacity:0}

  @media (max-height:760px){
    :root{--dock-ph:38px;--dock-zu:56px}
    #nav .linse{border-radius:19px}
    .dock-marke{width:44px;height:44px;border-radius:15px;font-size:20px}
  }
}
@media (min-width:641px) and (prefers-reduced-motion:reduce){
  :root #nav nav,:root #nav .nav-foot,#nav .linse,:root main{transition-duration:.01ms !important}
  :root #nav nav a > span{animation:none !important}
}

/* Beim Laden (html.laedt, gesetzt in index.html) keine Übergänge in der Leiste */
html.laedt #nav,html.laedt #nav *,html.laedt main{transition:none !important;animation:none !important}

/* ---------- Einstellungen: Bereiche links, bleiben oben stehen ---------- */
.einstnav{position:sticky;top:76px;isolation:isolate;z-index:2}
.einstnav button{border-radius:999px;border:0;margin-bottom:2px;transition:color .15s}
.einstnav button.on{background:var(--brand);color:var(--on-brand);font-weight:600;border:0;
  box-shadow:0 8px 18px -10px var(--brand)}
.einstnav button.on svg{opacity:1;color:var(--on-brand)}
@media (max-width:900px){ .einstnav{position:static} }
.einst-linse{position:absolute;z-index:-1;left:0;top:0;width:var(--w,0);height:var(--h,0);
  transform:translate(var(--x,0),var(--y,0));border-radius:999px;background:var(--card-2);
  opacity:0;pointer-events:none;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),width .18s cubic-bezier(.2,.8,.2,1),
             height .18s cubic-bezier(.2,.8,.2,1),opacity .12s}
.einstnav.zeigt .einst-linse{opacity:1}
.einstnav button:hover:not(.on){background:transparent}
@media (prefers-reduced-motion:reduce){ .einst-linse{transition:opacity .12s} }

/* ---------- Firma → Erscheinungsbild: Icon-Feld ---------- */
.icon-zeile{display:flex;gap:var(--sp-3);align-items:flex-start}
.logofeld.icon{flex:none;width:76px;height:76px;padding:10px;display:grid;place-items:center}
.logofeld.icon img{width:100%;height:100%;max-height:none;object-fit:contain}
.logofeld.icon .logoleer{font:800 26px/1 var(--font);font-stretch:135%;color:var(--brand)}

/* ---------- Unterer Teil entfällt (07.10.2026) – mehr Platz für die Navigation ---------- */
#nav .nav-foot{display:none !important}

/* ---------- Symbole auf einer Sichtachse ----------
   Einige Zeichnungen sitzen in ihrem 24er-Raster nicht exakt mittig – hier
   optisch ausgleichen (Anteil der Symbolhöhe, Mitte soll bei 12 liegen). */
#nav nav a[data-icon="projekt"] svg{translate:0 -3.125%}
#nav nav a[data-icon="tasks"] svg{translate:0 -2.083%}
#nav nav a[data-icon="notizen"] svg{translate:0 -1.042%}
#nav nav a[data-icon="stoppuhr"] svg{translate:0 1.042%}
#nav nav a[data-icon="wissen"] svg{translate:0 2.083%}

/* Ab 641 px steht das Dock fest – das „Menü schließen“-X (für das ausfahrende Menü) hat dort nichts zu suchen */
@media (min-width:641px){ #navClose{display:none !important} }

/* ==== 59-farbwahl-marke.css ==== */
/* ==================================================================
   Farbwähler, Leisten-Vorschau, Anmeldemaske (02.10.2026)
   ================================================================== */

/* ---------- Akzentfarbe: Knopf füllt sein Feld, rund wie die Eingaben ---------- */
.farbknopf{flex:none;width:58px;height:var(--h-ctl);padding:0;border:0;border-radius:999px;cursor:pointer;
  background:var(--f,var(--brand));box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),var(--shadow);
  transition:transform .12s}
.farbknopf:hover{transform:scale(1.04)}
.farbknopf:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.farbknopf[aria-expanded="true"]{box-shadow:0 0 0 3px var(--brand-soft),inset 0 0 0 1px rgba(0,0,0,.1)}
.farbzeile #cdFarbeText{font-family:var(--f-mono);text-transform:uppercase}

/* ---------- Farbwähler (wie das Kalenderblatt) ---------- */
.fpop{position:fixed;z-index:400;width:280px;max-width:calc(100vw - 16px);padding:12px;
  display:flex;flex-direction:column;gap:12px;background:var(--card);color:var(--ink);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-lift);
  animation:dpopAuf .14s ease-out;font-size:var(--fs-base)}
.fp-flaeche{position:relative;height:160px;border-radius:var(--r);cursor:crosshair;touch-action:none;outline:0;
  background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,var(--ton))}
.fp-flaeche:focus-visible{box-shadow:0 0 0 3px var(--brand-soft)}
.fp-punkt{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;pointer-events:none;
  background:var(--farbe);box-shadow:0 0 0 3px #fff,0 2px 8px rgba(0,0,0,.35)}
.fp-ton{position:relative;height:14px;border-radius:999px;cursor:pointer;touch-action:none;outline:0;
  background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.fp-ton:focus-visible{box-shadow:0 0 0 3px var(--brand-soft)}
.fp-regler{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;pointer-events:none;
  background:var(--ton);box-shadow:0 0 0 3px #fff,0 2px 8px rgba(0,0,0,.35)}
.fp-zeile{display:flex;align-items:center;gap:8px}
.fp-muster{flex:none;width:36px;height:36px;border-radius:12px;background:var(--farbe);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.fp-hex{flex:1;min-width:0;height:36px;font-family:var(--f-mono);text-transform:uppercase}
.fp-vorschlaege{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding-top:10px;border-top:1px solid var(--line-soft)}
.fp-vorschlaege button{aspect-ratio:1;border:0;border-radius:50%;background:var(--f);cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:transform .12s}
.fp-vorschlaege button:hover{transform:scale(1.1)}
.fp-vorschlaege button.an{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--f)}
.fpop-hinter{display:none}
@media (max-width:640px){
  .fpop-hinter{display:block;position:fixed;inset:0;z-index:399;background:rgba(20,16,12,.38);animation:dpopHinter .18s}
  .fpop.blatt{left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;border-radius:24px 24px 0 0;border-bottom:0;
    padding:10px 16px calc(16px + env(safe-area-inset-bottom));animation:dpopHoch .22s cubic-bezier(.2,.8,.2,1)}
  .fpop.blatt::before{content:"";display:block;width:40px;height:4px;margin:0 auto;border-radius:999px;background:var(--line)}
  .fpop.blatt .fp-flaeche{height:200px}
  .fpop.blatt .fp-ton{height:22px}
}
@media (prefers-reduced-motion:reduce){ .fpop,.fpop-hinter{animation:none} }

/* ---------- Icon-Größe und Leisten-Vorschau ---------- */
.regelzeile{display:flex;align-items:center;gap:var(--sp-2)}
.regelzeile input[type=range]{flex:1;accent-color:var(--brand)}
.regelzeile output{min-width:46px;text-align:right;color:var(--ink-2)}
.leistenvorschau{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:flex-end;padding:var(--sp-3);
  border-radius:var(--r-lg);background:var(--bg);border:1px solid var(--line-soft)}
.lv-teil{display:flex;flex-direction:column;gap:6px;min-width:0}
.lv-teil > small{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ink-3)}
.lv .marke-kachel{display:grid}
.lv-breit{display:flex;align-items:center;height:64px;padding:0 4px}
.lv-breit img{display:block;width:auto;max-width:200px}
.lv-breit img[data-invert="1"]{filter:invert(1)}
.lv-breit b{font-weight:700;font-stretch:118%;white-space:nowrap}
.lv-tab{display:flex;align-items:center;gap:8px;height:34px;max-width:220px;padding:0 12px;border-radius:10px 10px 0 0;
  background:var(--card);box-shadow:var(--shadow);font-size:12.5px;color:var(--ink-2)}
.lv-tab img{width:16px;height:16px;flex:none}
.lv-tab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Anmeldemaske: Logo ---------- */
.anmeldemarke .anmeldelogo{display:block;width:auto;max-width:240px;max-height:56px}
.anmeldemarke .anmeldelogo[data-invert="1"]{filter:invert(1)}
.frage-knopf{display:inline-grid;place-items:center;width:18px;height:18px;margin-left:6px;padding:0;
  border:0;border-radius:50%;background:var(--card-2);color:var(--ink-2);font:700 11px/1 var(--font);
  vertical-align:1px;cursor:help}
.frage-knopf:hover,.frage-knopf:focus-visible{background:var(--brand);color:var(--on-brand);outline:0}
.hilfe-fahne{white-space:pre-line;max-width:300px}

/* Schnellerfassung auf dem Handy: die allgemeine Regel für Eingaben in .quickadd
   traf auch das Innere des Datumsfelds – das Kalendersymbol ragte heraus. */
.quickadd .dfeld .dfeld-text{flex:1 1 0;min-width:0}
.quickadd .dfeld .dfeld-knopf{flex:none;width:32px}

/* ==== 60-hinweise.css ==== */
/* ================================================================== *
 * Hinweise im ganzen Tool (02.10.2026)
 * Vorlage ist die neue Website (.addon / .todo): gestrichelte Kästchen
 * statt Kasten mit farbigem Balken links. Zwei Stufen:
 *   .hinweis                 dunkles Grau – zur Info
 *   .hinweis.warn / .warnung leichtes Rot – wichtig, bitte beachten
 *   .hinweis.ok              leichtes Grün – erledigt / alles in Ordnung
 * Liegt bewusst hinten in der Reihenfolge, damit es ältere Regeln
 * (06-notizen-drawer, 30-anmeldung, 49-mobil-plus, 54-schnittplatz) ablöst.
 * ================================================================== */
:root{
  --hw-rand:color-mix(in srgb, var(--ink) 34%, transparent);
  --hw-flaeche:color-mix(in srgb, var(--ink) 3%, transparent);
  --hw-rot-rand:color-mix(in srgb, var(--c-rot) 42%, transparent);
  --hw-rot-text:color-mix(in srgb, var(--c-rot) 88%, var(--ink));
  --hw-gruen-rand:color-mix(in srgb, var(--c-gruen) 42%, transparent);
}

:root .hinweis{
  display:block;
  background:var(--hw-flaeche);
  border:1px dashed var(--hw-rand);
  border-radius:12px;
  box-shadow:none;
  padding:12px 16px;
  margin-bottom:var(--sp-3);
  font-size:var(--fs-sm);
  line-height:1.5;
  color:var(--ink-2);
}
:root .hinweis strong,:root .hinweis b{color:var(--ink)}
:root .hinweis .hinweis-titel{display:block;margin-bottom:2px;font-weight:600;color:var(--ink)}
:root .hinweis code{word-break:break-all}

/* Wichtig: leichtes Rot */
:root .hinweis.warn,:root .hinweis.warnung,:root .hinweis.wichtig{
  background:var(--c-rot-bg);
  border-color:var(--hw-rot-rand);
  color:var(--hw-rot-text);
}
:root .hinweis.warn strong,:root .hinweis.warnung strong,:root .hinweis.wichtig strong,
:root .hinweis.warn .hinweis-titel,:root .hinweis.warnung .hinweis-titel,:root .hinweis.wichtig .hinweis-titel{
  color:var(--c-rot)}

/* Alles in Ordnung: leichtes Grün */
:root .hinweis.ok{background:var(--c-gruen-bg);border-color:var(--hw-gruen-rand);color:var(--ink-2)}

/* Klein (z. B. unter KI-Ergebnissen) */
:root .hinweis.klein{padding:8px 12px;font-size:12.5px;border-radius:10px;margin-bottom:var(--sp-2)}

/* Als Knopf (Dashboard: Sicherung) */
:root button.hinweis{width:100%;text-align:left;font:inherit;font-size:var(--fs-sm);cursor:pointer;
  transition:border-color .15s,background .15s}
:root button.hinweis:hover{border-style:solid}

/* ---------- Dieselbe Sprache für die übrigen Hinweiskästen ---------- */
/* Änderungswunsch des Kunden: wichtig */
:root .wunschkasten{
  border:1px dashed var(--hw-rot-rand);border-radius:12px;background:var(--c-rot-bg);
  padding:12px 16px}
/* Nachricht aus dem Kundenbereich: in der Markenfarbe, damit man sie vom Hinweis unterscheidet */
:root .kundenpost{
  border:1px dashed color-mix(in srgb, var(--brand) 45%, transparent);border-radius:12px;
  background:var(--brand-soft);padding:12px 16px}
/* Ungespeicherter Entwurf: zur Info */
:root .entwurfkasten{
  border:1px dashed var(--hw-rand);border-radius:12px;background:var(--hw-flaeche);padding:10px 14px}
:root .entwurfkasten strong{color:var(--ink)}
/* Stundenbudget: 80 % = Info, aufgebraucht = wichtig */
:root .budgetkasten{
  border:1px dashed var(--hw-rand);border-radius:12px;background:var(--hw-flaeche);padding:10px 14px}
:root .budgetkasten strong{color:var(--ink)}
:root .budgetkasten.voll{border-color:var(--hw-rot-rand);background:var(--c-rot-bg)}
:root .budgetkasten.voll strong{color:var(--c-rot)}


/* ==== 61-laden.css ==== */
/* ================================================================== *
 * Laden ohne Blinken (02.10.2026)
 * ================================================================== */
/* „Lädt …“ erscheint erst, wenn es wirklich dauert – sonst blitzt es bei jedem Laden kurz auf (02.10.2026) */
.laedt-hinweis{animation:laedtSpaet .25s ease .5s both}
@keyframes laedtSpaet{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.laedt-hinweis{animation:laedtSpaet 0s .5s both}}

/* Ausgeblendete Bereiche (fehlendes Recht) wirklich ausblenden – die Leistenregeln setzen
   display:flex und schlugen damit das hidden-Attribut (02.10.2026) */
:root #nav [hidden],:root #unten [hidden],:root #untenMenue [hidden]{display:none !important}

/* Nach dem Neuladen: Inhalt (Dashboard, Aufgaben …) schnell, aber weich einblenden.
   Die Klasse setzt starten() nur für den ersten Aufbau (02.10.2026). */
#view.einblenden > *,#view.einblenden #zs > *{animation:viewEin .24s cubic-bezier(.2,.7,.2,1) both}
@keyframes viewEin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  #view.einblenden > *,#view.einblenden #zs > *{animation:viewEinRuhig .15s linear both}
  @keyframes viewEinRuhig{from{opacity:0}to{opacity:1}}
}

/* ==== 62-player-hochladen.css ==== */
/* ==================================================================
 * Player im Beitrag + Upload-Anzeige (02.10.2026)
 * Das Aussehen des Players selbst steht in public/gemeinsam/player.css –
 * hier nur, wie groß er in der Seitenansicht ist.
 * ================================================================== */
.bg-playerfeld{margin-bottom:var(--sp-4)}
#drawerPanel .bg-player{height:clamp(320px, 54vh, 480px)}
#drawer[data-voll] #drawerPanel .bg-player{height:clamp(380px, 70vh, 820px)}
#drawerPanel .bg-player:focus-visible{outline:2px solid var(--brand-line);outline-offset:4px;border-radius:var(--r)}
@media (max-width:900px){ #drawerPanel .bg-player{height:auto} }

/* Zeitmarken im Chat */
.kchat-tc{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;
  border-radius:999px;border:1px solid var(--c-orange-l);background:var(--c-orange-bg);
  color:var(--c-orange);font:inherit;font-size:var(--fs-xs);font-weight:600;cursor:pointer}
.kchat-tc.team{border-color:var(--c-blau-l);background:var(--c-blau-bg);color:var(--c-blau)}
.kchat-tc:hover{filter:brightness(1.05)}
.kchat-zeile.leuchtet .kchat-blase{animation:kchatLeuchten 1.4s ease}
@keyframes kchatLeuchten{0%,40%{box-shadow:0 0 0 3px var(--brand-soft)}100%{box-shadow:none}}
.kchat-markezeile{display:flex;align-items:center;gap:8px;margin-top:var(--sp-2);
  font-size:var(--fs-xs);color:var(--ink-2)}
.kchat-uhr,.kchat-jetzt{color:var(--c-orange)}
.kchat-jetzt{font-weight:600}
.kchat-schalter{margin-left:auto;width:36px;height:21px;border:0;padding:0;border-radius:999px;
  background:var(--line);position:relative;cursor:pointer;transition:background .16s ease;flex:none}
.kchat-schalter::after{content:"";position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;
  border-radius:50%;background:var(--card);transition:transform .16s ease;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.kchat-schalter[aria-checked="true"]{background:var(--c-orange)}
.kchat-schalter[aria-checked="true"]::after{transform:translateX(15px)}

/* Uploads unten rechts: Prozent, Menge, Restzeit, Abbrechen */
#hochladen{position:fixed;right:16px;bottom:16px;z-index:95;width:min(340px, calc(100vw - 32px));
  display:grid;gap:8px}
.hl-eintrag{background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-lift, var(--shadow));padding:10px 12px;display:grid;gap:6px}
.hl-kopf{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm)}
.hl-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.hl-prozent{font-weight:700;color:var(--brand-text)}
.hl-x{border:0;background:none;color:var(--ink-3);cursor:pointer;font-size:13px;padding:2px 4px;border-radius:6px}
.hl-x:hover{color:var(--ink);background:var(--card-2)}
.hl-balken{height:6px;border-radius:999px;background:var(--card-2);overflow:hidden}
.hl-balken i{display:block;height:100%;width:0;border-radius:inherit;background:var(--brand);transition:width .2s linear}
.hl-info{font-size:var(--fs-xs);color:var(--ink-3)}
.hl-eintrag.ok .hl-balken i{background:var(--c-gruen)}
.hl-eintrag.ok .hl-prozent{color:var(--c-gruen)}
.hl-eintrag.fehler .hl-balken i{background:var(--c-rot)}
.hl-eintrag.fehler .hl-info{color:var(--c-rot)}
@media (max-width:760px){ #hochladen{bottom:calc(92px + env(safe-area-inset-bottom))} }
@media (prefers-reduced-motion:reduce){ .hl-balken i{transition:none} .kchat-zeile.leuchtet .kchat-blase{animation:none} }

/* ---- Medienfeld über der Caption: Player, darunter die Kacheln, Hochladen ----
   (03.10.2026) Ersetzt die alte Medienliste mit Zeilen. */
.bg-medienfeld{position:relative;border-radius:var(--r);transition:box-shadow .15s ease}
.bg-medienfeld.ziel{box-shadow:0 0 0 2px var(--brand),0 0 0 7px var(--brand-soft)}
.bg-medienfeld .bg-playerfeld{margin:4px 0 var(--sp-2)}
.mkacheln{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 var(--sp-2)}
.mkachel{position:relative;width:84px;display:grid;gap:4px;align-content:start}
.mkachel-bild{position:relative;width:84px;height:84px;padding:0;margin:0;border-radius:12px;overflow:hidden;
  border:2px solid transparent;background:var(--card-2);display:grid;place-items:center;cursor:pointer;
  box-shadow:none;transition:border-color .14s ease, transform .14s ease}
.mkachel-bild:hover{transform:translateY(-1px)}
.mkachel-bild img{width:100%;height:100%;object-fit:cover;display:block}
.mkachel[aria-current="true"] .mkachel-bild{border-color:var(--brand)}
.mk-symbol{font-size:26px;line-height:1}
.mk-play,.mk-nr{position:absolute;display:grid;place-items:center;border-radius:999px;
  background:rgba(10,8,6,.6);color:#fff;font-weight:600;pointer-events:none}
.mk-play{left:6px;bottom:6px;width:22px;height:22px;font-size:9px}
.mk-nr{left:5px;top:5px;min-width:18px;height:18px;padding:0 5px;font-size:11px}
.mk-aktionen{position:absolute;top:4px;right:4px;display:flex;gap:2px;opacity:0;transition:opacity .14s ease}
.mkachel:hover .mk-aktionen,.mkachel:focus-within .mk-aktionen,.mkachel.laedt .mk-aktionen{opacity:1}
@media (hover:none){ .mk-aktionen{opacity:1} }
.mk-knopf{width:22px;height:22px;min-height:0;padding:0;margin:0;border:0;border-radius:7px;
  background:rgba(10,8,6,.62);color:#fff;font:inherit;font-size:13px;line-height:1;cursor:pointer;
  display:grid;place-items:center;box-shadow:none}
.mk-knopf:hover{background:rgba(10,8,6,.85)}
.mk-knopf.weg:hover{background:var(--c-rot)}
.mk-knopf:disabled{opacity:.35;pointer-events:none}
/* Versionen (21.10.2026): Marke V2 unten rechts, „Neue Version hochladen“ unter den Aktionen */
.mk-version{position:absolute;right:5px;bottom:5px;height:18px;padding:0 6px;border-radius:999px;display:grid;place-items:center;
  background:var(--brand);color:#fff;font-size:11px;font-weight:700;pointer-events:none}
.mk-neuver{position:absolute;top:30px;right:4px;opacity:0;transition:opacity .14s ease}
.mk-neuver svg{width:14px;height:14px}
.mkachel:hover .mk-neuver,.mkachel:focus-within .mk-neuver{opacity:1}
.mkachel.laedt .mk-neuver{display:none}
@media (hover:none){ .mk-neuver{opacity:1} }
.mk-titel{font-size:var(--fs-xs);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkachel.neu{width:84px;height:84px;min-height:0;padding:0;margin:0;border:1.5px dashed var(--hw-rand);
  border-radius:12px;background:var(--hw-flaeche);color:var(--ink-2);box-shadow:none;
  display:grid;place-content:center;justify-items:center;gap:2px;font:inherit;font-size:var(--fs-xs);cursor:pointer}
.mkachel.neu:hover{border-color:var(--brand);color:var(--brand-text);background:var(--brand-soft)}
.mk-plus{font-size:24px;line-height:1;font-weight:300}
.mkachel.laedt .mkachel-bild{cursor:default;border:2px dashed var(--brand-line);transform:none}
.mk-prozent{font-weight:700;color:var(--brand-text);font-size:var(--fs-sm)}
.mk-balken{position:absolute;left:8px;right:8px;bottom:9px;height:4px;border-radius:999px;
  background:var(--line);overflow:hidden}
.mk-balken i{display:block;height:100%;width:0;background:var(--brand);transition:width .2s linear}
@media (prefers-reduced-motion:reduce){ .mk-balken i,.mkachel-bild{transition:none} }

/* ---- Kacheln ziehen + Dialog „Hinzufügen" (03.10.2026) ---- */
/* Ziehen: nur das Vorschaubild schwebt mit, an der alten Stelle eine Lücke. */
.mkachel[data-medium] .mkachel-bild{cursor:grab}
.mkachel.platzhalter .mkachel-bild{border:2px dashed var(--brand-line);background:var(--brand-soft);transform:none}
.mkachel.platzhalter .mkachel-bild > *,.mkachel.platzhalter .mk-aktionen,
.mkachel.platzhalter .mk-titel{opacity:0;transition:opacity .12s ease}
.mk-geist{position:fixed;left:0;top:0;z-index:300;margin:0;pointer-events:none;
  width:84px;height:84px;border-radius:12px;overflow:hidden;border:2px solid var(--brand);
  background:var(--card-2);display:grid;place-items:center;will-change:translate;
  box-shadow:0 2px 6px rgba(20,12,4,.12);
  transition:scale .18s cubic-bezier(.2,.8,.3,1), rotate .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease}
.mk-geist img{width:100%;height:100%;object-fit:cover;display:block}
.mk-geist .mk-aktionen{display:none}
.mk-geist.hoch{scale:1.08;rotate:-3deg;box-shadow:0 18px 38px rgba(20,12,4,.28),0 4px 10px rgba(20,12,4,.16)}
.mk-geist.landet{transition:translate .2s cubic-bezier(.2,.8,.3,1), scale .2s ease, rotate .2s ease, box-shadow .2s ease}
body.mk-zieht,body.mk-zieht *{cursor:grabbing !important;user-select:none}
@media (prefers-reduced-motion:reduce){ .mk-geist,.mk-geist.landet{transition:none} .mk-geist.hoch{rotate:0deg} }
.md-karte{width:min(560px, calc(100vw - 32px))}
.md-karte.breit{width:min(780px, calc(100vw - 32px));max-width:none}
.md-dbx .mp-dbx-liste{max-height:min(46vh, 420px)}
.md-hinweis{margin:calc(var(--sp-2) * -1) 0 var(--sp-3);line-height:1.4}
.md-reiter{display:flex;gap:4px;padding:4px;margin:0 0 var(--sp-3);border-radius:999px;background:var(--card-2)}
.md-reiter button{flex:1;height:36px;min-height:0;border:0;border-radius:999px;background:none;box-shadow:none;
  font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.md-reiter button[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.md-zahl{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--brand);color:var(--on-brand);
  font-size:11px;display:inline-grid;place-items:center}
.md-ablage{width:100%;min-height:180px;padding:var(--sp-4);border:1.5px dashed var(--hw-rand);border-radius:var(--r);
  background:var(--hw-flaeche);color:var(--ink);box-shadow:none;cursor:pointer;font:inherit;
  display:grid;place-content:center;justify-items:center;gap:6px;text-align:center;
  transition:border-color .14s ease, background .14s ease}
.md-ablage:hover,.md-ablage:focus-visible,.md-ablage.drueber{border-color:var(--brand);background:var(--brand-soft)}
.md-ablage-plus{font-size:34px;line-height:1;font-weight:300;color:var(--brand-text)}
.md-teil textarea{width:100%;min-height:130px;resize:vertical}
.md-teil small{display:block;margin-top:6px}
.md-anhaenge{display:grid;gap:6px;max-height:260px;overflow:auto}
.md-anhang{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:var(--card-2);cursor:pointer}
.md-anhang span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ==== 63-anheben.css ==== */
/* ==================================================================
   Anheben – Karten ziehen (03.10.2026, neu gebaut), gehört zu 65-anheben.js
   Gilt für jede Karte mit draggable="true".
   ================================================================== */
[draggable="true"]{cursor:grab}

/* Die schwebende Kopie */
.anheben-geist{
  position:fixed !important;left:0 !important;top:0 !important;z-index:500;margin:0 !important;
  pointer-events:none;box-sizing:border-box;will-change:translate;
  transition:scale .18s cubic-bezier(.2,.8,.3,1), rotate .18s cubic-bezier(.2,.8,.3,1),
             box-shadow .18s ease, opacity .2s ease}
.anheben-geist.hoch{scale:1.04;rotate:-1.6deg;
  box-shadow:0 22px 44px rgba(20,12,4,.22), 0 6px 14px rgba(20,12,4,.14) !important}
.anheben-geist.schwebt{scale:1.02;rotate:-.6deg}
.anheben-geist.landet{
  transition:translate .24s cubic-bezier(.2,.8,.3,1), width .24s ease, height .24s ease,
             scale .24s ease, rotate .24s ease, box-shadow .24s ease, opacity .24s ease}
.anheben-geist.weg{opacity:0;scale:.96}

/* Die Lücke an der alten Stelle – feste Höhe, damit sich im Board nichts verschiebt */
.anheben-platz{
  opacity:1 !important;background:var(--brand-soft) !important;box-shadow:none !important;
  outline:2px dashed var(--brand-line);outline-offset:-2px;border-color:transparent !important;
  transition:background-color .15s ease, outline-color .15s ease}
.anheben-platz > *,.anheben-platz::before,.anheben-platz::after{opacity:0 !important}
/* Zielt man auf eine andere Spalte, wird die Lücke leise (die Linie dort zählt) */
.anheben-platz.aus{background:transparent !important;outline-color:color-mix(in srgb, var(--line) 70%, transparent)}

/* Ring um die Zielspalte – liegt ÜBER den Karten, nur ein Rand, keine Fläche */
#anhebenRing{position:fixed;left:0;top:0;z-index:440;pointer-events:none;border-radius:var(--r-lg, 22px);
  box-shadow:inset 0 0 0 2px var(--brand), 0 0 0 5px var(--brand-soft);
  opacity:0;transition:opacity .14s ease, translate .16s cubic-bezier(.2,.8,.3,1),
    width .16s ease, height .16s ease}
#anhebenRing.an{opacity:1}

/* Leere Zielspalte: gestricheltes Feld in Kartengröße. (Der frühere Balken mit Punkten
   ist entfernt – er blitzte beim Ablegen als orangener Streifen auf.) */
#anhebenLinie{position:fixed;left:0;top:0;z-index:450;pointer-events:none;
  border-radius:var(--r, 16px);background:var(--brand-soft);
  outline:2px dashed var(--brand);outline-offset:-2px;
  opacity:0;scale:.97;
  transition:opacity .14s ease, scale .18s cubic-bezier(.2,.8,.3,1),
    translate .16s cubic-bezier(.2,.8,.3,1), width .16s ease, height .16s ease}
#anhebenLinie.an{opacity:1;scale:1}

html.anheben-aktiv,html.anheben-aktiv *{cursor:grabbing !important;user-select:none}

/* Kopie wartet aufs Neuzeichnen, die neue Karte ist bis zur Landung unsichtbar */
.anheben-wartet{opacity:0 !important}
/* Angekommen: kurzes Federn mit Leuchten */
.gelandet{animation:gelandet .5s cubic-bezier(.2,.8,.3,1)}
@keyframes gelandet{
  0%{scale:.97;box-shadow:0 0 0 0 var(--brand-soft)}
  45%{scale:1.012;box-shadow:0 0 0 6px var(--brand-soft)}
  100%{scale:1;box-shadow:0 0 0 0 transparent}
}

@media (prefers-reduced-motion:reduce){
  .anheben-geist,.anheben-geist.landet,#anhebenRing,#anhebenLinie{transition:none}
  .anheben-geist.hoch,.anheben-geist.schwebt{rotate:0deg;scale:1}
  .gelandet{animation:none}
}

/* ==== 64-inventar.css ==== */
/* ==================================================================
   INVENTAR (05.10.2026) – gehört zu 66-inventar.js
   ================================================================== */
.inv-nr{font:600 12.5px/1.2 var(--f-mono);letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:tabular-nums}
.inv-nr.klein{font-size:11.5px;color:var(--ink-3);font-weight:500}
.inv-nr.chip{background:var(--card-2);padding:3px 9px;border-radius:999px;font-size:12px}
.inv-ohne{font-size:10.5px;color:var(--c-orange);font-weight:600;margin-top:2px}
.inv-rot{color:var(--c-rot) !important;font-weight:600}
.inv-gold{color:var(--c-gold) !important;font-weight:600}
.inv-aus{opacity:.55}

/* Hinweise oben */
.inv-hinweise{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--sp-3)}
.inv-hinweis{display:inline-flex;align-items:center;gap:8px;border:0;padding:7px 14px 7px 8px;border-radius:999px;
  background:var(--card);box-shadow:var(--shadow);font-size:13px;font-weight:500;color:var(--ink);cursor:pointer}
.inv-hinweis b{min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:grid;place-items:center;
  font:700 12px var(--f-mono);background:var(--cb);color:var(--c)}
.inv-hinweis.on{background:var(--c);color:#fff}
.inv-hinweis.on b{background:rgba(255,255,255,.25);color:#fff}
.inv-stats{margin-bottom:var(--sp-3)}
.inv-stats .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Tabelle */
.inv-tabelle td{vertical-align:middle}
.inv-tabelle tbody tr{cursor:pointer}
.inv-tabelle .rechts{text-align:right}
.inv-cb{width:17px;height:17px;accent-color:var(--brand);cursor:pointer;margin:0}
.inv-geraet{display:flex;align-items:center;gap:10px;min-width:0}
.inv-geraet strong{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px}
.inv-geraet .small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px}
.inv-ico{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--cb);color:var(--c)}
.inv-ico svg{width:18px;height:18px}
.inv-ico.gross{width:44px;height:44px;border-radius:15px}
.inv-ico.gross svg{width:22px;height:22px}
.inv-ico.klein{width:28px;height:28px;border-radius:10px}
.inv-ico.klein svg{width:15px;height:15px}
.inv-bei{display:flex;align-items:center;gap:8px;min-width:0}
.inv-gar{min-width:110px}
.inv-gar.breit{margin-top:var(--sp-2)}
.inv-balken{height:6px;border-radius:99px;background:var(--card-2);overflow:hidden;margin-bottom:4px}
.inv-balken i{display:block;height:100%;border-radius:99px}
.inv-klammer{color:var(--ink-3)}
.inv-klammer svg{width:16px;height:16px}

/* Karten */
.inv-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;align-items:start}
.inv-karte{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;
  gap:10px;cursor:pointer;transition:transform .15s,box-shadow .15s;min-width:0}
.inv-karte:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.inv-karte:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.inv-karte-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px}
.inv-karte h3{margin:0;font-size:15px;font-weight:650;line-height:1.25}
.inv-karte-fuss{display:flex;align-items:center;gap:6px;flex-wrap:wrap}


/* Ausgabe */
.inv-personen{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;align-items:start}
.inv-person{display:flex;flex-direction:column;gap:4px;min-width:0}
.inv-person header{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.inv-zeile{display:flex;align-items:center;gap:10px;width:calc(100% + 16px);margin:0 -8px;padding:7px 8px;border:0;border-radius:12px;
  background:none;text-align:left;cursor:pointer;color:inherit;min-width:0}
.inv-zeile:hover{background:var(--card-2)}
.inv-zeile .grow{min-width:0;display:flex;flex-direction:column}
.inv-zeile .t{font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Etiketten */
.inv-druck{display:grid;grid-template-columns:330px minmax(0,1fr);gap:16px;align-items:start}
.inv-druck-panel{display:flex;flex-direction:column;gap:10px;position:sticky;top:0}
.inv-h3{margin:6px 0 0;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.inv-formate{display:flex;flex-direction:column;gap:6px}
.inv-format{display:grid;grid-template-columns:34px 1fr;gap:1px 10px;align-items:center;text-align:left;padding:9px 12px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);cursor:pointer;color:inherit}
.inv-format:hover{border-color:var(--ink-3)}
.inv-format.on{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.inv-format .sym{grid-row:1/3;width:34px;height:34px;border-radius:10px;background:var(--card-2);display:grid;place-items:center;color:var(--ink-2)}
.inv-format .sym svg{width:18px;height:18px}
.inv-format.on .sym{background:var(--brand);color:#fff}
.inv-format b{font-size:13px;font-weight:600}
.inv-format small{font-size:11.5px;color:var(--ink-3);line-height:1.3}
.inv-schalter{display:flex;flex-direction:column;gap:2px}
.inv-schalter label,.inv-schalter-zeile{display:flex;align-items:center;gap:10px;font-size:13px;padding:5px 0;cursor:pointer}
.inv-schalter input,.inv-schalter-zeile input{width:17px;height:17px;accent-color:var(--brand);margin:0}
.inv-schnell{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.inv-schnell .ghost.klein,.ghost.klein{height:30px;padding:0 11px;font-size:12.5px}
.inv-etliste{max-height:280px;overflow:auto;display:flex;flex-direction:column;gap:1px;margin:0 -6px;padding:0 6px}
.inv-etliste label{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;font-size:13px;cursor:pointer;min-width:0}
.inv-etliste label:hover{background:var(--card-2)}
.inv-etliste .ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.inv-kopien{display:flex;align-items:center;gap:10px;font-size:13px}
.inv-kopien input{width:72px;text-align:center}
.inv-tisch-wrap{min-width:0}
.inv-tisch{background:color-mix(in srgb,var(--card-2) 70%,var(--line));border-radius:24px;padding:20px;min-width:0;overflow:hidden}
.inv-tisch-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;font-size:13px;color:var(--ink-2)}
.inv-tisch-kopf b{color:var(--ink)}
.inv-tisch-kopf .btn{margin-left:auto}
.inv-massstab{position:relative;margin:0 auto}
.inv-massstab > .inhalt{position:absolute;left:0;top:0;transform-origin:0 0}
.inv-druckhinweis{margin-top:var(--sp-2);max-width:78ch}
.inv-bogen{width:210mm;height:297mm;background:#fff;position:relative;box-shadow:0 20px 50px -20px rgba(0,0,0,.45);overflow:hidden}
.inv-bogen .inv-zelle{position:absolute;display:flex}
.inv-bogen .inv-zelle.leer{outline:1px dashed #d4ccc2;outline-offset:-1px}
.inv-bogen .inv-zelle.klickbar{cursor:pointer}
.inv-bogen .inv-zelle.klickbar:hover,.inv-bogen .inv-zelle.start{background:#fff1e5}
.inv-bogen.schnitt .inv-zelle:not(.leer){outline:1px dashed #9b9189;outline-offset:-.5px}
.inv-bogen.klebe .inv-zelle:not(.leer){outline:1px solid #ebe5dd;outline-offset:-.5px}
.inv-rolle{background:#fff;padding:0 2mm;width:max-content;box-shadow:0 20px 50px -20px rgba(0,0,0,.45)}
.inv-rolle .inv-zelle{display:flex;border-bottom:.4mm dashed #c9c0b6}
.inv-rolle .inv-zelle:last-child{border-bottom:0}
.inv-leer{padding:8mm 6mm;color:#888;font-size:3.2mm}

/* Das Etikett selbst – Maße in mm, Farben fest: Papier ist immer weiß */
.inv-etikett{background:#fff;color:#111;display:flex;align-items:center;gap:2mm;padding:2mm 2.4mm;overflow:hidden;width:100%;height:100%;
  font-family:var(--font)}
.inv-etikett .qr{flex:none;height:100%;aspect-ratio:1;display:grid;place-items:center}
.inv-etikett .qr svg{width:100%;height:100%;display:block}
.inv-etikett .tx{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center;gap:.6mm;height:100%}
.inv-etikett .firma{font-weight:800;font-size:2.1mm;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:1mm;
  white-space:nowrap;overflow:hidden}
.inv-etikett .firma i{width:2.4mm;height:2.4mm;border-radius:.6mm;background:var(--brand);flex:none}
.inv-etikett .name{font-weight:600;font-size:3mm;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.inv-etikett .nr{font:700 4.6mm/1 var(--f-mono);letter-spacing:-.02em;white-space:nowrap}
.inv-etikett .fund{font-size:1.9mm;color:#555;line-height:1.2}
.inv-etikett.k{padding:1.4mm 1.6mm;gap:1.4mm}
.inv-etikett.k .nr{font-size:3.2mm}
.inv-etikett.k .name{font-size:2.2mm;-webkit-line-clamp:1}
.inv-etikett.k .firma{font-size:1.7mm}
.inv-etikett.b{padding:0 2.4mm;gap:2mm}
.inv-etikett.b .qr{height:9mm}
.inv-etikett.b .tx{flex-direction:row;align-items:center;gap:2.5mm}
.inv-etikett.b .nr{font-size:4.6mm}
.inv-etikett.b .name{font-size:2.8mm;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* Seitenansicht */
.inv-etikett-mini{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:14px;border-radius:20px;margin-bottom:var(--sp-4);
  background:color-mix(in srgb,var(--card-2) 70%,var(--line))}
.inv-etikett-rahmen{width:62mm;height:29mm;max-width:100%;flex:none;box-shadow:0 8px 20px -12px rgba(0,0,0,.55);border-radius:2px;overflow:hidden}
.inv-etikett-knoepfe{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.inv-ausgabe{padding:12px;border-radius:18px;background:var(--card-2)}
.inv-ausgabe .field{margin-bottom:var(--sp-2)}
.inv-ausgabe-wer{display:flex;align-items:center;gap:10px}

/* Einstellungen */
.inv-einst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.inv-einst h2{margin:0 0 var(--sp-3);font-size:18px}
.inv-einst-fuss{grid-column:1/-1;display:flex;justify-content:flex-end}
.inv-nk-vorschau{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:18px;background:var(--card-2);margin-bottom:var(--sp-3)}
.inv-nk-vorschau small{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.inv-nk-vorschau b{font:700 30px/1.1 var(--f-mono);letter-spacing:-.03em;word-break:break-all}
.inv-kuerzel{display:flex;flex-direction:column;gap:4px}
.inv-kuerzel > div{display:flex;align-items:center;gap:10px;font-size:13.5px}

@media (max-width:1100px){
  .inv-druck,.inv-einst{grid-template-columns:minmax(0,1fr)}
  .inv-druck-panel{position:static}
}
@media (max-width:640px){
  .inv-tisch{padding:12px}
  .inv-geraet strong,.inv-geraet .small{max-width:200px}
}

/* Druck: nur die Etiketten, in Originalgröße (Seitengröße setzt 66-inventar.js) */
#invDruck{display:none}
@media print{
  body.inv-druckt > *:not(#invDruck){display:none !important}
  body.inv-druckt{margin:0 !important;padding:0 !important;background:#fff !important}
  body.inv-druckt #invDruck{display:block}
  #invDruck .inv-bogen{box-shadow:none;page-break-after:always;break-after:page}
  #invDruck .inv-bogen .inv-zelle{outline:0 !important;background:none !important}
  #invDruck .inv-bogen.schnitt .inv-zelle:not(.leer){outline:.2mm dashed #999 !important}
  #invDruck .inv-druckseite{page-break-after:always;break-after:page;overflow:hidden}
  #invDruck .inv-druckseite .inv-zelle{border:0;display:flex;width:100%;height:100%}
  #invDruck .inv-etikett{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* Seitenansicht (09.10.2026): Rechnung sitzt mit Kauf und Garantie in einer Karte */
.inv-rechnung{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--line-soft)}
.inv-rechnung .inv-h3{display:block;margin:0 0 var(--sp-2)}
#drawerPanel .seg-zeile + [data-invwo]{margin-top:var(--sp-3)}
#drawerPanel .card > .seg-zeile:first-child{border-top:0;padding-top:0}

/* ==== 65-auswahl.css ==== */
/* ==================================================================
   Markieren (07.10.2026)
   Bedienung lässt sich nicht markieren: Überschriften, Knöpfe, Menüs,
   Reiter, Chips, Feld-Beschriftungen, Kacheln. Inhalte (Beschreibungen,
   Notizen, Kommentare, Kontaktdaten) bleiben markierbar – und alles
   zusammen kopiert der Knopf oben rechts in der Seitenansicht.
   ================================================================== */
#nav,#topbar,#unten,#untenMenue,.dd-menu,.einstnav,
button,.btn,.ghost,.iconbtn,.tag,kbd,th,.toast,
h1,h2,h3,.hero,.page-head,.drawer-head,.card.stat,
.card > p.muted.small,.field > label,.modal-fuss,.task-foot{
  -webkit-user-select:none;user-select:none}
/* Eingaben und Texte bleiben immer markierbar (Safari: sonst kein Tippen) */
input,textarea,select,[contenteditable="true"],.prose,.prose *,.editor-flaeche,.editor-flaeche *{
  -webkit-user-select:text;user-select:text}

/* Inventar: Nummer oben ist ein Knopf zum Kopieren */
button.inv-nr{border:0;background:none;padding:0;color:inherit;cursor:copy}
button.inv-nr:hover{color:var(--brand-text)}

/* Kopieren-Knopf mit Pfeil: eine Kapsel aus zwei Hälften */
.kopierpaar{display:inline-flex;flex:none;gap:1px}
.kopierpaar > .iconbtn:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
.kopierpaar > .iconbtn.pfeil{width:calc(var(--h-ctl) * .62);border-top-left-radius:0;border-bottom-left-radius:0}
.kopierpaar > .iconbtn.pfeil svg{width:14px;height:14px;transition:transform .15s}
.kopierpaar > .iconbtn.pfeil[aria-expanded="true"] svg{transform:rotate(180deg)}
#kopierMenue{min-width:200px}

/* ==== 66-mappen.css ==== */
/* ==================================================================
   EXPORTMAPPEN (07.10.2026) – Seite wie im Entwurf:
   links die Liste, rechts die gewählte Mappe als Karten.
   Die Galerie selbst steht in gemeinsam/galerie.css (auch im Kundenbereich).
   ================================================================== */
.mp-seite{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);gap:var(--sp-4);align-items:start}
.mp-spalte-l{position:sticky;top:var(--sp-3);display:grid;gap:var(--sp-2);grid-template-columns:minmax(0,1fr);
  max-height:calc(100vh - 2 * var(--sp-3));overflow:auto;padding:2px 4px var(--sp-3) 2px;scrollbar-width:thin}
.mp-spalte-r{display:grid;gap:var(--sp-3);min-width:0}
.mp-kopfzeile{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.mp-kopfzeile h1{margin:0}
/* Reiter: bleiben in der Spalte, waagerecht scrollbar – ohne sichtbaren Balken, weiche Kante am Rand */
.mp-tabs{display:flex;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  overscroll-behavior-x:contain;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.mp-tabs::-webkit-scrollbar{display:none}
.mp-tabs button{flex:0 0 auto;justify-content:center;padding:0 12px;font-size:var(--fs-sm);white-space:nowrap}
.mp-tabs.rand-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.mp-tabs.rand-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);mask-image:linear-gradient(90deg,transparent,#000 28px)}
.mp-tabs.rand-l.rand-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
.mp-arten{display:flex;flex-wrap:wrap;gap:6px}
.mp-arten:empty{display:none}
.mp-arten button svg{width:14px;height:14px}
.mp-arten button b{font-weight:500;color:var(--ink-3)}
.mp-liste{display:grid;gap:8px}
.nurhandy{display:none}

/* Eine Zeile der Liste */
.mp-zeile{display:grid;gap:7px;padding:12px 14px;text-align:left;font:inherit;color:inherit;cursor:pointer;width:100%;
  border:1px solid var(--line);background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
  transition:border-color .15s ease, box-shadow .15s ease}
.mp-zeile:hover{border-color:var(--brand-line)}
.mp-zeile[aria-current="true"]{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft), var(--shadow)}
.mp-zeile.neu .mp-artsym::after{content:"";position:absolute;right:-3px;top:-3px;width:10px;height:10px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 0 2px var(--card)}
.mp-zo{display:flex;align-items:center;gap:9px;min-width:0}
.mp-artsym{position:relative;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:var(--brand-soft);color:var(--brand-text)}
.mp-artsym svg{width:16px;height:16px}
.mp-zo .t{font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-zz{font-size:var(--fs-xs);color:var(--ink-3);font-variant-numeric:tabular-nums;flex:none}
.mp-zu{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--ink-3);min-width:0}
.mp-zu > span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mp-zu > span:last-child{white-space:nowrap}
.mp-pkt{width:7px;height:7px;border-radius:50%;flex:none;background:var(--c-grau)}
.mp-pkt.t-orange{background:var(--c-orange)} .mp-pkt.t-gruen{background:var(--c-gruen)}
.mp-pkt.t-blau{background:var(--c-blau)} .mp-pkt.t-grau{background:var(--c-grau)}
.mp-balken{display:flex;height:5px;border-radius:999px;background:var(--c-grau-bg);overflow:hidden}
.mp-balken i{display:block;height:100%}
.mp-balken .s-frei{background:var(--c-gruen)} .mp-balken .s-aend{background:var(--c-orange)} .mp-balken .s-ab{background:var(--c-rot)}

/* Zahl am Menüpunkt: Rückmeldungen, die noch keiner angesehen hat */
#nav nav a[data-nav="mappen"]{position:relative}
.nav-zahl{position:absolute;left:22px;top:5px;min-width:17px;height:17px;padding:0 5px;border-radius:999px;
  background:var(--brand);color:var(--on-brand);font-size:10.5px;font-weight:700;line-height:17px;text-align:center;
  box-shadow:0 0 0 2px var(--card);pointer-events:none}

/* ---------- Rechte Spalte ---------- */
.mp-leer{display:grid;justify-items:center;gap:var(--sp-2);text-align:center;padding:var(--sp-6) var(--sp-4)}
.mp-leer > svg{width:44px;height:44px;color:var(--brand-text)}
.mp-leer h2{margin:0}
.mp-leer p{max-width:520px;margin:0 0 var(--sp-2)}
.mp-karte{display:grid;gap:var(--sp-3);min-width:0}
.mp-kh{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap}
.mp-kh h3{margin:0;font-size:var(--fs-md)}

/* Kopf-Karte */
.mp-kz{display:flex;align-items:flex-start;gap:var(--sp-3);flex-wrap:wrap}
.mp-kt{display:grid;gap:2px;flex:1;min-width:220px}
/* Titel: liegt ruhig auf der Karte (ohne Hover), beim Bearbeiten rundes Feld wie alle Eingaben */
.mp-titel{border:1px solid transparent !important;background:none !important;box-shadow:none !important;
  padding:var(--sp-2) var(--sp-4) !important;height:auto !important;margin-left:calc(-1 * var(--sp-4));
  width:calc(100% + var(--sp-4));border-radius:999px !important;
  font-size:var(--fs-xl);font-weight:700;letter-spacing:-.01em;color:var(--ink);
  transition:background .15s,border-color .15s}
.mp-titel:focus{background:var(--card) !important;border-color:var(--brand) !important;outline:none}
.mp-status{display:flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:var(--ink-2)}
.mp-kk{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.mp-kk .btn:disabled{opacity:.45;box-shadow:none;cursor:default}
.mp-felder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3)}
.mp-felder .field{margin:0}
.mp-begruessung{display:flex;gap:var(--sp-3);align-items:stretch}
.mp-titelbild{position:relative;flex:none;width:150px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);
  background:var(--card-2);padding:0;cursor:pointer;display:grid;place-items:center;color:var(--ink-3);min-height:100px}
.mp-titelbild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mp-titelbild svg{width:28px;height:28px}
.mp-titelbild.leer{border-style:dashed}
.mp-titelbild span{position:absolute;left:6px;bottom:6px;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:600}
.mp-titelbild.leer{display:grid;align-content:center;justify-items:center;gap:6px;padding:var(--sp-2)}
.mp-titelbild.leer span{background:none;color:var(--ink-2);position:static;font-size:var(--fs-xs);font-weight:600;padding:0;text-align:center}
.mp-titelbild.leer small{display:block;font-weight:400;color:var(--ink-3);margin-top:2px;line-height:1.3}
.mp-titelbild.leer svg{width:22px;height:22px}
.mp-titelbild:hover:not(:disabled){border-color:var(--brand-line)}
.mp-titelbild.drueber{border-color:var(--brand);background:var(--brand-soft)}
.mp-titelbild.laedt{opacity:.6;pointer-events:none}

/* Material hinzufügen */
.mp-reiter{width:100%}
.mp-reiter button{flex:1;justify-content:center}
.mp-ablage{display:grid;justify-items:center;gap:6px;padding:var(--sp-4);text-align:center}
.mp-plus{font-size:30px;line-height:1;color:var(--brand-text);font-weight:300}
.mp-hl{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;width:100%;margin-top:var(--sp-1)}
.mp-hl:empty{display:none}
.mp-hlk{display:grid;gap:5px;padding:8px 10px;border-radius:var(--r-sm);background:var(--card);border:1px solid var(--line);text-align:left;font-size:var(--fs-xs)}
.mp-hlk .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;color:var(--ink)}
.mp-hlk .bal{height:5px;border-radius:999px;background:var(--line);overflow:hidden}
.mp-hlk .bal i{display:block;height:100%;width:0;background:var(--brand);transition:width .25s ease}
.mp-hlk.fertig .bal i{background:var(--c-gruen)}
.mp-hlk.fehler .bal i{background:var(--c-rot)} .mp-hlk.fehler .s{color:var(--c-rot)}
.mp-unterablage{display:flex;gap:var(--sp-2);margin-top:var(--sp-2)}
.mp-unterablage svg{width:15px;height:15px}
.mp-erkannt{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 14px;border:1px dashed var(--brand-line);
  background:var(--brand-soft);border-radius:var(--r-sm);color:var(--brand-text);font-size:var(--fs-sm)}
.mp-erkannt b{color:var(--ink)}
.mp-erkannt svg{width:16px;height:16px}
.mp-erkannt.neutral{background:var(--card-2);border-color:var(--line);color:var(--ink-2)}

/* Dropbox */
.mp-dbx-konto{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mp-dbx-konto svg{width:15px;height:15px;color:var(--c-gruen)}
.linkknopf{border:0;background:none;padding:0;color:var(--brand-text);text-decoration:underline;cursor:pointer;font:inherit}
.mp-dbx-form{display:flex;gap:var(--sp-2);align-items:flex-end;flex-wrap:wrap;margin-top:var(--sp-2)}
.mp-scan{display:grid;gap:var(--sp-2);margin-top:var(--sp-3)}
.mp-scanbalken{height:8px;border-radius:999px;background:var(--card-2);overflow:hidden;position:relative}
.mp-scanbalken i{display:block;height:100%;background:var(--brand);border-radius:999px;transition:width .3s ease}
.mp-scanbalken.laeuft i{position:absolute;width:35%;animation:mpScan 1.2s ease-in-out infinite}
@keyframes mpScan{0%{left:-35%}100%{left:100%}}
.mp-check{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--fs-sm)}
.mp-check input{width:auto;height:auto;margin:0;accent-color:var(--brand)}
.mp-wahlliste{display:grid;gap:var(--sp-2);max-height:360px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--sp-2)}
.mp-wgruppe{display:grid;gap:2px}
.mp-wkopf{padding:6px 4px;border-bottom:1px solid var(--line)}
.mp-wkopf svg{width:15px;height:15px;color:var(--ink-3)}
.mp-wdatei{padding:4px 4px 4px 22px;border-radius:8px}
.mp-wdatei:hover{background:var(--card-2)}
.mp-wdatei .n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-wart svg{width:14px;height:14px;color:var(--ink-3)}
.mp-dbx-setup{display:grid;gap:var(--sp-2)}

/* Aus Dateien */
.mp-dateiwahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;max-height:380px;overflow:auto}
.mp-dkachel{position:relative;display:grid;gap:3px;padding:6px;border-radius:var(--r-sm);border:1px solid var(--line);cursor:pointer;font-size:var(--fs-xs)}
.mp-dkachel:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.mp-dkachel input{position:absolute;top:10px;left:10px;width:auto;height:auto;margin:0;accent-color:var(--brand)}
.mp-dkachel img,.mp-dvid{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:var(--card-2);display:grid;place-items:center}
.mp-dvid svg{width:24px;height:24px;color:var(--ink-3)}
.mp-dkachel .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}

/* Einstellungen */
.mp-schalt{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) 0;border-top:1px solid var(--line)}
.mp-kh + .mp-schalt{border-top:0;padding-top:0}
.mp-schalt .l{display:grid;gap:2px;min-width:0}
.mp-schalt .l small{line-height:1.4}
.mp-seg{height:34px;flex:none}
.mp-seg button{font-size:var(--fs-sm);padding:0 11px}
.mp-sw{margin:0}
.mp-linkblock{display:grid;gap:var(--sp-2);padding:var(--sp-2) 0 0}
.mp-link{display:flex;gap:var(--sp-2);align-items:center}
.mp-link input{flex:1;min-width:0;font-size:var(--fs-sm);color:var(--ink-2)}
.mp-pw{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--h-ctl);flex-wrap:wrap}

/* Rückmeldung */
.mp-zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--sp-2)}
.mp-zahl{padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);background:var(--card-2);display:grid;gap:2px}
.mp-zahl b{font-size:var(--fs-xl);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.mp-zahl span{font-size:var(--fs-xs);color:var(--ink-3)}
.mp-knoepfe{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.mp-fusszeile{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:flex-end;padding-bottom:var(--sp-4)}

@media (max-width:1240px){ .mp-felder{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:980px){
  .mp-seite{grid-template-columns:minmax(0,1fr)}
  .mp-spalte-l{position:static;max-height:none;overflow:visible}
  .mp-seite.mit-detail .mp-spalte-l{display:none}
  .mp-seite:not(.mit-detail) .mp-spalte-r{display:none}
  .nurhandy{display:inline-grid}
  .nurhandy svg{rotate:90deg}
}
@media (max-width:640px){
  .mp-felder{grid-template-columns:minmax(0,1fr)}
  .mp-begruessung{flex-direction:column}
  .mp-titelbild{width:100%;aspect-ratio:16/9;min-height:0}
  .mp-schalt{flex-direction:column;align-items:flex-start}
  .mp-seg{max-width:100%;overflow-x:auto}
  .mp-titel{font-size:var(--fs-lg)}
}

/* Dropbox: Meine Dropbox durchblättern (07.10.2026) */
.mp-dbx-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap}
.mp-dbx-modus{height:34px}
.mp-dbx-modus button{font-size:var(--fs-sm)}
.mp-dbx-leiste{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}
.mp-dbx-leiste input[type=search]{flex:0 1 260px;min-width:160px;margin-left:auto}
.mp-krumen{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:0;font-size:var(--fs-sm);color:var(--ink-3)}
.mp-krumen button{border:0;background:none;padding:4px 6px;border-radius:8px;font:inherit;color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.mp-krumen button:hover{background:var(--card-2);color:var(--ink)}
.mp-krumen button[aria-current="true"]{color:var(--ink);font-weight:600}
.mp-krumen svg{width:15px;height:15px}
.mp-dbx-liste{margin-top:var(--sp-2);border:1px solid var(--line);border-radius:var(--r-sm);max-height:420px;overflow:auto;padding:4px}
.mp-dbx-zeile{display:grid;grid-template-columns:auto 44px minmax(0,1fr) auto 14px;align-items:center;gap:10px;
  padding:6px 8px;border-radius:10px;cursor:pointer}
.mp-dbx-zeile:hover{background:var(--card-2)}
.mp-dbx-zeile:has(input:checked){background:var(--brand-soft)}
.mp-dbx-zeile input{width:auto;height:auto;margin:0;accent-color:var(--brand)}
.mp-dbx-bild{width:44px;height:34px;border-radius:7px;overflow:hidden;background:var(--card-2);display:grid;place-items:center;color:var(--ink-3)}
.mp-dbx-zeile.ordner .mp-dbx-bild{background:var(--brand-soft);color:var(--brand-text)}
.mp-dbx-bild img{width:100%;height:100%;object-fit:cover}
.mp-dbx-bild svg{width:18px;height:18px}
.mp-dbx-name{display:grid;min-width:0}
.mp-dbx-name b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-dbx-name small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-dbx-rein{color:var(--ink-3);font-size:18px;line-height:1}
.mp-dbx-fuss{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-2)}
.mp-dbx-fuss > span{margin-right:auto}
@media (max-width:640px){ .mp-dbx-zeile{grid-template-columns:auto 40px minmax(0,1fr) 14px} .mp-dbx-zeile > .muted{display:none} }

/* Titelbild: Spalte mit Größenhinweis */
.mp-titelspalte,.mp-begrspalte{margin:0;display:flex;flex-direction:column}
.mp-titelspalte{flex:none;width:190px}
.mp-begrspalte{flex:1}
/* Kästchen und Begrüßung gleich hoch auf derselben Achse */
.mp-titelspalte .mp-titelbild,.mp-begrspalte textarea{flex:1;width:100%;min-height:96px}
.mp-titelbild.leer small b{color:var(--ink-2);font-weight:600}
.mp-warn{color:var(--c-orange, var(--c-rot))}
@media (max-width:760px){ .mp-titelspalte{width:100%} .mp-titelspalte .mp-titelbild{flex:none;aspect-ratio:8/3;min-height:0} }

/* ---------- 08.10.2026 ---------- */
/* Reiter: :root .viewswitch (Schnittplatz) setzt overflow:visible – hier wieder scrollbar.
   Passt alles hinein, verteilen sich die Reiter über die ganze Breite. */
:root .mp-tabs{overflow-x:auto;overflow-y:hidden;justify-content:space-between;scroll-behavior:auto}
/* Trenner zwischen Mappen und Beiträgen */
.mp-trenner{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-2) 0 2px;
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);
  -webkit-user-select:none;user-select:none}
.mp-trenner::before,.mp-trenner::after{content:'';flex:1;height:1px;background:var(--line)}

/* ==== 67-untermenue.css ==== */
/* ==================================================================
   Untermenüs links (08.10.2026)
   Linke Spalte mit Überschrift steht starr oben links (.untermenue-links),
   rechts scrollt der Inhalt mit der Seite. Wird die Spalte selbst zu lang,
   scrollt nur ihr unterer Teil (Liste bzw. Bereiche) – die Überschrift bleibt.
   Unter 980 px (Mappen) bzw. 900 px (Einstellungen) wieder normal untereinander.
   ================================================================== */
.untermenue-links{position:sticky;top:var(--starr-oben);align-self:start;
  max-height:calc(100vh - var(--starr-oben) - var(--sp-3));min-height:0}

/* Exportmappen: Kopf, Reiter, Suche, Arten stehen – nur die Liste scrollt */
@media (min-width:981px){
  .mp-spalte-l.untermenue-links{display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
  .mp-spalte-l.untermenue-links > *{flex:none}
  .mp-spalte-l.untermenue-links > .mp-liste{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    padding:2px 2px var(--sp-3);scrollbar-width:thin}
}

/* Einstellungen: Überschrift über den Bereichen, beides in der linken Spalte */
.einst-links{display:flex;flex-direction:column;gap:var(--sp-3);z-index:2}
.einst-links > .page-head{margin:0}
.einst-links > .page-head small{display:block}
:root .einst-links > .einstnav{position:relative;top:auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
@media (max-width:900px){
  .einst-links{position:static;max-height:none}
  :root .einst-links > .einstnav{overflow:visible}
}
@media (max-width:980px){ .mp-spalte-l.untermenue-links{position:static;max-height:none} }

/* Überschrift „Einstellungen“ ist breiter als 220 px – Spalte wächst mit, der Untertitel bricht um */
@media (min-width:901px){
  .einstlayout{grid-template-columns:minmax(220px,max-content) minmax(0,1fr);column-gap:var(--sp-6)}
  .einst-links > .page-head small{max-width:26ch}
}

/* ==== 68-aufgabe-neu.css ==== */
/* Neue Aufgabe in der Seitenansicht (08.10.2026) */
.an-neu #anTitel{font-size:var(--fs-lg);font-weight:600}
.an-neu .modal-fuss{justify-content:space-between}

/* ==== 69-profil.css ==== */
/* ==================================================================
   Mein Profil (08.10.2026)
   Bild 50 px, Stift unten rechts als Hinweis „ändern“; Umschalter mit Titeln.
   ================================================================== */
.profil-kopf{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.profil-bild{position:relative;flex:none;width:50px;height:50px;padding:0;border:0;background:none;border-radius:50%;cursor:pointer}
.profil-bild .avatar{width:50px;height:50px;font-size:17px;transition:filter .15s}
.profil-bild:hover .avatar{filter:brightness(1.08)}
.profil-stift{position:absolute;right:-3px;bottom:-3px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--brand);color:var(--on-brand);box-shadow:0 0 0 2px var(--card)}
.profil-stift svg{width:11px;height:11px}
.profil-bild:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.profil-text{display:grid;gap:2px;min-width:0}
.profil-text strong{font-size:var(--fs-md)}
.linkknopf{border:0;background:none;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.linkknopf:hover{color:var(--ink)}

/* Zeile mit Titel links und Umschalter rechts – wie in den Exportmappen */
.seg-zeile{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) 0;
  border-top:1px solid var(--line);margin-bottom:var(--sp-2)}
.seg-zeile .l{display:grid;gap:2px;min-width:0}
.seg-zeile .l small{line-height:1.4}
/* Kein eigenes Maß: genau der Umschalter der Exportmappen (:root .viewswitch aus 54-schnittplatz.css).
   Eine eigene Höhe drückte die Knöpfe in eine zu flache Kapsel. */
.viewswitch.seg{flex:none}
.viewswitch.seg button{white-space:nowrap}
@media (max-width:640px){
  .seg-zeile{flex-direction:column;align-items:flex-start}
  .viewswitch.seg{max-width:100%;overflow-x:auto}
}

/* ==== 70-dokumente.css ==== */
/* ==================================================================
 * DOKUMENTE IM KUNDEN (08.10.2026) – js/72-dokumente.js
 * Nur Variablen aus 01-grundlagen.css → Hell und Dunkel automatisch.
 * ================================================================== */
.dok-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;
  margin-bottom:var(--sp-2)}
.dok-kopf h3{margin:0;color:var(--ink-2);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.07em;font-weight:500}
:root .dok-kopf h3{font-size:var(--fs-xs);letter-spacing:.09em;font-weight:700;color:var(--ueberschrift)}   /* wie .section>h3 im Schnittplatz-Design */
.dok-werkzeug{display:flex;align-items:center;gap:var(--sp-2);flex:1;justify-content:flex-end;min-width:0}
.dok-suche{width:min(170px,100%);min-width:0;height:30px;min-height:0;padding:0 12px;font-size:var(--fs-sm)}
.dok-werkzeug .ghost svg{width:16px;height:16px;vertical-align:-3px;margin-right:2px}

/* Pfad: Alle Dokumente › Verträge › 2026 */
.dok-pfad{display:flex;align-items:center;flex-wrap:wrap;gap:2px;margin:0 0 var(--sp-3)}
.dok-pfad[hidden]{display:none}
.dok-krume{padding:4px 10px;border-radius:999px;color:var(--ink-3);font-size:var(--fs-sm);cursor:pointer;
  border:1px solid transparent;transition:background .12s,color .12s,border-color .12s}
.dok-krume:hover{background:var(--card-2);color:var(--ink)}
.dok-krume.on{color:var(--ink);font-weight:600;cursor:default}
.dok-krume.on:hover{background:none}
.dok-trenner{display:inline-flex;color:var(--ink-3)}
.dok-trenner svg{width:12px;height:12px}

/* Ordner als Kacheln: Symbol · Name · Anzahl in einer Zeile */
.dok-ordner{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--sp-2);
  margin-bottom:var(--sp-3)}
.dok-kachel{display:flex;align-items:center;gap:var(--sp-2);min-height:46px;padding:6px 6px 6px var(--sp-3);
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow);
  cursor:pointer;min-width:0;transition:border-color .12s,background .12s}
.dok-kachel:hover{border-color:var(--line);background:var(--card-2)}
.dok-kachel:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.dok-kachel-icon{display:inline-flex;flex:none;color:var(--brand)}
.dok-kachel-icon svg{width:20px;height:20px}
.dok-kachel .t{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dok-zahl{flex:none;margin-left:auto;min-width:22px;height:20px;padding:0 7px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--card-2);color:var(--ink-2);font-size:var(--fs-xs);font-weight:600}
.dok-zahl.leer{background:none;color:var(--ink-3);font-weight:400;font-size:var(--fs-sm);padding:0 2px}
.dok-kachel .dok-mehr{flex:none;opacity:.55}
.dok-kachel:hover .dok-mehr,.dok-kachel .dok-mehr:focus-visible{opacity:1}
/* „Zurück“: wie ein Ordner, nur leiser */
.dok-hoch{background:var(--card-2);box-shadow:none;border-style:dashed;border-color:var(--line)}
.dok-hoch .dok-kachel-icon{color:var(--ink-3)}
.dok-hoch .dok-zahl{background:none;font-weight:400;font-size:var(--fs-sm);max-width:50%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;line-height:20px;padding-right:8px}

/* Ziel beim Ziehen – und „geht gleich auf“ (DOK_WARTEN) */
.dok-drueber{border-color:var(--brand)!important;background:var(--brand-soft)!important;color:var(--brand-text)}
.dok-oeffnet{position:relative;overflow:hidden}
.dok-oeffnet::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--brand);
  transform-origin:left;animation:dokFuellen .6s linear forwards}
@keyframes dokFuellen{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Beim Ziehen in einem anderen Ordner: weißer Platz, wo die Dateien liegen */
.dok-hierhin{display:flex;align-items:center;gap:var(--sp-3);min-height:58px;margin:0 0 var(--sp-2);
  padding:var(--sp-2) var(--sp-4);border-radius:var(--r-lg);background:var(--card);
  border:2px dashed var(--brand-line);color:var(--ink-2);box-shadow:var(--shadow);
  animation:dokAuf .22s cubic-bezier(.2,.8,.3,1);transition:border-color .12s,background .12s}
.dok-hierhin > span:last-child{display:flex;flex-direction:column;min-width:0}
.dok-hierhin strong{color:var(--ink)}
.dok-hierhin small{color:var(--ink-3);font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dok-hierhin-icon{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand-text)}
.dok-hierhin-icon svg{width:16px;height:16px}
.dok-hierhin.dok-drueber{border-style:solid}
.dok-hierhin.dok-drueber .dok-hierhin-icon{background:var(--brand);color:var(--on-brand)}
@keyframes dokAuf{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.dok-gezogen{opacity:.35}

/* Dateizeilen: Basis aus 32-dateien-verlauf.css */
.dok-liste{margin-bottom:var(--sp-3)}
.dok-zeile{border-radius:var(--r-lg)}
.dok-zeile .dateivorschau{cursor:pointer}
.dok-zeile .dateisymbol{position:relative}
.dok-zeile .dateisymbol i{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
  font-style:normal;font-size:8px;font-weight:700;letter-spacing:.02em;line-height:1;
  padding:1px 3px;border-radius:3px;background:var(--brand);color:var(--on-brand)}
.dok-name{display:flex;flex-direction:column;align-items:flex-start;min-width:0;cursor:pointer}
.dok-name:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-sm)}
.dok-name .t{max-width:100%}
.dok-name .muted{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Angehoben (65-anheben.js): rund bleiben, wie die Aufgabenkarten */
.anheben-geist.dok-zeile,.anheben-geist.dok-kachel{border-radius:var(--r-lg);overflow:hidden;background:var(--card)}

/* Vorschau-Fenster */
.dok-vorschau{position:fixed;inset:0;z-index:215;display:flex;align-items:center;justify-content:center;
  padding:var(--sp-5)}
.dok-v-hinter{position:absolute;inset:0;background:rgba(20,17,14,.55)}
.dok-v-karte{position:relative;display:flex;flex-direction:column;width:min(880px,100%);height:min(80vh,100%);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lift);
  overflow:hidden;animation:ddauf .14s ease-out}
.dok-v-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line-soft)}
.dok-v-titel{display:flex;flex-direction:column;min-width:0}
.dok-v-titel strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dok-v-kopf .aktionen{display:flex;gap:var(--sp-1);flex:none}
.dok-v-koerper{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:var(--card-2)}
.dok-v-koerper iframe{width:100%;height:100%;border:0;background:var(--card)}
.dok-v-koerper[data-art="text"] iframe{background:#fff}
.dok-v-player{width:100%;height:100%;padding:var(--sp-3)}
.dok-v-player.gp{height:100%}
.dok-v-leer{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);color:var(--ink-3);
  text-align:center;padding:var(--sp-5)}
.dok-v-leer svg{width:44px;height:44px}
.dok-v-leer p{margin:0;max-width:340px}

@media (max-width:640px){
  .dok-werkzeug{flex-basis:100%;justify-content:stretch}
  .dok-suche{flex:1;width:auto}
  .dok-ordner{grid-template-columns:1fr}
  .dok-kachel .dok-mehr{opacity:1}
  .dok-vorschau{padding:0}
  .dok-v-karte{height:100%;border-radius:0;border:0}
}
@media (prefers-reduced-motion:reduce){ .dok-v-karte,.dok-hierhin{animation:none} .dok-oeffnet::after{animation:none;transform:none} }

/* Eigener Platz für Ordner und Dateien – weiße Fläche wie die Karten im Dashboard */
.dok-feld{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:var(--sp-3);margin-bottom:var(--sp-3)}
.dok-feld > :last-child,.dok-feld .dok-liste:last-child{margin-bottom:0}
.dok-feld .dok-kachel{background:var(--card-2);box-shadow:none;border-color:transparent}
.dok-feld .dok-kachel:hover{border-color:var(--line);background:var(--card-2)}
.dok-feld .dok-hoch{background:transparent;border-color:var(--line)}
.dok-feld .dok-zeile{background:var(--card-2);border-color:transparent}
.dok-feld .dok-zeile:hover{border-color:var(--line)}
.dok-feld .dok-zeile .dateivorschau{background:var(--card)}
.dok-feld .dok-zahl{background:var(--card)}
.dok-feld .dok-zahl.leer{background:none}
.dok-feld .leer{text-align:center;padding:var(--sp-4) 0}

/* Auswahl: keine Kästchen – die Einträge werden umrandet */
.dok-werkzeug .ghost.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-text)}
.dok-waehlt .dok-zeile,.dok-waehlt .dok-kachel:not(.dok-hoch){cursor:pointer;user-select:none}
.dok-gewaehlt,.dok-feld .dok-gewaehlt{outline:2px solid var(--brand);outline-offset:-2px;background:var(--brand-soft) !important}
.dok-gewaehlt .dateivorschau{background:var(--card)}
/* Mehrere gezogen: Zahl an der schwebenden Karte */
.anheben-geist[data-anzahl]::after{content:attr(data-anzahl);position:absolute;top:6px;right:6px;min-width:22px;height:22px;
  padding:0 6px;border-radius:999px;display:grid;place-items:center;background:var(--brand);color:var(--on-brand);
  font-size:var(--fs-xs);font-weight:700;box-shadow:var(--shadow)}
/* Stapel hinter der schwebenden Karte (mehrere ausgewählt) */
.dok-stapel{position:fixed;left:0;top:0;z-index:499;pointer-events:none;will-change:translate}
.dok-stapel-karte{position:absolute;left:0;top:0;margin:0 !important;box-sizing:border-box;
  border-radius:var(--r-lg);background:var(--card) !important;border:1px solid var(--line) !important;
  box-shadow:0 10px 26px rgba(20,12,4,.16);overflow:hidden;
  transform:translate(0, 0) rotate(-1deg);
  transition:transform .32s cubic-bezier(.2,.9,.3,1.15)}
.dok-stapel-karte > *{opacity:0}
.dok-stapel.auf .dok-stapel-karte{transform:translate(var(--x), var(--y)) rotate(var(--r))}
@media (prefers-reduced-motion:reduce){ .dok-stapel{display:none} }
/* Angehoben: kompakte Karte (dokKompakt), ruhiger gekippt, ohne Knöpfe */
.anheben-geist.dok-zeile.hoch,.anheben-geist.dok-kachel.hoch{scale:1.02;rotate:-1deg}
.anheben-geist.dok-zeile .iconbtn,.anheben-geist.dok-kachel .dok-mehr{display:none}
.anheben-geist.dok-zeile .dok-name .muted{white-space:nowrap}

/* ==== 71-hochladen.css ==== */
/* ==================================================================
 * HOCHLADEN (08.10.2026) – js/73-hochladen-dialog.js
 * Das Fenster nutzt md-karte/md-ablage aus 62-player-hochladen.css.
 * ================================================================== */
.hl-infos{display:flex;flex-direction:column;gap:6px;margin-top:var(--sp-3)}
.hl-info{display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.4}
.hl-info svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--ink-3)}
.hl-info strong{color:var(--ink);font-weight:600}

/* Ablage im Inhalt */
.hl-ablage{display:flex;align-items:center;justify-content:flex-start;gap:var(--sp-3);text-align:left;
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r)}
.hl-ablage:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.hl-ablage .hl-ablage-icon{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand-text);transition:transform .15s ease}
.ablage .hl-ablage-icon svg{width:18px;height:18px;vertical-align:0}
.hl-ablage:hover .hl-ablage-icon,.hl-ablage.drueber .hl-ablage-icon{transform:translateY(-2px)}
.ablage .hl-ablage-text{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;flex:1}
.hl-ablage-text strong{color:var(--ink);font-weight:600;font-size:var(--fs-base)}
.hl-ablage-text small{color:var(--ink-3);font-size:var(--fs-sm)}
.ablage .hl-ziel{display:inline-flex;align-items:center;gap:5px;flex:none;max-width:45%;
  padding:4px 10px;border-radius:999px;background:var(--card-2);color:var(--ink-2);font-size:var(--fs-sm)}
.hl-ziel[hidden]{display:none !important}
.hl-ziel svg{width:14px;height:14px;flex:none;color:var(--brand)}
.hl-ziel span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Maus oder Finger: passender Text */
.hl-nur-touch,.ablage .hl-nur-touch{display:none}
.ablage .hl-nur-maus{display:inline}
@media (hover:none) and (pointer:coarse){
  .hl-nur-maus,.ablage .hl-nur-maus{display:none}
  .hl-nur-touch,.ablage .hl-nur-touch{display:inline}
  strong.hl-nur-touch{display:block}
}
@media (max-width:640px){
  .hl-ablage{flex-direction:column;justify-content:center;text-align:center;gap:var(--sp-2);padding:var(--sp-4)}
  .ablage .hl-ablage-text{align-items:center}
  .ablage .hl-ziel{max-width:100%}
  .md-ablage{min-height:150px}
}

/* ==== 72-hinweis-unten.css ==== */
/* ==================================================================
 * HINWEIS UNTEN – EINE Vorlage für alles, was unten mittig schwebt (08.10.2026)
 * Toast („Gespeichert“, „Rückgängig“), „Neue Version“, Auswahlleiste (Kunden,
 * Leads, Dokumente). Alle sehen gleich aus: dunkle Kapsel, eine Zeile, gleiche Knöpfe.
 *
 * Aufbau (JS: untenHinweisHtml() in 01-grundlagen.js):
 *   <div class="unten-hinweis">
 *     <span class="uh-text">Text</span>
 *     <span class="uh-aktionen"><button class="ghost klein">Neben</button><button class="btn klein">Haupt</button></span>
 *     <button class="iconbtn klein uh-zu">×</button>          (optional)
 *   </div>
 * Knöpfe: btn = Hauptaktion (Markenfarbe), ghost = Nebenaktion, btn gefahr = rot.
 * Abstand nach unten: --uh-abstand (am Handy über der unteren Leiste, 57-responsive.css).
 * ================================================================== */
:root{--uh-abstand:var(--sp-4)}

.unten-hinweis{
  position:fixed;left:0;right:0;bottom:var(--uh-abstand);margin:0 auto;z-index:250;
  width:max-content;max-width:calc(100vw - 2 * var(--sp-4));box-sizing:border-box;
  display:flex;align-items:center;gap:var(--sp-2);
  min-height:44px;padding:6px 6px 6px 18px;border-radius:999px;
  background:var(--ink);color:var(--bg);
  font-family:var(--font);font-size:var(--fs-base);font-weight:500;line-height:1.35;
  box-shadow:var(--shadow-lift);
}
.unten-hinweis[hidden]{display:none}
.unten-hinweis:not(:has(button)){padding:6px 20px}
.uh-text{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:4px}
.uh-text strong{font-weight:700}
.uh-aktionen{display:flex;gap:6px;align-items:center;flex:none}

/* Knöpfe – überall gleich, auch gegen die Pillen-Optik aus 46-stil.css */
.unten-hinweis :is(.btn,.ghost){height:32px;min-height:0;padding:0 14px;border-radius:999px;
  font-size:var(--fs-sm);font-weight:600;white-space:nowrap;box-shadow:none !important;background-image:none !important}
.unten-hinweis .btn{background:var(--brand) !important;border:1px solid var(--brand) !important;color:var(--on-brand) !important}
.unten-hinweis .btn:hover{filter:brightness(1.08)}
.unten-hinweis .btn.gefahr{background:var(--c-rot) !important;border-color:var(--c-rot) !important;color:#fff !important}
.unten-hinweis .ghost{background:transparent;border:1px solid color-mix(in srgb, var(--bg) 28%, transparent);color:var(--bg)}
.unten-hinweis .ghost:hover{background:color-mix(in srgb, var(--bg) 12%, transparent)}
.unten-hinweis :is(.btn,.ghost):disabled{opacity:.45;cursor:default;filter:none}
.unten-hinweis .iconbtn{width:32px;height:32px;flex:none;background:none;border-color:transparent;color:var(--bg)}
.unten-hinweis .iconbtn:hover{background:color-mix(in srgb, var(--bg) 12%, transparent)}

/* Toast: blendet weich ein und aus, nur der Knopf nimmt Klicks */
#toast{z-index:260;pointer-events:none;opacity:0;transform:translateY(16px);
  transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .28s ease}
#toast.sichtbar{opacity:1;transform:none}
#toast button{pointer-events:auto}
/* Steht schon eine Leiste unten, rückt der Toast darüber statt sie zu verdecken */
body:has(#wahlLeiste:not([hidden])) #toast,
body:has(#neueVersion) #toast{bottom:calc(var(--uh-abstand) + 54px)}

@media (max-width:760px){
  .unten-hinweis{left:var(--sp-3);right:var(--sp-3);width:auto;max-width:none;border-radius:20px;
    flex-wrap:wrap;row-gap:8px;padding:10px 10px 10px var(--sp-4)}
  .uh-text{flex:1;white-space:normal;overflow:visible}
  .uh-zu{order:2}
  .uh-aktionen{order:3;flex:1 1 100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
  .uh-aktionen button{width:100%;justify-content:center;height:38px}
  /* Nur Text (z. B. „Gespeichert“): kleine Kapsel in der Mitte */
  .unten-hinweis:not(:has(button)){left:0;right:0;width:max-content;max-width:calc(100vw - 2 * var(--sp-3));
    border-radius:999px;padding:8px 18px}
  body:has(#wahlLeiste:not([hidden])) #toast,
  body:has(#neueVersion) #toast{bottom:calc(var(--uh-abstand) + 112px)}
}
@media (prefers-reduced-motion:reduce){
  #toast{transition:opacity .15s linear;transform:none}
}

/* ==== 73-boards-quer.css ==== */
/* ==================================================================
   Boards nebeneinander (09.10.2026) – Aufgaben, Redaktionsplan, Kunden-Board
   Spalten brechen nie mehr in eine zweite Reihe um, sondern gehen nach rechts
   weiter (wie Microsoft Planner). Das Board ist so hoch wie der Bildschirm,
   jede Spalte scrollt in sich. Höhe kommt aus js/75-boards-quer.js (--board-h).
   Scrollen außerhalb der Spalten = seitlich (ebenfalls 75-boards-quer.js).
   Handy (≤ 640 px) bleibt beim Wischen mit Reitern (49-mobil-plus.css).
   ================================================================== */
@media (min-width:641px){
  .board,.kd-board{display:flex;grid-template-columns:none;gap:var(--sp-3);align-items:flex-start;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    height:var(--board-h, auto);padding-bottom:var(--sp-2);scrollbar-width:thin}
  .board > .col,.kd-board > .kd-spalte{flex:0 0 var(--spalte-b);max-height:100%;min-height:0;
    display:flex;flex-direction:column;box-sizing:border-box}
  .board > .col > .col-head,.kd-board > .kd-spalte > header{flex:none}
  /* Etwas Luft ringsum, damit Schatten und Anheben-Lücke nicht abgeschnitten werden */
  .board .col-body,.kd-board .kd-spalte-body{flex:0 1 auto;overflow-y:auto;overscroll-behavior-y:contain;
    margin:0 calc(-1 * var(--sp-1));padding:2px var(--sp-1) var(--sp-1);scrollbar-width:thin}
  /* Wo es seitlich weitergeht, blendet der Rand weich aus (rand-l/rand-r setzt 75-boards-quer.js) */
  :is(.board,.kd-board).rand-l{--rand-l:var(--board-rand)}
  :is(.board,.kd-board).rand-r{--rand-r:var(--board-rand)}
  :is(.board,.kd-board):is(.rand-l,.rand-r){
    mask-image:linear-gradient(to right,transparent,#000 var(--rand-l,0px),#000 calc(100% - var(--rand-r,0px)),transparent)}
  /* Spalten scrollen in sich – ganz ohne Balken und ohne Ausblenden (Wunsch Dustin, 12.10.2026) */
  .board .col-body,.kd-board .kd-spalte-body{scrollbar-width:none}
  :is(.board .col-body,.kd-board .kd-spalte-body)::-webkit-scrollbar{display:none}
}

/* ==== 74-erwaehnen.css ==== */
/* ==================================================================
   @-Erwähnungen (09.10.2026) – Vorschlagsliste beim Tippen und Markierung im Text
   (js/77-erwaehnen.js). Die Liste nutzt die Optik der Auswahlmenüs (.dd-menu).
   ================================================================== */
.erw-menue{position:fixed;z-index:1200;width:280px}
.erw-menue .dd-opt{display:flex;align-items:center;gap:var(--sp-2)}
.erwaehnung{color:var(--brand-text);background:var(--brand-soft);border-radius:var(--r-sm);padding:0 3px;font-weight:500}

/* Unter-Notizen (js/78-notiz-punkte.js): dieselbe Optik wie die Unteraufgaben */
.notiz-punkte-neu{margin-top:var(--sp-3)}
.notiz-fortschritt{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);color:var(--ink-3)}
/* „+“ bleibt in jeder Ansicht ein kleiner Knopf neben dem Feld (auch am Handy, wo .quickadd-Knöpfe sonst breit werden) */

/* ==== 75-dreh-lager.css ==== */
/* ==================================================================
   Drehtag als Aufgabe + Equipment aus dem Lager (10.10.2026)
   js/80-dreh-lager.js, js/71-aufgabe-neu.js, Karte in js/20-dashboard.js
   ================================================================== */
/* Karte im Aufgaben-Board */
.drehtag-marke{display:inline-flex;align-items:center;gap:4px;vertical-align:1px}
.drehtag-marke svg{width:13px;height:13px}

/* Drehtag-Seite: reservierte Geräte über der freien Checkliste */
.dreh-lager{margin-bottom:var(--sp-3);padding-bottom:var(--sp-3);border-bottom:1px solid var(--line-soft)}
.dreh-lager-kopf{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.dreh-lager-kopf .ghost{margin-left:auto}
.dreh-lager-hinweis{display:block;margin-top:2px;font-size:var(--fs-xs);color:var(--c-orange)}
.dreh-lager-hinweis svg{width:12px;height:12px;vertical-align:-2px}

/* Auswahlfenster */
.dreh-lagerwahl{width:min(560px,100%)}
.dreh-lagersuche{width:100%;margin:var(--sp-2) 0}
.dreh-lagerliste{max-height:min(420px,55vh);overflow:auto;display:grid;gap:var(--sp-1);overscroll-behavior:contain}
.dreh-lagerzeile{display:flex;align-items:center;gap:var(--sp-2);width:100%;text-align:left;padding:var(--sp-2);
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:inherit;cursor:pointer}
.dreh-lagerzeile:hover{border-color:var(--brand-line)}
.dreh-lagerzeile.an{border-color:var(--c-gruen);background:var(--c-gruen-bg)}

/* Gerät: kommende Reservierungen */
.inv-res:empty{display:none}
.inv-res{display:grid;gap:var(--sp-1);margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--line-soft)}
.inv-res-zeile{display:flex;align-items:center;gap:var(--sp-2);width:100%;text-align:left;padding:var(--sp-1) var(--sp-2);
  border:0;border-radius:var(--r-sm);background:var(--card-2);color:inherit;cursor:pointer}
.inv-res-zeile svg{width:15px;height:15px;color:var(--c-orange)}

/* Abos & Lizenzen: Zeilen öffnen die Seitenansicht */
.abo-tabelle tbody tr{cursor:pointer}
.abo-tabelle .rechts{text-align:right}

/* ==== 76-handy.css ==== */
/* ==================================================================
   Handy (12.10.2026) – Kopfzeile, Kalender, Zeitstrahl, Inventar
   Kommt als letzte Datei, damit sie die Regeln der Bereiche überschreibt.
   ================================================================== */
#sucheBtn{display:none}

@media (max-width:640px){
  /* ---------- Kopfzeile: Lupe statt Suchfeld, kein Pfeil am Profilbild ---------- */
  :root #topbar{flex-wrap:wrap}
  #sucheBtn{display:inline-flex;margin-right:auto;width:42px;height:42px;border-radius:999px;
    background:var(--card);box-shadow:var(--shadow)}
  body.suche-offen #sucheBtn{color:var(--brand-text)}
  #topbar .search{display:none}
  body.suche-offen #topbar .search{display:block;order:9;flex:1 1 100%}
  body.suche-offen #results{position:absolute;top:calc(100% + 6px);left:0;right:0}
  .userbox #userSel{display:none}
  #userAv{cursor:pointer}

  /* ---------- Kalender: der ganze Monat passt auf den Bildschirm ---------- */
  :root .kalender{overflow:hidden}
  :root .kalkopfzeile,:root .kalwoche{min-width:0;grid-template-columns:repeat(7,minmax(0,1fr))}
  :root .kalkw{display:none}
  :root .kalkopfzeile > *{padding:6px 0;letter-spacing:0}
  :root .kaltag{height:78px;min-height:0;padding:2px}
  :root .kalnr{font-size:11.5px;padding:1px 3px;min-width:18px}
  :root .kaleintrag{padding:1px 3px;gap:0;font-size:10px;border-radius:4px}
  :root .kaleintrag .zeit,:root .kaleintrag .pkt{display:none}
  :root .kalmehr{font-size:10px;padding:0 3px}
  .kalmehr-wort{display:none}
  /* Woche und Tag etwas kompakter */
  :root .ztagkopf{padding:6px 0}
  :root .ztagkopf .wt{font-size:9.5px;letter-spacing:0}
  :root .ztagkopf .nr{font-size:var(--fs-sm)}

  /* ---------- Zeitstrahl: schmalere Namen, kleinere Tage, flacheres Zeitband ---------- */
  :root .zs{--zs-name:92px;gap:10px}
  :root .zs-name{padding:6px 8px}
  :root .zs-kunde{font-size:12.5px}
  :root .zs-name .mono{font-size:10px}
  :root .zs-ecke{padding:0 8px 8px;font-size:9.5px;letter-spacing:.04em}
  :root .zs-tag{padding:12px 0 6px}
  :root .zs-tag b{font-size:var(--fs-sm)}
  :root .zs-tag small{font-size:9px}
  :root .zs-clip{font-size:11px;padding:0 7px 0 6px;gap:4px}
  :root .zs-hinweis,:root .zs-ruhig{height:30px;padding:0 11px;font-size:12px}
  :root .zs-hinweise{min-height:30px;gap:6px}
  :root .zs-band{padding:6px 12px 8px;border-radius:18px}
  :root .zs-band-info b{font-size:14px}
  :root .zs-band-spur{height:36px;margin-top:24px}
  :root .zs-legende{padding:8px 10px;font-size:11px;gap:4px 10px}

  /* ---------- Inventar: Etiketten und CSV gibt es nur am Rechner ---------- */
  .ansicht-pillen [data-ansicht="etiketten"],
  #inv .page-head a[href^="/api/export"],
  .inv-etikett-bereich{display:none !important}
}

/* ==== 77-social.css ==== */
/* Social Media über Zernio (15.10.2026) – Kunde, Beitrag, Verbindungen (js/81-social.js) */
.soc .list-item{gap:var(--sp-2)}
.soc-anfrage{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-3) 0}
.soc-anfragen{display:grid;gap:var(--sp-2);margin-top:var(--sp-3)}
.soc-wahl{display:flex;flex-wrap:wrap;gap:var(--sp-1)}
.soc-knoepfe{display:flex;justify-content:flex-end;gap:var(--sp-2);flex-wrap:wrap}
.soc .seg-zeile{margin-top:var(--sp-4)}
.soc-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin:var(--sp-4) 0 var(--sp-2)}
.soc-kopf h4{margin:0;font-size:var(--fs-md)}
.soc-regel.aus .grow{opacity:.55}
.soc-formular{display:grid;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.soc-kanaele{display:flex;flex-wrap:wrap;gap:var(--sp-2);font-size:var(--fs-sm)}
.soc-kanal{display:inline-flex;align-items:center;gap:var(--sp-1)}
.soc-kanal.fehlt{color:var(--c-rot)}
#bgSocial > .field{margin-top:var(--sp-3)}

@media (max-width:640px){
  .soc-knoepfe > *{flex:1}
}
.soc-belegt{margin:var(--sp-2) 0 0}
.soc-zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);margin:var(--sp-3) 0}
.soc-zahlen > div{display:flex;flex-direction:column}
.soc-zahlen b{font-size:var(--fs-lg)}
.soc-faellig{color:var(--c-rot)}

/* ==== 78-reiter.css ==== */
/* ==================================================================
   Modul-Register (16.10.2026): Reiter-Leisten, Trenner + „Mehr“ in der
   Seitenleiste, Analytics, Auswertung, Team. Optik der Pillen = .viewswitch
   (Schnittplatz, 54-schnittplatz.css) – hier nur für Links statt Knöpfe.
   ================================================================== */

/* ---------- Reiter-Leiste oben im Bereich ---------- */
/* Steht seit 0.20.0 unter dem Titel der Seite (in #view), links bündig */
.reiter-leiste{position:relative;display:flex;margin:calc(var(--sp-1) * -1) 0 var(--sp-4);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.reiter-leiste .reiter-pillen{position:relative}
.reiter-kapsel{position:absolute;top:4px;left:0;height:var(--reiter-h);border-radius:999px;
  background:var(--card);box-shadow:var(--shadow);pointer-events:none}
:root .reiter-leiste .viewswitch a{position:relative;z-index:1}
:root .reiter-leiste .viewswitch a.on{background:none;box-shadow:none}
:root .reiter-leiste .viewswitch a:hover:not(.on){background:none}
/* Leiste und Gruß im Dashboard bleiben beim Wechsel stehen – nur der Inhalt gleitet herein */
#view.seitenwechsel > .reiter-leiste,#view.seitenwechsel > .bleibt{animation:none}
.reiter-leiste::-webkit-scrollbar,.kd-reiter::-webkit-scrollbar{display:none}
.reiter-pillen{display:inline-flex;flex:none}
:root .ansicht-pillen{position:relative;flex:none}        /* Ansicht in der Filterzeile – Kapsel wie bei den Reitern */
:root .ansicht-pillen a{position:relative;z-index:1;cursor:pointer}
:root .viewswitch.ansicht-pillen a.on{background:none;box-shadow:none}
:root .viewswitch.ansicht-pillen a:hover:not(.on){background:none}
:root .ansicht-pillen a svg{color:var(--ink-3)}
:root .ansicht-pillen a.on svg{color:var(--brand)}       /* aktive Ansicht: Symbol in Markenfarbe wie vorher */
.toolbar .kd-aktionen{display:inline-flex;gap:var(--sp-2);align-items:center}
:root .viewswitch a{display:inline-flex;align-items:center;gap:6px;border-radius:999px;height:var(--reiter-h);
  padding:0 14px;color:var(--ink-2);font-weight:500;text-decoration:none;white-space:nowrap}
:root .viewswitch a:hover{background:color-mix(in srgb,var(--card) 60%,transparent);color:var(--ink)}
:root .viewswitch a.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow);font-weight:600}
:root .viewswitch a:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--brand)}

/* … in der Seitenansicht eines Kunden */
.kd-reiter{position:relative;display:flex;margin:0 0 var(--sp-4);overflow-x:auto;scrollbar-width:none}
#drawerPanel > .kd-reiter{flex:none}

@media (max-width:640px){
  .reiter-leiste{margin-bottom:var(--sp-3)}
}
/* Reiter gibt es wieder am Rechner – aber nur für Unterseiten (Dashboard, Kunden, Analytics), 20.10.2026 */

/* ---------- Seitenleiste: dünner Trenner zwischen den Gruppen ---------- */
#nav nav .nav-trenner{position:relative;z-index:1;flex:none;width:auto;height:1px;border:0;padding:0;
  margin:var(--sp-1) 10px;background:var(--line)}
/* Untermenü: klappt unter dem aktiven Bereich auf – kleinere Symbole auf derselben Achse,
   leichter Hintergrund in der Markenfarbe. Zu: hebt den Abstand der Kapsel (gap 3px) wieder auf. */
:root #nav nav .nav-unter{position:relative;z-index:1;display:grid;grid-template-rows:0fr;margin-top:-3px;opacity:0;
  transition:grid-template-rows var(--nav-sub-t) var(--weich),margin var(--nav-sub-t) var(--weich),opacity var(--nav-sub-t) ease}
:root #nav nav .nav-unter.auf{grid-template-rows:1fr;margin-top:0;opacity:1}
:root #nav nav .nav-unter > div{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:2px;
  padding-block:0;border-radius:calc(var(--nav-sub-h) / 2 + 3px);background:var(--nav-sub-bg);
  transition:padding var(--nav-sub-t) var(--weich)}
:root #nav nav .nav-unter.auf > div{padding-block:3px}
:root #nav nav .nav-unter.ganz > div{overflow:visible}          /* Sprechblasen (schmal) dürfen hinaus */
:root #nav nav .nav-unter a{height:var(--nav-sub-h);color:var(--ink-3)}
:root #nav nav .nav-unter a svg{width:var(--nav-sub-icon);height:var(--nav-sub-icon)}
:root #nav nav .nav-unter a:hover{background:var(--nav-sub-bg);color:var(--ink)}
:root #nav nav .nav-unter a.on{color:var(--brand-text)}
@media (min-width:1101px){
  :root.nav-breit #nav nav .nav-unter a > span{font-size:13px;color:inherit}
  :root.nav-breit #nav nav .nav-unter a.on > span{font-weight:650}
}
@media (prefers-reduced-motion:reduce){ :root #nav nav .nav-unter,:root #nav nav .nav-unter > div{transition:none} }

/* „Mehr“: alles jenseits der ersten Einträge */
.nav-mehr-liste{position:fixed;left:var(--x);top:var(--y);z-index:90;width:var(--nav-mehr-b);padding:6px;
  border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-lift)}
.nav-mehr-liste a{display:flex;align-items:center;gap:var(--sp-3);height:40px;padding:0 var(--sp-3);
  border-radius:999px;color:var(--ink-2);text-decoration:none}
.nav-mehr-liste a:hover{background:var(--card-2);color:var(--ink)}
.nav-mehr-liste svg{width:18px;height:18px;flex:none}

/* ---------- Seitenwechsel: der neue Inhalt gleitet kurz herein (wie beim ersten Laden, 61-laden.css) ---------- */
#view.seitenwechsel > *{animation:seiteRein var(--seite-t) var(--weich) both}
@keyframes seiteRein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ #view.seitenwechsel > *{animation:viewEinRuhig .12s linear both} }

/* ---------- Analytics (Kunde) + Berichte ---------- */
.an-kacheln{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.an-warn{color:var(--c-rot);font-weight:600}
.an-monate{display:flex;align-items:flex-end;gap:var(--sp-2);height:var(--an-balken-h);padding-top:var(--sp-4)}
.an-balken{position:relative;flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:var(--sp-1)}
.an-balken i{display:block;width:100%;max-width:44px;height:var(--h);min-height:2px;border-radius:var(--r-sm) var(--r-sm) 2px 2px;
  background:var(--brand)}
.an-balken b{position:absolute;top:calc(100% - var(--h) - 20px);font-size:var(--fs-xs);color:var(--ink-2)}
.an-balken small{font-size:var(--fs-xs);color:var(--ink-3)}
.an-monate{padding-bottom:0}
.an-statusreihe{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.an-status{display:inline-flex;align-items:center;gap:6px}
.an-leer{border-style:dashed}
.an-leer p{margin-bottom:var(--sp-2)}
.bericht-wahl{margin-bottom:var(--sp-4)}
.bericht h2{margin-bottom:var(--sp-1)}

/* Drucken: nur der Bericht */
@media print{
  #nav,#topbar,#reiter,#unten,.page-head,.bericht-wahl,#toast{display:none !important}
  main{margin:0 !important}
  #view{padding:0}
  .bericht{box-shadow:none;border:0}
}

/* ---------- Veröffentlichung ---------- */
.vf-kunde h2 a{color:inherit;text-decoration:none}
.vf-kunde h2 a:hover{color:var(--brand-text)}

/* Team: css/79-team.css */

/* ---------- Mein Profil › Meine Leiste ---------- */
.fav-frei{display:flex;flex-wrap:wrap;gap:var(--sp-2)}

/* ==== 79-team.css ==== */
/* ==================================================================
   Team (js/86-team.js) und Einstellungen › Abteilungen & Teams (js/89-einst-teams.js)
   ================================================================== */
/* Kacheln immer gleich groß: gleiche Spalten, gleiche Zeilenhöhe, lange Texte enden mit „…“ */
.team-raster{grid-template-columns:repeat(auto-fill,minmax(var(--team-karte-b),1fr));grid-auto-rows:1fr}
.team-karte{min-width:0;display:flex;flex-direction:column;justify-content:space-between}
.team-kopf{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3);min-width:0}
.team-kopf .avatar{flex:none}
.team-kopf div{display:flex;flex-direction:column;min-width:0;flex:1}
.team-kopf strong,.team-kopf small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-kopf .tag{flex:none}
.team-zahlen{display:flex;gap:var(--sp-4)}
.team-zahlen span{display:flex;flex-direction:column}
.team-zahlen b{font-size:var(--fs-lg)}
.team-zahlen small{color:var(--ink-3);font-size:var(--fs-xs)}
.tm-abt{margin-top:var(--sp-5)}
.tm-abt-kopf{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.tm-abt-kopf h2{margin:0}
.tm-team + .tm-team{margin-top:var(--sp-4)}
.tm-team-kopf{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-2)}
.tm-team-kopf h3{margin:0;font-size:var(--fs-md)}

/* ---------- Einstellungen › Abteilungen & Teams (wie GRWUP.TRACK) ---------- */
.org-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.org-kopf h2{margin-bottom:var(--sp-1)}
.org-uebersicht{margin:var(--sp-3) 0 var(--sp-4);padding:var(--sp-2) var(--sp-3);border-radius:var(--r);background:var(--card-2);
  color:var(--ink-2);font-size:var(--fs-sm)}
.org-abt{margin-top:var(--sp-4)}
.org-abt-kopf{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-2)}
.org-abt-kopf strong{font-size:var(--fs-md)}
.org-abt-kopf small{white-space:nowrap}
.org-abt-leitung{display:inline-flex;align-items:center;gap:var(--sp-1)}
/* Namen sehen aus wie Text, werden beim Antippen zum Feld */
:root .org-name{border-color:transparent;background:transparent;font-weight:600;padding:0 var(--sp-2);height:var(--h-pill);min-width:0;flex:1}
:root .org-name:hover{background:var(--card-2)}
:root .org-name:focus{border-color:var(--brand-line);background:var(--card)}
.org-abt-kopf .org-name{font-size:var(--fs-md);flex:0 1 auto;width:auto;max-width:100%}
.org-teams{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--org-team-b),1fr));gap:var(--sp-3)}
.org-team{min-width:0;display:grid;gap:var(--sp-2);align-content:start;padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card-2)}
.org-team-kopf{display:flex;align-items:center;gap:var(--sp-1)}
.org-zahl{min-width:var(--sp-5);height:var(--sp-5);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand-soft);color:var(--brand-text);font-size:var(--fs-xs);font-weight:700}
.org-team-meta{display:grid;gap:var(--sp-2)}
.org-team-meta label{display:grid;gap:2px;min-width:0}
/* Lange Namen sprengen die Karte nicht */
.org-team .dd,.org-team .dd-btn{max-width:100%;min-width:0}
.org-team .dd-text,.org-abt-leitung .dd-text,.org-person .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.org-person .t{max-width:var(--org-chip-b)}
.org-fehlt{color:var(--c-rot);font-weight:600}
.org-mitglieder{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1);min-height:calc(var(--h-pill) + 2 * var(--sp-2));padding:var(--sp-2);
  border-radius:var(--r);background:var(--card)}
.org-leer{color:var(--ink-3);font-size:var(--fs-sm)}
.org-person{display:inline-flex;align-items:center;gap:var(--sp-1);height:var(--h-pill);padding:0 var(--sp-2) 0 2px;border-radius:999px;
  border:1px solid var(--line);background:var(--card-2);color:var(--ink);font:inherit;font-size:var(--fs-sm);cursor:pointer}
.org-person:hover{border-color:var(--brand-line)}
.org-person.ruhig{cursor:default}
.org-person.ruhig:hover{border-color:var(--line)}
.org-person .avatar{width:calc(var(--h-pill) - var(--sp-2));height:calc(var(--h-pill) - var(--sp-2));font-size:var(--fs-xs)}
.org-person .tag{font-size:var(--fs-xs)}
.org-haupt{color:var(--brand-text);font-size:var(--fs-xs)}
.org-ohne .org-mitglieder{border:1px dashed var(--line)}
.persnrfeld{width:var(--persnr-b)}

/* Glocke: „Übernehmen“ bei @Team (js/02-benutzer.js) */
.meldung [data-mld-nehmen]{align-self:flex-start;margin-top:var(--sp-1)}

/* ==== 80-listenkopf.css ==== */
/* Listenkopf: Sortieren + Filtern je Spalte (js/90-listenkopf.js) */
:root th.lk{padding:0}
.lk-knopf{
  display:inline-flex;align-items:center;gap:4px;width:100%;height:auto;
  padding:12px var(--sp-3);border:0;background:none;border-radius:0;box-shadow:none;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer;
  justify-content:inherit;
}
th.mitte .lk-knopf{justify-content:center}
th.rechts .lk-knopf{justify-content:flex-end}
.lk-knopf:hover,.lk-knopf:focus-visible{color:var(--ink)}
.lk-zeichen{display:inline-flex;opacity:0;transition:opacity .15s,transform .15s}
.lk-zeichen svg{width:12px;height:12px}
.lk-knopf:hover .lk-zeichen,.lk-knopf:focus-visible .lk-zeichen{opacity:.6}
th.lk-auf .lk-zeichen,th.lk-ab .lk-zeichen{opacity:1;color:var(--brand-text)}
th.lk-auf .lk-zeichen{transform:rotate(180deg)}
th.lk-auf .lk-knopf,th.lk-ab .lk-knopf,th.lk-gefiltert .lk-knopf{color:var(--ink)}
/* aktiver Filter: kleiner Punkt in der Markenfarbe */
th.lk-gefiltert .lk-knopf::after{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none}
.lk-menue{min-width:220px}
.lk-menue .dd-liste{max-height:min(260px,45vh)}
.lk-zahlen{display:flex;gap:var(--sp-1);padding:2px 2px var(--sp-1)}
.lk-zahlen input{width:50%;height:32px;font-size:var(--fs-sm)}
.lk-fuss{display:flex;justify-content:flex-end;padding-top:var(--sp-1);margin-top:var(--sp-1);
  border-top:1px solid var(--line-soft)}

/* ==== 81-zieh-sortieren.css ==== */
/* Zieh-Sortieren (js/91-zieh-sortieren.js) – Optik wie die Galerie (.gg-geist) */
.zs-griff{
  display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;
  border:0;border-radius:var(--r-sm);background:none;color:var(--ink-3);cursor:grab;touch-action:none;
}
.zs-griff:hover,.zs-griff:focus-visible{background:var(--card-2);color:var(--ink)}
.zs-griff svg{width:16px;height:16px}
body.zs-zieht,body.zs-zieht *{cursor:grabbing !important;user-select:none}
.zs-platz{outline:2px dashed var(--line);outline-offset:-2px;background:transparent !important;box-shadow:none !important}
.zs-platz > *{visibility:hidden}
.zs-geist{position:fixed !important;left:0;top:0;z-index:300;margin:0 !important;pointer-events:none;
  will-change:translate;transition:scale .16s ease, rotate .16s ease, box-shadow .16s ease}
.zs-geist.hoch{scale:1.03;rotate:-1.5deg;box-shadow:var(--shadow-lift)}
.zs-geist.landet{transition:translate .2s cubic-bezier(.2,.8,.3,1), scale .2s ease, rotate .2s ease, box-shadow .2s ease}
@media (prefers-reduced-motion:reduce){ .zs-geist,.zs-geist.landet{transition:none} .zs-geist.hoch{rotate:0deg} }

/* Dashboard anpassen (js/92-dash-anpassen.js) */
.dash-werkzeug{display:flex;align-items:center;gap:var(--sp-1);align-self:flex-start;margin-left:auto}
.dash-werkzeug .iconbtn{opacity:.55;transition:opacity .15s}
.hero:hover .dash-werkzeug .iconbtn,.dash-werkzeug .iconbtn:focus-visible{opacity:1}
#dashZahlReihe > [data-dk],#dashBlockRaster > [data-dk]{position:relative}
/* Filter je Kachel: oben rechts, ruhig, beim Drüberfahren deutlich */
:root #dashZahlReihe .dash-kfilter,:root #dashBlockRaster .dash-kfilter{
  position:absolute;top:var(--sp-2);right:var(--sp-2);z-index:2;opacity:.45;transition:opacity .15s}
[data-dk]:hover > .dash-kfilter,.dash-kfilter:focus-visible,.dash-kfilter.on{opacity:1}
/* Stift: ganze Kachel greifen, Inhalt solange nicht klickbar */
.dash-sortieren > [data-dk]{outline:1px dashed var(--line);outline-offset:-1px;cursor:grab;user-select:none}
.dash-sortieren > [data-dk] > :not(.dash-knoepfe){pointer-events:none}
:root .dash-sortieren .dash-knoepfe,:root .zs-geist .dash-knoepfe{position:absolute;top:var(--sp-1);right:var(--sp-1);z-index:2;display:flex;gap:2px;
  background:var(--card);border-radius:var(--r-sm)}
.dash-filter{min-width:240px;max-height:min(560px,80vh);overflow:auto}
.dash-filter .dash-personen{max-height:180px}
/* Filter-Knopf mit aktivem Filter (Aufgaben) */
.iconbtn.on{color:var(--brand-text);background:var(--brand-soft)}
/* Aufgaben-Filter: Spalten mit Griff (js/93-aufgaben-sicht.js) */
.aufg-spalte{display:flex;align-items:center;gap:2px;background:var(--card);border-radius:var(--r-sm)}
.aufg-spalte .dd-opt{flex:1;min-width:0}
/* Meine Navigationsleiste (js/83-favoriten.js) */
#favListe .sortierzeile{padding-left:4px}
.fav-icon{display:inline-flex;color:var(--ink-2)}
.fav-icon svg{width:16px;height:16px}

/* ==== 82-benutzer.css ==== */
/* Benutzer (0.22.0): Liste nur zum Lesen, bearbeitet wird in der Seitenansicht (js/34-einst-benutzer.js),
   angelegt im Fenster (js/94-benutzer-anlegen.js) */
.einst-knoepfe{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.benutzertabelle .avatar{width:32px;height:32px;font-size:11px}
/* Das eigene Konto: ganze Zeile leicht hervorgehoben statt „das bist du“ */
.benutzertabelle tr.selbst td{background:var(--brand-soft)}
.benutzertabelle tr.selbst:hover td{background:var(--brand-soft);filter:brightness(.98)}
.benutzertabelle tr.gesperrt td{opacity:.6}
/* Seitenansicht: Zugang-Zeilen und „Speichern“ unten links */
.bd-zeile{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) 0;border-top:1px solid var(--line-soft)}
.bd-zeile:first-of-type{border-top:0;padding-top:0}
.bd-zeile .grow{flex:1;min-width:0}
.bd-zeile .grow small{display:block}
.bd-fuss{justify-content:flex-start;margin-top:var(--sp-3)}
/* Anlegen-Fenster und CSV-Vorschau sind breiter als die kleinen Dialoge */
:root .bn-fenster{max-width:720px;max-height:calc(100dvh - 2 * var(--sp-4));overflow:auto}
.bn-fuss{align-items:center;flex-wrap:wrap}
.bn-fuss .grow{flex:1}
.bn-vorschau{max-height:min(320px,45vh);overflow:auto;margin-bottom:var(--sp-3)}
.bn-vorschau tr.bn-fehler td{color:var(--ink-3)}
.bn-zugaenge code{user-select:all}
.bn-rot{color:var(--c-rot)}
.bn-fenster .seg-zeile{margin-top:var(--sp-2)}
.viewswitch.seg button[disabled]{opacity:.45;cursor:not-allowed}
@media (max-width:640px){
  .einst-knoepfe{justify-content:stretch}
  .einst-knoepfe > *{flex:1}
  .bn-fuss .grow{display:none}
}

/* ==== 83-kundenchat.css ==== */
/* Kunden-Chat (0.27.0, Leisten 0.28.0, js/96-kundenchat.js): bis zu 3 Chats unten rechts angeheftet wie bei Twitch –
   zu = schmale Leiste, offen = Fenster darüber. Alles hängt an der Unterkante. */
#kundenChats{position:fixed;right:var(--sp-5);bottom:var(--kchat-abstand);z-index:60;display:flex;align-items:flex-end;gap:var(--sp-2);
  max-width:calc(100vw - 2 * var(--sp-5));pointer-events:none}
#kundenChats[hidden]{display:none}
.kc-fenster{pointer-events:auto;width:var(--kchat-leiste-b);display:flex;flex-direction:column;overflow:hidden;
  height:calc(var(--kchat-kopf-h) + 2px);background:var(--card);border:1px solid var(--line);
  border-radius:calc((var(--kchat-kopf-h) + 2px) / 2);box-shadow:var(--shadow-lift);
  transition:width .34s var(--kchat-weich),height .34s var(--kchat-weich),border-radius .34s var(--kchat-weich)}
.kc-fenster.offen{width:min(var(--kchat-b),calc(100vw - 2 * var(--sp-4)));height:min(var(--kchat-h),calc(100vh - var(--sp-6)));border-radius:var(--r-lg)}
.kc-kopf{display:flex;align-items:center;gap:var(--sp-1);height:var(--kchat-kopf-h);flex:none;padding:0 var(--sp-1) 0 var(--sp-4);
  cursor:pointer;font-size:var(--fs-sm);font-weight:600}
.kc-fenster.offen .kc-kopf{border-bottom:1px solid var(--line-soft)}
.kc-fenster.neu .kc-kopf{background:var(--brand-soft)}
.kc-kopf .iconbtn{width:28px;height:28px;min-width:28px;flex:none}
.kc-kopf [data-kckunde]{display:none}
.kc-fenster.offen .kc-kopf [data-kckunde]{display:inline-flex}
.kc-titel{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc-zahl{flex:none;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--brand);color:var(--on-brand);
  font-size:var(--fs-xs);font-weight:700;line-height:18px;text-align:center}
/* Öffnen/Schließen: Pille wächst zum Fenster (Breite, Höhe, Rundung zusammen), der Inhalt blendet etwas später ein bzw. zuerst aus */
.kc-inhalt{display:flex;flex:1;min-height:0;flex-direction:column;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .12s ease,visibility 0s .12s}
.kc-fenster.offen .kc-inhalt{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .22s ease .14s,visibility 0s}
@keyframes kcAuf{from{opacity:0;transform:translateY(16px) scale(.98)}}
@media (prefers-reduced-motion:reduce){ .kc-fenster,.kc-inhalt{transition:none !important} .kc-fenster.offen{animation:none !important} }
.kc-verlauf{flex:1;overflow:auto;overscroll-behavior:contain;padding:var(--sp-3) var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-3)}
.kc-n{display:flex;flex-direction:column;gap:2px;max-width:88%}
.kc-n.team{align-self:flex-end;align-items:flex-end}
.kc-blase{padding:var(--sp-2) var(--sp-3);border-radius:var(--r);background:var(--card-2);
  border:1px solid var(--line-soft);overflow-wrap:anywhere;white-space:pre-line;font-size:var(--fs-sm)}
.kc-n.team .kc-blase{background:var(--brand-soft);border-color:var(--brand-line)}
.kc-n.beitrag .kc-blase{border-style:dashed}
.kc-meta{display:flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-xs);color:var(--ink-3)}
.kc-meta .iconbtn{opacity:0;transition:opacity .15s}
.kc-n:hover .kc-meta .iconbtn,.kc-meta .iconbtn:focus-visible{opacity:1}
.kc-bezug{font-size:var(--fs-xs);color:var(--brand-text);background:none;border:0;padding:0;cursor:pointer;text-align:left}
.kc-bezug:hover{text-decoration:underline}
.kc-neu{margin:var(--sp-2) var(--sp-3) var(--sp-3)}   /* Kapsel + Knopf: gemeinsam/sende-knopf.css */
.kc-leer{margin:auto;text-align:center}
@media (max-width:640px){
  #kundenChats{left:var(--sp-2);right:var(--sp-2);max-width:none;bottom:calc(var(--h-ctl) + var(--sp-6))}
  .kc-fenster{flex:1;min-width:0;width:auto}
  .kc-fenster.offen{position:fixed;left:var(--sp-2);right:var(--sp-2);bottom:var(--sp-2);width:auto;height:85vh;z-index:61;border-radius:var(--r-lg);
    animation:kcAuf .3s var(--kchat-weich)}
  .kc-meta .iconbtn{opacity:1}
}
/* Reiter Kunde | Intern (0.38.0): intern ist gelblich getönt – so sieht man auf einen Blick, dass der Kunde nichts davon bekommt */
.kc-reiter{display:flex;gap:var(--sp-1);padding:var(--sp-2) var(--sp-3) 0;flex:none}
.kc-reiter button{height:26px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--ink-3);font:inherit;font-size:var(--fs-xs);cursor:pointer}
.kc-reiter button.on{background:var(--card-2);color:var(--ink);font-weight:600}
.kc-fenster.intern .kc-verlauf{background:var(--c-gold-bg)}
.kc-fenster.intern .kc-n.team .kc-blase{background:var(--card);border-color:var(--c-gold-l)}
.kchat-kopf .iconbtn{opacity:0;transition:opacity .15s;vertical-align:middle}
.kchat-zeile:hover .kchat-kopf .iconbtn,.kchat-kopf .iconbtn:focus-visible{opacity:1}
@media (max-width:640px){ .kchat-kopf .iconbtn{opacity:1} }
/* Bearbeiten: Hinweisleiste über dem Eingabefeld (0.40.0) · gelöschte interne Nachricht */
.kc-editleiste{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin:0 var(--sp-3) var(--sp-1);padding:2px 4px 2px 12px;
  border-radius:999px;background:var(--brand-soft);color:var(--brand-text);font-size:var(--fs-xs)}
.kchat-editleiste{margin:var(--sp-2) 0 var(--sp-1)}
.kc-blase.kc-weg{background:none;border-style:dashed;color:var(--ink-3);font-style:italic}

/* ==== 84-einrichtung.css ==== */
/* ==================================================================
   Einrichtungs-Fragebogen (0.29.0, js/97-einrichtung.js)
   Vollbild über dem Tool. Nur Variablen aus 01-grundlagen.css – Hell/Dunkel
   und die Markenfarbe gehen dadurch von selbst mit.
   ================================================================== */
body.einrichtung-offen{overflow:hidden}
/* Der CSV-Import öffnet die Seitenansicht – sie rückt über den Assistenten */
body.einrichtung-offen #drawer{z-index:calc(var(--ebene-einrichtung) + 1)}

.einrichtung{position:fixed;inset:0;z-index:var(--ebene-einrichtung);background:var(--bg);overflow:auto;
  display:flex;justify-content:center;padding:var(--sp-6) var(--sp-4) 0}
.ei-karte{width:100%;max-width:var(--einrichtung-b);display:flex;flex-direction:column;gap:var(--sp-4);min-height:100%}
.ei-kopf{display:flex;align-items:flex-start;gap:var(--sp-3)}
.ei-kopf .grow{flex:1;min-width:0}
.ei-kopf h1{margin-top:var(--sp-1)}
.ei-punkte{display:flex;gap:var(--sp-2);list-style:none;margin:0;padding:0}
.ei-punkte li{flex:1;height:var(--ei-punkt-h);border-radius:var(--ei-punkt-h);background:var(--line)}
.ei-punkte li.fertig{background:var(--brand-line)}
.ei-punkte li.an{background:var(--brand)}
.ei-inhalt{display:flex;flex-direction:column;gap:var(--sp-4)}
.ei-inhalt > p{margin:0}
.ei-inhalt h2{margin-bottom:var(--sp-1)}
.ei-inhalt section > p{margin:0 0 var(--sp-3)}
.ei-fuss{position:sticky;bottom:0;margin-top:auto;padding:var(--sp-3) 0 var(--sp-4);background:var(--bg);
  border-top:1px solid var(--line-soft);align-items:center}
.ei-fuss .grow{flex:1}

/* Auswahl-Kacheln (Unterkategorie) */
.ei-wahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--ei-kachel-b),1fr));gap:var(--sp-3)}
.ei-kachel{min-height:var(--ei-kachel-h);padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--card);color:var(--ink);font:inherit;font-weight:500;cursor:pointer;box-shadow:var(--shadow)}
.ei-kachel:hover{border-color:var(--brand-line)}
.ei-kachel.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-text);font-weight:700}

/* Listen (Status, Prio, Kundenstatus) */
.ei-liste .sortierliste{margin-bottom:var(--sp-3)}
.ei-liste .sortierzeile input.grow{min-width:0}
.ei-vorschlaege{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3)}

/* Design: Einstellungen links, Mini-Vorschau rechts */
.ei-design{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);align-items:start}
.ei-vorschlag{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2)}
.ei-vorschlag[hidden]{display:none}
.ei-tupfer{flex:none;width:var(--ei-tupfer);height:var(--ei-tupfer);border-radius:50%;background:var(--f);border:1px solid var(--line)}

/*
 * Mini-Vorschau des Tools. --eiv-hintergrund ist der Haken für später:
 * Hintergrund-Farbverläufe (kein Bild) kommen als weitere Variable in 01-grundlagen.css
 * (z. B. --hintergrund-verlauf) und werden hier nur noch eingesetzt – jetzt NICHT umgesetzt.
 */
.ei-vorschau{--eiv-hintergrund:var(--bg);display:grid;grid-template-columns:var(--eiv-leiste-b) 1fr;height:var(--eiv-h);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--eiv-hintergrund);
  box-shadow:var(--shadow);font-size:var(--fs-xs);color:var(--ink-2);user-select:none}
.eiv-leiste{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-2);background:var(--card);border-right:1px solid var(--line)}
.eiv-logo{height:var(--eiv-logo-h);display:flex;align-items:center;font-weight:700;color:var(--ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.eiv-logo img{max-height:100%;max-width:100%}
.eiv-logo img[data-invert="1"]{filter:invert(1)}
.eiv-leiste i{display:block;height:var(--eiv-zeile-h);border-radius:var(--r-sm);background:var(--card-2)}
.eiv-leiste i.an{background:var(--brand-soft);box-shadow:inset var(--eiv-markierung) 0 var(--brand)}
.eiv-haupt{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);min-width:0}
.eiv-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);color:var(--ink);font-size:var(--fs-sm)}
.eiv-knopf{padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);background:var(--brand);color:var(--on-brand);font-weight:500;white-space:nowrap}
.eiv-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}
.eiv-karte{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-2);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);min-width:0}
.eiv-zahl{font-size:var(--fs-lg);font-weight:700;color:var(--ink)}
.eiv-zeile{display:block;height:var(--eiv-zeile-h);border-radius:var(--r-sm);background:var(--card-2)}
.eiv-zeile.kurz{width:60%}
.eiv-zeile.marke{width:35%;background:var(--brand-line)}

/* Daten mitbringen */
.ei-datenkacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--ei-kachel-b),1fr));gap:var(--sp-3)}
.ei-daten{display:flex;flex-direction:column;gap:var(--sp-2)}
.ei-daten p{margin:0}
.ei-daten .aktionen{display:flex;flex-wrap:wrap;gap:var(--sp-2)}

/* Zusammenfassung */
.ei-zusammenfassung{list-style:none;margin:0;padding:0}
.ei-zusammenfassung li{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-2) 0;border-bottom:1px solid var(--line-soft)}
.ei-eckdaten{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-1) var(--sp-4);margin:0}
.ei-eckdaten dt{color:var(--ink-3)}
.ei-eckdaten dd{margin:0}

/* Einstellungen → Firma: Knopf zum Fragebogen */
.ei-einst-karte{display:flex;align-items:center;gap:var(--sp-3)}
.ei-einst-karte .grow{flex:1;display:flex;flex-direction:column}

@media (max-width:640px){
  .einrichtung{padding:var(--sp-4) var(--sp-4) 0}
  .ei-design{grid-template-columns:1fr}
  .eiv-karten{grid-template-columns:repeat(2,1fr)}
  .eiv-karten .eiv-karte:nth-child(3){display:none}
  .ei-einst-karte{flex-direction:column;align-items:stretch}
  .ei-fuss{flex-wrap:wrap}
}

/* Adresse in einem Kasten: Straße + Hausnummer · PLZ · Ort */
.ei-adresse{display:grid;grid-template-columns:minmax(0,2fr) 96px minmax(0,1.4fr);border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden}
.ei-adresse:focus-within{border-color:var(--brand)}
.ei-adresse input{border:0;border-radius:0;background:transparent;box-shadow:none;min-width:0}
.ei-adresse input + input{border-left:1px solid var(--line)}
@media (max-width:640px){.ei-adresse{grid-template-columns:1fr 1fr}.ei-adresse input:first-child{grid-column:1/-1;border-bottom:1px solid var(--line)}}

/* ==== 85-filtermenue.css ==== */
/* Filter-Menü (0.43.0, js/99-filtermenue.js): Symbol in der Filterzeile + etwas größeres Menü */
.filter-knopf{position:relative}
.filter-knopf .fm-zahl{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--brand);color:var(--on-brand);font-size:10px;font-weight:600;line-height:16px;text-align:center}
.filter-menue{min-width:300px;max-width:min(360px,calc(100vw - 16px));max-height:min(560px,80vh);overflow:auto;padding:var(--sp-2)}
.filter-menue .fm-suche{padding:0 0 var(--sp-1)}
.filter-menue .fm-suche input{width:100%;height:40px;border-radius:999px}
.filter-menue .fm-optionen{display:flex;flex-direction:column}
.filter-menue .dd-gruppe{padding-top:var(--sp-3)}
.filter-menue .dd-opt{width:100%}
.filter-menue .fm-zeitraum{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;padding:var(--sp-1) var(--sp-2)}
.filter-menue .fm-zeitraum label{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--ink-3)}
.filter-menue .fm-zeitraum input{height:34px}
/* Inventar: Zeile mit Hinweis-Chips links und CSV / + Gerät rechts (0.45.0) */
.inv-aktionszeile{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin:0 0 var(--sp-3)}
.inv-aktionszeile .inv-hinweise{margin:0}
.inv-aktionszeile .kd-aktionen{display:inline-flex;gap:var(--sp-2);align-items:center;margin-left:auto}
.kalkopf .al-kurz{display:none}

/* ==== 86-ohne-rahmen.css ==== */
/* Pillen und Etiketten ohne Rahmen (0.51.1): Status-/Prio-/Bezug-Etiketten, farbige Auswahlpillen, KI-Hinweis – nur die farbige Fläche.
   Leere Pillen (t-leer) behalten ihre Linie, sonst wären sie unsichtbar. */
:root .tag:not(.t-leer),:root .dd-btn[class*=" t-"]:not(.t-leer),:root .kd-ki-hinweis,:root .wunschmarke{border-color:transparent}
:root .dd-btn[class*=" t-"]:hover{border-color:transparent}

/* Seitenansichten: auch die Karten in den Abschnitten (Inventar-Gerät, Projekt …) ohne weißen Kasten – Statistik-Kacheln bleiben */
:root #drawerPanel .section > .card:not(.stat):not(.highlight):not(.empty){background:none;border:0;box-shadow:none;padding:0;border-radius:0}

/* ==== 87-drehplanung.css ==== */
/* ================================================================== *
 * DREHPLANUNG (30.10.2026) – Seitenansicht (js/99-drehplan*.js)
 * Druckblatt + Vorschau-Blatt: css/88-drehplan-druck.css
 * ================================================================== */
/* Breiter als andere Seitenansichten – ab 980 px Platz steht die Vorschau rechts (.dp.breit, per ResizeObserver) */
.drawer-panel:has(> .dp){width:min(var(--dp-drawer-b),100%)}
.dp.breit{display:grid;grid-template-columns:minmax(0,1fr) var(--dp-vorschau-b);gap:var(--sp-5);align-items:start}
.dp-vorschau{display:none}
.dp.breit .dp-vorschau{display:block;position:sticky;top:0;max-height:calc(100dvh - var(--sp-6) * 2);overflow:auto}
.drawer-panel:has(.dp.breit) .dp-nurschmal{display:none}
.dp-kopfknopf{display:inline-flex;align-items:center;gap:var(--sp-1)}
.dp-kopfknopf svg{width:16px;height:16px}

/* Kopf: Titel · Status · Kunde */
.dp-plan{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:var(--sp-3);align-items:end}
.dp-plan .field{margin-bottom:0}
.dp-plan .dd,.dp-plan .dd-btn{width:100%}
.dp-kunde{display:inline-flex;align-items:center;gap:var(--sp-2);max-width:100%;width:100%;justify-content:flex-start}
.dp-kunde span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-kunde svg{width:16px;height:16px;flex:none}
.dp-kunde-text{min-height:var(--h-ctl);display:flex;align-items:center}
.dp-kunde-zeile{display:flex;align-items:center;gap:var(--sp-1)}
.dp-kunde-zeile .dd{flex:1;min-width:0}
.dp-kunde-zeile .iconbtn{flex:none}

/* Drehtag-Reiter */
.dp-tabs{display:flex;gap:var(--sp-2);overflow-x:auto;margin-top:var(--sp-5);padding:var(--sp-1) var(--sp-1) var(--sp-2);
  scrollbar-width:thin;overscroll-behavior-x:contain}
.dp-tab{flex:none;min-width:var(--dp-tab-b);display:flex;align-items:center;gap:var(--sp-1);padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r);background:var(--card-2);color:var(--ink-2);cursor:pointer;user-select:none;
  transition:background .15s, color .15s, box-shadow .15s}
.dp-tab:hover{color:var(--ink)}
.dp-tab.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.dp-tab:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.dp-tab-text{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.3}
.dp-tab-text b{font-weight:600}
.dp-tab-text small{font-size:var(--fs-xs);color:var(--ink-3);white-space:nowrap}
.dp-tab .zs-griff{width:auto;height:auto;padding:var(--sp-1) 0}
.dp-tab-neu{flex:none;align-self:center}

/* Abschnitts-Kopf mit Knopf rechts (wie .section > h3) */
.dp-kopf{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.dp-kopf > h3{margin:0;color:var(--ink-2);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.07em;font-weight:500}
.dp-kopf > :last-child:not(h3){margin-left:auto}
.dp-kopf .ghost svg{width:15px;height:15px}
.dp-neu{margin-top:var(--sp-3)}

/* Felder: „vom Kunden“ hinter der Beschriftung */
.dp-auto{display:inline-flex;align-items:center;gap:var(--sp-1);margin-left:var(--sp-2);font-size:var(--fs-xs);font-weight:500;color:var(--brand-text)}
.dp-auto[hidden]{display:none}
.dp-auto svg{width:12px;height:12px}

/* Beteiligte Personen */
#dpPersonen .dd,#dpPersonen .dd-btn{width:100%}
.dp-personen{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-2)}
.dp-personen:empty{display:none}
.dp-frei{display:inline-flex;align-items:center;gap:var(--sp-1)}
.dp-frei-weg{display:inline-flex;align-items:center;padding:0;border:0;background:none;color:inherit;cursor:pointer;opacity:.65}
.dp-frei-weg:hover{opacity:1}
.dp-frei-weg svg{width:12px;height:12px}
.dp-frei-neu{margin-top:var(--sp-2)}

/* Was wird gedreht */
.dp-inhalt{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);padding:var(--sp-1) 0;border-bottom:1px solid var(--line-soft)}
.dp-inhalt > input{flex:1 1 var(--dp-tab-b);min-width:0}
.dp-inhalt .grow{flex:1;min-width:0}
.dp-verkn{display:inline-flex;align-items:center;gap:var(--sp-1)}
.dp-verkn svg{width:12px;height:12px}
.dp-ohne{margin:var(--sp-3) 0 var(--sp-1)}

/* Shotliste: Zeilen als Raster, am Handy Karten mit großem Haken */
.dp-shot{display:grid;align-items:center;gap:var(--sp-2);padding:var(--sp-1) 0;border-bottom:1px solid var(--line-soft);background:var(--bg);
  grid-template-columns:var(--sp-6) var(--sp-5) minmax(0,1.1fr) minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr) var(--sp-6) var(--sp-6)}
.dp-shot-kopf{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);border-bottom-color:var(--line)}
.dp-shot > input{min-width:0;width:100%}
.dp-shot .dd,.dp-shot .dd-btn{width:100%;min-width:0}
.dp-nr{color:var(--ink-3);text-align:center}
.dp-shot.erledigt .dp-sh-text{text-decoration:line-through;color:var(--ink-3)}
.dp-shot .check{width:var(--dp-check);height:var(--dp-check);justify-self:center;padding:0;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--card);display:inline-flex;align-items:center;justify-content:center;
  color:transparent;cursor:pointer;transition:background .15s, border-color .15s}
.dp-shot .check:hover{border-color:var(--brand)}
.dp-shot .check.done{background:var(--c-gruen);border-color:var(--c-gruen);color:var(--card)}
.dp-shot .check svg{width:60%;height:60%}
.dp-shot.zs-geist{background:var(--card);border-radius:var(--r-sm)}

/* Equipment: links die Auswahl des Tages, rechts die Suche im Inventar */
.dp-equip{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-4);align-items:start}
.dp-equip.nurlinks{grid-template-columns:minmax(0,1fr)}
.dp-kat h4{margin:var(--sp-3) 0 var(--sp-1);font-size:var(--fs-xs);font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.dp-kat:first-child h4{margin-top:0}
.dp-geraet,.dp-treffer{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2);border-radius:var(--r-sm)}
.dp-geraet + .dp-geraet,.dp-treffer + .dp-treffer{border-top:1px solid var(--line-soft)}
.dp-geraet .grow,.dp-treffer .grow{display:flex;flex-direction:column;min-width:0}
.dp-geraet b,.dp-treffer b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-geraet small,.dp-treffer small{font-size:var(--fs-xs)}
.dp-geraet.warn,.dp-treffer.warn{background:var(--c-orange-bg);box-shadow:inset 3px 0 0 var(--c-orange)}
.dp-warntext{display:inline-flex;align-items:center;gap:var(--sp-1);color:var(--c-orange)}
.dp-warntext svg{width:12px;height:12px;flex:none}
.dp-warn{display:flex;align-items:center;gap:var(--sp-2);border-left-color:var(--c-orange)}
.dp-warn svg{width:16px;height:16px;flex:none;color:var(--c-orange)}
.dp-equip-suche{background:var(--card);border-radius:var(--r);padding:var(--sp-3)}
.dp-equip-suche > input{width:100%}
.dp-treffer-liste{max-height:60vh;overflow:auto;margin-top:var(--sp-2);overscroll-behavior:contain}
.dp-treffer .tag{flex:none;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-dabei{color:var(--c-gruen);cursor:default}

/* Inventar › Einstellungen › Equipment-Sets */
.dp-sets{display:flex;flex-direction:column;gap:var(--sp-3);margin:var(--sp-3) 0}
.dp-set{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);background:var(--card-2);border-radius:var(--r)}
.dp-set-kopf{display:flex;align-items:center;gap:var(--sp-2)}
.dp-set-kopf input{flex:1;min-width:0}
.dp-set .dd,.dp-set .dd-btn{width:100%}

/* Kunde › Kontakte: Hauptansprechpartner */
.kd-haupt{margin:0;gap:var(--sp-1)}
.kd-haupt .small{font-size:var(--fs-xs);color:var(--ink-3)}

/* Auswahl-Fenster (Kunde wählen, Beiträge holen) */
.dp-wahl-suche{width:100%;margin-top:var(--sp-2)}
.dp-wahl-liste{max-height:50vh;overflow:auto;overscroll-behavior:contain}
.dp-wahl-liste .dd-opt[hidden]{display:none}
.dp-mitshots{margin:var(--sp-3) 0 0;color:var(--ink)}

/* Live-Vorschau: rechts neben dem Editor bzw. als Überlagerung (schmal/Handy) */
.dp-vorschau{background:var(--card-2);border-radius:var(--r);padding:var(--sp-3)}
.dp-vs-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.dp-vs-kopf .spacer{flex:1}
.dp-vs-kopf .btn svg{width:15px;height:15px}
.dp-vs-opt{display:flex;flex-wrap:wrap;gap:var(--sp-1)}
.dp-vs-blaetter{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);counter-reset:dzseite;min-width:0}
.dp-vs-blaetter .dz-blatt{zoom:var(--dz-zoom,.5);box-shadow:var(--shadow);flex:none}
.dp-vs-lage{position:fixed;inset:0;z-index:210;background:var(--bg);overflow:auto;overscroll-behavior:contain;
  padding:max(var(--sp-3), env(safe-area-inset-top)) var(--sp-3) var(--sp-6)}
.dp-vs-lage .dp-vs-kopf{position:sticky;top:calc(var(--sp-3) * -1);z-index:1;background:var(--bg);padding:var(--sp-2) 0}

@media (max-width:640px){
  .dp-kopfknopf span{display:none}
  .dp-plan{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .dp-plan-titel{grid-column:1 / -1}
  .dp-tabs{margin-top:var(--sp-4)}
  .dp-equip{grid-template-columns:minmax(0,1fr)}
  /* Shots als Karten: großer Haken links, Beschreibung oben, Rest darunter */
  .dp-shot-kopf{display:none}
  .dp-shot{grid-template-columns:auto var(--dp-check-handy) auto minmax(0,1fr) minmax(0,1fr) auto;
    grid-template-areas:"griff ok nr text text weg" "griff ok . inhalt inhalt inhalt" "griff ok . einst bew bew" "griff ok . notiz notiz notiz";
    padding:var(--sp-3);margin-bottom:var(--sp-2);border:0;border-radius:var(--r);background:var(--card);row-gap:var(--sp-2)}
  .dp-shot > :nth-child(1){grid-area:griff;align-self:start}
  .dp-shot > :nth-child(2){grid-area:nr;align-self:center}
  .dp-shot > :nth-child(3){grid-area:inhalt}
  .dp-shot > :nth-child(4){grid-area:text;font-weight:500}
  .dp-shot > :nth-child(5){grid-area:einst}
  .dp-shot > :nth-child(6){grid-area:bew}
  .dp-shot > :nth-child(7){grid-area:notiz}
  .dp-shot > :nth-child(8){grid-area:ok;align-self:start}
  .dp-shot > :nth-child(9){grid-area:weg;align-self:start}
  .dp-shot .check{width:var(--dp-check-handy);height:var(--dp-check-handy);border-radius:var(--r)}
  .dp-shots.nurlesen .dp-sh-wert::before{content:attr(data-label) ": ";color:var(--ink-3)}
  .dp-shots.nurlesen .dp-shot > span:empty{display:none}
}

.dp-wahl .field{margin-bottom:var(--sp-3)}

/* ==== 88-drehplan-druck.css ==== */
/* ================================================================== *
 * DREHPLAN – Druckblatt (A4) = PDF und Live-Vorschau (js/99-drehplan-druck.js)
 * Papier ist IMMER hell, egal ob das Tool im Dunkelmodus läuft: deshalb eigene
 * Variablen mit festen Werten, die nur im Blatt gelten. Akzentfarbe kommt aus
 * Firma › Erscheinungsbild (style="--dz-akzent:…" am Blatt).
 * ================================================================== */
.dz-blatt{
  --dz-papier:#ffffff; --dz-tinte:#1a1613; --dz-grau:#6b645d; --dz-linie:#e2dcd5; --dz-flaeche:#f5f2ee;
  --dz-akzent:#FF6E00; --dz-rand-o:12mm; --dz-rand-s:14mm; --dz-schrift:9.5pt;
  box-sizing:border-box;width:210mm;min-height:297mm;padding:var(--dz-rand-o) var(--dz-rand-s);
  display:flex;flex-direction:column;background:var(--dz-papier);color:var(--dz-tinte);color-scheme:light;
  font-size:var(--dz-schrift);line-height:1.4;text-align:left;counter-increment:dzseite;
}
.dz-blatt *{box-sizing:border-box}
.dz-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:6mm;padding-bottom:3mm;margin-bottom:5mm;
  border-bottom:.6mm solid var(--dz-akzent)}
.dz-logo{max-height:12mm;max-width:70mm;object-fit:contain;display:block}
.dz-firma{font-size:14pt;font-weight:700;color:var(--dz-tinte)}
.dz-meta{text-align:right;font-size:8.5pt;line-height:1.5;color:var(--dz-grau)}
:root .dz-titel{margin:0 0 1mm;font-size:17pt;font-weight:700;letter-spacing:-.01em;color:var(--dz-tinte)}
.dz-unter{margin:0 0 5mm;color:var(--dz-grau)}
:root .dz-blatt table{width:100%;border-collapse:collapse;font-size:inherit;background:none}
:root .dz-blatt th,:root .dz-blatt td{background:none;color:inherit;font-size:inherit;text-transform:none;letter-spacing:0;
  white-space:normal;height:auto;vertical-align:top;border:0}
:root .dz-blatt tbody tr{cursor:default}
:root .dz-blatt tbody tr:hover td{background:none}
:root .dz-info{margin-bottom:5mm}
:root .dz-info th{width:38mm;padding:1.4mm 3mm 1.4mm 0;font-weight:500;color:var(--dz-grau)}
:root .dz-info td{padding:1.4mm 0}
:root .dz-info tr + tr th,:root .dz-info tr + tr td{border-top:.2mm solid var(--dz-linie)}
.dz-teil{margin-bottom:5mm}
:root .dz-teil h3{margin:0 0 2mm;font-size:8.5pt;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--dz-akzent);break-after:avoid}
.dz-hinweise p{margin:0;padding:3mm;border-radius:2mm;background:var(--dz-flaeche)}
.dz-inhalte{display:flex;flex-wrap:wrap;gap:1.5mm 5mm;margin:0;padding:0;list-style:none}
.dz-typ{display:inline-block;margin-right:1.5mm;padding:.3mm 1.5mm;border-radius:1mm;background:var(--dz-flaeche);
  font-size:7.5pt;text-transform:uppercase;letter-spacing:.06em;color:var(--dz-grau)}
:root .dz-shots th{padding:1mm 2mm 1mm 0;font-size:8pt;font-weight:500;color:var(--dz-grau);border-bottom:.3mm solid var(--dz-linie)}
:root .dz-shots td{padding:1.3mm 2mm 1.3mm 0;border-bottom:.2mm solid var(--dz-linie)}
.dz-shots tr{break-inside:avoid}
:root .dz-shots .dz-gruppe td{padding-top:2.5mm;font-weight:700;border-bottom:.3mm solid var(--dz-tinte)}
:root .dz-blatt .dz-n{width:7mm;color:var(--dz-grau)}
:root .dz-blatt .dz-k{width:6mm}
.dz-box{display:inline-flex;align-items:center;justify-content:center;flex:none;width:3.6mm;height:3.6mm;vertical-align:-.6mm;
  border:.3mm solid var(--dz-tinte);border-radius:.6mm;color:var(--dz-tinte)}
.dz-box svg{width:3mm;height:3mm}
.dz-equip{columns:2;column-gap:8mm}
.dz-kat{break-inside:avoid;margin-bottom:3mm}
.dz-kat h4{margin:0 0 1mm;font-size:8pt;font-weight:700;color:var(--dz-tinte)}
.dz-geraet{display:flex;align-items:baseline;gap:2mm;padding:.6mm 0}
.dz-grau{font-size:8pt;color:var(--dz-grau)}
.dz-fuss{display:flex;justify-content:space-between;gap:4mm;margin-top:auto;padding-top:4mm;
  border-top:.2mm solid var(--dz-linie);font-size:7.5pt;color:var(--dz-grau)}
.dz-seite::before{content:"Seite " counter(dzseite) " "}

/* Drucken: nur die Blätter – Seitenrand setzt js/99-drehplan-druck.js (@page) für diesen Druck */
#dpDruck{display:none}
@media print{
  body.dp-druckt > *:not(#dpDruck){display:none !important}
  body.dp-druckt{margin:0 !important;padding:0 !important;background:#ffffff !important}
  body.dp-druckt #dpDruck{display:block;counter-reset:dzseite}
  #dpDruck .dz-blatt{width:auto;min-height:calc(297mm - 25mm);padding:0;box-shadow:none;
    break-after:page;page-break-after:always;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #dpDruck .dz-blatt:last-child{break-after:auto;page-break-after:auto}
}

/* ==== 89-hintergrund.css ==== */
/* Hintergrund (Firma): Anwendung auf die Oberfläche + Editor */
html.hat-hintergrund body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--hg-bild);background-blend-mode:var(--hg-blend)}
/* Kopfleiste: keine eigene Fläche (hörte sonst neben der Seitenleiste auf), Inhalt verschwimmt nur beim Scrollen weich darunter */
html.hat-hintergrund #topbar{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
html.hat-hintergrund #topbar::before{content:'';position:absolute;inset:0 0 calc(-1 * var(--sp-3));z-index:-1;pointer-events:none;
  -webkit-backdrop-filter:blur(var(--hg-unschaerfe));backdrop-filter:blur(var(--hg-unschaerfe));
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
@media print{html.hat-hintergrund body::before{display:none}}
.hg{display:flex;flex-direction:column;gap:var(--sp-3);width:100%;max-width:var(--hg-b);position:relative;
  --hg-ton:#f00;--hg-pur:#f00;min-width:0}
.hg [hidden]{display:none!important}
.hg-vorschau{position:relative;width:100%;aspect-ratio:16/9;max-height:var(--hg-vorschau-max);border-radius:var(--r);
  border:1px solid var(--line);cursor:crosshair;touch-action:none;outline:0}
.hg-vorschau:focus-visible,.hg-flaeche:focus-visible{box-shadow:0 0 0 1px var(--brand)}
.hg-griff{position:absolute;width:var(--hg-griff);height:var(--hg-griff);margin:calc(var(--hg-griff) / -2) 0 0 calc(var(--hg-griff) / -2);
  border-radius:50%;box-shadow:0 0 0 3px #fff,0 2px 8px rgba(0,0,0,.35);display:grid;place-items:center;
  font-size:var(--fs-xs);font-weight:700;color:#fff;background:var(--f,#fff);cursor:grab}
.hg-griff.an{box-shadow:0 0 0 3px var(--brand),0 0 0 5px #fff}
.hg-griff.mitte{background:transparent;cursor:move}
.hg-griff.winkel{background:#fff;width:calc(var(--hg-griff) / 2);height:calc(var(--hg-griff) / 2);
  margin:calc(var(--hg-griff) / -4) 0 0 calc(var(--hg-griff) / -4);pointer-events:none}
.hg-leiste-huelle{padding:0 calc(var(--hg-griff) / 2)}
.hg-leiste{position:relative;height:var(--sp-4);border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);touch-action:none;cursor:pointer}
.hg-stopp{position:absolute;top:50%;width:var(--hg-griff);height:var(--hg-griff);margin:calc(var(--hg-griff) / -2) 0 0 calc(var(--hg-griff) / -2);
  padding:0;border:0;border-radius:50%;background:var(--f);color:#fff;font:700 var(--fs-xs)/1 var(--font);
  box-shadow:0 0 0 3px #fff,0 2px 6px rgba(0,0,0,.35);cursor:grab}
.hg-stopp.an{box-shadow:0 0 0 3px var(--brand),0 0 0 5px #fff;z-index:1}
.hg-stopp:focus-visible,.hg-kreis:focus-visible,.hg-kreis-gross:focus-visible,.hg-schieber input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.hg-regler{display:grid;grid-template-columns:5.5em 1fr 3em;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--ink-2)}
.hg-regler input{accent-color:var(--brand);width:100%;height:var(--sp-4);padding:0;margin:0}
.hg-regler output{text-align:right}
.hg-farben{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.hg-kreis{position:relative;width:var(--hg-kreis);height:var(--hg-kreis);padding:0;border:0;border-radius:50%;cursor:grab;touch-action:none;
  background:linear-gradient(var(--f),var(--f)),conic-gradient(#ccc 25%,#fff 0 50%,#ccc 0 75%,#fff 0) 0 0/10px 10px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);color:#fff;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.hg-kreis.an{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--brand)}
.hg-kreis.zieht{z-index:2;cursor:grabbing;opacity:.85;pointer-events:none}
.hg-bereich{display:flex;flex-direction:column;gap:var(--sp-2)}
.hg-zeile{display:flex;align-items:center;gap:var(--sp-2);position:relative}
.hg-schieber{flex:1;min-width:0;height:var(--sp-4);border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);display:flex;align-items:center;
  background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.hg-schieber.hg-schach{background:linear-gradient(to right,transparent,var(--hg-pur)),conic-gradient(#ccc 25%,#fff 0 50%,#ccc 0 75%,#fff 0) 0 0/10px 10px}
.hg-schieber input{-webkit-appearance:none;appearance:none;width:100%;height:100%;margin:0;background:transparent;cursor:pointer}
.hg-schieber input::-webkit-slider-thumb{-webkit-appearance:none;width:var(--hg-griff);height:var(--hg-griff);border-radius:50%;
  background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.35)}
.hg-schieber input::-moz-range-thumb{width:var(--hg-griff);height:var(--hg-griff);border:0;border-radius:50%;
  background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.35)}
.hg-kreis-gross{flex:none;width:var(--h-ctl);height:var(--h-ctl);padding:0;border:0;border-radius:50%;cursor:pointer;
  background-image:linear-gradient(var(--f),var(--f)),conic-gradient(#ccc 25%,#fff 0 50%,#ccc 0 75%,#fff 0);
  background-size:auto,10px 10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.hg-text{flex:1;min-width:0;font-family:var(--f-mono)}
.hg-text.ungueltig{border-color:var(--c-rot);box-shadow:0 0 0 1px var(--c-rot)}
.hg-format{min-width:4.5em}
.hg-popup{position:absolute;left:0;top:calc(100% + var(--sp-2));z-index:5;width:min(100%,260px);padding:var(--sp-2);
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-lift)}
.hg-flaeche{position:relative;height:var(--hg-flaeche-h);border-radius:var(--r);cursor:crosshair;touch-action:none;outline:0;
  background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,var(--hg-ton))}
.hg-fpunkt{position:absolute;width:var(--hg-griff);height:var(--hg-griff);margin:calc(var(--hg-griff) / -2) 0 0 calc(var(--hg-griff) / -2);
  border-radius:50%;pointer-events:none;box-shadow:0 0 0 3px #fff,0 2px 8px rgba(0,0,0,.35)}
/* Firma: schmale Karte = Beispiel oben, Editor volle Breite; breit = Editor links, Beispiel rechts (mitlaufend) */
.hg-karte{container-type:inline-size}
.hg-firma{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4);margin-top:var(--sp-3)}
.hg-firma .hg{max-width:none}
.hg-links{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.hg-rechts{order:-1;display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.hg-dunkel-wahl{display:flex;flex-direction:column;gap:var(--sp-2)}
.hg-dunkel-wahl[hidden]{display:none}
.hg-dunkel-wahl .hinweis{margin:0}
.hg-mini{position:relative;width:100%;aspect-ratio:8/5;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--line);box-shadow:var(--shadow);background:var(--bg)}
.hg-mini iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;pointer-events:none}
@container (min-width:700px){
  .hg-firma{grid-template-columns:minmax(0,var(--hg-b)) minmax(0,1fr);gap:var(--sp-5);align-items:start}
  .hg-rechts{order:0;position:sticky;top:var(--hg-oben)}
}
@media (prefers-reduced-motion:no-preference){.hg-kreis{transition:box-shadow .12s}}
/* Geheimes Experimente-Menü */
.exp-liste{display:flex;flex-direction:column;gap:var(--sp-3)}

/* ==== 90-passwort.css ==== */
/* Passwort-Regeln live (0.64.0) */
.pw-regeln { list-style: none; margin: var(--sp-2, 8px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1, 4px) var(--sp-3, 12px);
  font-size: var(--fs-xs, 12px); color: var(--muted); }
.pw-regeln li::before { content: '○ '; }
.pw-regeln li.ok { color: var(--c-gruen); }
.pw-regeln li.ok::before { content: '● '; }

/* ==== 90-pillen-feld.css ==== */
/* Pillen-Feld (0.60.0, js/99-pillen-feld.js, Manual 8.16): Pillen im Feld, dahinter wird weitergetippt */
.pf-wurzel{position:relative}
.pf-feld{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:var(--h-ctl);
  padding:5px 10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  cursor:text;transition:border-color .15s;
}
.pf-feld:focus-within{border-color:var(--brand)}
#drawerPanel .pf-feld{border-color:transparent}
#drawerPanel .pf-feld:focus-within{border-color:var(--brand)}
:root .pf-eingabe,:root .pf-eingabe:focus{
  flex:1 1 120px;min-width:120px;height:28px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;outline:none;
  font-family:var(--font);font-size:var(--fs-base);color:var(--ink);
}
.pf-pille{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;height:28px;padding:0 10px 0 3px;
  background:var(--card-2);border:1px solid transparent;border-radius:999px;font-size:var(--fs-sm);color:var(--ink);
}
.pf-pille:not(:has(.avatar)){padding-left:10px}
/* Kürzel-Kreis 22 px: überall derselbe Abstand zum Pillenrand (oben, unten, links – gemessen 2 px) */
.pf-pille:has(.avatar){padding-left:1px}
.pf-pille .avatar{width:22px;height:22px;margin:0}
.pf-pille.pf-neu{border:1px dashed var(--ink-3)}
.pf-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-mail{color:var(--ink-3)}
/* „−“ im Kreis gleitet rechts herein beim Drüberfahren (Breite + Deckkraft + Größe), am Handy immer da */
.pf-weg{
  display:inline-flex;flex:none;align-items:center;justify-content:center;width:0;height:18px;margin:0 -4px 0 -6px;padding:0;
  border:0 solid currentColor;border-radius:50%;background:none;color:var(--c-rot);overflow:hidden;opacity:0;transform:scale(.4);
  font-family:var(--font);font-size:var(--fs-sm);line-height:1;cursor:pointer;
  transition:width .2s var(--weich, ease),margin .2s var(--weich, ease),border-width .2s ease,opacity .16s ease,transform .22s var(--weich, ease);
}
.pf-pille:hover .pf-weg,.pf-pille:focus-within .pf-weg{width:18px;margin:0 -4px 0 0;border-width:1.5px;opacity:1;transform:none}
@media (hover:none){
  .pf-weg{width:18px;margin:0 -4px 0 0;border-width:1.5px;opacity:1;transform:none;position:relative;overflow:visible}
  .pf-weg::after{content:'';position:absolute;inset:-11px}   /* Trefferfläche 40 px am Handy */
}
@media (prefers-reduced-motion: reduce){.pf-weg{transition:none}}
/* Vorschläge: Rundung der Zeile = Menü-Rundung (20 px) − Innenabstand (6 px); markiert = weiche Fläche, kein Strich */
.pf-menue{left:0;right:auto;width:min(360px,100%);min-width:260px}
:root .pf-menue .pf-opt{gap:10px;padding:7px 10px;border-radius:14px;box-shadow:none;transition:background-color .12s ease}
:root .pf-menue .pf-opt.markiert,:root .pf-menue .pf-opt:hover{background:var(--card-2);box-shadow:none}
.pf-opt .avatar{flex:none}
.pf-av{--av:var(--c-grau);display:inline-flex;align-items:center;justify-content:center}
.pf-av svg{width:13px;height:13px}
.pf-opt-text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.pf-opt-text small{color:var(--ink-3);font-size:var(--fs-xs,11px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ==== 91-feedback.css ==== */
/* Feedback (0.64.0, js/99-feedback.js): runder Knopf unten links + kleines Fenster darüber */
.fb-knopf{position:fixed;left:var(--sp-4);bottom:var(--sp-4);z-index:62;width:44px;height:44px;border-radius:999px;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;background:var(--brand);color:var(--on-brand);box-shadow:var(--shadow-lift)}
.fb-knopf svg{width:22px;height:22px}
.fb-fenster{position:fixed;left:var(--sp-4);bottom:calc(var(--sp-4) + 44px + var(--sp-2));z-index:62;width:min(340px,calc(100vw - 2 * var(--sp-4)));
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lift);overflow:hidden}
.fb-fenster[hidden]{display:none}
.fb-kopf{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-2) var(--sp-1) var(--sp-2) var(--sp-4);
  border-bottom:1px solid var(--line-soft);font-size:var(--fs-sm)}
.fb-inhalt,.fb-form-spalte{display:flex;flex-direction:column;gap:var(--sp-2)}
.fb-inhalt{padding:var(--sp-3)}
.fb-art{align-self:flex-start}
.fb-hinweis{font-size:var(--fs-xs)}
.fb-danke{margin:var(--sp-4) 0;text-align:center}
.fb-eintrag{align-items:flex-start}
@media (max-width:640px){
  .fb-knopf{bottom:calc(var(--h-ctl) + var(--sp-6))}
  .fb-fenster{left:var(--sp-2);bottom:calc(var(--h-ctl) + var(--sp-6) + 44px + var(--sp-2));width:auto;right:var(--sp-2)}
}

/* ==== player.css ==== */
/* ==================================================================
   GREWE.MEDIA – gemeinsamer Medien-Player (Aussehen)
   Gehört zu gemeinsam/player.js und wird von Kundenbereich UND Tool
   geladen. Was hier steht, gilt für jeden Player gleich. Farben, Radien
   und Schriftgrößen kommen aus den Stellschrauben der jeweiligen Seite
   (--brand, --card, --line, --ink, --c-*, --fs-*) – beide benutzen
   dieselben Namen.
   Die Wurzel jedes Players trägt die Klasse .gp.
   ================================================================== */
.gp{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:8px;min-height:0;min-width:0;outline:none}

/* ---- Bühne ---- */
.fg-buehne{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r);
  display:grid;place-items:center;padding:0;min-height:0;overflow:hidden;
  container-type:size}
/* Der Rahmen nimmt das Seitenverhältnis des Mediums an (--seiten setzt
   formatMessen(), sobald der Browser die Datei kennt). Dadurch liegt das
   Bild randlos im Rahmen statt mit schwarzen Balken darüber und darunter.
   Ohne Container-Einheiten (sehr alte Browser) greift die einfache Regel. */
.fg-rahmen{position:relative;height:100%;max-width:100%;line-height:0;
  overflow:hidden;background:#0B0907}
.fg-rahmen video,.fg-rahmen img{display:block;max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain}
@supports (container-type:size){
  .fg-rahmen[data-seiten]{
    --s:var(--seiten,.5625);
    height:min(100cqh, calc(100cqw / var(--s)));
    width: min(100cqw, calc(100cqh * var(--s)));
    max-width:100cqw}
  .fg-rahmen[data-seiten] video,.fg-rahmen[data-seiten] img{
    width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
}
/* Läuft die Vorschau nicht, steht hier ein Hinweis – der braucht seinen Platz. */
/* Vollbild: Bühne und Schaltfläche zusammen, schwarz und ohne Kanten. */
.gp:fullscreen{background:#000;gap:0;padding:0;
  grid-template-rows:minmax(0,1fr) auto;height:100%}
.gp:fullscreen .fg-buehne{background:#000;border:0;border-radius:0}
.gp:fullscreen .fg-steuer{border:0;border-radius:0;background:var(--card)}
.gp:-webkit-full-screen{background:#000}

.fg-rahmen:has(.externkachel),.fg-rahmen:has(.fg-leer){
  height:auto;width:auto;aspect-ratio:auto;background:var(--card);box-shadow:none}
.fg-rahmen .rahmen{position:relative;width:min(1000px,100%);aspect-ratio:16/9}
.fg-rahmen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.fg-leer{padding:var(--sp-5);color:var(--ink-3);line-height:var(--lh);text-align:center}
.fg-rahmen.klickbar{cursor:pointer}
.fg-wink{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;
  gap:2px;pointer-events:none;animation:fgWink .62s ease forwards}
.fg-wink-zeichen{display:grid;place-items:center;width:64px;height:64px;border-radius:999px;
  background:rgba(10,8,6,.55);color:#fff;font-size:22px;line-height:1;backdrop-filter:blur(4px)}
.fg-wink-zeichen .fg-ic{width:30px;height:30px;stroke-width:1.9}
.fg-wink-text{font-size:var(--fs-xs);font-weight:600;color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.7);line-height:1}
@keyframes fgWink{
  0%{opacity:0;transform:scale(.82)}
  22%{opacity:1;transform:scale(1)}
  70%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.12)}
}
@media (prefers-reduced-motion:reduce){ .fg-wink{animation-duration:.3s} }

.fg-ovl{position:absolute;font-size:var(--fs-xs);padding:5px 9px;border-radius:10px;
  background:rgba(10,8,6,.62);color:#fff;backdrop-filter:blur(6px);letter-spacing:.02em}
/* Der Rahmen hat line-height:0 (randloses Bild) – die Einblendungen brauchen ihre eigene. */
.fg-ovl{line-height:1.25}
.fg-tc{top:10px;left:10px}
.fg-pz{bottom:10px;right:10px;font-weight:600}

/* ---- Schaltfläche ---- */
.fg-steuer{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:7px var(--sp-3) 8px;box-shadow:var(--shadow);display:grid;gap:5px}
.fg-reihe{width:100%;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:var(--sp-2)}
.fg-schiene-r{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
.fg-schiene-l{min-width:0;display:flex;align-items:center;gap:6px}

/* Lautstärke: Zeichen zum Stummschalten, daneben der Regler. Er wächst beim
   Hinzeigen ein Stück, damit er im Ruhezustand nicht die Reihe dominiert. */
.fg-laut{display:flex;align-items:center;gap:6px}
.fg-regler{-webkit-appearance:none;appearance:none;width:58px;height:16px;
  background:transparent;cursor:pointer;transition:width .18s ease}
.fg-laut:hover .fg-regler,.fg-regler:focus-visible{width:88px}
/* Steht der Player in einem Formular (Tool: .field input …), dürfen dessen
   Eingabe-Regeln den Lautstärkeregler nicht aufblasen. */
.gp .fg-laut input.fg-regler[type="range"]{width:58px;height:16px;min-height:0;padding:0;margin:0;border:0;
  border-radius:0;background:transparent;box-shadow:none}
.gp .fg-laut:hover input.fg-regler[type="range"],.gp .fg-laut input.fg-regler[type="range"]:focus-visible{width:88px}
.fg-regler::-webkit-slider-runnable-track{height:4px;border-radius:999px;
  background:linear-gradient(to right,var(--brand) var(--p,100%),var(--line) var(--p,100%))}
.fg-regler::-moz-range-track{height:4px;border-radius:999px;background:var(--line)}
.fg-regler::-moz-range-progress{height:4px;border-radius:999px;background:var(--brand)}
.fg-regler::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:12px;height:12px;margin-top:-4px;border-radius:50%;
  background:var(--card);border:2.5px solid var(--brand)}
.fg-regler::-moz-range-thumb{width:12px;height:12px;border:2.5px solid var(--brand);
  border-radius:50%;background:var(--card)}
.fg-regler:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:999px}
@media (prefers-reduced-motion:reduce){ .fg-regler{transition:none} }
.fg-strahl-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:var(--sp-2);width:100%}
.fg-strahl{width:100%;max-width:none;height:16px;position:relative;cursor:pointer;
  touch-action:none}
.fg-zeit{font-size:var(--fs-xs);color:var(--ink-2);white-space:nowrap;letter-spacing:.01em}
.fg-zeit i{color:var(--ink-3);font-style:normal;margin:0 4px}
.fg-strahl::before{content:"";position:absolute;left:0;right:0;top:6px;height:4px;
  border-radius:999px;background:var(--line)}
.fg-fuellung{position:absolute;left:0;top:6px;height:4px;border-radius:999px;
  background:var(--brand);width:0}
.fg-knopf{position:absolute;top:2px;left:0;width:12px;height:12px;margin-left:-6px;
  border-radius:50%;background:var(--card);border:2.5px solid var(--brand)}
.fg-mark{position:absolute;top:0;width:3px;height:16px;margin-left:-1.5px;padding:0;
  border:0;border-radius:2px;background:var(--c-orange);cursor:pointer;z-index:2;
  box-shadow:0 0 0 2px var(--c-orange-bg)}
/* Drei Pixel trifft niemand – die Klickfläche ist unsichtbar 18 px breit. */
.fg-mark::after{content:"";position:absolute;top:-6px;bottom:-6px;left:-8px;right:-8px}
.fg-mark:hover,.fg-mark:focus-visible{background:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft)}
.fg-strahl[aria-disabled="true"]{opacity:.3;pointer-events:none}
.fg-knoepfe{display:flex;align-items:center;gap:6px;justify-content:center}
.fg-pb{position:relative;width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;border:1px solid var(--line);background:var(--card-2);
  color:var(--ink-2);font-size:var(--fs-sm);cursor:pointer;
  transition:transform .14s ease, background .14s ease, color .14s ease}
.fg-pb:hover{transform:translateY(-1px);background:var(--card);color:var(--ink)}
/* Kein Innenabstand vom Browser – sonst steht das Symbol 1,5 px schief; beim Zeigen liegt der Knopf
   samt Beschriftung über allem daneben (Lautstärkeregler, Zeitstrahl) */
.fg-pb{padding:0}
.fg-pb:hover,.fg-pb:focus-visible{z-index:20}
.fg-pb:active{transform:scale(.95)}
.fg-pb:disabled{opacity:.3;pointer-events:none}
.fg-pb.spielen{width:42px;height:34px;background:var(--brand);border-color:transparent;
  color:var(--on-brand);font-size:var(--fs-md)}
.fg-ic{width:19px;height:19px;display:block}
.fg-pp{width:21px;height:21px;display:block;overflow:visible}
.fg-pp .pp-play,.fg-pp .pp-pause{transform-origin:12px 12px;
  transition:opacity .16s ease, transform .22s cubic-bezier(.2,.8,.3,1)}
.fg-pp .pp-pause{opacity:0;transform:scale(.72) rotate(-18deg)}
.fg-pb.laeuft .fg-pp .pp-play{opacity:0;transform:scale(.72) rotate(18deg)}
.fg-pb.laeuft .fg-pp .pp-pause{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .fg-pp .pp-play,.fg-pp .pp-pause{transition:opacity .01s linear;transform:none}
}
.fg-pb[data-tip]::after{content:attr(data-tip) "\A" attr(data-key);white-space:pre;
  position:absolute;bottom:calc(100% + 9px);left:50%;
  transform:translateX(-50%) translateY(3px);
  background:var(--ink);color:var(--bg);font-size:var(--fs-xs);line-height:1.35;
  font-weight:500;text-align:center;padding:6px 9px;border-radius:10px;
  opacity:0;pointer-events:none;transition:opacity .13s ease, transform .13s ease;z-index:5}
.fg-pb[data-tip]:hover::after,.fg-pb[data-tip]:focus-visible::after{
  opacity:1;transform:translateX(-50%)}
.fg-zaehler{font-size:var(--fs-xs);color:var(--ink-3);white-space:nowrap}
.fg-streifen{display:flex;gap:5px;flex-wrap:nowrap;overflow:auto;max-width:100%}
.fg-th{width:26px;height:36px;padding:0;border-radius:6px;overflow:hidden;
  border:2px solid transparent;background:var(--card-2);opacity:.55;cursor:pointer;
  display:grid;place-items:center;color:var(--ink-3);
  transition:opacity .14s ease, transform .14s ease}
.fg-th img{width:100%;height:100%;object-fit:cover;display:block}
.fg-th:hover{opacity:.9;transform:translateY(-1px)}
.fg-th[aria-current="true"]{border-color:var(--brand);opacity:1}


@media (hover:none){ .fg-pb[data-tip]::after{display:none} }

@media (max-width:900px){
  .gp{grid-template-rows:auto auto}
  .fg-knoepfe{flex-wrap:wrap;justify-content:center;gap:6px}
  .fg-reihe{grid-template-columns:auto auto auto}
  /* Auf dem Handy regelt man die Lautstärke am Gerät – hier bleibt das Zeichen. */
  .fg-regler,.gp input.fg-regler{display:none}
  .fg-steuer{padding:8px var(--sp-2) 9px}
  /* Auf dem Handy schmiegt sich die Bühne ans Medium – kein leerer Kasten. */
  .fg-buehne{height:auto;padding:0;container-type:normal}
  .fg-rahmen,.fg-rahmen[data-seiten]{height:auto;width:auto;max-width:100%;aspect-ratio:auto}
  .fg-rahmen video,.fg-rahmen img,
  .fg-rahmen[data-seiten] video,.fg-rahmen[data-seiten] img{
    width:auto;height:auto;max-width:100%;max-height:46dvh}
  .fg-pb{width:40px;height:40px}
  .fg-pb.spielen{width:52px;height:44px}
  .fg-streifen{display:none}
}


/* ---- Marken nach Herkunft (seit 02.10.2026) ----
   Kunde orange wie bisher, Team blau, intern grau. Mehrere dicht
   beieinander werden zu einer Marke mit Zahl. */
.fg-mark.m-team{background:var(--c-blau);box-shadow:0 0 0 2px var(--c-blau-bg)}
.fg-mark.m-intern{background:var(--c-grau);box-shadow:0 0 0 2px var(--c-grau-bg)}
.fg-mark.m-gemischt{background:var(--ink-2);box-shadow:0 0 0 2px var(--card-2)}
.fg-mark[data-zahl]{width:5px;margin-left:-2.5px}
.fg-mark[data-zahl]::before{content:attr(data-zahl);position:absolute;bottom:calc(100% + 2px);
  left:50%;transform:translateX(-50%);font-size:10px;font-weight:700;line-height:1;
  color:var(--ink-2)}

/* Sprechblase beim Hinzeigen: wer, wann im Video, was. */
.fg-strahl-zeile{position:relative}
.gp-tip{position:absolute;bottom:calc(100% + 10px);left:0;z-index:20;width:max-content;
  max-width:min(320px,100%);padding:9px 11px;border-radius:12px;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow-lift, var(--shadow));
  display:grid;gap:8px;pointer-events:none;font-size:var(--fs-xs);line-height:1.45;color:var(--ink)}
.gp-tip[hidden]{display:none}
.gp-tip-kopf{display:flex;align-items:center;gap:6px;color:var(--ink-3)}
.gp-tip-kopf b{color:var(--ink);font-weight:600}
.gp-tip-kopf i{width:8px;height:8px;border-radius:50%;background:var(--c-orange);flex:none}
.t-team .gp-tip-kopf i{background:var(--c-blau)}
.t-intern .gp-tip-kopf i{background:var(--c-grau)}
.gp-tip-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fs-sm)}
.gp-tip-mehr{color:var(--ink-3)}

/* Fehlermeldung statt Medium */
.gp .externkachel{display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:140px;width:100%;padding:var(--sp-4);background:var(--card-2);
  color:var(--brand-text);text-decoration:none;font-weight:500;text-align:center;line-height:1.4}
.gp .externkachel:hover{background:var(--card)}
.gp .nums{font-variant-numeric:tabular-nums}
.gp [hidden]{display:none !important}

/* ---- Zoom (09.10.2026, GMPlayer.zoom – Player und Galerie) ---- */
.gz{overflow:hidden}
.gz.gz-an{cursor:grab;touch-action:none}
.gz.gz-zieht{cursor:grabbing}
.gz-knoepfe{position:absolute;right:10px;bottom:10px;z-index:3;display:flex;align-items:center;gap:2px;
  padding:3px;border-radius:999px;background:rgba(15,12,10,.62);color:#fff;line-height:1;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .18s ease}
.gz:hover .gz-knoepfe,.gz.gz-an .gz-knoepfe,.gz-knoepfe:focus-within{opacity:1}
@media (hover:none){ .gz-knoepfe{opacity:1} }
.gz-knoepfe button{display:grid;place-items:center;min-width:30px;height:30px;padding:0 6px;border:0;border-radius:999px;
  background:none;color:inherit;font:600 var(--fs-xs)/1 var(--font, inherit);cursor:pointer}
.gz-knoepfe button:hover{background:rgba(255,255,255,.16)}
.gz-knoepfe button:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.gz-knoepfe .fg-ic{width:16px;height:16px}
.gz-knoepfe .gz-wert{min-width:52px}

/* ---- Auflösung (20.10.2026): Knopf links neben Vollbild, Menü öffnet nach oben ---- */
.fg-qwahl{position:relative;display:inline-flex}
.fg-pb.fg-qual{width:auto;min-width:44px;padding:0 8px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.01em}
.fg-qmenue{position:absolute;bottom:calc(100% + 8px);left:0;z-index:6;min-width:200px;display:grid;gap:2px;padding:6px;
  border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-lift, var(--shadow))}
.fg-qmenue button{display:grid;gap:1px;text-align:left;border:0;background:none;padding:8px 10px;border-radius:9px;
  font:inherit;font-size:var(--fs-sm);color:var(--ink);cursor:pointer}
.fg-qmenue button small{color:var(--ink-3);font-size:11px}
.fg-qmenue button:hover{background:var(--card-2)}
.fg-qmenue button[aria-checked="true"]{color:var(--brand-text);font-weight:600}
.fg-qwahl:has(.fg-qmenue) .fg-pb[data-tip]::after{display:none}

/* ---- Versionen V1 · V2 oben rechts auf der Bühne (21.10.2026) ---- */
.fg-buehne{position:relative}
.gp-versionen{position:absolute;top:10px;right:10px;z-index:4;display:flex;gap:2px;padding:3px;border-radius:999px;
  background:color-mix(in srgb,var(--card) 88%,transparent);box-shadow:var(--shadow, 0 2px 8px rgba(0,0,0,.15))}
.gp-versionen button{border:0;background:none;height:26px;min-width:34px;padding:0 9px;border-radius:999px;
  font:inherit;font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer}
.gp-versionen button:hover{color:var(--ink)}
.gp-versionen button.on{background:var(--brand);color:#fff}

/* ==== zeichnen.css ==== */
/* ==================================================================
   GREWE.MEDIA – Zeichnen im Player (Aussehen, 20.10.2026)
   Gehört zu gemeinsam/zeichnen.js. Die Zeichenfarben sind bewusst fest
   und kräftig – sie liegen auf Fotos und Videos, nicht auf der Oberfläche,
   und sollen im hellen wie im dunklen Modus gleich aussehen.
   ================================================================== */
:root{
  --zeichen-rot:#FF3B30; --zeichen-orange:#FF8A00; --zeichen-gelb:#FFD60A;
  --zeichen-gruen:#30D158; --zeichen-blau:#0A84FF;
  --zeichen-schatten:rgba(0,0,0,.55);
  --zeichen-leiste:rgba(18,15,12,.82);
}

/* Die Ebene liegt genau über dem Medium und zoomt mit (.gz-mit). */
.fg-zeichnung{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  pointer-events:none;filter:drop-shadow(0 0 1.5px var(--zeichen-schatten))}
.fg-zeichnung.zeichnet{pointer-events:auto;touch-action:none;cursor:crosshair}
.fg-rahmen.zeichnet{box-shadow:0 0 0 2px var(--brand)}

/* Werkzeugleiste oben mittig über dem Bild */
.fg-buehne{position:relative}
.fg-zwerk{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:4;width:max-content;
  display:flex;align-items:center;gap:4px;padding:5px 6px;border-radius:14px;
  background:var(--zeichen-leiste);backdrop-filter:blur(8px);color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.3);max-width:calc(100% - 16px);line-height:0}
.fg-zwerk[hidden]{display:none}
.fg-zk{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:9px;
  background:transparent;color:inherit;cursor:pointer;flex:none}
.fg-zk:hover{background:rgba(255,255,255,.12)}
.fg-zk[aria-pressed="true"]{background:rgba(255,255,255,.22)}
.fg-zk.fertig{background:var(--brand);color:var(--on-brand)}
.fg-zf{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.35);
  background:var(--f);cursor:pointer;padding:0;flex:none;transition:transform .12s ease}
.fg-zf[aria-pressed="true"]{border-color:#fff;transform:scale(1.12)}
.fg-ztrenn{width:1px;height:20px;background:rgba(255,255,255,.22);margin:0 3px;flex:none}

/* Knöpfe in der Leiste: Stift an = Markenfarbe */
.fg-pb[data-fg="zeichnen"].on{background:var(--brand);border-color:transparent;color:var(--on-brand)}
.fg-pb[hidden]{display:none}

/* Am Handy: größere Ziele, Leiste darf umbrechen */
@media (max-width:640px){
  .fg-zwerk{top:6px;flex-wrap:wrap;justify-content:center;gap:2px;padding:4px}
  .fg-zf{width:24px;height:24px}
  .fg-ztrenn{margin:0 1px}
}

/* Mitschicken: Hinweis über dem Textfeld (Kundenbereich + Tool) */
.zeichen-chip{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);color:var(--ink-2)}
.zeichen-chip .fg-ic{width:16px;height:16px;color:var(--brand)}
.zeichen-chip b{color:var(--ink);font-weight:600}
.zeichen-chip button{margin-left:auto;border:0;background:none;color:var(--ink-3);cursor:pointer;
  font:inherit;font-size:var(--fs-xs);padding:2px 4px;border-radius:6px}
.zeichen-chip button:hover{color:var(--ink);background:var(--card-2)}
.zeichen-chip[hidden]{display:none}
.kchat-zeichen{margin-top:var(--sp-2)}
/* Kleiner Stift im Zeitmarken-Chip: an dieser Nachricht hängt eine Markierung */
.fg-chip-stift{display:inline-grid;margin-left:2px}
.fg-chip-stift .fg-ic{width:13px;height:13px}

/* Exportmappen (galerie.js): Stift und Auge oben in der Einzelansicht eines Fotos, Stift-Zeichen am Kommentar */
.gg-zknoepfe{display:inline-flex;gap:6px}
.gg-zknoepfe:empty{display:none}
.gg-zknoepfe .fg-pb{width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff}
.gg-zknoepfe .fg-pb[data-tip]::after{bottom:auto;top:calc(100% + 9px)}
.gg-zstift{display:inline-grid;color:var(--brand)}
.gg-zstift svg{width:13px;height:13px}
.gg-zchip{margin-bottom:2px}

/* ==== galerie.css ==== */
/* ==================================================================
   GREWE.MEDIA – gemeinsame Galerie für Exportmappen (Aussehen)
   Gehört zu gemeinsam/galerie.js und wird von Kundenbereich, Freigabe-Link
   UND Tool geladen. Farben, Radien und Schriften kommen aus den
   Stellschrauben der jeweiligen Seite (--brand, --card, --line, --ink,
   --c-*, --fs-*) – beide benutzen dieselben Namen.
   Wurzel: .gg · Einzelansicht: .gg-lupe (hängt direkt am body)
   ================================================================== */
.gg,.gg-lupe{--f-frei:var(--c-gruen);--f-aend:var(--c-orange);--f-ab:var(--c-rot);--f-offen:var(--c-grau)}
.gg{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
.gg > *{min-width:0}
.gg [hidden],.gg-lupe [hidden]{display:none !important}
:where(.gg,.gg-lupe) button{font-family:inherit;color:inherit;cursor:pointer}
.gg-grow{flex:1}

/* ---- Fortschritt und Werkzeugleiste ---- */
.gg-fort{display:grid;gap:6px}
.gg-balken{display:flex;height:8px;border-radius:999px;overflow:hidden;background:var(--c-grau-bg)}
.gg-balken i{display:block;height:100%;transition:width .3s ease}
.gg-legende{display:flex;flex-wrap:wrap;gap:14px;font-size:var(--fs-xs);color:var(--ink-2);font-variant-numeric:tabular-nums}
.gg-punkt{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:1px}
.s-frei{background:var(--f-frei)} .s-aend{background:var(--f-aend)} .s-ab{background:var(--f-ab)} .s-offen{background:var(--f-offen)}
.gg-leiste{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px}
.gg-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1 1 360px;padding:2px}
.gg-chips::-webkit-scrollbar{display:none}
.gg-chip{flex:none;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  font-size:var(--fs-sm);font-weight:500;color:var(--ink-2);display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.gg-chip b{font-weight:600;color:var(--ink-3);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.gg-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--card)}
.gg-chip[aria-pressed="true"] b{color:var(--card);opacity:.7}
.gg-seg{display:inline-flex;background:var(--card-2);border-radius:999px;padding:3px;gap:2px;flex:none}
.gg-seg button{border:0;background:none;height:30px;padding:0 12px;border-radius:999px;font-weight:600;
  color:var(--ink-2);font-size:var(--fs-xs);white-space:nowrap}
.gg-seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.gg-leer{color:var(--ink-3);padding:28px 4px;margin:0}

/* ---- Raster · Mosaik · Groß ---- */
.gg-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.gg-raster.gg-mosaik{display:block;columns:4 200px;column-gap:12px}
.gg-kachel{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--card-2);
  box-shadow:var(--shadow);cursor:default;outline:2px solid transparent;outline-offset:2px;
  transition:outline-color .3s ease, transform .14s ease;break-inside:avoid}
.gg-kachel:hover{transform:translateY(-1px)}
.gg-kachel:focus-visible{outline-color:var(--brand)}
.gg-mosaik .gg-kachel{aspect-ratio:auto;margin:0 0 12px;min-height:90px}
.gg-bild{display:block;width:100%;height:100%;object-fit:contain;
  background:color-mix(in srgb,var(--ink) 7%,var(--card-2));
  transition:transform .4s cubic-bezier(.22,1,.36,1), border-radius .4s cubic-bezier(.22,1,.36,1)}
.gg-mosaik .gg-bild{height:auto}
/* Hover: Bild zoomt im Rahmen leicht hinein und kippt ganz leicht (1,06 deckt die Ecken bei 1° ab) */
.gg-kachel:not(.gewaehlt):hover .gg-bild{transform:scale(1.06) rotate(-1deg)}
@media (prefers-reduced-motion:reduce){ .gg-kachel:not(.gewaehlt):hover .gg-bild{transform:none} }
.gg-kachel.gewaehlt{outline-color:var(--brand);background:var(--brand-soft)}
.gg-kachel.gewaehlt .gg-bild{transform:scale(.93);border-radius:10px}
.gg-platz{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-3);
  background:color-mix(in srgb,var(--ink) 9%,var(--card-2))}
.gg-mosaik .gg-platz{position:relative;aspect-ratio:16/9}
.gg-platz svg{width:30px;height:30px}
.gg-platz.klein svg{width:16px;height:16px}

/* Status-Schild oben links */
.gg-fsym{width:14px;height:14px;flex:none;display:block}
.gg-fsym .stab{stroke:currentColor;stroke-width:2.2;stroke-linecap:round;fill:none}
.gg-fsym .tuch{fill:currentColor}
.gg-status{position:absolute;left:10px;top:10px;display:flex;align-items:center;gap:6px;height:24px;padding:0 9px 0 7px;
  border-radius:999px;background:rgba(18,12,8,.58);color:#fff;font-size:11.5px;font-weight:600;backdrop-filter:blur(6px);
  pointer-events:none}
.gg-status.frei{background:color-mix(in srgb,var(--f-frei) 88%,#000)}
.gg-status.aend{background:color-mix(in srgb,var(--f-aend) 90%,#000)}
.gg-status.ab{background:color-mix(in srgb,var(--f-ab) 88%,#000)}
.gg-status.offen .tuch{fill:none;stroke:currentColor;stroke-width:1.6}

/* Flaggen-Fächer: zu sehen ist nur die aktuelle Flagge, beim Hinzeigen alle drei.
   Nach dem Klick bleibt er offen (.offen), bis die Maus die Kachel verlässt. */
.gg-flaggen{position:absolute;right:44px;top:8px;display:flex;align-items:center;gap:3px;height:30px;padding:3px;
  border-radius:11px;background:rgba(255,255,255,.94);box-shadow:0 2px 10px rgba(0,0,0,.2);opacity:0;transition:opacity .14s ease}
.gg-kachel:hover .gg-flaggen,.gg-kachel:focus-within .gg-flaggen,.gg-flaggen.offen{opacity:1}
.gg-fl{position:relative;width:24px;height:24px;max-width:24px;padding:0;border:0;border-radius:8px;background:none;
  display:grid;place-items:center;color:var(--c);
  transition:max-width .22s cubic-bezier(.2,.8,.3,1), opacity .18s ease, background-color .12s ease}
.gg-fl .gg-fsym{width:16px;height:16px}
.gg-fl[data-a="frei"]{--c:var(--f-frei)} .gg-fl[data-a="aend"]{--c:var(--f-aend)} .gg-fl[data-a="ab"]{--c:var(--f-ab)}
.gg-fl:not(.an) .tuch{fill:none;stroke:currentColor;stroke-width:1.6}
.gg-fl:hover{background:color-mix(in srgb,var(--c) 14%,transparent)}
.gg-fl:not(.an):hover .tuch{fill:currentColor;stroke:none}
.gg-fl.an{background:var(--c);color:#fff}
.gg-fl.an .tuch{fill:#fff}
.gg-fl::after{content:attr(data-tip);position:absolute;top:calc(100% + 9px);left:50%;translate:-50% -3px;padding:5px 9px;
  border-radius:9px;background:var(--ink);color:var(--card);font-size:11.5px;font-weight:600;white-space:nowrap;
  pointer-events:none;opacity:0;transition:opacity .14s ease, translate .14s ease;z-index:5}
.gg-fl:hover::after,.gg-fl:focus-visible::after{opacity:1;translate:-50% 0}
.gg-flaggen:not(:hover):not(:focus-within):not(.offen) .gg-fl.zu{max-width:0;opacity:0;margin:0 -1.5px;overflow:hidden;pointer-events:none}
.gg-flaggen:hover .gg-fl:nth-child(2){transition-delay:.04s} .gg-flaggen:hover .gg-fl:nth-child(3){transition-delay:.08s}

/* Auswahl: Kreis mit der Reihenfolge (1, 2, 3 …), bewusst kein Haken */
.gg-wahl{position:absolute;right:9px;top:9px;width:28px;height:28px;padding:0;border-radius:50%;
  border:2px solid rgba(255,255,255,.95);background:rgba(18,12,8,.28);display:grid;place-items:center;
  box-shadow:0 1px 5px rgba(0,0,0,.28);opacity:0;
  transition:opacity .2s ease, transform .35s cubic-bezier(.22,1,.36,1), background-color .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease}
.gg-kachel:hover .gg-wahl,.gg-kachel:focus-within .gg-wahl,.auswahl .gg-wahl,.gg-wahl.an{opacity:1}
.gg-wahl:not(.an):hover{transform:scale(1.08);background:rgba(255,255,255,.3)}
.gg-wahl .nr{color:#fff;font-size:12.5px;font-weight:700;line-height:1;opacity:0;transform:scale(.6);
  transition:opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1)}
.gg-wahl.an{background:var(--brand);box-shadow:0 2px 10px color-mix(in srgb,var(--brand) 45%,transparent)}
.gg-wahl.an .nr{opacity:1;transform:none}
.gg-wahl::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--brand);opacity:0;pointer-events:none}
.gg-wahl.pop::after{animation:ggWelle .7s cubic-bezier(.22,1,.36,1)}
@keyframes ggWelle{0%{opacity:.45;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
.gg-wahl .nr.neu{animation:ggNr .35s cubic-bezier(.22,1,.36,1)}
@keyframes ggNr{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:none}}
@media (hover:none){.gg-flaggen,.gg-wahl{opacity:1}.gg-fl::after{display:none}}

.gg-spiel{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.gg-spiel span{width:48px;height:48px;border-radius:50%;background:rgba(18,12,8,.5);display:grid;place-items:center;backdrop-filter:blur(4px)}
.gg-spiel svg{width:20px;height:20px;color:#fff;margin-left:3px}
.gg-unten{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;padding:22px 10px 8px;
  background:linear-gradient(transparent,rgba(18,12,8,.55));color:#fff;font-size:12px;pointer-events:none}
.gg-name{font-size:11.5px;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.gg-mini{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 7px;border-radius:999px;
  background:rgba(255,255,255,.2);font-size:11.5px;font-weight:600}
.gg-mini svg{width:13px;height:13px}

/* ---- Liste ---- */
.gg-liste{display:grid;gap:8px}
.gg-zeile{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center;padding:8px 12px 8px 8px;
  background:var(--card);border:1px solid var(--line-soft, var(--line));border-radius:14px;box-shadow:var(--shadow);cursor:pointer}
.gg-zeile:hover{border-color:var(--brand-line)}
.gg-daum{position:relative;width:72px;height:54px;border-radius:10px;overflow:hidden;background:var(--card-2)}
.gg-daum .gg-bild{object-fit:cover}
.gg-zt{display:grid;gap:2px;min-width:0}
.gg-zt .t{font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gg-zt .u{font-size:var(--fs-xs);color:var(--ink-3)}
.gg-spill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:var(--fs-xs);font-weight:600;white-space:nowrap}
.gg-spill.frei{background:var(--c-gruen-bg);color:var(--f-frei)} .gg-spill.aend{background:var(--c-orange-bg);color:var(--f-aend)}
.gg-spill.ab{background:var(--c-rot-bg);color:var(--f-ab)} .gg-spill.offen{background:var(--c-grau-bg);color:var(--f-offen)}
.gg-spill.offen .tuch{fill:none;stroke:currentColor;stroke-width:1.6}

/* ---- Leiste unten ---- */
.gg-fuss{position:sticky;bottom:10px;z-index:5;display:flex;justify-content:center;pointer-events:none;margin-top:6px}
.gg-fuss.fest{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));margin:0}
.gg-fuss-innen{pointer-events:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;background:var(--card);
  border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow-lift, var(--shadow));padding:7px 7px 7px 18px;max-width:100%}
.gg-fuss-innen.wechsel{animation:ggRein .3s cubic-bezier(.2,.8,.3,1)}
@keyframes ggRein{0%{transform:translateY(8px);opacity:.4}100%{transform:none;opacity:1}}
.gg-fuss-text{font-size:var(--fs-sm);color:var(--ink-2);font-variant-numeric:tabular-nums}
.gg-wahlleiste{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.gg-fb{height:38px;padding:0 14px 0 11px;border-radius:999px;border:0;display:inline-flex;align-items:center;gap:7px;
  font-weight:600;font-size:var(--fs-sm);color:#fff !important;background:var(--c);transition:transform .14s ease, filter .14s ease}
.gg-fb:hover{transform:translateY(-1px);filter:brightness(1.06)}
.gg-fb .gg-fsym{width:15px;height:15px}
.gg-fb .tuch{fill:#fff}.gg-fb .stab{stroke:#fff}
.gg-fb.frei{--c:var(--f-frei)} .gg-fb.aend{--c:var(--f-aend)} .gg-fb.ab{--c:var(--f-ab)}
.gg-knopf{height:38px;padding:0 16px;border-radius:999px;border:0;font-weight:600;font-size:var(--fs-sm);white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none}
.gg-knopf svg{width:16px;height:16px}
.gg-knopf.gruen{background:var(--f-frei);color:#fff !important}
.gg-knopf.brand{background:var(--brand);color:var(--on-brand) !important}
.gg-knopf.leise{background:var(--card-2);color:var(--ink) !important;border:1px solid var(--line)}
.gg-knopf.gefahr{color:var(--c-rot) !important}
.gg-knopf:disabled{opacity:.45;cursor:default}

/* ================================================================== *
   Einzelansicht
   ================================================================== */
html.gg-offen{overflow:hidden}
/* Leicht durchsichtig, aber ohne backdrop-filter – der Filter ließ beim Zoomen Streifen stehen */
.gg-lupe{position:fixed;inset:0;z-index:1000;background:rgba(14,10,7,.9);display:grid;
  grid-template-columns:minmax(0,1fr) 370px;color:var(--ink);font-family:var(--font)}
.gg-lupe[hidden]{display:none}
.gg-buehne{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;padding:14px;min-width:0;min-height:0}
.gg-lkopf{display:flex;align-items:center;gap:10px;color:#fff;min-width:0}
.gg-lname{font-size:var(--fs-sm);opacity:.88;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gg-lnr{font-size:var(--fs-sm);opacity:.75;font-variant-numeric:tabular-nums}
.gg-rund{width:38px;height:38px;flex:none;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff !important;display:grid;place-items:center}
.gg-rund:hover{background:rgba(255,255,255,.24)}
.gg-rund svg{width:18px;height:18px}
.gg-lbild{position:relative;display:grid;place-items:center;min-height:0;min-width:0}
.gg-rahmen{position:relative;max-height:100%;max-width:100%;line-height:0}
.gg-rahmen.pinbar{cursor:crosshair}
.gg-gross{max-height:calc(100vh - 190px);width:auto;max-width:100%;border-radius:8px;user-select:none}
.gg-player{width:100%;height:100%;min-height:0;display:grid}
.gg-player .gp{height:100%}
.gg-frame{width:min(960px,100%);aspect-ratio:16/9;border:0;border-radius:10px;background:#000}
.gg-extern{display:grid;justify-items:center;gap:12px;color:#fff;text-align:center}
.gg-extern svg{width:42px;height:42px;opacity:.8}
.gg-pin{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50% 50% 50% 4px;background:var(--brand);
  color:var(--on-brand);font-size:12px;font-weight:700;line-height:1;display:grid;place-items:center;
  box-shadow:0 0 0 3px rgba(255,255,255,.85),0 4px 10px rgba(0,0,0,.35);rotate:-45deg}
.gg-pin span{rotate:45deg}
.gg-pin.team{background:var(--c-blau);color:#fff}
.gg-pin.intern{background:var(--c-lila);color:#fff}
.gg-pin.neu{animation:ggPin .3s cubic-bezier(.22,1,.36,1)}
@keyframes ggPin{0%{transform:scale(.4);opacity:0}100%{transform:none;opacity:1}}
.gg-streifen{display:flex;gap:6px;overflow-x:auto;padding:4px 2px;scrollbar-width:thin}
.gg-streifen button{flex:none;width:64px;height:48px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;
  opacity:.6;background:rgba(255,255,255,.08);position:relative}
.gg-streifen button:hover{opacity:.9}
.gg-streifen button[aria-current="true"]{border-color:var(--brand);opacity:1}
.gg-streifen img{width:100%;height:100%;object-fit:cover;display:block}
.gg-streifen .gg-platz{color:#fff;background:none}
.gg-streifen .sp{position:absolute;right:3px;bottom:3px;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 2px rgba(0,0,0,.45)}
.gg-streifen .sp.s-offen{background:rgba(255,255,255,.55)}

.gg-seite{background:var(--card);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.gg-skopf{padding:16px 18px 12px;border-bottom:1px solid var(--line);display:grid;gap:10px}
.gg-sname{margin:0;font-size:var(--fs-base);font-weight:600;word-break:break-word}
.gg-drei{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.gg-db{--c:var(--f-frei);height:40px;padding:0 6px;border-radius:12px;border:1px solid var(--line);background:var(--card-2);
  font-weight:600;font-size:12.5px;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;color:var(--c) !important}
.gg-db.aend{--c:var(--f-aend)} .gg-db.ab{--c:var(--f-ab)}
.gg-db span{color:var(--ink)}
.gg-db .gg-fsym{width:15px;height:15px}
.gg-db .tuch{fill:none;stroke:currentColor;stroke-width:1.6}
.gg-db:hover .tuch{fill:currentColor;stroke:none}
.gg-db.an{background:var(--c);border-color:var(--c);color:#fff !important}
.gg-db.an span{color:#fff}
.gg-db.an .tuch{fill:#fff;stroke:none}
.gg-sknoepfe{display:flex;flex-wrap:wrap;gap:6px}
.gg-sknoepfe .gg-knopf{height:32px;padding:0 12px;font-size:var(--fs-xs)}
.gg-verlauf{flex:1;overflow:auto;padding:14px 18px;display:flex;flex-direction:column;gap:12px}
.gg-still{color:var(--ink-3);margin:0;font-size:var(--fs-sm)}
.gg-msg{display:grid;gap:4px;border-radius:12px;transition:background-color .3s ease}
.gg-msg.hell{background:var(--brand-soft)}
.gg-msg .k{font-size:var(--fs-xs);color:var(--ink-3);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.gg-msg .k b{color:var(--ink-2)}
.gg-msg .b{background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:12px;padding:8px 11px;
  font-size:var(--fs-sm);white-space:pre-wrap;word-break:break-word}
.gg-msg.team .b{background:var(--card-2);border-color:var(--line)}
.gg-msg.intern .b{background:var(--c-lila-bg);border-color:var(--c-lila-bg);border-style:dashed;border-color:var(--c-lila)}
.gg-intern{color:var(--c-lila);font-weight:600}
.gg-tag{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;border:0;
  background:var(--brand);color:var(--on-brand) !important;font-size:11px;font-weight:700}
.gg-tag.team{background:var(--c-blau);color:#fff !important} .gg-tag.intern{background:var(--c-lila);color:#fff !important}
.gg-tag.zeit{background:var(--c-orange-bg);color:var(--c-orange) !important;font-variant-numeric:tabular-nums}
.gg-nweg{margin-left:auto;width:22px;height:22px;border:0;border-radius:50%;background:none;display:grid;place-items:center;color:var(--ink-3) !important;padding:0}
.gg-nweg:hover{background:var(--card-2);color:var(--c-rot) !important}
.gg-nweg svg{width:13px;height:13px}
.gg-eingabe{padding:12px 18px 16px;border-top:1px solid var(--line);display:grid;gap:8px;margin:0}
.gg-ehinweis{font-size:var(--fs-xs);color:var(--ink-3)}
.gg-ehinweis:empty{display:none}
.gg-zeitwahl{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.gg-zeitwahl input{width:auto;height:auto;margin:0;accent-color:var(--brand)}
.gg-eingabe textarea{width:100%;min-height:58px;height:auto;resize:none;border-radius:14px;border:1px solid var(--line);
  background:var(--card-2);color:var(--ink);padding:9px 12px;font:inherit;font-size:var(--fs-sm)}
.gg-ezeile{display:flex;align-items:center;gap:8px}
.gg-seg.klein button{height:28px;padding:0 10px}

/* ---- Unterordner (Trauung, Feier …) ---- */
.gg-ordnerleiste{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--line)}
.gg-otab{display:inline-flex;align-items:center;border-radius:12px;background:var(--card-2);border:1px solid transparent;
  transition:background-color .15s ease, border-color .15s ease}
.gg-otab > button:first-child{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border:0;background:none;
  font-weight:600;font-size:var(--fs-sm);color:var(--ink-2)}
.gg-otab svg{width:15px;height:15px;opacity:.7}
.gg-otab b{font-weight:600;font-size:var(--fs-xs);color:var(--ink-3);font-variant-numeric:tabular-nums}
.gg-otab:hover{border-color:var(--line)}
.gg-otab.an{background:var(--brand-soft);border-color:var(--brand-line)}
.gg-otab.an > button:first-child{color:var(--brand-text)} .gg-otab.an svg{opacity:1}
.gg-omenue{width:28px;height:28px;margin-right:4px;border:0;border-radius:8px;background:none;display:grid;place-items:center;color:var(--ink-3)}
.gg-omenue:hover{background:var(--card);color:var(--ink)}
.gg-omenue svg{width:15px;height:15px}
.gg-oneu{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:12px;border:1.5px dashed var(--line);
  background:none;font-weight:600;font-size:var(--fs-sm);color:var(--ink-3)}
.gg-oneu:hover{border-color:var(--brand-line);color:var(--brand-text)}
.gg-oneu svg{width:15px;height:15px}

/* ---- Favoriten (Download-Mappe) ---- */
.gg-hsym{width:16px;height:16px;flex:none;display:inline-block;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.gg-herz{position:absolute;right:44px;top:8px;width:30px;height:30px;padding:0;border-radius:50%;border:0;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--c-beere);box-shadow:0 2px 8px rgba(0,0,0,.2);opacity:0;
  transition:opacity .15s ease, transform .2s cubic-bezier(.22,1,.36,1)}
.gg-kachel:hover .gg-herz,.gg-kachel:focus-within .gg-herz,.gg-herz.an{opacity:1}
.gg-herz:hover{transform:scale(1.08)}
.gg-herz .gg-hsym{width:17px;height:17px;vertical-align:0}
.gg-herz.an{background:var(--c-beere);color:#fff}
.gg-herz.an .gg-hsym{fill:currentColor}
.gg-herz.fest{pointer-events:none}
.gg-herz.puls{animation:ggHerz .45s cubic-bezier(.22,1,.36,1)}
@keyframes ggHerz{0%{transform:scale(.7)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
.gg-herz.zeile{position:static;opacity:1;box-shadow:none;border:1px solid var(--line);background:var(--card)}
.gg-herz.zeile.an{background:var(--c-beere);border-color:var(--c-beere)}
.gg-chip.fav .gg-hsym{width:14px;height:14px;color:var(--c-beere)}
.gg-chip.fav[aria-pressed="true"] .gg-hsym{color:var(--card);fill:currentColor}
.gg-fuss-text .gg-hsym{width:14px;height:14px;color:var(--c-beere);fill:currentColor;margin-right:2px}
.gg-soll{font-weight:700;color:var(--ink)}
.gg-soll.genau{color:var(--f-frei)} .gg-soll.zuviel{color:var(--c-rot)}
.gg-fuss-knoepfe{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.gg-fuss-knoepfe:empty{display:none}
.gg-db.fav{--c:var(--c-beere)}
.gg-db.fav .gg-hsym{width:16px;height:16px}
.gg-db.fav.an .gg-hsym{fill:#fff;stroke:#fff}
.gg-drei.eins{grid-template-columns:1fr}
.gg-spill.fav{background:var(--c-beere-bg);color:var(--c-beere)}
.gg-spill.fav .gg-hsym{fill:currentColor}
.gg-streifen .sp.fav{width:16px;height:16px;right:2px;bottom:2px;background:var(--c-beere);color:#fff;display:grid;place-items:center;box-shadow:none}
.gg-streifen .sp.fav .gg-hsym{width:11px;height:11px;fill:#fff;stroke:none;vertical-align:0}
.gg-knopf.an{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-text) !important}
.gg-lupe.dl .gg-verlauf[hidden]{display:block !important;flex:1;visibility:hidden}

/* ---- Titelbild-Marke und Sortieren von Hand (Team) ---- */
.gg-titelmarke{position:absolute;left:10px;bottom:34px;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;
  border-radius:999px;background:var(--brand);color:var(--on-brand);font-size:11px;font-weight:700;pointer-events:none}
.gg-titelmarke svg{width:13px;height:13px}

@media (max-width:900px){
  .gg-lupe{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;overflow:auto}
  .gg-seite{max-height:48vh}
  .gg-gross{max-height:42vh}
  .gg-flaggen{right:42px}
}
@media (max-width:560px){
  .gg-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .gg-raster.gg-mosaik{columns:2 140px;column-gap:8px}
  .gg-fuss-innen{border-radius:22px;padding:8px 10px}
  .gg-zeile{grid-template-columns:60px minmax(0,1fr) auto;gap:10px}
  .gg-daum{width:60px;height:46px}
}
@media (prefers-reduced-motion:reduce){
  .gg-wahl.pop::after,.gg-wahl .nr.neu,.gg-fuss-innen.wechsel,.gg-pin.neu{animation:none}
  .gg-wahl,.gg-wahl .nr,.gg-fl,.gg-bild,.gg-kachel{transition:none}
}

/* ---- Löschen (nur Team) ---- */
.gg-weg{position:absolute;right:9px;bottom:9px;z-index:2;width:28px;height:28px;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;background:rgba(18,12,8,.42);color:#fff;box-shadow:0 1px 5px rgba(0,0,0,.28);
  opacity:0;transition:opacity .2s ease, background-color .2s ease, transform .25s cubic-bezier(.22,1,.36,1)}
.gg-weg svg{width:15px;height:15px}
.gg-kachel:hover .gg-weg,.gg-kachel:focus-within .gg-weg{opacity:1}
.gg-weg:hover,.gg-weg:focus-visible{background:var(--c-rot, #d1453b);transform:scale(1.08)}
.gg-kachel.loeschbar .gg-unten{padding-right:44px}
.gg-zeile.loeschbar{grid-template-columns:72px minmax(0,1fr) auto auto}
.gg-weg.zeile{position:static;opacity:.55;background:transparent;color:var(--muted, inherit);box-shadow:none}
.gg-zeile:hover .gg-weg.zeile{opacity:1}
.gg-weg.zeile:hover,.gg-weg.zeile:focus-visible{background:color-mix(in srgb,var(--c-rot, #d1453b) 14%,transparent);color:var(--c-rot, #d1453b);transform:none}
@media (hover:none){.gg-weg{opacity:1}}
/* Neue Version (21.10.2026): gleich gebaut wie Löschen, links daneben */
.gg-neuver{position:absolute;right:9px;bottom:9px;z-index:2;width:28px;height:28px;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;background:rgba(18,12,8,.42);color:#fff;box-shadow:0 1px 5px rgba(0,0,0,.28);
  opacity:0;transition:opacity .2s ease, background-color .2s ease, transform .25s cubic-bezier(.22,1,.36,1)}
.gg-kachel.loeschbar .gg-neuver{right:43px}
.gg-kachel:has(.gg-neuver) .gg-unten{padding-right:44px}
.gg-kachel.loeschbar:has(.gg-neuver) .gg-unten{padding-right:78px}
.gg-neuver svg{width:15px;height:15px}
.gg-kachel:hover .gg-neuver,.gg-kachel:focus-within .gg-neuver{opacity:1}
.gg-neuver:hover,.gg-neuver:focus-visible{background:var(--brand);transform:scale(1.08)}
.gg-neuver.zeile{position:static;opacity:.55;background:transparent;color:var(--muted, inherit);box-shadow:none}
.gg-zeile:hover .gg-neuver.zeile{opacity:1}
.gg-neuver.zeile:hover,.gg-neuver.zeile:focus-visible{background:var(--brand-soft);color:var(--brand-text);transform:none}
@media (hover:none){.gg-neuver{opacity:1}}
.gg-zeile.loeschbar:has(.gg-neuver){grid-template-columns:72px minmax(0,1fr) auto auto auto}
@media (max-width:640px){.gg-zeile.loeschbar:has(.gg-neuver){grid-template-columns:60px minmax(0,1fr) auto auto auto}}
@media (max-width:640px){.gg-zeile.loeschbar{grid-template-columns:60px minmax(0,1fr) auto auto}}

/* ---- Sortieren per Ziehen (wie Medien im Beitrag) ---- */
.gg-kachel[data-sortierbar]{cursor:default}    /* wie jede Kachel (0.3.1) – kein Wechsel Hand/Pfeil beim Drüberfahren, „grabbing“ erst beim Ziehen */
.gg-kachel.platzhalter{border:2px dashed var(--brand-line, var(--brand));background:var(--brand-soft, transparent);box-shadow:none;transform:none}
.gg-kachel.platzhalter > *{opacity:0;transition:opacity .12s ease}
.gg-geist{position:fixed !important;left:0;top:0;z-index:300;margin:0 !important;pointer-events:none;will-change:translate;
  border-radius:14px;overflow:hidden;outline:2px solid var(--brand);box-shadow:0 2px 6px rgba(20,12,4,.12);
  transition:scale .18s cubic-bezier(.2,.8,.3,1), rotate .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease}
.gg-geist.hoch{scale:1.04;rotate:-2deg;box-shadow:0 18px 38px rgba(20,12,4,.28),0 4px 10px rgba(20,12,4,.16)}
.gg-geist.landet{transition:translate .2s cubic-bezier(.2,.8,.3,1), scale .2s ease, rotate .2s ease, box-shadow .2s ease}
body.gg-zieht,body.gg-zieht *{cursor:grabbing !important;user-select:none}
.gg-zeile.platzhalter{border:2px dashed var(--brand-line, var(--brand));background:var(--brand-soft, transparent)}
.gg-zeile.platzhalter > *{opacity:0}
/* In Ordner ziehen (0.20.0) – Anzahl, Stapel, Ziel-Reiter, Schrumpfen in den Reiter */
.gg-geist .gg-anzahl{position:absolute;top:8px;right:8px;z-index:2;min-width:24px;height:24px;padding:0 7px;border-radius:999px;
  display:grid;place-items:center;background:var(--brand);color:#fff;font-size:12px;font-weight:700}
.gg-geist.ueber-ordner{scale:.38;rotate:-4deg;opacity:.92}
.gg-stapel{position:fixed;left:0;top:0;z-index:299;pointer-events:none;will-change:translate}
.gg-stapel span{position:absolute;left:0;top:0;border-radius:14px;background:var(--card);border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(20,12,4,.16);transform:rotate(-1deg);transition:transform .32s cubic-bezier(.2,.9,.3,1.15)}
.gg-stapel.auf span{transform:translate(var(--x), var(--y)) rotate(var(--r))}
.gg-stapel{transition:scale .18s cubic-bezier(.2,.8,.3,1)}
.gg-stapel.ueber-ordner{scale:.38}
.gg-geist.rein,.gg-stapel.rein{transition:translate .26s cubic-bezier(.4,0,.2,1), scale .26s ease, opacity .26s ease;scale:.12;opacity:0}
.gg-otab.ablegen{background:var(--brand-soft);border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.gg-otab.ablegen > button:first-child{color:var(--brand-text)}
/* Schild über dem Reiter – ohne die Leiste zu verschieben */
.gg-otab{position:relative}
.gg-otab.ablegen::after{content:'Hier ablegen';position:absolute;left:50%;bottom:calc(100% + 6px);translate:-50% 0;white-space:nowrap;
  padding:3px 9px;border-radius:999px;background:var(--brand);color:#fff;font-size:var(--fs-xs);font-weight:600;pointer-events:none}
@media (prefers-reduced-motion:reduce){ .gg-stapel{display:none} }
@media (prefers-reduced-motion:reduce){ .gg-geist,.gg-geist.landet{transition:none} .gg-geist.hoch{rotate:0deg} }

/* Versionen (21.10.2026): Marke an der Kachel, Umschalter V1 · V2 oben in der Einzelansicht */
.gg-mini.gg-version{background:var(--brand);font-weight:700}
.gg-lversion:empty{display:none}
.gg-lversion .gp-versionen{position:static;box-shadow:none}

/* ==== handy.css ==== */
/* ==================================================================
   GREWE.MEDIA – Player und Galerie am Handy (20.10.2026)
   Gehört zu gemeinsam/player.js und galerie.js – Tool UND Kundenbereich.
   Bis 640 px: eine Knopfreihe im Player, Medium per Wischen (Punkte
   darunter), Filter der Mappe als Blatt von unten, Einzelansicht mit
   fester Leiste (Flaggen/Herz + Kommentare) und Gesten.
   Was es nur am Handy gibt, ist hier für breite Fenster ausgeblendet.
   ================================================================== */
.fg-punkte,.gg-filterknopf,.gg-blattgrund,.gg-blattkopf,.gg-kombtn{display:none}
.gg-leiste-l{display:contents}

@media (max-width:640px){
  /* ---- Player: eine Reihe – mittig Frame/Play/Frame, links Vollbild, rechts Stift und Auge ---- */
  .fg-reihe{grid-template-columns:1fr auto 1fr;gap:6px}
  .fg-knoepfe{flex-wrap:nowrap;justify-content:center;gap:6px}
  .fg-knoepfe [data-fg^="medium"],.fg-zaehler,.fg-streifen,.fg-laut{display:none}
  .fg-schiene-r,.fg-schiene-l{gap:6px}
  .fg-pb{width:36px;height:36px}
  .fg-pb.spielen{width:48px;height:40px}
  .fg-pb.fg-qual{min-width:40px;padding:0 6px}
  .gz-knoepfe{display:none}                       /* Zoom per Pinch und Doppeltipp */
  .fg-punkte{display:flex;justify-content:center;gap:6px;padding:2px 0}
  .fg-punkte button{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:999px;
    background:var(--line);transition:width .18s ease, background .18s ease}
  .fg-punkte button::after{content:"";position:absolute;inset:-10px -5px}   /* größere Tippfläche */
  .fg-punkte button[aria-current="true"]{width:20px;background:var(--brand)}
  /* Senkrecht scrollt die Seite, waagerecht und mit zwei Fingern gehört der Finger dem Player */
  .fg-rahmen{touch-action:pan-y}
  .fg-rahmen.gz-an,.fg-rahmen.zeichnet{touch-action:none}

  /* ---- Mappe: Ordner in einer wischbaren Zeile, Filter hinter einem Knopf ---- */
  .gg-ordnerleiste{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:8px}
  .gg-ordnerleiste::-webkit-scrollbar{display:none}
  .gg-otab,.gg-oneu{flex:none}
  .gg-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .gg-fort{flex:1 1 100%}
  .gg-filterknopf{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;
    border:1px solid var(--line);background:var(--card-2);font-weight:600;font-size:var(--fs-sm)}
  .gg-filterknopf svg{width:16px;height:16px}
  .gg-leiste{display:none}
  .gg.filter-offen .gg-blattgrund{display:block;position:fixed;inset:0;z-index:1001;background:rgba(14,10,7,.45)}
  .gg.filter-offen .gg-leiste{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1002;margin:0;
    flex-direction:column;align-items:stretch;gap:14px;background:var(--card);border-radius:22px 22px 0 0;
    padding:14px 16px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:var(--shadow-lift, var(--shadow));
    animation:ggBlatt .24s cubic-bezier(.2,.8,.3,1)}
  .gg-blattkopf{display:flex;align-items:center;justify-content:space-between}
  .gg.filter-offen .gg-chips{flex:none;flex-wrap:wrap;overflow:visible}
  .gg.filter-offen .gg-seg{display:flex}
  .gg.filter-offen .gg-seg button{flex:1;height:38px}

  /* Leiste unten: schmal, über die ganze Breite */
  .gg-fuss.fest{padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))}
  .gg-fuss-innen{width:100%;border-radius:18px;padding:8px;gap:6px}
  .gg-fuss-text{flex:1 1 100%;text-align:center;font-size:var(--fs-xs)}
  .gg-fuss-knoepfe{flex:1;flex-wrap:nowrap}
  .gg-fuss-knoepfe .gg-knopf{flex:1;height:38px;padding:0 10px}

  /* ---- Einzelansicht: Bild groß, Leiste unten, Kommentare als Blatt ---- */
  .gg-lupe{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;overflow:hidden;
    background:rgba(14,10,7,calc(.94 - var(--zieh, 0) * .6))}
  .gg-buehne{padding:10px 8px 6px;grid-template-rows:auto minmax(0,1fr)}
  .gg-lkopf{justify-content:space-between}
  .gg-lkopf [data-l="vor"],.gg-lkopf [data-l="nach"],.gg-lname,.gg-grow,.gg-streifen{display:none}
  .gg-gross{max-height:calc(100dvh - 190px)}
  /* Video in der Einzelansicht: randlos, so groß wie möglich, Steuerung ohne eigene Karte */
  .gg-lupe .gg-buehne{padding:8px 0 4px}
  .gg-lupe .gg-lkopf{padding:0 8px}
  .gg-lupe .gg-player{height:100%;align-content:center}
  .gg-lupe .gg-player .gp{height:auto;align-content:center;gap:2px}
  .gg-lupe .fg-buehne{background:transparent;border:0;border-radius:0}
  .gg-lupe .fg-rahmen video,.gg-lupe .fg-rahmen img{max-height:calc(100dvh - 250px)}
  .gg-lupe .fg-steuer{background:transparent;border:0;box-shadow:none;padding:4px 10px;color:#fff}
  .gg-lupe .fg-steuer .fg-pb:not(.spielen){background:rgba(255,255,255,.1);border-color:transparent;color:#fff}
  .gg-lupe .fg-zeit{color:rgba(255,255,255,.8)}
  .gg-lupe .gg-rahmen,.gg-lupe .fg-rahmen{touch-action:none}
  .gg-seite{max-height:none}
  .gg-skopf{padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px));border-bottom:0;gap:8px}
  .gg-sname,.gg-sknoepfe,.gg-verlauf,.gg-eingabe{display:none}
  .gg-lupe.dl .gg-sknoepfe{display:flex}
  .gg-leiste-l{display:flex;gap:8px;align-items:stretch}
  .gg-leiste-l .gg-drei{flex:1;min-width:0}
  .gg-db{height:48px;min-width:0;padding:0 2px;flex-direction:column;gap:2px;font-size:11px}   /* Symbol über Text – passt zu dritt */
  .gg-kombtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:52px;height:46px;padding:0 12px;
    border-radius:12px;border:1px solid var(--line);background:var(--card-2);font-weight:600}
  .gg-kombtn svg{width:19px;height:19px}
  .gg-kombtn b:empty{display:none}
  .gg-kombtn[aria-expanded="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand) !important}
  .gg-lupe.blatt .gg-seite{position:fixed;left:0;right:0;bottom:0;z-index:2;max-height:72dvh;border-radius:22px 22px 0 0;
    box-shadow:0 -10px 30px rgba(0,0,0,.35);animation:ggBlatt .24s cubic-bezier(.2,.8,.3,1)}
  .gg-lupe.blatt .gg-skopf{padding-bottom:10px;border-bottom:1px solid var(--line)}
  .gg-lupe.blatt .gg-sname,.gg-lupe.blatt .gg-sknoepfe:not([hidden]){display:flex}
  .gg-lupe.blatt .gg-verlauf{display:flex;min-height:80px}
  .gg-lupe.blatt .gg-eingabe:not([hidden]){display:grid;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
}
@keyframes ggBlatt{0%{transform:translateY(40px);opacity:.3}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .gg.filter-offen .gg-leiste,.gg-lupe.blatt .gg-seite{animation:none}
  .fg-punkte button{transition:none}
}

/* ==== sende-knopf.css ==== */
/* Sende-Knopf + Eingabekapsel (0.32.0, Vorlage chat-input-animation.html) – gehört zu gemeinsam/sende-knopf.js
   Kapsel: Ecken-Radius = halbe Einzeilen-Höhe (bleibt beim Wachsen), Knopf 44 px mit 8 px Abstand oben/rechts/unten. Orange fest wie in der Vorlage. */
:root{--sk-orange:#ff7a1a;--sk-orange-2:#ff9a3d;--sk-abstand:8px;--sk-d:44px}
.sk-feld{display:flex;align-items:flex-end;box-sizing:border-box;cursor:text;min-height:calc(var(--sk-d) + var(--sk-abstand) * 2);
  padding:var(--sk-abstand) var(--sk-abstand) var(--sk-abstand) 22px;border:1px solid var(--line);background:var(--card-2);
  /* einzeilig eine volle Kapsel; wächst das Feld, bleiben die Ecken gleich rund und die Seiten laufen gerade nach oben */
  border-radius:calc((var(--sk-d) + var(--sk-abstand) * 2 + 2px) / 2)}
.sk-feld{transition:background-color .25s ease,border-color .25s ease}
.sk-feld:focus-within{border-color:var(--sk-orange);background:var(--card)}
/* Die Kapsel ist die Grenze: das Feld hat keinen eigenen Rand, Fokus-Ring und Scrollbalken. Es wächst mit dem Text bis 3 Zeilen,
   danach scrollt der Text unsichtbar. Einzeilig steht es mittig zum 44-px-Knopf, mehrzeilig sitzt der Knopf unten. */
.sk-feld.sk-klein{padding-left:16px}
.sk-feld textarea{flex:1;min-width:0;min-height:0;height:1.4em;max-height:4.2em;margin:calc((var(--sk-d) - 1.4em) / 2) 0;resize:none;overflow-y:auto;
  scrollbar-width:none;border:0;border-radius:0;background:none;box-shadow:none;outline:0;padding:0;font:inherit;font-size:var(--fs-base);line-height:1.4;color:var(--ink)}
.sk-feld textarea::-webkit-scrollbar{display:none}
.sk-feld.sk-mehr textarea{margin:0}
/* auch im Fokus kein eigener Hintergrund/Rahmen (die Seiten haben ein allgemeines textarea:focus) – nur die Kapsel zeigt den Fokus */
.sk-feld textarea:focus{background:none;border:0;border-radius:0;box-shadow:none;outline:0}
.sk-feld textarea::placeholder{color:var(--ink-3)}
.sk-knopf{flex:none;box-sizing:border-box;width:var(--sk-d);height:var(--sk-d);margin-left:var(--sk-abstand);padding:0;border:0;border-radius:50%;
  cursor:pointer;overflow:hidden;display:block;
  background:radial-gradient(circle at 30% 25%,var(--sk-orange-2),var(--sk-orange));
  box-shadow:0 0 10px rgba(255,122,26,.55),0 0 24px rgba(255,122,26,.30);
  transition:transform .15s ease,box-shadow .15s ease}
.sk-knopf:hover{transform:scale(1.06);box-shadow:0 0 14px rgba(255,122,26,.75),0 0 34px rgba(255,122,26,.45)}
.sk-knopf:active{transform:scale(.95)}
.sk-knopf:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 0 4px var(--sk-orange),0 0 14px rgba(255,122,26,.75)}
.sk-knopf:disabled{opacity:.4;cursor:default;box-shadow:none}
.sk-knopf svg{display:block;width:100%;height:100%}
.sk-fly,.sk-py,.sk-pr{transform-box:view-box;transform-origin:22px 22px}
.sk-w{opacity:0}
@media (prefers-reduced-motion:reduce){ .sk-w{display:none} }
/* Kleine Fassung (Kommentare, Nachrichten in Karten): 32 px, ohne Leuchten, flaches Orange. Kapsel mit .sk-klein schrumpft mit. */
:root{--sk-r-klein:22px}              /* = (32 + 2 × 5 + 2) / 2 – Rundung der kleinen Kapsel; im Tool ist auch --r jetzt 22 px, im Kundenbereich bleibt es bei dieser Zahl */
.sk-feld.sk-klein{--sk-d:32px;--sk-abstand:5px;border-radius:var(--sk-r-klein)}
.sk-knopf.sk-klein{width:32px;height:32px;margin-left:0;background:var(--sk-orange);box-shadow:none}
.sk-knopf.sk-klein:hover{box-shadow:none;background:var(--sk-orange-2)}
.sk-knopf.sk-klein:focus-visible{box-shadow:0 0 0 3px var(--brand-soft)}
.sk-knopf.sk-plus svg{width:60%;height:60%;margin:20%}
/* Text-Fassung „Senden“ mit Flieger (SendeKnopf.text): Form und Farbe vom Hauptknopf .btn. Der Flieger sitzt RECHTS in einem
   runden Feld über die volle Höhe des Knopfs (leicht hellerer Grund) und fliegt darin */
.sk-knopf.sk-text{width:auto;height:var(--h-ctl,40px);padding:0 0 0 18px;display:inline-flex;align-items:center;gap:0;margin-left:0;
  border-radius:999px;overflow:visible;color:#fff;font-weight:600}
.sk-knopf.sk-text[hidden]{display:none}
.sk-knopf.sk-text:hover{transform:none}
.sk-text .sk-ikon{display:block;flex:none;height:100%;aspect-ratio:1;border-radius:50%;overflow:hidden}