/* =========================================================================
   KIRA Design-System – app/static/css/kira.css

   Eine Datei für Token, Grundlayout und alle wiederkehrenden Bausteine.
   Seiten-spezifisches CSS gehört NICHT hierher, sondern nach
   app/static/css/<bereich>.css (eingebunden über den Block `head`).

   Doku für Seiten-Agenten: kira-redesign-unterlagen/design/DESIGN_SYSTEM.md

   Aufbau
     1  Schriften (Poppins, lokal – DSGVO: keine Google-Server)
     2  Token
     3  Marke im Mitarbeiterportal (.portal--marke)
     4  Grundelemente
     5  Typografie
     6  Hilfsklassen
     7  Admin-Rahmen (Sidebar, Kopfzeile, Seitenkopf)
     8  Mitarbeiterportal-Rahmen
     9  Raster
    10  Karten
    11  Knöpfe
    12  Pills
    13  Fortschritt, Ring, Meilensteine
    14  Avatare, Icon-Kacheln, Eyebrow, KPI
    15  Listen, Themen-Chips
    16  Reiter, Aufklapper
    17  Formulare (inkl. Farbwahl, Upload)
    18  Hinweise, Leerzustände
    19  Overlay / Gesprächsraum, Chat, Tabellen
    20  Fokus, Bewegung, Mobil
   ========================================================================= */


/* 1 ── Schriften ─────────────────────────────────────────────────────────
   Statische Poppins-Schnitte 400/500/600/700/800, je latin + latin-ext
   (latin-ext für Namen wie Şahin). Lizenz: fonts/OFL-Poppins.txt.
   Absolute Pfade: neue Dateinamen statt Versionsstempel.                  */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/poppins-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/poppins-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fonts/poppins-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fonts/poppins-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/poppins-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/poppins-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/poppins-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/static/fonts/poppins-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/static/fonts/poppins-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


/* 2 ── Token ─────────────────────────────────────────────────────────────
   Werte aus DESIGN_SPEC §1. Nur hellen Modus: Das Design hat keinen dunklen,
   und Kundenfarben sind nur für hell berechnet.                            */

:root {
  color-scheme: light;

  /* Schrift */
  --font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Flächen */
  --bg: #FFFBF3;
  --glow-a: rgba(255, 196, 90, .18);      /* oben rechts */
  --glow-b: rgba(255, 214, 140, .14);     /* unten links */
  --card: #FFFFFF;
  --line: #F1E7D6;                         /* Kartenrand, Trennlinien */
  --line-soft: #F4EEE3;
  --shadow-card: 0 20px 50px -24px rgba(170, 120, 40, .18), 0 2px 6px rgba(170, 120, 40, .04);
  --shadow-pop: 0 40px 90px -30px rgba(23, 21, 46, .45);

  /* Radien */
  --r-card: 28px;
  --r-sidebar: 32px;
  --r-inner: 16px;
  --r-input: 14px;
  --r-btn: 14px;
  --r-pill: 999px;
  --r-tile: 16px;

  /* KIRA-Farben */
  --primary: #FFAE00;
  --primary-2: #FDC64E;
  --grad-primary: linear-gradient(135deg, #FFAE00 0%, #FFC23D 100%);
  --glow: 0 12px 28px -10px rgba(255, 160, 0, .55);

  /* Text */
  --ink: #17152E;          /* H1–H3, fette Labels */
  --text: #3A3850;         /* Fließtext */
  --muted: #716F86;        /* Untertitel, Metadaten */
  --faint: #A3A1B5;        /* Platzhalter, "ARBEITSBEREICH" */
  --nav: #6E6C85;          /* Navigation */
  --eyebrow: #9A6400;      /* Überschriften über H1 */
  --link: #8A5700;

  /* Knöpfe */
  --sec-bg: #FFF8E8;  --sec-border: #F5D899;  --sec-fg: #8A5700;
  --ghost-bg: #FFFFFF; --ghost-border: #E7E3EE; --ghost-fg: #3A3850;

  /* Signalfarben – Fläche / Deko (Design) / lesbare Schrift (AA ≥ 4,5 auf der Fläche) */
  --amber-soft: #FFF1CF;   --amber: #E89A00;   --amber-ink: #8A5700;
  --pink-soft: #FDECF6;    --pink: #D6409F;    --pink-ink: #B8338A;   --pink-btn: #D95BB0;
  --green-soft: #E4F6EC;   --green: #1E8A55;   --green-ink: #197A4A;
  --red-soft: #FDECF1;     --red: #D6336C;     --red-ink: #C2255C;
  --lav-bg: #F4F2FD;       --lav-border: #E6E1FA; --lav-icon: #7A6FD8;
  --purple: #6C5CE7;       --purple-ink: #5B4BC4;
  --chip-bg: #F3F2F8;      --chip-fg: #5E5C74;
  --grey-soft: #F3F2F8;    --grey: #A3A1B5;    --grey-ink: #5E5C74;
  --cream-bg: #FFF9EC;     --cream-border: #F5DFAE;
  --ivory-bg: #FFFCF4;     --ivory-border: #F3E3BF;
  --sand-bg: #FFF3D6;
  --track: #F3EADB;        /* Fortschritts-Spur */

  /* Marke – im Admin immer KIRA. Im Portal überschreibt .portal--marke. */
  --brand: var(--primary);
  --brand-2: var(--primary-2);
  --brand-grad: var(--grad-primary);   /* Fläche für Primärknöpfe, Akzentkarte, aktive Nav */
  --brand-on: #FFFFFF;                 /* Schrift darauf (Design: weiß) */
  --brand-fill: var(--grad-primary);   /* Balken, Ring, Meilensteine */
  --brand-ink: #9A6400;                /* Markenfarbe als lesbare Schrift */
  --brand-soft: var(--amber-soft);
  --brand-glow: var(--glow);
  --focus: #9A6400;

  /* Kompatibilität: Namen, die branding.css_variablen() schreibt.
     Standardwerte = css_variablen('#FFAE00', '#FDC64E').                    */
  --accent: #ffae00;
  --accent-strong: #db9600;
  --accent-soft: #fff5e0;
  --accent-readable: #986900;
  --on-accent: #1f2530;
  --btn-bg: #ffae00;
  --btn-fg: #1f2530;
  --accent-2: #fdc64e;
  --accent-2-soft: #feefcd;

  /* Layout */
  --sidebar-w: clamp(264px, 21vw, 312px);
  --shell-pad: 36px;
  --shell-gap: clamp(32px, 4.9vw, 70px);
  --content-max: 1500px;
  --portal-max: 1440px;
  --gap: 24px;
  --gap-lg: 28px;
  --card-pad: clamp(20px, 2.3vw, 32px);
}


/* 3 ── Marke im Mitarbeiterportal ────────────────────────────────────────
   employee/_portal.html setzt die Klasse, wenn marke.css eingefügt wurde.
   Knöpfe folgen dann der Kontrastlogik aus branding.knopf() (--btn-bg/-fg),
   Schrift in Markenfarbe nutzt --accent-readable.                          */

.portal--marke {
  --brand: var(--accent);
  --brand-2: var(--accent-2);
  --brand-grad: var(--btn-bg);
  --brand-on: var(--btn-fg);
  --brand-fill: var(--accent);
  --brand-ink: var(--accent-readable);
  --brand-soft: var(--accent-soft);
  --brand-glow: 0 12px 28px -14px rgba(23, 21, 46, .35);
  --brand-glow: 0 12px 28px -10px color-mix(in srgb, var(--accent) 55%, transparent);
  --glow-a: color-mix(in srgb, var(--accent) 8%, transparent);
  --glow-b: color-mix(in srgb, var(--accent-2) 10%, transparent);
  --focus: var(--accent-readable);
  --eyebrow: var(--accent-readable);
  --link: var(--accent-readable);
}


/* 4 ── Grundelemente ─────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

/* Das hidden-Attribut gewinnt immer – auch gegen display:flex/grid. */
[hidden] { display: none !important; }

html { background: var(--bg); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Weiche Verläufe hinter allem (fest am Fenster). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, var(--glow-a) 0%, transparent 70%),
    radial-gradient(ellipse 60% 55% at 0% 100%, var(--glow-b) 0%, transparent 70%);
}

