/* Das Cockpit traegt dieselbe Handschrift wie die Seiten, die es baut.
   Farben und Schriftstapel stammen aus design.md, hier als feste Werte eingetragen,
   weil dieses Blatt eine Werkstatt ist und keine Kundenseite.

   Eine Abweichung vom Bauplan, mit Absicht: der Bauplan verlangt Knoepfe als Pillen mit
   vollem Radius. design.md verlangt Radius 0 ueberall, und pruefen.js zaehlt mit.
   Wo sich beide widersprechen, gilt die engere Regel. Also Kante. */

:root {
  --grund: #2D2D2D;
  --grund-tief: #252525;
  --flaeche: #3A3A3A;
  --text: #FFFFFF;
  --text-fliess: #B0B0B0;
  --text-leise: #969696;
  --marke: #F5C400;
  --marke-hover: #E8B400;
  --linie: #4A4A4A;
  --linie-leise: #3A3A3A;
  --rot: #E06C6C;
  --gruen: #7CB87C;

  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Franklin Gothic Medium', Helvetica, Arial, sans-serif;
  --mono: 'Courier New', Courier, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0 }

body {
  background: var(--grund);
  color: var(--text-fliess);
  font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--marke); text-decoration: none }
a:hover { color: var(--marke-hover); text-decoration: underline }
:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px }

/* ------------------------------------------------------------------ Kopf */

header.kopf {
  display: flex; align-items: center; gap: 20px;
  padding: 16px 24px;
  background: var(--grund-tief);
  border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; z-index: 20;
}
.kopf h1 {
  font-size: 15px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text); font-weight: 700;
}
.kopf .marke { color: var(--marke) }
.kopf .luecke { flex: 1 }
.kopf .leise { font-family: var(--mono); font-size: 12px; color: var(--text-leise) }

/* ------------------------------------------------------------------ Knoepfe */

button, .knopf {
  font: 600 13px/1 var(--font);
  padding: 10px 16px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--linie);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: border-color .12s, background .12s, color .12s;
}
button:hover, .knopf:hover { border-color: var(--marke); color: var(--marke); text-decoration: none }
button:disabled { opacity: .4; cursor: not-allowed }
button:disabled:hover { border-color: var(--linie); color: var(--text) }

button.wichtig, .knopf.wichtig {
  background: var(--marke); color: var(--grund); border-color: var(--marke);
}
button.wichtig:hover, .knopf.wichtig:hover { background: var(--marke-hover); border-color: var(--marke-hover); color: var(--grund) }

button.klein { padding: 6px 10px; font-size: 12px }
button.nur-zeichen { padding: 8px 10px; font-family: var(--mono); font-size: 16px; line-height: 1 }
/* Das Auge und andere SVG-Symbole erben die Farbe des Knopfs und werden beim Draufzeigen
   gelb. pointer-events aus, damit ein Klick auf die Linie am Knopf ankommt, nicht am Pfad. */
button.nur-zeichen svg {
  width: 18px; height: 18px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}

/* ------------------------------------------------------------------ Felder */

input[type=text], input[type=search], input[type=url], input[type=date],
input[type=datetime-local], select, textarea {
  font: 14px/1.5 var(--font);
  background: var(--grund-tief);
  color: var(--text);
  border: 1px solid var(--linie);
  padding: 9px 11px;
  width: 100%;
}
textarea { resize: vertical; min-height: 76px; font-family: var(--font) }
input:focus, select:focus, textarea:focus { border-color: var(--marke); outline: none }
label { display: block; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-leise); margin-bottom: 5px }

/* ------------------------------------------------------------------ Uebersicht */

.bahn { max-width: 1180px; margin: 0 auto; padding: 28px 24px 80px }

.werkzeugleiste { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; flex-wrap: wrap }
.werkzeugleiste input[type=search] { max-width: 320px }
.filter { display: flex; gap: 0; border: 1px solid var(--linie) }
.filter button { border: none; border-right: 1px solid var(--linie); font-weight: 500 }
.filter button:last-child { border-right: none }
.filter button.an { background: var(--flaeche); color: var(--marke) }

