/* Der UNITECHNICS-Prozess – Wolke, Trichter, Riesenrad.
 *
 * Das Bild ist Klaus Jilgs eigenes und wird hier wörtlich genommen: oben die
 * Wolke des Abwassermarkts, daraus regnen Leads in den Trichter, unten dreht
 * sich das Riesenrad mit dem Kunden in der Mitte.
 *
 * Die drei Rollenfarben kommen aus den Berufsprofilen (Hybrid Sales):
 * Innendienst blau, Experte violett, Außendienst grün. Das Grün ist die
 * Hausfarbe aus marke.css – die drei Profile benutzen genau sie.
 *
 * Farbe ist nie die einzige Unterscheidung: jede Station trägt zusätzlich den
 * ausgeschriebenen Rollennamen. Wer Farben nicht unterscheiden kann, liest ihn.
 */

:root {
  color-scheme: light;
  --surface-1: #fcfcfb; --plane: #f9f9f7; --ink: #0b0b0b; --ink-2: #52514e;
  --muted: #898781; --grid: #e1e0d9; --ring: rgba(11, 11, 11, 0.10);
  --akzent: #2a78d6; --warn: #fab219;

  /* Blau, Violett und Grün müssen sich auf einer 92px breiten Gondel noch
     unterscheiden lassen – die erste Fassung (#1d4e9b / #574394) war auf dem
     Rad kaum auseinanderzuhalten. Deshalb heller und gesättigter als die
     Überschriftenfarben der Berufsprofile, aber in denselben Familien. */
  --r-innendienst: #1a6ac9;
  --r-experte: #7040bd;
  --r-aussendienst: #1e7a45;
  /* Sehr blasse Flächen derselben Töne – für Kachelhintergründe. */
  --r-innendienst-flaeche: #eef4fd;
  --r-experte-flaeche: #f3f0fc;
  --r-aussendienst-flaeche: #eaf6ef;

  --himmel: #eaf1f8;
  --tropfen: #7fa8d4;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1: #1a1a19; --plane: #0d0d0d; --ink: #fff; --ink-2: #c3c2b7;
    --muted: #898781; --grid: #2c2c2a; --ring: rgba(255, 255, 255, 0.10);
    --akzent: #3987e5;
    --r-innendienst: #58a0f5; --r-experte: #b28ef0; --r-aussendienst: #17a868;
    --r-innendienst-flaeche: #14202f; --r-experte-flaeche: #1d1930;
    --r-aussendienst-flaeche: #11241a;
    --himmel: #14191f; --tropfen: #5b7ea6;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #1a1a19; --plane: #0d0d0d; --ink: #fff; --ink-2: #c3c2b7;
  --muted: #898781; --grid: #2c2c2a; --ring: rgba(255, 255, 255, 0.10);
  --akzent: #3987e5;
  --r-innendienst: #6699e8; --r-experte: #a394e4; --r-aussendienst: #17a868;
  --r-innendienst-flaeche: #14202f; --r-experte-flaeche: #1d1930;
  --r-aussendienst-flaeche: #11241a;
  --himmel: #14191f; --tropfen: #5b7ea6;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--plane); color: var(--ink);
  font: 15px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.wrap { max-width: 1360px; margin: 0 auto; padding: 24px 20px 90px; }
h1 { font-size: 23px; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 18px; margin: 0 0 4px; }
h3 { font-size: 14.5px; margin: 20px 0 8px; }
.sub { color: var(--ink-2); font-size: 13px; margin: 4px 0 0; }
.topbar {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 18px;
}
.card {
  background: var(--surface-1); border: 1px solid var(--ring);
  border-radius: 12px; padding: 18px; margin-bottom: 18px;
}
button {
  font: inherit; font-size: 13px; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--ring); background: var(--surface-1); color: var(--ink);
  cursor: pointer;
}
button:hover { background: var(--plane); }
button.primary { background: var(--akzent); border-color: transparent; color: #fff; }
input {
  font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--ring); background: var(--surface-1); color: var(--ink);
}
.hidden { display: none !important; }
.gate { max-width: 380px; margin: 15vh auto; text-align: center; }
.gate input { width: 100%; margin: 12px 0; text-align: center; }
.fehler { color: #d03b3b; font-size: 13px; }
a { color: var(--akzent); }

/* Sichtbarer Fokus überall – die Seite wird zu einem guten Teil mit der
   Tastatur bedient, weil sie aus lauter anklickbaren Elementen besteht. */
:is(button, [tabindex]):focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 2px;
}

