/* Head of Creative — Graphit + Gold, mobil zuerst, ohne CDNs */
:root {
  color-scheme: dark;
  --bg: #0A0B0D;
  --panel: #121418;
  --panel-2: #1B1E24;
  --line: #262A31;
  --line-2: #3A3F48;
  --text: #ECE7DC;
  --muted: #A39E93;
  --faint: #716D66;
  --gold: #D7B46A;
  --gold-dim: #8F7A4B;
  --gold-soft: rgba(215, 180, 106, 0.10);
  --gold-tint: #2A2417;
  --ok: #8FBF8A;
  --bad: #D98A7A;
  --display: "Bodoni 72", Didot, Georgia, serif;
  --sans: "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px;
  line-height: 1.55; padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
  env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: .01em; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; color: var(--gold); }
h3 { font-size: 1rem; margin: 1rem 0 .5rem; }
code { color: var(--gold); background: var(--gold-soft); padding: 1px 5px; border-radius: 4px; }
img { max-width: 100%; }

/* Kopf + Tabs */
.kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg) 100%);
}
.marke { display: flex; align-items: center; gap: 10px; color: var(--text); }
.marke:hover { text-decoration: none; }
.marke span { display: flex; flex-direction: column; line-height: 1.15; }
.marke b { font-family: var(--display); font-size: 1.15rem; color: var(--gold); }
.marke small { color: var(--muted); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--gold-dim); }
.avatar.gross { width: 96px; height: 96px; box-shadow: 0 0 0 4px var(--gold-soft); }
.tabs, .subtabs {
  display: flex; gap: 4px; overflow-x: auto; padding: 0 12px; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar, .subtabs::-webkit-scrollbar { display: none; }
.tabs { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 2; }
.tabs a, .subtabs a {
  white-space: nowrap; padding: 12px 12px; color: var(--muted); border-bottom: 2px solid transparent;
  min-height: 44px; display: inline-flex; align-items: center;
}
.tabs a.aktiv { color: var(--gold); border-bottom-color: var(--gold); }
.subtabs { padding-top: 8px; }
.subtabs a { padding: 6px 12px; min-height: 36px; border: 1px solid var(--line); border-radius: 999px; font-size: .9rem; }
.subtabs a.aktiv { color: var(--bg); background: var(--gold); border-color: var(--gold); }
.tabs a:hover, .subtabs a:hover { text-decoration: none; color: var(--text); }

.inhalt { max-width: 960px; margin: 0 auto; padding: 16px; }
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 14px;
}
.panel.warn { border-color: var(--gold-dim); background: var(--gold-tint); }
.zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.zeile:last-child { border-bottom: 0; }
.zeile p { margin: 2px 0 0; }
.eintrag { padding: 12px 0; border-bottom: 1px solid var(--line); }
.eintrag:last-child { border-bottom: 0; }
.eintrag p { margin: 4px 0; }
.auszug { color: var(--muted); }
.klein { color: var(--muted); font-size: .85rem; }
.leer { color: var(--faint); font-style: italic; }
.frage { color: var(--gold); }
.gut { color: var(--ok); }
.schlecht { color: var(--bad); }
.chip {
  display: inline-block; font-size: .75rem; padding: 1px 8px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--muted); margin-right: 4px;
}
.chip.s-aktiv, .chip.s-freigegeben { color: var(--ok); border-color: #3E5A3B; }
.chip.s-vorschlag, .chip.s-offen, .chip.s-entwurf { color: var(--gold); border-color: var(--gold-dim); }
.chip.s-verworfen, .chip.s-ersetzt { color: var(--faint); }
.gewaehlt { text-decoration: underline; }

/* Hinweise */
.hinweis { padding: 10px 14px; border-radius: 10px; margin: 0 0 14px; }
.hinweis.ok { background: var(--gold-tint); border: 1px solid var(--gold-dim); color: var(--gold); }
.hinweis.fehler { background: #2A1A17; border: 1px solid #6B3A31; color: var(--bad); }

/* Formulare */
.formular { display: flex; flex-direction: column; gap: 12px; margin: 10px 0; }
.formular label, .feld { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: .9rem; }
.formular label.haken, label.haken { flex-direction: row; align-items: center; gap: 10px; color: var(--text); min-height: 36px; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=time], select, textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--text); background: var(--panel-2);
  border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; min-height: 44px;
}
input[type=file] { color: var(--muted); font-size: 15px; }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--gold); }
textarea { resize: vertical; font-family: var(--sans); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold-dim); border-color: var(--gold-dim); }
button, .knopf {
  font: inherit; font-size: .95rem; cursor: pointer; border-radius: 10px; padding: 10px 16px; min-height: 44px;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line-2); display: inline-flex;
  align-items: center; justify-content: center;
}
button:hover, .knopf:hover { border-color: var(--gold-dim); text-decoration: none; }
button.gold { background: var(--gold); color: #17140D; border-color: var(--gold); font-weight: 600; }
button.gold:hover { background: #E2C27D; }
button.leise { background: transparent; color: var(--muted); }
.knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; }
.filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filter > * { flex: 1 1 150px; }
.filter button { flex: 0 0 auto; }
.vier { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.abmelden button { min-height: 36px; padding: 6px 12px; }

/* Karten, Doktrin, Ergebnisse */
details.karte { border-top: 1px solid var(--line); padding: 10px 0; }
details.karte:first-child { border-top: 0; }
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details.karte summary::before { content: "›"; color: var(--gold); margin-right: 8px; }
details.karte[open] summary::before { content: "⌄"; }
blockquote { margin: 8px 0; padding-left: 12px; border-left: 2px solid var(--gold-dim); color: var(--muted); }
.gruppe { padding: 8px 0 14px; border-bottom: 1px solid var(--line); }
.gruppe:last-child { border-bottom: 0; }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
pre { font-family: var(--mono); font-size: .82rem; white-space: pre-wrap; word-break: break-word; }
pre.diff { white-space: pre; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
pre.diff .plus { color: var(--ok); }
pre.diff .minus { color: var(--bad); }
pre.diff .meta { color: var(--faint); }
pre.zahlen, pre.volltext { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.ergebnis-kopf { font-family: var(--display); color: var(--gold); font-size: 1.15rem; margin-bottom: 8px; }
.ergebnis h1, .ergebnis h2, .ergebnis h3 { color: var(--gold); }
.ergebnis table, table { border-collapse: collapse; width: 100%; }
td, th { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; font-size: .9rem; }
th { color: var(--muted); font-weight: 500; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 10px; }
.kachel { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.kachel span { display: block; color: var(--muted); font-size: .8rem; }
.kachel b { font-family: var(--display); font-size: 1.5rem; color: var(--gold); }
.kachel small { color: var(--faint); margin-left: 4px; }

/* Anmeldung */
body.anmelden { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.karte-login {
  width: 100%; max-width: 380px; text-align: center; background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 28px 22px; box-shadow: 0 0 0 1px var(--gold-soft), 0 20px 60px rgba(0,0,0,.45);
}
.karte-login h1 { margin: 12px 0 0; color: var(--gold); font-size: 1.8rem; }
.karte-login .unter { margin: 0 0 16px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; font-size: .75rem; }
.karte-login .formular { text-align: left; }
.schluessel { font-family: var(--mono); color: var(--gold); word-break: break-all; font-size: 1rem; }

@media (min-width: 720px) {
  .inhalt { padding: 24px; }
  .tabs, .subtabs { padding-left: 24px; padding-right: 24px; }
}

/* Second Brain */
.gold-text { color: var(--gold); font-family: var(--display); font-size: 1.05rem; }
details.neu-notiz summary::before { content: "+ "; color: var(--gold); }
.notiz-zeile {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line);
  color: var(--text);
}
.notiz-zeile:last-child { border-bottom: 0; }
.notiz-zeile:hover { text-decoration: none; }
.notiz-zeile:hover b { color: var(--gold); }
.notiz-kopf { display: flex; flex-wrap: wrap; gap: 4px; }
.chip.prio-stern, .chip.s-neu, .chip.s-in_pruefung { color: var(--gold); border-color: var(--gold-dim); }
.chip.s-umgesetzt { color: var(--ok); border-color: #3E5A3B; }
.chip.s-geparkt { color: var(--faint); }
.original { border-color: var(--gold-dim); }
.original pre.volltext { font-family: var(--sans); font-size: .95rem; }
.nachtrag { margin-top: 10px; }
.anhang-bild { max-height: 320px; border-radius: 10px; border: 1px solid var(--line); }
h2.inline { display: inline; }
.seiten { align-items: center; justify-content: center; }
.prio-liste { list-style: none; margin: 0; padding: 0; }
.prio { border-top: 1px solid var(--line); padding: 10px 0; }
.prio:first-child { border-top: 0; }
.prio.zieht { opacity: .45; }
.prio-kopf { display: flex; align-items: center; gap: 10px; }
.prio .griff { color: var(--faint); cursor: grab; user-select: none; letter-spacing: -2px; }
.prio .rang {
  font-family: var(--display); color: var(--gold); font-size: 1.3rem; min-width: 1.6em; text-align: center;
}
.prio .knoepfe button { min-height: 36px; padding: 6px 12px; }
.prio-bearbeiten { margin-top: 6px; }
/* Second Brain: Eingang (ganze Nachricht) + Einordnung (§12.8) */
.warte-banner { background: var(--gold-tint); border: 1px solid var(--gold-dim); color: var(--gold); }
.warte-banner a { color: var(--gold); text-decoration: underline; }
pre.eingang-text { white-space: pre-wrap; word-break: break-word; }
.auszug-mark { color: var(--gold); background: var(--gold-tint); border-bottom: 1px solid var(--gold-dim); text-decoration: none; }
dl.felder { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
dl.felder dt { color: var(--faint); }
dl.felder dd { margin: 0; }
.einordnung h3 { font-size: 0.95rem; margin: 18px 0 8px; color: var(--gold); }
.einordnung tr.abweichung td { color: var(--bad); }
.schalter { display: flex; gap: 8px; align-items: center; }
/* Spickzettel (§13) */
.sz-kopf .kachel b.sz-stand { font-size: 1rem; font-family: var(--sans); }
h3.sz-produkt { margin: 16px 0 4px; color: var(--gold); font-size: .95rem; }
h3.sz-produkt:first-of-type { margin-top: 4px; }
.sz-quelle a + a { margin-left: 8px; }
.sz-quelle.sz-pausiert b { color: var(--faint); }
.sz-quelle .knoepfe button { min-height: 36px; padding: 6px 12px; }
.sz-anleitung { color: var(--gold); }
.chip.s-ok { color: var(--ok); border-color: #3E5A3B; }
.chip.s-nicht_freigegeben, .chip.s-fehler { color: var(--bad); border-color: #6B3A31; }
.chip.s-entfernt, .chip.s-gefiltert { color: var(--faint); }
.sz-ansichten { padding: 0 0 12px; display: flex; gap: 8px; flex-wrap: wrap; }
pre.sz-rohtext { font-family: var(--mono); max-height: 70vh; overflow: auto; }
/* Phase 2 (§15): Launches, Ideen-Swipe, Markt, Einstellungen › Routinen */
.a-gruen { color: var(--ok); }
.a-gelb { color: var(--gold); }
.a-rot { color: var(--bad); }
.a-grau { color: var(--faint); }
td.a-gruen, td.a-gelb, td.a-rot { font-weight: 600; }
.launch-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.launch-kopf .klein { margin: 4px 0 0; }
.plattform-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
table.kennzahlen td, table.kennzahlen th { white-space: nowrap; font-variant-numeric: tabular-nums; }
td.adname { white-space: normal; min-width: 180px; max-width: 320px; }
th.pf-facebook, th.pf-instagram { color: var(--gold-dim); }
td.pf-facebook, th.pf-facebook { border-left: 1px solid var(--line); }
.empf p { margin: 2px 0; }
.empf-form { align-items: flex-start; }
.empf-form form.inline { display: inline-flex; gap: .5rem; margin: 0; }
details.weiter form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
details.weiter { display: inline-block; }
details.weiter[open] { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 6px; }
details.weiter summary { list-style: none; }
.fb-ig { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pf-spalte { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; min-width: 0; }
.pf-spalte h3 { margin-top: 0; color: var(--gold); }
.pf-spalte h3.klein { margin: 10px 0 4px; color: var(--muted); }
.pf-spalte .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-spalte .kachel b { font-size: 1.2rem; }
ul.liste { margin: 4px 0; padding-left: 18px; }
ul.liste li { margin: 2px 0; }
.marke.aus b { color: var(--faint); }
.marke .filter { margin: 6px 0 0; }
.band { display: flex; align-items: center; gap: 8px; }
.band span { color: var(--faint); }
.zelle { display: flex; flex-direction: column; gap: 4px; }
.zelle.breit { grid-column: 1 / -1; }
.feld-hinweis { color: var(--faint); font-size: .78rem; }
.kandidat.s-ignoriert b { color: var(--faint); }
@media (max-width: 640px) {
  .fb-ig { grid-template-columns: 1fr; }
}