/* ============================================================================
   Online Präsenz — Modern UI Layer (2026-07)
   Additive Ebene über dem Basis-Design. Marke (Dark + Gold, Space Grotesk)
   bleibt unangetastet — ergänzt werden Tiefe, Rundungen, Glas, Motion
   und ein mobiles Layout (die Basis kannte keinen Breakpoint).
   Wird in base.html NACH dem Inline-<style> und VOR {% block extra_css %}
   geladen: seitenspezifisches CSS behält damit weiterhin das letzte Wort.
   ========================================================================= */

:root{
  --r-xs:6px; --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 10px 26px -8px rgba(0,0,0,.6);
  --sh-3:0 24px 60px -18px rgba(0,0,0,.75);
  --glow:0 0 0 3px rgba(255,215,0,.14);
  --ease:cubic-bezier(.4,.14,.3,1);
  --glass:rgba(15,15,15,.72);
  --hair:rgba(255,255,255,.06);
  --sw-mob:280px;
}

/* ── Grundpolitur ───────────────────────────────────────────────────────── */
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:rgba(255,215,0,.25);color:#fff}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:var(--r-xs)}
*{scrollbar-width:thin;scrollbar-color:var(--b2) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--b2);border-radius:var(--r-pill)}
*::-webkit-scrollbar-thumb:hover{background:var(--b3)}

/* Ambiente: zwei weiche Gold-Schleier geben der Fläche Tiefe */
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(620px circle at 88% -8%, rgba(255,215,0,.045), transparent 60%),
    radial-gradient(520px circle at -6% 104%, rgba(255,215,0,.03), transparent 60%);
}

/* ── Sidebar: Glas statt Blech ──────────────────────────────────────────── */
.sb{
  background:var(--glass);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  backdrop-filter:blur(22px) saturate(140%);
  border-right:1px solid var(--hair);
  transition:transform .3s var(--ease);
}
.sb-logo{border-bottom:1px solid var(--hair)}
.lm{border-radius:var(--r-sm);box-shadow:0 4px 14px -4px rgba(255,215,0,.45)}

/* Nav-Items als Pills, aktiver Eintrag mit Gold-Verlauf + Marker */
.ni{
  position:relative;margin:2px 10px;padding:9px 12px;
  border-radius:var(--r-sm);border-left:0;
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.ni:hover{background:rgba(255,255,255,.045);color:var(--t);transform:translateX(2px);border-left:0}
.ni.active{
  background:linear-gradient(90deg,rgba(255,215,0,.14),rgba(255,215,0,.03));
  color:var(--gold);border-left:0;box-shadow:inset 0 0 0 1px rgba(255,215,0,.12);
}
.ni.active::before{
  content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);
  width:3px;height:18px;background:var(--gold);border-radius:var(--r-pill);
  box-shadow:0 0 10px rgba(255,215,0,.7);
}
.nb{border-radius:var(--r-pill);box-shadow:0 2px 8px -2px rgba(255,215,0,.5)}
.sb-user{border-top:1px solid var(--hair)}
.uav{border-radius:var(--r-pill)}
.logout{border-radius:var(--r-sm);transition:all .2s var(--ease)}
.logout:hover{box-shadow:var(--glow)}

/* ── Topbar: klebt oben, mit Glas-Unterlage ─────────────────────────────── */
/* .main trägt in der Basis overflow-x:hidden — das macht jedes position:sticky
   im Inneren wirkungslos (der Kasten wird zum Scroll-Container). overflow-x:clip
   kappt genauso, erzeugt aber keinen Scroll-Container → sticky lebt. */
.main{overflow-x:clip}
.topbar{
  position:sticky;top:0;z-index:60;
  margin:-28px -32px 28px;padding:22px 32px;
  background:rgba(6,6,6,.72);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  backdrop-filter:blur(16px) saturate(130%);
  border-bottom:1px solid var(--hair);
}
.pt{letter-spacing:-.7px}

/* ── Flächen: Karten mit Verlauf, Tiefe und Hover-Lift ──────────────────── */
.card,.pc{
  border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,0)) ,var(--s);
  box-shadow:var(--sh-1);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.card:hover{border-color:var(--b3);transform:translateY(-2px);box-shadow:var(--sh-2)}

.sc{
  border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)),var(--s);
  box-shadow:var(--sh-1);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.sc::before{height:2px;border-radius:var(--r-pill);transition:height .22s var(--ease)}