/* Statusleiste und Missionsbanner standen hier. Beide sind heraus (Vorgabe von
   Klaus, 04.08.2026): Der Stand steht als eine Zeile in der Kopfzeile, die
   Mission auf der Startseite unter „Vision 2030" und im Prozesstext der
   Listenansicht. Auf der Radseite haben sie nur das Bild nach unten geschoben. */

/* --- Die drei Rollen ----------------------------------------------------- */
.rollen {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; margin-bottom: 6px;
}
@media (max-width: 860px) { .rollen { grid-template-columns: 1fr; } }

.rolle {
  text-align: left; padding: 14px 16px; border-radius: 11px; width: 100%;
  border: 1px solid var(--ring); border-top: 3px solid var(--f);
  background: var(--surface-1); display: block;
}
.rolle:hover { background: var(--flaeche); }
.rolle[aria-pressed="true"] { background: var(--flaeche); border-color: var(--f); }
.rolle .rl-name { font-weight: 700; font-size: 15px; color: var(--f); }
.rolle .rl-unter { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.rolle .rl-satz { font-size: 13px; color: var(--ink-2); margin-top: 8px; }
.rolle.innendienst { --f: var(--r-innendienst); --flaeche: var(--r-innendienst-flaeche); }
.rolle.experte { --f: var(--r-experte); --flaeche: var(--r-experte-flaeche); }
.rolle.aussendienst { --f: var(--r-aussendienst); --flaeche: var(--r-aussendienst-flaeche); }

/* Die Kette Innendienst → Experte → Außendienst aus dem Hybrid-Sales-Modell.
   Zwei Zeilen statt einer umbrechenden: sonst beginnt Zeile zwei mit einem
   verwaisten Trennzeichen. */
.kette { font-size: 12.5px; color: var(--ink-2); margin: 10px 0 18px; }
.kette-zeile { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.kette-satz { display: block; color: var(--muted); margin-top: 3px; }
.kette .pfeil { color: var(--muted); }
.kette b { font-weight: 600; }
.kette .k-in { color: var(--r-innendienst); }
.kette .k-ex { color: var(--r-experte); }
.kette .k-au { color: var(--r-aussendienst); }

/* --- Aufbau der Seite: Grafik links, Detailtafel rechts ------------------ */
/* Die Grenze liegt bei 1180px und nicht bei 1080: erst darüber bleibt für das
   Rad neben der 420px-Tafel noch die volle Breite von 700px übrig. Bei 1080
   wäre das Rad 600px breit, und dann berühren sich die beiden Gondeln am
   tiefsten Punkt. Darunter steht die Tafel unter der Grafik – dort hat das Rad
   wieder die ganze Breite. */
.layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 420px;
  gap: 20px; align-items: start;
}
@media (max-width: 1180px) { .layout { grid-template-columns: 1fr; } }

.tafel { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
@media (max-width: 1180px) { .tafel { position: static; max-height: none; } }

/* ======================================================================== */
/* DIE WOLKE                                                                */
/* ======================================================================== */
.buehne {
  background: linear-gradient(180deg, var(--himmel) 0%, var(--surface-1) 46%);
  border: 1px solid var(--ring); border-radius: 14px;
  padding: 20px 20px 26px;
}

.stufe-titel {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.stufe-titel h2 { font-size: 15px; margin: 0; }
.stufe-titel .wie { font-size: 12px; color: var(--muted); }

.wolke {
  position: relative; margin: 0 auto 4px; max-width: 720px;
  background: var(--surface-1); border: 1px solid var(--ring);
  /* Ovale Ecken oben, gerade Kante unten – eine Wolke, ohne dass es kitschig
     wird. Der Regen fällt aus der geraden Unterkante. */
  border-radius: 90px 90px 18px 18px / 60px 60px 18px 18px;
  padding: 20px 26px 18px; text-align: center;
}
.wolke .w-label {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
}
.wolke .w-text { font-size: 13px; color: var(--ink-2); margin: 5px 0 13px; }
/* Der Text kommt aus dem Markdown-Renderer und bringt eigene <p> mit. */
.wolke .w-text p { margin: 0 0 6px; }
.wolke .w-text p:last-child { margin-bottom: 0; }
.tropfen-reihe { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.tropfen {
  font-size: 11.5px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--ring); background: var(--plane); color: var(--ink-2);
  cursor: pointer;
}
.tropfen:hover { border-color: var(--tropfen); color: var(--ink); }
.tropfen[aria-pressed="true"] {
  background: var(--tropfen); border-color: var(--tropfen); color: #fff;
}

/* Der Regen: schmale Striche zwischen Wolke und Trichter. Dekoration, deshalb
   aria-hidden im Markup. */
.regen { height: 46px; position: relative; max-width: 720px; margin: 0 auto; }
.regen span {
  position: absolute; width: 1.5px; border-radius: 2px;
  background: linear-gradient(180deg, var(--tropfen), transparent);
}

/* ======================================================================== */
/* DER TRICHTER                                                             */
/* ======================================================================== */
.trichter { max-width: 720px; margin: 0 auto; }
.trichter-hut {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); text-align: center; margin-bottom: 8px;
}
.stufen { display: grid; gap: 8px; justify-items: center; }
.stufe {
  display: flex; align-items: center; gap: 12px; text-align: left;
  border-radius: 10px; padding: 12px 16px;
  border: 1px solid var(--ring); border-left: 3px solid var(--r-innendienst);
  background: var(--surface-1);
}
/* Von 100 % auf 66 % – daraus entsteht die Trichterform, ohne clip-path und
   ohne dass der Text mitverzerrt. */
.stufen .stufe:nth-child(1) { width: 100%; }
.stufen .stufe:nth-child(2) { width: 84%; }
.stufen .stufe:nth-child(3) { width: 68%; }
@media (max-width: 620px) { .stufen .stufe { width: 100% !important; } }

.stufe:hover { background: var(--r-innendienst-flaeche); }
.stufe[aria-pressed="true"] {
  background: var(--r-innendienst-flaeche); border-color: var(--r-innendienst);
}
.stufe .nr {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--r-innendienst); color: #fff;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
}
.stufe .st-titel { font-weight: 600; font-size: 13.5px; }
.stufe .st-kurz { font-size: 12px; color: var(--ink-2); }

.trichter-fuss {
  text-align: center; font-size: 12px; color: var(--ink-2);
  margin: 12px auto 0; max-width: 520px;
}
.trichter-fuss .ziel {
  display: inline-block; margin-top: 6px; padding: 6px 14px; border-radius: 999px;
  background: var(--r-innendienst); color: #fff; font-size: 12.5px; font-weight: 600;
}

/* Der Übergang in das Rad – ein schmaler Hals plus Beschriftung. */
.hals { text-align: center; padding: 14px 0 6px; }
.hals .strich {
  width: 2px; height: 26px; margin: 0 auto 6px;
  background: linear-gradient(180deg, var(--r-innendienst), var(--muted));
}
.hals .text { font-size: 11.5px; color: var(--muted); }

/* ======================================================================== */
/* DAS RIESENRAD                                                            */
/* ======================================================================== */
.rad-hut {
  text-align: center; font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.rad {
  position: relative; width: 100%; max-width: 700px; margin: 0 auto;
  aspect-ratio: 1 / 1;
  /* Die Ein-/Ausstiegsplakette ragt oben aus dem Kreis heraus (sie sitzt mit
     translate(-50%,-50%) auf der Kante). Ohne diesen Abstand läge sie auf der
     Überschrift darüber. */
  margin-top: 20px;
}
.rad-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rad-ring .reifen { fill: none; stroke: var(--grid); stroke-width: 2px; }
.rad-ring .reifen-innen { fill: none; stroke: var(--grid); stroke-width: 1px; opacity: .7; }
.rad-ring .speiche { stroke: var(--grid); stroke-width: 1px; opacity: .8; }
/* Die Speiche der ausgewählten Station wird hervorgehoben – so sieht man auf
   einen Blick, wo im Rad man gerade steht. */
.rad-ring .speiche.aktiv { stroke: var(--akzent); stroke-width: 2px; opacity: 1; }

/* Ein-/Ausstieg oben: dort sitzt bewusst keine Gondel, damit der Trichter auf
   eine freie Plattform trifft – wie bei einem echten Riesenrad. */
.rad-plattform {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
  display: flex; gap: 6px; align-items: center; white-space: nowrap;
  background: var(--surface-1); border: 1px dashed var(--muted);
  border-radius: 999px; padding: 5px 13px; font-size: 11px; color: var(--ink-2);
}

.rad-mitte {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 40%; max-width: 240px; text-align: center;
  background: var(--surface-1); border: 1px solid var(--ring);
  border-radius: 50%; aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 14px; cursor: pointer;
}
.rad-mitte:hover { border-color: var(--ut-gruen); }
.rad-mitte[aria-pressed="true"] { border-color: var(--ut-gruen); background: var(--r-aussendienst-flaeche); }
.rad-mitte .km-label {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.rad-mitte .km-name {
  font-size: clamp(17px, 3.4vw, 25px); font-weight: 700; color: var(--ut-gruen-dunkel);
  line-height: 1.15; margin: 3px 0 4px;
}
:root[data-theme="dark"] .rad-mitte .km-name { color: var(--ut-gruen); }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .rad-mitte .km-name { color: var(--ut-gruen); }
}
.rad-mitte .km-satz { font-size: 11.5px; color: var(--ink-2); line-height: 1.35; }

.rad-gondeln { position: absolute; inset: 0; }
.rad-gondel {
  position: absolute;
  left: calc(50% + var(--x) * 1%);
  top: calc(50% + var(--y) * 1%);
  transform: translate(-50%, -50%);
  /* 92px ist mit dem Radius in prozess.js abgestimmt – siehe Kommentar dort.
     Breiter, und die beiden Gondeln am tiefsten Punkt des Rads überlappen. */
  width: 92px; padding: 6px 6px 7px; border-radius: 10px;
  border: 1px solid var(--ring); border-top: 3px solid var(--f);
  background: var(--surface-1); text-align: center; line-height: 1.2;
  transition: transform .12s ease;
}
.rad-gondel:hover { background: var(--flaeche); transform: translate(-50%, -50%) scale(1.06); }
.rad-gondel[aria-pressed="true"] {
  background: var(--flaeche); border-color: var(--f);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--f) 35%, transparent);
}
.rad-gondel .g-nr {
  display: inline-grid; place-items: center; width: 19px; height: 19px;
  border-radius: 50%; background: var(--f); color: #fff;
  font-size: 10.5px; font-weight: 700; margin-bottom: 3px;
}
.rad-gondel .g-name { display: block; font-size: 10.5px; font-weight: 600; }
.rad-gondel .g-frage { color: var(--warn); font-size: 10px; }

