/*
 * Designsystem Manuel Maag - Farb-Tokens
 * Quelle: Claude Design Projekt "Designsystem Manuel Maag"
 * (4946969b-acfa-4275-8150-9baa722d3ceb / Designsystem Manuel Maag.dc.html)
 *
 * Akzent-Variante: "blau" (Standard) - Umschaltung auf "braun" moeglich,
 * dann --accent/--accent-600 auf die Braun-Werte setzen.
 */

:root,
[data-theme="light"] {
    --bg: #faf8f4;
    --surface: #ffffff;
    --surface-2: #f1ebe2;
    --border: #e0d8ca;

    --text: #231a11;
    --text-muted: #6c5c48;

    --brand-brown: #4a361c;
    --brand-brown-600: #2b1f11;
    --brand-blue: #3d78b0;
    --brand-blue-600: #2b5a86;

    --success: #2f7a4f;
    --success-bg: #e6f4ea;
    --warning: #8a5a12;
    --warning-bg: #f8eed7;
    --danger: #a3311f;
    --danger-bg: #f9e6e1;
    --info: #2b5a86;
    --info-bg: #e6eef6;

    --on-brand: #ffffff;

    /* Rahmen fuer Bedienelemente (Inputs, sekundaere Buttons, Umschalter).
       --border ist mit 1.33:1 bewusst dezent und taugt nur fuer dekorative
       Trennlinien und Kartenraender. WCAG 1.4.11 verlangt fuer die
       Begrenzung von Bedienelementen 3:1 - dafuer dieser Wert.
       Geprueft gegen alle drei Flaechen: 3.52 / 3.74 / 3.15:1. */
    --border-strong: #948260;

    /* Akzent fuer Links und Textauszeichnung.
       Nicht --brand-blue (#3d78b0): das erreicht auf dem Seitenhintergrund
       nur 4.39:1 und auf Flaeche alt 3.93:1, verfehlt AA also knapp.
       #356a9c schafft 5.36 / 5.69 / 4.80:1 bei gleichem Farbeindruck.
       --brand-blue bleibt fuer Flaechen und den Logo-Bezug erhalten. */
    --accent: #356a9c;
    --accent-600: var(--brand-blue-600);
}

[data-theme="dark"] {
    --bg: #1c160f;
    --surface: #241d15;
    --surface-2: #2c231a;
    --border: #463a29;

    --text: #f1e9db;
    --text-muted: #c3b5a0;

    --brand-brown: #dab98d;
    --brand-brown-600: #efd0a5;
    --brand-blue: #8fc0e8;
    --brand-blue-600: #b8daf2;

    --success: #7fcc9b;
    --success-bg: #1f3327;
    --warning: #e3ac52;
    --warning-bg: #3a2c15;
    --danger: #e98c77;
    --danger-bg: #3b201a;
    --info: #8fc0e8;
    --info-bg: #1c2c38;

    --on-brand: #1c160f;

    /* 3.92:1 auf Hintergrund, 3.64:1 auf Flaeche, 3.37:1 auf Flaeche alt */
    --border-strong: #857357;

    /* Im Dunkelmodus erreicht das helle Blau bereits 9.28:1 - bleibt wie es ist */
    --accent: var(--brand-blue);
    --accent-600: var(--brand-blue-600);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #1c160f;
        --surface: #241d15;
        --surface-2: #2c231a;
        --border: #463a29;
        --text: #f1e9db;
        --text-muted: #c3b5a0;
        --brand-brown: #dab98d;
        --brand-brown-600: #efd0a5;
        --brand-blue: #8fc0e8;
        --brand-blue-600: #b8daf2;
        --success: #7fcc9b;
        --success-bg: #1f3327;
        --warning: #e3ac52;
        --warning-bg: #3a2c15;
        --danger: #e98c77;
        --danger-bg: #3b201a;
        --info: #8fc0e8;
        --info-bg: #1c2c38;
        --on-brand: #1c160f;
        --border-strong: #857357;
        /* Muss hier mit umgeschaltet werden - --accent ist im Hellmodus
           ein fester Wert und wuerde sonst auf dunklem Grund stehenbleiben. */
        --accent: var(--brand-blue);
    }
}

