/* ============================================================
   Varys Cockpit — Arbeitsoberfläche

   Dieselbe Marke wie die Website: Farbsystem, Schrift, Rundungen und
   Bewegungskurven kommen von dort. Übersetzt aber auf ein Werkzeug, in
   dem stundenlang gearbeitet wird — dichter, ruhiger, weniger Schauwert.

   Was von der Website kommt:
     Farben (--accent, --grad-brand, die Ink-Töne), Chivo für den
     Schriftzug, die Bewegungskurve --ease, Pillen-Knöpfe mit Anheben.
   Was hier anders ist:
     Kleinere Rundungen und Abstände (Dichte), ein vollwertiger
     Dunkelmodus, kräftige Zustandsfarben für Fristen und Warnungen.

   Aufbau:
   1. Schrift
   2. Tokens — hell
   3. Tokens — dunkel
   4. Grundlagen
   5. Gerüst (Seitenleiste, Inhalt)
   6. Kopfzeile, Pfad, Reiter
   7. Kacheln und Karten
   8. Board
   9. Listen und Tabellen
   10. Formulare
   11. Knöpfe
   12. Plaketten, Marken, Meldungen
   13. Dialog
   14. Anmeldung
   15. Responsive
   ============================================================ */

/* ------------------------------------------------------------
   1. SCHRIFT

   Chivo ausschließlich für den Schriftzug — wie auf der Website.
   Liegt auf dem eigenen Server, es geht keine Verbindung zu Google.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Varys Wortmarke";
  src: url("fonts/chivo-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212;
}

/* ------------------------------------------------------------
   2. TOKENS — HELL
   ------------------------------------------------------------ */