table.projekte { width: 100%; border-collapse: collapse }
table.projekte th {
  text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-leise); font-weight: 600; padding: 0 14px 10px; border-bottom: 1px solid var(--linie);
}
table.projekte td { padding: 16px 14px; border-bottom: 1px solid var(--linie-leise); vertical-align: middle }
table.projekte tr:hover td { background: var(--grund-tief) }
table.projekte td:first-child { min-width: 220px }   /* der Titel darf nicht mehr zerdrueckt werden */
table.projekte .titel { color: var(--text); font-weight: 600; font-size: 16px }
table.projekte .slug { font-family: var(--mono); font-size: 12px; color: var(--text-leise) }

/* Sechs Knoepfe in einem Raster aus drei gleichen Spalten: alle Kaesten exakt gleich breit,
   zwei saubere Reihen. Die Spalte hat eine feste Breite, damit der Titel Platz behaelt. */
table.projekte td.tat { width: 384px; vertical-align: middle }
table.projekte .tat-knoepfe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px }
table.projekte .tat-knoepfe > * {
  padding: 8px 6px; font-size: 12px;
  justify-content: center; text-align: center; white-space: nowrap;
}

.pille {
  display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; padding: 4px 9px; border: 1px solid var(--linie);
}
.pille.entwurf { color: var(--text-leise) }
.pille.aktiv { color: var(--grund); background: var(--marke); border-color: var(--marke) }
.pille.beendet { color: var(--rot); border-color: var(--rot) }

.leer { padding: 60px 0; text-align: center; color: var(--text-leise) }

/* ------------------------------------------------------------------ Sektionen */

/* Der Ast ueber den Landing Pages. Wie Abschnitt->Bereich in den Materialien: ein gelber
   Strich links markiert den Ast, die Pages haengen eingerueckt darunter. */
tr.sektion-kopf td {
  background: var(--grund-tief);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  border-left: 3px solid var(--marke);
  padding: 13px 16px;
}
tr.sektion-kopf.leer-ast td { border-left-color: var(--linie) }
.sektion-kopf .zeile { display: flex; align-items: center; gap: 12px; cursor: pointer }
.sektion-kopf .pfeil { color: var(--marke); font-size: 10px; width: 12px; flex: 0 0 auto }
.sektion-kopf .name { color: var(--text); font-weight: 700; font-size: 15px }
.sektion-kopf .beschreibung { color: var(--text-leise); font-size: 12px; font-weight: 400 }
.sektion-kopf .zahl { font-family: var(--mono); font-size: 11px; color: var(--text-leise); white-space: nowrap }
.sektion-kopf .luecke { flex: 1 }
.sektion-kopf .werkzeug { display: flex; gap: 6px; flex: 0 0 auto }
.sektion-kopf .werkzeug button { padding: 6px 10px; font-size: 12px }

/* Die Landing Pages haengen eingerueckt unter ihrem Ast. */
table.projekte tr.projektzeile td:first-child { padding-left: 30px; border-left: 3px solid var(--linie-leise) }
table.projekte tr.projektzeile:hover td:first-child { border-left-color: var(--marke) }

/* Die Zuordnungs-Auswahl unter dem Kurznamen: hierhin verschiebst Du eine Page. */
.zuordnung { display: flex; align-items: center; gap: 8px; margin-top: 9px }
.zuordnung .stiftlabel { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise) }
.zuordnung select { width: auto; max-width: 230px; padding: 5px 8px; font-size: 12px }

/* ------------------------------------------------------------------ Editor */

.editor { display: grid; grid-template-columns: minmax(420px, 46%) 1fr; height: calc(100vh - 57px) }
.spalte-links { border-right: 1px solid var(--linie); overflow-y: auto; padding: 20px }
.spalte-rechts { display: flex; flex-direction: column; background: var(--grund-tief); min-width: 0 }

