/* ══════════════════════════════════════════════════════
   Basis (Design-Tokens, Layout, Widgets)
   ══════════════════════════════════════════════════════ */

  /* ─── DESIGN TOKENS (Variante 1a „Hell & Clean") ─── */
  :root{
    --brand:#0057FF;      --brand-dark:#0033CC;   --tint:#EAF0FF;
    --ink:#0B1220;        --navy:#051633;
    --muted:#5A6474;      --faint:#9AA4B2;        --disabled:#C6CFDC;
    --bg:#F5F6F8;         --row:#F8F9FB;          --chip:#F0F2F6;
    --border:#E7EAF0;     --border-inner:#EEF1F5; --border-hover:#CDD8F5;
    --row-hover:#F0F3F8;  --success:#0BA05F;
    --accent:#FF5B4A;     --hero-ink:#E2F9FF;   /* Brand-Akzente von bluetheweb.de */
    --radius-card:16px;   --radius-row:10px;      --radius-stat:14px;
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'Archivo',system-ui,sans-serif;
    background:var(--bg);color:var(--ink);line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--brand)}
  a:hover{color:var(--brand-dark)}

  /* ─── MODE VISIBILITY ─── */
  /* Nur ausblenden — sichtbare Elemente behalten ihr eigenes display (flex/block/inline). */
  body.mode-mediameans  [data-when="bluetheweb"]{display:none}
  body.mode-bluetheweb  [data-when="mediameans"]{display:none}

  /* ─── LAYOUT ─── */
  .shell{width:100%;max-width:100%;margin:0;padding:0}

  /* ─── TOPBAR ─── */
  /* Perf: kein backdrop-filter — der Hintergrund ist ohnehin deckend, der
     Blur kostete beim Scrollen nur GPU (sticky = re-blur jede Frame). */
  .topbar-wrap{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
  .topbar{display:flex;align-items:center;gap:18px;padding:16px 28px}
  .logo{display:flex;align-items:center;text-decoration:none}
  .logo img{height:19px;display:block;width:auto}
  .topbar-sep{width:1px;height:18px;background:var(--border);flex-shrink:0}
  .topbar-title{font-size:12.5px;color:var(--muted);font-weight:500}
  .segmented{margin-left:auto;display:flex;background:var(--chip);border-radius:999px;padding:3px;gap:2px}
  .seg-btn{font-family:inherit;font-size:12px;font-weight:700;padding:7px 18px;border-radius:999px;border:none;cursor:pointer;background:transparent;color:var(--muted);transition:background .15s,color .15s;letter-spacing:0.3px}
  .seg-btn.active{background:var(--coral);color:#fff}

  /* ─── GRID (Masonry) ───
     Karten stapeln sich vertikal dicht, statt in starren Reihen zu stehen.
     Vorher galt: eine Reihe ist so hoch wie ihre höchste Karte — neben einer
     langen Karte klaffte darum Leerraum, und eine kurze Karte liess sich
     nicht unter eine andere schieben, weil das schon die nächste Reihe war.

     Technik: sehr feines Zeilenraster (1px) und KEIN row-gap — sonst bekäme
     jede einzelne 1px-Zeile den Abstand. Der Abstand kommt stattdessen aus
     margin-bottom der Karte; wie viele Zeilen eine Karte belegt, rechnet
     app.js (packeMasonry) aus ihrer gemessenen Höhe.
     Bewusst OHNE grid-auto-flow:dense — die Platzierung bleibt so
     vorwärtsgerichtet und damit vorhersehbar fürs Ziehen. */
  .grid{
    padding:28px;display:grid;grid-template-columns:repeat(12,1fr);
    grid-auto-rows:1px;row-gap:0;column-gap:16px;align-items:start;
  }
  /* overflow-anchor:none ist Absicht: Das Scroll-Anchoring des Browsers
     verschiebt die Scroll-Position, sobald sich die Höhe von etwas oberhalb
     des Sichtfensters ändert. Genau das passiert hier laufend — beim
     Neupacken und erst recht beim Ziehen an der Unterkante einer Karte. Die
     Seite rutschte dabei unter dem Zeiger weg. Die Spannweiten rechnet
     ohnehin packeMasonry(), die Ausgleichsautomatik richtet hier nur
     Schaden an. */
  .grid > [data-widget],
  .grid > .hero,
  .grid > .links-card{margin-bottom:16px;overflow-anchor:none}
  .span-4{grid-column:span 4}
  .span-6{grid-column:span 6}
  .span-12{grid-column:span 12}

  /* ─── CARD ─── */
  .card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;transition:border-color .15s}
  .card:hover{border-color:var(--border-hover)}
  .card-head{display:flex;align-items:center;gap:9px;padding:16px 20px;border-bottom:1px solid var(--border-inner)}
  .card-head svg{width:16px;height:16px;flex-shrink:0}
  .card-title{font-size:13px;font-weight:700;color:var(--ink);flex:1}
  .card-kicker{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--faint)}
  .card-body{padding:14px 16px;display:flex;flex-direction:column;gap:6px}

  /* ─── DIE DREI STUFEN ───
     Vorher sahen alle vierzehn Karten identisch aus — „Standort" (einmal
     gelesen) wie „Anleitungen" (täglich gebraucht). Die Stufe kommt aus
     inc/widget-registry.php und steuert nur das Gewicht, nicht die Funktion.
     .stufe-nachschlagen ist bewusst leer: das ist die Standardkarte oben,
     der Bezugspunkt für die beiden anderen. */

  /* Nur Geometrie — die Farben stehen weiter unten im Theme-Abschnitt, sonst
     überschreibt der dortige .card-head-Block sie durch reine Quell-Reihenfolge. */

  /* arbeit — beim Tun gebraucht: luftiger, Akzentkante, Icon im Chip */
  .stufe-arbeit{position:relative}
  .stufe-arbeit .card-head{padding:19px 22px 17px}
  .stufe-arbeit .card-title{font-size:15px;font-weight:800;letter-spacing:-.2px}
  .stufe-arbeit .card-head > svg{width:15px;height:15px;box-sizing:content-box;padding:7px;border-radius:9px}
  .stufe-arbeit .card-body{padding:16px 20px 20px;gap:8px}

  /* fakten — einmal gelesen: kompakt und leise, meldet sich erst bei Hover */
  .stufe-fakten .card-head{padding:12px 18px}
  .stufe-fakten .card-title{font-size:12px}
  .stufe-fakten .card-head > svg{width:14px;height:14px}
  .stufe-fakten .card-body{padding:12px 14px}

  /* ─── HERO (Brand-Look bluetheweb.de: dunkles Indigo, Coral-Akzent, Pills) ─── */
  .hero{
    grid-column:span 12;position:relative;overflow:hidden;
    background:
      radial-gradient(ellipse 60% 80% at 85% 20%, rgba(90,60,220,.45), transparent 60%),
      radial-gradient(ellipse 50% 70% at 15% 90%, rgba(0,87,255,.28), transparent 65%),
      linear-gradient(135deg,#0A0D2E 0%,#141248 55%,#241A6B 100%);
    border:1px solid #1E1B5E;border-radius:var(--radius-card);padding:44px 48px;
    /* Seit dem Umbau zweistöckig: .hero-main (drei Spalten) + .hero-actions
       (Schnellaktionen als Fuß). Die drei Spalten selbst liegen in .hero-main. */
    display:flex;flex-direction:column;gap:26px;color:var(--hero-ink)}
  .hero-main{display:flex;align-items:center;justify-content:space-between;gap:32px;position:relative;z-index:2}
  .hero::before{ /* Glow-Sternchen wie auf bluetheweb.de */
    content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
    background-image:
      radial-gradient(circle 2px at 18% 30%, rgba(255,255,255,.5) 50%, transparent 51%),
      radial-gradient(circle 1.5px at 62% 18%, rgba(255,255,255,.35) 50%, transparent 51%),
      radial-gradient(circle 2px at 78% 68%, rgba(150,170,255,.45) 50%, transparent 51%),
      radial-gradient(circle 1.5px at 38% 80%, rgba(255,255,255,.3) 50%, transparent 51%),
      radial-gradient(circle 2.5px at 92% 42%, rgba(255,91,74,.5) 50%, transparent 51%),
      radial-gradient(circle 1.5px at 8% 60%, rgba(150,170,255,.4) 50%, transparent 51%)}
  .hero-slash{position:absolute;right:200px;top:50%;transform:translateY(-54%);font-size:420px;font-weight:900;color:rgba(255,255,255,.05);line-height:1;pointer-events:none;user-select:none}
  /* flex-basis 420px + min-width:0: der Textblock gibt nach, wenn Ankündigung
     und Core-Grafik daneben ihren festen Platz brauchen. */
  .hero-left{position:relative;flex:1 1 420px;min-width:0;max-width:620px}
  .hero-badge{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:5px 16px 5px 5px;margin-bottom:20px;background:rgba(10,13,46,.4)}
  .hb-label{background:var(--accent);color:#fff;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;border-radius:999px;padding:5px 12px}
  .hb-text{font-size:12.5px;font-weight:600;color:var(--hero-ink)}
  .hero h1{font-size:44px;font-weight:900;letter-spacing:-1.4px;line-height:1.04;color:var(--hero-ink)}
  .hero h1 span{color:var(--accent)}
  .hero-sub{font-size:14.5px;color:rgba(226,249,255,.72);max-width:460px;margin-top:14px;line-height:1.65}
  /* ─── SCHNELLAKTIONEN (Hero-Fuß) ───
     Ersetzt die früheren .hero-pills UND die eigenständige .quickbar unter
     dem Hero — die hatten „Team" und „Anleitungen" doppelt. Sechs Ziele an
     einer Stelle statt zehn auf fünf Ebenen. */
  .hero-tools{
    padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
    display:flex;flex-direction:column;gap:14px;position:relative;z-index:2}

  /* Suche: sieht aus wie ein Feld, ist aber ein Button — getippt wird im
     ⌘K-Overlay. Steht fest im Markup, nicht mehr von app.js eingefügt. */
  .hero-search{
    display:flex;align-items:center;gap:11px;width:100%;
    font:inherit;font-size:13.5px;text-align:left;cursor:pointer;
    padding:13px 18px;border-radius:12px;
    border:1px solid rgba(255,255,255,.2);background:rgba(10,13,46,.45);
    color:rgba(226,249,255,.62);
    transition:border-color .15s,background .15s,color .15s}
  .hero-search:hover{border-color:var(--accent);background:rgba(255,91,74,.1);color:var(--hero-ink)}
  .hero-search svg{width:17px;height:17px;flex-shrink:0;color:var(--accent)}
  .hero-search span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hero-search-kurz{display:none}
  @media (max-width:640px){
    .hero-search-lang{display:none}
    .hero-search-kurz{display:block}
  }
  .hero-search kbd{
    flex-shrink:0;font:inherit;font-size:10.5px;font-weight:700;
    padding:3px 8px;border-radius:6px;
    color:rgba(226,249,255,.72);background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.16)}

  .hero-actions{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px}
  .hero-action{
    display:flex;align-items:center;gap:10px;
    padding:11px 14px;border-radius:12px;
    border:1px solid rgba(255,255,255,.18);background:rgba(10,13,46,.38);
    color:var(--hero-ink);text-decoration:none;
    transition:border-color .15s,background .15s,transform .15s}
  .hero-action:hover{border-color:var(--accent);background:rgba(255,91,74,.13);color:var(--hero-ink);transform:translateY(-2px)}
  .hero-action svg{width:17px;height:17px;flex-shrink:0;color:var(--accent)}
  .hero-action span{display:flex;flex-direction:column;min-width:0}
  .hero-action strong{font-size:12.5px;font-weight:800;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hero-action em{font-size:10.5px;font-style:normal;color:rgba(226,249,255,.6);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* ─── ANKÜNDIGUNG (mittlere Hero-Spalte) ─── */
  /* Feste Breite, damit die Spalte auch ohne aktive Ankündigung steht und
     Überschrift und Grafik nicht hin- und herspringen. */
  /* Wächst zwischen 260 und 420 px mit dem Fenster — auf breiten Screens
     stand die 260er-Karte sonst verloren im leeren Raum. min-width sichert
     die Basisbreite, denn flex-basis allein darf schrumpfen. */
  .hero-note{flex:1 1 260px;min-width:260px;max-width:420px;align-self:stretch;display:flex;align-items:center;position:relative;z-index:2}
  .hero-note-card{
    --ank:var(--accent);
    width:100%;padding:15px 17px;border-radius:14px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.16);
    border-left:3px solid var(--ank);
    display:flex;flex-direction:column;gap:7px}
  .hero-note-card.ank-info{--ank:#5B8CFF}
  .hero-note-card.ank-success{--ank:#2ED18A}
  .hero-note-card.ank-warning{--ank:#FFB800}
  .hero-note-card.ank-danger{--ank:#FF5B4A}
  .hero-note-kicker{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:rgba(226,249,255,.6)}
  .hero-note-kicker::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ank);box-shadow:0 0 9px var(--ank)}
  /* Gekürzt statt umbrechend — der volle Text steht in archive.php. */
  .hero-note-title{font-size:13.5px;font-weight:800;line-height:1.3;color:#fff;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  .hero-note-text{margin:0;font-size:12.5px;line-height:1.5;color:rgba(226,249,255,.72);
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
  .hero-note-link{font-size:11.5px;font-weight:700;color:var(--hero-ink);text-decoration:none;display:inline-flex;align-items:center;gap:5px;opacity:.85;transition:opacity .15s,color .15s}
  .hero-note-link svg{width:12px;height:12px}
  .hero-note-link:hover{opacity:1;color:var(--accent)}

  /* Karte ist der Öffner fürs Ankündigungs-Overlay */
  .hero-note-card[role="button"]{cursor:pointer;transition:background .15s,border-color .15s}
  .hero-note-card[role="button"]:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.28)}
  .hero-note-card[role="button"]:hover .hero-note-link{opacity:1;color:var(--accent)}

  /* Ungelesen-Badge: nur opacity-Puls, keine Filter (Perf) */
  .hero-note-unread{
    display:inline-flex;align-items:center;
    background:var(--accent);color:#fff;
    font-size:9.5px;font-weight:800;letter-spacing:.5px;
    border-radius:999px;padding:2px 8px;margin-left:2px;
    animation:ankPulse 2.2s ease-in-out infinite}
  .hero-note-unread[hidden]{display:none}
  @keyframes ankPulse{0%,100%{opacity:1}50%{opacity:.55}}

  /* ─── ANKÜNDIGUNGS-OVERLAY ─── */
  .ank-dialog{
    margin:auto; /* der globale *{margin:0}-Reset überschreibt sonst das UA-Centering des <dialog> */
    width:min(560px,calc(100vw - 32px));
    max-height:min(72vh,640px);
    border:1px solid rgba(255,255,255,.18);
    border-radius:18px;
    padding:0;
    background:linear-gradient(160deg,#141248 0%,#0A0D2E 70%);
    color:var(--hero-ink);
    box-shadow:0 32px 90px rgba(0,0,0,.5);
    display:flex;flex-direction:column;
    /* <dialog> zentriert sich selbst über die UA-Styles (margin:auto) */
  }
  .ank-dialog:not([open]){display:none}
  .ank-dialog::backdrop{background:rgba(4,6,24,.72)}
  .ank-dialog-head{position:relative;padding:22px 26px 14px;border-bottom:1px solid rgba(255,255,255,.12)}
  .ank-dialog-kicker{font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:rgba(226,249,255,.55)}
  .ank-dialog-title{font-size:21px;font-weight:900;letter-spacing:-.4px;color:#fff;margin-top:3px}
  .ank-dialog-close{
    position:absolute;right:16px;top:16px;
    width:32px;height:32px;border-radius:9px;border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.06);color:var(--hero-ink);cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
  .ank-dialog-close:hover{background:rgba(255,91,74,.16);border-color:var(--accent)}
  .ank-dialog-close svg{width:14px;height:14px}
  .ank-dialog-scroll{overflow-y:auto;padding:18px 26px;display:flex;flex-direction:column;gap:14px}
  .ank-entry{
    --ank:#5B8CFF;
    border:1px solid rgba(255,255,255,.12);
    border-left:3px solid var(--ank);
    border-radius:12px;padding:14px 16px;background:rgba(255,255,255,.05)}
  .ank-entry.ank-info{--ank:#5B8CFF}
  .ank-entry.ank-success{--ank:#2ED18A}
  .ank-entry.ank-warning{--ank:#FFB800}
  .ank-entry.ank-danger{--ank:#FF5B4A}
  .ank-entry-meta{display:flex;align-items:center;gap:8px;margin-bottom:7px}
  .ank-entry-badge{
    font-size:9.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
    color:var(--ank);border:1px solid var(--ank);border-radius:999px;padding:2px 9px}
  .ank-entry-new{
    background:var(--accent);color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.5px;
    text-transform:uppercase;border-radius:999px;padding:2px 8px}
  .ank-entry-new[hidden]{display:none}
  .ank-entry-date{margin-left:auto;font-size:11px;color:rgba(226,249,255,.45)}
  .ank-entry-title{font-size:14.5px;font-weight:800;color:#fff;line-height:1.35}
  .ank-entry-text{margin-top:6px;font-size:13px;line-height:1.6;color:rgba(226,249,255,.75);white-space:pre-line}
  .ank-dialog-section{
    font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
    color:rgba(226,249,255,.4);margin-top:6px}
  .ank-entry--archived{opacity:.6;padding:10px 16px}
  .ank-entry--archived .ank-entry-title{font-size:13px}
  .ank-dialog-foot{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 26px;border-top:1px solid rgba(255,255,255,.12)}
  .ank-dialog-foot a{
    display:inline-flex;align-items:center;gap:6px;
    font-size:12.5px;font-weight:700;color:var(--hero-ink);text-decoration:none;transition:color .15s}
  .ank-dialog-foot a:hover{color:var(--accent)}
  .ank-dialog-foot a svg{width:13px;height:13px}
  .ank-dialog-foot span{font-size:11px;color:rgba(226,249,255,.4)}
  .ank-dialog-foot kbd{
    font-family:inherit;font-size:10px;border:1px solid rgba(255,255,255,.2);
    border-radius:4px;padding:1px 5px;background:rgba(255,255,255,.06)}

  /* ─── CORE-GRAFIK (Nachbau der m37_mm_core-Grafik von mediameans.de) ─── */
  /* Drei Kreise im Kleeblatt: Mittelpunkte liegen je einen Radius vom
     Container-Mittelpunkt entfernt (-90°/30°/150°), jeder Kreisrand geht
     damit exakt durch die Mitte, wo das Center-Element sitzt.
     Alles hängt an --d (Kreisdurchmesser); für kleinere Fenster wird nur
     --d überschrieben, die Geometrie rechnet sich neu.
       Breite  = d * (1 + cos30) * 2 = d * 1.866
       Höhe    = 3.5 r               = d * 1.75
       Anker   = 2 r vom oberen Rand = d
       Versatz = rechts/links (±d*0.433, +d/4), oben (0, -d/2) */
  .hero-stats{display:flex;flex-direction:column;align-items:center;gap:12px;flex-shrink:0;position:relative}
  .core-graph{--d:132px;position:relative;width:calc(var(--d) * 1.866);height:calc(var(--d) * 1.75)}
  .core-item{
    position:absolute;left:50%;top:var(--d);width:var(--d);height:var(--d);
    margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
    border-radius:50%;border:2px solid rgba(255,255,255,.32);
    display:flex;align-items:center;justify-content:center;z-index:1}
  .core-top{transform:translate(0, calc(var(--d) / -2))}
  .core-right{transform:translate(calc(var(--d) * 0.433), calc(var(--d) / 4))}
  .core-left{transform:translate(calc(var(--d) * -0.433), calc(var(--d) / 4))}
  /* Zwei Leuchtebenen wie im Original: kleiner harter Kern, weiter weicher Schein. */
  .core-item::before,.core-item::after{
    content:'';position:absolute;left:50%;top:50%;border-radius:50%;
    background:var(--c);transform:translate(-50%,-50%);z-index:-1}
  .core-item::before{width:52%;height:52%;filter:blur(28px);opacity:.75}
  .core-item::after{width:100%;height:100%;filter:blur(10px);opacity:.26}
  .core-ring{position:absolute;left:50%;top:50%;width:100%;height:100%;border-radius:50%;
    border:2px solid rgba(255,255,255,.45);transform:translate(-50%,-50%) scale(1);opacity:0;pointer-events:none}
  .core-item img{position:relative;z-index:2;display:block;height:auto;max-width:none}
  /* Breiten so gewählt, dass alle drei Wortmarken ähnlich viel Luft zum
     Kreisrand haben (die Logos haben sehr verschiedene Seitenverhältnisse). */
  .core-top img{width:calc(var(--d) * 0.62)}   /* BLUE THE WEB */
  .core-left img{width:calc(var(--d) * 0.63)}  /* mediaMEANS */
  .core-right img{width:calc(var(--d) * 0.52)} /* Emplory */
  .core-center{
    position:absolute;left:50%;top:var(--d);z-index:4;pointer-events:none;
    width:calc(var(--d) * 0.44);height:calc(var(--d) * 0.44);
    margin:calc(var(--d) * -0.22) 0 0 calc(var(--d) * -0.22);
    border-radius:50%;border:2px solid rgba(255,255,255,.8)}
  .core-center::after{ /* weicher weißer Halo wie im Original */
    content:'';position:absolute;left:50%;top:50%;width:130%;height:130%;z-index:-1;
    transform:translate(-50%,-50%);border-radius:50%;filter:blur(12px);
    background:radial-gradient(circle at center,rgba(255,255,255,.85) 0%,rgba(255,255,255,.4) 60%,transparent 100%)}
  .core-center img{display:block;width:100%;height:100%;border-radius:50%}
  .core-caption{font-size:11.5px;font-weight:700;color:rgba(226,249,255,.7);text-align:center;letter-spacing:.2px}
  .core-caption-sub{font-weight:500;color:rgba(226,249,255,.5);margin-top:-8px}

  @media (prefers-reduced-motion: no-preference){
    .core-item{transition:transform .4s}
    .core-item::before{transition:width .4s,height .4s,filter .4s,opacity .4s}
    .core-item img{transition:transform .4s}
    .core-ring{transition:opacity .4s,transform .4s}
  }
  @media (hover:hover) and (pointer:fine){
    .core-item:hover{z-index:3}
    .core-top:hover{transform:translate(0, calc(var(--d) / -2)) scale(1.12)}
    .core-right:hover{transform:translate(calc(var(--d) * 0.433), calc(var(--d) / 4)) scale(1.12)}
    .core-left:hover{transform:translate(calc(var(--d) * -0.433), calc(var(--d) / 4)) scale(1.12)}
    .core-item:hover::before{width:88%;height:88%;filter:blur(20px);opacity:.9}
    .core-item:hover .core-ring{opacity:1;transform:translate(-50%,-50%) scale(1.22)}
    .core-item:hover img{transform:scale(.9)}
  }

  /* ─── SCROLL-REVEAL ─── */
  @media (prefers-reduced-motion: no-preference){
    .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .6s cubic-bezier(.16,1,.3,1)}
    .reveal.in{opacity:1;transform:none}
    .hero{animation:heroIn .7s cubic-bezier(.16,1,.3,1)}
    @keyframes heroIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  }

  /* ─── LIST ROW (Tools) ─── */
  .row{display:flex;align-items:flex-start;gap:12px;padding:18px 22px;margin-bottom:10px;border-radius:var(--radius-row);background:var(--row);transition:background .15s}
  .row:hover{background:var(--row-hover)}
  a.row{text-decoration:none;color:inherit}
  .row-ico{width:34px;height:34px;border-radius:9px;background:var(--tint);display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .row-ico svg{width:16px;height:16px}
  .row-title{font-size:13px;font-weight:600;color:var(--ink)}
  .row-sub{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.5}
  .row-access{font-size:11.5px;color:var(--faint);margin-top:5px;line-height:1.45}
  .row-access strong{color:var(--brand);font-weight:700}

  /* ─── NOTE BOX ─── */
  .note{margin-top:4px;padding:11px 14px;border-radius:var(--radius-row);background:var(--tint);font-size:12px;color:var(--ink);line-height:1.55}
  .note strong{color:var(--brand)}

  /* ─── LERNEN ─── */
  .learn-body{padding:18px 20px;display:flex;flex-direction:column;gap:0}
  .learn-eyebrow{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--brand);margin-bottom:12px}
  .step{display:flex;gap:14px}
  .step-spine{display:flex;flex-direction:column;align-items:center}
  .step-dot{width:26px;height:26px;border-radius:50%;background:var(--tint);color:var(--brand);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .step-line{width:2px;flex:1;background:var(--border-inner);margin:4px 0}
  .step-body{padding-bottom:16px}
  .step-title{font-size:13.5px;font-weight:700;color:var(--ink)}
  .step-desc{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.5}
  .res-list{display:flex;flex-direction:column;gap:6px;margin-top:2px}
  .res{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-row);background:var(--row);text-decoration:none;transition:background .15s}
  .res:hover{background:var(--row-hover)}
  .res svg{width:15px;height:15px;flex-shrink:0;color:var(--brand)}
  .res-title{font-size:12.5px;font-weight:600;color:var(--ink)}
  .res-sub{font-size:11px;color:var(--faint);margin-left:auto;white-space:nowrap}

  /* ─── KONTAKTE ─── */
  .contact-grid{padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .contact{background:var(--row);border-radius:12px;padding:16px;display:flex;gap:13px;align-items:center}
  .avatar{width:40px;height:40px;border-radius:50%;color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .contact-role{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
  .contact-name{font-size:13.5px;font-weight:700;color:var(--ink);margin:2px 0}
  .contact-mail{font-size:11.5px;color:var(--muted);text-decoration:none}
  .contact-mail:hover{color:var(--brand)}
  .contact-meta{font-size:11.5px;color:var(--muted);margin-top:1px}

  /* ─── TELEFONLISTE / DURCHWAHLEN ─── */
  .dir{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;padding:16px 20px}
  /* widgets/team.php schreibt class="dir-grid" — diese Regel fehlte komplett,
     darum lagen die Abteilungen als volle Kartenbreite untereinander und die
     Durchwahl klebte meterweit rechts am Rand.
     auto-fit statt auto-fill: auto-fill liess bei wenigen Abteilungen
     (z. B. 3) auf einer sehr breiten Karte leere Spuren stehen — die
     Spalten blieben schmal (min. 260px) und rechts blieb ein grosser
     leerer Bereich. auto-fit kollabiert die leeren Spuren, die
     vorhandenen Spalten dehnen sich stattdessen auf die volle Breite. */
  /* align-items:start statt Grid-Standard "stretch": sonst dehnt sich jede
     Spalte auf die Höhe der längsten Abteilung — bei z. B. 4 vs. 8 Personen
     bleibt dann unten viel Leerraum in der kürzeren Spalte stehen. Mit
     "start" endet jede Box bei ihrer eigenen letzten Person. */
  .dir-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;align-items:start}
  .dir-col{border:1px solid var(--border-inner);border-radius:12px;overflow:hidden}
  .dir-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--tint)}
  .dir-head span:first-child{font-size:12.5px;font-weight:800;color:var(--brand)}
  .dir-head .dw{font-size:10px;font-weight:700;letter-spacing:1px;color:var(--faint)}
  .dir-row{display:grid;grid-template-columns:var(--namew,4rem) 1fr auto;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid var(--border-inner)}
  .dir-name{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
  .dir-role{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--brand);white-space:nowrap}
  .dir-dw{font-size:13px;font-weight:700;color:var(--muted);text-align:right}

  /* ─── FAQ ─── */
  .faq details{border-radius:var(--radius-row);background:var(--row);overflow:hidden}
  .faq summary{padding:12px 14px;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:'+';color:var(--faint);font-size:16px;font-weight:400;line-height:1}
  .faq details[open] summary::after{content:'–'}
  .faq-answer{padding:0 14px 12px;font-size:12.5px;color:var(--muted);line-height:1.6}
  .faq-answer strong{color:var(--ink)}

  /* ─── ANLEITUNGEN (Schritt-für-Schritt) ─── */
  .guide ol{margin:2px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:9px}
  .guide li{font-size:12.5px;color:var(--muted);line-height:1.55}
  .guide li strong{color:var(--ink)}
  .guide code{background:var(--chip);padding:1px 6px;border-radius:5px;font-size:11.5px;color:var(--ink);white-space:nowrap}
  .guide .tip{margin-top:12px;padding:10px 14px;border-radius:var(--radius-row);background:var(--tint);font-size:12px;color:var(--ink);line-height:1.55}
  .guide .tip strong{color:var(--brand)}
  .guide-shot{display:block;margin:8px 0 2px;max-width:520px;width:100%;border:1px solid var(--border);border-radius:8px;cursor:zoom-in}
  .guide ul{margin:2px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
  .guide h4{margin:14px 0 4px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--brand)}
  .guide h4:first-child{margin-top:2px}
  .guide .warn{margin-top:12px;padding:10px 14px;border-radius:var(--radius-row);background:#FFECEC;border:1px solid #F4C4C4;font-size:12px;color:#0B1220;line-height:1.55}
  .guide .warn strong{color:#B4231A}

  /* ─── DOKUMENTE / AUFGABEN ─── */
  .doc{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-row);background:var(--row);text-decoration:none;color:inherit;transition:background .15s}
  .doc:hover{background:var(--row-hover)}
  .doc-ico{width:34px;height:34px;border-radius:9px;background:var(--tint);display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .doc-ico svg{width:16px;height:16px}
  .doc-title{font-size:13px;font-weight:600;color:var(--ink)}
  .doc-sub{font-size:11.5px;color:var(--faint);margin-top:2px}
  .doc-badge{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);background:var(--chip);padding:3px 8px;border-radius:6px;flex-shrink:0;white-space:nowrap}

  /* ─── STANDORT ─── */
  .firmen{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
  .firma{flex:1;min-width:150px;background:#fff;border:1px solid var(--border-inner);border-radius:var(--radius-row);padding:14px 18px;display:flex;align-items:center;justify-content:center;min-height:64px}
  .firma img{height:32px;max-width:100%;object-fit:contain;display:block}
  .standort-inner{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start}
  .map-wrap{border-radius:var(--radius-row);overflow:hidden;border:1px solid var(--border)}
  .map-wrap iframe{display:block;width:100%;height:190px;border:none}
  .addr{display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted);line-height:1.6}
  .addr svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--brand)}
  .addr strong{color:var(--ink)}
  .addr a{color:var(--brand);text-decoration:none;font-weight:600}
  @media (max-width:900px){ .standort-inner{grid-template-columns:1fr} }

  /* Platzhalter-Links (URL folgt) */
  .is-todo{opacity:.5;cursor:default}
  .is-todo .doc-badge{background:var(--chip);color:var(--faint)}

  /* ─── SCHNELLLINKS ─── */
  .links-card{grid-column:span 12;background:#fff;border:1px solid var(--border);border-radius:var(--radius-card);padding:16px 20px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;transition:border-color .15s}
  .links-label{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--faint);margin-right:10px}
  .pill{font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:none;padding:8px 16px;border-radius:999px;background:var(--chip);transition:background .15s,color .15s}
  .pill:hover{background:var(--tint);color:var(--brand)}

  /* ─── INFO-LISTE (Büro-Alltag) ─── */
  .info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:8px}
  .info{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:var(--radius-row);background:var(--row)}
  .info-ico{width:34px;height:34px;border-radius:9px;background:var(--tint);display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .info-ico svg{width:16px;height:16px}
  .info-title{font-size:13px;font-weight:600;color:var(--ink)}
  .info-sub{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.5}
  .info-sub strong{color:var(--ink)}

  /* ─── TABELLE (Dienste) ─── */
  .table-scroll{overflow-x:auto}
  .dtable{width:100%;border-collapse:collapse;font-size:12.5px}
  .dtable th{text-align:left;font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);padding:9px 12px;border-bottom:1px solid var(--border-inner);white-space:nowrap}
  .dtable td{padding:9px 12px;border-bottom:1px solid var(--border-inner);color:var(--ink);vertical-align:top}
  .dtable tbody tr:last-child td{border-bottom:none}
  .dtable td.muted{color:var(--muted)}
  .dtable tbody tr:hover{background:var(--row)}
  .dtable .who{font-weight:600}
  .dienste-sub{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--brand);padding:16px 20px 2px}
  .dienste-info{font-size:12px;color:var(--muted);padding:2px 20px 10px;line-height:1.55}
  .dienste-lead{padding:14px 20px 4px}
  .dienste-foot{padding:12px 20px 16px;font-size:12px;color:var(--muted)}

  /* ─── HEUTE-ZEILE (Azubi-Dienste) ───
     Die eine Information, die morgens zählt. Steht vor den Tabellen und
     nicht darin, damit man sie nicht erst suchen muss. */
  .heute{padding:16px 20px 14px;background:var(--tint);border-bottom:1px solid var(--border-inner)}
  .heute-kopf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:9px}
  .heute-wann{font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--brand)}
  .heute-frei{font-size:10px;font-weight:700;letter-spacing:.4px;color:var(--muted)}
  .heute-dienst{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .heute-label{font-size:12px;color:var(--muted)}
  .heute-wer{
    display:inline-flex;align-items:center;
    font-size:16px;font-weight:800;letter-spacing:-.2px;line-height:1.2;
    padding:3px 12px;border-radius:999px;
    background:rgba(255,91,74,.12);border:1px solid rgba(255,91,74,.28);
    color:var(--coral,#c9402f);
  }
  .heute-vertretung{font-size:11.5px;color:var(--muted)}
  .heute-aufgaben{list-style:none;margin:11px 0 0;padding:0;display:flex;flex-direction:column;gap:1px}
  .heute-aufgaben li{
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding:6px 10px;border-radius:var(--radius-row);background:rgba(255,255,255,.6);
  }
  .heute-aufgabe{font-size:12.5px;color:var(--ink)}
  .heute-aufgabe-wer{font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap}
  .heute-regel{margin-top:11px;font-size:11px;color:var(--muted);line-height:1.5}
  .heute--frei .heute-wer{background:rgba(255,255,255,.06);border-color:var(--border);color:var(--muted)}
  /* Heutige Spalte im aufgeklappten Wochenplan mitmarkieren */
  .dtable .ist-heute{background:var(--tint)}
  .dtable th.ist-heute{color:var(--brand)}

  /* Aufklappbare Vollpläne — vorher stand beides immer offen und machte die
     Karte über tausend Pixel hoch. */
  .dienste-mehr{border-top:1px solid var(--border-inner)}
  .dienste-mehr > summary{
    padding:12px 20px;cursor:pointer;list-style:none;
    font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--brand);
    display:flex;align-items:center;gap:8px;
  }
  .dienste-mehr > summary::-webkit-details-marker{display:none}
  .dienste-mehr > summary::after{
    content:'';width:7px;height:7px;margin-left:auto;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg);transition:transform .15s;
  }
  .dienste-mehr[open] > summary::after{transform:rotate(-135deg)}
  .dienste-mehr > summary:hover{background:var(--row)}
  .dienste-anzahl{
    font-size:10px;font-weight:800;letter-spacing:0;
    padding:2px 7px;border-radius:999px;background:var(--tint);color:var(--brand);
  }
  .card-body--flush{padding:0;display:block;gap:0}

  /* ─── MEINE PROJEKTE ───
     Jede Person pflegt die Liste selbst im Frontend; gespeichert wird pro
     Benutzer über state.php ('projekte'). Die Karte steht per Registry
     (fest => true) immer oben. */
  .proj-body{gap:0}
  .proj-liste{display:flex;flex-direction:column;gap:6px}
  .proj{
    display:flex;align-items:flex-start;gap:12px;
    padding:11px 13px;border-radius:var(--radius-row);background:var(--row);
    transition:background .15s;
  }
  .proj:hover{background:var(--chip)}
  .proj-haupt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .proj-name{font-size:13.5px;font-weight:700;color:var(--ink);text-decoration:none;word-break:break-word}
  a.proj-name:hover{color:var(--brand);text-decoration:underline}
  .proj-rolle{font-size:11.5px;color:var(--brand);font-weight:600}
  .proj-notiz{font-size:12px;color:var(--muted);line-height:1.5}
  .proj-status{
    flex-shrink:0;margin-top:2px;
    font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
    padding:3px 8px;border-radius:999px;white-space:nowrap;
  }
  .proj-status--aktiv{background:var(--tint);color:var(--brand)}
  .proj-status--pause{background:var(--chip);color:var(--muted)}
  .proj-status--fertig{background:rgba(46,160,90,.12);color:#2EA05A}
  .proj-aktionen{display:flex;gap:4px;flex-shrink:0}
  .proj-btn{
    width:26px;height:26px;border-radius:7px;border:1px solid transparent;
    background:transparent;color:var(--faint);cursor:pointer;padding:0;
    display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s;
  }
  .proj-btn svg{width:14px;height:14px}
  .proj-btn:hover{color:var(--brand);border-color:var(--border)}
  .proj-leer{font-size:12.5px;color:var(--muted);line-height:1.6;padding:6px 2px}
  .proj-neu{
    margin-top:10px;align-self:flex-start;
    display:inline-flex;align-items:center;gap:7px;
    font-family:inherit;font-size:12px;font-weight:700;
    padding:8px 14px;border-radius:999px;
    border:1px dashed var(--border-hover);background:transparent;color:var(--brand);cursor:pointer;
    transition:background .15s,border-color .15s;
  }
  .proj-neu svg{width:14px;height:14px}
  .proj-neu:hover{background:var(--tint);border-color:var(--brand)}
  /* Ohne diese Zeile bleibt der Knopf sichtbar, obwohl app.js `hidden`
     setzt: das Attribut wirkt nur über display:none aus dem Browser-
     Stylesheet, und ein eigenes display: gewinnt dagegen. Gilt genauso
     für das Formular darunter. */
  .proj-neu[hidden]{display:none}
  .proj-form{margin-top:12px;padding:14px;border-radius:var(--radius-row);background:var(--row);border:1px solid var(--border)}
  .proj-form[hidden]{display:none}
  .proj-form-zeile{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
  .proj-feld{flex:1 1 150px;display:flex;flex-direction:column;gap:4px;min-width:0}
  .proj-feld--breit{flex:2 1 240px}
  .proj-feld > span{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--faint)}
  .proj-feld input,.proj-feld select{
    font-family:inherit;font-size:12.5px;color:var(--ink);
    padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:#fff;
    min-width:0;width:100%;
  }
  .proj-feld input:focus,.proj-feld select:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
  .proj-form-fuss{display:flex;gap:8px}
  .proj-speichern,.proj-abbrechen{
    font-family:inherit;font-size:12px;font-weight:700;padding:8px 16px;
    border-radius:8px;cursor:pointer;border:1px solid transparent;
  }
  .proj-speichern{background:var(--brand);color:#fff}
  .proj-speichern:hover{background:var(--brand-dark)}
  .proj-abbrechen{background:transparent;color:var(--muted);border-color:var(--border)}
  .proj-abbrechen:hover{color:var(--ink);border-color:var(--border-hover)}

  /* ─── LAYOUT-ANPASSUNG (Bearbeiten-Modus) ─── */
  .edit-toggle{font-family:inherit;font-size:12px;font-weight:700;padding:7px 16px;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--text-faint);cursor:pointer;transition:background .15s,color .15s,border-color .15s;letter-spacing:0.3px}
  .edit-toggle:hover{border-color:var(--coral);background:rgba(255,91,74,.1);color:var(--coral)}
  body.editing .edit-toggle{background:var(--brand);color:#fff;border-color:var(--brand)}
  .wc-bar{position:absolute;top:10px;right:12px;display:none;gap:4px;z-index:5}
  body.editing .wc-bar{display:flex}
  .wc-bar span,.wc-bar button{width:26px;height:26px;border-radius:7px;border:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);padding:0}
  .wc-bar .wc-drag{cursor:grab}
  /* Feste Karte: Nadel statt Ziehgriff. Ein Griff, der sich nicht bewegen
     lässt, wäre ein Versprechen, das die Karte nicht hält. */
  .wc-bar .wc-fest{cursor:default;color:var(--faint)}
  .wc-bar svg{width:14px;height:14px}
  body.editing section[data-widget]{cursor:grab;outline:1px dashed var(--border-hover);outline-offset:-1px}
  body.editing section[data-widget][data-fest="1"]{cursor:default}
  /* Beim Sortieren wandert die Karte schon während des Ziehens an ihren
     Platz (Live-Vorschau in setupDnD). Die frühere `.drag-over`-Umrandung
     ist damit weg — sie markierte nur, worüber der Zeiger schwebte, nicht
     wo die Karte landen würde. Die blasse Karte IST jetzt die Vorschau. */
  body.editing section[data-widget].dragging{opacity:.34;outline:2px solid var(--brand)}
  body.editing .card-kicker{visibility:hidden}
  body:not(.editing) section[data-widget].is-hidden{display:none}
  body.editing section[data-widget].is-hidden{opacity:.42}
  body.editing section[data-widget] a,
  body.editing section[data-widget] summary,
  body.editing section[data-widget] iframe{pointer-events:none}
  body.editing .wc-bar,body.editing .wc-bar *{pointer-events:auto}

  /* ─── BREITE ZIEHEN (Anpassen-Modus) ───
     Griff an der rechten Kante. Beim Ziehen rastet die Karte auf Drittel,
     Halb oder Voll ein; gespeichert wird pro Benutzer (state.php →
     layout_breiten), die Backend-Einstellung bleibt nur noch Vorgabe. */
  .wc-resize{
    position:absolute;top:0;right:0;bottom:0;width:14px;
    display:none;z-index:6;cursor:ew-resize;
    align-items:center;justify-content:center;
    background:transparent;border:none;padding:0;
  }
  body.editing .wc-resize{display:flex;pointer-events:auto}
  .wc-resize::before{
    content:'';width:3px;height:34px;border-radius:999px;
    background:var(--line-strong);transition:background .15s,height .15s;
  }
  .wc-resize:hover::before,
  .wc-resize:focus-visible::before{background:var(--coral);height:52px}
  body.editing section[data-widget].resizing{outline:2px solid var(--coral)}
  /* Während des Ziehens darf nichts markiert werden */
  body.wc-resizing,body.wc-resizing *{user-select:none}
  /* Breiten-Anzeige am Griff */
  .wc-breite{
    position:absolute;top:8px;right:20px;z-index:7;display:none;
    font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
    padding:3px 8px;border-radius:999px;white-space:nowrap;
    background:var(--coral);color:#fff;
  }
  body.editing section[data-widget].resizing .wc-breite{display:block}

  /* ─── HÖHE ZIEHEN (Anpassen-Modus) ───
     Griff an der Unterkante, gespeichert pro Benutzer (state.php →
     layout_hoehen). Endet 14px vor rechts, damit er dem Breiten-Griff nicht
     in die Ecke läuft. Doppelklick setzt zurück auf Inhaltshöhe. */
  .wc-resize-hoehe{
    position:absolute;left:0;right:14px;bottom:0;height:14px;
    display:none;z-index:6;cursor:ns-resize;
    align-items:center;justify-content:center;
    background:transparent;border:none;padding:0;
  }
  body.editing .wc-resize-hoehe{display:flex;pointer-events:auto}
  .wc-resize-hoehe::before{
    content:'';height:3px;width:34px;border-radius:999px;
    background:var(--line-strong);transition:background .15s,width .15s;
  }
  .wc-resize-hoehe:hover::before,
  .wc-resize-hoehe:focus-visible::before{background:var(--coral);width:52px}
  body.editing section[data-widget].resizing-h{outline:2px solid var(--coral)}
  .wc-hoehe{
    position:absolute;right:20px;bottom:8px;z-index:7;display:none;
    font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
    padding:3px 8px;border-radius:999px;white-space:nowrap;
    background:var(--coral);color:#fff;
  }
  body.editing section[data-widget].resizing-h .wc-hoehe{display:block}

  /* Karte mit gezogener Höhe: Inhalt scrollen statt abschneiden.
     `.card` hat overflow:hidden — ohne diese Regel war der Inhalt unterhalb
     der gezogenen Kante schlicht weg und nicht erreichbar. Jetzt wird die
     Karte zur Flex-Spalte: der Kopf bleibt stehen, der Rumpf bekommt den
     Rest und scrollt. min-height:0 ist dabei Pflicht — ohne das weigert
     sich ein Flex-Kind zu schrumpfen und scrollt nie.

     `.kb-rumpf` setzt app.js (rumpfVon) auf den inhaltlichen Teil. Hier
     stand vorher fest `.card-body` — das griff bei „Lernen & Ressourcen"
     nicht, weil die Karte als einzige `.learn-body` heisst: dort blieb der
     Inhalt abgeschnitten, während alle anderen Karten längst scrollten. */
  section[data-widget].hat-hoehe{display:flex;flex-direction:column}
  section[data-widget].hat-hoehe > .card-head{flex:0 0 auto}
  /* KEIN overscroll-behavior:contain. Das stand hier zuerst und war aus
     einem Dialog-Muster übernommen — es verhindert, dass die Seite
     weiterscrollt, sobald der Rumpf am Ende ist. Über einer solchen Karte
     stand das Mausrad damit komplett still: gemessen fünf Radstufen, null
     Pixel Seitenbewegung, obwohl im Rumpf nichts mehr zu scrollen war.
     Mit dem Standardwert `auto` reicht die Karte weiter an die Seite
     durch (dieselbe Messung: 500px). */
  section[data-widget].hat-hoehe > .kb-rumpf{
    flex:1 1 auto;min-height:0;overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
  }
  /* Vorbeugend: die Rümpfe sind selbst Flex-Spalten. Ein Scroll-Container
     darin (z. B. `.table-scroll` in den Azubi-Diensten) bekommt als
     Flex-Kind die Mindesthöhe 0 und liesse sich zusammenquetschen — das
     ergäbe einen zweiten Scrollbalken IM Rumpf. So behalten die Kinder ihre
     natürliche Höhe und es scrollt nur der Rumpf. Heute ohne sichtbare
     Wirkung gemessen (die Tabelle ist kurz genug); die Regel greift,
     sobald sie wächst. */
  section[data-widget].hat-hoehe > .kb-rumpf > *{flex-shrink:0}
  /* Schmale, zurückhaltende Leiste — die Karte soll nicht nach Fenster aussehen */
  section[data-widget].hat-hoehe > .kb-rumpf::-webkit-scrollbar{width:8px}
  section[data-widget].hat-hoehe > .kb-rumpf::-webkit-scrollbar-track{background:transparent}
  section[data-widget].hat-hoehe > .kb-rumpf::-webkit-scrollbar-thumb{
    background:var(--line-strong);border-radius:999px;
    border:2px solid transparent;background-clip:content-box;
  }
  .edit-hint{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);display:none;align-items:center;gap:12px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:500;padding:10px 16px;border-radius:999px;z-index:60;box-shadow:0 8px 24px rgba(11,18,32,.22)}
  body.editing .edit-hint{display:flex}
  .edit-hint button{font-family:inherit;font-size:12px;font-weight:700;color:#fff;background:rgba(255,255,255,.16);border:none;border-radius:999px;padding:6px 12px;cursor:pointer}
  .edit-hint button:hover{background:rgba(255,255,255,.28)}

  /* ─── RESPONSIVE ─── */
  /* Breite Screens: alles eine Nummer größer, sonst wirken Karte und Grafik
     im vielen Leerraum verloren. */
  @media (min-width:1600px){
    .core-graph{--d:160px}
    .hero-note{max-width:480px}
    .hero-note-card{padding:20px 24px;gap:9px}
    .hero-note-title{font-size:16px}
    .hero-note-text{font-size:14px;-webkit-line-clamp:4;line-clamp:4}
    .hero-note-link{font-size:13px}
    .core-caption{font-size:13px}
  }

  /* Zwischenstufe: drei Hero-Spalten passen noch nebeneinander, brauchen aber
     weniger Platz. Nur --d und die Notiz-Breite ändern sich. */
  @media (max-width:1180px){
    .hero{padding:36px 34px;gap:22px}
    .hero-main{gap:24px}
    .core-graph{--d:108px}
    /* min-width muss mit — sonst gewinnt die 260px der Basisregel. */
    .hero-note{flex-basis:216px;min-width:216px;max-width:216px}
    .hero-slash{right:150px;font-size:340px}
    .hero-actions{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px}
    .hero-action{padding:10px 12px}
    .hero-search{padding:11px 15px;font-size:12.5px}
  }

  @media (max-width:900px){
    .span-4,.span-6,.span-12,.hero,.links-card{grid-column:1 / -1}
    /* Einspaltig gibt es weder Breitenstufen noch Platz für feste Höhen —
       die Griffe hätten nichts zu ziehen. */
    .wc-resize,.wc-resize-hoehe{display:none !important}
    .hero-main{flex-direction:column;align-items:flex-start}
    /* Im Spalten-Layout wird flex-basis zur HÖHE — ohne das Zurücksetzen
       reisst .hero-left 420px Leerraum unter den Text. */
    .hero-left{flex:0 0 auto;max-width:100%}
    .hero-stats{flex:0 0 auto}
    /* Zwei Spalten statt Scrollen: sechs Ziele bleiben so alle sichtbar.
       minmax(0,…), sonst drückt „Azubi-Dienste" seine Spalte breiter. */
    .hero-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
    /* Gestapelt: Text → Ankündigung → Grafik. Platz zu reservieren lohnt hier
       nicht, eine leere Notiz wäre nur verschenkte Höhe. */
    .hero-note{flex:0 0 auto;width:100%;max-width:100%;align-self:auto}
    .hero-note:empty{display:none}
    .hero-stats{align-self:center}
    .core-graph{--d:126px}
    .contact-grid{grid-template-columns:1fr}
    .topbar{padding:14px 18px}
    .grid{padding:16px}
    .hero{padding:28px 24px}
    .hero h1{font-size:32px}
    .hero-slash{display:none}
  }
/* ══════════════════════════════════════════════════════
   Hero & Modul-Theme
   ══════════════════════════════════════════════════════ */

/* =========================================================
   Einheitliches Seiten-Design im Stil des Hero-Bereichs
   ========================================================= */

:root{
  --page-dark:#0A0D2E;
  --page-mid:#141248;
  --page-violet:#241A6B;
  --surface:rgba(255,255,255,.075);
  --surface-strong:rgba(255,255,255,.105);
  --surface-hover:rgba(255,255,255,.14);
  --line:rgba(255,255,255,.15);
  --line-strong:rgba(255,255,255,.27);
  --text-main:#E2F9FF;
  --text-soft:rgba(226,249,255,.74);
  --text-faint:rgba(226,249,255,.48);
  --coral:#FF5B4A;
  --blue:#4D7CFF;
  /* Dritte Zonenfarbe: gedämpftes Schiefergrau mit kühlem Stich — für
     „Fakten", die sich zurückziehen sollen, statt um Aufmerksamkeit zu
     konkurrieren. Bewusst kein reines Grau, sonst wirkt es unentschieden
     statt gewählt. */
  --slate:#8C97BE;
}

/* Perf: background-attachment:fixed zwingt den Browser, den Verlauf bei
   jedem Scroll-Frame neu zu malen. Ein fixiertes Pseudo-Element sieht gleich
   aus, liegt aber als eigene Compositing-Ebene einmalig im Speicher. */
body{
  background:var(--page-dark);
  color:var(--text-main);
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 90% 8%, rgba(90,60,220,.26), transparent 62%),
    radial-gradient(ellipse 60% 55% at 8% 58%, rgba(0,87,255,.18), transparent 68%),
    linear-gradient(145deg,var(--page-dark) 0%,var(--page-mid) 58%,var(--page-violet) 100%);
}

.topbar-wrap{
  /* Perf: fast deckend statt backdrop-filter — sticky Blur re-rendert bei
     jedem Scroll-Frame den kompletten Balken. */
  background:rgba(10,13,46,.97);
  border-bottom:1px solid var(--line);
}
.topbar-title{color:var(--text-soft)}
.topbar-sep{background:var(--line)}
.segmented{background:rgba(255,255,255,.08);border:1px solid var(--line)}
.seg-btn{color:var(--text-soft)}
.seg-btn.active{background:var(--coral);color:#fff}
.edit-toggle{
  background:rgba(255,255,255,.07);
  border-color:var(--line);
  color:var(--text-soft);
}
.edit-toggle:hover{border-color:var(--coral);color:#fff}
body.editing .edit-toggle{
  background:var(--coral);
  border-color:var(--coral);
}

/* Hero bleibt optische Referenz */
.hero{
  box-shadow:0 24px 80px rgba(0,0,0,.24);
}

/* Karten / Module */
.card,
.links-card{
  /* Perf: kein backdrop-filter auf den vielen Karten — auf Intel-GPUs war
     jede ein eigenes Blur-Rechteck pro Frame. Der Glas-Eindruck kommt jetzt
     aus etwas kräftigerem Verlauf. */
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.055));
  border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(0,0,0,.16);
}
.card:hover,
.links-card:hover{
  border-color:var(--line-strong);
}

.card-head{
  background:rgba(10,13,46,.22);
  border-bottom:1px solid var(--line);
}
/* Standardfarbe der Karten-Icons. Das frühere !important hier war der
   eigentliche Grund, warum alle vierzehn Karten gleich aussahen: es hat jedes
   Icon auf Coral gezwungen, egal was im Widget stand. Ohne !important reicht
   die Regel weiterhin, um die stroke="#0057FF"-Attribute im Markup zu
   überschreiben (CSS schlägt Präsentationsattribute) — aber die Stufen
   darunter können jetzt differenzieren. */
.card-head svg{
  stroke:var(--coral);
  color:var(--coral);
}
.card-title{color:var(--text-main)}
.card-kicker{color:var(--text-faint)}

/* ─── FARBEN DER DREI STUFEN ─── */
/* Steht bewusst HIER und nicht oben bei der Geometrie: der .card-Block
   darüber ist später in der Datei als der Basis-Abschnitt und würde sonst
   gewinnen. */

/* Akzentlinie: einheitlich auf ALLEN Karten. Vorher lag sie nur auf „arbeit"
   und war ein Blau-nach-Coral-Verlauf — das wirkte schmutzig und machte die
   Karten ungleich. Jetzt ein durchgehender Coral-Strich überall.
   ::after, weil ::before auf .card schon der Hover-Schimmer ist. */
.card::after{
  content:"";
  position:absolute;left:0;right:0;top:0;height:2px;z-index:3;
  background:var(--coral);
  opacity:.55;
  pointer-events:none;
}
.stufe-arbeit .card-head > svg{background:rgba(255,255,255,.09)}
/* Coral-Verlauf auf „arbeit" wieder entfernt — wirkte schmutzig und hat
   die Karten ungleich gemacht. Unterscheidung laeuft jetzt nur ueber die
   Icon-Farbe der Stufe (siehe unten), die Flaechen bleiben einheitlich. */

/* nachschlagen: die Standardkarte bleibt neutral, nur das Kopf-Icon wird
   blau statt Coral — Coral bleibt „arbeit" vorbehalten. Überschreibt die
   globale Coral-Regel oben allein durch höhere Spezifität (drei Klassen
   statt zwei), kein !important nötig. */
.card.stufe-nachschlagen .card-head > svg{stroke:var(--blue);color:var(--blue)}

/* fakten: zieht sich bewusst zurück — kein Kartenrahmen mehr, kein
   Hover-Lift, kein Glanzstreifen. Eigene Zonenfarbe (Schiefergrau) statt
   Coral, auch beim Hover — sonst wäre der Rückzug nur eine Frage der Zeit
   bis zum ersten Mauskontakt. */
.stufe-fakten .card-title{color:var(--text-soft)}
.stufe-fakten .card-head > svg{
  stroke:var(--slate);color:var(--slate);
  transition:stroke .15s,color .15s,opacity .15s}
.stufe-fakten:hover .card-title{color:var(--text-main)}
.stufe-fakten:hover .card-head > svg{stroke:var(--slate);color:var(--slate)}

.card.stufe-fakten{
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.09);
  border-radius:12px;
  box-shadow:none;
}
.card.stufe-fakten:hover{
  border-color:rgba(255,255,255,.16);
  transform:none;
  box-shadow:none;
}
.card.stufe-fakten::before{display:none} /* kein Glanzstreifen — fühlt sich sonst zu „lebendig" für eine Nachschau-Karte an */
.card.stufe-fakten:hover .card-head::after{width:38px;opacity:.5} /* Akzentlinie wächst bei den anderen Stufen beim Hover, hier bewusst nicht */

/* Innenflächen */
.row,
.info,
.contact,
.doc,
.res,
.faq details,
.dir-col,
.firma{
  background:rgba(255,255,255,.065);
  border:1px solid var(--line);
}
.row:hover,
.info:hover,
.contact:hover,
.doc:hover,
.res:hover,
.faq details:hover{
  background:var(--surface-hover);
  border-color:var(--line-strong);
}

.row-ico,
.info-ico,
.doc-ico,
.step-dot{
  background:rgba(255,91,74,.14);
  border:1px solid rgba(255,91,74,.2);
}
.row-ico svg,
.info-ico svg,
.doc-ico svg,
.res svg,
.addr svg{
  stroke:var(--coral) !important;
  color:var(--coral) !important;
}
.info-ico svg[fill],
.info-ico svg[fill="#0057FF"]{
  fill:var(--coral) !important;
  stroke:none !important;
}

.row-title,
.info-title,
.doc-title,
.res-title,
.step-title,
.contact-name,
.dir-name,
.faq summary,
.guide li strong,
.guide h4,
.addr strong{
  color:var(--text-main);
}

.row-sub,
.row-access,
.info-sub,
.doc-sub,
.step-desc,
.contact-mail,
.contact-meta,
.dir-dw,
.faq-answer,
.guide li,
.addr,
.dienste-info,
.dtable td.muted{
  color:var(--text-soft);
}

.row-access strong,
.info-sub strong,
.note strong,
.guide .tip strong,
.learn-eyebrow,
.contact-role,
.dir-role,
.dir-head span:first-child,
.dienste-sub,
.addr a{
  color:var(--coral);
}

.note,
.guide .tip{
  background:rgba(255,91,74,.1);
  border:1px solid rgba(255,91,74,.22);
  color:var(--text-main);
}
.guide .warn{
  background:rgba(255,91,74,.12);
  border:1px solid rgba(255,91,74,.35);
  color:var(--text-main);
}
.guide .warn strong{color:#FF8A7E}

.step-line{background:var(--line)}
.step-dot{color:var(--coral)}

.dir-head{
  background:rgba(255,91,74,.11);
}
.dir-row{border-top:1px solid var(--line)}
.dir-head .dw{color:var(--text-faint)}

.faq summary::after{color:var(--coral)}

.guide code{
  background:rgba(255,255,255,.1);
  color:var(--text-main);
  border:1px solid var(--line);
}
.guide-shot,
.map-wrap{
  border-color:var(--line);
}

/* ─── Lightbox: Anleitungs-Screenshots vergrößert anzeigen ─── */
.lightbox{
  position:fixed;inset:0;z-index:999;display:none;
  align-items:center;justify-content:center;
  background:rgba(6,7,26,.88);padding:40px;
  cursor:zoom-out;
}
.lightbox.is-open{display:flex}
.lightbox img{
  max-width:100%;max-height:100%;
  border-radius:10px;border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  cursor:default;
}
.lightbox-close{
  position:absolute;top:18px;right:22px;
  width:40px;height:40px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.08);
  color:var(--text-main);font-size:24px;line-height:1;cursor:pointer;
}
.lightbox-close:hover{background:rgba(255,255,255,.18)}
body.lightbox-open{overflow:hidden}

.doc-badge{
  background:rgba(255,255,255,.09);
  color:var(--text-soft);
  border:1px solid var(--line);
}

.firma{background:rgba(255,255,255,.92)}

.links-label{color:var(--text-faint)}
.pill{
  background:rgba(255,255,255,.08);
  color:var(--text-main);
  border:1px solid var(--line);
}
.pill:hover{
  background:rgba(255,91,74,.14);
  border-color:var(--coral);
  color:#fff;
}

/* Tabellen */
.dtable th{
  color:var(--text-faint);
  border-bottom:1px solid var(--line);
}
.dtable td{
  color:var(--text-main);
  border-bottom:1px solid var(--line);
}
.dtable tbody tr:hover{
  background:rgba(255,255,255,.06);
}

/* ─── HEUTE-ZEILE & MEINE PROJEKTE im dunklen Theme ───
   Beides ist neu (29.07.2026) und war zuerst mit den hellen Tokens von ganz
   oben gebaut (--tint, --row, --ink). Die gelten aber nur für die
   Basis-Geometrie; die Seite läuft auf dem dunklen Modul-Theme hier unten.
   Ergebnis waren zwei weiss leuchtende Blöcke mitten in dunklen Karten.
   Farben kommen deshalb aus den Theme-Variablen dieses Abschnitts. */

.heute{
  background:rgba(255,255,255,.055);
  border-bottom:1px solid var(--line);
}
.heute-wann{color:var(--coral)}
.heute-frei,
.heute-label,
.heute-vertretung,
.heute-regel{color:var(--text-soft)}
.heute-wer{
  background:rgba(255,91,74,.14);
  border-color:rgba(255,91,74,.32);
  color:#ffb0a5;
}
.heute--frei .heute-wer{
  background:rgba(255,255,255,.07);
  border-color:var(--line);
  color:var(--text-soft);
}
.heute-aufgaben li{background:rgba(255,255,255,.05);border:1px solid var(--line)}
.heute-aufgabe{color:var(--text-main)}
.heute-aufgabe-wer{color:#fff}
.heute--frei .heute-wer{color:var(--text-soft)}
.dtable .ist-heute{background:rgba(255,91,74,.12)}
.dtable th.ist-heute{color:var(--coral)}

.dienste-mehr{border-top:1px solid var(--line)}
.dienste-mehr > summary{color:var(--coral)}
.dienste-mehr > summary:hover{background:rgba(255,255,255,.05)}
.dienste-anzahl{background:rgba(255,255,255,.1);color:var(--text-soft)}

.proj{background:rgba(255,255,255,.065);border:1px solid var(--line)}
.proj:hover{background:var(--surface-hover)}
.proj-name{color:#fff}
a.proj-name:hover{color:var(--coral)}
.proj-rolle{color:var(--coral)}
.proj-notiz,
.proj-leer{color:var(--text-soft)}
.proj-status--aktiv{background:rgba(255,91,74,.16);color:var(--coral)}
.proj-status--pause{background:rgba(255,255,255,.1);color:var(--text-soft)}
.proj-status--fertig{background:rgba(110,220,160,.14);color:#6EDCA0}
.proj-btn{color:var(--text-faint)}
.proj-btn:hover{color:var(--coral);border-color:var(--line-strong)}
.proj-neu{border-color:var(--line-strong);color:var(--coral)}
.proj-neu:hover{background:rgba(255,91,74,.1);border-color:var(--coral)}
.proj-form{background:rgba(255,255,255,.05);border:1px solid var(--line)}
.proj-feld > span{color:var(--text-faint)}
.proj-feld input,
.proj-feld select{
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  color:var(--text-main);
}
.proj-feld input::placeholder{color:var(--text-faint)}
.proj-feld input:focus,
.proj-feld select:focus{outline:2px solid var(--coral);border-color:var(--coral)}
/* Die Auswahlliste erbt die Systemfarben — ohne das steht dunkler Text auf
   dunklem Grund, sobald sie aufklappt. */
.proj-feld select option{background:var(--page-dark);color:var(--text-main)}
.proj-speichern{background:var(--coral);color:#fff}
.proj-speichern:hover{background:#E8442F}
.proj-abbrechen{color:var(--text-soft);border-color:var(--line)}
.proj-abbrechen:hover{color:var(--text-main);border-color:var(--line-strong)}

/* ─── TELEFONDIENST (Anrufprotokoll) ───
   Neue Klassen, immer dunkel gerendert (wie .ank-dialog) — kein separater
   heller Block nötig, siehe Regel 7 in CLAUDE.md: die Seite läuft dunkel. */
.anr-heute .heute-kopf{position:relative}
.anr-neu-btn{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-family:inherit;font-size:11.5px;font-weight:700;
  padding:6px 12px;border-radius:999px;
  border:1px dashed var(--line-strong);background:transparent;color:var(--coral);cursor:pointer;
  transition:background .15s,border-color .15s;
}
.anr-neu-btn svg{width:13px;height:13px}
.anr-neu-btn:hover{background:rgba(255,91,74,.1);border-color:var(--coral)}
.anr-leer{font-size:12.5px;color:var(--text-faint);padding:6px 2px}
.anr-liste{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.anr-liste--alt{margin-top:0}
.anr-row{
  display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;
  font-family:inherit;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;
  padding:9px 11px;transition:background .12s,border-color .12s;
}
.anr-row:hover{background:rgba(255,255,255,.08)}
.anr-row--erledigt{opacity:.55}
.anr-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px;background:var(--coral)}
.anr-row--erledigt .anr-dot{background:#6EDCA0}
.anr-zeile-haupt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.anr-name{font-size:12.5px;font-weight:600;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.anr-anliegen{font-size:11.5px;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.anr-zeile-meta{display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;max-width:38%}
.anr-chip{font-size:10px;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--text-soft);white-space:nowrap}
.anr-chip--weiter{color:var(--blue);border-color:rgba(77,124,255,.4)}
.anr-chip--rueckruf{color:var(--coral);border-color:rgba(255,91,74,.4)}
.anr-time{font-size:10.5px;color:var(--text-faint);white-space:nowrap}
.anr-foot{padding:12px 20px 16px;font-size:12px}
.anr-foot a{display:inline-flex;align-items:center;gap:6px;color:var(--text-soft);text-decoration:none;font-weight:600;transition:color .15s}
.anr-foot a:hover{color:var(--coral)}
.anr-foot a svg{width:12px;height:12px}

/* ─── Dialog: Erfassen/Bearbeiten ─── */
.anr-dialog{
  margin:auto;
  width:min(560px,calc(100vw - 32px));
  max-height:min(88vh,720px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  padding:0;
  background:linear-gradient(160deg,#141248 0%,#0A0D2E 70%);
  color:var(--hero-ink);
  box-shadow:0 32px 90px rgba(0,0,0,.5);
  display:flex;flex-direction:column;
}
.anr-dialog:not([open]){display:none}
.anr-dialog::backdrop{background:rgba(4,6,24,.72)}
.anr-form{display:flex;flex-direction:column;flex:1;min-height:0}
.anr-feld{display:flex;flex-direction:column;gap:5px}
.anr-feld > span{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:rgba(226,249,255,.5)}
.anr-feld input,.anr-feld select,.anr-feld textarea{
  font-family:inherit;font-size:13px;color:var(--hero-ink);
  padding:8px 11px;border-radius:8px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);width:100%;outline:none;transition:border-color .15s;
}
.anr-feld textarea{resize:vertical;line-height:1.5}
.anr-feld input::placeholder,.anr-feld textarea::placeholder{color:rgba(226,249,255,.4)}
.anr-feld input:focus,.anr-feld select:focus,.anr-feld textarea:focus{border-color:var(--accent)}
.anr-feld select option{background:#141248}
.anr-check{display:flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(226,249,255,.75);cursor:pointer}
.anr-check input{width:15px;height:15px;accent-color:var(--accent)}
.anr-checkliste summary{font-size:12px;font-weight:600;cursor:pointer;color:rgba(226,249,255,.75);list-style:none}
.anr-checkliste summary::-webkit-details-marker{display:none}
.anr-checkliste summary::before{content:'▸';margin-right:7px;color:rgba(226,249,255,.4)}
.anr-checkliste[open] summary::before{content:'▾'}
.anr-checkliste ul{list-style:none;margin-top:9px;display:flex;flex-direction:column;gap:6px}
.anr-checkliste li{font-size:11.5px;color:rgba(226,249,255,.65);line-height:1.4;padding-left:18px;position:relative}
.anr-checkliste li::before{content:'';position:absolute;left:0;top:2px;width:11px;height:11px;border-radius:3px;border:1.5px solid rgba(255,255,255,.25)}
.anr-hint{font-size:11.5px;color:rgba(226,249,255,.45);line-height:1.5}
.anr-hint strong{color:rgba(226,249,255,.7)}
.anr-msg{font-size:12px;padding:8px 12px;border-radius:8px}
.anr-msg.ok{background:rgba(110,220,160,.14);color:#6EDCA0}
.anr-msg.err{background:rgba(255,91,74,.14);color:var(--accent)}
.anr-dialog-foot{gap:10px}
.anr-dialog-foot-links{display:flex;gap:8px}
.anr-status-btn,.anr-loeschen-btn{
  font-family:inherit;font-size:11.5px;font-weight:700;padding:8px 12px;border-radius:8px;
  border:1px solid rgba(255,255,255,.16);background:transparent;color:rgba(226,249,255,.7);cursor:pointer;
  transition:all .13s;
}
.anr-status-btn:hover{border-color:var(--accent);color:var(--accent)}
.anr-status-btn--offen{background:var(--accent);border-color:var(--accent);color:#fff}
.anr-status-btn--offen:hover{filter:brightness(1.08);color:#fff}
.anr-loeschen-btn{color:var(--accent);border-color:rgba(255,91,74,.4)}
.anr-loeschen-btn:hover{background:rgba(255,91,74,.14)}
.anr-loeschen-btn--armed{background:var(--accent);border-color:var(--accent);color:#fff}
.anr-loeschen-btn--armed:hover{filter:brightness(1.08);color:#fff}
.anr-speichern{
  margin-left:auto;font-family:inherit;font-size:12.5px;font-weight:700;padding:9px 18px;border-radius:9px;
  border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;transition:filter .13s;
}
.anr-speichern:hover{filter:brightness(1.08)}

/* ─── Zweitseite anrufe.php: Toolbar + Tagesgruppen ─── */
.anrs-wrap{max-width:900px;margin:0 auto;padding:28px}
.anrs-toolbar{display:flex;gap:8px;flex-wrap:wrap;padding:16px 20px 0}
.anrs-toolbar input,.anrs-toolbar select{
  font-family:inherit;font-size:13px;color:var(--text-main);
  padding:8px 12px;border-radius:9px;border:1px solid var(--line);background:var(--surface);
  outline:none;transition:border-color .15s;
}
.anrs-toolbar input{flex:1;min-width:160px}
.anrs-toolbar input::placeholder{color:var(--text-faint)}
.anrs-toolbar input:focus,.anrs-toolbar select:focus{border-color:var(--coral)}
.anrs-toolbar select{cursor:pointer}
.anrs-toolbar select option{background:var(--page-mid)}
.anr-daygroup{font-size:10.5px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:1px;margin:14px 0 4px}
.anrs-liste{padding:6px 20px 20px;display:flex;flex-direction:column;gap:6px}

/* allgemeine Links */
a{color:#91AFFF}
a:hover{color:var(--coral)}

/* Bearbeitungsmodus */
.wc-bar span,
.wc-bar button{
  background:rgba(10,13,46,.94);
  border-color:var(--line);
  color:var(--text-soft);
}
body.editing section[data-widget]{
  outline-color:rgba(255,91,74,.55);
}
body.editing section[data-widget].drag-over{
  outline-color:var(--coral);
}

/* Scrollbar passend zum Theme */
*{
  scrollbar-color:rgba(255,255,255,.22) transparent;
}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.2);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{
  background:rgba(255,91,74,.55);
  background-clip:padding-box;
}
/* ══════════════════════════════════════════════════════
   Motion-Politur
   ══════════════════════════════════════════════════════ */

/* =========================================================
   BLUE THE WEB – Motion & Detail Polish
   ========================================================= */

/* Bewegte Hintergrundebene */
/* Perf-Hinweis (Intel-GPUs / Remote Desktop): hier lief zu viel dauerhaft —
   filter:blur auf riesigen animierten Orbs, animierter Noise, animiertes
   background-position der Grid-Lines. Die Blur-Optik steckt jetzt in den
   Verlaufs-Stops selbst; Noise und Grid stehen still (ihre Bewegung war bei
   den Opazitäten ohnehin unsichtbar, hat aber jede Frame Fullscreen-Repaints
   erzwungen). Die Orbs liefen trotzdem noch endlos weiter (bis zu 34vw groß,
   auf JEDER Seite inkl. Admin/Login) — über Remote Desktop/VNC muss jedes
   geänderte Pixel ständig neu übertragen werden, das macht dauerhaftes
   Fullscreen-Compositing dort besonders teuer. Jetzt ebenfalls stehend. */
.btw-motion-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  isolation:isolate;
  contain:layout paint style;
}
.btw-orb{
  position:absolute;
  border-radius:50%;
  opacity:.22;
  contain:layout paint;
}
.btw-orb--one{
  width:34vw;height:34vw;min-width:360px;min-height:360px;
  right:-10vw;top:8vh;
  background:radial-gradient(circle at 35% 35%,rgba(255,91,74,.7) 0%,rgba(255,91,74,.4) 22%,rgba(89,55,225,.26) 48%,rgba(89,55,225,.08) 62%,transparent 74%);
}
.btw-orb--two{
  width:28vw;height:28vw;min-width:300px;min-height:300px;
  left:-8vw;top:48vh;
  background:radial-gradient(circle at 55% 45%,rgba(0,87,255,.68) 0%,rgba(0,87,255,.38) 24%,rgba(96,72,255,.2) 52%,rgba(96,72,255,.06) 65%,transparent 76%);
}
.btw-orb--three{
  width:18vw;height:18vw;min-width:220px;min-height:220px;
  left:43vw;bottom:-7vw;
  background:radial-gradient(circle,rgba(255,91,74,.28) 0%,rgba(255,91,74,.18) 30%,rgba(0,87,255,.16) 55%,rgba(0,87,255,.05) 66%,transparent 76%);
}
.btw-grid-lines{
  position:absolute;
  inset:0;
  opacity:.04;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:128px 128px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);
  mask-image:linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);
}
.btw-noise{
  position:absolute;
  inset:-20%;
  opacity:.015;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  contain:layout paint;
}

/* Cursor-Licht */
.btw-cursor-glow{
  position:fixed;
  width:420px;
  height:420px;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
  opacity:.08;
  /* Positionierung übernimmt app.js komplett per transform (kein left/top,
     kein filter:blur — der Verlauf ist weich genug). */
  background:radial-gradient(circle,rgba(89,115,255,.7) 0%,rgba(89,115,255,.4) 18%,rgba(255,91,74,.2) 34%,rgba(255,91,74,.06) 52%,transparent 70%);
  transition:opacity .25s ease;
  will-change:transform;
  contain:layout paint;
}

/* Hero-Partikel */
/* Perf (Intel-GPUs): btwMorph animierte border-radius, btwBadgePulse
   animierte box-shadow — beides KEINE Compositor-Properties, jedes
   Frame erzwang Paint statt nur Compositing. Beide waren „infinite",
   liefen also für immer auf jeder Seitenansicht. Jetzt statisch. */
.hero::after{
  content:"";
  position:absolute;
  width:145px;height:145px;
  right:7%;bottom:-58px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:38% 62% 56% 44% / 45% 39% 61% 55%;
}
.hero-pills a{
  position:relative;
  overflow:hidden;
}
.hero-pills a::before,
.pill::before{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  transition:transform .65s ease;
}
.hero-pills a:hover::before,
.pill:hover::before{
  transform:translateX(120%) skewX(-18deg);
}

/* Karten erhalten eine feine Lichtkante */
.card,
.links-card{
  position:relative;
  overflow:hidden;
  transform:translateZ(0);
}
.card::before,
.links-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(115deg,transparent 18%,rgba(255,255,255,.055) 42%,transparent 64%);
  transform:translateX(-115%);
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
.card:hover::before,
.links-card:hover::before{
  transform:translateX(115%);
}
.card{
  transition:border-color .22s ease,transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s ease;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 26px 68px rgba(0,0,0,.23);
}

/* Kopfzeilen-Akzent */
.card-head::after{
  content:"";
  width:38px;
  height:2px;
  margin-left:3px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--coral),transparent);
  opacity:.7;
  transform-origin:left;
  transition:width .35s ease,opacity .35s ease;
}
.card:hover .card-head::after{
  width:64px;
  opacity:1;
}

/* Interaktive Listenelemente */
.row,.info,.contact,.doc,.res,.faq details{
  transition:
    background .2s ease,
    border-color .2s ease,
    transform .24s cubic-bezier(.16,1,.3,1),
    box-shadow .24s ease;
}
.row:hover,.info:hover,.contact:hover,.doc:hover,.res:hover{
  transform:translateX(4px);
  box-shadow:-3px 0 0 rgba(255,91,74,.72),0 12px 26px rgba(0,0,0,.12);
}
.faq details[open]{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,91,74,.36);
}
.faq summary::after{
  transition:transform .25s ease;
}
.faq details[open] summary::after{
  transform:rotate(180deg);
}

/* Icons leben subtil */
.row-ico,.info-ico,.doc-ico,.step-dot{
  transition:transform .3s cubic-bezier(.16,1,.3,1),background .2s ease,border-color .2s ease;
}
.row:hover .row-ico,
.info:hover .info-ico,
.doc:hover .doc-ico,
.res:hover svg{
  transform:rotate(-4deg) scale(1.08);
}

/* Reveal wird gestaffelt */
.reveal{
  transition-duration:.72s !important;
}
.grid > .reveal:nth-child(3n+1){transition-delay:.03s}
.grid > .reveal:nth-child(3n+2){transition-delay:.09s}
.grid > .reveal:nth-child(3n){transition-delay:.15s}

/* Topbar kompakter beim Scrollen */
.topbar-wrap{
  transition:background .25s ease,box-shadow .25s ease,border-color .25s ease;
}
body.is-scrolled .topbar-wrap{
  background:rgba(8,10,38,.93);
  box-shadow:0 14px 38px rgba(0,0,0,.22);
  border-color:rgba(255,255,255,.11);
}

/* Fokuszustände */
a:focus-visible,
button:focus-visible,
summary:focus-visible{
  outline:2px solid var(--coral);
  outline-offset:3px;
}

/* kleine visuelle Korrekturen */
.card-body{position:relative;z-index:1}
.card-head{position:relative;z-index:2}
.doc-badge,.hb-label{
  box-shadow:0 5px 18px rgba(255,91,74,.18);
}


/* Mobile: weniger Bewegung und kleinere Hintergrundformen */
@media (max-width:900px){
  .btw-cursor-glow{display:none}
  .btw-orb{opacity:.22}
  .card:hover{transform:none}
  .row:hover,.info:hover,.contact:hover,.doc:hover,.res:hover{transform:none}
}

/* Barrierefreiheit */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
  .btw-cursor-glow{display:none}
}
/* ══════════════════════════════════════════════════════
   Feature-Suite (Suche, Favoriten, Edit-Modus)
   ══════════════════════════════════════════════════════ */

/* =========================================================
   Knowledge Base Feature Suite
   ========================================================= */

.quickbar{
  grid-column:span 12;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
}
.quick-action{
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  min-height:64px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.065);
  color:var(--text-main);
  text-decoration:none;
  overflow:hidden;
  transition:transform .24s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.quick-action:hover{
  transform:translateY(-3px);
  border-color:rgba(255,91,74,.45);
  background:rgba(255,255,255,.11);
  box-shadow:0 16px 34px rgba(0,0,0,.17);
  color:#fff;
}
.quick-action svg{
  width:18px;height:18px;flex-shrink:0;color:var(--coral)
}
.quick-action strong{
  display:block;font-size:12.5px
}
.quick-action span{
  display:block;font-size:10.5px;color:var(--text-faint);margin-top:2px
}

.search-trigger{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:230px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.065);
  color:var(--text-soft);
  font:inherit;
  font-size:12px;
  cursor:pointer;
}
.search-trigger:hover{border-color:var(--line-strong);color:#fff}
.search-trigger svg{width:15px;height:15px}
.search-trigger kbd{
  margin-left:auto;
  font:inherit;
  font-size:10px;
  padding:2px 7px;
  border-radius:6px;
  color:var(--text-faint);
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
}

.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.dash-item{
  padding:16px;
  border-radius:13px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
}
.dash-label{
  font-size:10px;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--text-faint);
  font-weight:700;
}
.dash-value{
  margin-top:7px;
  font-size:22px;
  font-weight:800;
  color:var(--text-main);
}
.dash-sub{
  margin-top:3px;
  font-size:11px;
  color:var(--text-soft);
}
.status-dot{
  display:inline-block;
  width:8px;height:8px;border-radius:50%;
  background:#35D07F;
  box-shadow:0 0 0 5px rgba(53,208,127,.1);
  margin-right:7px;
}

.news-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.news-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.055);
}
.news-date{
  flex:0 0 auto;
  min-width:44px;
  padding:5px 7px;
  border-radius:8px;
  background:rgba(255,91,74,.13);
  color:var(--coral);
  font-size:10px;
  font-weight:800;
  text-align:center;
}
.news-title{font-size:12.5px;font-weight:700;color:var(--text-main)}
.news-sub{font-size:11px;color:var(--text-soft);margin-top:2px}

.onboarding-progress{
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  margin-bottom:12px;
}
.onboarding-progress > span{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--coral),#7A68FF);
  transition:width .35s ease;
}
.check-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.check-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(255,255,255,.055);
}
.check-item input{
  margin-top:2px;
  accent-color:var(--coral);
}
.check-title{font-size:12.5px;font-weight:700;color:var(--text-main)}
.check-sub{font-size:11px;color:var(--text-soft);margin-top:2px}
.check-meta{
  margin-left:auto;
  font-size:10px;
  color:var(--text-faint);
  white-space:nowrap;
}

.favorite-toggle{
  margin-left:8px;
  width:28px;height:28px;
  border-radius:8px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.055);
  color:var(--text-faint);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.favorite-toggle:hover,
.favorite-toggle.active{
  color:#FFD76A;
  border-color:rgba(255,215,106,.38);
  background:rgba(255,215,106,.1);
}
.favorite-toggle svg{width:14px;height:14px}
/* In <summary> (flex, space-between) den Stern rechts neben das +/– schieben,
   damit der Titel linksbündig bleibt */
summary > .favorite-toggle{margin-left:auto}

.favorites-empty{
  padding:14px;
  border:1px dashed var(--line);
  border-radius:11px;
  color:var(--text-faint);
  font-size:12px;
}

.command-overlay{
  position:fixed;
  inset:0;
  z-index:120;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:12vh 20px 20px;
  /* Perf (Intel-GPUs): fast deckend statt backdrop-filter — Layer-Erzeugung
     für den Blur ist auf schwacher GPU spürbar träge, gerade weil das
     Overlay bei jedem Öffnen neu aufgebaut wird. */
  background:rgba(4,6,20,.92);
}
.command-overlay.open{display:flex}
.command-box{
  width:min(720px,100%);
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(145deg,rgba(20,18,72,.98),rgba(10,13,46,.98));
  box-shadow:0 35px 100px rgba(0,0,0,.45);
}
.command-search-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px;
  border-bottom:1px solid var(--line);
}
.command-search-wrap svg{width:18px;height:18px;color:var(--coral)}
.command-search{
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  color:var(--text-main);
  font:inherit;
  font-size:16px;
}
.command-search::placeholder{color:var(--text-faint)}
.command-results{
  max-height:54vh;
  overflow:auto;
  padding:8px;
}
.command-result{
  width:100%;
  border:none;
  background:transparent;
  color:inherit;
  text-align:left;
  display:flex;
  gap:12px;
  align-items:center;
  padding:11px 12px;
  border-radius:11px;
  cursor:pointer;
}
.command-result:hover,
.command-result.active{
  background:rgba(255,255,255,.09);
}
.command-result-icon{
  width:32px;height:32px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,91,74,.12);
  color:var(--coral);
  flex-shrink:0;
}
.command-result-icon svg{width:15px;height:15px}
/* Titel über Unterzeile. Vorher waren beides nackte inline-<span> — sie
   klebten aneinander („Internes WikiProzesse & How-tos") und das margin-top
   auf einem inline-Element blieb wirkungslos. min-width:0 lässt die
   Ellipse unten überhaupt erst greifen. */
.command-result-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.command-result-title{
  display:block;font-size:12.5px;font-weight:700;color:var(--text-main);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.command-result-sub{
  display:block;font-size:10.5px;line-height:1.45;color:var(--text-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.command-empty{
  padding:24px;
  color:var(--text-faint);
  text-align:center;
  font-size:12px;
}
.command-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  border-top:1px solid var(--line);
  color:var(--text-faint);
  font-size:10px;
}
.command-footer kbd{
  padding:2px 6px;
  border-radius:5px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  font:inherit;
}

.module-count{
  font-size:10px;
  color:var(--text-faint);
  margin-left:6px;
}

@media (max-width:1100px){
  .quickbar{grid-template-columns:repeat(3,1fr)}
  .dashboard-grid{grid-template-columns:repeat(2,1fr)}
  .search-trigger{min-width:0}
  .search-trigger span{display:none}
}
@media (max-width:650px){
  .quickbar{grid-template-columns:1fr 1fr}
  .dashboard-grid{grid-template-columns:1fr}
  .search-trigger kbd{display:none}
}
/* ══════════════════════════════════════════════════════
   KB-Pro (Guides, Tags, Command-Menü)
   ══════════════════════════════════════════════════════ */

.tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.kb-tag{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;
font-size:9.5px;font-weight:800;letter-spacing:.45px;text-transform:uppercase;
background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--text-soft)}
.kb-tag.coral{background:rgba(255,91,74,.12);border-color:rgba(255,91,74,.24);color:#ff8d82}
.kb-tag.blue{background:rgba(77,124,255,.12);border-color:rgba(77,124,255,.24);color:#9db3ff}
.guide-meta{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px}
.meta-chip svg{width:12px;height:12px;flex-shrink:0;opacity:.85}
.command-footer kbd svg{display:block}
.meta-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;
font-size:10px;color:var(--text-soft);background:rgba(255,255,255,.055);border:1px solid var(--line)}
.copy-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;
border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.055)}
.copy-row code{font-size:12px;color:var(--text-main);word-break:break-all}
.copy-btn{font:inherit;font-size:10px;font-weight:800;padding:6px 9px;border-radius:8px;
border:1px solid rgba(255,91,74,.28);background:rgba(255,91,74,.12);color:#ff978d;cursor:pointer}
.copy-btn:hover{background:rgba(255,91,74,.18)}
.recent-list{display:flex;flex-direction:column;gap:8px}
.recent-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;
border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.05)}
.recent-title{font-size:12px;font-weight:700;color:var(--text-main)}
.recent-time{font-size:10px;color:var(--text-faint)}
.version-line{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:11px 2px 0;color:var(--text-faint);font-size:10.5px}
.version-badge{padding:3px 7px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.05)}
summary[data-duration]::before{content:attr(data-duration);margin-right:8px;font-size:9px;
padding:3px 7px;border-radius:999px;background:rgba(255,91,74,.11);color:#ff958a;border:1px solid rgba(255,91,74,.22)}
.search-hit{outline:2px solid var(--coral)!important;outline-offset:4px;animation:hitFade 1.8s ease}
@keyframes hitFade{0%{box-shadow:0 0 0 0 rgba(255,91,74,.5)}100%{box-shadow:0 0 0 18px rgba(255,91,74,0)}}

/* ══════════════════════════════════════════════════════
   Stand-Anzeige & Deep-Link-Button im Kartenkopf
   ══════════════════════════════════════════════════════ */

/* Der Kopf ist flex mit space-between: Titel links, alles Weitere rechts.
   margin-left:auto am ersten rechten Element schiebt den Block nach rechts. */
.card-head .card-kicker{ margin-left:auto }

.card-stand{
  margin-left:10px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text-faint);
  font-size:9.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
/* Ohne Kicker muss der Stand selbst nach rechts rücken */
.card-head .card-title + .card-stand{ margin-left:auto }

.card-link-btn{
  margin-left:8px;
  width:26px; height:26px;
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:7px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text-faint);
  cursor:pointer;
  opacity:0;
  transition:opacity .18s ease, color .18s ease, border-color .18s ease;
}
.card-link-btn svg{ width:13px; height:13px }

/* Erst beim Überfahren der Karte zeigen — sonst dreizehn Buttons im Blick.
   Tastaturfokus blendet ihn ebenfalls ein, damit er erreichbar bleibt. */
.card:hover .card-link-btn,
.links-card:hover .card-link-btn,
.card-link-btn:focus-visible{ opacity:1 }

.card-link-btn:hover{
  color:var(--coral);
  border-color:rgba(255,91,74,.3);
  background:rgba(255,91,74,.08);
}
.card-link-btn.kopiert{
  opacity:1;
  color:#7ee0a8;
  border-color:rgba(126,224,168,.35);
  background:rgba(126,224,168,.1);
}
.card-link-btn.kopiert::after{
  content:'Link kopiert';
  position:absolute;
  transform:translateY(24px);
  font-size:9.5px;
  color:#7ee0a8;
  white-space:nowrap;
}

@media (max-width:900px){
  /* Auf Touch gibt es kein Hover — Button dauerhaft zeigen */
  .card-link-btn{ opacity:.55 }
  .card-stand{ font-size:9px }
}

/* ══════════════════════════════════════════════════════
   "Machst du das zum ersten Mal?"
   ══════════════════════════════════════════════════════ */

.erstesmal-liste{ display:flex; flex-direction:column; gap:10px; margin-top:12px }

/* Flächen wie .row / .doc — NICHT var(--row) benutzen: das ist ein
   Restwert aus dem hellen 1a-Design (#F8F9FB) und wird im dunklen
   Theme überall durch diesen rgba-Wert ersetzt. */
.erstesmal-item{
  padding:14px 16px;
  border-radius:var(--radius-row);
  border:1px solid var(--line);
  background:rgba(255,255,255,.065);
  border-left:2px solid var(--coral);
  transition:opacity .35s ease, border-color .35s ease, background .35s ease;
}

/* Erledigt: bleibt lesbar, tritt aber zurück — der Rest ist wichtiger */
.erstesmal-item.ist-erledigt{
  opacity:.45;
  border-left-color:rgba(126,224,168,.5);
}

.erstesmal-check{ display:flex; align-items:center; gap:10px; cursor:pointer }
.erstesmal-check input{
  width:16px; height:16px;
  accent-color:var(--coral);
  cursor:pointer;
  flex:0 0 auto;
}
.erstesmal-titel{ font-weight:650; font-size:13.5px; color:var(--text-main) }
.ist-erledigt .erstesmal-titel{ text-decoration:line-through }

.erstesmal-warum{
  margin:7px 0 0 26px;
  font-size:12px;
  line-height:1.55;
  color:var(--text-faint);
}

.erstesmal-links{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:10px 0 0 26px;
}

.erstesmal-guide{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(0,87,255,.3);
  background:rgba(0,87,255,.09);
  color:var(--text-main);
  font-size:11.5px;
  font-weight:600;
  text-decoration:none;
  transition:background .18s ease, border-color .18s ease;
}
.erstesmal-guide svg{ width:12px; height:12px; flex:0 0 auto }
.erstesmal-guide:hover{
  background:rgba(0,87,255,.18);
  border-color:rgba(0,87,255,.5);
}

.erstesmal-fragen{ font-size:11px; color:var(--text-faint) }

@media (max-width:900px){
  .erstesmal-warum,
  .erstesmal-links{ margin-left:0 }
}

/* ══════════════════════════════════════════════════════
   Lernpfad: Praxis-Stufen und offenes Ende
   ══════════════════════════════════════════════════════ */

.step-title{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap }

.step-art{
  font-size:9px;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-weight:600;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--text-faint);
}
/* Praxis-Stufen heben sich ab — hier hört Selbststudium auf */
.step-praxis .step-art{
  color:#ffb0a5;
  border-color:rgba(255,91,74,.32);
  background:rgba(255,91,74,.1);
}
.step-praxis .step-dot{
  background:rgba(255,91,74,.14);
  border-color:rgba(255,91,74,.4);
  color:#ffb0a5;
}

.step-links{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px }

.step-link{
  font-size:11px;
  font-weight:600;
  padding:4px 9px;
  border-radius:999px;
  text-decoration:none;
  color:var(--text-main);
  border:1px solid rgba(0,87,255,.28);
  background:rgba(0,87,255,.08);
  transition:background .18s ease, border-color .18s ease;
}
.step-link:hover{ background:rgba(0,87,255,.17); border-color:rgba(0,87,255,.48) }

.step-link--anlass{
  border-color:rgba(255,91,74,.3);
  background:rgba(255,91,74,.09);
}
.step-link--anlass:hover{ background:rgba(255,91,74,.17); border-color:rgba(255,91,74,.5) }

/* Offenes Ende: sichtbar unfertig, nicht kaschiert */
.step-offen .step-dot{
  background:transparent;
  border:1px dashed var(--line-strong);
  color:var(--text-faint);
}
.step-offen .step-title{ color:var(--text-faint) }
.step-offen .step-desc{ font-style:italic }

/* Deep-Link-Ziele nicht unter die sticky Topbar scrollen lassen.
   Gilt für Karten (#w-…) und Anleitungen (#g-…). */
[id^="w-"],
details[id^="g-"]{ scroll-margin-top:86px }

/* ══════════════════════════════════════════════════════
   Anmeldeseite (login.php, hash.php)
   ══════════════════════════════════════════════════════ */

body.kb-login-seite{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px }

.kb-login{ position:relative; z-index:2; width:100%; max-width:400px }

.kb-login-box{
  /* Perf (Intel-GPUs): fast deckend statt backdrop-filter, siehe .command-overlay. */
  background:rgba(14,16,38,.94);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:32px 30px;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.4);
}

