/*
Theme Name: Ignite Group
Theme URI: https://ignite-group.com
Author: Blue World Studio
Author URI: https://blueworld.studio
Description: Theme der Ignite-Group-Website. Basis ist das agenturweite BWS WP DevKit (projekt-agnostisches Blank Theme mit Utility-CSS, Design-Tokens und kuratiertem Reset); diese Fassung traegt die Ignite-Ausbauten und -Abweichungen, dokumentiert in docs/adr/. Die Design-Sektionen leben als Custom Gutenberg Blocks via Blockstudio im Plugin `ignite-group` (ADR 0001/0002), nicht hier.
Version: 0.37.0
Requires at least: 6.7
Requires PHP: 8.2
License: GPL-2.0-or-later
Text Domain: bws-wp-devkit
*/

/* 🔴 UMBENANNT 2026-09-14 (Owner, zum Launch): „BWS WP DevKit" -> „Ignite Group".
   Betroffen ist NUR der Anzeigename im Backend. Bewusst NICHT angefasst:
   - der VERZEICHNISNAME `bws-wp-devkit` — er steht in den Optionen `template`/`stylesheet`
     aller drei Instanzen, in .wp-env.json und in neun Werkzeugen unter tools/. Ein Umbenennen
     ist eine eigene, koordinierte Aenderung, kein Nebenbei-Schritt am Launchtag.
   - die Text Domain `bws-wp-devkit` — sie bleibt an den Uebersetzungsdateien haengen.
   Screenshot: screenshot.png (1200x900), gebaut aus den Projekt-Tokens brand-dark #1e063d,
   accent #0aebbf, text-accent #753bbd in Space Grotesk. */


/* ---------- Root font-size scaling ----------
   Die gesamte Spacing- und Typo-Skala laeuft in rem. Was hier steht, skaliert
   deshalb JEDEN Wert im Projekt gleichzeitig — es ist keine Typo-Regel, es ist
   die Layout-Grundlage.

   🔴 ABWEICHUNG VOM GETEILTEN DEVKIT (Ignite, 2026-08-07, ADR 0010).
   Der portierte Webflow-Verlauf hatte fuenf Baender, die jeweils von 18px auf
   16px liefen und an zwei Stellen NICHT aneinander anschlossen:

       991px -> 18,00px      992px -> 14,00px      (-28 % bei 1px)
       767px -> 18,00px      768px -> 16,01px      (-12 % bei 1px)

   In Webflow ist das richtig: dort hat jeder Breakpoint eine eigene Leinwand,
   und an genau diesen Kanten beginnt ohnehin ein neu entworfenes Layout, das
   den Sprung auffaengt. Diese Voraussetzung fehlt hier — 10 der 21 Sektionen
   haben ueberhaupt keinen Mobile-Entwurf.

   Stattdessen: 360-1440 konstant 16px. Grund ist Figma, nicht Geschmack —
   gezeichnet wird bei 1440 UND bei 360. Sind beide Leinwaende 16px, gilt beim
   Uebertragen ueberall dieselbe Rechnung (Figma-px / 16 = rem, figma-to-css G1).
   Bei einer abweichenden Wurzel braeuchte Mobile einen anderen Divisor, und
   genau dort entstehen geschaetzte Werte.

   Was das kostet: Abstaende schrumpfen auf schmalen Fenstern nicht mehr von
   selbst. Der Mobile-Entwurf muss sagen, wie breit sie dort sind. Das ist fuer
   Sektionen MIT Frame ein Gewinn (gemessen statt geraten) und fuer die ohne
   eine offene Aufgabe. */

/* >= 1440: waechst 16px -> 18px bei 1920. Unveraenderte Basisformel des DevKits. */
html { font-size: calc(0.625rem + 0.4166666666666667vw); }

/* 360-1440: konstant. Beide Figma-Leinwaende rechnen damit identisch. */
@media screen and (max-width: 1440px) { html { font-size: 1rem; } }

/* ---------- Kuratiertes globales Reset ----------
   Nur die portablen Teile aus der Webflow Global CSS (siehe ADR 0002,
   Kategorie 1+2). GSAP-abhängige Parallax-/SplitLine-Regeln bewusst
   ausgelassen, bis das zugehörige JS mitportiert wird. */

/* border-box global — Padding/Border zählen in die Box (wie Figma-Frames messen).
   Ohne diese Regel stapeln min-height + padding (content-box) und Buttons/Cards werden zu groß. */
*, *::before, *::after { box-sizing: border-box; }

/* ---------- Margin-Reset (global, verbindlich, OHNE Ausnahmen) ----------
   ALLE Browser-Default-Margins raus — auch im Rich-Text. Grund: UA-Margins (z.B. `p { margin: 1em 0 }`)
   addieren sich zu Flex-/Grid-`gap`; dadurch stimmen Abstände nicht mehr und man sucht den Fehler in
   der Komponente statt im Reset.
   Abstände werden AUSSCHLIESSLICH über `gap` am Layout-Container gesetzt — nie über Element-Margins.
   Gilt agentur-weit für alle Website-Projekte. */
*, *::before, *::after { margin: 0; }

html {
  font-feature-settings:
    "ss01" 1,
    "ss03" 1,
    "ss04" 1,
    "ss07" 1,
    "zero" 1;
}

body {
  font-family: var(--u-font-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--u-font-heading);
  font-weight: 500;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

::selection {
  background: #E4EAF0;
  color: black;
}

::-moz-selection {
  background: #E4EAF0;
  color: black;
}

p, h1, h2, h3, h4, h5, h6 {
  text-wrap: pretty;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.1em;
}

/* Rich-Text (Gutenberg-Content): KEINE Margin-Ausnahme. Absatz-Abstände kommen — wie überall —
   über `gap` am Container, sobald ein Content-Template gebaut wird. */

::-webkit-scrollbar {
  width: 0;
  display: none;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: transparent;
}

html {
  scrollbar-gutter: stable;
}

[line-clamp="2"] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

[line-clamp="3"] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

[line-clamp="4"] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

textarea {
  resize: none;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
  overflow: clip;
}

img, video {
  height: auto;
}

figure {
  max-width: none;
}

figure div {
  width: 100%;
  max-width: none;
}

/* ---------- Skip-Link (Barrierefreiheit) ----------
   Unsichtbar bis per Tastatur fokussiert. Zielt auf #main, das jedes
   Template (page.php, index.php) auf seinem <main>-Element setzt. */

.u-skip-link {
  position: absolute;
  top: -3rem;
  left: 0;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: #000;
  color: #fff;
  text-decoration: none;
}

.u-skip-link:focus {
  top: 0;
}