/* Content Hub - Dashboard
 *
 * Dunkle Oberflaeche mit Glasmaterialien. Handgeschrieben statt Framework:
 * Hintergrund, Blur-Ebenen und Kantenlichter lassen sich als Utility-Klassen
 * nicht sauber ausdruecken -- und das Dashboard haengt an keinem CDN (ADR 0005).
 *
 * Jede Brand bringt ihre Farbe mit (--marke, aus brands.akzent). Sie faerbt
 * Hintergrund, aktive Navigation und Akzente -- so sieht man jederzeit, in
 * welcher Brand man gerade arbeitet.
 *
 * Aufbau:
 *   1. Tokens        5. Navigation     9. Diagramme
 *   2. Hintergrund   6. Formulare     10. Tabellen, Chips
 *   3. Grundlagen    7. Knoepfe       11. Barrierefreiheit
 *   4. Glas, Layout  8. Kacheln
 */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
  --grund: #05060a;
  --flaeche: #16171c;          /* Mittelwert der Glasflaeche -- Diagramme sind darauf geprueft */
  --text: rgba(255, 255, 255, 0.94);
  --text-leise: rgba(255, 255, 255, 0.62);
  /* 0.52 statt 0.40: vorher 3,8:1 auf den Karten, unter der AA-Grenze (4,5:1). */
  --text-still: rgba(255, 255, 255, 0.52);
  --linie: rgba(255, 255, 255, 0.075);
  --linie-hell: rgba(255, 255, 255, 0.14);

  --marke: #7aa2ff;
  --marke-schein: color-mix(in srgb, var(--marke) 18%, transparent);

  --gut: #0ca30c;
  --gut-text: #6ee7a0;
  --warn: #fab219;
  --schlecht: #d03b3b;
  --schlecht-text: #fda4af;

  --r-s: 8px;
  --r-m: 12px;
  --r-l: 18px;
  --zeit: 180ms;
  --kurve: cubic-bezier(0.32, 0.72, 0, 1);
  --seitenleiste: 244px;

  /* Liquid Glass: Flaeche, Lichtkante, Tiefe. Die Karten sind so dicht, dass
     man die Aurora dahinter ahnt, aber nie Text dahinter liest. */
  --glas: rgba(18, 20, 28, 0.6);
  --glas-dicht: rgba(14, 15, 22, 0.86);
  --glas-licht: rgba(255, 255, 255, 0.07);
  --tiefe: 0 1px 1px rgba(0, 0, 0, 0.35), 0 16px 40px -16px rgba(0, 0, 0, 0.8), 0 42px 90px -44px rgba(0, 0, 0, 0.7);
  --leuchten: color-mix(in srgb, var(--marke) 55%, transparent);

  /* Bedienflaechen (Knoepfe, aktive Navigation): eine 0,5px-Glanzlinie und eine
     dunkle Kontaktlinie statt eines hellen 1px-Rands. Karten bleiben leiser. */
  --glanz: inset 0 0.5px 0 rgba(255, 255, 255, 0.3);
  --kontakt: 0 0 0 0.5px rgba(0, 0, 0, 0.8);

  --weiss: #ffffff;
  --tinte: #0c0d12;          /* fast schwarz, fuer Text auf hellen Flaechen */
  --warn-text: #fcd34d;      /* Warnhinweise auf dunklem Grund (12,4:1) */
}

/* 2. Hintergrund ------------------------------------------------------------ */

/* Eine einzige, ruhende Ebene: zwei weiche Farbfelder (Markenfarbe oben,
   ein kuehler Ton unten rechts) und ein feines Punktraster, das zur Mitte
   hin ausblendet und ganz langsam treibt (siehe `.punkte`). Die Farbfelder
   werden einmal gezeichnet und nie wieder.

   Vorher liefen hier fuenf Ebenen: kreisende Farbfelder, ein wanderndes
   Raster, ein Lichtstreif und ein Rauschfilter. Das kostete in jedem Frame
   Rechenzeit und Akku -- und machte Scrollen und Klicks spuerbar zaeher. */
.hintergrund {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Eine ruhende Aurora: Markenfarbe oben links, ein kuehles Indigo oben
     rechts, Tuerkis unten rechts, ein Hauch Violett unten links, dazu eine
     Vignette. Einmal gezeichnet, nie wieder -- kostet beim Scrollen nichts. */
  background:
    radial-gradient(ellipse 58% 46% at 16% -10%, color-mix(in srgb, var(--marke) 36%, transparent), transparent 70%),
    radial-gradient(ellipse 42% 38% at 92% 4%, rgba(98, 96, 238, 0.17), transparent 72%),
    radial-gradient(ellipse 52% 44% at 104% 104%, rgba(20, 184, 158, 0.13), transparent 70%),
    radial-gradient(ellipse 46% 40% at -4% 98%, rgba(156, 72, 226, 0.11), transparent 70%),
    radial-gradient(ellipse 130% 95% at 50% 38%, transparent 52%, rgba(0, 0, 0, 0.6) 100%),
    var(--grund);
}
/* Feine, feste Koernung: nimmt den Verlaeufen das Glatte, Kuenstliche. Ein
   einziges Kachelbild, keine Animation. */
.hintergrund::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}
/* Das Punktraster treibt ganz langsam diagonal -- genau eine Rasterweite pro
   Durchlauf, dadurch nahtlos. Die Maske sitzt fest auf `.punkte`, bewegt
   wird nur die Ebene darin, und zwar nur per transform: Der Browser zeichnet
   das Raster einmal und verschiebt es danach auf der Grafikkarte. Kein
   Neuzeichnen, kein Layout -- Scrollen und Klicks bleiben so fluessig wie mit
   ruhendem Hintergrund. Wer weniger Bewegung eingestellt hat, bekommt keine. */
.punkte {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 25%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 65% at 50% 25%, #000 20%, transparent 78%);
}
.punkte::after {
  content: "";
  position: absolute;
  inset: -28px 0 0 -28px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1.2px);
  background-size: 28px 28px;
  will-change: transform;
  animation: punkte-treiben 36s linear infinite;
}
@keyframes punkte-treiben {
  to { transform: translate3d(28px, 28px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .punkte::after { animation: none; }
}

/* 3. Grundlagen ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
}

h1 { margin: 0; font-size: clamp(1.5rem, 2.2vw, 1.9rem); font-weight: 640; line-height: 1.12; letter-spacing: -0.022em; }
h2 { margin: 0; font-size: 0.9rem; font-weight: 600; letter-spacing: -0.005em; }
h3 { margin: 0; font-size: 0.8125rem; font-weight: 600; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code, pre, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.8em; }
pre { margin: 0; overflow-x: auto; color: var(--text-leise); white-space: pre-wrap; overflow-wrap: anywhere; }

.leise { color: var(--text-leise); }
.still { color: var(--text-still); }
.klein { font-size: 0.8125rem; }
.winzig { font-size: 0.75rem; letter-spacing: 0.01em; }
.gut-text { color: var(--gut-text); }
.schlecht-text { color: var(--schlecht-text); }

.kopfzeile { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
/* Der Titelblock nimmt den Platz, der bleibt, und ist lesbar begrenzt: Vorher
   schob eine lange Beschreibung die Pruefliste (Zustand / Als Naechstes) nach
   unten, eine kurze liess sie rechts stehen -- je Pipeline anders. */
.kopfzeile > div:first-child { flex: 1 1 22rem; min-width: 0; }
.kopfzeile .untertitel { margin-top: 0.35rem; max-width: 65ch; }

.raster { display: grid; gap: 1.1rem; grid-template-columns: minmax(0, 1fr); }
/* Rasterspalten duerfen schrumpfen. Ohne das macht eine lange Zeile (Style
   Guide, JSON) die Spalte breiter als ihre Spur -- sie schiebt sich unter die
   Nachbarkarte, und deren Milchglas zeigt den Inhalt dahinter als Fleck. */
.raster > * { min-width: 0; }
@media (min-width: 1000px) {
  .raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .raster-21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .breit-2 { grid-column: span 2; }
}
.reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.reihe-eng { display: flex; align-items: center; gap: 0.375rem; }
.schub { margin-left: auto; }
.abstand-oben { margin-top: 1.1rem; }

/* 4. Glas und Layout ------------------------------------------------------- */

/* Liquid Glass ohne Weichzeichner: Ein backdrop-filter je Karte kostete bei
   jedem Scrollen Rechenzeit. Stattdessen Schichten im Hintergrund der Karte,
   alle unter dem Inhalt: ein Glanz von links oben, ein heller Verlauf nach
   unten, die Flaeche selbst und eine Lichtkante als Rahmen (hell oben, ein
   Hauch Markenfarbe unten). Dazu Tiefe durch mehrere weiche Schatten. */
.glas {
  position: relative;
  background:
    radial-gradient(120% 70% at 0% 0%, var(--glas-licht), transparent 48%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01) 42%, rgba(255, 255, 255, 0)) padding-box,
    linear-gradient(var(--glas), var(--glas)) padding-box,
    linear-gradient(170deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.045) 28%, rgba(255, 255, 255, 0.02) 62%, color-mix(in srgb, var(--marke) 14%, transparent)) border-box;
  border: 1px solid transparent;
  border-radius: var(--r-l);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--tiefe);
}
/* Die eine hervorgehobene Flaeche einer Seite (die Entscheidung auf der
   Freigabe): Licht aus der oberen Ecke, im Akzent auslaufend. Sparsam --
   auf jeder Karte waere sie Tapete. */
.glas-hervor {
  background:
    radial-gradient(120% 70% at 0% 0%, var(--glas-licht), transparent 48%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01) 42%, rgba(255, 255, 255, 0)) padding-box,
    linear-gradient(var(--glas), var(--glas)) padding-box,
    linear-gradient(170deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.055) 28%, rgba(255, 255, 255, 0.025) 62%, color-mix(in srgb, var(--marke) 24%, transparent)) border-box;
}
.glas-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding: 0.85rem 1.2rem; border-bottom: 1px solid var(--linie); }
.glas-inhalt { padding: 1.1rem 1.2rem; }

.app { display: grid; grid-template-columns: var(--seitenleiste) minmax(0, 1fr); min-height: 100vh; }
main { padding: 1.9rem 2rem 4rem; max-width: 1240px; width: 100%; }

@media (max-width: 900px) {
  /* minmax(0, ...) statt 1fr: Sonst bestimmt die laengste unteilbare Zeile
     (ein langer Pfad, auch in einem zugeklappten Bereich) die Breite der
     ganzen Seite, und auf dem Handy entsteht seitliches Scrollen. */
  .app { grid-template-columns: minmax(0, 1fr); }
  main { padding: 1.25rem 1rem 3rem; }
}

/* 5. Navigation ------------------------------------------------------------- */