.rad-gondel.innendienst, .g-innendienst { --f: var(--r-innendienst); --flaeche: var(--r-innendienst-flaeche); }
.rad-gondel.experte, .g-experte { --f: var(--r-experte); --flaeche: var(--r-experte-flaeche); }
.rad-gondel.aussendienst, .g-aussendienst { --f: var(--r-aussendienst); --flaeche: var(--r-aussendienst-flaeche); }

/* Rollenfilter: was die gewählte Rolle nicht betrifft, tritt zurück – es
   verschwindet aber nicht, sonst sieht der Prozess lückenhaft aus. */
.rad-gondel.blass, .stufe.blass { opacity: .32; }

.rad-fuss {
  max-width: 560px; margin: 8px auto 0; text-align: center;
  font-size: 12px; color: var(--ink-2);
}

/* Auf schmalen Geräten ist ein Kreis mit 14 Gondeln unlesbar. Dann wird daraus
   eine Liste – gleiche Reihenfolge, gleiche Farben, gleiche Nummern. */
@media (max-width: 800px) {
  .rad { aspect-ratio: auto; max-width: none; }
  .rad-ring, .rad-plattform { display: none; }
  .rad-mitte {
    position: static; transform: none; width: 100%; max-width: none;
    border-radius: 12px; aspect-ratio: auto; margin-bottom: 12px;
  }
  .rad-gondeln { position: static; display: grid; gap: 7px; }
  .rad-gondel {
    position: static; transform: none; width: 100%;
    display: flex; align-items: center; gap: 11px; text-align: left;
    padding: 10px 13px; border-top-width: 1px; border-left: 3px solid var(--f);
  }
  .rad-gondel:hover { transform: none; }
  .rad-gondel .g-nr { margin-bottom: 0; flex: 0 0 auto; width: 23px; height: 23px; font-size: 11.5px; }
  .rad-gondel .g-name { font-size: 13px; }
}