:root {
  /* --- Marke (in beiden Modi gleich) --- */
  --co-akzent:      #2F5FE0;
  --co-akzent-hell: #5B8CFF;
  --co-akzent-tief: #234BC4;
  --co-auf-akzent:  #FFFFFF;   /* Schrift auf Akzentflächen, kippt im Dunkeln */
  --grad-brand: linear-gradient(100deg, #7FA7FF 0%, #A97BFF 55%, #6FD8FF 100%);

  /* --- Flächen --- */
  --co-bg:        #F4F5F7;
  --co-flaeche:   #FFFFFF;
  --co-flaeche-2: #FAFAFC;
  --co-senke:     #EDEEF2;   /* vertiefte Flächen, z. B. Board-Spalten */

  /* --- Linien --- */
  --co-rand:   rgba(9, 11, 16, .09);
  --co-rand-2: rgba(9, 11, 16, .16);

  /* --- Text --- */
  --co-text:   #0B0B0D;
  --co-text-2: #565A63;
  /* Nicht heller machen: --co-text-3 trägt Kachelüberschriften und
     Tabellenköpfe in 11 px. Ab etwa #7C8189 fällt der Kontrast unter die
     4,5:1 der Barrierefreiheitsrichtlinie und die Beschriftungen
     verschwinden auf hellem Grund. */
  --co-text-3: #6C7079;

  /* --- Zustände --- */
  --co-akzent-bg: rgba(47, 95, 224, .09);
  --co-gut:       #0F6B47;
  --co-gut-bg:    rgba(15, 107, 71, .11);
  --co-warn:      #8A5A00;
  --co-warn-bg:   rgba(138, 90, 0, .12);
  --co-fehler:    #B32424;
  --co-fehler-bg: rgba(179, 36, 36, .10);

  /* --- Seitenleiste: dunkel, wie der Kopfbereich der Website --- */
  --co-leiste:      #0E1013;
  --co-leiste-2:    #16181D;
  --co-leiste-rand: rgba(255, 255, 255, .08);
  --co-leiste-text: rgba(255, 255, 255, .68);
  --co-leiste-aktiv: rgba(255, 255, 255, .11);

  /* --- Rundungen: die Staffel der Website, für Dichte verkleinert --- */
  --co-r-sm:  8px;
  --co-r:     12px;
  --co-r-lg:  16px;
  --co-r-xl:  22px;
  --co-r-pill: 999px;

  /* --- Schatten: weich und tief, wie auf der Website --- */
  --co-schatten-1: 0 1px 2px rgba(9,11,16,.05), 0 1px 3px rgba(9,11,16,.03);
  --co-schatten-2: 0 2px 4px rgba(9,11,16,.04), 0 8px 20px -8px rgba(9,11,16,.14);
  --co-schatten-3: 0 4px 8px rgba(9,11,16,.05), 0 18px 36px -12px rgba(9,11,16,.22);
  --co-schatten-4: 0 24px 60px -20px rgba(9,11,16,.35);
  --co-ring: 0 0 0 3px var(--co-akzent-bg);

  /* --- Bewegung: dieselben Kurven wie auf der Website --- */
  --ease:      cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dauer:     .22s;

  /* --- Schrift --- */
  --co-font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
             "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --co-font-marke: "Varys Wortmarke", var(--co-font);
  --co-font-zahl: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --co-leiste-breite: 244px;

  color-scheme: light;
}

/* ------------------------------------------------------------
   3. TOKENS — DUNKEL

   Zwei Wege hierher: die Systemeinstellung, oder die eigene Wahl im
   Cockpit (data-thema am <html>). Die eigene Wahl gewinnt immer.
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --co-bg:        #08090A;
    --co-flaeche:   #101114;
    --co-flaeche-2: #17191D;
    --co-senke:     #0C0D10;

    --co-rand:   rgba(255, 255, 255, .10);
    --co-rand-2: rgba(255, 255, 255, .18);

    --co-text:   #F5F5F7;
    --co-text-2: #9A9AA3;
    /* s. Hinweis beim hellen Gegenstück — hier gilt dasselbe nach unten. */
    --co-text-3: #8C919B;

    --co-akzent:      #5B8CFF;
    --co-akzent-tief: #7FA7FF;
    --co-auf-akzent:  #08090A;
    --co-akzent-bg:   rgba(91, 140, 255, .16);

    --co-gut:       #4ADE80;
    --co-gut-bg:    rgba(74, 222, 128, .14);
    --co-warn:      #FBBF24;
    --co-warn-bg:   rgba(251, 191, 36, .14);
    --co-fehler:    #FF6B6B;
    --co-fehler-bg: rgba(255, 107, 107, .14);

    --co-leiste:      #0D0E11;
    --co-leiste-2:    #131519;
    --co-leiste-rand: rgba(255, 255, 255, .07);

    --co-schatten-1: 0 1px 2px rgba(0,0,0,.4);
    --co-schatten-2: 0 2px 4px rgba(0,0,0,.3), 0 8px 20px -8px rgba(0,0,0,.6);
    --co-schatten-3: 0 4px 8px rgba(0,0,0,.35), 0 18px 36px -12px rgba(0,0,0,.7);
    --co-schatten-4: 0 24px 60px -20px rgba(0,0,0,.85);

    color-scheme: dark;
  }
}

:root[data-thema="dunkel"] {
  --co-bg:        #08090A;
  --co-flaeche:   #101114;
  --co-flaeche-2: #17191D;
  --co-senke:     #0C0D10;

  --co-rand:   rgba(255, 255, 255, .10);
  --co-rand-2: rgba(255, 255, 255, .18);

  --co-text:   #F5F5F7;
  --co-text-2: #9A9AA3;
  /* s. Hinweis beim hellen Gegenstück — hier gilt dasselbe nach unten. */
  --co-text-3: #8C919B;

  --co-akzent:      #5B8CFF;
  --co-akzent-tief: #7FA7FF;
  --co-auf-akzent:  #08090A;
  --co-akzent-bg:   rgba(91, 140, 255, .16);

  --co-gut:       #4ADE80;
  --co-gut-bg:    rgba(74, 222, 128, .14);
  --co-warn:      #FBBF24;
  --co-warn-bg:   rgba(251, 191, 36, .14);
  --co-fehler:    #FF6B6B;
  --co-fehler-bg: rgba(255, 107, 107, .14);

  --co-leiste:      #0D0E11;
  --co-leiste-2:    #131519;
  --co-leiste-rand: rgba(255, 255, 255, .07);

  --co-schatten-1: 0 1px 2px rgba(0,0,0,.4);
  --co-schatten-2: 0 2px 4px rgba(0,0,0,.3), 0 8px 20px -8px rgba(0,0,0,.6);
  --co-schatten-3: 0 4px 8px rgba(0,0,0,.35), 0 18px 36px -12px rgba(0,0,0,.7);
  --co-schatten-4: 0 24px 60px -20px rgba(0,0,0,.85);

  color-scheme: dark;
}

