/* =============================================================================
   Barth Mediadesign — Design-Tokens
   Richtung B "Bühne", Farbsystem A. Quelle: leitfassung-startseite.html (09/2026).
   Diese Datei ist das Fundament: nur Variablen und ein minimaler Reset.
   Komponenten-CSS gehoert NICHT hierher.
   ========================================================================== */

:root {
  /* --- Farben: Helle Flaechen ------------------------------------------- */
  --paper:        oklch(0.975 0.006 190);
  --dunst:        oklch(0.900 0.014 196);
  --sand:         oklch(0.900 0.020 68);

  /* --- Farben: Tinte (dunkle Buehne) ------------------------------------ */
  --tinte:        oklch(0.300 0.050 196);
  --tinte-deep:   oklch(0.250 0.043 197);
  --tinte-deeper: oklch(0.215 0.037 198);

  /* --- Farben: Petrol ---------------------------------------------------- */
  --petrol:       oklch(0.420 0.064 194);
  --petrol-deep:  oklch(0.365 0.058 194);

  /* --- Farben: Mint (Akzent, Fokus, Kicker) ------------------------------ */
  --mint:         oklch(0.700 0.130 182);
  --mint-tief:    #006A62;
  --mint-hell:    #6AD7C3;

  /* --- Farben: Amber — AUSSCHLIESSLICH an Conversion-Momenten ------------ */
  --amber:        oklch(0.770 0.160 70);
  --amber-deep:   oklch(0.710 0.155 66);
  --amber-ink:    oklch(0.260 0.050 60);

  /* --- Farben: Status ---------------------------------------------------- */
  --err:          oklch(0.720 0.160 32);
  --err-light:    oklch(0.520 0.190 30);

  /* --- Schrift — kein Monospace, keine Serifen --------------------------- */
  --fd: "Bricolage Grotesque", "Instrument Sans", system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --fb: "Instrument Sans", system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* --- Groessenleiter, Faktor > 1,25 zwischen den Stufen ------------------ */
  --fs-h1:   clamp(2.9rem, 8.2vw, 5.9rem);
  --fs-h2:   clamp(2.05rem, 4.6vw, 3.45rem);
  --fs-h3:   clamp(1.35rem, 2.1vw, 1.7rem);
  --fs-body: 1.0625rem;
  --fs-s:    0.9rem;
  --fs-kick: 0.8125rem;

  /* Versalien brauchen Laufweite >= 0.07em, sonst kleben sie. */
  --ls-kick: 0.09em;
  --lh-body: 1.65;

  /* --- Easing ------------------------------------------------------------ */
  --eo: cubic-bezier(0.16, 1, 0.3, 1);    /* ease-out-expo  */
  --eq: cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quint */
  /* Traversal-Kurve: flacher Auslauf fuer Bewegungen, die die Flaeche
     durchqueren — mit --eq waere ein Licht-Sweep vorbei, eh man ihn sieht. */
  --et: cubic-bezier(0.3, 0.35, 0.45, 1);

  --dur-fast: 0.18s;
  --dur-base: 0.3s;
  --dur-slow: 0.6s;

  /* --- Raster und Abstaende ---------------------------------------------- */
  --wrap:   76rem;
  --pad-x:  clamp(1.25rem, 4.5vw, 3.5rem);
  --sec-y:  clamp(4.75rem, 11vw, 8.75rem);
  --head-h: 4rem;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;

  /* --- Radien ------------------------------------------------------------ */
  --radius-s: 4px;    /* Fokusring, Inline-Marker  */
  --radius-m: 16px;   /* Buttons, Felder, Chips    */
  --radius-l: clamp(16px, 2vw, 26px); /* Flaechen, Karten */

  --focus: var(--mint-hell);

  /* --- CI-Zeichen: Winkel und Quadrat ------------------------------------
     Beide Formen stammen 1:1 aus der Bildmarke
     (Logo-Barth-Mediadesign/04-Bildmarke/barth-mediadesign-bildmarke-4c.svg,
     viewBox 0 0 100 100). Der Winkel ist dort
       M0 0 L100 0 L100 14.29 L14.29 14.29 L14.29 100 L0 100 Z
     — die Schenkel fuellen das Quadrat, die Strichstaerke ist 1/7 = 14,2857 %
     der Schenkellaenge. Als Anteil geschrieben statt nachgezeichnet: so
     stimmen die Verhaeltnisse in jeder Groesse, von 5 px bis zum Lockup.
     Das Quadrat braucht keine Formel — ein Quadrat ist ein Quadrat.

     Bedeutung, an die sich jeder Einsatz haelt:
       Winkel  = etwas wird gefasst oder begonnen  (Kontaktblock, Zitat,
                 Aufklappflaeche)
       Quadrat = etwas wird markiert oder beschlossen (Abschnittsmarke,
                 aktiver Menuepunkt, letzte Zeile der Seite)
     Beide nehmen ihre Farbe ueber currentColor aus der Umgebung — damit
     wechselt der Akzent mit dem Grund, ohne dass es eine zweite Regel
     braucht. */
  --ci-winkel: polygon(0 0, 100% 0, 100% 14.2857%, 14.2857% 14.2857%, 14.2857% 100%, 0 100%);
}

@media (min-width: 1140px) {
  :root { --head-h: 4.75rem; }
}

/* --- Minimaler Reset ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
html, body { overflow-x: clip; }

body {
  font-family: var(--fb);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: oklch(0.975 0.006 190 / 0.9);
  background: var(--tinte-deeper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
strong { font-weight: 650; }

h1, h2, h3 { font-family: var(--fd); text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 750; line-height: 1.02; letter-spacing: -0.022em; }
h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.06; letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); font-weight: 650; line-height: 1.18; letter-spacing: -0.008em; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

/* --- Zwei Helfer, die jedes Template braucht ------------------------------ */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-x); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--mint-hell); color: var(--tinte-deeper);
  font: 600 var(--fs-s)/1 var(--fb);
  padding: 0.8rem 1.2rem; border-radius: 10px; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* --- Die beiden CI-Zeichen als Element ------------------------------------
   Ueberall dort, wo das Zeichen im Markup steht statt in einem ::before.
   Immer aria-hidden — es sagt nichts, was der Text nicht sagt. */
.ci-winkel,
.ci-quadrat { display: block; flex: none; background: currentColor; }
.ci-winkel  { width: 0.75rem; aspect-ratio: 1; clip-path: var(--ci-winkel); }
/* 0,357 der Winkelkante — dasselbe Verhaeltnis wie in der Bildmarke. */
.ci-quadrat { width: 0.3125rem; aspect-ratio: 1; }