/* ============================================================
   BCR · Designsystem — Bianka Claus-Riedel Buchhaltungsbüro
   Geteilte Tokens & Komponenten für Webseite, Dashboard, Portal
   ============================================================ */

/* Lokal gehostete Schriften (DSGVO: keine Google-Fonts-CDN, kein IP-Transfer) */
/* Geist latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/Geist-latin-ext.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Geist latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/Geist-latin.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Geist Mono latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/GeistMono-latin-ext.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Geist Mono latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/GeistMono-latin.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* — Akzent (Marineblau, abgeleitet vom BBI-Logo) — als ein Block, leicht austauschbar — */
  --accent:        oklch(0.40 0.085 256);
  --accent-deep:   oklch(0.32 0.072 256);
  --accent-hover:  oklch(0.36 0.082 256);
  --accent-soft:   oklch(0.95 0.022 256);
  --accent-tint:   oklch(0.975 0.013 256);
  --accent-ring:   oklch(0.40 0.085 256 / 0.30);
  /* Silber (für „I" im Monogramm & feine Akzente) */
  --silver-1:      oklch(0.93 0.003 256);
  --silver-2:      oklch(0.78 0.006 256);
  --silver-3:      oklch(0.62 0.008 256);

  /* — Neutrale, warme Tonleiter — */
  --bg:        oklch(0.975 0.004 95);
  --bg-2:      oklch(0.962 0.005 95);
  --surface:   #ffffff;
  --surface-2: oklch(0.99 0.003 95);

  --ink:    oklch(0.255 0.008 165);
  --ink-2:  oklch(0.46 0.008 165);
  --ink-3:  oklch(0.62 0.007 160);
  --ink-4:  oklch(0.74 0.006 155);

  --line:     oklch(0.92 0.004 150);
  --line-2:   oklch(0.95 0.004 150);
  --line-strong: oklch(0.88 0.005 150);

  /* — Statusfarben (gedeckt) — */
  --success:      oklch(0.58 0.07 155);
  --success-soft: oklch(0.95 0.03 155);
  --warning:      oklch(0.68 0.10 75);
  --warning-soft: oklch(0.95 0.04 80);
  --danger:       oklch(0.58 0.11 28);
  --danger-soft:  oklch(0.95 0.035 30);
  --info:         oklch(0.58 0.07 245);
  --info-soft:    oklch(0.95 0.03 245);

  /* — Radien (großzügig) — */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-3xl: 48px;
  --r-pill: 999px;

  /* — Schatten (sehr weich, mehrschichtig) — */
  --shadow-xs: 0 1px 2px oklch(0.4 0.02 160 / 0.04), 0 1px 1px oklch(0.4 0.02 160 / 0.03);
  --shadow-sm: 0 1px 2px oklch(0.4 0.02 160 / 0.04), 0 4px 12px oklch(0.4 0.02 160 / 0.05);
  --shadow-md: 0 2px 4px oklch(0.4 0.02 160 / 0.04), 0 8px 24px oklch(0.4 0.02 160 / 0.07);
  --shadow-lg: 0 4px 8px oklch(0.4 0.02 160 / 0.04), 0 18px 48px oklch(0.4 0.02 160 / 0.10);
  --shadow-xl: 0 8px 16px oklch(0.4 0.02 160 / 0.05), 0 32px 80px oklch(0.4 0.02 160 / 0.13);
  --shadow-float: 0 24px 70px -20px oklch(0.4 0.03 160 / 0.22);

  /* — Glas — */
  --glass-bg: oklch(1 0 0 / 0.72);
  --glass-border: oklch(1 0 0 / 0.6);
  --glass-blur: blur(24px) saturate(180%);

  /* — Typografie — */
  --font: 'Geist', 'Helvetica Neue', Helvetica, system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* — Layout — */
  --maxw: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

.mono { font-family: var(--mono); font-feature-settings: 'tnum' 1; letter-spacing: -0.02em; }
.tnum { font-variant-numeric: tabular-nums; }

/* — Eyebrow / Label — */
.eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 13px 24px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              background .25s var(--ease-soft), border-color .25s var(--ease-soft),
              color .25s var(--ease-soft);
  will-change: transform;
}
.btn:active { transform: scale(0.975); }
.btn svg { width: 17px; height: 17px; }

