/* ===================================================================
   Content-Planung.

   Zwei Dinge bestimmen die Gestaltung:

   1. Es ist eine STRECKE. Die Spalten stehen für Fortschritt von links
      nach rechts, deshalb wird die Farbe der Spaltenköpfe von kühl
      (Idee) nach warm-hell (draußen) heller — man sieht die Richtung,
      ohne sie zu lesen.

   2. Die Säulenfarben sind DATEN, keine Dekoration. Sie stammen aus
      einer geprüften Palette und wurden gegen genau diesen Hintergrund
      (#0a0d13) gerechnet: Helligkeitsband, Farbstärke, Abstand bei
      Farbfehlsichtigkeit (schlechtestes Paar ΔE 8.4), Normalsicht-
      Abstand (19.3) und Kontrast — alle Prüfungen bestanden. Deshalb
      wird an diesen fünf Werten nichts „nachgebessert": Jede Änderung
      macht die Prüfung ungültig.

   Augenschonend bleibt alles: gedeckte Töne, keine Leuchtflächen, keine
   Bewegung außer weichen Übergängen.
   =================================================================== */

.content-wurzel,
body.start {
  /* Fünf Plätze für Content-Säulen. Die Zuordnung folgt dem Platz
     (slot), nicht dem Rang -- sonst wechselt eine Säule die Farbe,
     sobald eine andere sie überholt. */
  --saeule-1: #3987e5;   /* Blau    */
  --saeule-2: #d95926;   /* Orange  */
  --saeule-3: #199e70;   /* Türkis  */
  --saeule-4: #c98500;   /* Gelb    */
  --saeule-5: #d55181;   /* Magenta */
  --saeule-0: #56657a;   /* ohne Säule -- bewusst grau, keine sechste Farbe */
}

/* Die Kennzahlen-Reihe ist am 01.09.2026 entfallen ("diese Kisten sind
   jetzt ueberall zu viel, die sollen weg"). Mit ihr gehen auch .kachel,
   .kachel__wert, .kachel__name und .kachel__zusatz -- sie hatten hier
   keinen anderen Benutzer.

   VORSICHT bei "kachel": Die Klasse gibt es auch auf der Startseite und
   im Report, dort aber mit ganz anderen Regeln aus start.css bzw.
   report.css. Diese Kopien hier galten nur fuer die Content-Seite; sie
   zu loeschen ruehrt an die anderen beiden nicht. Genau deshalb steht
   das hier: Wer spaeter ".kachel" sucht, findet drei Stellen. */

/* ---------- Säulen-Balance ------------------------------------------------ */

.balance {
  margin-bottom: 26px; padding: 16px 18px 14px;
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--flaeche);
}

/* Ein 2px-Spalt zwischen den Stücken statt einer Trennlinie: Die Lücke
   zeigt die Grenze, ohne eine weitere Farbe einzuführen. */
.balance__balken {
  display: flex; gap: 2px; height: 30px; margin: 4px 0 12px;
  border-radius: 6px; overflow: hidden;
}
.balance__stueck {
  display: flex; align-items: center; justify-content: center;
  min-width: 3px; transition: filter var(--tempo);
}
.balance__stueck:hover { filter: brightness(1.15); }
.balance__stueck[data-slot="1"] { background: var(--saeule-1); }
.balance__stueck[data-slot="2"] { background: var(--saeule-2); }
.balance__stueck[data-slot="3"] { background: var(--saeule-3); }
.balance__stueck[data-slot="4"] { background: var(--saeule-4); }
.balance__stueck[data-slot="5"] { background: var(--saeule-5); }
.balance__stueck[data-slot="0"] { background: var(--saeule-0); }
/* Die Zahl im Balken trägt Text-Tinte, nicht die Säulenfarbe -- Text in
   der Serienfarbe ist auf jedem Untergrund ein Kontrastproblem. Auf
   diesen fünf Flächen ist Dunkel der sichere Wert. */
.balance__zahl {
  font-size: .72rem; font-weight: 700; color: #06090f;
  font-variant-numeric: tabular-nums;
}

.legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.legende__punkt { display: flex; align-items: center; gap: 7px; font-size: .82rem; }
.legende__farbe {
  width: 10px; height: 10px; flex: none; border-radius: 3px;
  background: var(--saeule-0);
}
.legende__farbe[data-slot="1"] { background: var(--saeule-1); }
.legende__farbe[data-slot="2"] { background: var(--saeule-2); }
.legende__farbe[data-slot="3"] { background: var(--saeule-3); }
.legende__farbe[data-slot="4"] { background: var(--saeule-4); }
.legende__farbe[data-slot="5"] { background: var(--saeule-5); }
.legende__name { color: var(--text); }
.legende__wert { color: var(--text-leise); font-variant-numeric: tabular-nums; }
.legende__ziel { color: var(--text-still); font-size: .76rem; }
.legende__ziel[data-warn="ja"] { color: var(--warn); }

.balance__hinweis { margin: 10px 0 0; font-size: .78rem; color: var(--text-still); }

/* ---------- Säulen verwalten ---------------------------------------------- */

.saeulen-kasten {
  margin-bottom: 26px; padding: 18px 20px;
  border: 1px solid var(--rand-hell); border-radius: var(--radius);
  background: var(--flaeche);
}
.saeule {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 4px; border-bottom: 1px solid var(--rand);
  font-size: .86rem;
}
.saeule:last-of-type { border-bottom: 0; }
.saeule__name { font-weight: 650; }
.saeule__wer, .saeule__zahl, .saeule__ziel { color: var(--text-still); font-size: .79rem; }
.saeule__zahl { margin-left: auto; }

.saeule-neu {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rand);
}
.saeule-neu .feld { flex: 1 1 200px; min-width: 0; }
.saeule-neu .feld--schmal { flex: 0 1 130px; }

/* ---------- Filterzeile --------------------------------------------------- */

.filterzeile { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 18px; }
.filtergruppe { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.filtergruppe__schild {
  font-size: .68rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-still); margin-right: 2px;
}

/* ---------- Die Strecke --------------------------------------------------- */

.strecke {
  display: grid; gap: 10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
}

.spalte {
  min-width: 0; padding: 12px 12px 14px;
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--flaeche);
}
/* Die Richtung der Strecke, ohne ein Wort: Der Streifen über der Spalte
   wird von links nach rechts heller und wärmer. */
