/*
 Theme Name:        STRYKE Base
 Theme URI:         https://www.strykemarketing.de
 Description:       Basis-Theme von STRYKE Marketing — Hello-Elementor-Child mit Design-System, Theme-Cockpit und Branchen-Blueprints. Voll editierbar in Elementor Pro.
 Author:            STRYKE Marketing
 Author URI:        https://www.strykemarketing.de
 Template:          hello-elementor
 Version:           1.35.0
 Requires at least: 6.1
 Tested up to:      6.9
 Requires PHP:      8.0
 Update URI:        https://updates.strykehub.com/stryke-base
 License:           GNU General Public License v2 or later
 License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:       stryke-base
 Tags:              elementor, child-theme, business, blocks
*/

/* ==========================================================================
   1. Design-Tokens — Rückfallwerte

   ACHTUNG: Die Werte hier sind nur das Sicherheitsnetz. Im Betrieb erzeugt
   inc/class-design-system.php diesen Block aus den Cockpit-Einstellungen und
   hängt ihn NACH dieser Datei ein — dort gesetzte Werte gewinnen also.

   Was hier steht, greift, wenn das Inline-CSS nicht durchkommt (aggressives
   Caching-Plugin, CSS-Datei isoliert geladen). Die Werte entsprechen deshalb
   exakt Settings::defaults(); laufen sie auseinander, springt die Seite beim
   Laden sichtbar um.

   NIE gegen einen Hex-Wert stylen, immer gegen die Variable — der Kunde ändert
   die Farben im Cockpit, und ein fester Wert bricht dann aus dem Schema aus.
   ========================================================================== */

:root {
	/* Markenfarben — Flächen, Rahmen, Grafik */
	--stryke-primary:   #189ba7;  /* Cyan   */
	--stryke-accent:    #ea6b00;  /* Orange */
	--stryke-success:   #22c55e;  /* Grün   */
	--stryke-highlight: #eab308;  /* Gold   */
	--stryke-dark:      #0a0c10;
	--stryke-light:     #b0d4e8;

	/* Dieselben Farben als RGB-Tripel für Transparenzen:
	   background: rgb(var(--stryke-primary-rgb) / 12%); */
	--stryke-primary-rgb:   24 155 167;
	--stryke-accent-rgb:    234 107 0;
	--stryke-success-rgb:   34 197 94;
	--stryke-highlight-rgb: 234 179 8;
	--stryke-dark-rgb:      10 12 16;
	--stryke-light-rgb:     176 212 232;

	/* Typografie — abgeschrieben aus Fonts::available(), nicht geschätzt.
	   Inter liegt als .woff2 im Theme; Monospace ist die Systemschrift, weil
	   das Theme keine eigene Monospace ausliefert und ein Name, den niemand
	   laden kann, nur eine Schrift behauptet, die nirgends ankommt. */
	--stryke-font-heading: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--stryke-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--stryke-font-mono:    ui-monospace, "Cascadia Mono", Consolas, monospace;

	/* Layout */
	--stryke-content-width: 1200px;
	--stryke-radius:        8px;

	/* Abstufungen — bewusst wenige, damit Sektionen einen gemeinsamen Rhythmus
	   haben statt beliebiger Werte pro Baustein. */
	--stryke-space-xs: 0.5rem;
	--stryke-space-sm: 1rem;
	--stryke-space-md: 2rem;
	--stryke-space-lg: 4rem;
	--stryke-space-xl: 6rem;
}