.rahmenleiste {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 16px; border-bottom: 1px solid var(--linie);
}
.rahmenleiste .luecke { flex: 1 }
.rahmen { flex: 1; display: flex; justify-content: center; overflow: auto; padding: 0 }
.rahmen iframe { border: 0; background: var(--grund); width: 100%; height: 100% }
.rahmen.mobil iframe { width: 375px; border-left: 1px solid var(--linie); border-right: 1px solid var(--linie) }

/* Blockkarten */

.karte { border: 1px solid var(--linie); margin-bottom: 10px; background: var(--grund-tief) }
.karte.aus { opacity: .42 }
.karte.aus .kopfzeile .name { text-decoration: line-through }
.karte .kopfzeile { display: flex; align-items: center; gap: 10px; padding: 11px 12px; cursor: default }
.karte .nummer { font-family: var(--mono); font-size: 11px; color: var(--text-leise); min-width: 22px }
.karte .name { color: var(--text); font-weight: 600; font-size: 14px }
.karte .art { font-family: var(--mono); font-size: 11px; color: var(--text-leise) }
.karte .anriss {
  font-size: 12px; color: var(--text-leise); padding: 0 12px 10px 44px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.karte .tat { margin-left: auto; display: flex; gap: 4px }
.karte .felder { border-top: 1px solid var(--linie); padding: 14px 12px; display: none }
.karte.offen .felder { display: block }
.karte .feld { margin-bottom: 14px }
.karte .feld:last-child { margin-bottom: 0 }

.zeile { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 7px }
.zeile > * { flex: 1 }
.zeile button { flex: 0 0 auto }
.listenkopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px }

/* Schalter-Beschriftungen tragen echten Fliesstext. Die allgemeine label-Regel macht
   Beschriftungen gross und gesperrt, das ist nur fuer Feldueberschriften ("TERMIN") gedacht.
   Hier zurueckgenommen, sonst schreien die offenen Punkte in Grossbuchstaben. */
.schalter { display: flex; align-items: center; gap: 9px; text-transform: none; letter-spacing: normal }
.schalter input { width: auto; accent-color: var(--marke) }
.schalter span { font-size: 13px; color: var(--text-fliess) }

/* Materialien: Abschnitte und die Bereiche darin */

.abschnitt { border: 1px solid var(--linie); border-left: 3px solid var(--marke); margin-bottom: 16px; background: var(--grund-tief) }
.abschnitt.aus { opacity: .42; border-left-color: var(--linie) }
.abschnitt > .kopfzeile { display: flex; align-items: center; gap: 10px; padding: 13px 14px }
.abschnitt > .kopfzeile .name {
  color: var(--marke); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
}
.abschnitt.aus > .kopfzeile .name { color: var(--text-leise); text-decoration: line-through }
.abschnitt > .kopfzeile .zahl { font-family: var(--mono); font-size: 11px; color: var(--text-leise) }
.abschnitt .abschnitt-felder { border-top: 1px solid var(--linie); padding: 14px; display: none }
.abschnitt.offen .abschnitt-felder { display: block }
.abschnitt .bereiche { padding: 0 14px 14px }
.abschnitt .bereiche .karte { background: var(--grund) }
.abschnitt .bereiche .karte .kopfzeile { padding: 10px 11px }
.abschnitt .neuer-bereich { width: 100%; justify-content: center; margin-top: 2px }

.karte .zeit { font-family: var(--mono); font-size: 11px; color: var(--text-leise); margin-left: auto; padding-right: 8px }
.karte .marken { display: flex; gap: 5px; flex-wrap: wrap; padding: 0 11px 10px 42px }
.karte .marken li {
  list-style: none; font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-leise); border: 1px solid var(--linie); padding: 3px 7px;
}
.karte .marken li.weg { cursor: pointer }
.karte .marken li.weg:hover { border-color: var(--rot); color: var(--rot) }

.hochlader { display: flex; gap: 8px; align-items: center; margin-top: 7px }
.hochlader input[type=file] { font-size: 12px }

/* Die Kadenz-Seite: aufklappbare Schritte, einer je Aspekt der Landing Page */

.kadenz { max-width: 1100px; margin: 0 auto; padding: 26px 24px 80px }

