/* ============================================================
   BewerbungsManager — Base layer
   Reset, document defaults, and the reusable primitive classes
   the brand uses everywhere (.wrap, .section, .eyebrow, .btn,
   .display, .h2, .lede, .mono, atmospheric layers, .reveal).
   All values come from the token files. Theme-aware via vars.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--sel-bg); color: var(--sel-tx); }

a { color: var(--ac); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--ac-2); }
img { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-semi);
}

/* ---------- layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--sect-y); position: relative; }

/* ---------- type helpers ---------- */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-bold);
}
.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-semi);
}
.lede { color: var(--tx-2); font-size: var(--fs-lede); max-width: 60ch; }
.muted { color: var(--tx-2); }
.faint { color: var(--tx-3); }
.mono { font-family: var(--font-mono); }

/* eyebrow — kompaktes Label über Abschnitten. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ac);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.95rem; font-weight: var(--fw-medium);
  padding: 0.72rem 1.35rem;
  border-radius: var(--r-pill); border: 1px solid var(--line-2);
  background: transparent; color: var(--tx); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-mid) var(--ease),
              border-color var(--dur-mid) var(--ease),
              color var(--dur-mid) var(--ease);
  white-space: nowrap;
}
.btn:hover { border-color: var(--line-2); background: color-mix(in oklab, var(--tx) 6%, transparent); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--btn-pf-bg); color: var(--btn-pf-tx); border-color: var(--btn-pf-bg); font-weight: var(--fw-semi); }
.btn--primary:hover { background: var(--btn-pf-bg-h); border-color: var(--btn-pf-bg-h); }
.btn .ico { width: 1em; height: 1em; }

/* ---------- atmospheric layers (fixed background system) ---------- */
.grid-bg {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 30%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 30%, transparent 72%);
}
.aura { position: fixed; inset: 0; z-index: -3; pointer-events: none; background: var(--aura); }
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.04; display: var(--grain-display);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(var(--reveal-rise)); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 0.06s; }
.reveal[data-d="2"] { transition-delay: 0.12s; }
.reveal[data-d="3"] { transition-delay: 0.18s; }
.reveal[data-d="4"] { transition-delay: 0.24s; }
.reveal[data-d="5"] { transition-delay: 0.30s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .grain { display: none; }
}

.hr { height: 1px; background: var(--line); border: 0; }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; border-radius: 2px; }


/* ============================================================
   Glass surfaces — dezenter Milchglas-Look für tragende Flächen
   (Sidebar, Topbar, Karten). Bewusst zurückhaltend gehalten.
   .glass  -> gefrostete Fläche  ·  .app-wash -> weicher Farbgrund,
   damit der Blur etwas zum Verschwimmen hat. Theme-adaptiv.
   ============================================================ */