/* ------------------------------------------------------------
   4. GRUNDLAGEN
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--co-bg);
  color: var(--co-text);
  font-family: var(--co-font);
  font-size: 14.5px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--co-akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.22;
  letter-spacing: -0.022em;
  font-weight: 640;
}
h1 { font-size: 24px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
h4 { font-size: 13.5px; }

p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--co-rand); margin: 22px 0; }

code {
  font-family: var(--co-font-zahl);
  font-size: .92em;
  background: var(--co-flaeche-2);
  border: 1px solid var(--co-rand);
  border-radius: 5px;
  padding: 1px 5px;
}

::selection { background: var(--co-akzent); color: var(--co-auf-akzent); }

:focus-visible {
  outline: 2px solid var(--co-akzent);
  outline-offset: 2px;
  border-radius: 5px;
}

/* Schlanke Bildlaufleisten — sonst wirken die Board-Spalten klobig */
* { scrollbar-width: thin; scrollbar-color: var(--co-rand-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--co-rand-2);
  border-radius: var(--co-r-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--co-text-3); background-clip: content-box; }

.leise { color: var(--co-text-2); }
.leiser { color: var(--co-text-3); font-size: 13px; }
.zahl { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.rechts { text-align: right; }

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

/* ------------------------------------------------------------
   5. GERÜST
   ------------------------------------------------------------ */
.co-huelle {
  display: grid;
  grid-template-columns: var(--co-leiste-breite) minmax(0, 1fr);
  min-height: 100vh;
}

/* ---------- Seitenleiste ---------- */
.co-leiste {
  background: var(--co-leiste);
  color: var(--co-leiste-text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--co-leiste-rand);
}

/* Markenzeile der Seitenleiste.
   Heißt bewusst .co-logo und nicht .co-marke: „Marke“ ist weiter unten
   schon als Statusabzeichen vergeben (offen/erledigt/überfällig). Beides
   gleich zu benennen hieß, dass das Abzeichen die Markenzeile überschreibt
   — sie bekam Pillenhintergrund und 11,5 px Schriftgröße. */
.co-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 20px 18px 18px;
  color: #fff;
  text-decoration: none;
}
.co-logo:hover { text-decoration: none; }

/* Das Zeichen bleibt einfarbig — Verläufe gehören nicht hinein. */
.co-logo svg { width: 25px; height: 25px; flex: none; color: #fff; }

.co-logo__text { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.co-logo__name {
  font-family: var(--co-font-marke);
  font-weight: 700;
  letter-spacing: .13em;
  font-size: 12.5px;
  text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.co-logo__zusatz {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  margin-top: 2px;
}

.co-nav { padding: 2px 10px 10px; flex: 1; }

.co-nav__gruppe {
  padding: 18px 10px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
}

.co-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 11px;
  border-radius: var(--co-r-sm);
  color: var(--co-leiste-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 2px;
  transition: background var(--dauer) var(--ease-soft), color var(--dauer) var(--ease-soft);
}
.co-nav a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }

.co-nav a.aktiv {
  background: var(--co-leiste-aktiv);
  color: #fff;
  font-weight: 600;
}
/* Der Verlauf als Marker am aktiven Punkt — Textakzent, nicht Zeichen. */
.co-nav a.aktiv::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--grad-brand);
}
.co-nav a.aktiv .co-nav__symbol { opacity: 1; }

.co-nav__symbol {
  width: 17px; height: 17px; flex: none;
  opacity: .6;
  transition: opacity var(--dauer) var(--ease-soft);
}
.co-nav a:hover .co-nav__symbol { opacity: .9; }