.seitenleiste {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.1rem 0.85rem;
  /* Getoentes Glas statt Weichzeichner: Hinter der Leiste liegt nur die
     ruhende Aurora -- sie scheint durch, ohne dass etwas neu gerechnet wird. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 30%),
    linear-gradient(180deg, rgba(11, 12, 18, 0.8), rgba(8, 9, 14, 0.86));
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.025), 12px 0 40px -30px rgba(0, 0, 0, 0.9);
  overflow-y: auto;
}

.produkt { display: flex; align-items: center; gap: 0.55rem; padding: 0 0.45rem; font-weight: 650; letter-spacing: -0.015em; }
.produkt:hover { text-decoration: none; }
.produkt-zeichen { width: 22px; height: 22px; border-radius: 7px; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.75), transparent 45%), linear-gradient(135deg, var(--marke), color-mix(in srgb, var(--marke) 35%, var(--tinte))); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.4); }

/* Markenprofil: wer man gerade ist, und der Wechsel dorthin. */
.profil { position: relative; }
.profil > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.65rem;
  border-radius: var(--r-m);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--linie);
  cursor: pointer;
  user-select: none;
}
.profil > summary::-webkit-details-marker { display: none; }
.profil > summary:hover { background: rgba(255, 255, 255, 0.08); }
.profil-punkt { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--marke); box-shadow: 0 0 0 3px var(--marke-schein); }
.profil-name { font-weight: 600; font-size: 0.875rem; line-height: 1.2; }
.profil-seite { font-size: 0.7rem; color: var(--text-still); }
.profil-pfeil { margin-left: auto; color: var(--text-still); font-size: 0.75rem; }
.profil-liste { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; padding: 0.35rem; background: #111218; border: 1px solid var(--linie-hell); border-radius: var(--r-m); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); }
.profil-liste form { margin: 0; }
.profil-liste button { width: 100%; justify-content: flex-start; gap: 0.6rem; background: transparent; border-color: transparent; }
.profil-liste button:hover { background: rgba(255, 255, 255, 0.07); }
.profil-liste .profil-punkt { box-shadow: none; }

nav.haupt { display: flex; flex-direction: column; gap: 0.15rem; }
/* Gruppen im Menue: zuklappbar, Ueberschrift klein und leise. */
nav.haupt .gruppe-inhalt { display: flex; flex-direction: column; gap: 0.15rem; }
nav.haupt details.gruppe { margin-top: 0.65rem; }
nav.haupt details.gruppe > summary { display: flex; align-items: center; justify-content: space-between; padding: 0.3rem 0.6rem 0.3rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-still); cursor: pointer; list-style: none; user-select: none; border-radius: var(--r-s); }
nav.haupt details.gruppe > summary::-webkit-details-marker { display: none; }
nav.haupt details.gruppe > summary::after { content: ""; width: 0.36rem; height: 0.36rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: 0; transition: transform var(--zeit) var(--kurve), opacity var(--zeit) var(--kurve); }
nav.haupt details.gruppe > summary:hover { color: var(--text-leise); }
nav.haupt details.gruppe > summary:hover::after, nav.haupt details.gruppe:not([open]) > summary::after { opacity: 0.8; }
nav.haupt details.gruppe:not([open]) > summary::after { transform: rotate(-45deg); }
/* Eine zugeklappte Gruppe mit der aktuellen Seite zeigt wenigstens diese. */
nav.haupt details.gruppe:not([open]):has(a[aria-current]) > summary { color: var(--text-leise); }
nav.haupt a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--r-s);
  font-size: 0.85rem;
  color: var(--text-leise);
  transition: color var(--zeit) var(--kurve), background var(--zeit) var(--kurve);
}
nav.haupt a svg { width: 16px; height: 16px; flex: none; opacity: 0.8; }
nav.haupt a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); text-decoration: none; }
nav.haupt a[aria-current="page"] {
  color: var(--text);
  background: linear-gradient(90deg, color-mix(in srgb, var(--marke) 24%, transparent), color-mix(in srgb, var(--marke) 7%, transparent));
  box-shadow: var(--glanz), inset 0 0 0 1px color-mix(in srgb, var(--marke) 28%, transparent);
}
nav.haupt a[aria-current="page"] svg { opacity: 1; color: var(--marke); }
/* Eine Unterseite der Pipeline (Kalender, Werkzeug): derselbe Punkt, leiser. */
nav.haupt a[aria-current="true"] { color: var(--text); background: color-mix(in srgb, var(--marke) 10%, transparent); }
nav.haupt a[aria-current="true"] svg { opacity: 1; color: var(--marke); }
/* Die Gruppe "Pipelines" ist die einzige, die waechst (ADR 0027). Ab etwa
   acht Eintraegen scrollt nur sie -- so bleiben Automatik und Verwaltung
   darunter sichtbar, statt aus dem Fenster geschoben zu werden. Der Wert ist
   die Hoehe von acht Eintraegen; darunter greift nichts. */
nav.haupt .gruppe-inhalt-lang { max-height: min(17rem, 34vh); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--linie-hell) transparent; overscroll-behavior: contain; }
nav.haupt .gruppe-inhalt-lang::-webkit-scrollbar { width: 6px; }
nav.haupt .gruppe-inhalt-lang::-webkit-scrollbar-thumb { background: var(--linie-hell); border-radius: 999px; }
/* Jede Pipeline traegt ihre eigene Farbe als Punkt -- Reddit ist nicht X. */
nav.haupt a.pipeline-eintrag svg { color: var(--pipeline, currentColor); opacity: 1; }
.zahl { margin-left: auto; min-width: 1.35rem; padding: 0 0.4rem; border-radius: 999px; background: var(--marke); color: #0b0c10; font-size: 0.6875rem; font-weight: 700; text-align: center; line-height: 1.35rem; }

.leisten-fuss { margin-top: auto; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem 0.45rem 0; border-top: 1px solid var(--linie); }
.leisten-fuss form { margin: 0; }

@media (max-width: 900px) {
  /* Hier liegt die Leiste ueber dem Inhalt statt daneben (einspaltiges
     Raster) -- beim Scrollen laeuft z.B. die helle Cockpit-Buehne darunter
     durch. Die normale Transparenz (fuer 11-16) reichte dafuer nicht, Text
     schimmerte durch. Fast deckend, nur der Verlauf bleibt sichtbar. */
  .seitenleiste { position: sticky; top: 0; z-index: 40; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; border-right: 0; border-bottom: 1px solid var(--linie); background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 30%), linear-gradient(180deg, #0b0c12 0%, #08090e 100%); }
  .seitenleiste .produkt { display: none; }
  .seitenleiste .profil { flex: 1 1 10rem; }
  /* Eine Zeile, waagerecht wischbar -- vorher brach die Navigation in vier
     Zeilen um und nahm jeder Seite 300 px weg. */
  nav.haupt { flex-direction: row; flex-wrap: nowrap; width: 100%; overflow-x: auto; scrollbar-width: none; gap: 0.25rem; }
  nav.haupt::-webkit-scrollbar { display: none; }
  /* Rechts blendet die Leiste aus: Sonst sieht man nicht, dass weitere Eintraege
     folgen (der letzte sichtbare war einfach abgeschnitten). Das Polster sorgt
     dafuer, dass der letzte Eintrag am Ende der Wischbewegung voll lesbar bleibt. */
  nav.haupt { padding-right: 1.75rem; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.75rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 1.75rem), transparent); }
  nav.haupt a { flex: none; padding: 0.4rem 0.6rem; }
  nav.haupt details.gruppe { display: contents; }
  nav.haupt details.gruppe > summary { display: none; }
  nav.haupt .gruppe-inhalt { flex-direction: row; gap: 0.25rem; }
  /* Im schmalen Fenster wischt die ganze Leiste waagerecht -- dann darf die
     Pipeline-Gruppe nicht zusaetzlich senkrecht scrollen. */
  nav.haupt .gruppe-inhalt-lang { max-height: none; overflow: visible; }
  /* Abmelden und Konto bleiben erreichbar -- kompakt in einer Zeile. */
  .leisten-fuss { margin-top: 0; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; border-top: 0; padding: 0; gap: 0.5rem; }
}

/* 6. Formulare -------------------------------------------------------------- */

label { display: block; font-size: 0.8125rem; }
label > span { display: block; margin-bottom: 0.3rem; font-size: 0.75rem; color: var(--text-leise); }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="number"], input[type="search"], input:not([type]), select, textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--linie);
  border-radius: var(--r-m);
  transition: border-color var(--zeit) var(--kurve), box-shadow var(--zeit) var(--kurve);
}
textarea { resize: vertical; max-width: 100%; }
textarea.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.75rem; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: var(--text-still); }
input:focus, select:focus, textarea:focus { outline: none; border-color: color-mix(in srgb, var(--marke) 60%, transparent); box-shadow: 0 0 0 3px var(--marke-schein); }
select { appearance: none; padding-right: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ffffff' stroke-opacity='0.5' stroke-width='1.5'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.7rem center; }
select option { background: #14151c; color: var(--text); }
input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--marke); vertical-align: -2px; }
fieldset { margin: 0; padding: 0; border: 0; }
legend { padding: 0; margin-bottom: 0.4rem; font-size: 0.75rem; color: var(--text-leise); }

/* 7. Knoepfe ----------------------------------------------------------------- */