.spalte::before {
  content: ""; display: block; height: 2px; margin: -4px -4px 12px;
  border-radius: 2px; opacity: .55;
}
.spalte[data-stufe="idee"]::before            { background: #2c4a6b; opacity: .8; }
.spalte[data-stufe="skript"]::before          { background: #2f6a97; opacity: .8; }
.spalte[data-stufe="gedreht"]::before         { background: #3987e5; opacity: .7; }
.spalte[data-stufe="fertig"]::before          { background: #4fb3d9; opacity: .7; }
.spalte[data-stufe="veroeffentlicht"]::before { background: #7fd4c1; opacity: .7; }

.spalte__kopf {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.spalte__name {
  margin: 0; font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise);
}
.spalte__zahl {
  margin-left: auto; 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;
  font-variant-numeric: tabular-nums;
}
.spalte__leer { margin: 6px 0 0; text-align: center; color: var(--text-still); opacity: .5; }

/* ---------- Eine Video-Karte ---------------------------------------------- */

.video {
  position: relative; overflow: hidden;
  margin-bottom: 8px; padding: 11px 13px 10px;
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: rgba(255, 255, 255, .035);
  transition: border-color var(--tempo), background var(--tempo);
}
.video:last-child { margin-bottom: 0; }
.video:hover { border-color: var(--rand-hell); background: rgba(255, 255, 255, .055); }

/* Die Säulenfarbe als schmale Kante links -- die Karte selbst bleibt
   ruhig. Fünf eingefärbte Karten nebeneinander wären ein Bonbonglas. */
.video[data-slot]::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--saeule-0);
}
.video[data-slot="1"]::before { background: var(--saeule-1); }
.video[data-slot="2"]::before { background: var(--saeule-2); }
.video[data-slot="3"]::before { background: var(--saeule-3); }
.video[data-slot="4"]::before { background: var(--saeule-4); }
.video[data-slot="5"]::before { background: var(--saeule-5); }

.video__titel { margin: 0 0 4px; font-size: .93rem; font-weight: 650; line-height: 1.35; }

/* Der Hook ist gesprochener Text -- kursiv und in Anführungszeichen
   liest er sich als das, was er ist. */
.video__hook {
  margin: 0 0 7px; font-size: .82rem; font-style: italic;
  color: var(--text-leise); line-height: 1.45;
}
.video__hook--fehlt {
  font-style: normal; font-size: .74rem; color: var(--warn); opacity: .75;
}

.video__marken { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.marke-saeule, .marke-still {
  padding: 1px 8px; border-radius: 999px;
  font-size: .69rem; font-weight: 600;
}
.marke-still {
  color: var(--text-still); background: rgba(255, 255, 255, .05);
  border: 1px solid var(--rand);
}
/* Der Säulenname trägt seine Farbe als Rand und schwachen Grund, nicht
   als Textfarbe -- farbiger Text auf dunklem Grund wird bei den
   dunkleren Plätzen schwer lesbar. */
.marke-saeule { color: var(--text); border: 1px solid var(--saeule-0); background: rgba(255, 255, 255, .04); }
.marke-saeule[data-slot="1"] { border-color: var(--saeule-1); background: rgba(57, 135, 229, .14); }
.marke-saeule[data-slot="2"] { border-color: var(--saeule-2); background: rgba(217, 89, 38, .14); }
.marke-saeule[data-slot="3"] { border-color: var(--saeule-3); background: rgba(25, 158, 112, .14); }
.marke-saeule[data-slot="4"] { border-color: var(--saeule-4); background: rgba(201, 133, 0, .14); }
.marke-saeule[data-slot="5"] { border-color: var(--saeule-5); background: rgba(213, 81, 129, .14); }

.video__termin {
  margin: 0 0 7px; font-size: .75rem; color: var(--text-still);
  font-variant-numeric: tabular-nums;
}
.video__termin[data-warn="ja"] { color: var(--warn); }

.video__knoepfe {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding-top: 8px; border-top: 1px solid var(--rand);
}
.tu-knopf {
  padding: 3px 9px;
  font: inherit; font-size: .72rem; font-weight: 600;
  color: var(--text-still); cursor: pointer;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--rand); border-radius: 999px;
  transition: color var(--tempo), border-color var(--tempo), background var(--tempo);
}
.tu-knopf:hover:not(:disabled) {
  color: var(--text); border-color: var(--rand-hell); background: rgba(255, 255, 255, .09);
}
.tu-knopf[data-haupt="ja"] {
  color: var(--akzent); border-color: rgba(63, 189, 245, .35);
  background: rgba(63, 189, 245, .08);
}
.tu-knopf[data-haupt="ja"]:hover:not(:disabled) {
  color: #fff; border-color: rgba(63, 189, 245, .6); background: rgba(63, 189, 245, .16);
}
.tu-knopf:disabled { opacity: .45; cursor: default; }
.tu-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ---------- Schmale Schirme ------------------------------------------------

   Fünf Spalten nebeneinander sind auf einem Handy je 60px breit -- der
   Titel bräche dann nach jedem zweiten Buchstaben um. Deshalb werden aus
   den Spalten untereinander liegende Abschnitte. Die Strecke bleibt
   lesbar, sie läuft nur von oben nach unten statt von links nach rechts.
   --------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .strecke { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .strecke { grid-template-columns: 1fr; }
  /* Leere Spalten kosten auf dem Handy nur Platz zum Scrollen. */
  .spalte:has(.spalte__leer) { display: none; }
  .balance__balken { height: 26px; }
  .saeule__zahl { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .video, .tu-knopf, .balance__stueck { transition: none; }
}

/* Der Aufklapper am Fuß einer zu langen Spalte. Bewusst unauffällig --
   er ist kein Ziel, sondern ein Ausweg. */
.spalte__mehr {
  display: block; width: 100%; margin-top: 6px; padding: 6px;
  font: inherit; font-size: .74rem; font-weight: 600;
  color: var(--text-still); cursor: pointer;
  background: transparent;
  border: 1px dashed var(--rand); border-radius: var(--radius-klein);
  transition: color var(--tempo), border-color var(--tempo);
}
.spalte__mehr:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .35); }
.spalte__mehr:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .spalte__mehr { transition: none; } }

/* =====================================================================
   VORLAGEN — fertige Vorschlaege zum Uebernehmen

   Sie sehen bewusst ANDERS aus als eigene Eintraege: heller Rand,
   gestrichelte Kante, keine Statusfarbe. Man soll auf den ersten Blick
   sehen, dass hier noch nichts "gehoert" -- es sind Angebote, keine
   Arbeit. Sobald einer uebernommen ist, wird die Karte ruhig und traegt
   einen Haken.
   ===================================================================== */

.vorlagen { margin: 22px 0 28px; }
.vorlagen__kopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.vorlagen__unter {
  margin: 4px 0 0;
  font-size: .86rem; color: var(--text-leise);
}
.vorlagen__raster {
  display: grid; gap: 11px;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}
.vorlagen__raster[hidden] { display: none; }

.vorlage {
  position: relative;
  padding: 15px 16px 13px;
  border: 1px dashed color-mix(in srgb, var(--ton, var(--akzent)) 30%, var(--rand));
  border-radius: var(--radius-klein);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ton, var(--akzent)) 6%, transparent), transparent 55%),
    var(--flaeche);
  transition: border-color .18s ease;
}
.vorlage:hover { border-color: color-mix(in srgb, var(--ton, var(--akzent)) 50%, var(--rand)); }
/* Uebernommen: durchgezogene Kante statt gestrichelter -- aus einem
   Angebot ist etwas Wirkliches geworden. */
