/*
 * AVS – Token-Ebene
 *
 * Einzige Stelle, an der Farb-, Typo- und Abstandswerte definiert werden.
 * Alle weiteren Stylesheets greifen ausschliesslich auf diese Variablen zu.
 * Kein Hexwert und keine Pixelgroesse ausserhalb dieser Datei.
 *
 * HINWEIS ZUR FARBWELT:
 * Die Werte unten sind ein tragfaehiger Ausgangspunkt, keine finale
 * Entscheidung. Abschnitt 4 des Briefings verlangt eine eigene Farbwelt,
 * die nicht als Veraqua-Klon lesbar ist – deshalb bewusst kein Blau.
 * Die Richtung ist an das Thema angelehnt: Roestton und warmes Anthrazit,
 * dazu ein sachlicher Papiergrund. Wird die Farbwelt final festgelegt,
 * aendern sich nur die Werte hier, nichts sonst.
 */

:root {

	/* --- Farbe: Grundtoene ------------------------------------------- */

	--avs-anthrazit:      #1c1b19;  /* Dunkle Flaechen, Kopf und Fuss    */
	--avs-espresso:       #2b1d13;  /* Ueberschriften – warm, nicht schwarz */
	--avs-graphit:        #3a3733;  /* Sekundaerer Text                  */
	--avs-stahl:          #6e6a64;  /* Beschriftungen, Hilfstext         */
	--avs-linie:          #d8d5cf;  /* Trennlinien, Rahmen               */
	--avs-grund:          #efeeeb;  /* Flaechiger Seitenhintergrund      */
	--avs-creme:          #f7f1e8;  /* Warme Tonflaeche, Panele          */
	--avs-papier:         #ffffff;  /* Karten, abgesetzte Flaechen       */

	/* --- Farbe: Akzent ------------------------------------------------ */

	/* Die Akzentfarbe stammt jetzt direkt aus dem Logo. Vorher war es
	   ein selbst gewaehlter Roestton – der wirkte neben dem Logo
	   fremd. Eine Marke hat ihre Farbe, sie wird nicht erfunden. */

	--avs-akzent:         #e9521b;  /* Logo-Orange                       */
	--avs-akzent-dunkel:  #c2400f;  /* Hover, gedrueckter Zustand        */
	--avs-akzent-text:    #ab380c;  /* Orange als Textfarbe auf Hell     */
	--avs-akzent-hell:    #fdeae1;  /* Hinterlegte Akzentflaechen        */
	--avs-marke-grau:     #999999;  /* Zweitfarbe aus dem Logo           */

	/* --- Farbe: Zustaende --------------------------------------------- */

	--avs-erfolg:         #2f6b3f;
	--avs-warnung:        #9a6b00;
	--avs-fehler:         #9b2c1f;

	/* --- Farbe: Rollen ------------------------------------------------ */

	--avs-text:           var(--avs-anthrazit);
	--avs-titel:          var(--avs-espresso);
	--avs-text-leise:     var(--avs-stahl);
	--avs-hintergrund:    var(--avs-grund);
	--avs-link:           var(--avs-akzent-text);
	--avs-link-hover:     var(--avs-akzent-dunkel);

	/* Hoehe des Kopfbereichs – wird gebraucht, um den Bildkopf
	   darunter zu schieben, wenn der Kopf transparent darueber liegt. */
	--avs-kopfhoehe:      112px;

	/* --- Schrift ------------------------------------------------------ */

	/* Beide Schriften liegen lokal im Theme, siehe schriften.css. */

	--avs-schrift-text:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--avs-schrift-titel:  "Fraunces", Georgia, "Times New Roman", serif;
	--avs-schrift-daten:  ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	/* --- Schriftgroessen ---------------------------------------------- */

	/* Fliessende Werte: skalieren zwischen 360px und 1280px Fensterbreite
	   mit, ohne Umbruchpunkte. Der Zoll-Wert bleibt dabei zugaenglich. */

	--avs-groesse-xs:     0.8125rem;
	--avs-groesse-s:      0.9375rem;
	--avs-groesse-m:      1rem;
	--avs-groesse-l:      clamp(1.125rem, 0.35vw + 1.05rem, 1.25rem);
	--avs-groesse-xl:     clamp(1.5rem,  0.9vw  + 1.3rem,  2rem);
	--avs-groesse-2xl:    clamp(1.875rem, 1.6vw + 1.5rem,  2.75rem);
	--avs-groesse-3xl:    clamp(2.25rem,  2.6vw + 1.7rem,  3.75rem);

	/* --- Zeilenhoehe und Laufweite ------------------------------------ */

	--avs-zeile-eng:      1.15;
	--avs-zeile-normal:   1.6;
	--avs-zeile-weit:     1.75;
	--avs-laufweite-eng:  -0.015em;

	/* --- Schriftschnitte ---------------------------------------------- */

	--avs-fett-normal:    400;
	--avs-fett-mittel:    500;
	--avs-fett-halb:      600;
	--avs-fett-kraeftig:  700;

	/* --- Abstaende ----------------------------------------------------- */

	/* Stufen im Verhaeltnis 1,5 – bewusst grob, damit Abstaende im
	   Entwurf entschieden und nicht beliebig feinjustiert werden. */

	--avs-abstand-1:      0.25rem;
	--avs-abstand-2:      0.5rem;
	--avs-abstand-3:      0.75rem;
	--avs-abstand-4:      1rem;
	--avs-abstand-5:      1.5rem;
	--avs-abstand-6:      2rem;
	--avs-abstand-7:      3rem;
	--avs-abstand-8:      4rem;
	--avs-abstand-9:      6rem;

	/* Vertikaler Abstand zwischen Seitenabschnitten. Abschnitt 3.1 des
	   Briefings verlangt klar abgesetzte Bloecke – dieser Wert traegt das. */
	--avs-abschnitt:      clamp(3rem, 6vw, 6rem);

	/* --- Breiten ------------------------------------------------------- */

	/* Seitenrand: waechst mit der Fensterbreite mit. Auf dem Telefon
	   knapp, auf dem Schreibtisch grosszuegig – ohne Umbruchpunkte. */
	--avs-rand:           clamp(1.125rem, 4vw, 2.5rem);

	--avs-breite-inhalt:  1180px;  /* Standardcontainer                   */
	--avs-breite-schmal:  680px;   /* Fliesstext, Lesebreite              */
	--avs-breite-weit:    1440px;  /* Bildbaender, Karte                  */

	/* Der Kopfbereich laeuft bewusst breiter als der Inhalt. Logo und
	   Navigation gehoeren an die Aussenkanten, nicht auf die
	   Textbreite eingerueckt – sonst wirkt der Kopf verloren. */
	--avs-breite-kopf:    1680px;

	/* --- Rahmen und Radien --------------------------------------------- */

	--avs-radius-klein:   2px;
	--avs-radius:         4px;
	--avs-radius-gross:   8px;
	--avs-rahmen:         1px solid var(--avs-linie);

	/* --- Schatten ------------------------------------------------------ */

	--avs-schatten-1:     0 1px 2px rgba(28, 27, 25, 0.06);
	--avs-schatten-2:     0 2px 8px rgba(28, 27, 25, 0.08);
	--avs-schatten-3:     0 8px 24px rgba(28, 27, 25, 0.10);

	/* --- Bewegung ------------------------------------------------------ */

	--avs-dauer-kurz:     120ms;
	--avs-dauer:          200ms;
	--avs-verlauf:        cubic-bezier(0.4, 0, 0.2, 1);
}