/* ==== 01-grundlagen.css ==== */
/* ==================================================================
   GREWE.MEDIA Intranet – 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 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --r-sm:6px; --r:8px; --r-lg:10px;
  --nav-w:236px;

  /* ---- Farben ---- */
  --bg:#FAF8F6; --card:#FFFFFF; --card-2:#F5F2EF;
  --ink:#1A1613; --ink-2:#5C554E; --ink-3:#8E867E;
  --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);
  --logo-invert:0;
}

@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;
    --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);
    --logo-invert:1;
  }
}
:root[data-theme="dark"]{ color-scheme:dark;
  --bg:#14110E; --card:#1D1916; --card-2:#252019;
  --ink:#F2EDE8; --ink-2:#BDB4AA; --ink-3:#8B8279;
  --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);
  --logo-invert:1;
}
:root[data-theme="light"]{ color-scheme:light; --logo-invert:0 }

/* ---------- 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)}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--brand);outline-offset:-1px;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:2px solid var(--brand);outline-offset:-1px}

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}
/* 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)}
.clock{font-size:var(--fs-2xl);font-weight:500;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;color:var(--ink)}

/* 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) 2fr}
.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.dragging,
.beitragkarte.dragging{opacity:.45;cursor:grabbing}
.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);
  transition:background .12s,outline-color .12s;
  outline:2px dashed transparent;outline-offset:-2px}
.col-body.over{background:var(--brand-soft);outline-color:var(--brand-line)}

/* ---------- 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}


/* ==== 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)}
.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}
}

/* ==== 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:2px solid var(--brand);outline-offset:-1px}
.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}
/* 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 */
.zugangzeile{display:flex;align-items:center;gap:var(--sp-3);padding:10px var(--sp-3);
  border-radius:var(--r);background:var(--card-2);border:1px solid transparent}
.zugangzeile + .zugangzeile{margin-top:6px}
.zugangzeile:hover{background:var(--card);border-color:var(--line)}
.zugangzeile .kdnr{font-variant-numeric:tabular-nums;color:var(--ink-3);
  font-size:var(--fs-sm);flex:none;width:66px}
.zugangzeile .aktionen{display:flex;gap:var(--sp-2);flex:none}
.zugangzeile.ohne .t{color:var(--ink-3)}

/* Ä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{display:flex;gap:var(--sp-2);align-items:flex-end;margin-top:var(--sp-2)}
.kchat-neu textarea{flex:1;min-height:60px;resize:vertical}
@media (max-width:640px){
  .kchat-neu{flex-direction:column;align-items:stretch}
  .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)}

/* ---------- Profilbild ---------- */
.profilbild-zeile{display:flex;gap:var(--sp-3);align-items:center;margin-bottom:var(--sp-4)}
.avatar-gross{width:64px;height:64px;font-size:22px;border:0;cursor:pointer;padding:0;flex:none}
.avatar-gross:hover{filter:brightness(1.06)}
.profilbild-knoepfe{display:flex;gap:var(--sp-2);margin-top:6px}

.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)}

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

/* ---------- Toast ---------- */
#toast{
  position:fixed;bottom:24px;left:50%;z-index:90;
  display:flex;align-items:center;gap:var(--sp-2);
  background:var(--ink);color:var(--bg);
  padding:10px 12px 10px 18px;border-radius:999px;
  font-size:var(--fs-base);font-weight:500;box-shadow:var(--shadow-lift);
  transform:translate(-50%,16px);opacity:0;
  transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .28s ease;
  /* Der Balken selbst fängt keine Klicks – sein Knopf schon, siehe unten. */
  pointer-events:none;
}
#toast:not(:has(.toast-zurueck)){padding:10px 18px}
#toast.sichtbar{transform:translate(-50%,0);opacity:1}
/* „Rückgängig" muss anklickbar sein, sonst nützt der Knopf nichts */
#toast .toast-zurueck{pointer-events:auto}
@media (prefers-reduced-motion: reduce){
  #toast{transition:opacity .15s linear}
  #toast,#toast.sichtbar{transform:translate(-50%,0)}
}