button, .knopf {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.45rem 0.9rem;
  font: inherit; font-size: 0.8125rem; font-weight: 520;
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.045));
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: var(--glanz), var(--kontakt), 0 1px 2px rgba(0, 0, 0, 0.35);
  border-radius: var(--r-m);
  cursor: pointer;
  transition: background var(--zeit) var(--kurve), transform 90ms var(--kurve), border-color var(--zeit) var(--kurve);
}
button:hover, .knopf:hover { background: rgba(255, 255, 255, 0.11); border-color: var(--linie-hell); text-decoration: none; }
button:active, .knopf:active { transform: scale(0.975); }
button:focus-visible, .knopf:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }
.knopf-haupt { color: #0a0c12; background: linear-gradient(180deg, var(--weiss), #cfd7ea); border-color: rgba(255, 255, 255, 0.5); font-weight: 600; box-shadow: inset 0 1px 0 var(--weiss), 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -10px rgba(190, 208, 255, 0.55); }
.knopf-haupt:hover { background: linear-gradient(180deg, var(--weiss), #dde3f3); }
.knopf-warnung { color: var(--weiss); background: rgba(208, 59, 59, 0.85); border-color: rgba(255, 130, 140, 0.35); }
.knopf-gut { color: #eafff0; background: linear-gradient(180deg, rgba(34, 197, 94, 0.42), rgba(12, 163, 12, 0.28)); border-color: rgba(134, 239, 172, 0.38); box-shadow: inset 0 1px 0 rgba(220, 255, 230, 0.18); }
.knopf-gut:hover { background: linear-gradient(180deg, rgba(34, 197, 94, 0.55), rgba(12, 163, 12, 0.38)); border-color: rgba(134, 239, 172, 0.55); }
.knopf-schlicht { background: transparent; border-color: transparent; color: var(--text-leise); }
.knopf-schlicht:hover { background: rgba(255, 255, 255, 0.07); color: var(--text); }
.knopf-klein { padding: 0.25rem 0.6rem; font-size: 0.75rem; }

/* 8. Kacheln, Pillen, Meldungen ------------------------------------------ */

.kacheln { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 1.1rem; }
@media (max-width: 600px) { .kachel { min-height: 0; padding: 0.85rem 0.9rem; } .kachel-wert { font-size: 1.5rem; } .kachel .funke { display: none; } }
.kachel { padding: 1rem 1.1rem 0.9rem; display: flex; flex-direction: column; gap: 0.2rem; min-height: 118px; }
.kachel-titel { font-size: 0.72rem; font-weight: 560; letter-spacing: 0.02em; color: var(--text-leise); }
.kachel-wert { font-size: 1.95rem; font-weight: 660; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kachel-link { transition: transform var(--zeit) var(--kurve); }
.kachel-link:hover { transform: translateY(-2px); text-decoration: none; }
.kachel-link:active { transform: translateY(0) scale(0.99); }
.kachel-wert small { font-size: 0.85rem; font-weight: 500; color: var(--text-still); letter-spacing: 0; }
.kachel-fuss { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; }
.delta { font-size: 0.75rem; font-weight: 600; }
.delta-gut { color: var(--gut-text); }
.delta-schlecht { color: var(--schlecht-text); }
.funke { width: 96px; height: 28px; }

.pille { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 560; letter-spacing: 0.015em; white-space: nowrap; background: rgba(255, 255, 255, 0.08); color: var(--text-leise); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.pille-gut { background: rgba(12, 163, 12, 0.16); color: var(--gut-text); }
.pille-warn { background: rgba(250, 178, 25, 0.15); color: var(--warn-text); }
.pille-schlecht { background: rgba(208, 59, 59, 0.18); color: var(--schlecht-text); }
.pille-akzent { background: var(--marke-schein); color: color-mix(in srgb, var(--marke) 70%, var(--weiss)); }

/* Zustand mit Zeichen und Wort -- Farbe traegt nie allein die Bedeutung. */
.zustand { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; }
.zustand::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-still); }
/* Ein ruhiger Schein statt Pulsieren: Auf der Pipeline stehen Dutzende
   gruene Punkte -- jeder pulsierende hielt die Seite in Bewegung. */
.zustand-gut::before { background: var(--gut); box-shadow: 0 0 0 3px rgba(12, 163, 12, 0.2); }
.zustand-warn::before { background: var(--warn); }
.zustand-schlecht::before { background: var(--schlecht); box-shadow: 0 0 0 3px rgba(208, 59, 59, 0.2); }

.meldung { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.65rem 0.6rem 0.65rem 0.9rem; border-radius: var(--r-m); font-size: 0.8125rem; margin-bottom: 1.1rem; transition: opacity 240ms var(--kurve), transform 240ms var(--kurve); }
.meldung[data-weg] { opacity: 0; transform: translateY(-6px); }
.meldung-zu { margin-left: auto; padding: 0 0.4rem; line-height: 1.3; font-size: 1rem; color: inherit; background: transparent; border: 0; opacity: 0.6; }
.meldung-zu:hover { background: rgba(255, 255, 255, 0.08); border: 0; opacity: 1; }
.meldung-fehler { background: rgba(208, 59, 59, 0.12); color: var(--schlecht-text); border: 1px solid rgba(208, 59, 59, 0.25); }
.meldung-gut { background: rgba(12, 163, 12, 0.1); color: var(--gut-text); border: 1px solid rgba(12, 163, 12, 0.22); }
.meldung-info { background: var(--marke-schein); color: var(--text); border: 1px solid color-mix(in srgb, var(--marke) 30%, transparent); }

.leer { padding: 2.2rem 1.25rem; text-align: center; font-size: 0.8125rem; color: var(--text-still); border: 1px dashed var(--linie); border-radius: var(--r-l); }

/* Nur links kein Einzug -- "padding: 0" ueberschrieb das Padding von
   .glas-inhalt, Listen klebten am Kartenrand. */
.liste { margin: 0; padding-left: 0; list-style: none; }
.liste.glas-inhalt { padding: 1.1rem 1.2rem; }
.liste > li { padding: 0.65rem 0; border-top: 1px solid var(--linie); }
.liste > li:first-child { border-top: 0; padding-top: 0; }
.liste-zeile { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem; }

.aufklappbar { border-top: 1px solid var(--linie); }
.aufklappbar > summary { padding: 0.7rem 1.2rem; font-size: 0.8125rem; color: var(--text-leise); cursor: pointer; list-style: none; user-select: none; }
.aufklappbar > summary::-webkit-details-marker { display: none; }
.aufklappbar > summary::before { content: ""; display: inline-block; width: 0.4rem; height: 0.4rem; margin-right: 0.55rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-1px) rotate(-45deg); transition: transform var(--zeit) var(--kurve); }
.aufklappbar[open] > summary::before { transform: translateY(-2px) rotate(45deg); }
.aufklappbar > summary:hover { color: var(--text); }

.balken { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45); }
.balken > div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--marke) 55%, transparent), var(--marke)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.balken-voll > div { background: linear-gradient(90deg, rgba(208, 59, 59, 0.55), var(--schlecht)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }

.reiter { display: flex; gap: 0.25rem; margin-bottom: 1.1rem; padding: 0.25rem; width: fit-content; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--r-m); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px -14px rgba(0, 0, 0, 0.8); }
.reiter a { padding: 0.35rem 0.85rem; border-radius: var(--r-s); font-size: 0.8125rem; color: var(--text-leise); }
.reiter a:hover { color: var(--text); text-decoration: none; }
.reiter a[aria-current="page"] { background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.07)); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 2px 10px -4px rgba(0, 0, 0, 0.6), 0 0 18px -8px var(--leuchten); }

.anmelden { max-width: 22rem; margin: 6rem auto 0; padding: 0 1rem; }

/* 9. Diagramme --------------------------------------------------------------- */

.chart { display: block; width: 100%; height: auto; max-height: 220px; overflow: visible; }
.chart .achse { fill: var(--text-still); font-size: 10px; font-variant-numeric: tabular-nums; }
.chart rect[data-tip]:hover, .chart rect[data-tip]:focus-visible { fill: rgba(255, 255, 255, 0.035); }

.hb { display: grid; gap: 0.55rem; }
.hb-zeile { display: grid; grid-template-columns: minmax(8rem, 15rem) minmax(0, 1fr) 3rem; align-items: center; gap: 0.75rem; font-size: 0.8rem; border-radius: 6px; }
.hb-zeile:hover .hb-balken, .hb-zeile:focus .hb-balken { filter: brightness(1.2); }
.hb-name { color: var(--text-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-spur { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45); }
.hb-balken { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--c, var(--marke)) 55%, transparent), var(--c, var(--marke))); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); transition: filter var(--zeit); }
.hb-wert { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
@media (max-width: 600px) { .hb-zeile { grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr) 2.5rem; } }

.st-balken { display: flex; gap: 2px; height: 14px; border-radius: 999px; overflow: hidden; }
.st-teil { min-width: 4px; transition: filter var(--zeit); }
.st-teil:hover, .st-teil:focus-visible { filter: brightness(1.25); }
.st-legende { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.65rem; font-size: 0.75rem; color: var(--text-leise); }
.st-leg { display: inline-flex; align-items: center; gap: 0.35rem; }
.st-leg i { width: 9px; height: 9px; border-radius: 3px; }
.st-leg b { color: var(--text); font-weight: 600; }

.ring-box { position: relative; width: 112px; height: 112px; flex: none; }
.ring { width: 112px; height: 112px; }
.ring-box .ring-wert { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-size: 1.35rem; font-weight: 650; letter-spacing: -0.02em; }
.ring-box .ring-wert small { display: block; font-size: 0.6875rem; font-weight: 500; color: var(--text-still); letter-spacing: 0.02em; }

#tip {
  position: fixed; z-index: 100; pointer-events: none;
  max-width: 22rem; padding: 0.45rem 0.65rem;
  font-size: 0.75rem; line-height: 1.4; color: var(--text);
  background: rgba(16, 17, 23, 0.96); border: 1px solid var(--linie-hell); border-radius: var(--r-s);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  /* Position per transform (app.js): verschiebt nur die Ebene, statt bei
     jeder Mausbewegung das Layout neu zu berechnen. */
  left: 0; top: 0; will-change: transform;
  opacity: 0; transition: opacity 120ms;
}
#tip[data-sichtbar] { opacity: 1; }

/* 10. Tabellen und Chips ----------------------------------------------------- */