img, video { max-width: 100%; height: auto; }
iframe { border: 0; }
p { margin: 0 0 .75em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 .75em; padding-left: 1.25em; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
strong, b { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
code, kbd, .mono { font-family: var(--font-mono); font-size: .88em; }
code { background: #F6F2EA; padding: .1em .4em; border-radius: 6px; overflow-wrap: anywhere; }
button { font-family: inherit; }
summary { cursor: pointer; }

.icon { display: inline-block; flex-shrink: 0; vertical-align: -0.2em; }


/* 5 ── Typografie ────────────────────────────────────────────────────── */

h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; }

h1, .h1 {
  font-size: clamp(2.5rem, 1.9rem + 2.2vw, 3.75rem);   /* 40 → 60px */
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.02;
}
h2, .h2 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.625rem); letter-spacing: -.03em; }  /* Kartentitel 24–26px */
h3, .h3 { font-size: 1.1875rem; font-weight: 700; letter-spacing: -.02em; }
h4, .h4 { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }

/* Portal-Hero: bis 110px */
.display {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.75rem, 1rem + 6.2vw, 6.875rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
}

.subtitle, .lead {
  margin: 0;
  max-width: 880px;
  color: var(--muted);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);   /* 17 → 20px */
  font-weight: 400;
  line-height: 1.55;
}
.lead--lg { font-size: clamp(1.125rem, .95rem + .8vw, 1.625rem); max-width: 780px; }

.num-xl, .num-lg, .num-md {
  display: block;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.num-xl { font-size: clamp(2.75rem, 2rem + 2.4vw, 4.5rem); }   /* 44 → 72px */
.num-lg { font-size: clamp(2.25rem, 1.8rem + 1.4vw, 3.25rem); }
.num-md { font-size: clamp(1.75rem, 1.5rem + .8vw, 2.25rem); }


/* 6 ── Hilfsklassen ──────────────────────────────────────────────────────
   .muted/.small/.ok/.warn werden auch von bestehendem JS gesetzt
   (case_new: "muted small"/"small ok"; agent_frame: "small warn").          */

.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: .875rem; }
.xsmall { font-size: .8125rem; }
.ink { color: var(--ink); }
.strong { font-weight: 700; }
.ok { color: var(--green-ink); font-weight: 600; }
.warn { color: var(--red-ink); font-weight: 600; }
.text-brand { color: var(--brand-ink); }
.text-primary { color: var(--brand); }   /* nur für sehr große Schrift (Hero-Wort) – Kontrast gering */
.text-amber { color: var(--eyebrow); }
.text-green { color: var(--green-ink); }
.text-pink { color: var(--pink-ink); }
.text-red { color: var(--red-ink); }
.text-purple { color: var(--purple-ink); }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.right { text-align: right; }
.grow { flex: 1 1 auto; min-width: 0; }
.tabular { font-variant-numeric: tabular-nums; }
.break { overflow-wrap: anywhere; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Abstand je Element gesetzt (nicht vererbt), damit verschachtelte Stapel eigene Abstände haben. */
.stack { --stack-gap: 16px; display: flex; flex-direction: column; gap: var(--stack-gap); min-width: 0; }
.stack--xs { --stack-gap: 6px; }
.stack--sm { --stack-gap: 10px; }
.stack--lg { --stack-gap: var(--gap-lg); }

.cluster { --cluster-gap: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap); min-width: 0; }
.cluster--sm { --cluster-gap: 8px; }
.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }
.cluster--start { align-items: flex-start; }

.mt-0 { margin-top: 0 !important; }  .mb-0 { margin-bottom: 0 !important; }
.mt-s { margin-top: 8px !important; }   .mt-m { margin-top: 16px !important; }   .mt-l { margin-top: 28px !important; }
.mb-s { margin-bottom: 8px !important; } .mb-m { margin-bottom: 16px !important; } .mb-l { margin-bottom: 28px !important; }

.divider { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 16px; color: #fff; }
main:focus { outline: none; }


/* 7 ── Admin-Rahmen ──────────────────────────────────────────────────── */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  column-gap: var(--shell-gap);
  align-items: start;
  min-height: 100vh;
  padding: var(--shell-pad);
}

.sidebar {
  position: sticky;
  top: var(--shell-pad);
  height: calc(100vh - 2 * var(--shell-pad));
  min-height: 460px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 26px 16px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sidebar);
  box-shadow: var(--shadow-card);
  overflow-y: auto;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 8px;
  color: inherit;
  text-decoration: none;
}
.sidebar__brand:hover { color: inherit; }
.sidebar__wordmark { display: flex; flex-direction: column; min-width: 0; line-height: 1; }
.sidebar__name { color: var(--ink); font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.sidebar__area {
  margin-top: 7px;
  color: var(--faint);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.logo-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--brand-grad);
  color: var(--brand-on);
  box-shadow: var(--brand-glow);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
}

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

.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 0 18px;
  border-radius: var(--r-inner);
  color: var(--nav);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.nav-item__kurz { display: none; }
.nav-item:hover { background: #FBF5EA; color: var(--ink); }
.nav-item.is-active {
  background: var(--brand-grad);
  color: var(--brand-on);
  box-shadow: var(--brand-glow);
  font-weight: 600;
}

.sidebar__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 8px 0;
  border-top: 1px solid var(--line);
}
.sidebar__user { display: flex; align-items: center; gap: 12px; }
.sidebar__user-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.sidebar__role { color: var(--ink); font-weight: 700; line-height: 1.25; }
.sidebar__logout { margin: 0; }
.sidebar__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
}
.sidebar__status:hover, .sidebar__status.is-active { color: var(--ink); }
.sidebar__status.is-active { font-weight: 600; }

