/* ============================================================
   tokens.css — vbjaenicke.de · Design-Tokens (Autor: @designer)
   Coder: byte-for-byte übernehmen, Werte NICHT inline neu erfinden.
   Paarungsregeln: #C2410C nur auf HELL, #FF7A2F nur auf DUNKEL.
   Notice: bg + ink, Border max. Amber-700, nie Rot/Signalorange.
   ============================================================ */
:root {
  /* --- Flächen --- */
  --bg-page: #F5F6F7;        /* Nebelgrau des Hero-Himmels, Seitenhintergrund */
  --surface: #FFFFFF;        /* Inhalts-„Blatt" + Karten */
  --ink-strong: #1E242B;     /* Header/Footer-Menüleiste (Altseite: schwarz) */
  --ink-deep: #12171C;       /* Hero-Scrim-Farbe / dunkelste Ebene */
  --ink: #37414B;            /* Fließtext auf hell (9.61:1 auf --bg-page) */
  --text-muted: #6B7280;     /* Nebentext (4.83:1 auf Weiß; auf --bg-page nur ≥18.66px) */
  --text-muted-dark: #B9C0C7;/* Nebentext auf Dunkel (8.51:1 auf --ink-strong) */
  --hairline: #E3E6E9;

  /* --- Akzent: Stativ-Nabe im Hero-Foto (Rot-Orange) --- */
  --accent: #C2410C;         /* Text/Links NUR auf hell (4.79–5.18:1) */
  --accent-mid: #D6480F;     /* Flächen/Hover-Detail (nicht als Text auf hell, 3.4:1) */
  --accent-bright: #FF7A2F;  /* NUR auf Dunkel (6.02:1 auf --ink-strong) */
  --accent-2: #2E7D32;       /* Sekundär: sagegrün der Totalstation (4.74:1 auf hell) */

  /* --- Hinweis-Band: Signalfarbe ohne Alarmton (Amber) --- */
  --notice-bg: #FFF7ED;      /* Amber-50, Text --ink ~15:1 auf --notice-bg */
  --notice-border: #B45309;  /* Amber-700, nur Akzentlinie (keine Kontrastpflicht) */

  /* --- Stellen-Werbeblock (eigenes Sheet, kein Amber — das gehört dem Hinweis-Band) --- */
  --stellen-bg: #F6F3EE;     /* warmer, neutraler Kartenton aus der Bestandspalette */
  --stellen-border: #D6480F; /* Akzentlinie --accent-mid (Flächendetail, nicht als Text) */

  /* --- Typo --- */
  --font-sans: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-h1: clamp(2rem, 4.5vw, 3rem);
  --fs-h2: clamp(1.2rem, 2vw, 1.5rem);
  --fs-h3: 1.15rem;
  --fs-body: 1.0625rem;
  --lh-body: 1.65;

  /* --- Raum & Form --- */
  --container: 72rem;
  --radius: 12px;
  --radius-pill: 999px;
  --shadow-sheet: 0 2px 16px rgba(18, 23, 28, .07);
  --shadow-card: 0 1px 4px rgba(18, 23, 28, .08);
  --shadow-card-hover: 0 6px 18px rgba(18, 23, 28, .14);

  /* --- Bewegung --- */
  --ease: cubic-bezier(.2, .6, .2, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
}

/* --- Basis-Anwendung (Minimalgerüst, Coder erweitert) --- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
h1, h2, h3 { color: var(--ink-strong); line-height: 1.2; margin: 0 0 .6em; overflow-wrap: break-word; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); font-weight: 600; }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-mid); }

/* Fokus-Ring: auf hell accent, auf dunkel accent-bright (beide ≥3:1) */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--accent-bright); }

/* Menü-Pillen (dunkle Leiste) */
.nav__link {
  display: inline-block; padding: .45rem 1rem; border-radius: var(--radius-pill);
  color: var(--surface); text-decoration: none; transition: background var(--t-fast) var(--ease);
}
.nav__link:hover { background: rgba(255, 255, 255, .09); }
/* Orange Pille: echte Seite (page) UND Eltern-Eintrag eines aktiven Submenüs (true) */
.nav__link[aria-current]:not([aria-current="false"]) { background: var(--accent-bright); color: var(--ink-strong); font-weight: 600; }

/* Karten: Hover = Anheben + Schatten (kein Rahmen, keine Deko-Nummern) */
.card {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 1.25rem 1.5rem; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }

/* Hero-Scrim: Textkontrast links, Foto rechts sichtbar */
.hero__scrim { background: linear-gradient(90deg, rgba(18,23,28,.78) 0%, rgba(18,23,28,.42) 46%, rgba(18,23,28,.06) 78%, rgba(18,23,28,0) 100%); }

/* Eyebrow-Pille über dem Hero-h1 */
.eyebrow {
  display: inline-block; background: var(--accent-bright); color: var(--ink-strong);
  font-weight: 600; font-size: .8125rem; padding: .3rem .85rem; border-radius: var(--radius-pill);
}

/* address: Browser-Kursiv deaktivieren */
address { font-style: normal; }

/* Reduced Motion: alle Bewegungseffekte aus */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}