.tabelle { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
thead th { padding-bottom: 0.5rem; text-align: left; font-size: 0.6875rem; font-weight: 560; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-still); white-space: nowrap; }
tbody tr { border-top: 1px solid var(--linie); }
tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
tbody td { padding: 0.55rem 0; vertical-align: top; }
thead th + th, tbody td + td { padding-left: 1rem; }
.rechts { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.chip { display: inline-block; padding: 0.08rem 0.45rem; border-radius: 6px; font-size: 0.7rem; background: rgba(250, 178, 25, 0.12); color: var(--warn-text); white-space: nowrap; }
.chip-schwer { background: rgba(208, 59, 59, 0.15); color: var(--schlecht-text); }

.pruefliste { display: grid; gap: 0.45rem; font-size: 0.8125rem; }
.pruefliste > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* 11. Barrierefreiheit ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  /* Nichts bewegt sich mehr von selbst und nichts fliegt: Ambient- und
     Ein-/Ausblend-Animationen aus, Anheben und Skalieren aus. Zustandswechsel
     (Farbe, Hintergrund, Sichtbarkeit) bleiben als kurzes Einblenden erhalten --
     so sieht man weiter, dass etwas passiert ist. */
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition-property: color, background-color, border-color, opacity, fill, stroke !important; transition-duration: 0.12s !important; }
  .kachel-link:hover, .freigabe-zeile:hover, button:active, .knopf:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .glas { background: #14161f; }
  .seitenleiste { background: #0c0e15; }
  .hintergrund::after { display: none; }
}
@media (prefers-contrast: more) {
  :root { --text: var(--weiss); --text-leise: rgba(255, 255, 255, 0.84); --text-still: rgba(255, 255, 255, 0.68); --linie: rgba(255, 255, 255, 0.28); }
  .glas { background: #14161f; }
}
@media (forced-colors: active) {
  .hb-balken, .st-teil { forced-color-adjust: none; }
}

/* 12. Freigabe-Seite ---------------------------------------------------------- */

/* Die Entscheidung klebt oben -- auch nach einem langen Artikel ist
   "Freigeben" einen Klick entfernt. */
.entscheidung {
  position: sticky; top: 0.75rem; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem;
  margin-bottom: 1.1rem; padding: 0.7rem 0.9rem;
  background: rgba(14, 15, 20, 0.97);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.entscheidung .rechts { margin-left: auto; }
@media (max-width: 700px) { .entscheidung .rechts { display: none; } }

.ausklapp { position: relative; }
.ausklapp > summary { list-style: none; }
.ausklapp > summary::-webkit-details-marker { display: none; }
.ausklapp[open] > summary { background: rgba(255, 255, 255, 0.11); border-color: var(--linie-hell); }
.ausklapp-feld {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 40;
  display: grid; gap: 0.55rem; width: min(26rem, calc(100vw - 2.5rem)); padding: 0.9rem;
  background: #121319; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
  transform-origin: top left; animation: auftauchen 110ms ease-out;
}
/* Kurz und nur beim Oeffnen: zeigt, woher das Feld kommt. */
@keyframes auftauchen { from { opacity: 0; transform: translateY(-3px); } }

/* So etwa sieht Google den Treffer. */
.suchtreffer { padding: 0.9rem 1rem; border-radius: var(--r-m); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--linie); font-family: Arial, system-ui, sans-serif; }
.suchtreffer-url { font-size: 0.75rem; color: var(--text-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suchtreffer-titel { margin-top: 0.2rem; font-size: 1.15rem; line-height: 1.3; color: #99c3ff; }
.suchtreffer-text { margin-top: 0.25rem; font-size: 0.8125rem; line-height: 1.5; color: var(--text-leise); }

/* Der Artikel selbst: Lesebreite, ruhige Typografie. */
.lesetext { font-size: 0.9375rem; line-height: 1.7; }
.lesetext > :first-child { margin-top: 0; }
.lesetext h3 { margin: 1.6rem 0 0.4rem; font-size: 1.05rem; font-weight: 620; letter-spacing: -0.01em; }
.lesetext h4 { margin: 1.1rem 0 0.3rem; font-size: 0.9375rem; font-weight: 600; }
.lesetext p, .lesetext ul, .lesetext ol { margin: 0 0 0.85rem; max-width: 70ch; color: rgba(255, 255, 255, 0.86); }
.lesetext li + li { margin-top: 0.25rem; }
.lesetext code { font-size: 0.85em; padding: 0.05rem 0.3rem; border-radius: 5px; background: rgba(255, 255, 255, 0.08); }
.faq { border-top: 1px solid var(--linie); }
.faq > summary { padding: 0.6rem 0; font-weight: 560; cursor: pointer; }
.faq > :not(summary) { padding-left: 1rem; }

.werte { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1rem; margin: 0; }
.werte dt { font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-still); }
.werte dd { margin: 0.1rem 0 0; font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.werte-text { grid-template-columns: 1fr; }
.werte-text dd { font-size: 0.8125rem; font-weight: 450; overflow-wrap: anywhere; }

.aufklappbar-glas > summary { padding: 0.85rem 1.2rem; font-size: 0.8125rem; color: var(--text-leise); cursor: pointer; list-style: none; user-select: none; }
.aufklappbar-glas > summary::-webkit-details-marker { display: none; }
.aufklappbar-glas > summary::before { content: ""; display: inline-block; width: 0.4rem; height: 0.4rem; margin-right: 0.6rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-1px) rotate(-45deg); transition: transform var(--zeit) var(--kurve); }
.aufklappbar-glas[open] > summary::before { transform: translateY(-2px) rotate(45deg); }
.aufklappbar-glas > summary:hover { color: var(--text); }

/* Ein Knopf, dessen Formular gerade gesendet wird. */
button[aria-busy="true"] { opacity: 0.6; cursor: progress; }

/* 13. SEO-Plan: Status von Hand ---------------------------------------------- */

.status-aendern { display: inline-block; text-align: left; }
.status-aendern > summary { cursor: pointer; list-style: none; }
.status-aendern > summary::-webkit-details-marker { display: none; }
.status-formular { display: grid; gap: 0.5rem; width: 17rem; margin-top: 0.5rem; padding: 0.75rem; border: 1px solid var(--linie-hell); border-radius: var(--r-m); background: #121319; }

.freigabe-zeile { color: inherit; transition: border-color var(--zeit) var(--kurve), background var(--zeit) var(--kurve); }
.freigabe-zeile:hover { text-decoration: none; border-color: var(--linie-hell); background: rgba(30, 31, 40, 0.8); }

/* 14. Seitenwechsel ------------------------------------------------------------ */

/* Die Seitenleiste bleibt beim Wechsel stehen, nur der Inhalt blendet kurz
   ueber (View Transitions, Chrome/Edge/Safari). Kein Aufblitzen, kein
   Neuaufbau der Leiste -- das Dashboard fuehlt sich wie eine App an.
   Browser ohne Unterstuetzung laden die Seite einfach wie bisher. */
@view-transition { navigation: auto; }
.seitenleiste { view-transition-name: seitenleiste; }
::view-transition-group(root) { animation-duration: 120ms; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 120ms; animation-timing-function: ease-out; }

/* Lange Bereiche (SEO-Tabellen, Themenplan) erst zeichnen, wenn sie ins Bild
   kommen -- die Seite ist sofort da, auch mit Hunderten Zeilen. */
.spaeter-zeichnen { content-visibility: auto; contain-intrinsic-size: auto 480px; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* 15. Befunde auf der Freigabe-Seite -------------------------------------------- */

.befunde { border-color: rgba(250, 178, 25, 0.28); }
.befund { overflow-wrap: anywhere; }

/* 16. SEO-Werkzeug: Aufgaben, Seiten, Verlauf ------------------------------------ */

.reiter-scroll { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.reiter-scroll a { white-space: nowrap; }
.reiter-zahl { display: inline-block; min-width: 1.2rem; margin-left: 0.2rem; padding: 0 0.35rem; border-radius: 999px; font-size: 0.6875rem; text-align: center; background: rgba(255, 255, 255, 0.12); }

.aufgaben { list-style: none; margin: 0; padding: 0; container-type: inline-size; }
.aufgabe { padding: 0.8rem 1.2rem 0.55rem; border-top: 1px solid var(--linie); }
.aufgabe:first-child { border-top: 0; }
.aufgabe-kopf { display: flex; align-items: flex-start; gap: 0.75rem; }
.aufgabe-kopf > .pille { flex: none; margin-top: 0.1rem; min-width: 5.6rem; justify-content: center; }
.aufgabe-titel { flex: 1; min-width: 0; font-size: 0.875rem; font-weight: 540; overflow-wrap: anywhere; }
.aufgabe-titel .winzig { font-weight: 400; margin-top: 0.1rem; }
.aufgabe-aktionen { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; }
.aufgabe-details > summary { margin: 0.35rem 0 0 6.35rem; font-size: 0.75rem; color: var(--text-leise); cursor: pointer; width: fit-content; }
.aufgabe-details > summary:hover { color: var(--text); }
.aufgabe-inhalt { margin: 0.5rem 0 0.4rem 6.35rem; display: grid; gap: 0.45rem; }
.aufgabe-inhalt p { margin: 0; }
/* In schmalen Spalten (Uebersicht: zwei Drittel) rutschen die Knoepfe unter
   den Titel -- der Titel behaelt die ganze Breite statt in drei Zeilen zu
   zerfallen. Nach der Breite der Liste, nicht des Fensters. */
@container (max-width: 780px) {
  .aufgabe-kopf { flex-wrap: wrap; }
  .aufgabe-titel { flex-basis: calc(100% - 6.35rem); }
  .aufgabe-aktionen { width: 100%; padding-left: 6.35rem; justify-content: flex-start; }
}
@container (max-width: 520px) {
  .aufgabe-aktionen, .aufgabe-details > summary, .aufgabe-inhalt { padding-left: 0; margin-left: 0; }
}
.befund-liste, .beleg-liste { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.25rem; font-size: 0.8125rem; }
.beleg-spalten { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); column-gap: 1.5rem; }

.filterleiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 1rem; }
.feld-klein { padding: 0.3rem 0.55rem; font-size: 0.8125rem; min-width: 0; }
input[type="search"].feld-klein { width: 13rem; }

.mini-balken { display: inline-block; vertical-align: middle; width: 3.5rem; height: 6px; margin-right: 0.4rem; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.mini-balken > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, rgba(57, 135, 229, 0.55), #4f9bf5); box-shadow: 0 0 8px -1px rgba(79, 155, 245, 0.75); }

.umbruch { overflow-wrap: anywhere; }
.titel-code { font-size: 1.05rem; font-weight: 600; background: none; padding: 0; }

.zeitleiste { list-style: none; margin: 0; display: grid; gap: 0.5rem; }
.zeitleiste > li { position: relative; padding-left: 1rem; font-size: 0.8125rem; }
.zeitleiste > li::before { content: ""; position: absolute; left: 0; top: 0.45rem; width: 6px; height: 6px; border-radius: 50%; background: var(--text-still); }
.zeitleiste > li.zeitleiste-kritisch::before { background: var(--schlecht); }
.zeitleiste > li.zeitleiste-hoch::before { background: var(--warn); }

.kachel-link { color: inherit; transition: border-color var(--zeit) var(--kurve), background var(--zeit) var(--kurve); }
.kachel-link:hover { text-decoration: none; border-color: var(--linie-hell); background: rgba(30, 31, 40, 0.8); }
.zahlenraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.5rem; }
.zahlenraster > a { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.6rem 0.75rem; border: 1px solid var(--linie); border-radius: var(--r-m); color: inherit; }
.zahlenraster > a:hover { text-decoration: none; border-color: var(--linie-hell); }
.zahlenraster b { font-size: 1.35rem; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.zahlenraster span { font-size: 0.72rem; color: var(--text-leise); }
.zahlenraster .schlecht-text b { color: var(--schlecht-text); }

/* 17. Redaktionskalender ------------------------------------------------------------ */

/* Farbe nach Art (feste Slots), nie allein: Jede Art hat ihre Form im
   Kaestchen davor und steht in der Legende und im Tooltip. */
.kalender { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--linie); }
.kalender-kopf { padding: 0.45rem 0.6rem; font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-still); border-bottom: 1px solid var(--linie); }
.kalender-tag { min-height: 6.5rem; padding: 0.4rem 0.45rem 0.5rem; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.kalender-tag:nth-child(7n + 7) { border-right: 0; }
.kalender-tag.anderer-monat { background: rgba(0, 0, 0, 0.18); }
.kalender-tag.anderer-monat .kalender-datum { color: var(--text-still); }
.kalender-tag.heute { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marke) 70%, transparent); background: var(--marke-schein); }
.kalender-datum { font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.kalender-wochentag { display: none; }
.kalender-eintrag { display: grid; grid-template-columns: 0.55rem minmax(0, 1fr); column-gap: 0.35rem; align-items: baseline; padding: 0.18rem 0.3rem; border-radius: 6px; font-size: 0.7rem; line-height: 1.3; color: var(--text); background: rgba(255, 255, 255, 0.045); }
.kalender-eintrag:hover { text-decoration: none; background: rgba(255, 255, 255, 0.09); }
.eintrag-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eintrag-zusatz { grid-column: 2; font-size: 0.6875rem; color: var(--text-still); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eintrag-art, .leg i { display: inline-block; width: 0.5rem; height: 0.5rem; }
.eintrag-thema .eintrag-art, .leg.eintrag-thema i { background: #3987e5; border-radius: 2px; }
.eintrag-geplant .eintrag-art, .leg.eintrag-geplant i, .kv-punkte i.eintrag-geplant { border: 1.5px solid #c98500; border-radius: 50%; }
.eintrag-live .eintrag-art, .leg.eintrag-live i, .kv-punkte i.eintrag-live { background: #199e70; border-radius: 50%; }
.eintrag-probe .eintrag-art, .leg.eintrag-probe i, .kv-punkte i.eintrag-probe { border: 1.5px dashed #199e70; border-radius: 50%; }
.eintrag-auto .eintrag-art, .leg.eintrag-auto i, .kv-punkte i.eintrag-auto { width: 0; height: 0; border-left: 0.28rem solid transparent; border-right: 0.28rem solid transparent; border-bottom: 0.5rem solid var(--text-still); }
.eintrag-auto { background: transparent; color: var(--text-leise); }
.eintrag-warnung { box-shadow: inset 2px 0 0 var(--schlecht); }
.kalender-tag.vergangen .eintrag-auto { opacity: 0.55; }
/* Artikel aus dem Website-Repo (ADR 0014): eine Raute -- live gefuellt,
   dort eingeplant umrandet, Entwurf gestrichelt und leiser. */
.eintrag-web-live .eintrag-art, .leg.eintrag-web-live i,
.eintrag-web-geplant .eintrag-art, .leg.eintrag-web-geplant i,
.eintrag-web-entwurf .eintrag-art, .leg.eintrag-web-entwurf i { transform: rotate(45deg) scale(0.8); }
.eintrag-web-live .eintrag-art, .leg.eintrag-web-live i { background: #199e70; }
.eintrag-web-geplant .eintrag-art, .leg.eintrag-web-geplant i { border: 1.5px solid #199e70; }
.eintrag-web-entwurf .eintrag-art, .leg.eintrag-web-entwurf i { border: 1.5px dashed var(--text-still); }
.eintrag-web-entwurf { color: var(--text-leise); background: transparent; }
/* Von der automatischen Planung gesetzt: gestrichelter Rahmen, bis ein Mensch ihn uebernimmt. */
.eintrag-vorschlag { outline: 1px dashed color-mix(in srgb, #3987e5 60%, transparent); outline-offset: -1px; background: transparent; }
.leg.eintrag-vorschlag i { outline: 1px dashed #3987e5; outline-offset: 1px; }
.abgleich-leiste { margin-bottom: 1.1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.abgleich-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.vorschlag-aktionen { justify-content: flex-end; }
.rhythmus-formular { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
.rhythmus-tage { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; }
.rhythmus-tage legend { width: 100%; margin-bottom: 0.2rem; }
.kalender-legende { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 0.72rem; color: var(--text-leise); }
.leg { display: inline-flex; align-items: center; gap: 0.4rem; }
.termin-formular { display: inline-flex; gap: 0.3rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.termin-formular input[type="date"] { width: 8.6rem; }
.termin-formular input[type="time"] { width: 6rem; }

/* Die Tagessicht des Pipeline-Kalenders: eine Spalte statt sieben. */
.kalender-einspaltig { grid-template-columns: minmax(0, 1fr); }
.kalender-einspaltig .kalender-tag { min-height: 11rem; border-right: 0; }

/* Die Pipeline-Seite: links alles, rechts allein der Kalender. Er bleibt beim
   Scrollen stehen (`align-items: start` ist dafuer noetig -- sonst zieht das
   Raster die Spalte auf volle Hoehe und `sticky` hat keinen Spielraum).
   Ab 1100px aufwaerts; darunter wird daraus wieder eine Spalte und der
   Kalender rutscht ans Ende, statt die Seite schmal zu quetschen. */
.pipeline-spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.pipeline-haupt { min-width: 0; }
@media (min-width: 1100px) {
  .pipeline-spalten { grid-template-columns: minmax(0, 1fr) 21rem; }
  .pipeline-seitenspalte { position: sticky; top: 0.75rem; }
}

/* Kalender-Kachel auf der Pipeline-Seite: zwei Wochen als Streifen. Sie ist
   als Ganzes ein Link -- deshalb hier kein Unterstreichen beim Hover. */
.kv-streifen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--linie); }
.kv-streifen:hover { text-decoration: none; }
.kv-streifen:hover .kv-tag:not(.ohne) { background: rgba(255, 255, 255, 0.05); }
.kv-tag { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-width: 0; padding: 0.4rem 0.2rem 0.45rem; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); color: var(--text); }
.kv-tag:nth-child(7n + 7) { border-right: 0; }
.kv-tag.ohne { color: var(--text-still); }
.kv-tag.heute { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marke) 70%, transparent); background: var(--marke-schein); }
.kv-wochentag { font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-still); }
.kv-zahl { font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Feste Hoehe, damit die Tage ohne Eintrag die Zeile nicht kuerzer machen. */
.kv-punkte { display: flex; gap: 0.15rem; align-items: center; min-height: 0.5rem; }
.kv-punkte i { display: inline-block; width: 0.4rem; height: 0.4rem; }
/* Das Dreieck des automatischen Laufs hat keine Flaeche, nur Rahmen. */
.kv-punkte i.eintrag-auto { width: 0; height: 0; border-left-width: 0.22rem; border-right-width: 0.22rem; border-bottom-width: 0.4rem; }

/* Auf dem Handy eine Liste der Tage mit Eintraegen statt eines Rasters. */
@media (max-width: 760px) {
  .kalender { grid-template-columns: minmax(0, 1fr); }
  .kalender-kopf, .kalender-tag.ohne:not(.heute), .kalender-tag.anderer-monat { display: none; }
  .kalender-tag { min-height: 0; border-right: 0; padding: 0.6rem 1rem; }
  .kalender-wochentag { display: inline; }
  .eintrag-text, .eintrag-zusatz { white-space: normal; }
}

/* 18. Besucher ---------------------------------------------------------------------- */

.kacheln-6 { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
.live-punkt { display: inline-block; width: 7px; height: 7px; margin: 0 0.3rem 0 0.1rem; border-radius: 50%; background: var(--gut); box-shadow: 0 0 0 3px rgba(12, 163, 12, 0.2); vertical-align: 1px; }
.legende-linie { display: inline-block; width: 1.2rem; height: 0; margin-right: 0.35rem; border-top: 2px solid #3987e5; vertical-align: middle; }
.legende-linie.gestrichelt { border-top: 1.5px dashed #5b5e69; }
.abschnitt { margin: 1.6rem 0 0.8rem; font-size: 0.8125rem; color: var(--text-leise); }
.umgebung-raster { display: grid; gap: 1.1rem 1.6rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.code-feld { width: 100%; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.78rem; resize: none; }
.zahlenraster > div { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.6rem 0.75rem; border: 1px solid var(--linie); border-radius: var(--r-m); }

/* 19. Suche -------------------------------------------------------------------------- */

.mini-tabelle { width: 100%; font-size: 0.75rem; border-collapse: collapse; }
.mini-tabelle th { font-weight: 500; color: var(--text-still); text-align: left; padding: 0.2rem 0.4rem 0.2rem 0; }
.mini-tabelle td { padding: 0.2rem 0.4rem 0.2rem 0; border-top: 1px solid var(--linie); }
.positionen { display: grid; gap: 0.55rem; }
.positionen-zeile { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.75rem; align-items: center; font-size: 0.75rem; }
.positionen-zeile .st-legende { display: none; }
.positionen > .st-legende { margin-top: 0.4rem; }

/* 20. Bewertung ---------------------------------------------------------------------- */

.bewertung-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; padding: 1.4rem 1.5rem; }
.bewertung-kopf h2 { font-size: 1.35rem; letter-spacing: -0.02em; margin-bottom: 0.35rem; }
.bewertung-text { flex: 1 1 18rem; min-width: 0; }
.ring-gross, .ring-gross .ring { width: 140px; height: 140px; }
.ring-gross .ring-wert { font-size: 2rem; }
.grenze { display: flex; gap: 0.55rem; align-items: flex-start; margin-top: 0.6rem; padding: 0.55rem 0.75rem; border-radius: var(--r-m); background: rgba(208, 59, 59, 0.1); border: 1px solid rgba(208, 59, 59, 0.22); color: var(--schlecht-text); font-size: 0.8125rem; }
.grenze svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

.bereich-raster { display: grid; gap: 0.9rem; margin-top: 1.1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .bereich-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bereich-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bereich-karte { display: flex; flex-direction: column; gap: 0.45rem; padding: 1rem 1.1rem; color: inherit; text-decoration: none; transition: border-color var(--zeit) var(--kurve), transform var(--zeit) var(--kurve); }
.bereich-karte:hover { border-color: var(--linie-hell); transform: translateY(-1px); }
.bereich-karte:active { transform: scale(0.99); }
.bereich-kopf { display: flex; align-items: center; gap: 0.55rem; }
.bereich-name { flex: 1; font-size: 0.875rem; font-weight: 600; }
.bereich-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, 0.06); }
.bereich-icon svg { width: 17px; height: 17px; }
.bereich-gut { color: var(--gut-text); background: rgba(12, 163, 12, 0.14); }
.bereich-warn { color: var(--warn-text); background: rgba(250, 178, 25, 0.14); }
.bereich-schlecht { color: var(--schlecht-text); background: rgba(208, 59, 59, 0.16); }
.bereich-wert { font-size: 1.7rem; font-weight: 650; letter-spacing: -0.025em; line-height: 1.1; }
.bereich-wert small { font-size: 0.8rem; font-weight: 500; color: var(--text-still); }
.bereich-balken { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45); }
.bereich-balken > span { display: block; height: 100%; border-radius: 999px; }
.fuellung-gut { background: linear-gradient(90deg, rgba(12, 163, 12, 0.5), #22c55e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.fuellung-warn { background: linear-gradient(90deg, rgba(250, 178, 25, 0.5), var(--warn)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.fuellung-schlecht { background: linear-gradient(90deg, rgba(208, 59, 59, 0.5), #ef4444); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.fuellung-offen { background: transparent; }

.hebel-liste { list-style: none; margin: 0; padding: 0.4rem 0; counter-reset: hebel; }
.hebel-liste > li { position: relative; display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; gap: 0.9rem; align-items: center; padding: 0.7rem 1.2rem; border-top: 1px solid var(--linie); }
.hebel-liste > li:first-child { border-top: 0; }
.hebel-balken { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; pointer-events: none; }
.hebel-balken > span { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--marke) 10%, transparent), transparent); }
.hebel-punkte { position: relative; font-size: 1.05rem; font-weight: 650; color: color-mix(in srgb, var(--marke) 75%, var(--weiss)); font-variant-numeric: tabular-nums; }
.hebel-text { position: relative; min-width: 0; display: grid; gap: 0.15rem; }
.hebel-link { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--text-leise); }
.hebel-link:hover { background: rgba(255, 255, 255, 0.07); color: var(--text); }
.hebel-link svg { width: 16px; height: 16px; }

.pille-punkte { background: var(--marke-schein); color: color-mix(in srgb, var(--marke) 75%, var(--weiss)); font-variant-numeric: tabular-nums; }
.mit-icon { display: inline-flex; align-items: center; gap: 0.5rem; }
.mit-icon svg { width: 17px; height: 17px; color: var(--text-leise); }

.pruef-liste { list-style: none; margin: 0; padding: 0.3rem 0 0.4rem; }
.pruef-liste > li { border-top: 1px solid var(--linie); }
.pruef-liste > li:first-child { border-top: 0; }
.pruef-liste summary { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.7rem 1.2rem; cursor: pointer; list-style: none; }
.pruef-liste summary::-webkit-details-marker { display: none; }
.pruef-liste summary:hover { background: rgba(255, 255, 255, 0.025); }
.pruef-zeichen { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; font-size: 0.72rem; font-weight: 700; background: rgba(255, 255, 255, 0.06); color: var(--text-still); }
.pruef-ok .pruef-zeichen { background: rgba(12, 163, 12, 0.16); color: var(--gut-text); }
.pruef-niedrig .pruef-zeichen, .pruef-mittel .pruef-zeichen { background: rgba(250, 178, 25, 0.15); color: var(--warn-text); }
.pruef-hoch .pruef-zeichen, .pruef-kritisch .pruef-zeichen { background: rgba(208, 59, 59, 0.18); color: var(--schlecht-text); }
.pruef-titel { flex: 1; min-width: 0; display: grid; gap: 0.1rem; font-size: 0.8125rem; }
.pruef-titel .leise { font-size: 0.78rem; }
.pruef-inhalt { padding: 0 1.2rem 0.9rem 3.2rem; }
.pruef-ok .pruef-titel strong { font-weight: 500; color: var(--text-leise); }

@media (max-width: 640px) {
  .hebel-liste > li { grid-template-columns: 3.4rem minmax(0, 1fr); }
  .hebel-link { display: none; }
  .pruef-inhalt { padding-left: 1.2rem; }
}

.bewertung-kurz { margin-bottom: 1.1rem; }
.bereich-streifen { display: grid; gap: 0.8rem 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
.streifen-eintrag { display: grid; gap: 0.3rem; color: inherit; text-decoration: none; padding: 0.35rem 0.1rem; border-radius: var(--r-s); }
.streifen-eintrag b { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.02em; }
.streifen-eintrag:hover .bereich-balken { background: rgba(255, 255, 255, 0.13); }

/* 21. Lesbare Werte (statt JSON) ------------------------------------------------ */

.felder { display: grid; gap: 0.1rem; margin: 0; grid-template-columns: minmax(0, 1fr); }
.felder > div { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); gap: 0.75rem; padding: 0.35rem 0; border-top: 1px solid var(--linie); font-size: 0.8125rem; }
.felder > div:first-child { border-top: 0; }
.felder dt { color: var(--text-still); font-size: 0.78rem; }
.felder dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.wert-paar { display: inline-block; margin-right: 0.8rem; }
.regeln { display: grid; gap: 0.7rem; }
.regel { padding: 0.75rem 0.9rem; border: 1px solid var(--linie); border-radius: var(--r-m); background: rgba(255, 255, 255, 0.02); }
.regel-kopf { display: flex; align-items: center; gap: 0.55rem; font-size: 0.8125rem; }
.regel-kopf .winzig, .regel-kopf .pille { margin-left: auto; }
.regel-zeichen { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 0.6875rem; font-weight: 700; }
.regel-verbot { background: rgba(208, 59, 59, 0.18); color: var(--schlecht-text); }
.regel-pflicht { background: rgba(12, 163, 12, 0.16); color: var(--gut-text); }
.regel-ki { background: var(--marke-schein); color: color-mix(in srgb, var(--marke) 75%, var(--weiss)); }
.regel .klein { margin: 0.45rem 0 0; }
.regel-werte { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin-top: 0.5rem; }
@media (max-width: 520px) { .felder > div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; } }

/* 22. Claude-Knoepfe --------------------------------------------------------------- */

.knopf-claude { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text); background: linear-gradient(180deg, rgba(217, 119, 87, 0.16), rgba(217, 119, 87, 0.07)); border: 1px solid rgba(232, 146, 112, 0.3); box-shadow: inset 0 1px 0 rgba(255, 220, 200, 0.12), 0 0 18px -10px rgba(232, 146, 112, 0.8); text-decoration: none; }
.knopf-claude:hover { background: linear-gradient(180deg, rgba(217, 119, 87, 0.26), rgba(217, 119, 87, 0.12)); border-color: rgba(240, 160, 125, 0.5); text-decoration: none; }
.knopf-claude svg { width: 14px; height: 14px; color: #f0a07d; }
.knopf-mit-icon { display: inline-flex; align-items: center; gap: 0.45rem; }
.knopf-mit-icon svg { width: 15px; height: 15px; flex: none; }
.claude-ordner { margin: 0 0 1rem; font-size: 0.8125rem; }
.claude-ordner > summary { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-leise); cursor: pointer; list-style: none; }
.claude-ordner > summary::-webkit-details-marker { display: none; }
.claude-ordner > summary svg { width: 14px; height: 14px; color: #e0a184; }
.claude-ordner form { margin: 0.6rem 0 0.35rem; max-width: 36rem; }
.claude-ordner input { flex: 1; min-width: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.78rem; }

/* 23. Datenstand und Frühwarnungen ------------------------------------------------- */

.datenstand { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: -0.6rem 0 1.1rem; }
.datenstand a.pille:hover { text-decoration: none; box-shadow: inset 0 0 0 1px currentColor; }

/* 24. Feinschliff -------------------------------------------------------------- */

/* Seitentitel: Gewicht und Laufweite tragen ihn, kein Verlauf in der Schrift. */
.kopfzeile h1 { font-weight: 600; letter-spacing: -0.025em; }

/* Fehler als ruhige Zeile mit Zeichen statt als roter Rohtext. */
.fehlertext { display: inline-flex; align-items: baseline; gap: 0.4rem; max-width: 100%; font-size: 0.75rem; color: color-mix(in srgb, var(--schlecht-text) 88%, var(--weiss)); overflow: hidden; text-overflow: ellipsis; }
.fehlertext::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; font-size: 0.6875rem; font-weight: 700; color: var(--weiss); background: rgba(208, 59, 59, 0.7); box-shadow: 0 0 10px -2px rgba(239, 68, 68, 0.8); transform: translateY(2px); }

/* Leere Zustaende: eine weiche Flaeche statt einer gestrichelten Box. */
.leer { background: radial-gradient(80% 120% at 50% 0%, rgba(255, 255, 255, 0.035), transparent 70%); border: 1px dashed rgba(255, 255, 255, 0.1); }

/* Tabellenzeilen: sanfter Schimmer beim Darueberfahren. */
tbody tr { transition: background var(--zeit) var(--kurve); }
tbody tr:hover { background: linear-gradient(90deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)); }

/* Freigabe-Karten: heben sich beim Zeigen leicht ab. */
.freigabe-zeile { transition: transform var(--zeit) var(--kurve), box-shadow var(--zeit) var(--kurve); }
.freigabe-zeile:hover { transform: translateY(-1px); text-decoration: none; }

/* Balken wachsen beim Laden einmal aus dem Nullpunkt -- nur transform, also
   auf der Grafikkarte; bei "weniger Bewegung" (Abschnitt 11) sofort fertig. */
@keyframes balken-wachsen { from { transform: scaleX(0.02); } }
.hb-balken, .bereich-balken > span, .balken > div, .mini-balken > span { transform-origin: left center; animation: balken-wachsen 900ms var(--kurve) both; }

/* 26. Zwei-Faktor ------------------------------------------------------------ */

/* Codes in Festbreite und gesperrt: "123 456" liest und vergleicht sich
   leichter als eine Ziffernwurst. */
input.zf-code-feld { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.05rem; letter-spacing: 0.22em; font-variant-numeric: tabular-nums; }

/* Anmeldung: "Kein Zugriff auf die App?" als ruhige Glaskarte unter dem Formular. */
.zf-notweg { margin-top: 0.875rem; }
.zf-notweg > summary { padding: 0.75rem 1.2rem; font-size: 0.8125rem; color: var(--text-leise); cursor: pointer; list-style: none; user-select: none; border-radius: var(--r-l); }
.zf-notweg > summary::-webkit-details-marker { display: none; }
.zf-notweg > summary:hover { color: var(--text); }
.zf-notweg[open] > summary { border-bottom: 1px solid var(--linie); border-radius: var(--r-l) var(--r-l) 0 0; }

/* Einrichtung: QR links, Schritte rechts; schmal untereinander. Der Code
   bleibt dunkel auf weiss -- invertierte QR-Codes lesen manche Apps nicht. */
.zf-einrichten { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 760px) { .zf-einrichten { grid-template-columns: auto minmax(0, 1fr); } }
.zf-qr { justify-self: center; padding: 0.6rem; line-height: 0; background: var(--weiss); border-radius: var(--r-m); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 14px 36px -16px rgba(0, 0, 0, 0.85), 0 0 34px -14px var(--leuchten); }
.zf-qr svg { display: block; width: 184px; height: 184px; }
.zf-schritte { margin: 0 0 1.1rem; padding-left: 1.15rem; display: grid; gap: 0.55rem; color: var(--text-leise); }
.zf-schritte li::marker { color: var(--text-still); font-variant-numeric: tabular-nums; }
.zf-schluessel { display: inline-block; margin: 0.35rem 0 0.2rem; padding: 0.35rem 0.6rem; font-size: 0.85rem; letter-spacing: 0.08em; word-spacing: 0.25em; color: var(--text); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--linie-hell); border-radius: var(--r-s); user-select: all; overflow-wrap: anywhere; }

/* Aktiv: Code-Feld und Knopf in einer Zeile. */
.zf-formular { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.zf-formular label { flex: 1 1 13rem; max-width: 19rem; }

/* Wiederherstellungscodes: zwei Spalten wie auf einem Zettel. */
.zf-codes-karte { max-width: 40rem; }
.zf-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 1.5rem; margin: 0; padding: 1rem 1.1rem 1rem 2.4rem; background: rgba(255, 255, 255, 0.035); border: 1px dashed rgba(255, 255, 255, 0.16); border-radius: var(--r-m); }
.zf-codes li { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.95rem; letter-spacing: 0.06em; color: var(--text); }
.zf-codes li::marker { font-size: 0.75rem; color: var(--text-still); }
@media (max-width: 420px) { .zf-codes { grid-template-columns: minmax(0, 1fr); } }

/* Hinweis in der Seitenleiste, solange der Inhaber keine 2FA hat: ein
   Punkt und ein Wort, kein Alarm. */
.zf-hinweis { color: var(--warn-text); background: rgba(250, 178, 25, 0.1); }
.zf-hinweis::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
.zf-hinweis:hover { text-decoration: none; background: rgba(250, 178, 25, 0.18); }

/* 30. Werkstatt-Inspektor und Gemeinschaft --------------------------------------- */

/* Gemeinschaft in den Einstellungen (ADR 0020): je Quelle ein Block. Der
   Inspektor der Werkstatt steht in werkstatt.css (nur auf dieser Seite geladen). */
.gemeinschaft { display: grid; gap: 0.5rem; padding: 0.75rem 0; border-top: 1px solid var(--linie); }
.gemeinschaft:first-of-type { border-top: 0; padding-top: 0; }
.gemeinschaft p { margin: 0; }
.gemeinschaft-formular { display: grid; gap: 0.4rem; }
.gemeinschaft-formular label > span { margin-bottom: 0; }
.gemeinschaft-formular input { min-width: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.8rem; }
.gemeinschaft-formular button { justify-self: start; }
.gemeinschaft-knoepfe form { display: inline; }
.gemeinschaft-tipp { padding: 0.5rem 0.65rem; border-radius: var(--r-s); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--linie); line-height: 1.45; }

/* 27. Interne Links ------------------------------------------------------------ */

/* Ein vorgeschlagener Link: Quelle -> Ziel, darunter der Satz der Quellseite
   mit dem Anker hervorgehoben. Eingerueckt wie die Details der Aufgabe. Der
   Anker ist nie nur Farbe: <mark> traegt auch eine Unterstreichung. */
.link-vorschlag { margin: 0.4rem 0 0 6.35rem; display: grid; gap: 0.35rem; min-width: 0; }
.link-weg { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; font-size: 0.8125rem; overflow-wrap: anywhere; }
.link-pfeil { color: var(--text-still); }
.link-satz { margin: 0; padding: 0.45rem 0.75rem; border: 1px solid var(--linie); border-radius: var(--r-s); background: rgba(255, 255, 255, 0.03); font-size: 0.8125rem; line-height: 1.55; color: var(--text-leise); overflow-wrap: anywhere; }
.link-satz mark { padding: 0 0.15rem; border-radius: 4px; background: var(--marke-schein); color: var(--text); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--marke) 75%, transparent); }
@container (max-width: 520px) { .link-vorschlag { margin-left: 0; } }

/* 31. Korrekturen ----------------------------------------------------------------- */

/* Korrekturentwuerfe aus SEO-Aufgaben (ADR 0021): der Knopf an der Aufgabe,
   der Link zum Entwurf mit seinem Zustand und Vorher/Nachher in der Freigabe. */
.knopf-korrektur { color: var(--text); background: linear-gradient(180deg, color-mix(in srgb, var(--marke) 24%, transparent), color-mix(in srgb, var(--marke) 10%, transparent)); border-color: color-mix(in srgb, var(--marke) 42%, transparent); }
.knopf-korrektur:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--marke) 34%, transparent), color-mix(in srgb, var(--marke) 16%, transparent)); border-color: color-mix(in srgb, var(--marke) 60%, transparent); }
.knopf-korrektur svg, .korrektur-link svg { width: 13px; height: 13px; }
.korrektur-link { border-color: var(--linie-hell); }
/* Der Zustand als Punkt -- und im Text daneben, nie nur als Farbe. */
.korrektur-link::after { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--text-still); }
.korrektur-zur_freigabe::after { background: var(--marke); box-shadow: 0 0 0 3px var(--marke-schein); }
.korrektur-text_fehlt::after, .korrektur-pr_offen::after { background: var(--warn); }
.korrektur-freigegeben::after { background: var(--gut); }
.korrektur-gescheitert::after { background: var(--schlecht); }

