/* ==========================================================================
   *  DIE HELLE PALETTE. Darunter steht die dunkle — und zwar EINMAL.
   * ==========================================================================
   *
   * Umgestellt wird über `data-theme` am <html>-Element: "light" oder "dark".
   * Gesetzt wird es von dem kleinen Skript im <head> der index.html, VOR dem
   * ersten Zeichnen — sonst blitzt bei jedem Aufruf kurz die helle Fassung
   * auf, und ein Weißblitz auf einem dunklen Bildschirm sieht nach einem
   * Fehler aus.
   *
   * DREI ZUSTÄNDE FÜR DEN MENSCHEN, ZWEI FÜR DEN STIL. Das Skript löst „wie
   * das System" selbst auf und schreibt immer "light" oder "dark" hin. Der
   * Stil sieht deshalb nur zwei Zustände und braucht die Palette EINMAL —
   * dieselbe Entscheidung wie bei K&K COMPASS. Bei K&K WORKNEX steht
   * `data-theme="system"` im Attribut, und die dunkle Palette deshalb zweimal:
   * einmal für "dark", einmal in einer `prefers-color-scheme`-Abfrage. Das
   * sind fünfundzwanzig Farben doppelt, und beim nächsten neuen Ton pflegt
   * jemand nur eine der beiden Stellen.
   *
   * DIE WERTE SIND AUS DER HAUSPALETTE ÜBERNOMMEN (K&K COMPASS,
   * public/stil.css), nicht neu erfunden. Dort sind die Kontraste gemessen
   * und im Betrieb bestätigt. Die Helligkeiten sind NICHT umgedreht, sondern
   * gewählt: ein einfaches Invertieren macht aus einem freundlichen Blau ein
   * giftiges Gelb.
   *
   * DIE FALLE, DIE DEN UMBAU NÖTIG MACHTE: dieselbe Marke diente als SCHRIFT
   * und als FLÄCHE. `--navy` stand 17mal als Schriftfarbe und 5mal als
   * Hintergrund. Im Dunkeln muss die Schrift hell werden und der Kopf dunkel
   * bleiben — mit einer Marke für beides geht das nicht. Deshalb sind es
   * jetzt zwei: `--titel` für Schrift, `--chrom` für das dunkle Beiwerk.
   * Nachgezählt am 07.09.2026, nicht geraten.
   */
  :root{
    color-scheme: light;

    /* Das dunkle Beiwerk: Kopf, Fußzeile, Meldung. Es ist in BEIDEN Fassungen
       dunkel — deshalb eigene Marken und nicht --ink. Alles, was DARAUF steht,
       heißt --auf-chrom-* und wird nie getauscht. */
    --chrom:#14202E;
    --chrom-hoch:#1E3350;          /* das hellere Ende des Kopfverlaufs */
    --auf-chrom:#FFFFFF;
    --auf-chrom-soft:#B9C8DE;
    --auf-chrom-linie:rgba(255,255,255,.35);
    --auf-chrom-flaeche:rgba(255,255,255,.12);

    /* Schrift */
    --ink:#14202E;
    --ink-soft:#33475B;
    --muted:#5C6979;
    --titel:#1E3A63;               /* Überschriften, Namen, Kategorien */

    /* Flächen. Karten liegen ÜBER dem Grund der Seite, nicht darunter. */
    --paper:#EBEEF2;
    --surface:#FFFFFF;
    --flaeche-sanft:#F7FAFD;       /* Felder innerhalb einer Karte */
    --flaeche-mittel:#F1F6FC;      /* Kacheln, Reiter, Anhänge */
    --flaeche-warm:#FFFDF7;

    --line:#DBE1E8;
    --line-soft:#E9EDF1;
    --line-stark:#C9D2DC;

    /* Schrift AUF einer gefüllten Hausfarbe (Knopf, Zähler). */
    --auf-farbe:#FFFFFF;

    /* DIE HAUSFARBE VON K&K IMPULSE: VIOLETT.
       Jedes Werkzeug der Familie hat eine eigene, und sie sind alle belegt:
       FLOWRIZON blau #254ca6, CONNECT orange #E8883A, WORKNEX grün #0E7A5A,
       COMPASS türkis #17A9C0. Violett ist der freie Farbort.

       Ein helles Blau stand hier zwischenzeitlich und ist wieder weg: es lag
       in derselben Familie wie FLOWRIZON, und zwei Karten in der
       COMPASS-Übersicht sollen sich nicht ähneln.

       BERNSTEIN WÄRE THEMATISCH NAHELIEGEND — Glühbirne, Licht, Idee — UND
       IST GENAU DESHALB FALSCH: --amber ist im Haus die Warnfarbe. Eine
       Marke, die aussieht wie eine Warnung, ist keine Marke.

       NACHGEMESSEN, nicht nach Gefühl gewählt: auf dem Kopfbalken 5,88:1 —
       praktisch gleichauf mit COMPASS (5,86) und CONNECT (6,28). Der Abstand
       zu den vier Familienfarben liegt zwischen 152 und 209 im RGB-Raum, der
       zum Warnrot bei 204. Es ist also weder mit einem Geschwister noch mit
       einem Zustand zu verwechseln.

       --marke steht NUR auf dem immer dunklen Kopf und wird deshalb im
       Dunkeln nicht getauscht. Auf hellen Flächen wäre derselbe Ton mit
       2,41:1 unlesbar; dort gilt --marke-tief (5,45:1 auf dem Grund, 6,35:1
       auf einer Karte). */
    --marke:#A78BE8;
    --marke-tief:#6B4FA8;
    --marke-wash:#EFE9FB;

    /* Interaktion. Dasselbe Blau wie in der Hauspalette — es ist die Farbe,
       die alle vier Werkzeuge für Knöpfe und Verweise benutzen. */
    --primary:#254CA6;
    --primary-press:#1D3E85;
    --primary-wash:#EAF0FA;
    --primary-line:#C3D3EE;
    --primary-ring:rgba(37,76,166,.16);

    /* Zustände */
    --accent:#0E7A5A;
    --accent-deep:#0A5C44;
    --accent-wash:#E7F2EE;
    --accent-line:#BBE3C9;

    --amber:#B87514;
    --amber-wash:#FBF1DF;
    --amber-text:#6E4708;
    --amber-line:#EAD9A0;

    --danger:#BC3B2E;
    --danger-press:#96351F;
    --danger-wash:#F8E7E4;
    --danger-text:#8A3B3B;
    --danger-line:#F2D3D3;

    --schleier:rgba(20,32,46,.55);   /* hinter Overlays */
    --schatten:0 1px 3px rgba(20,32,46,.06),0 10px 28px rgba(20,32,46,.10);
    --schatten-hoch:0 12px 40px rgba(20,32,46,.30);
    /* Einzelfarbe für `filter: drop-shadow(...)` — das nimmt keine
       box-shadow-Marke, sondern braucht eine Farbe für sich. */
    --schatten-farbe:rgba(20,32,46,.18);
    /* Der Hauch unter einem gefüllten Knopf. Zwei Stufen, weil der Knopf beim
       Überfahren anhebt — mit einer Stufe fehlt die Bewegung. */
    --primary-glow:rgba(37,76,166,.35);
    --primary-glow-stark:rgba(37,76,166,.45);

    --serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  }

  /* ==========================================================================
   *  DIE DUNKLE PALETTE. Nur die Marken, die sich ändern.
   * ==========================================================================
   * Was hier fehlt, gilt aus der hellen Fassung weiter — --auf-chrom zum
   * Beispiel, denn der Kopf ist in beiden Fassungen dunkel.
   */
  :root[data-theme="dark"]{
    color-scheme: dark;

    --chrom:var(--kk-zweit,#0B1120);   /* Erscheinungsbild: Zweitfarbe gilt auch im Dunkeln */
    --chrom-hoch:#152340;

    --ink:#E6EBF5;                 /* nicht reinweiß, das flimmert */
    --ink-soft:#B7C2D6;
    --muted:#98A5BC;
    --titel:#CBD9F0;

    --paper:#101827;
    --surface:#182234;             /* Karten liegen DARÜBER, also heller */
    --flaeche-sanft:#1E2A3E;
    --flaeche-mittel:#233047;
    --flaeche-warm:#241E14;        /* derselbe warme Hauch, nur dunkel */

    --line:#2B3852;
    --line-soft:#232F45;
    --line-stark:#3A4763;

    /* Schrift auf einer gefüllten Hausfarbe wird DUNKEL — die Farbe selbst
       ist im Dunkeln die hellere von beiden. */
    --auf-farbe:#0B1120;

    --marke-tief:#B79CEE;          /* --marke bleibt, siehe oben */
    --marke-wash:#231A38;

    --primary:var(--kk-haupt,#6E9BE8); /* Erscheinungsbild: Hauptfarbe gilt auch im Dunkeln */
    --primary-press:#8FB4EF;
    --primary-wash:#152238;
    --primary-line:#2E4A78;
    --primary-ring:rgba(110,155,232,.24);

    /* Die zarten Töne kehren sich um: aus einem hellen Hauch wird ein
       dunkler, und die Farbe selbst wird heller, damit sie darauf trägt. */
    --accent:#46C48B;
    --accent-deep:#7FE0B4;
    --accent-wash:#12301F;
    --accent-line:#1F5138;

    --amber:#E0A93C;
    --amber-wash:#2A2113;
    --amber-text:#E8C878;
    --amber-line:#4A3C1C;

    --danger:#E8776A;
    --danger-press:#F09A8F;
    --danger-wash:#2D1917;
    --danger-text:#F0A79D;
    --danger-line:#4A2622;

    --schleier:rgba(3,7,14,.66);
    --schatten:0 1px 3px rgba(0,0,0,.40),0 10px 28px rgba(0,0,0,.50);
    --schatten-hoch:0 12px 40px rgba(0,0,0,.62);
    --schatten-farbe:rgba(0,0,0,.55);
    /* Im Dunkeln zurückhaltender: ein Leuchten um einen hellen Knopf auf
       dunklem Grund wirkt schnell wie ein Fehler im Bildschirm. */
    --primary-glow:rgba(110,155,232,.26);
    --primary-glow-stark:rgba(110,155,232,.38);
  }
  *{box-sizing:border-box;margin:0;padding:0}

  /* ---------- Fokus: sichtbar fuer die Tastatur ---------- */
  /* Uebernommen aus K&K CONNECT, das dieselbe eine Zeile fuehrt. Sie gibt
     JEDEM bedienbaren Element ein Fokuszeichen - Schaltflaechen, Verweisen,
     Reitern, Marken. Bis zum 09.10.2026 hatte dieser Stil ueberhaupt kein
     :focus-visible; Schaltflaechen hingen am Vorgabering des Browsers.

     WARUM :focus-visible UND NICHT :focus. Nachgemessen am 09.10.2026 in
     diesem Browser: ein <button> passt nach einem Klick auf :focus, aber
     NICHT auf :focus-visible - ein <input> und ein <select> auf beides. Der
     Ring erscheint also dort, wo er gebraucht wird (Tastatur), und nicht als
     Nachklang eines Mausklicks.

     DIE ZWEITE ZEILE IST KEINE ZIERDE, SIE IST GERECHNET. Kopfband, Kopf der
     Verwaltung, Meldungskasten und seit dem 09.10.2026 auch der FUSS sind in
     BEIDEN Fassungen dunkel. --primary liegt
     dort bei 2,09 bzw. 1,62 zu eins - die Anforderung fuer ein Bedienzeichen
     ist 3,0. --auf-chrom schafft 16,46 bzw. 12,77. Eine Farbe kann beides
     nicht; deshalb zwei Regeln. */
  *:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
  .topbar *:focus-visible,
  .admin-head *:focus-visible,
  .toast *:focus-visible,
  footer *:focus-visible{outline-color:var(--auf-chrom);}
  body{
    font-family:var(--sans);
    background:var(--paper);
    color:var(--ink);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }

  /* ---------- Header ---------- */
  header.topbar{
    background:linear-gradient(135deg,var(--chrom) 0%,var(--chrom-hoch) 100%);
    color:var(--auf-chrom);
    padding:18px 26px;
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  }
  /* ==========================================================================
   *  DER KOPF: ZEICHEN, WORTMARKE, ANSPRUCH
   * ==========================================================================
   *
   * DIE MASSE SIND DIE VON K&K CONNECT (08.09.2026, auf Ansage: „Die
   * Darstellung im Kopf sollte für alle Tools identisch sein"). Nachgemessen
   * aus dessen Quelle (Kalkulation_CMS/public/styles.css):
   *
   *     .app-mark { height:52px; width:52px; border-radius:11px;
   *                 box-shadow:0 1px 5px rgba(0,0,0,.30); }
   *     .wordmark { gap:13px; }
   *     .wordmark .sub      { font-size:20px; font-weight:600;
   *                           letter-spacing:.01em; }
   *     .wordmark .wm-text  { line-height:1.1; }
   *     .wordmark .wm-claim { font-size:11px; font-style:italic;
   *                           font-weight:500; margin-top:1px; }
   *
   * ══ RICHTIGSTELLUNG ══
   *
   * HIER STAND, alle Maße seien aus K&K FLOWRIZON übernommen und „K&K COMPASS,
   * K&K CONNECT und K&K WORKNEX halten es gleich". **Das war falsch**, und
   * zwar nicht nur hier: dieselbe Behauptung stand in COMPASS und im
   * Änderungsblatt dieses Projekts. Am 08.09.2026 sind alle vier Quellen
   * nachgemessen worden — sie waren NIE einheitlich:
   *
   *     CONNECT    52 px, Radius 11, Schatten, 20 px/600, Anspruch 11 px
   *     FLOWRIZON  46 px, Radius  7, ohne,     20 px/700, Anspruch 12,5 px
   *     COMPASS    46 px, ohne Radius, ohne,   20 px/600, Anspruch 12,5 px
   *     WORKNEX    44 px, ohne Radius, ohne,   17 px/700, Anspruch 11 px
   *
   * Die Sätze über die Einheitlichkeit waren also voneinander abgeschrieben,
   * nicht nachgemessen. Merkposten: eine Behauptung über ein anderes Projekt
   * gehört gemessen, nicht zitiert — sonst wandert ein Irrtum durch die
   * Familie und sieht auf jeder neuen Station belegter aus.
   *
   * Seit dem 08.09.2026 gilt CONNECT als Hausstandard; die drei anderen sind
   * am selben Tag nachgezogen worden.
   */
  /* 13 PX - CONNECTs Wert (08.09.2026, auf Ansage zum Hausstandard bestimmt).
     Hier standen 12, uebernommen aus K&K FLOWRIZON; siehe die Richtigstellung
     im Kopf dieses Abschnitts. */
  .brand{display:flex;align-items:center;gap:13px}

  /*
   * DAS ZEICHEN: 52 x 52, Eckenradius 11 — CONNECTs Maß, siehe die
   * Richtigstellung oben. Vorher standen hier 46 mit Radius 7 (FLOWRIZONs Maß)
   * und davor 44 ohne Radius (WORKNEX' damaliges Maß).
   *
   * Es steht als eingebettetes SVG in der index.html und nicht als Bilddatei;
   * Begründung dort im Kommentar bei ZEICHEN:ANFANG.
   *
   * ZWEI ZUTATEN SIND WIEDER WEG, beide von mir und beide überflüssig: eine
   * weiße Platte hinter dem Zeichen und danach ein 1px-Rahmen. Sie sollten
   * verdecken, dass die Kachel im Kopfzeichen fehlte, weil
   * tools/zeichen-einsetzen.py ihr width und height mitgestrichen hatte. Seit
   * das behoben ist, braucht es sie nicht. Keines der vier Werkzeuge hat eine.
   */
  /* 52 x 52 MIT 11 PX RADIUS UND SCHATTEN - CONNECTs Werte. Hier standen 46
     mit 7 px, uebernommen aus FLOWRIZON.

     DER SCHATTEN IST KEINE ZIERDE: die Kachel des Zeichens ist Markenblau
     (#003DA5) und steht auf dem immer dunklen Kopfband. Ohne die Kante
     darunter laeuft sie in den Grund ueber, und der Radius waere gar nicht zu
     sehen. Dieselbe Ueberlegung wie in K&K WORKNEX.

     Die Groesse steht ALLEIN hier: das Zeichen ist ein eingebettetes SVG mit
     viewBox und ohne width/height im Text - anders als bei den drei anderen,
     wo die Angabe zusaetzlich im Bild steht und mit dieser Regel
     uebereinstimmen muss. */
  .brand .app-mark{width:52px;height:52px;flex:0 0 auto;display:block;
    border-radius:11px;box-shadow:0 1px 5px rgba(0,0,0,.30)}

  /*
   * DER TEXTBLOCK ist ein gewöhnlicher Block, kein Flex-Kasten. Bei FLOWRIZON
   * steht dort schlicht ein <div> um <h1> und den Anspruch; den Abstand macht
   * allein `margin-top:1px` am Anspruch. Vorher stand hier ein `flex column`
   * mit `gap:1px` — das ergab 2 px statt 1.
   */
  /* DIE ZEILENHOEHE STEHT JETZT HIER, nicht an den zwei Zeilen darunter -
     so haelt es CONNECT (.wm-text). Beide Zeilen erben sie damit, und es gibt
     nur eine Stelle, an der sie zu aendern waere. */
  .brand .wm-text{min-width:0;line-height:1.1}

  /*
   * DIE WORTMARKE. 20 px, fett, Sperrung 0,2 px — die Werte von
   * `header.top h1`.
   *
   * DIE ZEILENHÖHE MUSSTE AUSDRÜCKLICH DAZU. Bei FLOWRIZON erbt das <h1> die
   * normale Zeilenhöhe des Browsers (rund 1,2); diese Seite setzt aber
   * `body{line-height:1.5}`. Damit war der Kasten der Wortmarke 30 px hoch
   * statt 24 und der Textblock insgesamt höher — und weil er mittig zum
   * Zeichen steht, saßen beide Zeilen tiefer als dort.
   *
   * `var(--sans)` statt `var(--serif)`: in dieser Datei sind beide derselbe
   * System-Stapel, `--serif` ist ein irreführender Name aus der Zeit, als dort
   * wirklich eine Serifenschrift stand. Am Aussehen ändert sich nichts, am
   * Lesen des Stils schon.
   */
  .brand .mark{
    font-family:var(--sans);
    /* `display:block`, weil dies ein <span> ist. Bei FLOWRIZON stehen dort
       ein <h1> und ein <div> — beide von sich aus Blöcke. Ohne diese Zeile
       liefen Wortmarke und Anspruch in EINE Zeile, sobald der Flex-Kasten
       weg war. Aufgefallen beim Nachmessen: beide hatten dieselbe y-Lage. */
    display:block;
    /* Staerke 600 und 0,01em Sperrung - CONNECTs Werte (08.09.2026). Hier
       standen 700 und 0,2 px: das sind die Werte von FLOWRIZON, und die
       galten in diesem Blatt faelschlich als Hausstandard.
       DIE ZEILENHOEHE IST HERAUS und steht am Textblock darueber - dort, wo
       CONNECT sie hat. Sie MUSS irgendwo stehen: die Seite setzt
       body{line-height:1.5}, und weil der Textblock mittig zum Zeichen
       steht, saessen beide Zeilen sonst sichtbar zu tief. */
    font-size:20px;font-weight:600;letter-spacing:.01em;
    margin:0;
  }

  /* DIE WORTMARKE TRÄGT DIE HAUSFARBE, nicht das Kaufmanns-Und. Vorher war
     das „&" in „K&K" gefärbt — eine Eigenheit dieses Werkzeugs. Die Familie
     macht es anders: „K&K" in Weiß, der Name des Werkzeugs in der Hausfarbe
     (`.marke-flow`, `.marke-connect`, `.marke-wort`, `.marke`). */
  .brand .wortmarke{color:var(--marke)}

  /*
   * DER ANSPRUCH. Kursiv, 12,5 px, 1 px Abstand nach oben — die Werte von
   * `.marke-claim`. **Kein `font-weight`**: er läuft in normaler Stärke.
   * Vorher standen hier 500 und eine Sperrung von 0,3 px; beides hatte keiner
   * der vier.
   *
   * HIER STAND DER VERSATZ, und er ist der eigentliche Fund. Diese Regel trug
   * noch
   *
   *     border-left: 1px solid var(--auf-chrom-linie);
   *     padding-left: 14px;
   *
   * aus dem ursprünglichen Kopf, wo `.sub` der Untertitel war und NEBEN „K&K"
   * auf derselben Zeile stand, durch einen senkrechten Strich abgetrennt. Seit
   * der Anspruch DARUNTER steht, war das ein Strich vor dem Text und eine
   * Einrückung um 14 px gegen die Wortmarke. Beides ist weg.
   *
   * Merkposten: wenn ein Element seinen Platz wechselt, wechseln nicht
   * automatisch alle seine Regeln mit. Die Zeile wurde beim Umbau des Kopfes
   * dreimal angefasst, ohne dass der Rahmen auffiel — gesehen hat ihn erst
   * jemand, der das Ergebnis neben FLOWRIZON gelegt hat.
   *
   * DIE FARBE IST BEWUSST EINE ANDERE ALS BEI FLOWRIZON. Dort steht
   * `var(--text)` mit `opacity:0.72`, weil dessen Kopfzeile mit der
   * Darstellung umschaltet. Hier ist der Kopf in beiden Fassungen dunkel,
   * also ein festes helles Grau — genau die Überlegung, die COMPASS im Kopf
   * von `.wm-claim` aufschreibt. Gemessen: 9,70:1 hell, 11,10:1 dunkel.
   */
  .brand .sub{
    font-family:var(--sans);
    display:block;                 /* siehe Wortmarke */
    /* 11 PX UND STAERKE 500 - CONNECTs Werte. Hier standen 12,5 px ohne
       Staerkeangabe; der Kommentar darueber nannte das ausdruecklich als
       Hausstandard und berief sich auf FLOWRIZON. Nachgemessen am 08.09.2026:
       CONNECT hatte immer 11 px in Staerke 500.
       Die Zeilenhoehe ist heraus - sie kommt vom Textblock (1,1). */
    font-size:11px;font-style:italic;font-weight:500;margin-top:1px;
    color:var(--auf-chrom-soft);
  }
  .whoami{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--auf-chrom-soft)}
  /* ---------- Weg zurueck zur Uebersicht K&K COMPASS ----------
     WERTE WOERTLICH AUS K&K CLEARSHIFT uebernommen (backend/public/index.html,
     `.compass-link`) - auf Weisung vom 15.10.2026: "Es soll in allen Tools
     gleich aussehen."

     DAS IST DIE EINE STELLE, AN DER FESTE FARBEN RICHTIG SIND, und das
     widerspricht der Hausregel nur scheinbar. Die Regel will verhindern, dass
     eine Farbe bei einem Palettenwechsel zurueckbleibt. Hier ist das Gegenteil
     gewollt: der Knopf soll in FUENF Anwendungen gleich aussehen, und eine
     Palette, die ihn mitzieht, zoege ihn aus dieser Reihe heraus. Er sitzt
     ausserdem auf dem Kopfband, das in beiden Fassungen dunkel ist - es gibt
     also nichts mitzuziehen. NACHGERECHNET auf dem Verlauf des Bandes, gegen
     beide Enden: hell 10,64 und 8,25 zu eins, dunkel 12,17 und 10,08. Der
     schmalste Wert ist 8,25, die Anforderung 4,5.
     (Hier standen zuerst 11,15 und 12,76 - geschaetzt statt gerechnet. Eine
     Zahl im Kommentar ist eine Behauptung wie jede andere.)

     EINE ABWEICHUNG, UND NUR EINE: der Aussenabstand. Bei CLEARSHIFT steht der
     Verweis in einer senkrechten Leiste (`margin:10px 12px 0`), hier in einer
     waagerechten Kopfzeile. Alles andere - Polsterung, Radius, Rahmen, Farbe,
     Schriftgroesse und -staerke - ist unveraendert. */
  .compass-link{display:flex;align-items:center;gap:6px;margin:0 0 0 16px;padding:7px 11px;border-radius:9px;
    color:#C7D0E4;font-size:12.5px;font-weight:500;text-decoration:none;border:1px solid rgba(255,255,255,.12);
    flex:none;white-space:nowrap}
  .compass-link:hover{background:rgba(255,255,255,.06);color:#fff}
  .compass-link:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .compass-link[hidden]{display:none}
  .whoami b{color:var(--auf-chrom);font-weight:600}
  .whoami button{
    background:transparent;border:1px solid var(--auf-chrom-linie);color:var(--auf-chrom);
    border-radius:6px;padding:5px 10px;font-family:var(--sans);font-size:13px;cursor:pointer;
    transition:background .15s;
  }
  .whoami button:hover{background:var(--auf-chrom-flaeche)}

  .wrap{max-width:840px;margin:0 auto;padding:26px 20px 60px}

  /* ---------- Impuls des Tages (signature) ---------- */
  .weekly{
    position:relative;
    background:var(--surface);
    border:1px solid var(--line);
    border-left:5px solid var(--primary);
    border-radius:12px;
    padding:20px 22px 20px 24px;
    box-shadow:var(--schatten);
    margin-bottom:24px;
    overflow:hidden;
  }
  .weekly .spark{
    position:absolute;top:16px;right:20px;font-size:22px;
    filter:drop-shadow(0 1px 2px var(--primary-glow));
  }
  .weekly .eyebrow{
    font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
    color:var(--primary);margin-bottom:8px;
  }
  .weekly .prompt{
    font-family:var(--serif);font-size:21px;line-height:1.35;color:var(--titel);
    max-width:92%;
  }
  .weekly .kw{font-size:12px;color:var(--muted);margin-top:10px}

  /* ---------- Composer ---------- */
  .composer{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px;
    padding:18px;
    box-shadow:var(--schatten);
    margin-bottom:22px;
  }
  .composer textarea{
    width:100%;border:1px solid var(--line);border-radius:9px;
    padding:12px 14px;font-family:var(--sans);font-size:15px;color:var(--ink);
    resize:vertical;min-height:78px;background:var(--flaeche-sanft);
    transition:border-color .15s,box-shadow .15s;
  }
  .composer textarea:focus-visible{
    outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring);
  }
  .composer .row{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin-top:12px;flex-wrap:wrap;
  }
  select{
    border:1px solid var(--line);border-radius:8px;padding:9px 12px;
    font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--flaeche-sanft);cursor:pointer;
  }
  select:focus-visible{border-color:var(--primary)}
  .btn-primary{
    background:var(--primary);color:var(--auf-farbe);border:none;border-radius:8px;
    padding:11px 22px;font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer;
    text-transform:uppercase;letter-spacing:.6px;
    transition:transform .1s,background .15s,box-shadow .15s;
    box-shadow:0 2px 6px var(--primary-glow);
  }
  .btn-primary:hover{background:var(--primary-press);box-shadow:0 3px 10px var(--primary-glow-stark)}
  .btn-primary:active{transform:translateY(1px)}
  .btn-primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

  /* ---------- Filter bar ---------- */
  .toolbar{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin-bottom:16px;flex-wrap:wrap;
  }
  .filters{display:flex;gap:7px;flex-wrap:wrap}
  .chip{
    border:1px solid var(--line);background:var(--surface);color:var(--muted);
    border-radius:20px;padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer;
    /* Benannt statt `all`: sonst laeuft auch der Fokus-Umriss ein. 09.10.2026 */
    transition:background .15s,color .15s,border-color .15s;
  }
  .chip:hover{border-color:var(--primary);color:var(--primary)}
  /* Ein ausgewählter Filter ist eine AUSWAHL — im Haus ist das --primary.
     Vorher stand hier --navy (#123A6E); beim Umbau war das zunächst --chrom
     geworden, also fast schwarz. Das las sich wie ein abgeschalteter Knopf
     und nicht wie „dieser Filter ist aktiv". --chrom ist für Kopf, Fußzeile
     und Meldung, nicht für Zustände. */
  .chip.active{background:var(--primary);color:var(--auf-farbe);border-color:var(--primary)}
  .sortsel{font-size:13px}

  .stats{font-size:13px;color:var(--muted);margin:0 2px 14px}
  .stats b{color:var(--titel)}

  /* ---------- Feed ---------- */
  .feed{display:flex;flex-direction:column;gap:14px}
  .card{
    background:var(--surface);border:1px solid var(--line);border-radius:12px;
    padding:16px 18px;box-shadow:var(--schatten);
    animation:rise .35s ease both;
  }
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  /* DER KOPF DER KARTE DARF UMBRECHEN. Ohne `flex-wrap` stand hier eine
     Zeile, die nicht nachgeben konnte: das Kategorie-Etikett traegt
     `margin-left:auto` und `white-space:nowrap`, kann also weder schrumpfen
     noch umbrechen. Bei 375 Pixeln schob es die ganze SEITE seitwaerts -
     gemessen am 09.10.2026: Fensterbreite 375, Scrollbreite 518. Auf einem
     Telefon liess sich die Seite nach rechts ziehen, und niemand sucht den
     Grund dafuer in einer Kopfzeile.
     Das Etikett bleibt ungebrochen (ein Kategoriename in Versalien mit
     Sperrung, mitten im Wort getrennt, ist schlechter zu lesen als eine
     eigene Zeile) - es rutscht stattdessen als Ganzes nach unten und bleibt
     durch `margin-left:auto` rechtsbuendig.
     `min-width:0` am Namensblock gehoert dazu: ein Flex-Element gibt sonst
     nicht unter seine Inhaltsbreite nach, ein langer Name schoebe also
     weiter. */
  .card .head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}
  .avatar{
    width:34px;height:34px;border-radius:50%;flex:none;
    background:linear-gradient(135deg,var(--primary),var(--primary-press));
    color:var(--auf-farbe);font-weight:700;font-size:14px;
    display:flex;align-items:center;justify-content:center;
  }
  .card .meta{display:flex;flex-direction:column;line-height:1.25;min-width:0}
  .card .meta .name{font-weight:600;color:var(--titel);font-size:14px}
  .card .meta .time{font-size:12px;color:var(--muted)}
  .tag{
    margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.4px;
    text-transform:uppercase;padding:4px 10px;border-radius:6px;
    background:var(--primary-wash);color:var(--titel);white-space:nowrap;
  }
  .card .body{font-size:15px;color:var(--ink);white-space:pre-wrap;word-break:break-word}
  .card .actions{
    display:flex;align-items:center;gap:16px;margin-top:12px;padding-top:11px;
    border-top:1px solid var(--line);
  }
  .act{
    display:inline-flex;align-items:center;gap:6px;background:none;border:none;
    font-family:var(--sans);font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;
    padding:4px 6px;border-radius:6px;transition:color .15s,background .15s;
  }
  .act:hover{color:var(--primary);background:var(--primary-wash)}
  .act.liked{color:var(--primary)}
  .act .ic{font-size:15px}
  .del{margin-left:auto}
  .del:hover{color:var(--danger);background:var(--danger-wash)}

  /* ---------- Comments ---------- */
  .comments{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);display:none}
  .comments.open{display:block}
  .comment{display:flex;gap:9px;margin-bottom:10px}
  .comment .av{
    width:26px;height:26px;border-radius:50%;flex:none;background:var(--primary-wash);
    color:var(--titel);font-weight:700;font-size:11px;display:flex;align-items:center;justify-content:center;
  }
  .comment .ctext{font-size:13.5px}
  .comment .cname{font-weight:600;color:var(--titel)}
  .comment .ctime{font-size:11px;color:var(--muted);margin-left:6px}
  .cinput{display:flex;gap:8px;margin-top:8px}
  .cinput input{
    flex:1;border:1px solid var(--line);border-radius:8px;padding:8px 11px;
    font-family:var(--sans);font-size:13.5px;background:var(--flaeche-sanft);
  }
  .cinput input:focus-visible{border-color:var(--primary)}
  .cinput button{
    background:var(--primary-press);color:var(--auf-farbe);border:none;border-radius:8px;padding:8px 14px;
    font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;
  }
  .cinput button:hover{background:var(--primary)}

  /* ---------- Empty state ---------- */
  .empty{
    text-align:center;padding:48px 20px;color:var(--muted);
    background:var(--surface);border:1px dashed var(--line);border-radius:12px;
  }
  .empty .big{font-family:var(--serif);font-size:20px;color:var(--titel);margin-bottom:6px}

  /* ---------- Footer ---------- */
  /* ---------- Fuss ---------- */
  /* FORM VON K&K COMPASS UEBERNOMMEN (dort public/stil.css, `footer` und
     `.foot-inner`): ein Band ueber die ganze Breite in --chrom, darin ein
     Inhalt, der auf die Seitenbreite begrenzt bleibt, Punkte als Trenner.

     K&K CONNECT hat KEINEN Seitenfuss - dort gibt es nur einen Dokumentfuss
     in der Kundenansicht (.cv-foot, heller Grund, Linie oben, mittig). Als
     Vorbild fuer eine Anwendungsseite taugt er nicht; Modell ist COMPASS
     allein. Das steht hier, damit niemand ihn noch einmal sucht.

     ZWEI UNTERSCHIEDE ZU COMPASS, BEIDE MIT GRUND:
     - COMPASS schreibt die Textfarbe als festen Wert hin (#9FB0C0). Hier
       steht --auf-chrom-soft, der Ton, den das Kopfband schon fuehrt. Eine
       feste Farbe im Fuss ist genau der Rest, den die naechste
       Palettenaenderung uebersieht.
     - Die Breite ist 840 und nicht 1180: das ist die Breite von .wrap, und
       der Fussinhalt soll unter dem Seiteninhalt stehen, nicht daneben.

     DER VERWEIS MUSSTE DIE FARBE WECHSELN. Vorher war der Fuss hell und der
     Verweis stand in --primary. Auf dem dunklen Band erreicht --primary nur
     2,09 zu eins (gemessen 09.10.2026, Anforderung 4,5). --auf-chrom schafft
     16,46 hell und 18,83 dunkel, der Fusstext in --auf-chrom-soft 9,70 und
     11,10. Wer den Fuss wieder hell macht, muss den Verweis mit zurueckholen.

     Die Regel `.foot button` ist weggefallen: im Fuss steht keine
     Schaltflaeche, sie war seit dem Umbau der Dialoge tot. */
  footer{
    background:var(--chrom);color:var(--auf-chrom-soft);margin-top:40px;
  }
  /* DIE POLSTERUNG IST DIE VON .wrap, NICHT DIE VON COMPASS. Dort steht am
     `footer` ein clamp(16px,4vw,40px) und am Inhalt gar keine - das passt
     dort, weil der Seitenkoerper dieselbe Klammer fuehrt. Hier fuehrt .wrap
     feste 20px (eng: 14px). Mit COMPASS' Klammer stand die linke Kante des
     Fusses 20px neben der des Textes darueber - nachgemessen 97 gegen 117.
     Also spiegelt .foot-inner einfach .wrap: gleiche Breite, gleiche
     Polsterung, gleiche Mitte. Dann stimmt die Kante in jeder Fensterbreite
     und nicht nur in der, in der man zufaellig nachgesehen hat. */
  .foot-inner{
    max-width:840px;margin:0 auto;padding:14px 20px;
    display:flex;flex-wrap:wrap;gap:8px;align-items:center;
    font-size:12px;line-height:1.5;
  }
  .foot-inner a{color:var(--auf-chrom);text-decoration:underline}
  .foot-inner a:hover{color:var(--auf-chrom);text-decoration-thickness:2px}
  .trenner{opacity:.5}
  /* Der Tipp bekommt eine eigene Zeile: er ist laenger als die drei Angaben
     davor und wuerde sie sonst auseinanderziehen. */
  .foot-tipp{flex-basis:100%;opacity:.75}

  /* ---------- Name modal ---------- */
  .overlay{
    position:fixed;inset:0;background:var(--schleier);
    display:none;align-items:center;justify-content:center;padding:20px;z-index:50;
  }
  .overlay.show{display:flex}
  .modal{
    background:var(--surface);border-radius:14px;padding:28px;max-width:400px;width:100%;
    box-shadow:var(--schatten-hoch);text-align:center;
  }
  .modal h2{font-family:var(--serif);color:var(--titel);font-size:22px;margin-bottom:8px}
  .modal p{color:var(--muted);font-size:14px;margin-bottom:18px}
  .modal input{
    width:100%;border:1px solid var(--line);border-radius:9px;padding:12px 14px;
    font-family:var(--sans);font-size:16px;text-align:center;margin-bottom:16px;
  }
  .modal input:focus-visible{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring)}

  /* ---------- Erwähnungen ---------- */
  .mention{color:var(--primary);font-weight:600;background:var(--primary-wash);
    padding:1px 6px;border-radius:5px;white-space:nowrap;}
  .mention.me{color:var(--titel);background:var(--primary-wash);}
  .card.mentions-me{border-left:4px solid var(--primary);background:linear-gradient(0deg,var(--surface),var(--primary-wash));}
  .foryou{display:inline-flex;align-items:center;gap:4px;
    font-size:11px;font-weight:700;letter-spacing:.3px;color:var(--titel);
    background:var(--primary-wash);padding:3px 9px;border-radius:6px;white-space:nowrap;}

  /* ---------- Glocke / Benachrichtigungen ---------- */
  .bell{position:relative;background:transparent;border:1px solid var(--auf-chrom-linie);
    color:var(--auf-chrom);border-radius:8px;width:40px;height:34px;cursor:pointer;font-size:16px;
    display:flex;align-items:center;justify-content:center;transition:background .15s;}
  .bell:hover{background:var(--auf-chrom-flaeche);}
  .bell .count{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 4px;
    background:var(--primary);color:var(--auf-farbe);border-radius:9px;font-size:11px;font-weight:800;
    display:none;align-items:center;justify-content:center;line-height:1;}
  .bell.has .count{display:flex;}
  .bell.has{border-color:var(--primary);}
  .panel{position:fixed;top:60px;right:20px;width:330px;max-width:calc(100vw - 32px);
    background:var(--surface);border:1px solid var(--line);border-radius:12px;
    box-shadow:var(--schatten-hoch);z-index:45;display:none;overflow:hidden;}
  .panel.show{display:block;}
  .panel .ph{padding:12px 15px;border-bottom:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;}
  .panel .ph b{font-family:var(--serif);color:var(--titel);font-size:15px;}
  .panel .ph button{background:none;border:none;color:var(--primary);
    font-family:var(--sans);font-size:12px;cursor:pointer;text-decoration:underline;}
  .plist{max-height:340px;overflow:auto;}
  .pitem{padding:12px 15px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s;}
  .pitem:last-child{border-bottom:none;}
  .pitem:hover{background:var(--flaeche-mittel);}
  .pitem .pby{font-size:13px;color:var(--titel);font-weight:600;}
  .pitem .pby span{font-weight:400;color:var(--muted);}
  .pitem .psnip{font-size:12.5px;color:var(--muted);margin-top:3px;
    overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
  .pempty{padding:22px 15px;text-align:center;color:var(--muted);font-size:13px;}

  /* ---------- Erwähnungs-Autocomplete ---------- */
  .mention-dd{position:absolute;z-index:60;background:var(--surface);border:1px solid var(--line);
    border-radius:9px;box-shadow:var(--schatten);overflow:hidden;display:none;min-width:180px;}
  .mac-item{padding:8px 13px;font-size:14px;color:var(--ink);cursor:pointer;
    display:flex;align-items:center;gap:8px;}
  .mac-item:hover,.mac-item.sel{background:var(--primary);color:var(--auf-farbe);}
  .mac-item .mav{width:22px;height:22px;border-radius:50%;background:var(--primary-wash);color:var(--titel);
    font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;}
  .mac-item:hover .mav,.mac-item.sel .mav{background:var(--auf-chrom-linie);color:var(--auf-farbe);}

  /* ---------- Karten-Flash beim Anspringen ---------- */
  @keyframes flash{0%,100%{box-shadow:var(--schatten);}30%{box-shadow:0 0 0 3px var(--primary);}}
  .card.flash{animation:flash 1.1s ease 2;}

  /* ---------- Toast ---------- */
  .toast-wrap{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:70;
    display:flex;flex-direction:column;gap:8px;align-items:center;}
  .toast{background:var(--chrom);color:var(--auf-chrom);padding:11px 18px;border-radius:9px;font-size:14px;
    box-shadow:var(--schatten-hoch);animation:rise .25s ease both;max-width:90vw;}
  .toast b{color:var(--auf-chrom-soft);}

  /* ---------- Zahnrad ---------- */
  /* Der Darstellungsknopf sieht aus wie Glocke und Zahnrad — er gehört in
     dieselbe Reihe. Feste Breite, damit die Reihe beim Wechsel des Zeichens
     (◐ ☀ ☾ sind unterschiedlich breit) nicht springt. */
  .darstellung{background:transparent;border:1px solid var(--auf-chrom-linie);
    color:var(--auf-chrom);border-radius:8px;width:36px;height:34px;cursor:pointer;
    font-size:15px;line-height:1;transition:background .15s;flex:none}
  .darstellung:hover{background:var(--auf-chrom-flaeche)}
  .gear{background:transparent;border:1px solid var(--auf-chrom-linie);color:var(--auf-chrom);
    border-radius:8px;width:36px;height:34px;cursor:pointer;font-size:15px;transition:background .15s;}
  .gear:hover{background:var(--auf-chrom-flaeche);}

  /* ---------- Admin-Fenster ---------- */
  .admin-overlay{align-items:flex-start;}
  .admin{background:var(--surface);border-radius:14px;width:100%;max-width:640px;margin:40px auto;
    box-shadow:var(--schatten-hoch);overflow:hidden;display:flex;flex-direction:column;max-height:88vh;}
  .admin-head{background:linear-gradient(135deg,var(--chrom),var(--chrom-hoch));color:var(--auf-chrom);
    padding:16px 20px;display:flex;align-items:center;justify-content:space-between;}
  .admin-head b{font-family:var(--serif);font-size:19px;}
  .admin-head button{background:transparent;border:none;color:var(--auf-chrom);font-size:20px;cursor:pointer;line-height:1;}
  .admin-tabs{display:flex;gap:2px;padding:0 10px;background:var(--flaeche-mittel);border-bottom:1px solid var(--line);flex-wrap:wrap;}
  .atab{background:none;border:none;padding:12px 13px;font-family:var(--sans);font-size:13.5px;font-weight:600;
    color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;}
  .atab:hover{color:var(--titel);}
  .atab.active{color:var(--titel);border-bottom-color:var(--primary);}
  .admin-body{padding:20px;overflow:auto;}
  .admin-body h3{font-family:var(--serif);color:var(--titel);font-size:16px;margin-bottom:6px;}
  .admin-body p.hint{font-size:13px;color:var(--muted);margin-bottom:14px;}
  .arow{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;align-items:center;}
  .arow input[type=text],.arow input[type=email],.admin-body input.full{
    flex:1;min-width:150px;border:1px solid var(--line);border-radius:8px;padding:9px 12px;
    font-family:var(--sans);font-size:14px;background:var(--flaeche-sanft);color:var(--ink);}
  .admin-body input:focus-visible,.admin-body textarea:focus-visible{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring);}
  .admin-body textarea{width:100%;min-height:150px;border:1px solid var(--line);border-radius:9px;
    padding:11px 13px;font-family:var(--sans);font-size:14px;background:var(--flaeche-sanft);resize:vertical;line-height:1.7;color:var(--ink);}
  .abtn{background:var(--primary);color:var(--auf-farbe);border:none;border-radius:8px;padding:9px 16px;
    font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s;}
  .abtn:hover{background:var(--primary-press);}
  .abtn.sec{background:var(--primary-press);color:var(--auf-farbe);}
  .abtn.sec:hover{background:var(--primary);}
  .abtn.ghost{background:transparent;border:1px solid var(--line);color:var(--muted);font-weight:600;}
  .abtn.ghost:hover{border-color:var(--primary);color:var(--primary);}
  .abtn.danger{background:var(--surface);border:1px solid var(--danger-line);color:var(--danger);font-weight:600;}
  .abtn.danger:hover{background:var(--danger-wash);}
  .alist{border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:6px;}
  .arowitem{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);}
  .arowitem:last-child{border-bottom:none;}
  .arowitem .ravatar{width:30px;height:30px;border-radius:50%;flex:none;
    background:linear-gradient(135deg,var(--primary),var(--primary-press));color:var(--auf-farbe);font-weight:700;font-size:12px;
    display:flex;align-items:center;justify-content:center;}
  .arowitem .rmeta{flex:1;min-width:0;}
  .arowitem .rname{font-weight:600;color:var(--titel);font-size:14px;}
  .arowitem .remail{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .arowitem .ractions{display:flex;gap:6px;flex:none;}
  .miniempty{padding:16px;text-align:center;color:var(--muted);font-size:13px;}
  .afield{margin-bottom:16px;}
  .afield label{display:block;font-size:13px;font-weight:600;color:var(--titel);margin-bottom:5px;}
  .achk{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink);cursor:pointer;margin-bottom:14px;}
  .achk input{width:17px;height:17px;accent-color:var(--primary);}
  .adivider{height:1px;background:var(--line);margin:18px 0;}
  .note{background:var(--primary-wash);border-left:3px solid var(--primary);border-radius:6px;padding:10px 12px;
    font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.5;}

  /* ---------- Composer-Hinweis & Anhänge ---------- */
  .composer-hint{font-size:12.5px;color:var(--muted);margin-top:9px;}
  .composer-hint b{color:var(--primary);font-weight:600;}
  .row-left{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
  .attach-btn{background:transparent;border:1px solid var(--line);border-radius:8px;padding:9px 13px;
    font-family:var(--sans);font-size:14px;color:var(--muted);cursor:pointer;font-weight:600;transition:color .15s,border-color .15s;}
  .attach-btn:hover{border-color:var(--primary);color:var(--primary);}
  .pending{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;}
  .att-chip{display:inline-flex;align-items:center;gap:6px;background:var(--primary-wash);border:1px solid var(--line);
    border-radius:20px;padding:5px 11px;font-size:13px;color:var(--ink);max-width:100%;}
  .att-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px;}
  .att-chip button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;padding:0 2px;line-height:1;}
  .att-chip button:hover{color:var(--danger);}
  .att-wrap{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
  .att-imgwrap{display:block;line-height:0;}
  .att-img{max-height:260px;width:auto;max-width:100%;border-radius:9px;border:1px solid var(--line);object-fit:cover;}
  .att-vid{max-height:300px;width:auto;max-width:100%;border-radius:9px;border:1px solid var(--line);background:#000; /* Letterkasten hinter einem Video: in beiden Fassungen schwarz, das ist kein Themenfehler */}
  .att-doc{display:inline-flex;align-items:center;gap:8px;background:var(--flaeche-mittel);border:1px solid var(--line);
    border-radius:9px;padding:9px 13px;font-size:13.5px;color:var(--titel);text-decoration:none;font-weight:600;}
  .att-doc:hover{border-color:var(--primary);}
  .att-doc em{font-style:normal;color:var(--muted);font-weight:400;font-size:12px;}
  .att-doc.missing{color:var(--muted);cursor:default;background:transparent;font-weight:400;}
  audio{max-width:100%;height:40px;}

  /* ---------- Suche & Bearbeiten ---------- */
  .searchbar{margin-bottom:12px;}
  .searchbar input{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 14px;
    font-family:var(--sans);font-size:14px;background:var(--surface);color:var(--ink);}
  .searchbar input:focus-visible{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring);}
  .chip.mentionchip{color:var(--titel);border-color:var(--auf-chrom-soft);}
  .chip.mentionchip:hover{color:var(--titel);border-color:var(--primary);}
  .chip.mentionchip.active{background:var(--primary);color:var(--auf-farbe);border-color:var(--primary);}
  /* Der Rahmen in der Hausfarbe bleibt: er sagt „diese Karte wird gerade
     bearbeitet". Der Ring ist hierher gewandert, denn er sagt etwas anderes —
     „hier steht der Cursor". Vorher trug ihn die Ruhestellung, und :focus
     setzte nur outline:none dagegen: beide Zustaende sahen gleich aus, der
     Fokus war unsichtbar. Ein Zeichen, das immer an ist, zeigt nichts an.
     Gefunden und behoben am 09.10.2026. Ring allein als Fokuszeichen ist im
     Haus eingefuehrt, siehe .arowitem.editing input:focus. */
  .edit-box textarea{width:100%;border:1px solid var(--primary);border-radius:9px;padding:10px 12px;
    font-family:var(--sans);font-size:15px;background:var(--flaeche-sanft);color:var(--ink);resize:vertical;min-height:70px;}
  .edit-box textarea:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-ring);}
  .edit-actions{display:flex;gap:8px;margin-top:8px;}
  .cedit{background:none;border:none;color:var(--muted);cursor:pointer;font-size:12px;padding:0 3px;line-height:1;}
  .cedit:hover{color:var(--primary);}

  .cattach{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:0 8px;flex:none;}
  .cattach:hover{color:var(--primary);}
  .cpend{margin:0 0 8px;}
  .comment .att-img,.comment .att-vid{max-height:180px;}

  /* ---------- Reaktionen ---------- */
  .react-wrap{position:relative;display:inline-flex;}
  .react-toggle.has{color:var(--primary);font-weight:700;}
  .react-menu{position:absolute;bottom:100%;left:0;margin-bottom:6px;background:var(--surface);
    border:1px solid var(--line);border-radius:12px;box-shadow:var(--schatten);
    padding:5px;display:none;gap:2px;z-index:25;}
  .react-menu.open{display:flex;}
  .react-opt{background:none;border:none;font-size:20px;cursor:pointer;padding:6px 8px;border-radius:9px;
    line-height:1;transition:background .12s,transform .12s;}
  .react-opt:hover{background:var(--primary-wash);transform:scale(1.18);}
  .react-opt.chosen{background:var(--primary-wash);}
  .react-summary{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;}
  .rchip{display:inline-flex;align-items:center;gap:4px;background:var(--flaeche-mittel);border:1px solid var(--line);
    border-radius:16px;padding:3px 11px;font-size:13px;color:var(--ink);cursor:pointer;transition:border-color .12s,background .12s;}
  .rchip:hover{border-color:var(--primary);}
  .rchip.chosen{background:var(--primary-wash);border-color:var(--primary);color:var(--titel);font-weight:600;}

  @media (max-width:520px){
    .brand .sub{display:none}
    .weekly .prompt{font-size:18px;max-width:100%}
    .weekly .spark{display:none}
    .wrap{padding:18px 14px 48px;}
    .foot-inner{padding:14px;}
    .topbar{padding:14px 16px;}
    .brand .mark{font-size:18px;}
    .whoami{font-size:13px;gap:7px;}
    .actions{gap:10px;flex-wrap:wrap;}
    .act{padding:6px 4px;}
    .att-img,.att-vid{max-height:200px;}
    .panel{left:10px;right:10px;width:auto;top:56px;}
    .admin{margin:12px auto;max-height:92vh;border-radius:12px;}
    .admin-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;}
    .atab{white-space:nowrap;}
    .admin-body{padding:16px;}
    .arow input[type=text],.arow input[type=email]{min-width:0;}
    .composer .row{gap:10px;}
    .row-left{width:100%;}
    .btn-primary{width:100%;}
    .chip{padding:7px 13px;}
  }
  @media (prefers-reduced-motion:reduce){
    .card{animation:none}
    *{transition:none!important}
  }

