/* Richtung F „Boutique“ (Entwurf design/redesign/gen_f.py, 03.10.2026): UI-Schwarz, Haarlinien mit Lichtkante,
   dünne Schrift, Silber nur für die Hauptaktion, eine Signalfarbe. Liegt über den Stilen von index.html und admin.html,
   nur Darstellung. Die Firmenfarbe (--brand*, per Skript gesetzt) bleibt der Videovorschau vorbehalten. */
:root {
  --kalk:#000000; --papier:#0A0A0A; --putz:#1A1A1A; --fuge:rgba(255,255,255,.14); --linie:rgba(255,255,255,.08);
  --stein:#A1A1A1; --stein-2:#8A8A8A; --graphit:#EDEDED; --messing:#8A8A8A;
  --sig:#3B8BFF; --done:#3B8BFF;
  --ok:#6FA8FF; --ok-bg:rgba(59,139,255,.12); --warn:#E9C46A; --warn-bg:rgba(233,196,106,.10); --bad:#FF7A7A; --bad-bg:rgba(255,122,122,.10);
  --sans:'Geist', system-ui, sans-serif; --serif:'Geist', system-ui, sans-serif; --mono:'Geist Mono', ui-monospace, monospace;
  --hw:300; --card:linear-gradient(180deg,#0E0E0E,#0A0A0A);
  color-scheme:dark;
}
body { background:radial-gradient(1000px 520px at 50% -320px, rgba(255,255,255,.08), rgba(255,255,255,0) 70%) no-repeat, #000; color:var(--graphit); }
::selection { background:rgba(59,139,255,.35); }
a { color:var(--stein); }
a:hover { color:var(--graphit); }

/* Kopfzeile */
header { background:rgba(0,0,0,.72) !important; border-bottom:1px solid var(--linie) !important; backdrop-filter:saturate(1.2) blur(14px); }
header { box-shadow:none; }
body.werkstatt header { box-shadow:inset 0 -1px 0 rgba(233,196,106,.5); }
.wordmark, header h1 { color:#EDEDED !important; font-weight:500 !important; font-size:17px !important; letter-spacing:-.01em !important; display:flex; align-items:center; gap:11px; }
header h1::before { content:""; flex:none; width:32px; height:32px; border-radius:8px; background:url("/static/brand/app-icon-64.png") no-repeat center / contain; }
header h1 { display:flex; align-items:center; gap:11px; }

/* Hauptfläche mindestens eine Bildschirmhöhe: die Fußzeile mit Impressum usw. liegt immer unterhalb des ersten Blicks */
#overview { min-height:calc(100vh - 64px); box-sizing:border-box; }
body > main { min-height:calc(100vh - 64px); align-content:start; }
#crumb + main { min-height:calc(100vh - 64px - 38px); }
body.ov-new-on > main { align-content:start; }

/* Anmeldung: Passwort vergessen als eigener Modus */
#login [hidden] { display:none !important; }
#loginResetBtn { width:100%; height:46px; }
.login-icon { display:block; width:64px; height:64px; margin:0 0 22px; filter:drop-shadow(0 12px 24px rgba(0,0,0,.6)); }

/* Karten mit Lichtkante */
.panel, .tile, .bsec { position:relative; background:var(--card) !important; border:1px solid rgba(255,255,255,.09) !important; }
.panel::before, .tile::before, .bsec::before { content:""; position:absolute; top:-1px; left:18%; right:18%; height:1px; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0)); pointer-events:none; }

/* Typografie: dünn wie im Entwurf */
#storyboard > h2, #newForm h2, #correct h2, .modal h2, .drawer-head h2, .prog-title, .prog-pct, main > h2, h2 { font-family:var(--sans); font-weight:var(--hw); letter-spacing:-.02em; color:#EDEDED; }
#storyboard > h2 { font-size:30px; }
h3 { color:#EDEDED; }
.muted, .scene .cam, .scene .q, .kv > span:nth-child(odd) { color:var(--stein); }
.mono, th { font-family:var(--mono); letter-spacing:.06em; }

/* Bedienelemente */
button, .retention a.button { background:#0A0A0A !important; color:#EDEDED !important; border:1px solid rgba(255,255,255,.14) !important; border-radius:9px; }
button:hover, .retention a.button:hover { background:#141414 !important; border-color:rgba(255,255,255,.3) !important; }
button.primary, .drawer #saveBrand, #login button[type=submit] { color:#0A0A0A !important; border:0 !important; background:linear-gradient(180deg,#FAFAFA 0%,#E4E4E4 100%) !important;
  box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.12), 0 0 0 1px rgba(255,255,255,.12), 0 8px 24px -10px rgba(255,255,255,.18) !important; }
button.primary:hover, .drawer #saveBrand:hover, #login button[type=submit]:hover { background:linear-gradient(180deg,#FFFFFF 0%,#EDEDED 100%) !important; }
button.danger { color:var(--bad) !important; }
.forgot, .drawer-head button.forgot { background:none !important; border:0 !important; color:var(--stein) !important; }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, .frame:focus-visible { outline:2px solid var(--sig); outline-offset:2px; }
.frame-x { background:rgba(0,0,0,.7) !important; border:1px solid rgba(255,255,255,.2) !important; height:22px !important; }

input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], textarea, select, header select, label.muted select, #login input, input[type=color] {
  background-color:#0A0A0A !important; color:#EDEDED !important; border:1px solid rgba(255,255,255,.12) !important; }
header select { background:#0A0A0A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23A1A1A1' stroke-width='1.6'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E") no-repeat right 14px center !important; }
input:focus, textarea:focus, select:focus { outline:none !important; border-color:var(--sig) !important; box-shadow:0 0 0 3px rgba(59,139,255,.22) !important; }
input[readonly] { color:var(--stein) !important; }
::placeholder { color:#6F6F6F; }
input[type=file] { color:var(--stein); }
input[type=file]::file-selector-button { background:#141414; color:#EDEDED; border:1px solid rgba(255,255,255,.14); }
details summary::before { filter:invert(1) brightness(1.4); }

/* Status: Punkt mit Lichthof */
.status { background:transparent !important; padding:3px 0 !important; color:#C8C8C8 !important; }
.status::before { width:7px !important; height:7px !important; }
.st-ok::before { background:var(--done) !important; box-shadow:0 0 0 3px rgba(59,139,255,.18), 0 0 12px rgba(59,139,255,.7); }
.st-generiert::before { background:var(--sig) !important; box-shadow:0 0 0 3px rgba(59,139,255,.18), 0 0 12px var(--sig); }
.st-pruefen::before { background:var(--warn) !important; }
.st-fehler::before { background:var(--bad) !important; }
.st-geplant::before { background:#5A5A5A !important; }
.status .dot { border-color:rgba(255,255,255,.2); border-top-color:var(--sig); }
body:not(.werkstatt) #statusLine { color:#C8C8C8; }
body:not(.werkstatt) #statusLine:not(:empty)::before { background:#EDEDED; box-shadow:0 0 0 3px rgba(255,255,255,.1); }
body:not(.werkstatt) #statusLine.laeuft::before { background:var(--sig); box-shadow:0 0 0 3px rgba(59,139,255,.18), 0 0 12px var(--sig); }
.hdr-tools .toggle::before { background-color:#2A2A2A; box-shadow:inset 0 0 0 2px #2A2A2A; }
.hdr-tools .toggle[aria-pressed="true"]::before { background-color:var(--sig); box-shadow:inset 0 0 0 2px var(--sig); }
.pill { background:rgba(255,255,255,.08); color:#C8C8C8; }

/* Szenenliste */
.scene { border-top-color:var(--linie); }
.scene:hover { background:rgba(255,255,255,.04); }
.scene.sel { background:rgba(255,255,255,.07) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.type { background:#141414; color:#A1A1A1; border:1px solid rgba(255,255,255,.08); font-family:var(--mono); font-weight:500; }
.scene.sel .type { background:#EDEDED; color:#0A0A0A; }
.scene.is-done .type { background:rgba(59,139,255,.14); color:#8DB8FF; border-color:rgba(59,139,255,.35); }
.scene.is-run .type { background:#0A0A0A; box-shadow:inset 0 0 0 2px rgba(255,255,255,.12); }
.scene.is-run .type::after { border-top-color:var(--sig); }
.slist .scene.is-done + .scene::after { background:rgba(59,139,255,.35); }
.slist { scrollbar-color:#2A2A2A transparent; }
@keyframes ov-flash { 0% { background:rgba(59,139,255,.14); } 100% { background:transparent; } }

/* Fortschritt */
.prog { background:rgba(10,10,10,.92) !important; border-bottom:1px solid var(--linie) !important; box-shadow:0 10px 18px -14px rgba(0,0,0,.9) !important; }
.prog-bar { height:3px; background:rgba(255,255,255,.08); }
.prog-fill { background:var(--sig) !important; box-shadow:0 0 10px var(--sig); }
.prog-glow { background:#fff; box-shadow:0 0 0 3px var(--sig), 0 0 14px 4px rgba(59,139,255,.5) !important; }
.prog-glow::after { border-color:var(--sig); }
.prog-pct small { color:var(--stein); }

/* Player, Filmstreifen */
video { background:#050505; }
#player .empty { background:radial-gradient(90% 80% at 50% 10%, #171717, #050505 75%); border:1px solid rgba(255,255,255,.06); }
.strip { background-color:#050505; border:1px solid rgba(255,255,255,.06); }
.frame { background:#141414; }
.frame.sel .lbl { box-shadow:inset 0 -2px 0 #EDEDED; }
.frame.busy .hf::before { background:var(--sig); }
.drop-mark { background:#EDEDED; }

/* Seitenpanel, Dialoge */
.scrim { background:rgba(0,0,0,.6); }
.drawer { background:#050505; border-left:1px solid var(--linie); box-shadow:-24px 0 60px rgba(0,0,0,.8); }
.drawer-head { background:#0A0A0A !important; border-bottom:1px solid var(--linie); }
.drawer #brandBox .row { background:rgba(5,5,5,.92) !important; border-top:1px solid var(--linie) !important; }
.ctile { border-color:var(--linie); color:#EDEDED !important; }
.ctile:hover { border-color:rgba(255,255,255,.3); }
.modal { background:rgba(0,0,0,.7); }
.modal .box { background:#0A0A0A !important; border:1px solid rgba(255,255,255,.1); box-shadow:0 24px 60px rgba(0,0,0,.8); }
.pay-banner { background:rgba(233,196,106,.1) !important; color:var(--warn) !important; border-bottom:1px solid rgba(233,196,106,.25); }
#storyboard > div[style*="FBEEDB"] { background:var(--warn-bg) !important; color:var(--warn) !important; }
.log { color:var(--stein); }

/* Anmeldung: Exposé-Rahmen links, Einleitung und Formular rechts (Formulare aus auth.js landen ebenfalls in Spalte 2) */
#login { background:radial-gradient(1000px 520px at 50% -320px, rgba(255,255,255,.09), rgba(255,255,255,0) 70%) no-repeat, #000 !important;
  display:grid !important; grid-template-columns:460px minmax(0,420px); grid-template-rows:auto auto; column-gap:72px; row-gap:30px;
  align-content:center; justify-content:center; overflow:auto; padding:40px 24px 70px !important; }
#login[hidden] { display:none !important; }
#login > form { grid-column:2; grid-row:2; max-width:420px !important; padding:26px !important; gap:14px !important; align-self:start; }
#login > form h2 { font-size:15px !important; font-weight:500 !important; letter-spacing:0 !important; color:#A1A1A1 !important; margin:0 0 2px !important; line-height:1.4 !important; }
#login > form#pwForm h2, #login > form#legalForm h2 { font-size:24px !important; font-weight:var(--hw) !important; color:#EDEDED !important; letter-spacing:-.02em !important; }
#login input { height:46px !important; }
.login-intro { grid-column:2; grid-row:1; align-self:end; }
.login-kicker { margin:0 0 16px; font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#8A8A8A; }
.login-title { margin:0; font-size:54px; line-height:1.06; font-weight:var(--hw); letter-spacing:-.03em; color:#EDEDED; }
.login-sub { margin:16px 0 0; font-size:17px; line-height:1.55; color:#8A8A8A; }
.login-sub b { font-weight:400; color:#EDEDED; }
.login-hero { grid-column:1; grid-row:1 / span 2; align-self:center; height:470px; padding:26px !important; display:flex; flex-direction:column; justify-content:space-between; }
.login-hero::after { content:""; position:absolute; top:-1px; left:25%; right:25%; height:60px; background:radial-gradient(50% 100% at 50% 0, rgba(255,255,255,.07), rgba(255,255,255,0)); pointer-events:none; }
.lh-stack { position:relative; height:300px; }
.lh-frame { position:absolute; overflow:hidden; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:radial-gradient(120% 90% at 30% 0, #1C1C1C, #0D0D0D 70%);
  box-shadow:0 24px 48px -18px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06); }
.lh-frame svg { position:absolute; inset:6% 4% 0; width:92%; height:94%; stroke:rgba(255,255,255,.3); stroke-width:1; }
.lh-x { left:120px; top:0; width:290px; height:190px; z-index:1; } .lh-x svg { stroke:rgba(255,255,255,.16); }
.lh-h { left:56px; top:70px; width:270px; height:152px; z-index:2; }
.lh-v { left:0; top:128px; width:104px; height:172px; z-index:3; }
.lh-dots { position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.22) 1px, transparent 1.3px); background-size:6px 6px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 75%); mask-image:linear-gradient(180deg,#000,transparent 75%); }
.lh-tag, .ov-tag { position:absolute; top:0; right:0; z-index:2; padding:5px 9px; border-left:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1);
  border-bottom-left-radius:8px; background:rgba(10,10,10,.75); font:500 10.5px var(--mono); letter-spacing:.1em; color:#A1A1A1; }
.lh-cap { display:flex; flex-direction:column; gap:6px; }
.lh-cap strong { font-size:16px; font-weight:500; color:#EDEDED; }
.lh-cap span { font-size:14px; color:#A1A1A1; }
@media (max-width: 1060px) {
  #login { grid-template-columns:minmax(0,420px); } .login-hero { display:none !important; }
  .login-intro, #login > form { grid-column:1; } .login-title { font-size:40px; }
}

/* Objekt-Übersicht (Kacheln statt Projekt-Auswahl) */
header #projectSel { display:none; }
header .wordmark { cursor:pointer; }
body.ov-on > main, body.ov-on #crumb { display:none !important; }
body:not(.ov-on) #overview { display:none; }
#overview { max-width:1240px; margin:0 auto; padding:44px 28px 20px; }
.ov-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:34px; }
.ov-title { margin:0 0 12px; font-size:44px; line-height:1.05; font-weight:var(--hw); letter-spacing:-.03em; color:#EDEDED; }
.ov-sum { margin:0; font-size:16px; color:#8A8A8A; } .ov-sum b { font-weight:400; color:#EDEDED; }
.seg { display:inline-flex; gap:2px; padding:3px; border-radius:9px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.06); }
.seg button { height:32px !important; padding:0 14px !important; border:0 !important; border-radius:7px !important; background:transparent !important; color:#A1A1A1 !important; font-size:14px; }
.seg button:hover { color:#EDEDED !important; background:transparent !important; }
.seg button.on { color:#fff !important; background:rgba(255,255,255,.12) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.ov-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:20px; }
.ov-card { position:relative; display:flex; flex-direction:column; gap:14px; padding:10px; border-radius:14px; background:var(--card); border:1px solid rgba(255,255,255,.09);
  color:inherit; text-decoration:none; cursor:pointer; transition:border-color .18s, transform .18s; }
.ov-card::before { content:""; position:absolute; top:-1px; left:18%; right:18%; height:1px; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0)); }
a.ov-card:hover { border-color:rgba(255,255,255,.22); color:inherit; }
a.ov-card:focus-visible { outline:2px solid var(--sig); outline-offset:2px; }
.ov-card.gone { opacity:.45; cursor:default; }
.ov-thumb { position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.07); background:radial-gradient(120% 90% at 30% 0, #1C1C1C, #0D0D0D 70%); }
.ov-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.92; transition:opacity .25s, transform .6s var(--ease); }
a.ov-card:hover .ov-thumb img { opacity:1; transform:scale(1.025); }
.ov-thumb svg { position:absolute; inset:6% 4% 0; width:92%; height:94%; stroke:rgba(255,255,255,.26); stroke-width:1; }
.ov-body { padding:0 8px 8px; display:flex; flex-direction:column; gap:10px; }
.ov-name { margin:0; font-size:16.5px; font-weight:500; letter-spacing:-.01em; color:#EDEDED; }
.ov-meta { font-size:13.5px; color:#8A8A8A; }
.ov-line { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:13px; color:#8A8A8A; }
.st { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#C8C8C8; white-space:nowrap; }
.dot { width:7px; height:7px; border-radius:50%; flex:none; }
.dot-done { background:var(--done); box-shadow:0 0 0 3px rgba(59,139,255,.18), 0 0 12px rgba(59,139,255,.7); }
.dot-run { background:var(--sig); box-shadow:0 0 0 3px rgba(59,139,255,.18), 0 0 12px var(--sig); animation:ov-pulse 1.8s ease-in-out infinite; }
.dot-ready { background:#EDEDED; box-shadow:0 0 0 3px rgba(255,255,255,.1); }
.dot-plan { background:#5A5A5A; }
.dot-err { background:var(--warn); }
.ov-bar { position:relative; height:3px; border-radius:2px; background:rgba(255,255,255,.08); overflow:hidden; }
.ov-bar > span { position:absolute; inset:0 auto 0 0; border-radius:2px; background:var(--sig); box-shadow:0 0 10px var(--sig); }
.ov-bar > span::after { content:""; position:absolute; top:0; bottom:0; width:40px; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.8), rgba(255,255,255,0)); animation:ov-sheen 2.4s linear infinite; }
@keyframes ov-sheen { from { left:-40px; } to { left:100%; } }
.ov-new { min-height:290px; }
.ov-drop { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:24px; text-align:center; border-radius:10px;
  border:1px dashed rgba(255,255,255,.16); background:linear-gradient(180deg, #171717, #111); transition:border-color .18s, background .18s; }
.ov-new.drag .ov-drop, .ov-new:hover .ov-drop { border-color:rgba(255,255,255,.4); }
.ov-new.drag .ov-drop { background:linear-gradient(180deg, #1D1D1D, #141414); }
.ov-ic { width:48px; height:48px; border-radius:12px; display:grid; place-items:center; color:#EDEDED; background:linear-gradient(180deg, #262626, #141414); border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.1); }
.ov-pseudo { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 18px; border-radius:9px; font-size:14.5px; font-weight:500; color:#0A0A0A;
  background:linear-gradient(180deg,#FAFAFA 0%,#E4E4E4 100%); box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.12), 0 0 0 1px rgba(255,255,255,.12); }
.ov-empty { grid-column:1 / -1; padding:40px; text-align:center; color:#8A8A8A; }
#crumb { max-width:1680px; margin:0 auto; padding:18px 28px 0; display:flex; align-items:center; gap:8px; font-size:13.5px; color:#8A8A8A; }
#crumb a { color:#8A8A8A; text-decoration:none; } #crumb a:hover { color:#EDEDED; }
#crumb span:last-child { color:#EDEDED; }
#crumb + main { padding-top:16px; }
body.ov-new-on > main { grid-template-columns:minmax(0,620px); justify-content:center; }
body.ov-new-on #right { display:none; }
@media (max-width: 760px) {
  header { height:auto !important; flex-wrap:wrap; padding:12px 16px !important; gap:10px !important; }
  header .hdr-tools { flex-wrap:wrap; margin-left:0; gap:8px; }
  header .who { max-width:100%; flex-basis:100%; white-space:normal; }
  header .hdr-tools { width:100%; }
  main { padding:16px !important; } #crumb { padding:14px 16px 0; }
}
@media (max-width: 700px) { #overview { padding:28px 16px; } .ov-title { font-size:34px; } .ov-grid { grid-template-columns:1fr; } }

/* Admin-Bereich */
nav a { color:var(--stein); }
nav a:hover { background:rgba(255,255,255,.06) !important; color:#EDEDED !important; }
nav a.on { background:rgba(255,255,255,.12) !important; color:#fff !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
header h1 span { color:var(--stein) !important; }
th { background:#0A0A0A !important; color:#8A8A8A; font-weight:500; font-size:11px; text-transform:uppercase; }
tr.click:hover td { background:rgba(255,255,255,.04) !important; }
tr.sub td { background:#070707 !important; }
.tile b { font-weight:var(--hw); font-size:30px; letter-spacing:-.02em; }
.msg.ok { color:var(--ok); }
.legal-foot a, .legal-foot { color:var(--stein-2); }