.btn-primary {
  background: var(--ink);
  color: var(--surface);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: oklch(0.32 0.01 165); transform: translateY(-1.5px); box-shadow: var(--shadow-md); }

.btn-accent {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 18px -6px var(--accent-ring);
}
.btn-accent:hover { background: var(--accent-hover); transform: translateY(-1.5px); box-shadow: 0 12px 28px -8px var(--accent-ring); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { background: var(--surface); border-color: var(--ink-3); transform: translateY(-1.5px); box-shadow: var(--shadow-sm); }

.btn-soft {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-xs);
}
.btn-soft:hover { border-color: var(--ink-4); transform: translateY(-1.5px); box-shadow: var(--shadow-sm); }

.btn-lg { padding: 16px 30px; font-size: 16.5px; }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-block { width: 100%; }

/* Icon-Button */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
  transition: all .25s var(--ease-soft);
}
.icon-btn:hover { color: var(--ink); border-color: var(--ink-4); box-shadow: var(--shadow-sm); }
.icon-btn svg { width: 19px; height: 19px; }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: 32px; }

.card-hover {
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s var(--ease-soft);
  will-change: transform;
}
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-2); }

.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

/* ============================================================
   Badges / Status
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 500; letter-spacing: -0.005em;
  padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--bg-2); color: var(--ink-2);
  border: 1px solid var(--line);
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.badge-warning { background: var(--warning-soft); color: oklch(0.5 0.1 70); border-color: transparent; }
.badge-danger  { background: var(--danger-soft);  color: var(--danger);  border-color: transparent; }
.badge-info    { background: var(--info-soft);    color: var(--info);    border-color: transparent; }
.badge-accent  { background: var(--accent-soft);  color: var(--accent-deep); border-color: transparent; }

/* ============================================================
   Form-Felder
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 14px; font-weight: 500; color: var(--ink-2); letter-spacing: -0.005em; }
.input, .textarea, .select {
  font-family: inherit; font-size: 15.5px; color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  width: 100%;
  transition: border-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft), background .2s var(--ease-soft);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--accent-ring);
}
.textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.field.invalid .input, .field.invalid .textarea, .field.invalid .select { border-color: var(--danger); }
.field-error { font-size: 13px; color: var(--danger); min-height: 0; }

/* Checkbox */
.checkbox { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.checkbox input { position: absolute; opacity: 0; }
.checkbox .box {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  border: 1.5px solid var(--line-strong); background: var(--surface);
  display: grid; place-items: center; transition: all .2s var(--ease-soft); margin-top: 1px;
}
.checkbox .box svg { width: 13px; height: 13px; color: #fff; opacity: 0; transform: scale(0.6); transition: all .2s var(--ease); }
.checkbox input:checked + .box { background: var(--accent); border-color: var(--accent); }
.checkbox input:checked + .box svg { opacity: 1; transform: scale(1); }
.checkbox input:focus-visible + .box { box-shadow: 0 0 0 4px var(--accent-ring); }

/* ============================================================
   Utility
   ============================================================ */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.section { padding: clamp(72px, 11vw, 140px) 0; }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.muted { color: var(--ink-2); }
.center { text-align: center; }

/* Bild-Platzhalter */
.ph {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, oklch(0.95 0.004 150) 0 11px, oklch(0.93 0.005 150) 11px 22px);
  display: grid; place-items: center;
  color: var(--ink-3);
}
.ph span {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 6px 12px;
  background: oklch(1 0 0 / 0.7); border-radius: var(--r-pill);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* Scroll-Reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
@media print { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

::selection { background: var(--accent-soft); color: var(--accent-deep); }

/* Schmale Scrollbar */
.scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-thin::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }

/* ===== Barrierefreiheit (BFSG · BITV 2.0 · WCAG 2.1 AA) ===== */
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 100001;
  background: var(--accent); color: #fff; padding: 12px 20px;
  border-radius: 12px; font-weight: 600; font-size: 15px; text-decoration: none;
  box-shadow: 0 10px 28px -8px var(--accent-ring);
  transform: translateY(-180%); transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); outline: 3px solid #fff; outline-offset: 2px; }
/* Sichtbarer Tastatur-Fokus auf der gesamten Seite */
:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
a:focus-visible, button:focus-visible { outline-offset: 3px; }
main:focus { outline: none; }
/* Reduzierte Bewegung respektieren (ganze Seite) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}