/* ---------- Ergänzungen: Benutzerliste, Protokoll-Tabelle ---------- */
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.3px;
  background:var(--primary-wash);color:var(--titel);border-radius:20px;padding:1px 8px;margin-left:6px;vertical-align:middle}
.badge.off{background:var(--danger-wash);color:var(--danger-text)}
.atablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;margin-top:6px}
.atable{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
.atable th{text-align:left;background:var(--flaeche-sanft);color:var(--muted);font-weight:700;
  padding:9px 12px;border-bottom:1px solid var(--line);position:sticky;top:0}
.atable td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.atable tr:last-child td{border-bottom:none}
.atable .amono{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted);font-size:12px}
.atable .asub{font-size:11px;color:var(--muted)}
.pill{display:inline-block;font-size:11px;font-weight:700;background:var(--primary-wash);
  color:var(--titel);border-radius:6px;padding:2px 7px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.abtn.tiny{padding:3px 8px;font-size:11px}

/* ---------- Umgesetzt-Status & Auszeichnungen ---------- */
.done-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;
  background:var(--accent-wash);color:var(--accent-deep);border:1px solid var(--accent-line);border-radius:20px;padding:2px 10px;letter-spacing:.2px}
.card.done{border-left:4px solid var(--accent)}
.act.impl{color:var(--accent-deep);font-weight:600}
.act.impl.on{background:var(--accent-wash);border-radius:6px}
.atable .arank{font-size:16px;text-align:center;white-space:nowrap;width:44px}
.atable .anum{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.atable tr.top td{background:var(--flaeche-sanft)}
.atable tr.top .anum b{color:var(--titel)}

/* ---------- Ideen-Ranke (rechter Rand) ---------- */
.vine{
  position:fixed;right:10px;bottom:0;top:64px;width:140px;z-index:5;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  pointer-events:none;
}
.vine svg{filter:drop-shadow(0 2px 4px var(--schatten-farbe));transform-origin:bottom center;animation:sway 6s ease-in-out infinite}
.vine .blossom{transform-box:fill-box;transform-origin:center;animation:bloom .6s ease-out both}
.vine-cap{
  pointer-events:auto;margin-top:6px;text-align:center;font-size:12px;font-weight:700;color:var(--accent);
  background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:5px 9px;box-shadow:var(--schatten);
}
.vine-cap span{font-weight:500;color:var(--muted)}
@keyframes sway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
@keyframes bloom{0%{opacity:0;transform:scale(.2)}70%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
/* Auf schmaleren Fenstern ausblenden, damit der Inhalt nicht verdeckt wird */
@media (max-width:1180px){ .vine{display:none} }
@media (prefers-reduced-motion:reduce){ .vine svg{animation:none} .vine .blossom{animation:none} }
.badge.lead{background:var(--marke-wash);color:var(--marke-tief)}

/* ---------- Status, Level, Ablehngrund ---------- */
/*
 * Das Statusabzeichen ist der einzige Ort, an dem eine Farbe NICHT aus der
 * Palette kommt: `--sc` setzt app.js je Karte aus den Einstellungen, die der
 * Server liefert (`statuses[].color` — heute #5A6A7D, #B7791F, #1E7A44,
 * #B03636). Diese vier Werte sind für eine helle Seite gewählt und lassen
 * sich hier nicht umschalten; sie stehen in der Datenbank.
 *
 * DESHALB WIRD DIE SCHRIFTFARBE GERECHNET, NICHT GESETZT: 55 % Serverfarbe,
 * der Rest --ink. Das dunkelt sie in der hellen Fassung ab und hellt sie in
 * der dunklen auf — eine Regel für beide, weil --ink selbst umschaltet.
 *
 * NACHGEMESSEN am 07.09.2026 für alle vier Statusfarben in beiden Fassungen:
 * schlechtester Wert 5,07:1, bester 8,39:1.
 *
 * WAS VORHER WAR: `color:var(--sc)` unverändert. Das lag in der HELLEN
 * Fassung schon unter der Grenze — „In Prüfung" bei 3,11:1 und „Umgesetzt"
 * bei 4,40:1 — und wäre im Dunkeln auf 2,40 bis 3,72 gefallen. Der Mangel ist
 * älter als die Umstellung; gefunden hat ihn erst das Nachmessen.
 */
.status-badge{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:700;
  background:color-mix(in srgb, var(--sc) 16%, var(--surface));
  color:color-mix(in srgb, var(--sc) 55%, var(--ink));
  border:1px solid color-mix(in srgb, var(--sc) 40%, var(--surface));
  border-radius:20px;padding:2px 10px;letter-spacing:.2px}
.card.st-umgesetzt{border-left:4px solid var(--accent)}
.card.st-abgelehnt{border-left:4px solid var(--danger)}
.card.st-in_pruefung{border-left:4px solid var(--amber)}
.level-badge{display:inline-block;font-size:11px;font-weight:700;color:var(--amber-text);background:var(--amber-wash);
  border:1px solid var(--amber-line);border-radius:20px;padding:0 7px;margin-left:6px;vertical-align:middle}
.reject-note{margin:8px 0 2px;padding:8px 12px;background:var(--danger-wash);border:1px solid var(--danger-line);
  border-radius:8px;color:var(--danger-text);font-size:13px}
.statusctl{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--muted)}
.statusctl select{padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:var(--flaeche-sanft);font-size:13px}

/* ---------- Kennzahlen-Dashboard ---------- */
.kpi-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.kpi{flex:1 1 120px;min-width:120px;background:var(--flaeche-sanft);border:1px solid var(--line);border-radius:10px;padding:12px 14px;text-align:center}
.kpi-val{font-size:24px;font-weight:800;color:var(--titel);font-variant-numeric:tabular-nums}
.kpi-lbl{font-size:12px;color:var(--muted);margin-top:2px}
.bars{margin-top:6px;display:flex;flex-direction:column;gap:6px}
.bar-row{display:flex;align-items:center;gap:10px;font-size:13px}
.bar-lbl{flex:0 0 42%;color:var(--ink)}
.bar-track{flex:1;height:12px;background:var(--line-soft);border-radius:6px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--primary-press),var(--primary))}
.bar-n{flex:0 0 28px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}

  /* =========================================================================
     Eigene Rückfrage, Ablehnungsfeld, Umbenennen in der Zeile, Protokoll-Details
     -------------------------------------------------------------------------
     Angelegt 07.09.2026, als confirm(), prompt() und alert() aus app.js
     entfernt wurden (Hausregel 5). Die Klassennamen uc-* sind dieselben wie in
     K&K CONNECT (public/core.js), damit die Rückfrage in der Familie überall
     gleich aussieht.
     ========================================================================= */

  /* Über der Verwaltung (z-index 50) — sonst liegt die Rückfrage zum Löschen
     einer Kategorie hinter dem Fenster, aus dem sie aufgerufen wurde. */
  #ui-confirm{position:fixed;inset:0;background:var(--schleier);
    display:flex;align-items:center;justify-content:center;padding:20px;z-index:80;}
  #ui-confirm .uc-card{background:var(--surface);border-radius:14px;padding:24px 26px;
    max-width:430px;width:100%;box-shadow:var(--schatten-hoch);}
  #ui-confirm .uc-text{font-size:15px;line-height:1.55;color:var(--ink);}
  #ui-confirm .uc-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;}
  #ui-confirm .uc-btn{border-radius:8px;padding:9px 16px;font-family:var(--sans);
    font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s;}
  #ui-confirm .uc-cancel{background:transparent;border:1px solid var(--line);
    color:var(--muted);font-weight:600;}
  #ui-confirm .uc-cancel:hover{border-color:var(--primary);color:var(--primary);}
  #ui-confirm .uc-ok{background:var(--primary);color:var(--auf-farbe);border:none;}
  #ui-confirm .uc-ok:hover{background:var(--primary-press);}
  /* Die bestätigende Schaltfläche einer Löschung ist gefüllt rot, nicht nur
     rot umrandet: sie ist die Hauptaktion des Fensters und muss als solche
     zu erkennen sein — aber eben in der Farbe, die zum Innehalten mahnt. */
  #ui-confirm .uc-ok.uc-danger{background:var(--danger);}
  #ui-confirm .uc-ok.uc-danger:hover{background:var(--danger-press);}

  /* Begründung der Ablehnung — ein Feld auf der Karte, kein Dialog. */
  .reject-form{margin:8px 0 2px;padding:12px;background:var(--danger-wash);
    border:1px solid var(--danger-line);border-radius:8px;}
  .reject-form label{display:block;font-size:12px;font-weight:700;
    color:var(--danger-text);letter-spacing:.2px;margin-bottom:6px;}
  .reject-form textarea{width:100%;border:1px solid var(--danger-line);border-radius:7px;
    padding:9px 11px;font-family:var(--sans);font-size:14px;line-height:1.5;
    color:var(--ink);background:var(--surface);resize:vertical;}
  .reject-form textarea:focus-visible{border-color:var(--danger);}
  .reject-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;}

  /* „ändern" bzw. „Begründung nachtragen" in der Notiz selbst. */
  .reject-edit{background:transparent;border:none;padding:0 0 0 4px;
    font-family:var(--sans);font-size:13px;font-weight:600;color:var(--danger-text);
    text-decoration:underline;cursor:pointer;}
  .reject-edit:hover{color:var(--danger);}

  /* Abgelehnt, aber ohne Begründung — ein Mangel, nicht der Normalfall.
     Deshalb ein warnender Ton statt des roten: es fehlt etwas, das
     nachgetragen werden kann. */
  .reject-note.missing{background:var(--amber-wash);border-color:var(--amber-line);color:var(--amber-text);}
  .reject-note.missing .reject-edit{color:var(--amber-text);}
  .reject-note.missing .reject-edit:hover{color:var(--amber);}

  /* Kategorie wird gerade umbenannt. */
  .arowitem.editing{background:var(--flaeche-sanft);}
  .arowitem.editing input{width:100%;border:1px solid var(--primary);border-radius:7px;
    padding:7px 10px;font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--surface);}
  .arowitem.editing input:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-ring);}

  /* Vorher/Nachher im Protokoll — klappt in der Zeile auf. */
  /* Seit 09.10.2026 steht das Detail in einer eigenen Zeile über alle
     Spalten (siehe adminProtokoll in app.js), nicht mehr eingebettet in der
     Zelle „Zusammenfassung". Deshalb `block` statt `inline-block` und kein
     linker Abstand mehr.
     Die Eintragszeile und ihre Detailzeile gehören zusammen: die Trennlinie
     zwischen beiden fällt weg, damit das Protokoll nicht doppelt so viele
     Zeilen zu haben scheint, wie es Einträge hat. */
  .adetailrow td{border-top:none;padding-top:0;}
  .atable tr.mit-detail td{border-bottom:none;padding-bottom:4px;}
  .adetail{display:block;}
  .adetail summary{cursor:pointer;font-size:11px;font-weight:700;color:var(--primary);
    padding:3px 8px;border:1px solid var(--line);border-radius:8px;display:inline-block;}
  .adetail summary::marker,.adetail summary::-webkit-details-marker{display:none;content:'';}
  .adetail summary:hover{border-color:var(--primary);}
  .adetail pre{margin:8px 0 4px;padding:10px 12px;background:var(--flaeche-sanft);
    border:1px solid var(--line);border-radius:8px;font-size:12px;line-height:1.5;
    color:var(--ink);white-space:pre-wrap;word-break:break-word;max-height:260px;overflow:auto;}

