:root{
  --bg:#0b0708; --panel:#140d0e; --panel-2:#1b1314;
  --ink:#f6f1f1; --muted:#b29a9a; --faint:#7d6868;
  --line:rgba(255,255,255,.09);
  --accent:#b23a36; --accent-2:#df6f60; --accent-soft:rgba(178,58,54,.16);
  --ok:#5bbf83; --warn:#e0a24a; --idle:#8b8b9a;
  --radius:16px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:radial-gradient(120% 80% at 50% -10%, #1c1011 0%, var(--bg) 55%) fixed;
  color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;
  padding:14px clamp(16px,4vw,40px);border-bottom:1px solid var(--line);
  background:rgba(11,7,8,.72);backdrop-filter:blur(14px)}
.top img{height:34px;width:auto}
.top .sp{flex:1}
.top .who{color:var(--muted);font-size:13px}
.top .who b{color:var(--ink);font-weight:600}
.badge-role{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2);
  border:1px solid var(--accent-soft);padding:3px 8px;border-radius:20px;margin-left:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font:inherit;font-weight:600;font-size:14px;border:0;border-radius:11px;padding:10px 16px;
  color:#fff;background:linear-gradient(180deg,var(--accent-2),var(--accent));
  box-shadow:0 12px 30px -14px rgba(178,58,54,.85);transition:transform .15s,filter .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.05)}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:9px}
