/* =====================================================================
   BSF Brand Kit · brand.css
   Blacksmith Finance GmbH – Corporate Design (durchgängig DUNKEL).
   EINE Datei zum Einbinden in JEDES BSF-Projekt: Schriften, Tokens,
   Basis + Kern-Komponenten. Werte sind 1:1 identisch zur Website-
   Referenz (Demo V5) – so sehen alle Projekte gleich aus.

   Regeln (verbindlich):
   • Nur Brandfarben. Das alte Himmelblau (Vorgaenger-Branding) ist VERBOTEN.
   • Inter für alle Texte, Bebas Neue NUR für die Logo-Wortmarke.
   • Schriften lokal (siehe ./fonts) – KEINE Google-Fonts/CDN/Tracker.
   • Weiß nie als Flächen-Hintergrund, nur als Text / kleine Akzentkarte.
   • Gelb #F5C518 nur als sparsamer Warn-/Hinweis-Marker.

   Einbinden:
   • Statisch:  <link rel="stylesheet" href="brand.css"> (fonts/ daneben legen)
   • Vite/React: import "…/brand.css";  fonts nach public/ oder mitbündeln.
   ===================================================================== */

/* ----------------------------- Fonts ------------------------------ */
/* Pfade relativ zu brand.css. Beim Kopieren fonts/ mitnehmen. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-var.woff2") format("woff2");
}
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/bebas-neue.woff2") format("woff2");
}

/* ----------------------------- Tokens ----------------------------- */
:root {
  /* Marke / Akzent – BSF-Türkis/Cyan */
  --accent:        #37c4f1;   /* BSF-Cyan – Funken/Akzent */
  --accent-2:      #6BD6F6;   /* helleres Cyan (Verläufe/Hover) */
  --accent-deep:   #1BA6D6;   /* tieferes Cyan */
  --accent-ink:    #04222E;   /* dunkler Text auf Cyan-Flächen */
  --accent-soft:   rgba(55, 196, 241, 0.12);
  --accent-soft-2: rgba(55, 196, 241, 0.20);

  /* Warn-/Hinweis-Marker (bewusst sparsam eingesetzt) */
  --warn:          #F5C518;
  --warn-soft:     rgba(245, 197, 24, 0.10);
  --warn-line:     rgba(245, 197, 24, 0.42);

  /* Dunkle Flächen – Brand: Schwarz Haupt-, Dunkelgrau #343538 Sekundär */
  --bg-deep:       #000000;   /* absolute Basis / Hero / Footer */
  --bg-darker:     #000000;   /* Body-Hintergrund */
  --bg-dark:       #0C0D0E;   /* dunkles Band (minimal abgesetzt) */
  --bg-elev:       #151617;   /* erhöhtes Band */
  --surface-dark:  #1E1F21;   /* Kartenfläche */
  --surface-dark2: #343538;   /* Brand-Dunkelgrau – Inputs / höchste Erhebung */
  --line-dark:     rgba(255, 255, 255, 0.10);
  --line-dark-2:   rgba(255, 255, 255, 0.06);

  /* „Helle" Tokens auf Dunkel gemappt (durchgängig dunkles Design) */
  --bg-light:      #0C0D0E;
  --bg-soft:       #151617;
  --surface:       #1E1F21;
  --line:          rgba(255, 255, 255, 0.10);

  /* Text – Brand: Weiß auf Dunkel, Grau #858587 für gedämpften Text */
  --ink:           #FFFFFF;
  --ink-soft:      #C9CACC;
  --ink-mute:      #858587;   /* Brand-Grau */
  --on-dark:       #FFFFFF;
  --on-dark-soft:  #C0C1C3;
  --on-dark-mute:  #858587;   /* Brand-Grau */

  /* Maße */
  --container:     1180px;
  --container-narrow: 760px;
  --radius:        16px;
  --radius-lg:     22px;
  --radius-sm:     10px;
  --radius-pill:   999px;

  /* Schatten – dunkler Kontext (Schwarz-Basis) */
  --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md:     0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-lg:     0 28px 64px rgba(0, 0, 0, 0.72);
  --shadow-accent: 0 12px 30px rgba(55, 196, 241, 0.30);
  --shadow-light:  0 1px 2px rgba(0, 0, 0, 0.5), 0 14px 30px rgba(0, 0, 0, 0.55);

  /* Bewegung */
  --ease:          cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast:        .18s var(--ease);
  --t:             .35s var(--ease);

  /* Schriften */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", sans-serif;
  --font-brand: "Bebas Neue", "Inter", sans-serif;   /* NUR Logo-Wortmarke */
}

