/* =========================================================================
 * DFFB 2026 – Design-Tokens
 *
 * Quelle jedes Werts:
 *   [BESTÄTIGT]   = aus Code/Asset belegt (altes CSS oder Nutzerangabe)
 *   [GEMESSEN]    = aus Screenshot/Asset ausgelesen (in Figma final prüfen)
 *   [GESCHÄTZT]   = aus Screenshot grob abgeleitet (in Figma final prüfen)
 *   [60JAHRE]     = aus dem 60jahre.dffb.de-Stylesheet übernommen –
 *                   dort belegt, für dffb-2026 aber NICHT per Figma bestätigt
 *   [UNBESTÄTIGT] = Annahme / Platzhalter – aus Figma verifizieren
 * ===================================================================== */
:root {
	/* --- Farben: Standard-Modus --- */
	--color-bg:        #f4516a; /* [BESTÄTIGT] Basis-Rot (Nutzerangabe) */
	--color-text:      #000000; /* [BESTÄTIGT] schwarze Typo */
	--color-surface:   #ffffff; /* [UNBESTÄTIGT] Karten-/Flächenhintergrund */
	--color-accent:    #f4516a; /* [BESTÄTIGT] aktive Navigation (add.css) */
	--color-on-accent: #000000; /* [UNBESTÄTIGT] */
	--color-border:    #000000; /* [BESTÄTIGT] schwarze Konturen (Lang-Badges) */
	/* --- Schrift (aus altem app.css) --- */
	/* Hauptschrift Body + große Headlines */
	--font-body: Allianz, system-ui, -apple-system, BlinkMacSystemFont,
	             "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; /* [BESTÄTIGT] */
	/* Druk: kleine Versal-Labels (Sprachumschalter, „Menü") */
	--font-druk: Druk, Impact, Haettenschweiler, "Franklin Gothic Bold",
	             Charcoal, "Helvetica Inserat", "Arial Black", sans-serif;            /* [BESTÄTIGT] */
	/* Syncro: Mono (Code) */
	--font-mono: Syncro, Menlo, Monaco, Consolas, "Liberation Mono",
	             "Courier New", monospace;                                            /* [BESTÄTIGT] */
	--fw-light:   300; /* [BESTÄTIGT] aktive Navigation */
	--fw-regular: 400; /* [BESTÄTIGT] */
	--fw-bold:    700; /* [BESTÄTIGT] */
	/* --- Typo-Skala (aus altem app.css) --- */
	--fs-xs: 0.5rem; /* [BESTÄTIGT] 18px */
	--fs-sm: 0.75rem; /* [BESTÄTIGT] 18px */
	--fs-base: 1rem; /* [BESTÄTIGT] 18px */
	--fs-smd: 1.5rem; /* [BESTÄTIGT] 18px */
	--fs-md: 2rem; /* [BESTÄTIGT] 18px */
	--lh-base: 1.5;      /* [BESTÄTIGT] */
	--lh-md: 1.2;      /* [BESTÄTIGT] */
	--lh-lg: 1;      /* [BESTÄTIGT] */
	--fs-h1: 4rem;     /* [BESTÄTIGT] */
	--fs-h2: 3rem;       /* [BESTÄTIGT] */
	--fs-h3: 2rem;       /* [BESTÄTIGT] */
	--fs-h4: 1.125rem;   /* [BESTÄTIGT] */
	--fs-druk: 0.75rem;  /* [BESTÄTIGT] .druk */
	/* --- Layout / Grid --- */
	--container-max: 1000px;   /* [UNBESTÄTIGT] aus Figma bestätigen */
	--container-pad: 0rem;     /* [UNBESTÄTIGT] äußerer Seitenrand */
	--grid-cols: 12;           /* [BESTÄTIGT] 12er-Grid */
	--grid-gap: 1rem;          /* [UNBESTÄTIGT] Spaltenabstand */
	/* --- Header --- */
	--header-height: 80px;                    /* [GEMESSEN] Figma-Label 1146x80 */
	--header-top:    20px;                     /* [UNBESTÄTIGT] „etwas Abstand nach oben" */
	--header-pad:    20px;                     /* [laut Beschreibung] ~20px */
	--header-cols:   10;                       /* [BESTÄTIGT] Header über 10 Spalten */
	--header-bg:     rgba(255,255,255,0.4);    /* [GEMESSEN/Näherung] weiß-transluzent */
	--header-blur:   16px;                     /* [UNBESTÄTIGT] Stärke des Backgroundblur */
	--header-inner-blur: 8px;                  /* [UNBESTÄTIGT] Blur für innere Felder (Suche) */
	--header-radius: 5px;                      /* [BESTÄTIGT vom Nutzer] Eckenradius */
	/* --- Footer ---
	 * Layout-Mechanik + Maße aus 60jahre.dffb.de übernommen [60JAHRE].
	 * Für dffb-2026 gegen Figma prüfen. */
	--footer-bg:          transparent;         /* [UNBESTÄTIGT] Screenshot nicht eindeutig – ggf. #ffffff */
	--footer-border:      var(--color-border); /* [60JAHRE] Button-Kontur 1px schwarz */
	--footer-fs:          1rem;                /* [60JAHRE] 16px Basis */
	--footer-lh:          1.4;                 /* [60JAHRE] */
	--footer-py:          var(--space-lg);     /* [UNBESTÄTIGT] 60jahre: 30px – hier 2rem */
	--footer-gap:         1.5rem;              /* [60JAHRE] Spaltenabstand 40px */
	--footer-gap-social:  18px;                /* [60JAHRE] Abstand der Social-Icons */
	--footer-btn-radius:  3px;                 /* [60JAHRE] .button--outline */
	--footer-btn-px:      2rem;                /* [60JAHRE] Button-Padding horizontal */
	--footer-btn-py:      0.5rem;              /* [60JAHRE] Button-Padding vertikal */
	--footer-icon-size:   22px;               /* [60JAHRE] SVG width/height */
	--footer-logo-height: 32px;               /* [60JAHRE] Senatskanzlei-Logo-Höhe */
	/* --- Abstände --- */
	--space-xs: 0.25rem; /* [UNBESTÄTIGT] */
	--space-sm: 0.5rem;  /* [UNBESTÄTIGT] */
	--space-md: 1rem;    /* [UNBESTÄTIGT] */
	--space-lg: 2rem;    /* [UNBESTÄTIGT] */
	--space-xl: 4rem;    /* [UNBESTÄTIGT] */

	
	--color-muted:     #505050; /* [60JAHRE] Sekundärtext (Meta/Datum) */
--color-line:      #e5e5e5; /* [60JAHRE] Platzhalter-/Trennfarbe */
}
/* --- Farbmodus „alt" (Kontrast/Helligkeit) ------------------------------ */
.alt-color-scheme {
	--color-bg:   #ffffff;                  /* [BESTÄTIGT] alt:bg-white */
	--color-text: #000000;                  /* [UNBESTÄTIGT] */
	--header-bg:  rgba(0,0,0,0.06);         /* [UNBESTÄTIGT] Header über weißem BG */
}


	@media (max-width: 1400px) {
		--container-max: 80%;   /* [UNBESTÄTIGT] aus Figma bestätigen */

}

@media (max-width: 960px){
	:root {
		--fs-h1: 2rem;     /* [BESTÄTIGT] */
	--fs-h2: 1.5rem;       /* [BESTÄTIGT] */
	--fs-h3: 1rem;       /* [BESTÄTIGT] */
		
	}	
}