.wrap{max-width:1080px;margin:0 auto;padding:clamp(20px,4vw,40px) clamp(16px,4vw,40px) 80px}
h1.page{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.01em;margin-bottom:6px}
.sub{color:var(--muted);margin-bottom:26px;font-size:14px}
.section-title{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:34px 0 14px;font-weight:700}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(16px,2.4vw,24px);margin-bottom:18px;box-shadow:0 24px 60px -40px rgba(0,0,0,.8)}
.card.pad0{padding:0;overflow:hidden}
.proj-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.proj-head h2{font-size:19px;font-weight:700}
.proj-head .desc{color:var(--muted);font-size:14px;margin-top:4px;max-width:62ch}
.spacer{flex:1}
.badge{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:20px;white-space:nowrap}
.badge.in_arbeit{background:rgba(139,139,154,.16);color:#c7c7d6;border:1px solid rgba(139,139,154,.3)}
.badge.zur_freigabe{background:rgba(224,162,74,.14);color:var(--warn);border:1px solid rgba(224,162,74,.32)}
.badge.freigegeben{background:rgba(91,191,131,.14);color:var(--ok);border:1px solid rgba(91,191,131,.32)}
.preview{position:relative;margin-top:16px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#000}
.preview iframe{width:100%;height:420px;border:0;display:block;background:#000}
.preview-ph{height:300px;display:grid;place-items:center;text-align:center;background:radial-gradient(120% 120% at 50% 0%, #1a1011, #0b0708);cursor:default}
.preview-ph .ph-ico{width:54px;height:54px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;font-size:18px;color:#fff;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));box-shadow:0 12px 30px -12px rgba(178,58,54,.9)}
.preview-ph .ph-hint{margin-top:10px;color:var(--faint);font-size:12.5px}
.preview .bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:var(--panel-2);border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center}
.fb-list{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.fb{background:var(--panel-2);border:1px solid var(--line);border-radius:11px;padding:11px 14px;font-size:14px}
.fb .meta{font-size:11.5px;color:var(--faint);margin-bottom:3px;display:flex;gap:8px;align-items:center}
.fb .tag{font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:12px}
.fb .tag.freigabe{background:rgba(91,191,131,.16);color:var(--ok)}
.fb .tag.kommentar{background:rgba(255,255,255,.06);color:var(--muted)}
.fb .tag.aenderung{background:rgba(224,162,74,.16);color:var(--warn)}
.field{margin-bottom:13px}
.field label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
input,select,textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;padding:11px 13px;color:var(--ink);font:inherit;font-size:14.5px}
textarea{resize:vertical;min-height:74px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:rgba(178,58,54,.06)}
select option{background:#1b1314}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.row-form{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:700}
td .mut{color:var(--muted);font-size:12.5px}
.empty{color:var(--faint);font-size:14px;padding:18px 0}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--panel-2);border:1px solid var(--line);color:var(--ink);padding:12px 18px;border-radius:12px;
  font-size:14px;box-shadow:0 20px 50px -20px rgba(0,0,0,.9);opacity:0;transition:.3s;pointer-events:none;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{border-color:rgba(233,138,126,.5)}
@media (max-width:640px){.grid2{grid-template-columns:1fr}.preview iframe{height:300px}}

/* ---- Marken-Cockpit ---- */
.navlinks{display:flex;gap:4px;margin-left:6px}
.navlinks a{font-size:13px;font-weight:600;color:var(--muted);padding:7px 12px;border-radius:9px;text-decoration:none}
.navlinks a:hover{color:var(--ink);background:rgba(255,255,255,.05);text-decoration:none}
.navlinks a.active{color:#fff;background:var(--accent-soft)}
.brand-hero{padding:6px 0}
.brand-eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent-2);margin-bottom:8px}
.brand-name{font-size:clamp(26px,4vw,40px);font-weight:800;letter-spacing:-.01em}
.brand-tag{margin-top:8px;color:var(--muted);font-size:clamp(15px,2vw,20px);font-style:italic}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.swatch{display:flex;flex-direction:column;gap:8px;align-items:flex-start;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;font:inherit;text-align:left;transition:border-color .2s}
.swatch:hover{border-color:var(--accent)}
.swatch .chip{width:100%;height:54px;border-radius:8px;border:1px solid rgba(255,255,255,.12)}
.swatch .sw-name{color:var(--ink);font-size:13.5px;font-weight:600}
.swatch .sw-hex{color:var(--muted);font-size:12px;letter-spacing:.04em}
.fonts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.font-card{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.font-card .ff-name{font-size:20px;font-weight:700}
.font-card .ff-role{color:var(--muted);font-size:12.5px;margin-top:2px}
.asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.asset-card{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px}
.asset-prev{height:120px;border-radius:8px;background:repeating-conic-gradient(#1c1416 0% 25%,#161012 0% 50%) 50% / 22px 22px;display:grid;place-items:center;overflow:hidden}
.asset-prev img{max-width:100%;max-height:100%;object-fit:contain}
.asset-prev.doc{background:var(--panel);color:var(--faint);font-size:12px;letter-spacing:.1em}
.asset-title{font-size:14px;font-weight:600}
.asset-note{color:var(--muted);font-size:12.5px;margin-top:2px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.gphoto{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:#000}
.gphoto img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.gphoto:hover img{transform:scale(1.05)}
.kv-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.kv-row input{flex:1}
.kv-row input[type=color]{flex:0 0 44px;max-width:44px;padding:2px;height:40px}

/* ---- Mobil-Tauglichkeit (27.08.2026) ---- */
@media (max-width:860px){
  .top{flex-wrap:wrap;row-gap:8px;padding:10px 14px}
  .top img{height:26px}
  .navlinks{order:3;flex-basis:100%;margin-left:0;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:2px;padding-bottom:2px;scrollbar-width:none}
  .navlinks::-webkit-scrollbar{display:none}
  .navlinks a{white-space:nowrap;font-size:12.5px;padding:6px 10px}
  .top .who{display:none}
  .badge-role{margin-left:0}
  .card.pad0{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card.pad0 table{min-width:560px}
  .row-form{grid-template-columns:1fr}
  .proj-head{gap:8px}
  .actions .btn{flex:1 1 auto;justify-content:center}
}

/* ---- Besucher-Dashboard (27.08.2026) ---- */
.vis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px}
.vis-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.vis-card h3{font-size:15px;font-weight:700;margin-bottom:2px}
.vis-card .vsub{color:var(--faint);font-size:11.5px;margin-bottom:12px}
.vis-kpis{display:flex;gap:18px;margin-bottom:12px}
.vis-kpis .k{flex:1}
.vis-kpis .kv{font-size:22px;font-weight:800;line-height:1.1}
.vis-kpis .kl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:2px}
.vis-kpis .ks{font-size:11px;color:var(--muted)}
.vis-bars{display:flex;align-items:flex-end;gap:3px;height:52px;margin-bottom:12px}
.vis-bars .b{flex:1;min-width:4px;border-radius:2px 2px 0 0;background:linear-gradient(180deg,var(--accent-2),var(--accent));opacity:.85}
.vis-bars .b.leer{background:rgba(255,255,255,.08)}
.vis-top{font-size:12.5px;color:var(--muted);line-height:1.7}
.vis-top b{color:var(--ink);font-weight:600}
.vis-top .n{color:var(--faint)}