.sc.hl::before{background:linear-gradient(90deg,var(--gold),var(--gold-d))}
.sc:hover{transform:translateY(-3px);border-color:var(--b2);box-shadow:var(--sh-2)}
.sc:hover::before{height:3px}
.sv{background:linear-gradient(180deg,#fff,#bdbdbd);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{border-radius:var(--r-sm);box-shadow:var(--sh-1);transition:all .2s var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0);box-shadow:var(--sh-1)}
.btn-g{background:linear-gradient(180deg,#FFE04D,var(--gold));color:#000}
.btn-g:hover{background:#fff;box-shadow:0 8px 22px -6px rgba(255,215,0,.5)}
.btn-o:hover{background:var(--gf)}
.btn-sm{border-radius:var(--r-xs)}

/* ── Formulare: Fokus-Ring statt nackter Border ─────────────────────────── */
.fc,.ct-inp{border-radius:var(--r-sm);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.fc:focus,.ct-inp:focus{border-color:var(--gold) !important;box-shadow:var(--glow)}
/* Standalone-Seiten (GEMA, Bewerbung, Signatur) erben so ebenfalls */
input:not(.fc),textarea:not(.fc),select:not(.fc){border-radius:var(--r-sm)}
button:not(.btn):not(.burger){border-radius:var(--r-sm)}

/* ── Badges, Chips, Progress ────────────────────────────────────────────── */
.sb2{border-radius:var(--r-pill);transition:all .2s var(--ease)}
.cid{border-radius:var(--r-xs)}
.pw{border-radius:var(--r-pill);height:4px}
.pf{border-radius:var(--r-pill);background:linear-gradient(90deg,var(--gold-d),var(--gold))}

/* ── Tabellen: gerundeter Rahmen, klebender Kopf ────────────────────────── */
.dt{border-radius:var(--r);overflow:hidden}
.dt th:first-child{border-top-left-radius:var(--r)}
.dt th:last-child{border-top-right-radius:var(--r)}
.dt tr{transition:background .18s var(--ease)}
.dt tbody tr:last-child td{border-bottom:0}

/* ── Modal & Overlay: Backdrop-Blur ─────────────────────────────────────── */
.overlay{background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal{border-radius:var(--r-lg);box-shadow:var(--sh-3);border-color:var(--b3)}
.mt{letter-spacing:-.3px}

/* ── Toast ──────────────────────────────────────────────────────────────── */
.toast{border-radius:var(--r-sm);box-shadow:var(--sh-3)}

/* ── Chatbot ────────────────────────────────────────────────────────────── */
.ct-btn{border-radius:var(--r-pill);box-shadow:0 8px 30px -6px rgba(255,215,0,.4)}
.ct-btn:hover{transform:scale(1.08) translateY(-2px)}
.ct-panel{border-radius:var(--r-lg);box-shadow:var(--sh-3);overflow:hidden}
.ct-av{border-radius:var(--r-pill)}
.ct-snd{border-radius:var(--r-sm)}
.cm.user .cb{border-radius:14px 14px 4px 14px}
.cm.assistant .cb{border-radius:14px 14px 14px 4px}
.typing{border-radius:14px 14px 14px 4px}

/* ── Kanban / Assets ────────────────────────────────────────────────────── */
.kc{border-radius:var(--r);overflow:hidden}
.ac{border-radius:var(--r-sm);transition:all .22s var(--ease)}
.ac:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--sh-2)}
.ac-thumb{border-radius:var(--r-xs)}

/* ── Wizard / Feedback-Widgets ──────────────────────────────────────────── */
.ws{border-radius:var(--r-sm) var(--r-sm) 0 0;transition:all .2s var(--ease)}
.scale-btn,.yn-btn{border-radius:var(--r-sm);transition:all .18s var(--ease)}
.scale-btn:hover,.yn-btn:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px)}
.scale-btn.active:hover,.yn-btn.active:hover{color:#000}
.star{transition:transform .15s var(--ease),color .15s var(--ease)}
.star:hover{transform:scale(1.18)}

/* ── Burger + Scrim: nur mobil sichtbar ─────────────────────────────────── */
.burger{
  display:none;position:fixed;top:12px;left:12px;z-index:210;
  width:42px;height:42px;align-items:center;justify-content:center;
  background:var(--glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--b2);border-radius:var(--r-sm);
  color:var(--gold);font-size:17px;cursor:pointer;box-shadow:var(--sh-2);
}
.burger:active{transform:scale(.94)}
.scrim{
  position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
body.nav-open .scrim{opacity:1;pointer-events:auto}

/* ── Mobile: die Basis hatte keinen einzigen Breakpoint ─────────────────── */
@media (max-width:1024px){
  .burger{display:flex}
  .sb{width:var(--sw-mob);transform:translateX(-100%);box-shadow:none}
  body.nav-open .sb{transform:translateX(0);box-shadow:var(--sh-3)}
  .main{margin-left:0;padding:72px 18px 28px}
  .topbar{margin:-72px -18px 22px;padding:18px 18px 16px 66px;flex-wrap:wrap;gap:10px}
  .sgrid{grid-template-columns:repeat(2,1fr)}
  .kb{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(180px,1fr)}
  .ct-panel{width:calc(100vw - 32px);right:16px}
  .modal{max-width:calc(100vw - 32px)}
}
@media (max-width:600px){
  .sgrid{grid-template-columns:1fr}
  .pt{font-size:19px}
  .ta{width:100%;flex-wrap:wrap}
  .dt{font-size:11px}
  .dt th,.dt td{padding:8px 10px}
}

/* ── Login (eigenständiges Template, andere Klassen) ────────────────────── */
.wrap .feat{border-radius:var(--r-sm);transition:all .22s var(--ease)}
.wrap .feat:hover{border-color:rgba(255,215,0,.35);background:rgba(255,215,0,.05);transform:translateY(-2px);box-shadow:var(--sh-2)}
.wrap .panel{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)),var(--s);border-left:1px solid var(--hair)}
.wrap input{border-radius:var(--r-sm)}
.wrap input:focus{box-shadow:var(--glow)}
.wrap .btn{border-radius:var(--r-sm)}
.wrap .si{border-radius:var(--r-pill)}
.wrap .msg{border-radius:var(--r-sm)}

/* ── Barrierefreiheit ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}