.co-nav__zaehler {
  margin-left: auto;
  background: var(--co-akzent-hell);
  color: #08090A;
  font-size: 11px;
  font-weight: 700;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: var(--co-r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* ---------- Fuß der Seitenleiste ---------- */
.co-leiste__fuss {
  border-top: 1px solid var(--co-leiste-rand);
  padding: 10px 12px 12px;
}

/* Umschalter für die Darstellung */
.co-thema {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: rgba(255,255,255,.05);
  border-radius: var(--co-r-pill);
  margin-bottom: 10px;
}
.co-thema a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 4px;
  border-radius: var(--co-r-pill);
  color: rgba(255,255,255,.5);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dauer) var(--ease-soft), color var(--dauer) var(--ease-soft);
}
.co-thema a:hover { color: #fff; text-decoration: none; }
.co-thema a.aktiv { background: rgba(255,255,255,.13); color: #fff; }
.co-thema svg { width: 13px; height: 13px; }

.co-ich {
  display: flex;
  align-items: center;
  gap: 10px;
}
.co-ich__text { min-width: 0; flex: 1; line-height: 1.3; }
.co-ich__name {
  color: #fff; font-weight: 600; font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.co-ich__rolle { font-size: 11.5px; color: rgba(255,255,255,.38); }
.co-ich__aus {
  color: rgba(255,255,255,.45);
  padding: 6px;
  border-radius: var(--co-r-sm);
  display: inline-flex;
  flex: none;
  transition: background var(--dauer) var(--ease-soft), color var(--dauer) var(--ease-soft);
}
.co-ich__aus:hover { background: rgba(255,255,255,.09); color: #fff; }
.co-ich__aus svg { width: 16px; height: 16px; }

/* ---------- Inhaltsbereich ---------- */
.co-inhalt {
  padding: 28px 32px 80px;
  max-width: 1400px;
  width: 100%;
  min-width: 0;
}

/* ------------------------------------------------------------
   6. KOPFZEILE, PFAD, REITER
   ------------------------------------------------------------ */
.co-kopfzeile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.co-kopfzeile h1 { font-size: 25px; }
.co-kopfzeile p { color: var(--co-text-2); margin: 6px 0 0; font-size: 14px; }
.co-kopfzeile__aktionen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.co-pfad {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--co-text-3); margin-bottom: 10px;
}
.co-pfad a { color: var(--co-text-2); }
.co-pfad a:hover { color: var(--co-akzent); text-decoration: none; }
.co-pfad span { color: var(--co-rand-2); }

.co-reiter {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--co-rand);
  margin-bottom: 20px;
}
.co-reiter a {
  position: relative;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 550;
  color: var(--co-text-2);
  margin-bottom: -1px;
  text-decoration: none;
  transition: color var(--dauer) var(--ease-soft);
}
.co-reiter a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
  transition: background var(--dauer) var(--ease-soft);
}
.co-reiter a:hover { color: var(--co-text); text-decoration: none; }
.co-reiter a.aktiv { color: var(--co-text); font-weight: 620; }
.co-reiter a.aktiv::after { background: var(--grad-brand); }

/* ------------------------------------------------------------
   7. KACHELN UND KARTEN
   ------------------------------------------------------------ */
.co-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.co-kachel {
  position: relative;
  overflow: hidden;
  background: var(--co-flaeche);
  border: 1px solid var(--co-rand);
  border-radius: var(--co-r-lg);
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  display: block;
  box-shadow: var(--co-schatten-1);
  transition: transform var(--dauer) var(--ease),
              box-shadow var(--dauer) var(--ease),
              border-color var(--dauer) var(--ease-soft);
}
a.co-kachel:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--co-rand-2);
  box-shadow: var(--co-schatten-2);
}
.co-kachel__titel {
  font-size: 11px; font-weight: 680; letter-spacing: .09em; text-transform: uppercase;
  color: var(--co-text-3); margin-bottom: 8px;
}
.co-kachel__zahl {
  font-size: 30px; font-weight: 660; letter-spacing: -0.035em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.co-kachel__text { font-size: 12.5px; color: var(--co-text-2); margin-top: 4px; }
.co-kachel--warn .co-kachel__zahl { color: var(--co-fehler); }
.co-kachel--akzent .co-kachel__zahl { color: var(--co-akzent); }

/* Kachel, die gerade Aufmerksamkeit verlangt, bekommt eine Kante in Markenfarbe */
.co-kachel--akzent::after,
.co-kachel--warn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
}
.co-kachel--akzent::after { background: var(--grad-brand); }
.co-kachel--warn::after { background: var(--co-fehler); }

.co-karte {
  background: var(--co-flaeche);
  border: 1px solid var(--co-rand);
  border-radius: var(--co-r-lg);
  padding: 22px 24px;
  margin-bottom: 16px;
  box-shadow: var(--co-schatten-1);
}
.co-karte__kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.co-karte__kopf h2 { margin: 0; }
.co-karte__hinweis { color: var(--co-text-2); font-size: 13px; margin: -10px 0 16px; }