/* Der Launch-Kopf: die Fakten der Landing Page auf einen Blick. Ein Streifen Gelb oben,
   damit die Seite mit Wucht beginnt und nicht mit einer grauen Zeile. Alles hier ist frisch
   gelesen, nie gespeichert. */
.launchkopf {
  border: 1px solid var(--linie);
  border-top: 3px solid var(--marke);
  background: var(--grund-tief);
  padding: 22px 22px 18px;
  margin-bottom: 24px;
}
.lk-titelzeile { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px }
.lk-titel { color: var(--text); font-size: 26px; font-weight: 800; letter-spacing: -.01em; line-height: 1.12 }
.lk-angebot { color: var(--text-fliess); font-size: 14px; max-width: 82ch; margin-bottom: 18px }

/* Die Faktenzellen liegen in einem Kasten, durch feine Linien getrennt, ohne runde Ecken. */
.lk-fakten { display: flex; flex-wrap: wrap; border: 1px solid var(--linie); margin-bottom: 18px }
.lk-fakten .fakt { flex: 1 1 170px; padding: 12px 15px; border-right: 1px solid var(--linie); min-width: 0 }
.lk-fakten .fakt:last-child { border-right: none }
.lk-fakten .k {
  display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-leise); margin-bottom: 6px;
}
.lk-fakten .w { display: block; color: var(--text); font-weight: 600; font-size: 14px; word-break: break-word }
.lk-fakten .w.marke { color: var(--marke) }
.lk-tasten { margin: 0 }

@media (max-width: 620px) {
  .lk-titel { font-size: 21px }
  .lk-fakten .fakt { flex-basis: 100%; border-right: none; border-bottom: 1px solid var(--linie) }
  .lk-fakten .fakt:last-child { border-bottom: none }
}

.schritt {
  border: 1px solid var(--linie);
  background: var(--grund-tief);
  margin-bottom: 10px;
}
.schritt.offen { border-color: var(--marke) }
.schritt.aus { opacity: .45 }

.schritt > .zeile {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; cursor: pointer; list-style: none;
}
.schritt > .zeile:hover { background: var(--flaeche) }

.schritt .pfeil {
  font-size: 11px; color: var(--marke); width: 12px; flex: 0 0 auto;
  transition: transform .12s;
}
.schritt.offen .pfeil { transform: rotate(90deg) }

/* Nicht an .schritt gebunden: der Chip steht auch im Reiter Launch-Kadenz des Projekteditors. */
.marke-nr {
  font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  background: var(--marke); color: var(--grund); padding: 6px 10px; flex: 0 0 auto;
}
.schritt.aus .marke-nr { background: var(--linie); color: var(--text-leise) }

/* Der Textklotz eines Schritts: Titel oben, die Kurzbeschreibung als zweite Zeile.
   So steht unter jedem Balken schon zugeklappt, worum es geht, wie im Vorbild unter
   "SCHRITT 1". Ohne die zweite Zeile ist die Liste eine Wand aus Ueberschriften. */
.schritt .schritt-text { flex: 1; min-width: 0 }
.schritt .titel-zeile { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.schritt .titel { color: var(--text); font-weight: 700; font-size: 16px }
.schritt .zahl { font-family: var(--mono); font-size: 12px; color: var(--text-leise) }
.schritt .unter {
  font-size: 12.5px; color: var(--text-leise); margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 92ch;
}
.schritt.offen .unter { white-space: normal; overflow: visible }
.schritt .werkzeug { display: flex; gap: 5px; flex: 0 0 auto }

.schritt .koerper { border-top: 1px solid var(--linie); padding: 20px 18px }
.schritt .beschreibung { font-size: 13px; color: var(--text-leise); margin-bottom: 16px; max-width: 74ch }

/* Eine Zeile in der Abfolge: Termin, Kanal, Was, Häkchen */
.takt { width: 100%; border-collapse: collapse }
.takt th {
  text-align: left; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-leise); font-weight: 600; padding: 0 10px 8px; border-bottom: 1px solid var(--linie);
}
.takt td { padding: 11px 10px; border-bottom: 1px solid var(--linie-leise); vertical-align: middle }
.takt tr:hover td { background: var(--flaeche) }
.takt tr.erledigt td { color: var(--text-leise) }
.takt tr.erledigt td .was { text-decoration: line-through }
.takt tr.faellig td { box-shadow: inset 3px 0 0 var(--marke) }
.takt .wann { font-family: var(--mono); font-size: 12px; white-space: nowrap }
.takt .kanal {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--linie); padding: 3px 7px; white-space: nowrap;
}
.takt .was { color: var(--text) }
.takt .zaehler { font-family: var(--mono); font-size: 11px; color: var(--text-leise) }
.takt input[type=checkbox] { width: auto; accent-color: var(--marke); cursor: pointer }
.takt input[type=date] { width: auto; font-size: 12px; padding: 5px 7px }
.takt .tat { text-align: right; white-space: nowrap }

