/* ===========================================================================
 * tokens.css -- Design-Tokens des Shops, Praefix --ams-.
 *
 * Quelle der Werte: CI der Firmenseite, wp-amservice/ci-neu/01-design-tokens.md
 * (Stand 2026-08). Hier stehen nur die WERTE; brand.css der Firmenseite ist
 * an Avada gebunden und wird nicht kopiert. Aenderungen am CI zuerst dort,
 * dann hier nachziehen.
 *
 * Wird als erstes eigenes Stylesheet geladen (inc/stile.php); jede weitere
 * Datei in assets/css/ haengt daran und verwendet nur diese Variablen --
 * keine hartkodierten Farben, Radien oder Abstaende in Komponentendateien.
 *
 * FARBEN: Primaer- und Sekundaerfarbe besitzt Flatsome (Customizer) und gibt
 * sie als --fs-color-primary / --fs-color-secondary aus. Sie werden hier nur
 * referenziert. Zwei Wahrheiten (Customizer UND CSS) sind der Grund fuer
 * Farbabweichungen, die niemand findet.
 * ======================================================================== */

:root {

	/* -- Marke -- nur Verweise auf Flatsome ---------------------------------
	 * Customizer: Primaer #bf0000 (das eine Rot), Sekundaer #8f0000 (Hover).
	 * Fallbacks sind die CI-Werte fuer den Fall, dass Flatsome die Variablen
	 * einmal nicht ausgibt (z. B. in einer Vorschau ohne Theme-CSS).
	 */
	--ams-primary: var(--fs-color-primary, #bf0000);
	--ams-primary-dark: var(--fs-color-secondary, #8f0000);
	--ams-primary-shade: #720000;   /* nur Logo-Verlauf, keine Flaeche */

	/* -- Neutraltoene -------------------------------------------------------
	 * Kontraste laut CI: --ams-ink-3 #6b6b6b erreicht 5,3:1 auf Weiss und
	 * 4,9:1 auf --ams-surface; NICHT aufhellen (WCAG-Fix vom 2026-07-06).
	 * --ams-sage und --ams-indigo sind Dekor, nie Textfarbe.
	 */
	--ams-white: #ffffff;
	--ams-surface: #f5f4f2;      /* warmer Sektions- und Kartenhintergrund */
	--ams-surface-2: #fafaf8;    /* sehr leichter Hauch */
	--ams-ink: #1a1a1a;          /* Fliesstext, dunkle Sektionen, Footer */
	--ams-ink-2: #4a4a4a;        /* Sekundaertext, Lead */
	--ams-ink-3: #6b6b6b;        /* Bildunterschriften, gedaempft */
	--ams-line: #e8e6e1;         /* Rahmen, Trennlinien */
	--ams-line-2: #dcd9d2;       /* Trennlinien auf Surface, wo --ams-line verschwindet (16.09.2026) */
	--ams-navy: #1a2744;         /* Ueberschriften auf dunklem Grund */
	--ams-sage: #849c8e;
	--ams-indigo: #3d436d;

	/* -- Schrift --------------------------------------------------------------
	 * Roboto als Variable Font aus dem CI (assets/fonts/, dieselben Dateien
	 * wie auf www.a-m-service.de), deklariert am Ende dieser Datei. Flatsome
	 * laedt daneben sein Google-Roboto NUR in 400 (Customizer-Variante) --
	 * 500 und 600 waren dadurch vom Browser nachgedickte 400er (gemessen
	 * 14.09.2026, document.fonts: neun Faces, alle 400). Der Familienname
	 * bleibt "Roboto", damit Customizer und CSS dieselbe Schrift meinen.
	 */
	--ams-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ams-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

	/* Typo-Skala als font-Kurzform: font: var(--ams-t-h2); */
	--ams-t-display: 500 clamp(3rem, 5vw, 4.25rem)/1.05 var(--ams-font);
	--ams-t-h1: 500 clamp(2.5rem, 4vw, 3.5rem)/1.1 var(--ams-font);
	--ams-t-h2: 500 clamp(2rem, 3vw, 2.75rem)/1.15 var(--ams-font);
	--ams-t-h3: 500 1.5rem/1.3 var(--ams-font);
	--ams-t-h4: 500 1.15rem/1.4 var(--ams-font);
	--ams-t-lead: 400 1.125rem/1.65 var(--ams-font);
	--ams-t-body: 400 1rem/1.7 var(--ams-font);
	--ams-t-small: 400 0.875rem/1.55 var(--ams-font);
	--ams-t-caption: 500 0.75rem/1.4 var(--ams-font);
	--ams-t-eyebrow-size: 0.78rem;
	--ams-t-eyebrow-tracking: 0.12em;

	/* -- Abstaende, 4er-Raster ------------------------------------------------ */
	--ams-s-1: 4px;
	--ams-s-2: 8px;
	--ams-s-3: 12px;
	--ams-s-4: 16px;
	--ams-s-5: 24px;
	--ams-s-6: 32px;
	--ams-s-7: 48px;
	--ams-s-8: 64px;
	--ams-s-9: 80px;
	--ams-s-10: 120px;

	/* Sektions-Innenabstand oben/unten: Desktop, Tablet, Mobil */
	--ams-section-pad: 120px;
	--ams-section-pad-tablet: 80px;
	--ams-section-pad-mobile: 64px;

	/* Container: Flatsomes site_width steht auf 1920 (Customizer, 14.09.2026,
	   Eugen: "nicht auf 1440 beschraenken"). Den Abstand zum Fensterrand
	   macht der Seitenrand unten (layout.css setzt ihn an .container und an
	   die Zeilen der Sektionen): 1920 -> 96 px, 1440 -> 72 px, Mobil 20 px.
	   Ultrawide bleibt bei 1920 begrenzt. Das CI (1280 + 80) galt fuer die
	   Firmenseite; der Shop ist ein Katalog und nutzt die Breite. */
	--ams-container-max: 1920px;
	--ams-container-pad: clamp(20px, 5vw, 96px);

	/* -- Radien ----------------------------------------------------------------
	 * Pill fuer alle Schaltflaechen und das Suchfeld, Card fuer Kacheln und
	 * Boxen, Image fuer Bilder in Karten. Keine anderen Werte erfinden.
	 */
	--ams-r-pill: 100px;
	--ams-r-card: 10px;
	--ams-r-image: 8px;

	/* -- Schatten -------------------------------------------------------------- */
	--ams-shadow-card: 0 4px 16px rgba(0, 0, 0, .06);
	--ams-shadow-card-hover: 0 12px 32px rgba(0, 0, 0, .10);
	--ams-shadow-cta: 0 4px 16px rgba(191, 0, 0, .25);
	--ams-shadow-cta-hover: 0 8px 24px rgba(191, 0, 0, .30);

	/* -- Bewegung ---------------------------------------------------------------
	 * fast: Farbe, Rahmen. base: Knoepfe, Links. slow: Einblenden, Overlays.
	 */
	--ams-ease-out: cubic-bezier(.22, .61, .36, 1);
	--ams-t-fast: 150ms;
	--ams-t-base: 200ms;
	--ams-t-slow: 400ms;

	/* -- Fokus ------------------------------------------------------------------ */
	--ams-focus-ring: 0 0 0 3px rgba(191, 0, 0, .18);

	/* -- Umbruchpunkte, nur zur Dokumentation (CSS kennt keine Variablen in
	   @media): Mobil bis 640, Tablet 641-1024, Desktop ab 1025. Flatsome
	   selbst bricht bei 550 und 850 (its own grid) -- Komponentendateien
	   richten sich nach Flatsome, wo sie Flatsome-Markup stylen. */
}

/* ===========================================================================
 * SCHRIFT -- Roboto Variable (wght 100-900, wdth 75-125) aus dem CI.
 *
 * Quelle: www.a-m-service.de/wp-content/themes/Avada-Child/assets/fonts/
 * (brand.css der Firmenseite, Stand 14.09.2026), lateinischer Teilsatz.
 * Diese Deklaration steht NACH Flatsomes inline @font-face (nur 400): bei
 * gleicher Passung gewinnt die spaeter deklarierte, also kommen alle
 * Gewichte aus derselben Datei -- kein Mix aus Google-400 und Variable.
 * ======================================================================== */

@font-face {
	font-family: 'Roboto';
	src: url('../fonts/Roboto-latin.woff2') format('woff2');
	font-weight: 100 900;
	font-stretch: 75% 125%;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: url('../fonts/Roboto-Italic-latin.woff2') format('woff2');
	font-weight: 100 900;
	font-stretch: 75% 125%;
	font-style: italic;
	font-display: swap;
}

/* ===========================================================================
 * FOKUS -- Untergrenze fuer alles Bedienbare.
 *
 * Flatsome bringt eigene :focus-visible-Regeln mit; :where() hat Spezifitaet
 * 0 und schliesst nur Luecken, uebersteuert nichts. Ein entfernter Fokusring
 * macht die Seite fuer Tastaturbedienung unbrauchbar -- deshalb steht das
 * hier bei den Tokens und nicht in einer Komponentendatei.
 * ======================================================================== */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--ams-primary);
	outline-offset: 2px;
	box-shadow: var(--ams-focus-ring);
}