.korrektur-auftrag { margin-bottom: 1.25rem; border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.korrektur-auftrag h2 { margin: 0; }

.vn-datei { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; overflow-wrap: anywhere; }
.vn-datei svg { flex: none; width: 13px; height: 13px; }
.vorher-nachher { display: grid; grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1fr); gap: 0 1rem; align-items: start; }
.vn-kopf { font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-still); padding-bottom: 0.35rem; }
.vn-feld { padding-top: 0.7rem; font-size: 0.8125rem; font-weight: 560; color: var(--text-leise); border-top: 1px solid var(--linie); }
.vn-wert { display: grid; gap: 0.35rem; align-content: start; justify-items: start; padding: 0.7rem 0 0.6rem; border-top: 1px solid var(--linie); overflow-wrap: anywhere; }
.vn-wert p { margin: 0; font-size: 0.875rem; line-height: 1.45; }
.vn-vorher p:first-of-type { color: var(--text-leise); }
.vn-nachher p:first-of-type { color: var(--text); }
.vn-wert p.still { color: var(--text-still); font-weight: 400; }
.vn-marke { display: none; font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-still); }
.vn-begruendung { margin: 0.9rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--linie); color: var(--text-leise); }
.vn-begruendung strong { color: var(--text); font-weight: 560; }
@media (max-width: 640px) {
  .vorher-nachher { grid-template-columns: minmax(0, 1fr); }
  .vn-kopf { display: none; }
  .vn-feld { padding-top: 0.9rem; }
  .vn-wert { border-top: 0; padding: 0.35rem 0; }
  .vn-marke { display: block; }
}