.co-zweispaltig {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

/* ------------------------------------------------------------
   8. BOARD
   ------------------------------------------------------------ */
.co-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(266px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 16px;
  align-items: start;
}

.co-spalte {
  background: var(--co-senke);
  border: 1px solid var(--co-rand);
  border-radius: var(--co-r-lg);
  padding: 10px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background var(--dauer) var(--ease-soft),
              border-color var(--dauer) var(--ease-soft);
}
.co-spalte.co-spalte--ziel {
  background: var(--co-akzent-bg);
  border-color: var(--co-akzent);
  border-style: dashed;
}

.co-spalte__kopf {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 5px 0;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--co-text-2);
}
.co-spalte__anzahl {
  background: var(--co-rand);
  color: var(--co-text-2);
  border-radius: var(--co-r-pill);
  padding: 1px 8px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
/* Auf der vertieften Spaltenfläche wäre --co-text-3 zu schwach: gegen
   --co-senke kommt er nur auf 4,3:1 statt der nötigen 4,5:1. Deshalb hier
   eine Stufe kräftiger als auf den hellen Karten. */
.co-spalte__neu {
  margin-left: auto;
  background: none; border: 0; cursor: pointer;
  color: var(--co-text-2); font-size: 18px; line-height: 1;
  padding: 2px 6px; border-radius: var(--co-r-sm);
  transition: background var(--dauer) var(--ease-soft), color var(--dauer) var(--ease-soft);
}
.co-spalte__neu:hover { background: var(--co-rand); color: var(--co-text); }

.co-spalte__leer {
  font-size: 12.5px; color: var(--co-text-2);
  text-align: center; padding: 16px 8px;
}

/* ---------- Karte auf dem Board ---------- */
.co-zettel {
  background: var(--co-flaeche);
  border: 1px solid var(--co-rand);
  border-radius: var(--co-r);
  padding: 12px 13px;
  box-shadow: var(--co-schatten-1);
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: grab;
  transition: transform var(--dauer) var(--ease),
              box-shadow var(--dauer) var(--ease),
              border-color var(--dauer) var(--ease-soft),
              opacity var(--dauer) var(--ease-soft);
}
.co-zettel:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--co-rand-2);
  box-shadow: var(--co-schatten-2);
}
.co-zettel:active { cursor: grabbing; transform: translateY(0); }
.co-zettel.co-zettel--zieht { opacity: .35; transform: rotate(1.5deg); }

.co-zettel__kunde {
  font-size: 11px; font-weight: 680; letter-spacing: .07em;
  text-transform: uppercase; color: var(--co-text-3); margin-bottom: 4px;
}
.co-zettel__titel { font-weight: 600; line-height: 1.35; font-size: 14px; }
.co-zettel__text { font-size: 12.5px; color: var(--co-text-2); margin-top: 5px; }
.co-zettel__fuss {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; font-size: 12px; color: var(--co-text-2);
}
.co-zettel__fuss .co-plakette { margin-left: auto; }

.co-balken {
  height: 4px; border-radius: var(--co-r-pill); background: var(--co-rand);
  overflow: hidden; margin-top: 10px;
}
.co-balken i {
  display: block; height: 100%;
  background: var(--grad-brand);
  border-radius: var(--co-r-pill);
  transition: width .5s var(--ease);
}
.co-balken--fertig i { background: var(--co-gut); }

/* ------------------------------------------------------------
   9. LISTEN UND TABELLEN
   ------------------------------------------------------------ */
.co-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.co-tabelle th {
  text-align: left;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--co-text-3);
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--co-rand);
  white-space: nowrap;
}
.co-tabelle td {
  padding: 12px;
  border-bottom: 1px solid var(--co-rand);
  vertical-align: middle;
}
.co-tabelle tr:last-child td { border-bottom: 0; }
.co-tabelle tbody tr { transition: background var(--dauer) var(--ease-soft); }
.co-tabelle tbody tr:hover { background: var(--co-flaeche-2); }
.co-tabelle__haupt { font-weight: 600; }
.co-tabelle__haupt a { color: inherit; }
.co-tabelle__haupt a:hover { color: var(--co-akzent); text-decoration: none; }

.co-tabelle-huelle { overflow-x: auto; margin: 0 -24px; padding: 0 24px; }