.shell__main { min-width: 0; width: 100%; max-width: var(--content-max); }

.topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  min-height: 52px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 17px;
}
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--muted); }
.crumbs li + li::before { content: "·"; margin-right: 6px; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
}
.back-link:hover { color: var(--ink); }
.back-link .icon { transition: transform .15s ease; }
.back-link:hover .icon { transform: translateX(-3px); }

/* Inhalt: Abstände zwischen Blöcken kommen vom gap – keine Außenabstände nötig. */
.content { display: flex; flex-direction: column; gap: var(--gap-lg); min-width: 0; }

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  margin-bottom: 8px;
}
.page-head__text { flex: 1 1 520px; min-width: 0; max-width: 1000px; }
.page-head__text .eyebrow { margin-bottom: 14px; }
.page-head__title { margin: 0; overflow-wrap: anywhere; }
.page-head__subtitle { margin: 14px 0 0; max-width: 880px; color: var(--muted); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.55; }
.page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 4px; }
.page-head__actions form { margin: 0; }


/* 8 ── Mitarbeiterportal-Rahmen ──────────────────────────────────────── */

.portal { min-height: 100vh; display: flex; flex-direction: column; }

.portal-header {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--line);
}
.portal-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  max-width: var(--portal-max);
  min-height: clamp(76px, 7.5vw, 112px);
  margin: 0 auto;
  padding: 14px clamp(16px, 4vw, 56px);
}
.portal-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.portal-brand .logo-tile { width: 56px; height: 56px; border-radius: 16px; font-size: 26px; }
.portal-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 56px;
  max-width: 180px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
}
.portal-logo img { display: block; width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.portal-brand__text { display: flex; flex-direction: column; min-width: 0; }
.portal-brand__name { color: var(--ink); font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; }
.portal-brand__sub { color: var(--muted); font-size: 15px; line-height: 1.35; }

.portal-header__right { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; color: var(--muted); font-size: 15px; }
.portal-safe { display: inline-flex; align-items: center; gap: 8px; }
.portal-header__sep { width: 1px; height: 32px; background: var(--line); }
.portal-person { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; }

.portal-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
  width: 100%;
  max-width: var(--portal-max);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 56px) clamp(40px, 5vw, 72px);
}

.portal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  width: 100%;
  max-width: var(--portal-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 56px) 36px;
  color: var(--muted);
  font-size: 14px;
}
.kira-by { display: inline-flex; align-items: center; gap: 8px; }
.kira-by img { height: 18px; width: auto; opacity: .85; }
.kira-by__ra { color: var(--eyebrow); }

/* Zentrierte Einzelseiten (Anmeldung, Fehler, Systemstatus) */
.center-page { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.center-page__card { width: min(460px, 100%); }


/* 9 ── Raster ──────────────────────────────────────────────────────────── */

.grid { display: grid; gap: var(--gap); min-width: 0; }
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grid--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.grid--kpi { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
.grid--115 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.grid--1-125 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, 280px)), 1fr)); }
.grid--start { align-items: start; }
.grid--gap-lg { gap: var(--gap-lg); }
.span-all { grid-column: 1 / -1; }


/* 10 ── Karten ─────────────────────────────────────────────────────────── */

.card {
  position: relative;
  min-width: 0;
  padding: var(--card-pad);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.card--sm { padding: clamp(16px, 1.6vw, 22px); border-radius: 20px; }
.card--flush { padding: 0; overflow: hidden; }

/* Primär-Verlauf, weiße Schrift (KPI "Aktive Wissensübergaben", "Dein nächster Schritt") */
.card--accent {
  background: var(--brand-grad);
  color: var(--brand-on);
  border-color: transparent;
  box-shadow: var(--brand-glow), var(--shadow-card);
}
.card--accent :is(h1, h2, h3, h4, .card__title, .kpi__value, .kpi__label, .num-xl, .num-lg, .num-md, strong) { color: inherit; }
.card--accent :is(.muted, .card__sub, .kpi__sub, .eyebrow, .small) { color: inherit; opacity: .92; }
.card--accent a:not(.btn) { color: inherit; }

/* Dekorativer Kreisring oben rechts */
.card--deco { overflow: hidden; }
.card--deco::after {
  content: "";
  position: absolute;
  top: -96px;
  right: -76px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 30px solid rgba(255, 255, 255, .16);
  pointer-events: none;
}
.card--deco > * { position: relative; z-index: 1; }

.card--amber { background: var(--sand-bg); border-color: transparent; box-shadow: none; }          /* Teamfortschritt */
.card--cream { background: var(--cream-bg); border-color: var(--cream-border); }                   /* Einladung */
.card--ivory { background: var(--ivory-bg); border-color: var(--ivory-border); }                   /* Meilensteine */
.card--lavender { background: var(--lav-bg); border-color: var(--lav-border); box-shadow: none; }
.card--danger { background: #FFF7FA; border-color: #F6C9D7; }
.card--plain { box-shadow: none; }

/* Farbstreifen oben (Personenkarten): Farbe über .tone-1 … .tone-6 */
.card--strip { overflow: hidden; }
.card--strip::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--tone, var(--track));
}

