/* ===================================================================
   Scout-CRM.

   Die Pipeline hat eine Richtung, das soll man sehen: Jede Stufe traegt
   links eine farbige Kante, die von kuehl (neu entdeckt) zu warm/gruen
   (uebergeben) laeuft. Gedeckt gehalten -- kein Ampel-Geblinke.
   =================================================================== */

.steuerung { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.steuerung select {
  min-width: 160px; padding: 9px 12px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  color: var(--text); font: inherit;
}

/* ---------- Fällige Follow-ups ------------------------------------------ */

.faellig {
  margin-bottom: 26px; padding: 14px 18px;
  background: rgba(255, 190, 120, .07);
  border: 1px solid rgba(255, 190, 120, .3);
  border-radius: var(--radius);
}
.faellig__titel {
  margin: 0 0 8px; font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #f0c48a;
}
.faellig__liste { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
.faellig__liste li { display: flex; align-items: baseline; gap: 7px; }
.faellig__knopf {
  padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--text); font: inherit; font-weight: 600;
  border-bottom: 1px solid rgba(240, 196, 138, .45);
}
.faellig__knopf:hover { color: #f0c48a; }

/* ---------- Stufen -------------------------------------------------------- */

.stufe { margin-bottom: 34px; }
.stufe__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
/* DER TITEL TRUG DEN SEITENAKZENT, NICHT SEINE STUFE (bis 06.10.2026).
   Hier stand `color: var(--akzent)` -- sechs Stufen, ein Blau. Jetzt
   die eigene Farbe, aber mit Weiss aufgehellt: #4c7fa8 direkt auf dem
   dunklen Grund kaeme nur auf rund 4,3:1, und fett-versal bei 12,5 px
   ist KEIN grosser Text im Sinne der Richtlinie -- 4,5:1 waere die
   Schwelle. Aufgehellt liegt jede der sechs Stufen weit darueber.
   Nachgemessen von pruef-lesbarkeit. */
.stufe__titel {
  margin: 0; font-size: .82rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 68%, #ffffff);
}
.stufe__zahl {
  min-width: 22px; padding: 1px 8px; text-align: center;
  font-size: .76rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 55%, #ffffff);
  background: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 30%, transparent);
  border-radius: 999px;
}

/* ---- DIE ETAPPENNUMMER (06.10.2026) --------------------------------
   Die Pipeline hat eine RICHTUNG -- das stand bisher nur im Text der
   Datei und nirgends auf dem Bildschirm. Sechs Ueberschriften
   untereinander lesen sich wie eine Liste; "01" bis "05" lesen sich
   wie ein Weg.

   "Abgelehnt" bekommt KEINE Nummer, sondern einen Strich: Eine Absage
   ist keine Etappe auf dem Weg nach vorn. Dieselbe Entscheidung wie im
   leeren Zustand der Seite, wo die Aufzaehlung ebenfalls bei fuenf
   aufhoert -- und sie steht jetzt nur noch an EINER Stelle im Code
   (STUFE_NR in scouting.js). */
.stufe__nr {
  flex: none;
  display: grid; place-items: center;
  min-width: 30px; height: 30px; padding: 0 6px;
  font-size: .78rem; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  color: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 45%, #ffffff);
  background: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 42%, transparent);
  /* Dieselbe Fase wie die Bauteile des Hauses, nur klein -- das Zeichen
     gehoert zur selben Formensprache und ist kein fremder Kreis. */
  clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px);
}
.stufe[data-stufe="abgelehnt"] .stufe__nr { opacity: .7; }

.stufe__karten { display: grid; gap: 10px; }

/* ===== FARBVERLAUF ENTLANG DER PIPELINE ==============================

   `--ton` WIRD MITGESETZT (06.10.2026) -- und das ist die eigentliche
   Reparatur dieser Seite.

   Gemessen am 06.10.2026: An JEDER Karte der Pipeline stand
   `--ton: #db4b66` -- das Rot der Seite, bei „Neu entdeckt" genauso wie
   bei „Übergeben". Aus `--ton` nimmt der ganze Baukasten in module.css
   seine Farbe: das Kantenlicht, die drei Eckwinkel und das Licht beim
   Zeigen. Die Pipeline hatte also sechs Stufenfarben in der Datei und
   genau eine auf dem Bildschirm.

   DAS HAUS HAT DIESE LEHRE SCHON EINMAL GEZOGEN. In aufgaben.css steht
   seit dem Aufgabenbrett wörtlich: „--ton mitgesetzt: Das Licht unter
   dem Zeiger nimmt seine Farbe von dort. Ohne diese Zeile leuchtete die
   gruene Erledigt-Spalte orange (der Farbton der SEITE), was aussah wie
   ein Fehler und einer war." Dort steht es an fünf Spalten -- hierher
   übertragen hat es nie jemand.

   Die Töne bleiben dieselben wie bisher: kühl bei „neu entdeckt", warm
   und grün bei „übergeben", stumpf bei „abgelehnt". Gedeckt, nicht
   neon -- augenschonend ist Vorgabe, nicht Geschmack. */