.vorlage[data-genommen="ja"] {
  border-style: solid;
  border-color: rgba(80, 167, 130, .4);
  opacity: .72;
}
.vorlage[data-genommen="ja"]::after {
  content: "✓";
  position: absolute; top: 12px; right: 14px;
  color: #6fbd95; font-weight: 700;
}
.vorlage__titel {
  margin: 0 0 8px;
  font-size: .96rem; font-weight: 650; line-height: 1.3; color: var(--text);
}
/* Der Aufhaenger ist der wichtigste Teil einer Content-Idee -- die
   ersten ein bis drei Sekunden entscheiden ueber die Verbreitung.
   Deshalb steht er hervorgehoben und nicht im Fliesstext. */
.vorlage__hook {
  margin: 0 0 9px; padding: 9px 11px;
  border-left: 2px solid var(--ton, var(--akzent));
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, var(--ton, var(--akzent)) 9%, transparent);
  font-size: .88rem; line-height: 1.5; color: var(--text);
}
.vorlage__hookschild {
  display: block; margin-bottom: 3px;
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ton, var(--akzent));
}
.vorlage__text {
  margin: 0 0 12px;
  font-size: .85rem; line-height: 1.55; color: var(--text-leise);
}
.vorlage__fuss { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.vorlage__marke {
  padding: 2px 9px;
  border: 1px solid var(--rand); border-radius: 999px;
  font-size: .7rem; color: var(--text-still);
}
.vorlage__marke--saeule {
  border-color: color-mix(in srgb, var(--ton, var(--akzent)) 32%, transparent);
  color: var(--ton, var(--akzent));
}
.vorlage__fuss .schritt { margin-left: auto; }

.vorlagen__alle {
  grid-column: 1 / -1;
  display: flex; justify-content: center;
  padding-top: 4px;
}


@media (max-width: 560px) {
  .vorlagen__kopf { flex-direction: column; align-items: stretch; }
  .vorlagen__kopf .knopf { width: 100%; }
}

/* Auf dem Handy sind die kleinen Marken im Vorlagenblock zu klein --
   gemeldet von der Geraetepruefung (10,24 px beim Aufhaenger-Schild,
   11,2 px bei Format und Saeule). body.start davor, weil content.css
   NACH start.css geladen wird und dort dieselbe Regel steht. */
@media (max-width: 760px) {
  body.start .vorlage__hookschild { font-size: .72rem; }
  body.start .vorlage__marke { font-size: .75rem; }
}