/* ==== 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}
  .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}
  .clock{font-size:var(--fs-xl)}
  .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}
.kaltitel{font-size:var(--fs-lg);font-weight:500;margin-left:var(--sp-2)}
.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}
  .kaltitel{width:100%;order:-1;margin:0 0 var(--sp-1)}
}


/* ---------- 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)}
.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;
}

/* Benutzertabelle: Avatar zum Wiedererkennen, Felder zum Ändern daneben */
.kuerzelzelle{display:flex;align-items:center;gap:var(--sp-2)}
.kuerzelfeld{width:7ch;text-transform:uppercase;letter-spacing:.05em}
.namensfeld{text-transform:lowercase;font-family:var(--font-mono,var(--font))}

/* Formular „Neuen Benutzer anlegen" – zwei ruhige Zeilen statt drei Spalten
   mit Lücke, plus eine abgesetzte Fußzeile für Hinweis und Knopf. */
.neuerbenutzer{display:grid;gap:var(--sp-3)}
.nb-zeile{display:grid;gap:var(--sp-3);grid-template-columns:2fr 1.4fr}
.nb-zeile.drei{grid-template-columns:1fr 1fr 1fr}
.nb-fuss{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding-top:var(--sp-3);border-top:1px solid var(--line);
}
.nb-fuss p{margin:0;max-width:52ch}
/* Der Zusatz gehört auf dieselbe Zeile wie das Label – sonst stehen die
   Felder einer Zeile unterschiedlich hoch. */
.neuerbenutzer label small{display:inline;font-weight:400}
.neuerbenutzer label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nb-fuss .btn{white-space:nowrap}
@media (max-width:720px){
  .nb-zeile,.nb-zeile.drei{grid-template-columns:1fr}
  .nb-fuss{flex-direction:column;align-items:stretch}
}


/* ==== 31-profilmenue.css ==== */
/* ---------- Profilmenü ---------- */
.userbtn{
  display:inline-flex;align-items:center;gap:6px;height:var(--h-ctl);padding:0 8px 0 10px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--font);font-size:var(--fs-base);color:var(--ink);max-width:200px;
}
.userbtn:hover{background:var(--card-2)}
.userbtn .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.userbtn svg{width:14px;height:14px;opacity:.6;flex:none}
#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}


/* ==== 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)}

/* 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}


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

@media(max-width:860px){
  .laufwas{display:none}
  .projektkarte .task-foot{gap:var(--sp-2)}
}

.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);
}

/* ---------- Medien am Beitrag ---------- */
.medienliste{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp-2)}
.medienzeile{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:8px var(--sp-2);border:1px solid var(--line-soft);
  border-radius:var(--r);background:var(--card-2);
}
.medienzeile .t{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.medienzeile .aktionen{display:flex;gap:4px;flex:none}
.medienbild{
  flex:none;width:100px;height:100px;border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--line);background:var(--card);
  display:grid;place-items:center;
}
.medienbild img{width:100%;height:100%;object-fit:cover;display:block}
.mediensymbol{font-size:30px;line-height:1}
/* Play-Zeichen über dem gegriffenen Vorschaubild, damit klar bleibt: Video */
.medienplay{
  position:absolute;width:28px;height:28px;border-radius:999px;
  background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;
  font-size:11px;pointer-events:none;
}
/* Knöpfe oben, Linkfeld darunter – in einer Reihe wurde das Feld zu schmal
   und der Platzhalter abgeschnitten. */
.medienleiste{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-2)}
.medienknoepfe{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.medienlink{display:flex;gap:var(--sp-2);align-items:center}
.medienlink input{flex:1;min-width:0}
.medienlink button{flex:none}

/* ---------- Beim Kunden: Stand und Sende-Knopf ---------- */
.vorlagekasten{
  display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--line);border-left:4px solid var(--line);border-radius:var(--r);
  background:var(--card-2);
}
.vorlagekasten > .grow{display:flex;flex-direction:column;line-height:1.35;min-width:200px}
.vorlagekasten.liegt{border-left-color:var(--c-blau)}
.vorlagekasten.freigegeben{border-left-color:var(--c-gruen)}
.vorlagekasten.aenderung{border-left-color:var(--c-rot)}