.co-liste { list-style: none; margin: 0; padding: 0; }
.co-liste li {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--co-rand);
  font-size: 13.5px;
}
.co-liste li:last-child { border-bottom: 0; }
.co-liste li:first-child { padding-top: 0; }
.co-liste__zeit { margin-left: auto; color: var(--co-text-3); font-size: 12.5px; white-space: nowrap; }

.co-daten {
  display: grid; gap: 1px;
  background: var(--co-rand);
  border: 1px solid var(--co-rand);
  border-radius: var(--co-r);
  overflow: hidden;
}
.co-daten > div {
  display: grid; grid-template-columns: 152px minmax(0, 1fr); gap: 12px;
  background: var(--co-flaeche); padding: 10px 14px;
}
.co-daten dt { color: var(--co-text-2); font-size: 13.5px; margin: 0; }
.co-daten dd { margin: 0; font-weight: 500; word-break: break-word; }

.co-leer {
  text-align: center;
  padding: 46px 20px;
  color: var(--co-text-2);
}
.co-leer svg { width: 40px; height: 40px; color: var(--co-text-3); opacity: .45; margin: 0 auto 12px; }
.co-leer h3 { margin-bottom: 6px; color: var(--co-text); }
.co-leer p { max-width: 390px; margin: 0 auto 16px; font-size: 13.5px; }

/* ------------------------------------------------------------
   10. FORMULARE
   ------------------------------------------------------------ */
.co-feld { margin-bottom: 15px; }
.co-feld:last-child { margin-bottom: 0; }

.co-feld label,
.co-feld > .co-feld__titel {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.co-feld__hinweis { font-size: 12.5px; color: var(--co-text-2); margin: 5px 0 0; font-weight: 400; }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="search"], input[type="tel"], input[type="url"], input[type="number"],
select, textarea {
  width: 100%;
  font: inherit;
  letter-spacing: inherit;
  color: var(--co-text);
  background: var(--co-flaeche);
  border: 1px solid var(--co-rand-2);
  border-radius: var(--co-r-sm);
  padding: 9px 12px;
  transition: border-color var(--dauer) var(--ease-soft),
              box-shadow var(--dauer) var(--ease-soft);
}
input:hover, select:hover, textarea:hover { border-color: var(--co-text-3); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--co-akzent);
  box-shadow: var(--co-ring);
}
textarea { resize: vertical; min-height: 88px; line-height: 1.55; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23868B95' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 12px;
  padding-right: 32px;
}
/* Im Dunkelmodus muss der Pfeil hell sein, sonst verschwindet er */
:root[data-thema="dunkel"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%239A9AA3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%239A9AA3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

/* Datumsfelder: das Kalendersymbol im Dunkelmodus sichtbar halten */
:root[data-thema="dunkel"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.75); }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.75); }
}

input::placeholder, textarea::placeholder { color: var(--co-text-3); }

.co-feld-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 15px;
}

.co-haken { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.co-haken input { width: 16px; height: 16px; margin: 3px 0 0; flex: none; accent-color: var(--co-akzent); }
.co-haken span { font-weight: 500; }

input[type="checkbox"] { accent-color: var(--co-akzent); }

.co-werkzeuge {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 16px;
}
.co-werkzeuge input[type="search"], .co-werkzeuge select { width: auto; min-width: 176px; }
.co-werkzeuge__rechts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------
   11. KNÖPFE

   Pillenform wie auf der Website, samt dem leichten Anheben beim
   Überfahren. Nur kleiner — hier stehen sie in Werkzeugleisten.
   ------------------------------------------------------------ */
.co-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  padding: 9px 17px;
  border-radius: var(--co-r-pill);
  border: 1px solid transparent;
  background: var(--co-akzent);
  /* Nicht fest #fff: im Dunkelmodus ist der Akzent ein helles Blau, auf dem
     weiße Schrift nicht mehr lesbar wäre. Der Token kippt mit dem Thema.
     Und er sitzt nur hier — eine pauschale Regel „im Dunkeln alle Knöpfe
     dunkel“ träfe auch die hellen Varianten und ergäbe Schwarz auf Schwarz. */
  color: var(--co-auf-akzent);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dauer) var(--ease),
              background var(--dauer) var(--ease-soft),
              border-color var(--dauer) var(--ease-soft),
              color var(--dauer) var(--ease-soft),
              box-shadow var(--dauer) var(--ease);
}
.co-knopf:hover {
  background: var(--co-akzent-tief);
  color: var(--co-auf-akzent);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px var(--co-akzent);
}
.co-knopf:active { transform: translateY(0); box-shadow: none; }
.co-knopf svg { width: 15px; height: 15px; flex: none; }