/* ======================================================================== */
/* DIE DETAILTAFEL                                                          */
/* ======================================================================== */
.tafel .platzhalter { color: var(--muted); font-size: 13px; }

.d-kopf { border-bottom: 1px solid var(--grid); padding-bottom: 12px; margin-bottom: 12px; }
.d-nr {
  display: inline-grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--f, var(--muted)); color: #fff;
  font-size: 12px; font-weight: 700; margin-right: 8px; vertical-align: middle;
}
.d-titel { font-size: 17px; font-weight: 700; margin: 0; display: inline; }
.d-kurz { font-size: 13px; color: var(--ink-2); margin: 8px 0 0; }

.marken { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.marke {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--ring); color: var(--ink-2); background: var(--plane);
}
.marke.verantwortlich { background: var(--f); border-color: transparent; color: #fff; font-weight: 600; }
.marke.frist { border-color: var(--warn); color: var(--ink); }

article :is(h3) { color: var(--ink); }
/* Vierte Ebene – gebraucht in der Listenansicht, wo die Stationstexte eine
   Ebene tiefer rutschen. Muss zu handbuch.html passen. */
article h4 { font-size: 12.5px; margin: 14px 0 5px; color: var(--ink-2);
             text-transform: uppercase; letter-spacing: .04em; }
article p:first-child { margin-top: 0; }
article table { border-collapse: collapse; width: 100%; font-size: 13px; margin: 12px 0; }
article th, article td {
  padding: 7px 9px; text-align: left; border-bottom: 1px solid var(--grid);
  vertical-align: top;
}
article th {
  color: var(--muted); font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; font-weight: 600;
}
article blockquote {
  margin: 14px 0; padding: 10px 14px; border-left: 3px solid var(--warn);
  background: var(--plane); border-radius: 0 8px 8px 0; font-size: 13px;
  color: var(--ink-2);
}
/* Wie in handbuch.html: der Statuskasten trägt die Hausfarbe, nicht Warnorange. */
article blockquote.stand { border-left-color: var(--ut-gruen); }
article ol, article ul { padding-left: 21px; }
article li { margin: 4px 0; }
article code {
  background: var(--plane); border: 1px solid var(--ring); border-radius: 5px;
  padding: 1px 5px; font-size: 12px;
}
/* In den Texten stehen E-Mail-Adressen und Pipedrive-Feldnamen; die brechen bei
   Bedarf mitten im Wort. Bewusst NUR hier und nicht auf dem ganzen Artikel:
   sonst wird in einer engen Tabellenspalte aus „Engineering" ein „Engineeri-ng". */
article :is(code, a) { overflow-wrap: anywhere; }
.kachel .k-name, .bl-titel { overflow-wrap: break-word; }

.d-nav { display: flex; gap: 8px; margin-top: 16px; }
.d-nav button { flex: 1; }

/* Die fünf Schritte aus dem Berufsprofil, wenn eine Rolle gewählt ist. */
.schritte { counter-reset: s; display: grid; gap: 8px; margin-top: 12px; }
.schritt {
  border: 1px solid var(--ring); border-left: 3px solid var(--f);
  border-radius: 8px; padding: 10px 13px; background: var(--plane);
}
.schritt .s-nr { font-size: 11px; font-weight: 700; color: var(--f); }
.schritt .s-titel { font-weight: 600; font-size: 13.5px; }
.schritt .s-text { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }

.spalten2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .spalten2 { grid-template-columns: 1fr; } }
.spalten2 ul { padding-left: 19px; margin: 6px 0 0; font-size: 12.5px; }