.kb-login-kicker{
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  font-weight:800; color:var(--coral);
}
.kb-login-titel{ font-size:24px; font-weight:900; letter-spacing:-.5px; color:var(--text-main); margin-top:2px }
.kb-login-sub{ font-size:12.5px; color:var(--text-faint); margin-bottom:8px; line-height:1.5 }

.kb-login-feld{ display:flex; flex-direction:column; gap:5px }
.kb-login-feld span{ font-size:11px; font-weight:600; color:var(--text-faint); letter-spacing:.02em }
.kb-login-feld input{
  font-family:inherit; font-size:14px;
  padding:11px 13px;
  border-radius:var(--radius-row);
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:var(--text-main);
  transition:border-color .15s ease, background .15s ease;
}
.kb-login-feld input:focus{
  outline:none;
  border-color:rgba(0,87,255,.6);
  background:rgba(0,87,255,.06);
}

.kb-login-fehler{
  padding:10px 13px;
  border-radius:var(--radius-row);
  background:rgba(255,91,74,.12);
  border:1px solid rgba(255,91,74,.32);
  color:#ffb0a5;
  font-size:12.5px;
}

.kb-login-btn{
  margin-top:6px;
  font-family:inherit; font-size:14px; font-weight:700;
  padding:12px;
  border-radius:var(--radius-row);
  border:none; cursor:pointer;
  background:var(--brand);
  color:#fff;
  transition:filter .15s ease;
}
.kb-login-btn:hover{ filter:brightness(1.1) }