/* =====================================================================
   ERGÄNZT AM 20.10.2026: Schrift wie K&K CONNECT und die Anmeldeseite.

   SCHRIFT. CONNECT setzt IBM Plex Sans. Hier lokal unter /fonts ausgeliefert
   statt von Google: die Content-Security-Policy erlaubt nur eigene Quellen,
   und Google Fonts überträgt die IP-Adresse jedes Besuchers (DSGVO).
   Überschrieben werden nur die zwei Schrift-Marken – alle Regeln oben
   bleiben, wie sie sind.

   ANMELDESEITE (/login). Wie die Anmeldekarte von K&K CONNECT: dunkler Grund,
   eine Karte, ein Knopf „Mit Microsoft anmelden". Sie steht ohne Anmeldung
   zur Verfügung und benutzt nur die Palette oben.
   ===================================================================== */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2");}
:root{
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

body.login-page{background:var(--chrom);}
#login-overlay{min-height:100vh;display:grid;place-items:center;padding:16px;}
.login-card{position:relative;background:var(--surface);border-radius:12px;padding:30px 28px 24px;
  width:min(380px,100%);box-shadow:var(--schatten-hoch);}
.login-logo{height:30px;width:auto;display:block;margin:0 0 18px;}
:root[data-theme="dark"] .login-logo{filter:brightness(0) invert(1);opacity:.9;}
.login-card h2{margin:0 0 2px;font-family:var(--sans);font-size:24px;font-weight:600;color:var(--ink);}
.login-card .marke-impulse{color:var(--marke-tief);}
.login-card p.sub{color:var(--muted);margin:0 0 22px;font-size:12.5px;font-style:italic;}
.login-ms-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:11px 12px;
  border:1px solid var(--line-stark);border-radius:8px;background:var(--surface);color:var(--ink);
  font-family:var(--sans);font-weight:600;font-size:14.5px;text-decoration:none;cursor:pointer;
  transition:background .15s,border-color .15s;}