.co-knopf--rand {
  background: var(--co-flaeche);
  color: var(--co-text);
  border-color: var(--co-rand-2);
  box-shadow: var(--co-schatten-1);
}
.co-knopf--rand:hover {
  background: var(--co-flaeche);
  color: var(--co-text);
  border-color: var(--co-text-3);
  box-shadow: var(--co-schatten-2);
}

.co-knopf--still {
  background: transparent;
  color: var(--co-text-2);
  border-color: transparent;
  box-shadow: none;
}
.co-knopf--still:hover {
  background: var(--co-rand);
  color: var(--co-text);
  box-shadow: none;
  transform: none;
}

/* Auch hier kippt die Schriftfarbe: im Dunkeln ist --co-fehler ein helles
   Rot, auf dem Weiß nicht mehr lesbar ist. */
.co-knopf--gefahr { background: var(--co-fehler); color: var(--co-auf-akzent); }
.co-knopf--gefahr:hover {
  background: var(--co-fehler); color: var(--co-auf-akzent);
  box-shadow: 0 8px 20px -8px var(--co-fehler);
}

.co-knopf--klein { padding: 6px 12px; font-size: 13px; }
.co-knopf--breit { width: 100%; }
.co-knopf[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.co-knopfreihe {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--co-rand);
}
.co-knopfreihe--rechts { justify-content: flex-end; }

/* ------------------------------------------------------------
   12. PLAKETTEN, MARKEN, MELDUNGEN
   ------------------------------------------------------------ */