/* Innere Kachel / Zeile in einer Karte */
.tile {
  min-width: 0;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
}
.tile--soft { background: #FCFAF6; }

.card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 22px;
}
.card__head > :first-child { min-width: 0; flex: 1 1 260px; }
.card__head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.card__title { margin: 0; color: var(--ink); font-size: clamp(1.25rem, 1.05rem + .6vw, 1.625rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.card__title--sm { font-size: 1.1875rem; letter-spacing: -.02em; }
.card__sub { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.card--accent .card__foot { border-top-color: rgba(255, 255, 255, .35); }


/* 11 ── Knöpfe ─────────────────────────────────────────────────────────────
   <button class="btn btn--primary">…</button>  / <a class="btn btn--ghost">
   Ohne Variante sieht .btn wie der Ghost-Knopf aus.                         */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--ghost-border);
  border-radius: var(--r-btn);
  background: var(--ghost-bg);
  color: var(--ghost-fg);
  font: 600 15px/1.2 var(--font);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease, filter .15s ease;
}
.btn:hover { color: var(--ink); border-color: #D8D2E3; background: #FBFAFD; }
.btn:active { transform: translateY(1px); }
.btn .icon { flex: none; }
.btn__label { min-width: 0; }

.btn--ghost { background: var(--ghost-bg); border-color: var(--ghost-border); color: var(--ghost-fg); }

/* Primär: Verlauf + Glow. Weiße Schrift auf Amber ist das Design (1,86:1) – daher 700. */
.btn--primary {
  background: var(--brand-grad);
  border-color: transparent;
  color: var(--brand-on);
  font-weight: 700;
  box-shadow: var(--brand-glow);
}
.btn--primary:hover { background: var(--brand-grad); border-color: transparent; color: var(--brand-on); filter: brightness(1.04) saturate(1.05); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); filter: brightness(.97); }

.btn--secondary { background: var(--sec-bg); border-color: var(--sec-border); color: var(--sec-fg); font-weight: 700; }
.btn--secondary:hover { background: var(--amber-soft); border-color: #EFC874; color: #6F4600; }

.btn--pink { background: var(--pink-btn); border-color: transparent; color: #fff; font-weight: 700; box-shadow: 0 12px 28px -12px rgba(217, 91, 176, .6); }
.btn--pink:hover { background: #CF4DA5; border-color: transparent; color: #fff; transform: translateY(-1px); }

.btn--white { background: #fff; border-color: transparent; color: var(--brand-ink); font-weight: 700; box-shadow: 0 10px 24px -12px rgba(23, 21, 46, .35); }
.btn--white:hover { background: #FFFDF8; border-color: transparent; color: #6F4600; transform: translateY(-1px); }

.btn--danger { background: #fff; border-color: #F2B8CB; color: var(--red-ink); font-weight: 700; }
.btn--danger:hover { background: var(--red-soft); border-color: #E992AF; color: #A51E4C; }
.btn--danger-solid { background: var(--red); border-color: transparent; color: #fff; font-weight: 700; }
.btn--danger-solid:hover { background: #BF2A5E; border-color: transparent; color: #fff; }

/* Text-Knopf (z. B. "Abmelden") */
.btn--text {
  min-height: 0;
  padding: 2px 0;
  gap: 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.btn--text:hover { background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.btn--sm { min-height: 38px; padding: 0 14px; gap: 8px; border-radius: 12px; font-size: 14px; }
.btn--lg { min-height: 58px; padding: 0 28px; border-radius: var(--r-inner); font-size: 17px; }
.btn--icon { width: 48px; padding: 0; }
.btn--icon.btn--sm { width: 38px; }
.btn--icon.btn--lg { width: 58px; }
.btn--block { display: flex; width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  filter: none;
}
a.btn[aria-disabled="true"] { pointer-events: none; }

/* Rückmeldung von admin.js ("Kopiert") */
.btn.done,
.btn.done:hover { background: var(--green-soft); border-color: #BFE5CE; color: var(--green-ink); box-shadow: none; filter: none; }


/* 12 ── Pills ──────────────────────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--grey-soft);
  color: var(--grey-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  vertical-align: middle;
}
.pill .icon { width: 14px; height: 14px; }
.pill__dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }

.pill--grey     { background: var(--grey-soft);  color: var(--grey-ink); }
.pill--amber    { background: var(--amber-soft); color: var(--amber-ink); }
.pill--green    { background: var(--green-soft); color: var(--green-ink); }
.pill--pink     { background: var(--pink-soft);  color: var(--pink-ink); }
.pill--red      { background: var(--red-soft);   color: var(--red-ink); }
.pill--lavender { background: var(--lav-bg);     color: var(--purple-ink); }
.pill--purple   { background: var(--lav-bg);     color: var(--purple-ink); }
.pill--white    { background: #fff; border-color: var(--line); color: var(--eyebrow); }
.pill--brand    { background: var(--brand-soft); color: var(--brand-ink); }
.pill--on-accent { background: rgba(255, 255, 255, .22); color: inherit; }

/* Punkte in Designfarbe, Schrift lesbar */
.pill--amber .pill__dot { background: var(--amber); }
.pill--green .pill__dot { background: var(--green); }
.pill--pink .pill__dot  { background: var(--pink); }
.pill--red .pill__dot   { background: var(--red); }
.pill--grey .pill__dot  { background: var(--grey); }
.pill--lavender .pill__dot, .pill--purple .pill__dot { background: var(--purple); }

.pill--sm { padding: 3px 9px; font-size: 12px; }
/* "✦ DEINE WISSENSÜBERGABE" */
.pill--hero { padding: 10px 18px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; box-shadow: var(--shadow-card); }

.pill--live .pill__dot { box-shadow: 0 0 0 0 rgba(30, 138, 85, .45); animation: kira-puls 1.8s ease-out infinite; }
@keyframes kira-puls {
  0% { box-shadow: 0 0 0 0 rgba(30, 138, 85, .45); }
  70% { box-shadow: 0 0 0 7px rgba(30, 138, 85, 0); }
  100% { box-shadow: 0 0 0 0 rgba(30, 138, 85, 0); }
}


/* 13 ── Fortschritt, Ring, Meilensteine ─────────────────────────────────── */

.progress {
  position: relative;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--track);
}
.progress > span,
.progress__bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-fill);
  transition: width .4s ease;
}
.progress--sm { height: 6px; }
.progress--lg { height: 10px; }
.progress--green > span { background: var(--green); }
.progress--pink > span  { background: var(--pink); }
.progress--purple > span { background: var(--purple); }
/* Auf Akzentkarte: weißer Balken (bzw. Schriftfarbe der Marke) */
.progress--on-dark,
.card--accent .progress { background: rgba(255, 255, 255, .35); }
.progress--on-dark > span,
.card--accent .progress > span { background: currentColor; }

.progress-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.progress-row .progress { flex: 1 1 auto; }
.progress-row__value { flex: none; color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Ring: style="--p: 42" (0–100); Größe über --size */
.ring {
  --p: 0;
  --size: 120px;
  --thick: calc(var(--size) * .11);
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: conic-gradient(var(--ring-color, var(--brand)) calc(var(--p) * 1%), var(--track) 0);
}
.ring::before {
  content: "";
  position: absolute;
  inset: var(--thick);
  border-radius: 50%;
  background: var(--ring-bg, #fff);
}
.ring__label { position: relative; color: var(--ink); font-size: calc(var(--size) * .2); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ring--green { --ring-color: var(--green); }
.ring--purple { --ring-color: var(--purple); }

/* Meilensteine: waagrecht, auf schmalen Schirmen senkrecht */
.milestones {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.milestone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 0 8px;
  text-align: center;
}
.milestone::before {
  content: "";
  position: absolute;
  top: 16.5px;
  left: -50%;
  right: 50%;
  height: 3px;
  background: #ECE7F0;
}
.milestone:first-child::before { display: none; }
.milestone--done::before,
.milestone--current::before { background: var(--brand); }

.milestone__dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  border: 3px solid #E4E0EA;
  border-radius: 50%;
  background: #fff;
  color: var(--brand-on);
}
.milestone__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #D8D4E0; }
.milestone--done .milestone__dot { border-color: transparent; background: var(--brand-fill); }
.milestone--done .milestone__dot::after { display: none; }
.milestone--current .milestone__dot { border-color: var(--brand); box-shadow: 0 0 0 6px var(--brand-soft), var(--brand-glow); }
.milestone--current .milestone__dot::after { width: 12px; height: 12px; background: var(--brand); }

.milestone__label { color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.milestone__status { font-size: 13px; font-weight: 600; }
.milestone--done .milestone__status { color: var(--green-ink); }
.milestone--current .milestone__status { color: var(--eyebrow); }
.milestone--open .milestone__status { color: var(--muted); }
.milestone__meta { color: var(--muted); font-size: 12px; }


/* 14 ── Avatare, Icon-Kacheln, Eyebrow, KPI ─────────────────────────────── */

.avatar {
  --size: 56px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--grad-primary);
  color: #fff;
  font-size: calc(var(--size) * .34);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  user-select: none;
}
.avatar--xs { --size: 32px; }
.avatar--sm { --size: 44px; }
.avatar--lg { --size: 72px; }
.avatar--xl { --size: 112px; }

.avatar--amber    { background: linear-gradient(135deg, #FFAE00 0%, #FFC23D 100%); }
.avatar--pink     { background: linear-gradient(135deg, #EC8ACB 0%, #D6409F 100%); }
.avatar--green    { background: linear-gradient(135deg, #52CC92 0%, #1E8A55 100%); }
.avatar--purple   { background: linear-gradient(135deg, #AFA3F6 0%, #6C5CE7 100%); }
.avatar--soft     { background: var(--amber-soft); color: var(--eyebrow); }       /* Cockpit-Kopf */
.avatar--lavender { background: #ECE8FB; color: var(--purple-ink); }              /* Einladung */

.avatar__status {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(var(--size) * .28);
  height: calc(var(--size) * .28);
  min-width: 10px;
  min-height: 10px;
  border: 2.5px solid #fff;
  border-radius: 50%;
  background: var(--grey);
}
.avatar__status--green { background: var(--green); }
.avatar__status--amber { background: var(--primary); }
.avatar__status--pink  { background: var(--pink); }
.avatar__status--red   { background: var(--red); }
.avatar__status--grey  { background: var(--grey); }

/* Abgerundetes Pastell-Quadrat (Personenkarten) – Farbe über .tone-N */
.avatar--square { border-radius: var(--r-inner); background: var(--tone, #F3F2F8); color: var(--tone-ink, var(--grey-ink)); font-weight: 800; }

/* Profilbild oder Schatten-Avatar (_ui.html: avatar). Beschnitten wird das
   Bild selbst, nicht der Avatar – sonst verschwände der Statuspunkt am Rand. */
.avatar__bild,
.avatar__schatten { display: block; width: 100%; height: 100%; border-radius: inherit; }
.avatar__bild { object-fit: cover; }
.avatar__schatten { overflow: hidden; fill: currentColor; }
.avatar--schatten { background: #ECE9F3; color: #B4B0C8; }
.avatar--foto { background: var(--line-soft); }
/* Im Quadrat der Personenkarte bleibt die Kartenfarbe – nur die Figur ist neu. */
.avatar--square.avatar--schatten { background: var(--tone, #ECE9F3); color: color-mix(in srgb, var(--tone-ink, #8E8AA6) 45%, transparent); }

/* Team / Abteilung neben dem Namen einer Person (_ui.html: team_marke) */
.team-marke {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 10px 3px 8px;
  border-radius: var(--r-pill);
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  vertical-align: middle;
  overflow-wrap: anywhere;
}
.team-marke .icon { flex: none; opacity: .8; }

.tone-1 { --tone: #F2C4E4; --tone-ink: #8E2A6E; }   /* Pink */
.tone-2 { --tone: #D9D2FA; --tone-ink: #4F3FB8; }   /* Lavendel */
.tone-3 { --tone: #CDEBDC; --tone-ink: #1B6B45; }   /* Mint */
.tone-4 { --tone: #F3DDB0; --tone-ink: #7A5000; }   /* Sand */
.tone-5 { --tone: #F9CBD5; --tone-ink: #A12A48; }   /* Rosé */
.tone-6 { --tone: #CFE3F3; --tone-ink: #235C8A; }   /* Himmel */

.icon-tile {
  --size: 48px;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--size);
  height: var(--size);
  border-radius: var(--r-tile);
  background: var(--amber-soft);
  color: var(--amber);
}
.icon-tile--sm { --size: 36px; border-radius: 12px; }
.icon-tile--lg { --size: 64px; border-radius: 20px; }
.icon-tile--xl { --size: 76px; border-radius: 22px; }
.icon-tile--round { border-radius: 50%; }
.icon-tile--amber    { background: var(--amber-soft); color: var(--amber); }
.icon-tile--pink     { background: var(--pink-soft);  color: var(--pink); }
.icon-tile--green    { background: var(--green-soft); color: var(--green); }
.icon-tile--red      { background: var(--red-soft);   color: var(--red); }
.icon-tile--lavender { background: var(--lav-bg);     color: var(--lav-icon); }
.icon-tile--grey     { background: var(--grey-soft);  color: var(--grey-ink); }
.icon-tile--white    { background: #fff; color: var(--amber); box-shadow: var(--shadow-card); }
.icon-tile--on-accent { background: rgba(255, 255, 255, .24); color: inherit; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--eyebrow);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.35;
  text-transform: uppercase;
}
.eyebrow .icon { width: 16px; height: 16px; }
.eyebrow--muted { color: var(--muted); }
.eyebrow--pink { color: var(--pink-ink); }
.eyebrow--green { color: var(--green-ink); }
.eyebrow--brand { color: var(--brand-ink); }
.eyebrow--on-accent { color: inherit; opacity: .95; }
.eyebrow__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--green); }

.kpi { display: flex; flex-direction: column; gap: 6px; min-height: 100%; }
.kpi__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.kpi__value { margin: 4px 0; color: var(--ink); font-size: clamp(2.75rem, 2.2rem + 1.6vw, 4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi__label { margin: 0; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.35; }
.kpi__sub { margin: 0; color: var(--muted); font-size: 14px; }
.kpi__extra { margin-top: auto; padding-top: 14px; }


/* 15 ── Listen, Themen-Chips ────────────────────────────────────────────── */

.list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.list > li { min-width: 0; }
.list--divided { gap: 0; }
.list--divided > li + li { border-top: 1px solid var(--line-soft); }

.list-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  color: inherit;
  text-decoration: none;
}
.list--divided .list-row { padding: 16px 0; border: 0; border-radius: 0; background: none; }
a.list-row:hover, .list-row--link:hover { color: inherit; border-color: #EADCC2; background: #FFFCF6; }
.list--divided a.list-row:hover { background: none; }
.list--divided a.list-row:hover .list-row__title { color: var(--eyebrow); }
.list-row__main { flex: 1 1 auto; min-width: 0; }
.list-row__title { display: block; margin: 0; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.list-row__sub { display: block; margin: 2px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.list-row__meta { flex: none; color: var(--muted); font-size: 14px; text-align: right; white-space: nowrap; }
.list-row__aside { display: flex; flex: none; align-items: center; gap: 12px; }
.list-row__aside form { margin: 0; }
.list-row__progress { flex: 0 1 220px; min-width: 120px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.chip,
.chips > li:not([class]) {   /* cockpit.js baut <li> ohne Klasse */
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.chip .icon { width: 15px; height: 15px; }
.chip__text { min-width: 0; overflow-wrap: anywhere; }
.chip--done    { background: var(--amber-soft); color: var(--amber-ink); }
.chip--partial { background: #FFF9EA; border-color: #F6DFA8; color: var(--amber-ink); }
.chip--open    { background: var(--chip-bg); color: var(--chip-fg); }
.chip--sub .chip__submark { opacity: .75; }
.chip__meta { padding-left: 2px; font-size: 12px; font-weight: 500; opacity: .85; }
.chip__form { display: inline-flex; margin: 0 -6px 0 0; }
.chip__del {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: .7;
  cursor: pointer;
}
.chip__del:hover { background: rgba(23, 21, 46, .09); opacity: 1; }
.chip__del .icon { width: 14px; height: 14px; }


/* 16 ── Reiter, Aufklapper ──────────────────────────────────────────────── */

/* Ohne JS: alle Panels sichtbar, Reiter springen per Anker.
   admin.js setzt .tabs--js, Rollen, aria-selected und hidden.               */
.tabs__list {
  display: flex;
  gap: 28px;
  margin: 0 0 24px;
  padding: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  list-style: none;
  scrollbar-width: none;
}
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab {
  position: relative;
  flex: none;
  padding: 10px 2px 14px;
  border: 0;
  background: none;
  color: var(--muted);
  font: 600 16px/1.3 var(--font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.tabs__tab:hover { color: var(--ink); }
.tabs__tab.is-active,
.tabs__tab[aria-selected="true"] { color: var(--ink); font-weight: 700; }
.tabs__tab.is-active::after,
.tabs__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--brand);
}
.tabs--js .tabs__tab:not([aria-selected="true"])::after { display: none; }
.tabs__panel + .tabs__panel { margin-top: 36px; }
.tabs--js .tabs__panel + .tabs__panel { margin-top: 0; }
.tabs__panel:focus-visible { outline-offset: 6px; border-radius: 8px; }

.details {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
}
.details > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border-radius: inherit;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  list-style: none;
}
.details > summary::-webkit-details-marker { display: none; }
.details > summary::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 4px 0 2px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform .2s ease;
}
.details[open] > summary::before { transform: rotate(45deg); }
.details > summary:hover { color: var(--eyebrow); }
.details__meta { margin-left: auto; color: var(--muted); font-size: 14px; font-weight: 500; }
.details__body { padding: 0 22px 22px; }
.details--card { border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.details--card > summary { padding: 22px var(--card-pad); font-size: 19px; }
.details--card > .details__body { padding: 0 var(--card-pad) var(--card-pad); }
/* Schlicht: nur die Zeile, ohne Rahmen ("Vorschau anzeigen") */
.details--plain { background: none; border: 0; border-radius: 0; }
.details--plain > summary { display: inline-flex; padding: 4px 0; color: var(--link); font-size: 15px; font-weight: 600; }
.details--plain > summary::before { border-color: currentColor; }
.details--plain > .details__body { padding: 10px 0 0; }

.accordion { display: flex; flex-direction: column; gap: 12px; }


/* 17 ── Formulare ──────────────────────────────────────────────────────── */

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.form-grid > .span-all, .form-grid > .field--wide { grid-column: 1 / -1; }
.form-section + .form-section { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.form-section__title { margin: 0 0 4px; color: var(--ink); font-size: 1.1875rem; font-weight: 800; letter-spacing: -.02em; }
.form-section__text { margin: 0 0 20px; color: var(--muted); font-size: 15px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }

.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0 0 20px; }
.field:last-child,
.stack > .field,
.form-grid > .field:last-child { margin-bottom: 0; }
.label,
.field > label:where(:not(.dropzone, .search, .check)),
.field > .field__label { display: block; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.35; }
.field__hint, .label__hint { display: block; color: var(--muted); font-size: 14px; font-weight: 400; line-height: 1.45; }
.field__counter { align-self: flex-end; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.field__error { color: var(--red-ink); font-size: 14px; font-weight: 600; }
.field--error :is(input, select, textarea) { border-color: var(--red); }

/* Textartige Felder. :where() = Spezifität 0, jede Klasse gewinnt.
   Checkbox, Radio, Datei, Farbe, Range bleiben bewusst unberührt.          */
:where(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="search"],
       input[type="url"], input[type="tel"], input[type="number"], input[type="date"], input[type="datetime-local"],
       input[type="month"], input[type="time"], select, textarea),
.input {
  display: block;
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #E6DFD2;
  border-radius: var(--r-input);
  background: #fff;
  color: var(--text);
  font: 400 16px/1.4 var(--font);
  transition: border-color .15s ease, box-shadow .15s ease;
}
:where(input, select, textarea)::placeholder { color: var(--faint); opacity: 1; }
:where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="color"], [type="range"]), select, textarea):hover { border-color: #D6CCBB; }
:where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="color"], [type="range"]), select, textarea):focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 4px rgba(255, 174, 0, .22);
}
:where(input, select, textarea):disabled { background: #F7F5F1; color: var(--muted); cursor: not-allowed; }
:where(input[readonly]) { background: #FCFAF6; }

:where(textarea) { min-height: 120px; line-height: 1.55; resize: vertical; }
:where(select) {
  padding-right: 46px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23716F86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
:where(select[multiple], select[size]) { padding-right: 16px; background-image: none; }
:where(input[type="date"]) { min-width: 0; }

:where(input[type="checkbox"], input[type="radio"]) {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: none;
  accent-color: var(--brand);
  cursor: pointer;
}
.check { display: inline-flex; align-items: flex-start; gap: 10px; color: var(--text); font-size: 15px; font-weight: 500; line-height: 1.45; cursor: pointer; }
.check input { margin-top: 2px; }

/* Schalter (_ui.html: schalter): ein Kontrollkästchen als An/Aus-Schieber mit
   Titel und Erklärung daneben. Das Feld selbst bleibt bedienbar (Tastatur,
   Screenreader) - es ist nur unsichtbar über die Bahn gelegt. */
.schalter,
.field > label.schalter {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  background: #fff;
  color: var(--text);
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
}
.schalter__feld { position: absolute; left: 16px; top: 16px; width: 46px; height: 26px; margin: 0; opacity: 0; cursor: pointer; }
.schalter__bahn {
  position: relative;
  flex: none;
  width: 46px;
  height: 26px;
  margin-top: 2px;
  border-radius: 999px;
  background: #D8D4E0;
  transition: background .15s ease;
}
.schalter__bahn::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(23, 21, 46, .3);
  transition: transform .15s ease;
}
.schalter__feld:checked + .schalter__bahn { background: var(--green); }
.schalter__feld:checked + .schalter__bahn::after { transform: translateX(20px); }
.schalter__feld:focus-visible + .schalter__bahn { outline: 3px solid var(--focus); outline-offset: 2px; }
.schalter__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.schalter__titel { color: var(--ink); font-weight: 700; line-height: 1.35; }
.schalter__hinweis { color: var(--muted); font-size: 14px; line-height: 1.45; }

.input--sm { min-height: 42px; padding: 9px 12px; font-size: 15px; border-radius: 12px; }
.input--mono { font-family: var(--font-mono); font-size: 14px; }

/* Suchfeld mit Lupe */
.search { position: relative; display: flex; align-items: center; min-width: 0; }
.search > .icon { position: absolute; top: 50%; left: 17px; color: var(--muted); pointer-events: none; transform: translateY(-50%); }
.search > input { padding-left: 50px; }
.search--soft > input { background: #F6F5FA; border-color: transparent; }
.search--soft > input:hover { border-color: #E4E1EE; }

/* Datei-Ablage: <label class="dropzone"> … <input type="file"> … </label> */
.dropzone {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
  min-width: 0;
  padding: 18px;
  border: 1.5px dashed #D9D3F3;
  border-radius: var(--r-inner);
  background: #FBFAFF;
  cursor: pointer;
}
.dropzone:hover { border-color: #BDB3EC; }
.dropzone:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone__text { flex: 1 1 200px; min-width: 0; }
.dropzone__title { display: block; color: var(--ink); font-weight: 700; }
.dropzone__hint { display: block; color: var(--muted); font-size: 14px; }
.dropzone__name { display: block; margin-top: 4px; color: var(--eyebrow); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.dropzone__preview { display: flex; align-items: center; justify-content: center; height: 56px; max-width: 180px; padding: 6px 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.dropzone__preview img { max-height: 100%; width: auto; object-fit: contain; }

/* Farbfeld: Farbwahl-Kasten + Label + Hex */
.color-field {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  background: #fff;
}
.color-field__text { display: flex; flex-direction: column; min-width: 0; }
.color-field__label { color: var(--ink); font-weight: 700; line-height: 1.3; }
.color-field__hex { color: var(--muted); font-family: var(--font-mono); font-size: 14px; }

.color-field input[type="color"],
.farbwahl input[type="color"] {
  flex: none;
  width: 48px;
  height: 48px;
  padding: 3px;
  border: 1px solid #E6DFD2;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 10px; }
input[type="color"]::-moz-color-swatch { border: 0; border-radius: 10px; }

/* Bestehende Komponente admin/_farbwahl.html (Klassen sind JS-Haken) */
.farbwahl-block { min-width: 0; }
.farbwahl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.farbwahl input[type="color"] { width: 54px; height: 54px; }
.farbwahl .farbhex { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: 15px; }
.farbwahl .farbe-leeren {
  flex: none;
  width: 54px;
  min-height: 54px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
}
.farbprobe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.probe-knopf { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 12px; font-size: 14px; font-weight: 700; }


/* 18 ── Hinweise, Leerzustände ──────────────────────────────────────────── */

.notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 14px 18px;
  border: 1px solid transparent;
  border-radius: var(--r-inner);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}
.notice > .icon { flex: none; margin-top: 1px; }
.notice__body { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.notice__body > p { margin: 0; }
.notice__body > p + p { margin-top: 4px; }
.notice__title { font-weight: 700; }
.notice--ok    { background: var(--green-soft); border-color: #C3E7D2; color: #17613D; }
.notice--warn  { background: var(--amber-soft); border-color: var(--sec-border); color: #6F4600; }
.notice--error { background: var(--red-soft);   border-color: #F6C4D4; color: #A51E4C; }
.notice--info  { background: var(--lav-bg);     border-color: var(--lav-border); color: var(--text); }
.notice--info > .icon { color: var(--lav-icon); }
.notice a { color: inherit; font-weight: 700; }

.info-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  padding: 16px 20px;
  border: 1px solid var(--lav-border);
  border-radius: var(--r-inner);
  background: var(--lav-bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}
.info-box > .icon { flex: none; margin-top: 2px; color: var(--lav-icon); }
.info-box__body { flex: 1 1 auto; min-width: 0; }
.info-box__title { display: block; margin: 0 0 2px; color: var(--ink); font-weight: 700; }
.info-box--amber { border-color: var(--sec-border); background: var(--sec-bg); }
.info-box--amber > .icon { color: var(--amber); }
.info-box--green { border-color: #C3E7D2; background: var(--green-soft); }
.info-box--green > .icon { color: var(--green); }

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: clamp(28px, 4vw, 48px) 20px;
  text-align: center;
}
.empty > .icon-tile { margin-bottom: 6px; }
.empty__title { margin: 0; color: var(--ink); font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.empty__text { max-width: 48ch; margin: 0; color: var(--muted); }
.empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }


/* 19 ── Overlay / Gesprächsraum, Chat, Tabellen ─────────────────────────── */

/* Klassisches Overlay (per hidden umschalten, body.has-overlay sperrt Scrollen) */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 3vw, 40px);
  background: rgba(23, 21, 46, .48);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.overlay__dialog {
  position: relative;
  width: min(1100px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: var(--card-pad);
  background: #fff;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
}
.overlay__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
body.has-overlay { overflow: hidden; }

/* Gesprächsraum ohne DOM-Umzug: Ein iframe, das im DOM verschoben wird, lädt neu.
   Deshalb bleibt der Raum an seinem Platz und wird per Klasse groß geschaltet. */
.room { position: relative; }
.room.is-open {
  position: fixed;
  inset: clamp(8px, 3vw, 40px);
  z-index: 101;
  max-width: none;
  margin: 0;
  overflow: auto;
  box-shadow: var(--shadow-pop);
}
.room-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(23, 21, 46, .48); }
.room__frame { display: block; width: 100%; min-height: 320px; border: 0; border-radius: 20px; background: #fff; }

.chat { display: flex; flex-direction: column; gap: 14px; }
.bubble {
  max-width: min(720px, 86%);
  padding: 12px 18px 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.bubble p { margin: 0; }
.bubble p + p { margin-top: .6em; }
.bubble__who { display: block; margin-bottom: 2px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bubble--agent { align-self: flex-start; border-color: var(--lav-border); border-bottom-left-radius: 6px; background: var(--lav-bg); }
.bubble--user { align-self: flex-end; border-bottom-right-radius: 6px; box-shadow: 0 8px 20px -14px rgba(170, 120, 40, .35); }

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.table { width: 100%; min-width: var(--table-min, 560px); border-collapse: collapse; font-size: 14px; }
.table th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: #FCFAF6;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.table td { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); color: var(--text); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: #FFFDF8; }
.table .shrink { width: 1%; white-space: nowrap; }


/* 20 ── Fokus, Bewegung, Mobil ──────────────────────────────────────────── */

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.btn:focus-visible, .nav-item:focus-visible, .chip__del:focus-visible { outline-offset: 3px; }
.card--accent :focus-visible { outline-color: var(--ink); }
.tabs__tab:focus-visible { outline-offset: -2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (min-width: 1200px) {
  .eyebrow { font-size: 14px; }
}

/* Tablet quer: breite Raster auf zwei Spalten */
@media (max-width: 1280px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--kpi > :first-child { grid-column: 1 / -1; }
}

/* Asymmetrische Raster brauchen Breite */
@media (max-width: 1100px) {
  .grid--2-1, .grid--1-2, .grid--115, .grid--1-125 { grid-template-columns: minmax(0, 1fr); }
}

/* Unter 960px: Sidebar wird obere Leiste */
@media (max-width: 959px) {
  :root { --shell-pad: 16px; --gap: 18px; --gap-lg: 22px; }

  .shell { display: block; padding: 12px 16px 48px; }

  .sidebar {
    position: static;
    height: auto;
    min-height: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-bottom: 18px;
    padding: 12px 12px 10px;
    border-radius: 22px;
    overflow: visible;
  }
  .sidebar__brand { gap: 10px; padding: 0 2px; }
  .sidebar .logo-tile { width: 40px; height: 40px; border-radius: 12px; font-size: 20px; }
  .sidebar__name { font-size: 24px; }
  .sidebar__area { display: none; }

  /* Umbrechen statt waagrecht scrollen: Ein verdeckter Punkt
     (Webhook-Protokoll bei 390px) war ohne sichtbaren Hinweis unerreichbar. */
  .sidebar__nav {
    order: 3;
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 2px 0 0;
  }
  .nav-item { flex: none; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px; font-size: 15px; white-space: nowrap; }
  .nav-item .icon { width: 18px; height: 18px; }

  .sidebar__foot {
    order: 2;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    margin: 0 0 0 auto;
    padding: 0;
    border-top: 0;
  }
  .sidebar__user .icon-tile, .sidebar__role { display: none; }
  .sidebar__status-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sidebar__status .icon { width: 20px; height: 20px; }

  .topbar { min-height: 0; margin-bottom: 12px; font-size: 15px; }
  .back-link { font-size: 15px; }

  .grid--2-1, .grid--1-2, .grid--115, .grid--1-125, .grid--kpi { grid-template-columns: minmax(0, 1fr); }
  .grid--kpi > :first-child { grid-column: auto; }

  .card { border-radius: 22px; }
  .milestones { grid-auto-flow: row; grid-auto-columns: auto; gap: 0; }
  .milestone { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 0 0 18px; text-align: left; }
  .milestone__dot { margin-bottom: 0; }
  .milestone::before { display: none; }
  .milestone:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 36px;
    bottom: 0;
    left: 16.5px;
    width: 3px;
    background: #ECE7F0;
  }
  .milestone--done:not(:last-child)::after { background: var(--brand); }
  .milestone__label { flex: 1 1 0; min-width: 0; }
  .milestone__status, .milestone__meta { flex-basis: 100%; padding-left: 48px; }
}

@media (max-width: 720px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .page-head { align-items: stretch; }
  .page-head__actions { width: 100%; }
  .page-head__actions > .btn:not(.btn--icon),
  .page-head__actions > form,
  .page-head__actions > form > .btn { flex: 1 1 auto; }
  .btn--block-mobile { display: flex; width: 100%; }
  .card__foot > .btn { flex: 1 1 auto; }
  /* Zeilen brechen nur um, wenn der Platz fehlt: Text behält mind. 9rem. */
  .list-row { flex-wrap: wrap; row-gap: 10px; }
  .list-row__main { flex: 1 1 9rem; }
  .list-row__aside { flex: 0 1 auto; max-width: 100%; margin-left: auto; flex-wrap: wrap; }
  .list-row__progress { flex: 1 1 100%; order: 5; }
  .bubble { max-width: 94%; }
  .portal-safe__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (max-width: 560px) {
  /* Kurze Beschriftungen (Übergaben, Postfach) und enge Abstände: So stehen die
     drei Punkte bei 390 px nebeneinander statt in zwei Zeilen. min-width: 0
     erlaubt das Schrumpfen, sonst erzwingt der Text den Umbruch. */
  .nav-item { flex: 1 1 0; min-width: 0; justify-content: center; gap: 4px; padding: 0 6px; font-size: 13px; }
  /* Drei Punkte, gleich breit in einer Zeile. */
  .sidebar__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav-item__lang { display: none; }
  .nav-item__kurz { display: inline; }
  .btn { white-space: normal; }
  .page-head__actions > .btn:not(.btn--icon),
  .page-head__actions > form,
  .page-head__actions > form > .btn:not(.btn--icon) { width: 100%; }
  .page-head__actions > .btn--icon + .btn { width: auto; flex: 1 1 0; }
  .card__head-actions { width: 100%; }
  .card__head-actions > .btn { flex: 1 1 auto; }
  .tabs__list { gap: 20px; }
  .farbwahl input[type="color"], .farbwahl .farbe-leeren { width: 48px; height: 48px; min-height: 48px; }
}

/* ── Touch: Tippflächen mindestens 44 px ─────────────────────────────────
   Mit dem Finger sind 38 px (btn--sm) und reine Textknöpfe (Abmelden, 22 px)
   zu knapp. Nur bei grobem Zeiger - mit der Maus bleibt alles kompakt. */
@media (pointer: coarse) {
  .btn--sm, .btn--text { min-height: 44px; }
  .sidebar__status { min-width: 44px; min-height: 44px; justify-content: center; }
}

/* ── Support-Ansicht im Adminbereich (app/support.py, admin/_shell.html) ── */

.support-leiste {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1px solid var(--lav-border);
  border-radius: var(--r-inner);
  background: var(--lav-bg);
  color: var(--ink);
}
.support-leiste > .icon { flex: none; color: var(--lav-icon); }
.support-leiste p { flex: 1 1 auto; margin: 0; font-size: 15px; line-height: 1.45; }
.support-leiste form { flex: none; margin: 0; }
@media (max-width: 560px) {
  .support-leiste { flex-wrap: wrap; }
  .support-leiste > .icon { display: none; }
  .support-leiste form, .support-leiste .btn { width: 100%; }
}
/* Ausgegraute Paket-Links in der Support-Ansicht (Knöpfe sind disabled). */
.ist-support a.ist-gesperrt { opacity: .45; pointer-events: none; }