:root {
  --glass-bg:     color-mix(in oklab, var(--bg-1) 64%, transparent); /* @kind other */
  --glass-bg-2:   color-mix(in oklab, var(--bg-1) 76%, transparent); /* @kind other */
  --glass-brd:    rgba(255,255,255,0.08);
  --glass-hair:   rgba(255,255,255,0.10);
  --glass-blur:   10px; /* @kind other */
  --glass-shadow: 0 22px 55px -36px rgba(0,0,0,0.60); /* @kind other */
  --wash-a: transparent; /* @kind other */
  --wash-b: transparent; /* @kind other */
  --wash-c: transparent; /* @kind other */
}
[data-theme="light"] {
  --glass-bg:     rgba(255,255,255,0.66);
  --glass-bg-2:   rgba(255,255,255,0.80);
  --glass-brd:    rgba(255,255,255,0.55);
  --glass-hair:   rgba(255,255,255,0.70);
  --glass-shadow: 0 18px 44px -34px rgba(13,25,32,0.28); /* @kind other */
  --wash-a: transparent; /* @kind other */
  --wash-b: transparent; /* @kind other */
  --wash-c: transparent; /* @kind other */
}
@media (prefers-color-scheme: light) {
  :root {
    --glass-bg:     rgba(255,255,255,0.66);
    --glass-bg-2:   rgba(255,255,255,0.80);
    --glass-brd:    rgba(255,255,255,0.55);
    --glass-hair:   rgba(255,255,255,0.70);
    --glass-shadow: 0 18px 44px -34px rgba(13,25,32,0.28); /* @kind other */
    --wash-a: transparent; /* @kind other */
    --wash-b: transparent; /* @kind other */
    --wash-c: transparent; /* @kind other */
  }
}
[data-theme="dark"] {
  --glass-bg:     color-mix(in oklab, var(--bg-1) 64%, transparent); /* @kind other */
  --glass-bg-2:   color-mix(in oklab, var(--bg-1) 76%, transparent); /* @kind other */
  --glass-brd:    rgba(255,255,255,0.08);
  --glass-hair:   rgba(255,255,255,0.10);
  --glass-shadow: 0 22px 55px -36px rgba(0,0,0,0.60); /* @kind other */
  --wash-a: transparent; /* @kind other */
  --wash-b: transparent; /* @kind other */
  --wash-c: transparent; /* @kind other */
}
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hair);
}
/* .glass-blur -> echtes Milchglas, NUR für fixierte/sticky Chrome-Flächen
   (Sidebar, Topbar). backdrop-filter auf frei scrollenden In-Flow-Karten ist
   in manchen Engines/Exporten unzuverlässig - dort .glass (ohne Blur) nutzen. */
.glass-blur {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(135%);
  backdrop-filter: blur(var(--glass-blur)) saturate(135%);
}
/* Wash als viewport-fixierter Hintergrund (kein fixed ::before -> vertr\u00e4gt sich
   mit backdrop-filter auf den Karten). Element beh\u00e4lt seine background-color. */