/* ======================================================================== */
/* DIE ACHT KACHELN                                                         */
/* ======================================================================== */
/* minmax(0, 1fr) statt 1fr – sonst ist die Mindestbreite jeder Spalte das
   längste Wort darin („Indirekteinleiterkataster"), und die ganze Seite wird
   auf dem Telefon breiter als das Fenster. */
.kachel-gitter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
@media (max-width: 900px) { .kachel-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .kachel-gitter { grid-template-columns: 1fr; } }
.kachel {
  border: 1px solid var(--ring); border-radius: 10px; padding: 12px;
  background: var(--surface-1); text-align: left;
}
.kachel:hover { border-color: var(--ut-gruen); }
.kachel .k-nr {
  font-size: 10.5px; font-weight: 700; color: var(--muted);
}
.kachel .k-name { font-weight: 600; font-size: 13.5px; margin-top: 2px; }
.kachel .k-kurz { font-size: 11.5px; color: var(--ink-2); margin-top: 4px; }
.kachel.kern { border-color: var(--ut-gruen); background: var(--r-aussendienst-flaeche); }

/* ======================================================================== */
/* BACKLOG                                                                  */
/* ======================================================================== */
.bl-kopf { display: flex; gap: 12px; align-items: baseline; justify-content: space-between;
           flex-wrap: wrap; margin-bottom: 12px; }