/* Rollen-Variablen je Modus.

   Nur diese drehen sich zwischen hell und dunkel — die Markenfarben bleiben
   gleich. Das Attribut setzt DesignSystem::add_theme_attribute() am
   <html>-Element.

   `*-ink` ist die kontrastgeprüfte Variante einer Markenfarbe für TEXT auf der
   jeweiligen Fläche. Die Primärfarbe erreicht auf Weiß nur rund 3,4:1 und ist
   damit für Fließtext zu schwach — als Fläche hinter weißer Schrift dagegen
   einwandfrei. Deshalb zwei Variablen statt einer. Im Betrieb rechnet PHP die
   Werte aus den Kundenfarben aus; hier stehen sie für die Vorgabefarben.

   Die Werte unten sind ABGESCHRIEBEN von DesignSystem::build_css() mit
   Settings::defaults() — nicht von Hand gewählt. Wer an der Ableitung in
   role_declarations() etwas ändert, muss sie hier nachziehen, sonst springt die
   Seite beim Laden sichtbar um. Nachrechnen:

     wp eval 'echo ( new \StrykeBase\DesignSystem() )->build_css();'

   Bei den VORGABEFARBEN ist `--stryke-on-primary` Weiß, und das geht nur, weil
   die Fläche darunter nicht die rohe Markenfarbe ist: `--stryke-primary-fill`
   dunkelt sie so weit ab, dass Weiß sicher 4,5:1 erreicht. Cyan selbst trüge
   Weiß nur mit 3,3:1 — und Schwarz zwar mit 5,9:1, sähe darauf aber aus wie ein
   Warnschild. Deshalb wandert die Fläche, nicht die Schrift.

   BEI KUNDENFARBEN KANN SIE SCHWARZ SEIN, und darauf darf sich niemand
   festlegen: Eine helle Marke (Creme, Sand) wird nicht abgedunkelt — sie würde
   dabei unkenntlich —, dort ist dunkle Schrift richtig. `on-primary` wird
   deshalb aus der fertigen Fläche nach Leuchtdichte gewählt, nicht gesetzt.

   Die Fläche wird gegen ZWEI Dinge gerechnet: gegen die Schrift darauf (4,5:1)
   und gegen die Seite darunter (3:1, WCAG 1.4.11). Die zweite Prüfung fehlte
   bis 1.11.0 — eine fast weiße Marke blieb dann unverändert und verschwand auf
   einer weißen Seite. Steht in DesignSystem::surface().

   FÜR TEXT AUF DER MARKE also immer das Paar `--stryke-primary-fill` +
   `--stryke-on-primary` nehmen, nie `--stryke-primary` + Weiß. */

/* Jede Rollenfarbe steht zusätzlich als RGB-Tripel da. Das ist kein Beiwerk:
   Nur damit lässt sich eine halbdurchsichtige Fläche bauen, die sich MIT DEM
   MODUS dreht — `rgb(var(--stryke-bg-rgb) / 40%)`. Der Schleier über einem
   Hero-Foto muss im Dunkelmodus abdunkeln und im Hellmodus aufhellen, damit
   die Textfarbe darauf trägt. Wer stattdessen zu einer Markenfarbe greift
   (`--stryke-dark-rgb`), bekommt in einem der beiden Modi unlesbaren Text. */

:root,
[data-theme="light"] {
	color-scheme:         light;
	accent-color:         #137c86;
	--stryke-bg:          #ffffff;
	--stryke-bg-rgb:      255 255 255;
	--stryke-bg-alt:      #ebebeb;
	--stryke-bg-alt-rgb:  235 235 235;
	--stryke-text:        #0a0c10;
	--stryke-text-rgb:    10 12 16;
	--stryke-text-muted:  #606164;
	--stryke-text-muted-rgb: 96 97 100;
	--stryke-border:      #d1d1d1;
	--stryke-border-rgb:  209 209 209;
	--stryke-border-strong: #929292;
	--stryke-border-strong-rgb: 146 146 146;
	--stryke-focus:       #d36000;
	--stryke-focus-rgb:   211 96 0;
	--stryke-primary-ink:  #137c86;
	--stryke-primary-ink-rgb: 19 124 134;
	--stryke-accent-ink:   #bb5600;
	--stryke-accent-ink-rgb: 187 86 0;
	--stryke-primary-fill: #137c86;
	--stryke-primary-fill-rgb: 19 124 134;
	--stryke-accent-fill:  #bb5600;
	--stryke-accent-fill-rgb: 187 86 0;
	--stryke-on-primary:   #f7fafc;
	--stryke-on-primary-rgb: 247 250 252;
	--stryke-on-accent:    #f7fafc;
	--stryke-on-accent-rgb: 247 250 252;
}