.stufe[data-stufe="neu"]           { --stufe-farbe: #4c7fa8; --ton: #4c7fa8; }
.stufe[data-stufe="angesprochen"]  { --stufe-farbe: #5b8fd4; --ton: #5b8fd4; }
.stufe[data-stufe="gespraech"]     { --stufe-farbe: #7d84e0; --ton: #7d84e0; }
.stufe[data-stufe="interessiert"]  { --stufe-farbe: #8ab8a0; --ton: #8ab8a0; }
.stufe[data-stufe="uebergeben"]    { --stufe-farbe: #79d1a2; --ton: #79d1a2; }
.stufe[data-stufe="abgelehnt"]     { --stufe-farbe: #55606f; --ton: #55606f; }
.stufe[data-stufe="abgelehnt"] .kk { opacity: .62; }
.stufe[data-stufe="abgelehnt"] .kk:hover { opacity: 1; }

/* ---------- Karte --------------------------------------------------------- */

/* ===== DIE KARTE (neu gefasst am 06.10.2026) =========================

   WAS HIER VORHER STAND UND NICHTS TAT -- drei Dinge, alle gemessen:

     `border: 1px solid var(--rand)`   module.css setzt `border: 0`
     `.kk::before` (3 px Farbkante)    module.css belegt ::before mit
                                       dem Kantenlicht (gemessen: 560 px
                                       breit statt 3)
     `.kk:hover { border-color }`      dasselbe

   Keine davon war falsch geschrieben -- sie kamen nur nicht mehr an,
   seit es den Baukasten gibt. module.css sagt es im eigenen Text:
   „`.kk:hover` in scouting.css ... setzt border-color -- und die
   Grundregel oben setzt `border: 0`, gleich stark und spaeter im
   Ladeweg. Diese vier Regeln tun also vermutlich nichts." Und daneben:
   „NICHT MITREPARIERT, weil es kein Messgeraet dafuer gibt ... Hover
   laesst sich nicht pruefen."

   DAS MESSGERAET GIBT ES JETZT: pruef-scouting-felder faehrt mit der
   Maus auf eine Karte und liest nach, was sich wirklich aendert.

   WARUM `background` UND NICHT WIEDER EIN PSEUDOELEMENT: ::before und
   ::after gehoeren beide dem Baukasten (Kantenlicht, Raster,
   Eckwinkel). Ein Hintergrund mit mehreren Ebenen braucht keines von
   beiden -- und er wird vom `clip-path` der Fase sauber beschnitten,
   die Kante folgt also der Schraege statt sie zu durchstossen. */
.kk {
  position: relative;
  /* Links mehr: Dort laeuft jetzt die 6px-Stufenkante, und Text, der
     direkt daran klebt, laesst sie wie einen Fehler aussehen. */
  padding: 17px 20px 17px 26px;
  /* Wie breit die Farbkante ist. Als Wert, weil sie beim Zeigen
     waechst -- zwei Zahlen an zwei Stellen waeren zwei Zahlen.

     6px UND NICHT 3px (nachgemessen am 06.10.2026): Das Kantenlicht des
     Baukastens liegt mit 1,6px DARUEBER (::before, z-index 2) und
     verdeckt genau so viel von links. Von drei Pixeln blieben gut
     eineinhalb uebrig -- in der Nahaufnahme nicht mehr als Kante zu
     erkennen. Von sechs bleiben viereinhalb, und die sieht man. */
  --kante: 6px;
  background:
    /* 1. Die Stufenkante links. Oben hell, nach unten auslaufend:
          eine durchgezogene Kante wirkt wie eine Trennwand, eine
          auslaufende wie eine Markierung (dieselbe Ueberlegung wie
          beim Streifen der Aufgabenspalten). */
    linear-gradient(180deg,
      color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 92%, #ffffff) 0%,
      color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 70%, transparent) 45%,
      color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 14%, transparent) 100%)
      left top / var(--kante) 100% no-repeat,
    /* 2. Ein Hauch der Stufenfarbe in der Ecke, aus der die Kante
          kommt. 11 % -- man soll es spueren, nicht lesen. */
    radial-gradient(135% 115% at 0% 0%,
      color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 11%, transparent) 0%,
      transparent 62%),
    var(--flaeche);
  transition: background-size var(--tempo, .18s) ease, opacity .18s ease;
}
/* Beim Zeigen wird die Kante breiter. Den Rest (Anheben, farbiges
   Licht) macht der Baukasten schon -- und seit `--ton` je Stufe steht,
   leuchtet er in der Farbe DIESER Stufe statt im Rot der Seite. */
.stufe .kk:hover { --kante: 9px; }

/* ---- Follow-up ueberfaellig ----------------------------------------
   Ein Saum im gedaempften Warnton, genau wie ihn module.css fuer
   `.kachel[data-warn]` fuehrt -- inklusive des Faseschattens, der in
   derselben Liste stehen MUSS: `box-shadow` ist eine Liste und keine
   Ergaenzung, wer ihn weglaesst nimmt der Karte ihre Fase.

   SPEZIFITAET IST HIER KEIN DETAIL: Die Modulliste in module.css ist
   (0,2,0) und wird SPAETER geladen. `.kk[data-faellig="ja"]` waere
   gleich stark und verloere deshalb -- genau der Unfall, der die alte
   Regel unsichtbar gemacht hat. `.stufe .kk[...]` ist (0,3,0) und
   gewinnt. Beim Zeigen nimmt der Baukasten den Schatten ganz weg und
   arbeitet mit `filter`; der Saum muss dort also eigens wiederkommen,
   sonst verschwaende die Warnung in dem Moment, in dem jemand
   hinsieht. */
.stufe .kk[data-faellig="ja"] {
  box-shadow:
    inset 0 0 0 1.5px rgba(240, 196, 138, .42),
    inset 7px 7px 14px -10px rgba(0, 0, 0, .95);
}
.stufe .kk[data-faellig="ja"]:hover {
  box-shadow: inset 0 0 0 1.5px rgba(240, 196, 138, .66);
}
@media (prefers-contrast: more) {
  .stufe .kk[data-faellig="ja"] { box-shadow: inset 0 0 0 2px #f0c48a; }
}

.kk__kopf { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
/* DER NAME IST DIE UEBERSCHRIFT DER KARTE und sah aus wie Fliesstext
   (06.10.2026): 1,02rem bei Gewicht 650, keinen halben Schritt ueber
   dem, was darunter steht. Jetzt deutlich darueber -- in einer Spalte
   mit zwoelf Karten sucht das Auge zuerst den Namen. */
.kk__name {
  margin: 0; font-size: 1.12rem; font-weight: 700;
  line-height: 1.25; letter-spacing: -.006em;
}
.kk__unter {
  margin: 6px 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-size: .8rem; color: var(--text-still);
}
/* Die Plattform ist eine EINORDNUNG -- davon gibt es eine Handvoll, und
   man vergleicht sie. Deshalb ein Schild in der Farbe der Stufe. */
.kk__plattform {
  padding: 1px 8px; border-radius: 999px;
  /* .74rem = 11,8px. Unter 11,5px gilt Text im Grosscheck als zu klein;
     .72rem laegen bei 11,52 und damit auf dem Zehntel genau an der
     Schwelle -- eine Zahl, die bei der naechsten Schriftaenderung
     kippt. */
  font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 42%, #ffffff);
  background: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 30%, transparent);
}
/* Das Handle ist eine KENNUNG -- einmalig, und man liest sie Zeichen
   fuer Zeichen. In gleichbreiter Schrift verwechselt man l und 1 nicht,
   und genau darum geht es bei einem @namen, den jemand abtippt. */
.kk__handle {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .8rem; letter-spacing: -.01em;
  color: var(--text-leise);
}

.kk__marken { display: flex; gap: 6px; flex-wrap: wrap; }
.marke-punkt, .marke-still, .marke-fertig {
  padding: 3px 9px; border-radius: 999px;
  font-size: .71rem; font-weight: 600; letter-spacing: .02em;
  border: 1px solid var(--rand); color: var(--text-still);
}
.marke-punkt[data-prio="hoch"] {
  color: #ffb4b9; border-color: rgba(255, 154, 162, .38); background: rgba(255, 154, 162, .1);
}
.marke-punkt[data-prio="mittel"] { color: var(--text-leise); }
.marke-fertig {
  color: #79d1a2; border-color: rgba(121, 209, 162, .35); background: rgba(121, 209, 162, .09);
}

/* EINE HAARLINIE ZWISCHEN KOPF UND ZAHLEN (06.10.2026).
   Oben steht, WER es ist, darunter, ob es sich lohnt. Das sind zwei
   Fragen, und ohne eine Trennung liest sich die Karte als ein Block
   aus sieben gleich grossen Schnipseln. Die Linie traegt die
   Stufenfarbe und laeuft nach rechts aus -- dieselbe Sprache wie der
   Strich unter der Stufenueberschrift. */
.kk__info {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 7px 14px;
  margin-top: 13px; padding-top: 12px;
  font-size: .78rem;
  border-top: 1px solid transparent;
  /* `color-mix(in srgb, var(--rand))` stand hier beim ersten Anlauf --
     color-mix braucht ZWEI Farben. Ein ungueltiger Farbwert macht den
     ganzen Verlauf ungueltig, die Erklaerung faellt weg, und uebrig
     bleibt `1px solid transparent`: Abstand ohne Linie. Im Bild war
     nichts zu sehen, im Quelltext sah alles richtig aus. */
  border-image: linear-gradient(90deg,
    color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 34%, transparent) 0%,
    color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 14%, transparent) 45%,
    transparent 92%) 1;
}
.kk__still { color: var(--text-still); }
.kk__followup { color: var(--text-leise); }
.kk__followup[data-faellig="ja"] { color: #f0c48a; font-weight: 600; }

.kk__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 13px; }

/* Der Weiter-Schritt wiederholt sich auf jeder Karte. Als voller
   Farbverlauf waere die Seite ein Streifenmuster -- er traegt deshalb
   nur die Farbe seiner Stufe und wird erst beim Zeigen kraeftiger. */

/* Das Onboarding ist der einzige Schritt, der eine echte Person anlegt --
   der Knopf soll sich deshalb von den anderen abheben. */

/* ---------- Aufgeklappt ---------------------------------------------------- */

.kk__detail {
  margin-top: 15px; padding-top: 15px;
  border-top: 1px solid var(--rand);
}
.kk__zeile { margin: 0 0 9px; font-size: .87rem; color: var(--text-leise); }
.kk__schild {
  display: block; margin-bottom: 1px;
  font-size: .7rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-still);
}
.kk__notiz {
  width: 100%; margin: 4px 0 14px; padding: 10px 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  color: var(--text); font: inherit; resize: vertical;
}
.kk__raster {
  display: grid; gap: 12px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
.kk__raster input, .kk__raster select {
  width: 100%; padding: 9px 11px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  color: var(--text); font: inherit;
}
.kk__notiz:focus, .kk__raster input:focus, .kk__raster select:focus {
  outline: none; border-color: rgba(63, 189, 245, .65);
  box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
}


/* ---------- Codefenster ---------------------------------------------------- */

.schleier {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 22px;
  background: rgba(3, 5, 10, .78);
  backdrop-filter: blur(5px);
}
.code-fenster {
  width: min(440px, 100%); padding: 26px 28px;
  background: #0b111b;
  border: 1px solid rgba(63, 189, 245, .3);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
}
.code-fenster__titel { margin: 3px 0 10px; font-size: 1.2rem; font-weight: 700; }
.code-fenster__text { margin: 0 0 16px; font-size: .85rem; color: var(--text-leise); }
.code-fenster__code {
  margin: 0 0 20px; padding: 15px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.4rem; font-weight: 700; letter-spacing: .16em; text-align: center;
  word-break: break-all;
  background: rgba(63, 189, 245, .09);
  border: 1px solid rgba(63, 189, 245, .28);
  border-radius: var(--radius-klein);
}

@media (prefers-reduced-motion: reduce) {
  .kk { transition: none; }
}

/* ---------- Die Erklaerung im leeren Zustand ---------------------------
   Der leere Zustand ist der einzige Moment, in dem jemand garantiert
   liest, was dort steht -- spaeter ist die Flaeche von Daten belegt.
   Deshalb steht hier keine Meldung, sondern die Erklaerung, wofuer die
   Pipeline ueberhaupt gut ist. Sie ist laenger als ein Hinweis und
   bekommt deshalb linksbuendigen Text statt zentrierten. */
.leer-hinweis--erklaerung {
  text-align: left;
  max-width: 62ch;
  margin: 0 auto;
  padding: 30px 28px 26px;
}
.erklaerung__satz {
  margin: 0 0 14px;
  font-size: 1.02rem; color: var(--text); line-height: 1.55;
}
.erklaerung__warum {
  margin: 0 0 20px;
  font-size: .9rem; color: var(--text-leise); line-height: 1.65;
}
.erklaerung__stufen {
  display: grid; gap: 10px;
  margin: 0 0 20px; padding: 0; list-style: none;
  counter-reset: none;
}
.erklaerung__stufe {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: .88rem;
}
/* Die Nummer als eigener Koerper: Die fuenf Stufen sind eine REIHENFOLGE,
   und die soll man sehen, ohne die Ueberschriften zu lesen. */
.erklaerung__nr {
  flex: none;
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: .74rem; font-weight: 700;
  color: var(--ton, var(--akzent));
  border: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 40%, transparent);
  background: color-mix(in srgb, var(--ton, var(--akzent)) 12%, transparent);
}
.erklaerung__stufe strong { display: block; color: var(--text); }
.erklaerung__was {
  display: block; margin-top: 1px;
  font-size: .83rem; color: var(--text-still); line-height: 1.5;
}
.erklaerung__fuss {
  margin: 0 0 16px; padding-top: 16px;
  border-top: 1px solid var(--rand);
  font-size: .86rem; color: var(--text-leise); line-height: 1.6;
}
.erklaerung__los {
  margin: 0;
  font-size: .88rem; color: var(--ton, var(--akzent));
}
/* Der Ring des leeren Zustands passt hier nicht -- es ist ja Text da. */
.leer-hinweis--erklaerung::before { display: none; }

@media (max-width: 560px) {
  .leer-hinweis--erklaerung { padding: 22px 16px 20px; }
}

/* =====================================================================
   DIE STUFEN ERKLÄREN SICH SELBST (11.09.2026)

   Filipe: "perfektionnier diese kategorien wie die aussehen und was man
   da noch alles immer in jeder kategorie eintragen kann. weil man kan
   da nichts machen."

   Zwei Dinge steckten dahinter, und nur eins davon war Optik:

     1. Man KONNTE etwas machen -- der ganze Editor lag hinter einem
        stillen Textknopf namens "Details". Ein Wort, das Lesen
        verspricht, an einer Stelle, an der man ändert. Er heißt jetzt
        "Bearbeiten" und sieht auch danach aus.
     2. Die Stufen hatten nur einen Namen. Was "Interessiert" von
        "Gespräch" unterscheidet, stand einmal im leeren Zustand der
        Seite -- also genau so lange, bis der erste Kontakt da war.

   Der Ton der Stufe (--stufe-farbe) steht schon oben in dieser Datei;
   er wird hier nur konsequent benutzt, statt nur die Zahl zu färben.
   ===================================================================== */
.stufe__text { min-width: 0; }
.stufe__was {
  margin: 2px 0 0;
  font-size: .8rem; line-height: 1.45;
  color: var(--text-still);
  /* Der Satz darf umbrechen, aber nicht die Überschrift überragen. */
  max-width: 62ch;
}
/* Eine feine Kante in der Farbe der Stufe -- sie trennt die Abschnitte,
   ohne dass eine durchgehende Linie die Seite zerschneidet. */
.stufe__kopf {
  align-items: center;
  padding-bottom: 10px;
  /* AUSLAUFEND STATT DURCHGEZOGEN (06.10.2026). Eine Linie, die quer
     ueber die ganze Breite laeuft, wirkt wie eine Trennwand; eine, die
     nach rechts ausgeht, wie eine Markierung. Dieselbe Ueberlegung wie
     beim Streifen der Aufgabenspalten, dort schon ausgeschrieben.
     `border-image` statt `border-bottom`, weil ein Rand keinen Verlauf
     tragen kann -- die Breite steht deshalb getrennt davor. */
  border-style: solid;
  border-width: 0 0 1.5px;
  border-image: linear-gradient(90deg,
    color-mix(in srgb, var(--stufe-farbe, var(--rand)) 75%, transparent) 0%,
    color-mix(in srgb, var(--stufe-farbe, var(--rand)) 30%, transparent) 38%,
    transparent 92%) 1;
}
.stufe__zahl { margin-left: auto; flex: none; }

/* ---- Die harten Zahlen auf der Karte -------------------------------
   Land und Reichweite beantworten "lohnt sich das überhaupt". Sie
   stehen deshalb in der Kurzinfo und nicht im aufgeklappten Teil --
   wer sie erst nach einem Klick sieht, sortiert nicht danach. */
.kk__fakt {
  display: inline-flex; align-items: center;
  padding: 2px 9px;
  border: 1px solid var(--rand-hell); border-radius: 999px;
  font-size: .76rem; font-weight: 600;
  color: var(--text-leise);
  white-space: nowrap;
}
/* DIE REICHWEITE IST DIE ZAHL, NACH DER SORTIERT WIRD -- sie darf
   etwas lauter sein als „Deutschland" daneben. Gleichbreite Ziffern,
   damit 12k und 184k untereinander vergleichbar stehen. */
.kk__fakt[data-art="follower"] {
  font-variant-numeric: tabular-nums;
  font-size: .8rem; font-weight: 700;
  padding: 3px 11px;
  border-color: color-mix(in srgb, var(--akzent) 40%, transparent);
  background: color-mix(in srgb, var(--akzent) 10%, transparent);
  color: color-mix(in srgb, var(--akzent) 55%, #ffffff);
}

/* ---- „Schon im Netzwerk" ------------------------------------------
   Die teuerste Angabe der ganzen Pipeline: Wer unter Vertrag steht,
   kann nicht übernommen werden. Sie trägt deshalb die Warnfarbe des
   Hauses -- nicht als Alarm, sondern als Stoppschild. */
.marke-punkt[data-warn="ja"] {
  border-color: color-mix(in srgb, var(--k-warn, #e0736b) 55%, transparent);
  background: color-mix(in srgb, var(--k-warn, #e0736b) 16%, transparent);
  color: color-mix(in srgb, var(--k-warn, #e0736b) 42%, #ffffff);
}

/* ---- Der Knopf, der nicht gefunden wurde --------------------------
   Er sah aus wie ein Nebensatz und war die einzige Tür zum Editor.
   Jetzt hat er eine Kante -- er bleibt zurückhaltend gegenüber
   „Weiter zu …", ist aber als Knopf zu erkennen. */
.knopf-still--bearbeiten {
  border: 1px solid var(--rand-hell);
  border-radius: 10px;
  padding: 5px 12px;
}
.knopf-still--bearbeiten:hover { border-color: var(--akzent); color: var(--text); }
.knopf-still--bearbeiten[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--akzent) 55%, transparent);
  background: color-mix(in srgb, var(--akzent) 12%, transparent);
}

@media (forced-colors: active) {
  .kk__fakt, .knopf-still--bearbeiten { border: 1px solid CanvasText; }
  .marke-punkt[data-warn="ja"] { border: 2px solid CanvasText; }
}

/* =====================================================================
   LINKS NORMAL, RECHTS PREMIUM (06.10.2026)

   Filipe: "ich will dass es da in der mitte eine trennung gibt. links
   sollen normale creator sein und rechts premium creator. es gibt bei
   tiktok nämlich diese zwei optionen von streamer."

   DIE SCHWELLE WIRD AM STUFENKASTEN GEMESSEN, NICHT AM FENSTER
   (@container statt @media). Das ist der Unterschied, der am 06.09.2026
   im Creator Workspace zwei Fehler gekostet hat: Eine Zahl, die das
   FENSTER misst, weiß nichts von Rändern, Seitenleisten oder davon,
   dass der Inhalt bei 1240px aufhört. Der Kasten misst sich selbst --
   er bricht genau dann um, wenn ER zu schmal wird, und bleibt richtig,
   auch wenn sich an der Seite drumherum etwas ändert.

   DIE 680 STEHT GENAU EINMAL und sie zählt etwas Bestimmtes:
   zwei Kartenspalten von je 320px (schmaler wird eine Karte mit ihren
   zwei Knöpfen unbedienbar) plus 40px Trennabstand. Wer die Karte
   breiter macht, ändert sie hier -- und nirgendwo sonst.

   WARUM DIE KLASSEN „art-spalte" HEISSEN UND NICHT „spalte":
   `aufgaben.css` besitzt `.spalte`, `.spalte__kopf`, `.spalte__zahl` und
   `.spalte__leer` -- das Aufgabenbrett. Und `scouting.html` lädt
   `aufgaben.css` VOR dieser Datei. Der erste Entwurf hieß hier
   `.spalte__zahl`, und prompt zog `margin-left: auto` aus dem
   Aufgabenbrett die Zahl ans rechte Ende der Spalte, 560 px von ihrem
   Wort entfernt. Keine Prüfung wurde dabei rot: Die Klasse war ja da,
   sie gehörte nur jemand anderem. Gesehen habe ich es erst im
   Bildschirmfoto -- deshalb misst `pruef-scouting-felder` jetzt den
   Abstand zwischen Wort und Zahl.
   ===================================================================== */

.stufe { container-type: inline-size; }

/* Untereinander ist der Grundzustand, nicht der Notfall: So sieht es
   auf dem Handy aus, und dort wird diese Seite am häufigsten benutzt. */
.stufe__arten { display: grid; gap: 22px; }

.art-spalte__kopf {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 9px;
}
.art-spalte__titel {
  margin: 0;
  /* .76rem = 12,2px. Unter 11,5px gilt Text im Großcheck als zu klein
     zum Lesen -- und das ist er auch. */
  font-size: .76rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-still);
}
.art-spalte__zahl {
  min-width: 20px; padding: 1px 7px; text-align: center;
  font-size: .72rem; font-weight: 700; color: var(--text-still);
  background: rgba(255, 255, 255, .06);
  border-radius: 999px;
}
/* Premium trägt das Gold des Hauses (--k-gold). Kein neuer Farbwert:
   Das Haus hat einen Ton für "das hier ist etwas Besonderes", und zwei
   verschiedene Goldtöne nebeneinander wären nur zwei. */
.art-spalte[data-art="premium"] .art-spalte__titel { color: var(--k-gold); }
.art-spalte[data-art="premium"] .art-spalte__zahl {
  color: var(--k-gold);
  background: color-mix(in srgb, var(--k-gold) 13%, transparent);
}

/* Eine leere Spalte verschwindet NICHT. Sonst hätte eine Stufe mal eine
   und mal zwei Spalten, und man wüsste nicht, ob dort niemand steht
   oder ob die Trennung an dieser Stelle nicht gilt. */
.art-spalte__leer {
  margin: 0; padding: 12px 2px;
  font-size: .82rem; color: var(--text-still);
}

@container (min-width: 680px) {
  .stufe__arten {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  /* DIE TRENNUNG IN DER MITTE. Eine Linie am linken Rand der rechten
     Spalte -- sie läuft dadurch genau so weit, wie die längere der
     beiden Spalten reicht, und hört von selbst auf. Ein eigenes Element
     dafür müsste in der Höhe nachgeführt werden und wäre bei jeder
     aufgeklappten Karte zu kurz. */
  .art-spalte[data-art="normal"] { padding-right: 20px; }
  .art-spalte[data-art="premium"] {
    padding-left: 20px;
    /* --rand-hell (0,30) statt --rand (0,16). Im Bildschirmfoto vom
       06.10.2026 verschwand die dünnere Linie über dem Hintergrundbild
       fast ganz -- und genau sie war das Gewünschte. 0,30 bleibt eine
       ruhige Linie und kein Strich. */
    border-left: 1px solid var(--rand-hell);
  }
}

/* ---- Die Marke auf der Karte ---------------------------------------
   Nur Premium bekommt eine. "Normal" auf jeder zweiten Karte wäre ein
   Wort, das nie etwas Neues sagt -- dieselbe Regel wie bei "Schon im
   Netzwerk", wo "frei" ebenfalls stumm bleibt. */
.marke-punkt[data-art="premium"] {
  color: var(--k-gold);
  border-color: color-mix(in srgb, var(--k-gold) 42%, transparent);
  background: color-mix(in srgb, var(--k-gold) 12%, transparent);
}

@media (forced-colors: active) {
  .art-spalte[data-art="premium"] { border-left: 1px solid CanvasText; }
  .marke-punkt[data-art="premium"] { border: 2px solid CanvasText; }
}