/* base.css
 *
 * Enthält globale Definitionen wie CSS-Variablen, Farbwerte, Resets und typografische Grundstile.
 * Dieser Bereich ist ideal für zentrale Design-Tokens, wenn sie nicht über `theme.json` definiert sind.
 *
 * Aktuell leer – kann bei Bedarf für globale Anpassungen verwendet werden.
 */

:root {
  /* Farben – Rocket Child Theme */
  --theme-color-primary: #4062BB;
  --theme-color-primary-light: #A3CEF299;
  --theme-color-secondary: #FF499E;
  --color-transparent: transparent;

  /* Weitere globale Variablen können hier ergänzt werden */

  /* Farbzuweisungen für Typography */
  --color-link: inherit;
  --color-link-hover: var(--color-primary);


  /* Fixe Schriftgrössen */
  --theme-font-size-xs: 14px;
  --theme-font-size-sm: 16px;
  --theme-font-size-md: 18px;
  --theme-font-size-lg: 20px;
  --theme-font-size-xl: 22px;
  --theme-font-size-2-xl: 24px;
  --theme-font-size-3-xl: 32px;
  --theme-font-size-4-xl: 36px;
  --theme-font-size-5-xl: 42px;
  --theme-font-size-6-xl: 64px;
  --theme-font-size-7-xl: 84px;
  --theme-font-size-8-xl: 92px;
  --theme-font-size-9-xl: 100px;

  /* ----------------------------------- */
  /* GLOBAL                              */
  /* ----------------------------------- */
  --global-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);

  /* Container-Grössen - Zuweisung der Variabeln */
  --global-max-width-text: 844px;


  /* ----------------------------------- */
  /* HEADER                              */
  /* ----------------------------------- */
  /* Seitenabstand der überarbeiteten Abschnitte: durchgehend 15px pro Seite.
     Zusammen mit der Inhaltsbreite von 1340px ergibt das genau den Entwurf –
     bei 1440 bleiben links und rechts je 50px (20:3155), bei 375 ist der
     Inhalt 345 breit (80:2177).
     WICHTIG: eigene Variable, NICHT --theme-spacing-responsive-gutter des
     Eltern-Themes überschreiben. Jene hängt in theme.json am globalen
     blockGap und am seitlichen Innenabstand aller alignfull-Gruppen – ein
     Überschreiben ändert also sämtliche noch nicht überarbeiteten Blöcke
     auf allen Seiten mit. */
  --content-gutter: 15px;

  /* Maximale Inhaltsbreite der überarbeiteten Seiten (Figma 20:3144 = 1340). */
  --content-max-width: 1340px;

  /* Figma 20:3155 Frame 30 = 1440x88 (Desktop) / 80:3591 = 375x64 (Mobile) */
  --header-height: 88px;
  --header-height-mobile: 64px;
  /* Sticky-Zustand hat dieselbe Höhe wie der Ausgangszustand (Figma 52:2540 / 80:3609).
     Desktop-Wert wird in layout.css ab 1280px überschrieben. */
  --header-height-fixed: 64px;

  /* NAVIGATION                          */
  /* ----------------------------------- */
  --navigation-font-size: var(--wp--preset--font-size--lg);
  --navigation-color-link-hover: var(--color-secondary);
  --navigation-color-link-footer-hover: var(--color-secondary);
  /* ----------------------------------- */
  /* BUTTON                              */
  /* ----------------------------------- */

  /* Button Schrift */
  --button-font-size--base: var(--wp--preset--font-size--sm);
  --button-font-size: var(--wp--preset--font-size--sm);

  /* Button Farben */
  --button-background-color: var(--color-secondary);
  --button-background-color-hover: var(--color-primary);
  --button-color: var(--color-white);
  --button-color-hover: var(--color-white);
  --button-border-color-hover: var(--color-secondary);

  /* Button Border */
  --button-border-radius: 100px;
  --button-border-color: var(--color-secondary);
  --button-border-width: 0;

  /* Button Abstände */
  --button-padding-horizontal: clamp(24px, 5.2vw, 40px);
  --button-padding-vertical: clamp(8px, 2.35vw, 18px);

  /* Wordpress Boxshadow */
  --wp--preset--shadow--natural: var(--global-box-shadow);

  /* ----------------------------------- */
  /* HAMBURGER                           */
  /* ----------------------------------- */
  --hamburger-color: var(--color-white);
  --hamburger-color-notHomeTemplate: var(--color-font);
  --hamburger-color-hover: var(--color-white);
  --hamburger-color-active: var(--color-white);
}