[data-theme="dark"] {
	color-scheme:         dark;
	accent-color:         #137c86;
	--stryke-bg:          #0a0c10;
	--stryke-bg-rgb:      10 12 16;
	--stryke-bg-alt:      #1e1f23;
	--stryke-bg-alt-rgb:  30 31 35;
	--stryke-text:        #f7fafc;
	--stryke-text-rgb:    247 250 252;
	--stryke-text-muted:  #a4a7a9;
	--stryke-text-muted-rgb: 164 167 169;
	--stryke-border:      #36383b;
	--stryke-border-rgb:  54 56 59;
	--stryke-border-strong: #5e6062;
	--stryke-border-strong-rgb: 94 96 98;
	--stryke-focus:       #ea6b00;
	--stryke-focus-rgb:   234 107 0;
	--stryke-primary-ink:  #189ba7;
	--stryke-primary-ink-rgb: 24 155 167;
	--stryke-accent-ink:   #ea6b00;
	--stryke-accent-ink-rgb: 234 107 0;
	--stryke-primary-fill: #137c86;
	--stryke-primary-fill-rgb: 19 124 134;
	--stryke-accent-fill:  #bb5600;
	--stryke-accent-fill-rgb: 187 86 0;
	--stryke-on-primary:   #f7fafc;
	--stryke-on-primary-rgb: 247 250 252;
	--stryke-on-accent:    #f7fafc;
	--stryke-on-accent-rgb: 247 250 252;
}

/* ==========================================================================
   2. Grundformatierung

   Bewusst schlank. Hello Elementor liefert den Reset, Elementor Pro das
   Layout. Was hier steht, ist das Sicherheitsnetz: eine Seite OHNE Elementor
   Pro muss lesbar bleiben statt weiß zu werden.
   ========================================================================== */

body {
	background-color: var(--stryke-bg);
	color: var(--stryke-text);
	font-family: var(--stryke-font-body);
	/* Text darf beim Zoomen umbrechen und mitwachsen — feste px-Größen am
	   Body übersteuern die Schriftgröße des Browsers und sind ein
	   Barrierefreiheits-Fehler. */
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--stryke-font-heading);
	color: var(--stryke-text);
	line-height: 1.2;
	/* Lange zusammengesetzte Wörter (Öffnungszeiten, Dienstleistungen …)
	   sprengen sonst auf Mobilgeräten das Layout. */
	overflow-wrap: break-word;
}

a {
	color: var(--stryke-primary-ink);
}

a:hover,
a:focus {
	color: var(--stryke-accent-ink);
}

code, pre, kbd {
	font-family: var(--stryke-font-mono);
}

hr {
	border: 0;
	border-top: 1px solid var(--stryke-border);
}

/* Bilder skalieren mit, statt den Container zu sprengen. */
img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   3. Barrierefreiheit
   ========================================================================== */

