dogfather-universe/workspace/assets/css/scouting.css

/* ===================================================================
   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: 30px; }
.stufe__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.stufe__titel {
  margin: 0; font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--akzent);
}
.stufe__zahl {
  min-width: 22px; padding: 1px 7px; text-align: center;
  font-size: .74rem; font-weight: 700; color: var(--text-still);
  background: rgba(255, 255, 255, .06);
  border-radius: 999px;
}
.stufe__karten { display: grid; gap: 10px; }

/* Farbverlauf entlang der Pipeline. */
.stufe[data-stufe="neu"]           { --stufe-farbe: #4c7fa8; }
.stufe[data-stufe="angesprochen"]  { --stufe-farbe: #5b8fd4; }
.stufe[data-stufe="gespraech"]     { --stufe-farbe: #7d84e0; }
.stufe[data-stufe="interessiert"]  { --stufe-farbe: #8ab8a0; }
.stufe[data-stufe="uebergeben"]    { --stufe-farbe: #79d1a2; }
.stufe[data-stufe="abgelehnt"]     { --stufe-farbe: #55606f; }
.stufe[data-stufe="abgelehnt"] .kk { opacity: .62; }
.stufe[data-stufe="abgelehnt"] .kk:hover { opacity: 1; }

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

.kk {
  position: relative;
  padding: 15px 18px 15px 21px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  transition: border-color .18s ease, background .18s ease, opacity .18s ease;
}
.kk::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--stufe-farbe, var(--akzent));
  opacity: .8;
}
.kk:hover { border-color: rgba(255, 255, 255, .16); }
.kk[data-faellig="ja"] { border-color: rgba(255, 190, 120, .34); }

.kk__kopf { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.kk__name { margin: 0; font-size: 1.02rem; font-weight: 650; }
.kk__unter { margin: 2px 0 0; font-size: .82rem; color: var(--text-still); }

.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);
}

.kk__info { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: .78rem; }
.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: flex-start;
  padding-bottom: 9px;
  border-bottom: 1px solid color-mix(in srgb, var(--stufe-farbe, var(--rand)) 34%, transparent);
}
.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;
}
.kk__fakt[data-art="follower"] {
  font-variant-numeric: tabular-nums;
  border-color: color-mix(in srgb, var(--akzent) 34%, transparent);
  color: color-mix(in srgb, var(--akzent) 62%, #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; }
}