/* Zustandszeile */

.zustand { font-family: var(--mono); font-size: 12px; color: var(--text-leise) }
.zustand.arbeitet { color: var(--marke) }
.zustand.fehler { color: var(--rot) }
.zustand.gut { color: var(--gruen) }

/* Texte-Reiter */

.reiter { display: flex; gap: 0; border-bottom: 1px solid var(--linie); margin-bottom: 16px }
.reiter button { border: none; border-bottom: 2px solid transparent; padding: 10px 14px }
.reiter button.an { border-bottom-color: var(--marke); color: var(--marke) }

.textblock { border: 1px solid var(--linie); margin-bottom: 14px }
.textblock .kopfzeile { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--linie) }
.textblock .kopfzeile .datei { font-family: var(--mono); font-size: 12px; color: var(--text) }
.textblock .kopfzeile .luecke { flex: 1 }
.textblock pre {
  padding: 14px; margin: 0; white-space: pre-wrap; word-break: break-word;
  font: 13px/1.6 var(--font); color: var(--text-fliess); max-height: 340px; overflow-y: auto;
}
.zaehler { font-family: var(--mono); font-size: 12px }
.zaehler.passt { color: var(--gruen) }
.zaehler.zulang, .zaehler.zukurz { color: var(--rot) }

/* ------------------------------------------------------------------ Dialog */

dialog {
  background: var(--grund); color: var(--text-fliess);
  border: 1px solid var(--linie); padding: 0; max-width: 620px; width: calc(100% - 40px);
}
dialog::backdrop { background: rgba(0, 0, 0, .68) }
dialog .dkopf { padding: 18px 22px; border-bottom: 1px solid var(--linie) }
dialog .dkopf h2 { font-size: 17px; color: var(--text) }
dialog .dinhalt { padding: 20px 22px; max-height: 62vh; overflow-y: auto }
dialog .dfuss { padding: 14px 22px; border-top: 1px solid var(--linie); display: flex; gap: 10px; justify-content: flex-end }
dialog .feld { margin-bottom: 16px }

.vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.vergleich > div { border: 1px solid var(--linie); padding: 12px }
.vergleich h3 { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise); margin-bottom: 9px }
.vergleich pre { white-space: pre-wrap; word-break: break-word; font: 12px/1.5 var(--mono); color: var(--text-fliess) }
.vergleich .neu { border-color: var(--marke) }

.hinweiskasten { border-left: 3px solid var(--marke); background: var(--grund-tief); padding: 12px 14px; margin-bottom: 16px; font-size: 13px }
.hinweiskasten.schlecht { border-left-color: var(--rot) }

pre.protokoll {
  background: var(--grund-tief); border: 1px solid var(--linie); padding: 14px;
  font: 12px/1.5 var(--mono); color: var(--text-fliess); white-space: pre-wrap;
  max-height: 52vh; overflow-y: auto;
}

@media (max-width: 1000px) {
  .editor { grid-template-columns: 1fr; height: auto }
  .spalte-links { border-right: none; border-bottom: 1px solid var(--linie) }
  .rahmen { height: 70vh }
}