/* ---------------------------------------------------------------
   Divis Global Colors an die Tokens binden.

   Waehlt man im Builder eine Farbe aus der Palette, schreibt Divi keinen
   Hexwert in die Ausgabe, sondern var(--gcid-...) - und definiert die
   Variable an anderer Stelle als festen Wert. Divi Global Colors kennen
   keinen Dunkelmodus, die Farbe bliebe also in beiden Modi gleich.

   Deshalb zeigt hier jede Palettenfarbe auf das passende Token. Damit
   ist die Farbwahl im Builder moeglich UND folgt dem Modus. Neue Farbe
   noetig? In tools/set-global-colors.php eintragen und hier binden -
   sonst haengt sie im Hellwert fest.

   html:root statt :root, weil Divi seine eigene Definition spaeter im
   Dokument ausgibt; die hoehere Spezifitaet gewinnt.

   Sichtbare Nebenwirkung: Der Farbfleck im Waehler zeigt immer den
   Hellwert, auch wenn die Seite gerade dunkel dargestellt wird.
   --------------------------------------------------------------- */

html:root {
	/* Divis Customizer-Farben - steuern Fliesstext, Ueberschriften und
	   Links ausserhalb der Module. */
	--gcid-body-color:      var(--text);
	--gcid-heading-color:   var(--text);
	--gcid-link-color:      var(--accent);
	--gcid-primary-color:   var(--accent);
	--gcid-secondary-color: var(--brand-brown);

	/* Palette des Designsystems, Reihenfolge wie im Farbwaehler */
	--gcid-mm-text:            var(--text);
	--gcid-mm-text-gedaempft:  var(--text-muted);
	--gcid-mm-hintergrund:     var(--bg);
	--gcid-mm-flaeche:         var(--surface);
	--gcid-mm-flaeche-alt:     var(--surface-2);
	--gcid-mm-rahmen:          var(--border);
	--gcid-mm-rahmen-stark:    var(--border-strong);

	--gcid-mm-akzent:          var(--accent);
	--gcid-mm-blau:            var(--brand-blue);
	--gcid-mm-blau-dunkel:     var(--brand-blue-600);
	--gcid-mm-braun:           var(--brand-brown);
	--gcid-mm-braun-dunkel:    var(--brand-brown-600);
	--gcid-mm-auf-marke:       var(--on-brand);

	--gcid-mm-erfolg:          var(--success);
	--gcid-mm-erfolg-flaeche:  var(--success-bg);
	--gcid-mm-warnung:         var(--warning);
	--gcid-mm-warnung-flaeche: var(--warning-bg);
	--gcid-mm-fehler:          var(--danger);
	--gcid-mm-fehler-flaeche:  var(--danger-bg);
	--gcid-mm-info:            var(--info);
	--gcid-mm-info-flaeche:    var(--info-bg);

	--gcid-mm-schatten:        var(--shadow-color);
	--gcid-mm-schatten-stark:  var(--shadow-color-lg);
}

/* ---------------------------------------------------------------
   Typografie - fluid zwischen 375px und 1440px Viewport
   Schrift: Inter, lokal gehostet (siehe fonts.css)

   Formel je Stufe: clamp( MIN, FAKTOR*1vw + OFFSET, MAX )
   Beispiel H1 (32px @375 -> 44px @1440):
     Steigung = (44-32) / (1440-375) = 0.0113  -> 1.13vw
     Offset   = 32 - 0.0113*375 = 27.8px       -> 1.74rem

   Fliesstext bleibt bewusst fix bei 16px: unter 16px zoomt iOS
   Formularfelder beim Fokus automatisch heran.
   --------------------------------------------------------------- */

