/* ============================================================
   N7 GmbH · Design Tokens
   ------------------------------------------------------------
   Kanonische Quelle im Theme (N7-BRIEFING-WORDPRESS.md,
   Abschnitt 3): einmal zentral geladen statt wie bisher in
   jeder Sektionsdatei dupliziert. Herleitung der Werte:
   DESIGN-TOKENS.md im Projektwurzelverzeichnis.

   Beim Ueberfuehren der Sektionen in template-parts werden die
   Custom-Property-Bloecke aus den bisherigen HTML-Dateien
   entfernt; dieses Stylesheet uebernimmt ihre Rolle vollstaendig.
============================================================ */

:root {

  /* --- Winkel -----------------------------------------------
     Gemessen an vier Kanten des Logos (Pixel-Regression):
     7-Balken links 28,9° · 7-Balken rechts 29,2° ·
     Giebel links 30,9° · Giebel rechts 30,6° · Mittel 29,9°.
     Gerundet auf 30°, liegt in der Zielspanne 27-32°.
     Ein einziger Winkel für die ganze Seite, nie zwei Schrägen
     gegeneinander verwenden. */
  --n7-angle: 30deg;

  /* --- Chamfer (Gehrung) --------------------------------------
     Drei Größen für drei Einsatzebenen. Die horizontale
     Gegenseite jeder Größe ergibt sich rechnerisch aus
     --n7-angle (CSS-Trigonometrie, Chrome 111+/Safari 17.4+/
     Firefox 108+, damit seit Jahren evergreen): Winkel ändern,
     alle Chamfer folgen automatisch nach.
     Kanonische Ecke fuer den Schnitt: immer unten rechts. */
  --n7-chamfer-sm: 10px;   /* Buttons, Badges */
  --n7-chamfer:    16px;   /* Karten, Bild-Rahmen (Standardgröße) */
  --n7-chamfer-lg: 64px;   /* Diagonalübergang zwischen Sektionen */

  --n7-chamfer-sm-x: calc(var(--n7-chamfer-sm) * tan(var(--n7-angle)));
  --n7-chamfer-x:    calc(var(--n7-chamfer)    * tan(var(--n7-angle)));
  --n7-chamfer-lg-x: calc(var(--n7-chamfer-lg) * tan(var(--n7-angle)));

  /* Referenzwerte in px, falls tan() in einer Alt-Umgebung
     fehlschlägt (10 / 16 / 64px bei 30°): ≈6px / 9px / 37px. */

  /* --- Radius -------------------------------------------------
     Auf der ganzen Seite 0. Wo eine Ecke gebrochen werden soll,
     wird sie angeschrägt (--n7-chamfer-*), nicht gerundet. */
  --n7-radius: 0;

  /* --- Hairlines ------------------------------------------------
     Standardtrenner überall: 1px, niedrige Deckkraft. Zwei
     Farbvarianten für die zwei Grundtöne der Seite (nicht zu
     verwechseln mit den Logo-Tonwerten unten, siehe
     DESIGN-TOKENS.md Abschnitt 3). */
  --n7-hairline-width: 1px;
  --n7-hairline-on-dark: rgba(255, 255, 255, 0.14);
  --n7-hairline-on-light: rgba(23, 23, 23, 0.14);

  /* --- Tonwerte aus dem Logo --------------------------------------
     Median der Pixelfarben je Logoform. Bewusst nicht identisch
     mit --n7-bg-dark: das Logo-Dunkel ist Grafik-Tinte, kein
     Seitenhintergrund (siehe DESIGN-TOKENS.md Abschnitt 4). */
  --n7-tone-dark: #2b2a29;
  --n7-tone-light: #b2b3b3;

  /* --- Seitenpalette ------------------------------------------- */
  --n7-bg-dark: #171717;
  --n7-bg-dark-alt: #1a1a1a;
  --n7-bg-light: #f4f4f4;
  --n7-fg-on-dark: #ffffff;
  --n7-fg-on-dark-muted: #b0b0b0;
  --n7-fg-on-light: #171717;
  --n7-fg-on-light-muted: #4a4a4a;

  /* --- Raster ---------------------------------------------------
     Container und Außenränder aus den gebauten Sektionen
     übernommen (unverändert). */
  --n7-container-max: 1160px;
  --n7-margin: 20px;
  --n7-gutter: 16px;
  --n7-columns: 4;

  /* --- Bewegung (aus der Prozess-Sektion uebernommen) ------------- */
  --n7-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --n7-duration: 500ms;

  /* --- Sticky-Header-Hoehe ----------------------------------------
     Fuer scroll-margin-top an allen Anker-Sektionen (N7-AENDERUNGEN-
     RUNDE-2.md Abschnitt A: Ueberschrift darf nicht unter dem
     Header verschwinden). Werte identisch mit .n7-header-inner
     height in main.css, an derselben Media-Query-Grenze. */
  --n7-header-height: 60px;
}

@media (min-width: 768px) {
  :root {
    --n7-margin: 32px;
    --n7-gutter: 24px;
    --n7-columns: 8;
    --n7-header-height: 72px;
  }
}

@media (min-width: 1024px) {
  :root {
    --n7-columns: 12;
  }
}