/* 28. IndexNow ------------------------------------------------------------------ */

.index-melder + .index-melder { border-top: 1px solid var(--linie); }
.index-kopf { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.7rem; font-size: 0.875rem; }
.index-zahlen > div { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; padding: 0.6rem 0.75rem; border: 1px solid var(--linie); border-radius: var(--r-m); }
.index-zahlen b { font-size: 1.15rem; white-space: nowrap; }
.index-zahlen b.index-antwort { font-size: 0.95rem; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.index-zahlen .gut-text b { color: var(--gut-text); }
.index-zahlen .warn-text b { color: var(--warn-text); }
.index-zahlen .schlecht-text b { color: var(--schlecht-text); }
.index-hinweis { margin: 0.7rem 0 0; overflow-wrap: anywhere; }
.index-liste { margin-top: 0.7rem; }
.index-liste > summary { cursor: pointer; }
.index-liste .beleg-liste { margin-top: 0.45rem; }
.index-liste code { overflow-wrap: anywhere; }
.index-datei { margin: 0.6rem 0 0; overflow-wrap: anywhere; }

/* 29. Indexierung und Markierungen ------------------------------------------ */

/* Indexierungsstatus laut Google (ADR 0019): Zeichen und Wort in der Pille,
   die Farbe traegt nur zusaetzlich. */
.index-chip { cursor: default; }
.index-chip > span { font-size: 0.72em; }
.index-stand { display: block; margin-top: 0.25rem; }
.index-gruende { margin-top: 0.75rem; }
.index-gruende a { color: var(--text-leise); }
.index-gruende a:hover { color: var(--text); }

/* Markierungen in den Verlaeufen (ADR 0019): eine gestrichelte Linie hinter
   dem Verlauf und ein kleiner Punkt oben -- dezent, bis man darauf zeigt. Der
   Punkt waechst nur per transform, also ohne neues Layout. */
.chart .mk { cursor: default; outline: none; }
.chart .mk-punkt { transform-box: fill-box; transform-origin: center; transition: transform var(--zeit) var(--kurve), fill var(--zeit) var(--kurve); }
.chart .mk:hover .mk-punkt, .chart .mk:focus-visible .mk-punkt { transform: scale(1.5); fill: var(--weiss); }
.chart .mk:focus-visible .mk-treffer { stroke: var(--marke); stroke-width: 1.5; }
.legende-markierung { display: inline-flex; align-items: center; gap: 0.35rem; cursor: default; }
.legende-markierung::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #c9ccd6; box-shadow: 0 0 0 1.5px #16171c, 0 5px 0 -2.5px rgba(201, 204, 214, 0.45); }
@media (prefers-reduced-motion: reduce) {
  .chart .mk-punkt { transition: none; }
}
@media (forced-colors: active) {
  .chart .mk-punkt, .legende-markierung::before { forced-color-adjust: none; }
}

/* Bildkarten (ADR 0024): Vorschau im Seitenverhaeltnis des Bildes, nie breiter als die Spalte. */
.bildkarte-bild { display: block; width: 100%; max-width: 40rem; height: auto; border-radius: 0.75rem; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 32px rgba(0, 0, 0, 0.35); background: #0a0c10; }
.bildkarte-formular { margin-top: 0.9rem; }
.bildkarte-formular select { width: auto; min-width: 14rem; }


/* 25. Touch-Ziele ----------------------------------------------------------- */

/* Auf Touch-Geraeten mindestens 44 px: Knoepfe, Reiter, Navigation, Felder.
   Am Mauszeiger bleibt alles kompakt. Nur die Hoehe waechst; Schriftgroessen
   und Abstaende im Inhalt aendern sich nicht. */
@media (pointer: coarse) {
  button, .knopf, .reiter a, nav.haupt a, select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]) { min-height: 2.75rem; }
  .knopf-klein { padding-inline: 0.85rem; }
  .meldung-zu { min-width: 2.75rem; min-height: 2.75rem; }
  input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; }
}