.app-wash {
  background-image:
    radial-gradient(680px 460px at 12% 4%,  var(--wash-a), transparent 62%),
    radial-gradient(720px 540px at 96% 92%, var(--wash-b), transparent 62%),
    radial-gradient(560px 460px at 60% 40%, var(--wash-c), transparent 66%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}


/* ============================================================
   Brand-Logo — Theme-Varianten
   Das Logo liegt in zwei Fassungen vor (dunkle Zeichnung für
   helle Flächen, helle Zeichnung für dunkle Flächen). Beide
   <img> nebeneinander setzen und per Klasse schalten:
     <img class="bm-logo--light" src=".../bm-logo-h-light.png">
     <img class="bm-logo--dark"  src=".../bm-logo-h-dark.png">
   ============================================================ */
.bm-logo--light { display: var(--bm-logo-light, block); }
.bm-logo--dark  { display: var(--bm-logo-dark, none); }
:root { --bm-logo-light: none; /* @kind other */ --bm-logo-dark: block; /* @kind other */ }
@media (prefers-color-scheme: light) {
  :root { --bm-logo-light: block; /* @kind other */ --bm-logo-dark: none; /* @kind other */ }
}
[data-theme="light"] { --bm-logo-light: block; /* @kind other */ --bm-logo-dark: none; /* @kind other */ }
[data-theme="dark"]  { --bm-logo-light: none; /* @kind other */ --bm-logo-dark: block; /* @kind other */ }


/* ============================================================
   KI-Assistent — globales Chat-Widget (kompakter Button unten
   rechts + aufklappbares Panel). Nutzt Glass- und Farb-Tokens.
   ============================================================ */
.ai-fab { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px 8px 11px; border: 0; border-radius: var(--r-pill); cursor: pointer; background: var(--ac-grad); color: #fff; font-family: var(--font-body); font-weight: 500; font-size: 0.8rem; box-shadow: 0 12px 26px -12px color-mix(in oklab, var(--ac) 72%, transparent); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-mid) var(--ease); }
.ai-fab:hover { transform: translateY(-2px); }
.ai-fab svg { width: 15px; height: 15px; }
.ai-panel { position: fixed; right: 22px; bottom: 22px; z-index: 61; width: 388px; max-width: calc(100vw - 34px); height: 592px; max-height: calc(100vh - 44px); display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; border: 1px solid var(--glass-brd); background: var(--glass-bg-2); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(135%); backdrop-filter: blur(var(--glass-blur)) saturate(135%); box-shadow: 0 44px 96px -42px rgba(16,24,40,0.6), inset 0 1px 0 var(--glass-hair); }
.ai-head { display: flex; align-items: center; gap: 12px; padding: 15px 15px 13px; border-bottom: 1px solid var(--line); }
.ai-head__ico { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: var(--ac-dim); border: 1px solid var(--ac-line); color: var(--ac-2); }
.ai-head__ico svg { width: 19px; height: 19px; }
.ai-head__t { flex: 1; min-width: 0; }
.ai-head__t strong { display: block; font-family: var(--font-display); font-weight: 560; font-size: 1rem; letter-spacing: -0.01em; color: var(--tx); }
.ai-head__t span { font-size: 0.72rem; color: var(--tx-3); }
.ai-x { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; border: 0; background: transparent; color: var(--tx-3); cursor: pointer; display: grid; place-items: center; }
.ai-x svg { width: 16px; height: 16px; }
.ai-x:hover { background: color-mix(in oklab, var(--tx) 6%, transparent); color: var(--tx); }
.ai-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.ai-body::-webkit-scrollbar { width: 6px; }
.ai-body::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
.ai-chips { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ai-chip { padding: 8px 13px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: color-mix(in oklab, var(--bg-1) 55%, transparent); color: var(--tx-2); font-size: 0.79rem; cursor: pointer; text-align: left; font-family: var(--font-body); transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.ai-chip:hover { border-color: var(--ac-line); color: var(--tx); }
.ai-row { display: flex; }
.ai-row--user { justify-content: flex-end; }
.ai-row--ai { justify-content: flex-start; }
.ai-bub { max-width: 85%; padding: 10px 13px; border-radius: 14px; font-size: 0.86rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.ai-row--user .ai-bub { background: var(--ac-grad); color: #fff; border-bottom-right-radius: 5px; }
.ai-row--ai .ai-bub { background: color-mix(in oklab, var(--bg-1) 78%, transparent); border: 1px solid var(--line); color: var(--tx); border-bottom-left-radius: 5px; }
.ai-typing { display: inline-flex; gap: 4px; align-items: center; }
.ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--tx-3); animation: aiblink 1.2s infinite ease-in-out; }
.ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiblink { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ai-foot { padding: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.ai-modes { display: inline-flex; gap: 3px; padding: 3px; border-radius: var(--r-pill); background: color-mix(in oklab, var(--tx) 5%, transparent); align-self: flex-start; }
.ai-mode { padding: 5px 13px; border: 0; background: transparent; border-radius: var(--r-pill); font-size: 0.74rem; color: var(--tx-2); cursor: pointer; font-family: var(--font-body); transition: color var(--dur-fast) var(--ease); }
.ai-mode.is-on { background: var(--bg-1); color: var(--tx); box-shadow: 0 1px 3px rgba(16,24,40,0.14); font-weight: 500; }
.ai-inrow { display: flex; gap: 8px; align-items: flex-end; }
.ai-ta { flex: 1; resize: none; min-height: 44px; max-height: 120px; box-sizing: border-box; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-1); color: var(--tx); font-family: var(--font-body); font-size: 0.86rem; line-height: 1.4; }
.ai-ta:focus { outline: none; border-color: var(--ac-line); box-shadow: 0 0 0 3px var(--ac-dim); }
.ai-send { width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 12px; background: var(--ac-grad); color: #fff; cursor: pointer; display: grid; place-items: center; transition: opacity var(--dur-fast) var(--ease); }
.ai-send svg { width: 18px; height: 18px; }
.ai-send:disabled { opacity: 0.45; cursor: default; }
@media (max-width: 640px) { .ai-panel { right: 12px; bottom: 12px; left: 12px; width: auto; } }