/* 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);
}

.anhangwahl{
  padding:var(--sp-3);margin-bottom:var(--sp-2);
  border:1px dashed var(--brand-line);border-radius:var(--r);background:var(--brand-soft);
}
.anhangwahl button{margin:2px 4px 2px 0}

/* ---------- Große Ansicht im Intranet ---------- */
#medienlupe{
  position:fixed;inset:0;z-index:80;background:rgba(10,8,6,.92);
  display:grid;place-items:center;padding:var(--sp-6);
}
#medienlupe[hidden]{display:none}
#medienlupe > .iconbtn{position:fixed;top:16px;right:16px;
  background:rgba(255,255,255,.14);color:#fff;border-color:transparent}
#medienlupe > .iconbtn:hover{background:rgba(255,255,255,.26);color:#fff}
.lupeflaeche{
  width:min(1100px,100%);max-height:86vh;display:grid;place-items:center;
  aspect-ratio:var(--seiten, 16 / 9);
}
.lupeflaeche[data-format="hoch"]{width:min(420px,100%)}
.lupeflaeche[data-format="quadrat"]{width:min(680px,100%)}
.lupeflaeche[data-format="unbekannt"]{aspect-ratio:auto}
.lupeflaeche video,.lupeflaeche img{
  max-width:100%;max-height:86vh;width:100%;height:100%;
  object-fit:contain;border-radius:var(--r-sm);background:#000;display:block}
.lupeflaeche .rahmen{position:relative;width:100%;aspect-ratio:16/9}
.lupeflaeche iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  border-radius:var(--r-sm);background:#000}
.lupeflaeche p{color:var(--card);text-align:center}

/* Vorschau in der Medienzeile ist jetzt ein Knopf */
button.medienbild{position:relative;padding:0;cursor:pointer}
button.medienbild .lupezeichen{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(0,0,0,.45);color:#fff;opacity:0;transition:opacity .14s}
button.medienbild:hover .lupezeichen{opacity:1}
button.medienbild .lupezeichen svg{width:18px;height:18px}

/* ==== 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)}
.modal-hinter{position:absolute;inset:0;background:rgba(20,17,14,.45)}
.modal-karte{
  position:relative;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);animation:ddauf .14s ease-out;
}
.modal-karte h2{font-size:var(--fs-lg);margin:0 0 var(--sp-2)}
.modal-karte p{margin:0 0 var(--sp-3);font-size:var(--fs-base)}
.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}


/* ==== 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 auf eine neuere Version ---------- */
#neueVersion{
  position:fixed;left:50%;bottom:var(--sp-4);transform:translateX(-50%);z-index:250;
  display:flex;align-items:center;gap:var(--sp-3);
  padding:10px 10px 10px var(--sp-4);border-radius:999px;
  background:var(--ink);color:var(--bg);font-size:var(--fs-base);
  box-shadow:var(--shadow-lift);max-width:calc(100vw - 2 * var(--sp-4));
}
#neueVersion .btn{height:30px;padding:0 14px;font-size:var(--fs-sm)}

/* Rückgängig-Knopf im Hinweisbalken */
.toast-zurueck{
  margin-left:var(--sp-3);padding:3px 10px;border:0;border-radius:999px;
  background:var(--brand);color:var(--on-brand);
  font-family:var(--font);font-size:var(--fs-sm);font-weight:600;
}
.toast-zurueck:hover{filter:brightness(1.08)}

/* ---------- 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 ==== */
/* ---------- Einfügemarke beim Ziehen ---------- */
/* Steht immer am Fuß der Spalte, ist aber nur beim Ziehen zu sehen –
   bei vorhandenen Karten also automatisch darunter. */
.einfuegemarke{height:0;margin:0;border-radius:var(--r);transition:height .12s ease-out}
.col-body.over .einfuegemarke{
  height:52px;margin-top:var(--sp-1);
  border:2px dashed var(--brand);background:var(--brand-soft);
}
/* Leere Spalte: die Marke füllt den Platz, damit man dort überhaupt zielen kann */
.col-body:not(:has(.task, .beitragkarte)){min-height:88px}
.col-body:not(:has(.task, .beitragkarte)) .einfuegemarke{
  height:64px;margin-top:0;border:1px dashed var(--line)}
.col-body:not(:has(.task, .beitragkarte)).over .einfuegemarke{
  border:2px dashed var(--brand);background:var(--brand-soft)}
@media (prefers-reduced-motion:reduce){ .einfuegemarke{transition:none} }

/* ---------- 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)}
#wahlLeiste{
  position:fixed;left:50%;bottom:var(--sp-4);transform:translateX(-50%);z-index:210;
  display:flex;align-items:center;gap:var(--sp-2);
  padding:8px 8px 8px var(--sp-4);border-radius:999px;
  background:var(--ink);color:var(--bg);font-size:var(--fs-base);
  box-shadow:var(--shadow-lift);max-width:calc(100vw - 2 * var(--sp-4));flex-wrap:wrap}
#wahlLeiste .grow{flex:1;min-width:var(--sp-3)}
#wahlLeiste .ghost{background:transparent;border-color:rgba(255,255,255,.25);color:var(--bg)}
#wahlLeiste .ghost:hover{background:rgba(255,255,255,.12)}
#wahlLeiste .iconbtn{background:none;border-color:transparent;color:var(--bg)}
#wahlLeiste .iconbtn:hover{background:rgba(255,255,255,.12)}
.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,
:root .clock{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);
}
: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(--line);
}
:root .task.t-rand-grau::before  {background:var(--c-grau-l)}
:root .task.t-rand-gruen::before {background:var(--c-gruen)}
:root .task.t-rand-blau::before  {background:var(--c-blau)}
:root .task.t-rand-orange::before{background:var(--c-orange)}
:root .task.t-rand-lila::before  {background:var(--c-lila)}
:root .task.t-rand-gold::before  {background:var(--c-gold)}
:root .task.t-rand-rot::before   {background:var(--c-rot)}
:root .task.t-rand-braun::before {background:var(--c-braun)}
:root .task.t-rand-beere::before {background:var(--c-beere)}
:root .task.t-rand-neutral::before,
:root .task.t-rand-leer::before  {background: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}
  .userbtn .name{display:none}
  .userbtn{padding:0 6px;min-width:40px;justify-content:center}
  #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, .page-head > .splitbtn{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%}
@keyframes kiPuls{50%{opacity:.45}}
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)}

/* 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:2px solid var(--brand);outline-offset:-1px}
.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} }

/* ==== 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:swap;
  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:swap;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:16px; --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,.clock,.nums.gross,#uhrLauf,.zeit-mono{
  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:46px;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:22px;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}}
@media (max-width:1100px){ .tc-uhr{display:none} }
:root .userbtn{border-radius:999px;background:var(--card);box-shadow:var(--shadow);border-color:transparent;height:40px}
: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 #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:42px;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:16px;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)}
:root .clock{font-size:clamp(34px,4vw,54px);font-weight:600;letter-spacing:-.05em;
  background:var(--card);padding:6px 22px;border-radius:26px;box-shadow:var(--shadow)}

/* ================= 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(--ink-3)}

/* Etiketten und Pillen etwas runder */
:root .tag{border-radius:999px}
:root .toast,: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}
  .zs-band-spur{margin-top:16px}
  .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}
.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;transition:box-shadow .12s}
.kd-spalte.ueber{box-shadow:inset 0 0 0 2px var(--brand)}
.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-bkarte.zieht{opacity:.45}
.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:16px}
.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}
}