.bl-filter { display: flex; gap: 6px; }
.bl-liste { display: grid; gap: 10px; }
.bl-eintrag {
  border: 1px solid var(--ring); border-radius: 10px; overflow: hidden;
  background: var(--surface-1);
}
.bl-eintrag > summary {
  padding: 12px 15px; cursor: pointer; display: flex; gap: 10px;
  align-items: baseline; flex-wrap: wrap; font-size: 13.5px;
  /* display:flex nimmt dem <summary> den eingebauten Aufklapp-Pfeil – ohne
     Ersatz sieht der Eintrag aus wie eine Zeile, die man nicht öffnen kann. */
  list-style: none;
}
.bl-eintrag > summary::-webkit-details-marker { display: none; }
.bl-eintrag > summary::before {
  content: "▸"; color: var(--muted); flex: 0 0 auto; font-size: 12px;
}
.bl-eintrag[open] > summary::before { content: "▾"; }
.bl-eintrag > summary:hover { background: var(--plane); }
.bl-eintrag[open] > summary { border-bottom: 1px solid var(--grid); }
.bl-eintrag .bl-titel { font-weight: 600; }
.bl-art {
  font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; font-weight: 700;
}
.bl-art.aufgabe { background: var(--r-innendienst); color: #fff; }
.bl-art.frage { background: var(--warn); color: #2a2200; }
/* Ideen tragen eine eigene Farbe, weil sie leicht als Zusage gelesen werden:
   nicht die Warnfarbe (sie sind kein offener Punkt) und nicht die Aufgabenfarbe
   (sie sind niemandem vergeben). */
.bl-art.idee { background: var(--r-experte); color: #fff; }
/* Erledigtes bleibt stehen, statt gelöscht zu werden – sonst verschwindet die
   Spur, warum etwas so geregelt ist, wie es geregelt ist. Es tritt nur zurück:
   blasser Titel, Hausfarbe statt Warnfarbe, und es zählt oben nicht mit. */
.bl-art.fertig { background: var(--ut-gruen); color: #fff; }
.bl-eintrag.erledigt > summary .bl-titel { color: var(--muted); font-weight: 400; }
.bl-eintrag.erledigt { opacity: .75; }
.bl-bei { font-size: 11.5px; color: var(--muted); }
.bl-koerper { padding: 4px 15px 14px; }
.bl-koerper article { font-size: 13px; }
.bl-quelle { font-size: 11.5px; color: var(--muted); margin-top: 10px; }

/* ======================================================================== */
/* LISTENANSICHT – zum Lesen am Stück und zum Ausdrucken                    */
/* ======================================================================== */
.liste-ansicht { max-width: 820px; }
.liste-ansicht section { margin-bottom: 26px; }
.liste-ansicht h2 {
  font-size: 17px; padding-bottom: 6px; border-bottom: 2px solid var(--f, var(--grid));
  margin-bottom: 4px;
}
.liste-ansicht .ln-rolle { font-size: 11.5px; color: var(--f); font-weight: 600; }

@media print {
  .topbar, .tafel, .buehne, .bl-filter, .ansicht-schalter { display: none !important; }
  body { background: #fff; }
  .card { border: none; padding: 0; }
  .liste-ansicht { max-width: none; }
}

.ansicht-schalter { display: flex; gap: 6px; }
.ansicht-schalter button[aria-pressed="true"] {
  background: var(--akzent); border-color: transparent; color: #fff; font-weight: 600;
}