/* 26. Sprungmarke ---------------------------------------------------------- */

/* Tastatur: Der erste Tabstopp springt an der Navigation vorbei zum Inhalt. */
.ueberspringen { position: absolute; left: 0.75rem; top: -4rem; z-index: 100; padding: 0.6rem 1rem; border-radius: var(--r-m); background: var(--weiss); color: var(--tinte); font-weight: 600; }
.ueberspringen:focus { top: 0.75rem; text-decoration: none; }
main:focus { outline: none; }

/* 27. Hilfsklassen fuer haeufige Abstaende --------------------------------- */

/* Ersetzen Inline-Styles und behalten deshalb deren Vorrang (!important). */
.mt-15 { margin-top: 0.15rem !important; }
.mt-2 { margin-top: 0.2rem !important; }
.mt-3 { margin-top: 0.3rem !important; }
.mt-875 { margin-top: 0.875rem !important; }
.mb-6 { margin-bottom: 0.6rem !important; }
.mb-10 { margin-bottom: 1rem !important; }
.mb-11 { margin-bottom: 1.1rem !important; }
.mb-125 { margin-bottom: 1.25rem !important; }
.gap-875 { gap: 0.875rem !important; }
.nowrap { white-space: nowrap !important; }
.gew-560 { font-weight: 560 !important; }
.min-0 { min-width: 0 !important; }
.m0-text { margin: 0 !important; color: var(--text) !important; }