/* ----------------------------- Reset ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--on-dark);
  background: var(--bg-darker);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }

/* Sichtbarer Tastatur-Fokus (Barrierefreiheit) */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 200;
  background: var(--accent); color: var(--accent-ink); padding: 10px 16px;
  border-radius: var(--radius-sm); font-weight: 700;
}
.skip-link:focus { left: 12px; }

/* ----------------------------- Layout ----------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding: clamp(60px, 8vw, 112px) 0; position: relative; }

/* Dunkle Bänder – dezente Verläufe für Rhythmus (nicht rein monoton) */
.section--dark {
  background:
    radial-gradient(120% 80% at 85% -10%, rgba(55,196,241,.06), transparent 60%),
    var(--bg-dark);
  color: var(--on-dark);
  border-top: 1px solid var(--line-dark-2);
}
.section--darker {
  background: var(--bg-darker);
  color: var(--on-dark);
  border-top: 1px solid var(--line-dark-2);
}
.section--elev {
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(55,196,241,.05), transparent 55%),
    var(--bg-elev);
  color: var(--on-dark);
  border-top: 1px solid var(--line-dark-2);
}
/* Dezent erhöhtes Band als gezielter Abschnittswechsel (statt „hell") */
.section--surface {
  background:
    radial-gradient(120% 85% at 80% -10%, rgba(55,196,241,.05), transparent 60%),
    var(--surface-dark);
  color: var(--on-dark);
  border-top: 1px solid var(--line-dark-2);
}

/* ---------------------- Typografie-Helfer ------------------------- */
.section__head { max-width: 730px; margin: 0 auto clamp(34px, 5vw, 60px); text-align: center; }
.section__title {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.14; letter-spacing: -0.02em; font-weight: 800; color: var(--on-dark);
}
.section__sub { margin-top: 14px; color: var(--on-dark-soft); font-size: 1.075rem; }
.kicker {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}
.text-accent { color: var(--accent); }

/* ------------------------- Marken-Wortmarke ----------------------- */
/* Header/Footer: Icon-Logo (logos/logo-icon.png) + Wortmarke in Bebas. */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--on-dark); flex: none; }
.brand__mark { width: 40px; height: 40px; }
.brand__word { font-family: var(--font-brand); font-weight: 400; letter-spacing: .06em; font-size: 1.55rem; line-height: 1; white-space: nowrap; }
.brand__word-light { color: inherit; }

/* ----------------------------- Buttons ---------------------------- */
.btn {
  --pad: 13px 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: var(--pad); border-radius: var(--radius-pill); border: 1px solid transparent;
  font-weight: 700; font-size: .96rem; letter-spacing: .005em;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.btn--sm { --pad: 9px 16px; font-size: .88rem; }
.btn--lg { --pad: 16px 28px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn--primary {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--accent-ink); box-shadow: var(--shadow-accent);
}
.btn--primary:hover { filter: brightness(1.05); transform: translateY(-2px); box-shadow: 0 16px 38px rgba(55,196,241,.42); }
.btn--primary:active { transform: translateY(0); }
.btn--ghost {
  background: rgba(255,255,255,.02); color: var(--on-dark); border-color: rgba(255,255,255,.30);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

/* ------------------------------ Pills ----------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  padding: 5px 11px; border-radius: var(--radius-pill); text-transform: uppercase;
}
.pill--accent { background: var(--accent-soft); color: var(--accent); }

/* ------------------------------ Karte ----------------------------- */
.card {
  background: var(--surface-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card:hover { border-color: rgba(55,196,241,.5); box-shadow: var(--shadow-md); }

/* -------------------------- Inline-Icons -------------------------- */
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------- Formulare ---------------------------- */
.field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 7px; }
.field label { font-weight: 600; font-size: .9rem; color: var(--ink); }
.field input, .field select, .field textarea {
  border: 1px solid var(--line-dark); border-radius: var(--radius-sm); padding: 12px 14px;
  font: inherit; color: var(--ink); background: var(--surface-dark2);
  transition: border-color var(--t-fast), box-shadow var(--t-fast); width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}
.field.has-error input, .field.has-error select { border-color: #E5484D; box-shadow: 0 0 0 4px rgba(229,72,77,.12); }

/* ------------ Hinweis / Disclaimer mit gelbem Warn-Marker ---------- */
.disclaimer {
  border: 1px solid var(--line-dark); border-left: 3px solid var(--warn-line);
  background: var(--warn-soft); border-radius: var(--radius-sm);
  padding: 14px 16px; color: var(--on-dark-soft); font-size: .86rem; line-height: 1.55;
}

/* --------------------- Reduzierte Bewegung ------------------------ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}