.co-plakette {
  width: 27px; height: 27px;
  border-radius: var(--co-r-pill);
  background: var(--co-akzent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.co-plakette--gross { width: 38px; height: 38px; font-size: 13.5px; }

.co-marke {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 660;
  letter-spacing: -0.005em;
  padding: 3px 10px;
  border-radius: var(--co-r-pill);
  background: var(--co-rand);
  color: var(--co-text-2);
  white-space: nowrap;
}
.co-marke--gut     { background: var(--co-gut-bg);    color: var(--co-gut); }
.co-marke--warn    { background: var(--co-warn-bg);   color: var(--co-warn); }
.co-marke--fehler  { background: var(--co-fehler-bg); color: var(--co-fehler); }
.co-marke--akzent  { background: var(--co-akzent-bg); color: var(--co-akzent); }

.co-meldung {
  border-radius: var(--co-r);
  padding: 13px 16px;
  margin-bottom: 18px;
  font-size: 14px;
  border: 1px solid var(--co-rand);
  background: var(--co-flaeche);
  box-shadow: var(--co-schatten-1);
}
.co-meldung--gut    { background: var(--co-gut-bg);    border-color: var(--co-gut);    color: var(--co-gut); }
.co-meldung--warn   { background: var(--co-warn-bg);   border-color: var(--co-warn);   color: var(--co-warn); }
.co-meldung--fehler { background: var(--co-fehler-bg); border-color: var(--co-fehler); color: var(--co-fehler); }
.co-meldung--info   { background: var(--co-akzent-bg); border-color: var(--co-akzent); color: var(--co-akzent); }
.co-meldung a { color: inherit; text-decoration: underline; }
.co-meldung strong { color: inherit; }

.co-blase {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  background: var(--co-leiste);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--co-r);
  box-shadow: var(--co-schatten-4);
  font-size: 14px;
  max-width: 360px;
  animation: co-auf .28s var(--ease);
}
.co-blase--fehler { background: var(--co-fehler); }

@keyframes co-auf {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   13. DIALOG
   ------------------------------------------------------------ */
dialog.co-dialog {
  border: 1px solid var(--co-rand);
  border-radius: var(--co-r-xl);
  padding: 0;
  width: min(580px, calc(100vw - 32px));
  box-shadow: var(--co-schatten-4);
  color: var(--co-text);
  background: var(--co-flaeche);
}
dialog.co-dialog[open] { animation: co-dialog-auf .26s var(--ease); }

@keyframes co-dialog-auf {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

dialog.co-dialog::backdrop {
  background: rgba(8, 9, 10, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.co-dialog__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 19px 22px 15px;
  border-bottom: 1px solid var(--co-rand);
}
.co-dialog__koerper { padding: 20px 22px; max-height: 68vh; overflow-y: auto; }
.co-dialog__fuss {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 15px 22px;
  border-top: 1px solid var(--co-rand);
  background: var(--co-flaeche-2);
  border-radius: 0 0 var(--co-r-xl) var(--co-r-xl);
}
.co-dialog__zu {
  background: none; border: 0; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--co-text-3);
  padding: 2px 8px; border-radius: var(--co-r-sm);
  transition: background var(--dauer) var(--ease-soft), color var(--dauer) var(--ease-soft);
}
.co-dialog__zu:hover { background: var(--co-rand); color: var(--co-text); }

/* ------------------------------------------------------------
   14. ANMELDUNG
   ------------------------------------------------------------ */
body.co-anmeldung {
  background: #08090A;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  position: relative;
  overflow-x: hidden;
}

/* Ein weiter, sehr weicher Markenschimmer im Hintergrund — dasselbe
   Mittel wie im Kopfbereich der Website, nur zurückhaltender. */
body.co-anmeldung::before {
  content: "";
  position: absolute;
  top: -30vh; left: 50%;
  width: min(1100px, 150vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: var(--grad-brand);
  opacity: .13;
  filter: blur(120px);
  pointer-events: none;
}

.co-anmelde-karte {
  position: relative;
  background: var(--co-flaeche);
  border: 1px solid var(--co-rand);
  border-radius: var(--co-r-xl);
  padding: 34px;
  width: min(438px, 100%);
  box-shadow: var(--co-schatten-4);
}

.co-anmelde-marke {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 24px;
}
.co-anmelde-marke svg { width: 30px; height: 30px; color: var(--co-text); }
.co-anmelde-marke b {
  font-family: var(--co-font-marke);
  font-size: 14px; letter-spacing: .13em; text-transform: uppercase;
}
.co-anmelde-marke span {
  display: block; font-size: 10.5px; color: var(--co-text-3);
  letter-spacing: .16em; text-transform: uppercase; font-weight: 600; margin-top: 2px;
}
.co-anmelde-fuss { margin-top: 22px; text-align: center; font-size: 12.5px; color: var(--co-text-3); }

/* ------------------------------------------------------------
   15. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1120px) {
  .co-zweispaltig { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 880px) {
  .co-huelle { grid-template-columns: minmax(0, 1fr); }

  .co-leiste {
    position: sticky;
    top: 0;
    z-index: 20;
    height: auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 14px;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--co-leiste-rand);
  }
  .co-logo { padding: 13px 8px 13px 0; }

  .co-nav {
    order: 3;
    flex-basis: 100%;
    display: flex;
    gap: 3px;
    overflow-x: auto;
    padding: 0 0 10px;
  }
  .co-nav__gruppe { display: none; }
  .co-nav a { margin-bottom: 0; white-space: nowrap; }
  .co-nav a.aktiv::before { left: 0; right: 0; top: auto; bottom: -3px; width: auto; height: 2px;
                            transform: none; border-radius: 2px 2px 0 0; }

  .co-leiste__fuss { border-top: 0; margin-left: auto; padding: 0; display: flex; align-items: center; gap: 8px; }
  .co-thema { margin-bottom: 0; }
  .co-thema a span { display: none; }
  .co-ich__text { display: none; }

  .co-inhalt { padding: 20px 16px 60px; }
  .co-tabelle-huelle { margin: 0 -16px; padding: 0 16px; }
  .co-daten > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .co-board { grid-auto-columns: minmax(246px, 84vw); }
  .co-kopfzeile h1 { font-size: 22px; }
}

@media print {
  .co-leiste, .co-kopfzeile__aktionen, .co-knopfreihe, .co-werkzeuge { display: none; }
  .co-huelle { display: block; }
  body { background: #fff; color: #000; }
  .co-karte { break-inside: avoid; box-shadow: none; border-color: #ccc; }
}

/* Wer Bewegung nicht mag, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .co-zettel:hover, .co-kachel:hover, .co-knopf:hover { transform: none; }
}