:root { --grund: #f6f5f2; --karte: #fff; --text: #1d1d1b; --leise: #6b6860; --linie: #e2dfd8; --akzent: #8a6a1f; --gefahr: #a12f2f; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--grund); color: var(--text); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
header { display: flex; align-items: center; gap: 16px; padding: 12px 20px; background: #1d1d1b; color: #fff; }
header .wer { margin-left: auto; color: #cfcac0; }
header select { max-width: 320px; }
nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 20px; background: var(--karte); border-bottom: 1px solid var(--linie); }
nav button { background: none; border: 0; padding: 8px 12px; border-radius: 6px; cursor: pointer; font: inherit; color: var(--leise); }
nav button.aktiv { background: var(--grund); color: var(--text); font-weight: 600; }
.inhalt { padding: 20px; max-width: 1200px; }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; padding: 24px; margin: 10vh auto; }
.schmal { max-width: 440px; }
.karte input, .karte button { display: block; width: 100%; margin: 8px 0; }
input, select, textarea, button { font: inherit; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 6px; background: #fff; color: var(--text); }
button { cursor: pointer; }
button.haupt { background: var(--akzent); color: #fff; border-color: var(--akzent); font-weight: 600; }
button.gefahr { color: var(--gefahr); border-color: #e6c3c3; }
textarea { width: 100%; font: 13px/1.4 ui-monospace, Menlo, monospace; }
table { border-collapse: collapse; width: 100%; background: var(--karte); margin: 8px 0 16px; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { color: var(--leise); font-weight: 600; }
.zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.knoepfe { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.meldung { position: fixed; bottom: 20px; right: 20px; padding: 12px 16px; border-radius: 8px; background: #1d1d1b; color: #fff; max-width: 420px; }
.meldung.fehler { background: var(--gefahr); }
.ersatzcodes pre { background: var(--grund); padding: 12px; border-radius: 6px; }
.fehlertext { color: var(--gefahr); }
details { margin-top: 16px; }

/* Bauabschnitt 2: Zeitleisten-Editor und Teamansicht */
.leise { color: var(--leise); }
.editor { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; margin: 12px 0; }
.vorschau-video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; display: block; }
.stelle { font-variant-numeric: tabular-nums; font-weight: 600; }
.formular { display: flex; flex-direction: column; gap: 8px; background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; padding: 12px; }
.formular:empty { display: none; }
.formular h3 { margin: 0; }
.formular textarea { font: inherit; }
.status { padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--grund); }
.status.freigegeben { background: #f3ead2; color: #6b520f; }
.status.pruefung { background: #fde9d6; color: #8a4b0b; }
.status.zurueckgezogen { background: #ececec; color: #666; }
.eintragtext { white-space: pre-wrap; }
.maskiert { background: #fff6dd; }
.chat-team { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 12px; }
.gespraeche { display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow-y: auto; }
.gespraech { text-align: left; display: flex; flex-direction: column; gap: 2px; background: var(--karte); border: 1px solid var(--linie); border-radius: 8px; padding: 8px 10px; }
.gespraech.offen { border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent); }
.gespraech.erledigt { opacity: .6; }
.gespraech .zeile1 { display: flex; gap: 8px; align-items: center; }
.gespraech .zeile2 { color: var(--text); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gespraech .zeile3 { color: var(--leise); font-size: 12px; }
.zahl { background: var(--akzent); color: #fff; border-radius: 999px; font-size: 11px; padding: 0 7px; }
.punkt { font-size: 12px; color: var(--leise); }
.punkt.an::before { content: "● "; color: #b8860b; }
.verlauf { background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; padding: 12px; min-height: 200px; }
.verlauf-kopf { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; margin-bottom: 8px; }
.nachrichten { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.nachrichten li { max-width: 80%; padding: 8px 10px; border-radius: 10px; background: var(--grund); }
.nachrichten li.team { align-self: flex-end; background: #f3ead2; }
.nachrichten .wer { display: block; font-size: 12px; color: var(--leise); }
.nachrichten .text { white-space: pre-wrap; overflow-wrap: anywhere; }
.antwort { display: flex; gap: 8px; align-items: flex-end; }
.antwort textarea { flex: 1; font: inherit; }
@media (max-width: 900px) { .editor, .chat-team { grid-template-columns: 1fr; } }
/* Bauabschnitt 4: Anbindungen */
section.teil { margin: 16px 0 24px; }
details.mail { border: 1px solid #ddd; border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
details.mail summary { cursor: pointer; }
pre.mailtext { white-space: pre-wrap; font: inherit; background: #faf8f4; padding: 8px; border-radius: 6px; }
/* Clip hochladen */
.uploads { position: fixed; left: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 40px)); z-index: 5; }
.upload { display: flex; flex-direction: column; gap: 6px; background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.upload progress { width: 100%; height: 10px; accent-color: var(--akzent); }
.upload .upload-text { font-size: 13px; font-variant-numeric: tabular-nums; }
.upload.fertig { border-color: #d9c48a; }
.upload.fehler { border-color: #e6c3c3; }
.upload.fehler .upload-text { color: var(--gefahr); }
.upload button { align-self: flex-start; }
.versteckt { display: none; }
/* Ablauf-Editor: Fragen im Video, Zielgruppen, Stationen, Vorschau, Flussdiagramm */
.ablauf { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 20px; align-items: start; }
.ablauf-rechts { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.ablauf .teil, .diagramm-teil { background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; padding: 14px 16px; margin: 0 0 16px; }
.ablauf .teil h3, .diagramm-teil h3, .hinweise h3 { margin: 0 0 6px; }
.ablauf input.breit { flex: 1; min-width: 180px; }
.ablauf input.ungueltig { border-color: var(--gefahr); background: #fdf3f3; }
.ablauf button.klein { padding: 3px 8px; font-size: 13px; }
.ablauf button.versteckt-knopf { visibility: hidden; }
.ablauf button.verweis { background: none; border: 0; padding: 0; color: var(--akzent); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.ordbar { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ordbar > li { border: 1px solid var(--linie); border-left: 4px solid var(--linie); border-radius: 8px; padding: 6px 10px 8px; background: #fff; }
.ordbar > li.zieht { opacity: .45; }
.ordbar > li.ueber { border-color: var(--akzent); box-shadow: 0 0 0 2px #f3ead2; }
.ordbar .zeile { margin: 4px 0; }
.griff { cursor: grab; color: var(--leise); font-size: 18px; padding: 0 4px; user-select: none; }
.nr { font-variant-numeric: tabular-nums; color: var(--leise); min-width: 1.6em; }
.pfeile { display: inline-flex; gap: 2px; }
.merkmale { margin: 2px 0 4px; padding-left: 18px; }
.merkmale li { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 2px 0; }
.merkmal-neu select, .merkmal-neu input { max-width: 240px; }
.klein-text { font-size: 13px; }
.frage-karte { border: 1px solid var(--linie); border-radius: 8px; padding: 6px 10px; margin: 8px 0; }
/* Klicktor: Wirkung der Frage und Kennzeichnung der Warte-Station (Orange wie Spur 3, kein Grün). */
.wirkung { border-top: 1px dashed var(--linie); margin-top: 6px; padding-top: 2px; }
.wirkung select { max-width: 100%; }
.wirkung[data-wirkung="anhalten"] { border-top-color: #c2621b; }
.ordbar > li.station.warte-station { border-left-color: #c2621b; }
.warte-hinweis { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: #8a4b0b; }
.antworten { margin: 4px 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.antworten li { display: flex; gap: 6px; align-items: center; }
.antworten input { flex: 1; }
.je-tabelle { margin: 4px 0 0; background: none; }
.je-tabelle td { padding: 4px 6px; border: 0; vertical-align: middle; }
.je-tabelle select { width: 100%; max-width: 420px; }
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.spur-0 { --spur: #8a6a1f; } .spur-1 { --spur: #2f5d9e; } .spur-2 { --spur: #6a3fa0; } .spur-3 { --spur: #c2621b; } .spur-4 { --spur: #a12f2f; } .spur-5 { --spur: #b0407a; }
.spur-6 { --spur: #1f3a68; } .spur-7 { --spur: #7a5230; } .spur-8 { --spur: #4a5568; } .spur-9 { --spur: #9a7b2c; } .spur-10 { --spur: #5b4b8a; } .spur-11 { --spur: #8c3b3b; } .spur-sonst { --spur: #8f8a80; }
.chip[class*="spur-"] { background: var(--spur); }
.ordbar > li.zg[class*="spur-"] { border-left-color: var(--spur); }
.status-text { font-size: 13px; padding: 2px 10px; border-radius: 999px; }
.status-text.offen { background: #fde9d6; color: #8a4b0b; }
.status-text.gespeichert { background: var(--grund); color: var(--leise); }
.ok-text { color: #6b520f; }
.vorschau h4 { margin: 10px 0 4px; }
.uebersicht { margin: 4px 0 8px; }
.uebersicht tr.gewaehlt td { background: #faf6ea; }
.clipfolge { margin: 4px 0; padding-left: 22px; }
.clipfolge li { padding: 2px 0; }
.kombi { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; margin: 4px 0; }
.kombi-wahl { display: inline-flex; gap: 4px; align-items: center; }
.kombi-wahl input { padding: 0; }
.hinweise { background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; padding: 12px 16px; }
.hinweise ul { margin: 4px 0 0; padding-left: 18px; font-size: 14px; }
.diagramm { overflow-x: auto; padding: 4px 0; }
.diagramm svg { display: block; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
@media (max-width: 1000px) { .ablauf { grid-template-columns: 1fr; } .ablauf-rechts { position: static; max-height: none; } }