/* Der Fokus MUSS sichtbar sein. Wer ihn ausblendet, sperrt Tastaturnutzer aus.
   :focus-visible zeigt ihn nur bei Tastaturbedienung, nicht bei Mausklick.

   `--stryke-focus` UND NICHT `--stryke-accent`, und das ist nachgemessen:
   Die rohe Akzentfarbe ist die einzige Markenfarbe ohne Kontrastprüfung. Alle
   vier ausgelieferten Kits setzen sie auf `#f5b301` — auf weißem Grund sind das
   1,85:1, und zwar an JEDEM Tab-Stopp (23 von 23 am 2026-08-24 gemessen). Über
   den realistischen Farbraum fielen 41,8 % aller Markenfarben durch.

   `--stryke-focus` wird in DesignSystem::roles() gegen die Seitenfarbe UND
   gegen die abgesetzte Fläche auf mindestens 3:1 gerechnet (WCAG 1.4.11,
   2.4.7). Der Ring bleibt damit in jedem Modus und bei jeder Kundenfarbe
   sichtbar — auch wenn die Marke fast weiß ist.

   3px statt 2px: Die Ringstärke ist keine reine Geschmacksfrage. Ein 2-px-Ring
   auf einem 1-px-Rahmen ist schwer vom Ruhezustand zu unterscheiden; WCAG 2.2
   verlangt in 2.4.13 zusätzlich eine Mindestfläche. Wir erfüllen 2.4.13 damit
   nicht zwingend, kommen ihr aber ohne Aufwand näher. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--stryke-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Der Hauptbereich. Das Element erzeugt functions.php über Elementors eigene
   Ausspiel-Aktionen — ohne es gäbe es auf einer Elementor-Seite weder ein
   `<main>` noch ein Ziel für den Sprunglink. Es braucht keine Gestaltung; die
   Klasse steht da, damit man es im Bedarfsfall greifen kann, ohne `main`
   global anzufassen. */
.stryke-main {
	display: block;
}

/* Nur für Screenreader.

   BIS 1.20.0 GELIEHEN, JETZT EIGEN. Die Klasse kam aus Hello Elementors
   `theme.css` — und die hängt an einem Filter (`hello_elementor_enqueue_theme_style`),
   den ein Plugin oder ein anderes Child-Theme abschalten kann. Passiert das,
   wird aus jedem Screenreader-Text sichtbarer Text: der Sprunglink mitten im
   Kopfbereich, die Beschriftung des Vergleichsreglers quer über dem Bild, der
   Ersatztitel des Popups.

   Ein Baustein, dessen Unsichtbarkeit von einer fremden Datei abhängt, ist
   keiner. Die Regel ist bewusst identisch zu der des Parents — liegen beide
   vor, gewinnt diese hier (sie wird später geladen) und ändert nichts. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	word-wrap: normal !important;
}

/* Sichtbar, sobald er den Fokus bekommt — sonst wäre der Sprunglink für
   Tastaturnutzer unauffindbar. */
.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto !important;
	clip-path: none;
	white-space: normal;
}

/* Sprunglink zum Inhalt.

   Das Markup liefert Hello Elementors `header.php`; das Sprungziel `#content`
   erzeugt seit 1.20.0 `functions.php` (siehe stryke_base_main_oeffnen). Hier
   wird nur die sichtbare Form an die Marke angepasst — der Parent zeigt ihn in
   Grau auf Hellgrau. */
.skip-link.screen-reader-text:focus {
	background-color: var(--stryke-primary);
	color: var(--stryke-on-primary);
	border-radius: 0 0 var(--stryke-radius) 0;
	font-family: var(--stryke-font-body);
	font-weight: 500;
}

/* Bewegung reduzieren, wenn das System danach fragt. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   4. Layout-Hilfen
   ========================================================================== */

/* Inhaltsbreite für Bereiche außerhalb von Elementor (Archive, Suche, 404). */
.stryke-container {
	width: 100%;
	max-width: var(--stryke-content-width);
	margin-inline: auto;
	padding-inline: var(--stryke-space-sm);
}

/* Abgesetzte Fläche, z. B. für wechselnde Sektionen. */
.stryke-surface-alt {
	background-color: var(--stryke-bg-alt);
}

/* Mobile first: erst ab Tablet mehr Luft an den Rändern. Die Breakpoints
   entsprechen den Standardwerten von Elementor, damit Theme und Editor nicht
   an verschiedenen Stellen umbrechen. */
@media (min-width: 768px) {
	.stryke-container {
		padding-inline: var(--stryke-space-md);
	}
}