/* "Weniger Effekte" (Schalter in der Seitenleiste, auf schwachen Rechnern
   von selbst an): Alles, was endlos laeuft oder Schatten weichzeichnet, steht
   still. Die Inhalte bleiben, nur die Bewegung faellt weg. Endlose SVG-
   Animationen (Werkstatt-Karte) laufen im Hauptthread und sind der teuerste
   Posten -- daher zuerst. */
html.ruhig .punkte::after,
html.ruhig .kante-verbindung.fliesst,
html.ruhig .kante-teilchen,
html.ruhig .linie-traffic-lauf { animation: none !important; }
html.ruhig .kante-teilchen { display: none; }
html.ruhig *, html.ruhig *::before, html.ruhig *::after { scroll-behavior: auto !important; }
html.ruhig .karte, html.ruhig .kachel { box-shadow: none; }
.ruhig-schalter { font: inherit; }

/* -- Erklaerungen zum Aufklappen (_hilfe.html) ------------------------------------
   Ein kleines "?" neben jeder Funktion. Zu ist der Standard; offen steht der
   Text in Lesebreite, abgesetzt, aber ohne eigene Karte. */
.hilfe { font-size: 0.8125rem; }
.hilfe > summary { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.2rem 0.55rem 0.2rem 0.25rem; border-radius: 999px; color: var(--text-leise); cursor: pointer; list-style: none; user-select: none; transition: color var(--zeit) var(--kurve), background var(--zeit) var(--kurve); }
.hilfe > summary::-webkit-details-marker { display: none; }
.hilfe > summary:hover, .hilfe[open] > summary { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.hilfe-zeichen { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; font-size: 0.6875rem; font-weight: 700; color: var(--tinte); background: color-mix(in srgb, var(--marke) 70%, var(--weiss)); }
.hilfe-text { margin: 0.5rem 0 0.25rem; padding: 0.75rem 0.95rem; max-width: 68ch; line-height: 1.55; color: var(--text-leise); background: rgba(255, 255, 255, 0.035); border-left: 2px solid var(--marke); border-radius: 0 var(--r-s) var(--r-s) 0; }
.hilfe-text p + p, .hilfe-text p + ol, .hilfe-text p + dl, .hilfe-text ol + p { margin-top: 0.55rem; }
.hilfe-fragen { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 0.9rem; margin-top: 0.55rem; }
.hilfe-fragen dt { color: var(--text); font-weight: 560; }
.hilfe-fragen dd { margin: 0; }
.hilfe-schritte { margin: 0.55rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }
.hilfe-schritte strong { color: var(--text); font-weight: 600; }
@media (max-width: 640px) { .hilfe-fragen { grid-template-columns: 1fr; } .hilfe-fragen dd { margin-bottom: 0.35rem; } }

/* Kopf einer Werkzeug- oder Pipelineseite: Titel links, Hauptaktionen rechts,
   darunter die Erklaerung der ganzen Seite. */
.seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: 1.1rem; }
.seitenkopf h1 { margin: 0; }
.seitenkopf .untertitel { margin-top: 0.35rem; max-width: 62ch; }
.seitenkopf .aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.seitenkopf + .hilfe { margin: -0.4rem 0 1.1rem; }

/* Schrittleiste: wo man im Ablauf steht. Jede Stufe ist ein Sprung zum Abschnitt. */
.schrittleiste { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem; margin-bottom: 1.1rem; counter-reset: schritt; }
.schritt { position: relative; display: flex; flex-direction: column; gap: 0.15rem; padding: 0.85rem 1rem 0.8rem 3rem; color: var(--text-leise); text-decoration: none; counter-increment: schritt; }
.schritt::before { content: counter(schritt); position: absolute; left: 1rem; top: 0.95rem; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; font-size: 0.75rem; font-weight: 700; color: var(--text); background: rgba(255, 255, 255, 0.1); }
.schritt.fertig::before { content: "✓"; color: var(--tinte); background: var(--gut-text); }
.schritt.dran::before { color: var(--tinte); background: color-mix(in srgb, var(--marke) 75%, var(--weiss)); }
.schritt strong { color: var(--text); font-size: 0.9rem; font-weight: 600; }
.schritt span { font-size: 0.75rem; }
a.schritt:hover { text-decoration: none; color: var(--text); }

/* Auswahl als Reiter, ohne Skript: Ein Radio waehlt das Feld darunter. */
.wahl { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem; width: fit-content; max-width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--linie); border-radius: var(--r-m); }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl label { display: inline-flex; white-space: nowrap; margin: 0; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border-radius: var(--r-s); font-size: 0.8125rem; color: var(--text-leise); cursor: pointer; }
.wahl label:hover { color: var(--text); }
.wahl input:checked + label { color: var(--text); background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.07)); box-shadow: var(--glanz), 0 2px 10px -4px rgba(0, 0, 0, 0.6); }
.wahl input:focus-visible + label { outline: 2px solid var(--marke); outline-offset: 2px; }
.wahl-feld { display: none; }
.neu-bereich:has(#neu-video:checked) .wahl-feld[data-feld="video"],
.neu-bereich:has(#neu-text:checked) .wahl-feld[data-feld="text"],
.neu-bereich:has(#neu-idee:checked) .wahl-feld[data-feld="idee"],
.neu-bereich:has(#neu-thema:checked) .wahl-feld[data-feld="thema"] { display: grid; }

/* Themenkarten: Thema vorn, Aktionen unten, Details zum Aufklappen. */
.themen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.9rem; }
.thema-karte { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.1rem; }
.thema-karte h3 { margin: 0; font-size: 0.975rem; line-height: 1.35; }
.thema-karte .kopf { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.thema-karte .winkel { color: var(--text-leise); font-size: 0.8125rem; line-height: 1.45; }
.thema-karte .unten { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: auto; padding-top: 0.35rem; }
.thema-karte details > summary { font-size: 0.75rem; color: var(--text-still); cursor: pointer; }
.thema-karte details ul { margin: 0.35rem 0 0 1rem; font-size: 0.8125rem; color: var(--text-leise); }

/* Quellenliste: eine Zeile je Quelle, die offene bekommt ihr Chat-Feld darunter. */
.quelle-zeile { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; justify-content: space-between; padding: 0.75rem 0; border-top: 1px solid var(--linie); }
.quelle-zeile:first-child { border-top: 0; }
.quelle-zeile .titel { font-weight: 560; }
.quelle-chat { flex-basis: 100%; margin-top: 0.25rem; padding: 0.9rem 1rem; background: rgba(255, 255, 255, 0.035); border-radius: var(--r-m); }
.quelle-chat ol { margin: 0 0 0.75rem 1.1rem; display: grid; gap: 0.25rem; font-size: 0.8125rem; color: var(--text-leise); }
.kopfzeile + .hilfe { margin: -0.9rem 0 1.2rem; }

/* Werkzeug Discord & Notion: Auswahl der Art als zwei grosse Karten. */
.art-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.75rem; }
.art-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.art-wahl label { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; padding: 0.9rem 1rem; border: 1px solid var(--linie-hell); border-radius: var(--r-m); background: rgba(255, 255, 255, 0.03); cursor: pointer; transition: border-color var(--zeit) var(--kurve), background var(--zeit) var(--kurve); }
.art-wahl label:hover { border-color: rgba(255, 255, 255, 0.25); }
.art-wahl label strong { font-size: 0.95rem; color: var(--text); }
.art-wahl label span { font-size: 0.8125rem; color: var(--text-leise); line-height: 1.45; margin: 0; }
.art-wahl input:focus-visible + label { outline: 2px solid var(--marke); outline-offset: 2px; }
.warn-text { color: var(--warn-text); }
button[disabled], button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
button.laedt { opacity: 0.7; cursor: progress; }
/* Icons in Knoepfen: so gross wie die Schrift, nie ein eigener Block. */
button > svg, .knopf > svg { width: 15px; height: 15px; flex: none; }

/* Nur fuer Screenreader sichtbar. */
.sr-nur { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Chat-Weg auf der Freigabe-Seite: drei nummerierte Schritte. */
.chat-auftrag h2 { margin: 0 0 0.6rem; }
.chat-schritte { margin: 0; padding-left: 1.4rem; display: grid; gap: 1rem; }
.chat-schritte > li { padding-left: 0.2rem; }
.chat-schritte > li > strong { display: block; margin-bottom: 0.15rem; }
.chat-schritte > li::marker { color: var(--marke); font-weight: 700; }

/* Kopier-Bloecke: eine Discord-Nachricht bzw. die ganze Notion-Seite. */
.kopierteil textarea { margin-top: 0.4rem; font-size: 0.75rem; }

/* Offene Erklaerungen in Kopfzeilen bekommen die ganze Breite statt einer
   schmalen Spalte rechts. */
.glas-kopf > .hilfe[open], .liste-zeile > .hilfe[open] { flex-basis: 100%; order: 9; }

/* Review 01.10.: Hinweis unter der Art-Karte war von `.art-wahl label span`
   ueberschrieben; Ladetext darf umbrechen; Themenkarten und Knopfreihen
   passen auf 320 px. */
.art-wahl label > span.winzig { font-size: 0.6875rem; }
.art-wahl label > span.warn-text { color: var(--warn-text); }
.art-wahl label > span.still { color: var(--text-still); }
button.laedt { white-space: normal; }
.themen-raster { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.quelle-zeile .reihe-eng, .erstellen .reihe, .thema-karte .unten { flex-wrap: wrap; }
.erstellen .reihe button { white-space: normal; }