:root {
	--fs-hero:    clamp(2rem,      1.50vw + 1.65rem, 3rem);      /* 32 -> 48 */
	--fs-h1:      clamp(2rem,      1.13vw + 1.74rem, 2.75rem);   /* 32 -> 44 */
	--fs-h2:      clamp(1.625rem,  0.56vw + 1.49rem, 2rem);      /* 26 -> 32 */
	--fs-h3:      clamp(1.3125rem, 0.28vw + 1.25rem, 1.5rem);    /* 21 -> 24 */
	--fs-h4:      clamp(1.0625rem, 0.19vw + 1.02rem, 1.1875rem); /* 17 -> 19 */
	--fs-lead:    clamp(1rem,      0.19vw + 0.96rem, 1.125rem);  /* 16 -> 18 */
	--fs-body:    1rem;                                          /* 16 fix   */
	--fs-small:   0.875rem;                                      /* 14 fix   */
	--fs-eyebrow: 0.8125rem;                                     /* 13 fix   */

	--lh-heading: 1.15;
	--lh-body:    1.7;

	--fw-bold:    800;  /* H1, H2 */
	--fw-semi:    700;  /* H3, H4, Buttons */
	--fw-medium:  500;  /* Navigation, Labels */
	--fw-normal:  400;  /* Fliesstext */

	/* Abstaende - 8er-Raster */
	--sp-1:  0.5rem;   /*  8px */
	--sp-2:  1rem;     /* 16px */
	--sp-3:  1.5rem;   /* 24px */
	--sp-4:  2rem;     /* 32px */
	--sp-6:  3rem;     /* 48px */
	--sp-8:  4rem;     /* 64px */
	--sp-12: 6rem;     /* 96px */

	/* Sektionsabstaende - fluid, 48 -> 100px vertikal, 20 -> 32px seitlich */
	--sp-section:   clamp(3rem,     4.88vw + 1.86rem, 6.25rem);
	--sp-section-s: clamp(1.5rem,   2.44vw + 0.93rem, 3.125rem);
	--sp-gutter:    clamp(1.25rem,  1.13vw + 0.99rem, 2rem);

	/* Radien.
	   Die drei haeufig genutzten haengen an Divis Design-Variablen und
	   sind unter Divi -> Design-Variablen einstellbar. Der Wert hinter
	   dem Komma greift nur, falls die Variable dort geloescht wurde. */
	--radius-sm:   var(--gvid-mm-radius-feld,   8px);   /* Eingabefelder */
	--radius-md:   var(--gvid-mm-radius-button, 10px);  /* Buttons */
	--radius-lg:   var(--gvid-mm-radius-karte,  14px);  /* Karten */
	--radius-full: 999px;  /* Pills, Umschalter */

	/* Schatten.
	   Die Farbe steckt in einer eigenen Variablen, weil sie im Dunkelmodus
	   kraeftiger sein muss und ueber eine Global Color auch in Divis
	   Moduleinstellungen zur Verfuegung steht. */
	--shadow-color:    rgba(0, 0, 0, 0.06);
	--shadow-color-lg: rgba(0, 0, 0, 0.25);

	--shadow-sm: 0 1px 3px var(--shadow-color);
	--shadow-lg: 0 10px 30px -12px var(--shadow-color-lg);

	/* Uebergaenge */
	--transition-fast:   150ms ease;
	--transition-normal: 250ms ease;
	--transition-slow:   400ms ease;

	/* Fokus - Zielgroesse interaktiver Elemente min. 44x44px */
	--focus-width:  3px;
	--focus-offset: 2px;
	--tap-target:   44px;
}

/* Auf dunklem Grund tragen weiche Schatten nicht - kraeftiger setzen.
   Nur die Farbe umschalten; die Geometrie bleibt in --shadow-sm/-lg. */
[data-theme="dark"] {
	--shadow-color:    rgba(0, 0, 0, 0.4);
	--shadow-color-lg: rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--shadow-color:    rgba(0, 0, 0, 0.4);
		--shadow-color-lg: rgba(0, 0, 0, 0.6);
	}
}