.login-ms-btn:hover{background:var(--primary-wash);border-color:var(--primary);}
.login-ms-btn:focus-visible,.login-theme:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.login-foot{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.45;}
.login-hint{font-size:13px;color:var(--accent-deep);background:var(--accent-wash);border:1px solid var(--accent-line);
  border-radius:8px;padding:8px 11px;margin-bottom:14px;}
.login-error{color:var(--danger-text);font-size:13px;margin-top:10px;min-height:16px;}
.login-theme{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);
  background:transparent;color:var(--muted);cursor:pointer;font-size:15px;}
.login-theme:hover{color:var(--ink);border-color:var(--line-stark);}

/* =====================================================================
   ERSCHEINUNGSBILD (Baustein kk-erscheinungsbild, /_kk/erscheinungsbild).
   Ohne eigenes Logo bleibt alles wie bisher: das <img data-kk-logo> im Kopf
   hat kein src und ist verborgen. Sobald client.js ein Logo einsetzt, wird
   es gezeigt und das eingebettete Zeichen ausgeblendet.
   ===================================================================== */
.brand img.kk-logo-eigen:not([src]){display:none;}
.brand img.kk-logo-eigen[src]{display:block;object-fit:contain;box-shadow:none;border-radius:6px;}
.brand:has(img.kk-logo-eigen[src]) svg.app-mark{display:none;}
/* Das Standard-Logo der Anmeldeseite wird im Dunkeln weiß gefärbt; ein
   eigenes Bild bleibt, wie es ist. */
:root[data-theme="dark"] .login-logo[src^="/_kk/"]{filter:none;opacity:1;}

/* Verweis „Erscheinungsbild bearbeiten“ in der Verwaltung sieht aus wie ein Knopf. */
a.abtn{display:inline-block;text-decoration:none;}
/* Hilfe-Link unten links auf schmalen Bildschirmen: nicht fest am Fenster
   (dort läge er beim Scrollen über Filterknöpfen wie „Meine Ideen“, über
   Reaktionen und Verweisen), sondern fest am SEITENENDE, im freien Streifen
   unter der Fußzeile. So verdeckt er nie etwas und bleibt erreichbar.
   Der Baustein hängt #kk-hilfe als letztes Kind an <body>; body ist deshalb
   der Bezugsrahmen. */
@media (max-width:600px){
  body{position:relative;}
  footer .foot-inner{padding-bottom:58px;}
  body.login-page #login-overlay{padding-bottom:64px;}
  body > #kk-hilfe{position:absolute;bottom:10px;} /* body > : basis.css steht nach styles.css */
}