/*
 * GraLax4WP – CSS-Variante: Blue Steel
 *
 * Überschreibt die semantischen Variablen aus style.css mit einer
 * metallisch-industriellen Blau-/Stahlpalette. Setzt auf dem kanonischen
 * :root (style.css) auf; alle Komponenten-Styles bleiben unverändert.
 */

/* ── Light Mode (Standard) ──────────────────────────────────────────────── */
:root,
[data-theme="light"] {
  /* Ändere ein paar default Variablem um neue Optik zu erzielen */
  --gralax-radius-mini: 0;
  --gralax-radius-maxi: 0;
  --background-image: url('/wp-content/themes/Gralax4WP/assets/triangle-dark.png');
  --background-image-light: url('/wp-content/themes/Gralax4WP/assets/lightsteel.png');
  --background-image-dark: url('/wp-content/themes/Gralax4WP/assets/darksteel.png');
  

  /* Neue semantische Variablen die für alle css zukünftig genutzt werden sollen für die "Blue Steel"-Variante */
  --body-background-image: var(--background-image-light);
  --body-background-color: var(--gralax-white-hex);
  --body-background-rgb: var(--gralax-white-rgb);
  --body-text-color: var(--gralax-gray-dark-hex);

  --main-background-image: none;
  --main-background-color: var(--gralax-white-hex);
  --main-background-rgb: var(--gralax-white-rgb);
  --main-text-color: inherit;
  --main-button-background-color: var(--gralax-gold-hex);
  --main-button-text-color: var(--gralax-black-hex);
  --main-shadow-box: 0 .2em .4em rgb(var(--gralax-gray-dark-rgb) / 0.4);
  --main-shadow-button: 0 .2em .4em rgb(var(--gralax-blue-dark-rgb) / 0.4);
  --main-shadow-text: none;

  /* Button-System: main (blau), alt (silber), fancy (gold/kupfer) */
  --main-btn-bg:
    radial-gradient(130% 110% at 30% 14%,
      rgb(var(--gralax-gold-rgb) / 0.94) 0%,
      rgb(var(--gralax-blue-light-rgb) / 0.66) 24%,
      transparent 60%),
    radial-gradient(120% 130% at 82% 120%,
      rgb(var(--gralax-white-rgb) / 0.26) 0%,
      transparent 62%),
    linear-gradient(to bottom,
      rgb(var(--gralax-blue-light-rgb) / 0.14) 0%,
      var(--gralax-blue-light-hex) 10%,
      rgb(var(--gralax-blue-dark-rgb) / 0.85) 40%,
      rgb(var(--gralax-black-rgb) / 0.8) 100%);
  --main-btn-border: none;
  --main-btn-shadow:
    .3em .3em 0.6em 0.15em rgb(var(--gralax-blue-dark-rgb) / 0.5),
    .3em .5em 0.4em rgb(var(--gralax-black-rgb) / 0.4),
    inset 0 1px 2px rgb(var(--gralax-blue-light-rgb) / 0.45);
  --main-btn-color: var(--gralax-white-hex);
  --main-btn-hover-color: var(--gralax-black-hex);
  --main-btn-hover-bg:
    radial-gradient(130% 110% at 28% 12%,
      rgb(var(--gralax-white-rgb) / 0.98) 0%,
      rgb(var(--gralax-white-rgb) / 0.6) 24%,
      transparent 62%),
    radial-gradient(120% 140% at 84% 118%,
      rgb(var(--gralax-gold-rgb) / 0.34) 0%,
      transparent 64%),
    linear-gradient(to bottom,
      var(--gralax-blue-light-hex) 0%,
      var(--gralax-blue-light-hex) 8%,
      var(--gralax-blue-dark-hex) 30%,
      var(--gralax-blue-dark-hex) 54%,
      var(--gralax-black-hex) 100%);
  --main-btn-hover-shadow:
    .5em .5em .9em .25em rgb(var(--gralax-blue-dark-rgb) / 0.65),
    .5 .7em .4em rgb(var(--gralax-black-rgb) / 0.4),
    inset 0 1px 2px rgb(var(--gralax-blue-light-rgb) / 0.65),
    inset 0 0 0.5em rgb(var(--gralax-gold-rgb) / 0.15);

  --alt-btn-bg:
    radial-gradient(130% 108% at 34% 16%,
      rgb(var(--gralax-white-rgb) / 0.92) 0%,
      rgb(var(--gralax-gray-light-rgb) / 0.54) 24%,
      transparent 58%),
    radial-gradient(120% 136% at 78% 118%,
      rgb(var(--gralax-blue-light-rgb) / 0.2) 0%,
      transparent 64%),
    linear-gradient(to bottom,
      var(--gralax-white-hex) 0%,
      var(--gralax-gray-light-hex) 14%,
      rgb(var(--gralax-blue-light-rgb) / 0.34) 32%,
      var(--gralax-gray-mid-hex) 64%,
      var(--gralax-gray-dark-hex) 100%);
  --alt-btn-border: none;
  --alt-btn-shadow:
    .28em .32em 0.6em 0.14em rgb(var(--gralax-gray-dark-rgb) / 0.42),
    .32em .5em 0.4em rgb(var(--gralax-black-rgb) / 0.34),
    inset 0 1px 2px rgb(var(--gralax-white-rgb) / 0.58);
  --alt-btn-color: var(--gralax-gray-dark-hex);
  --alt-btn-hover-bg:
    radial-gradient(130% 108% at 30% 14%,
      rgb(var(--gralax-white-rgb) / 1) 0%,
      rgb(var(--gralax-white-rgb) / 0.72) 22%,
      transparent 60%),
    radial-gradient(120% 136% at 78% 116%,
      rgb(var(--gralax-blue-light-rgb) / 0.34) 0%,
      transparent 62%),
    linear-gradient(to bottom,
      var(--gralax-white-hex) 0%,
      var(--gralax-gray-light-hex) 12%,
      rgb(var(--gralax-blue-light-rgb) / 0.42) 30%,
      rgb(var(--gralax-blue-light-rgb) / 0.58) 46%,
      var(--gralax-gray-mid-hex) 70%,
      var(--gralax-gray-dark-hex) 100%);
  --alt-btn-hover-shadow:
    .42em .44em .82em .2em rgb(var(--gralax-gray-dark-rgb) / 0.52),
    .45em .62em 0.4em rgb(var(--gralax-black-rgb) / 0.38),
    inset 0 1px 2px rgb(var(--gralax-white-rgb) / 0.82);

  --fancy-btn-bg:
    radial-gradient(130% 108% at 24% 15%,
      rgb(var(--gralax-white-rgb) / 0.94) 0%,
      rgb(var(--gralax-gold-rgb) / 0.56) 24%,
      transparent 58%),
    radial-gradient(120% 136% at 80% 118%,
      rgb(var(--gralax-copper-rgb) / 0.34) 0%,
      transparent 62%),
    linear-gradient(to bottom,
      var(--gralax-gold-hex) 0%,
      var(--gralax-gold-hex) 10%,
      var(--gralax-copper-hex) 44%,
      var(--gralax-blue-dark-hex) 100%);
  --fancy-btn-border: none;
  --fancy-btn-shadow:
    .3em .34em 0.62em 0.16em rgb(var(--gralax-copper-rgb) / 0.56),
    .34em .54em 0.4em rgb(var(--gralax-black-rgb) / 0.4),
    inset 0 1px 2px rgb(var(--gralax-gold-rgb) / 0.5);
  --fancy-btn-color: var(--gralax-blue-light-hex);
  --fancy-btn-hover-bg:
    radial-gradient(130% 108% at 22% 12%,
      rgb(var(--gralax-white-rgb) / 1) 0%,
      rgb(var(--gralax-gold-rgb) / 0.68) 22%,
      transparent 60%),
    radial-gradient(120% 136% at 80% 116%,
      rgb(var(--gralax-copper-rgb) / 0.42) 0%,
      transparent 62%),
    linear-gradient(to bottom,
      var(--gralax-gold-hex) 0%,
      rgb(var(--gralax-gold-rgb) / 0.95) 8%,
      var(--gralax-copper-hex) 42%,
      var(--gralax-blue-dark-hex) 100%);
  --fancy-btn-hover-shadow:
    .45em .48em .92em .24em rgb(var(--gralax-gold-rgb) / 0.5),
    .5em .66em 0.4em rgb(var(--gralax-black-rgb) / 0.45),
    inset 0 1px 2px rgb(var(--gralax-gold-rgb) / 0.78),
    inset 0 0 0.4em rgb(var(--gralax-copper-rgb) / 0.26);

  /* Legacy Alias bis alle Vorkommen umgestellt sind */
  --btn-plastic-bg: var(--main-btn-bg);
  --btn-plastic-border: var(--main-btn-border);
  --btn-plastic-shadow: var(--main-btn-shadow);
  --btn-plastic-color: var(--main-btn-color);
  --btn-plastic-hover-bg: var(--main-btn-hover-bg);
  --btn-plastic-hover-shadow: var(--main-btn-hover-shadow);
  
  --alt-background-image: var(--background-image-light);
  --alt-background-color: var(--gralax-gray-light-hex);
  --alt-background-rgb: var(--gralax-gray-light-rgb);
  --alt-text-color: var(--gralax-gray-dark-hex);
  --alt-shadow-box: 0 .2em .4em rgb(var(--gralax-gray-dark-rgb) / 0.4);
  --alt-shadow-button: 0 .2em .4em rgb(var(--gralax-blue-dark-rgb) / 0.4);
  --alt-shadow-text: none;

  --fancy-background-image: var(--background-image-dark);
  --fancy-background-color: var(--gralax-black-hex);
  --fancy-background-rgb: var(--gralax-black-rgb);
  --fancy-text-color: var(--gralax-gold-hex);
  --fancy-shadow-box: 0 .2em .4em rgb(var(--gralax-copper-rgb) / 0.4);
  --fancy-shadow-button: 0 .2em .4em rgb(var(--gralax-blue-dark-rgb) / 0.4);
  --fancy-shadow-text: 0 .01em .1em rgb(var(--gralax-blue-light-rgb) / 0.4);

  --menu-main-background-color: transparent;
  --menu-main-text-color: var(--gralax-white-hex);
  --menu-main-shadow: none;
  --menu-sub-background-color: rgb(var(--gralax-black-rgb) / 0.5);
  --menu-sub-text-color: inherit;
  --menu-sub-shadow: .1em .2em .4em rgb(var(--gralax-gray-dark-rgb) / 0.4);

  --menu-mainitem-background-color: rgb(var(--gralax-black-rgb) / 0.2);
  --menu-mainitem-text-color: inherit;
  --menu-mainitem-shadow: .03 0.06em 0.1em rgb(var(--gralax-gray-dark-rgb) / 0.4);
  --menu-subitem-background-color: rgb(var(--gralax-black-rgb) / 0.35);
  --menu-subitem-text-color: inherit;
  --menu-subitem-shadow: .1em .1em .3em rgb(var(--gralax-gold-rgb) / 0.6);

  --hero-bg:                  rgb(var(--background-color-primary-rgb) / 0.55);
  --hero-text:                var(--text-color-primary);
  --hero-title:               var(--hero-text);
  --hero-overlay-padding:     clamp(var(--space-sm), 3vw, var(--space-xl)) clamp(var(--space-sm), 4vw, var(--space-xl));
  --hero-section-min-height:  var(--hero-min-height);

}

/* --  Dark Mode --  */
[data-theme="dark"] {

    /* Neue semantische Variablen die für alle css zukünftig genutzt werden sollen für die "Blue Steel"-Variante */
  --background-image: url('/wp-content/themes/Gralax4WP/assets/kachel.png');
  --body-background-image: none;
  --body-background-color: var(--gralax-black-hex);
  --body-text-color: var(--gralax-gray-light-hex);

  --main-background-image: none;
  --main-background-color: var(--gralax-black-hex);
  --main-text-color: inherit;
  --main-button-background-color: var(--gralax-gold-hex);
  --main-button-text-color: var(--gralax-black-hex);
  --main-shadow-box: rgb(var(--gralax-copper-rgb) / 0.4);
  --main-shadow-button: rgb(var(--gralax-gold-rgb) / 0.6);

  /* Button-Overrides für Dark Mode */
  --main-btn-bg:
    radial-gradient(130% 110% at 30% 14%,
      rgb(var(--gralax-white-rgb) / 0.86) 0%,
      rgb(var(--gralax-white-rgb) / 0.46) 24%,
      transparent 60%),
    radial-gradient(120% 130% at 82% 120%,
      rgb(var(--gralax-gold-rgb) / 0.3) 0%,
      transparent 62%),
    linear-gradient(to bottom,
      rgb(var(--gralax-white-rgb) / 0.1) 0%,
      rgb(var(--gralax-blue-light-rgb) / 0.95) 8%,
      rgb(var(--gralax-blue-dark-rgb) / 0.95) 38%,
      rgb(var(--gralax-black-rgb) / 0.98) 100%);
  --main-btn-hover-bg:
    radial-gradient(130% 110% at 28% 12%,
      rgb(var(--gralax-white-rgb) / 0.96) 0%,
      rgb(var(--gralax-white-rgb) / 0.54) 24%,
      transparent 62%),
    radial-gradient(120% 140% at 84% 118%,
      rgb(var(--gralax-gold-rgb) / 0.38) 0%,
      transparent 64%),
    linear-gradient(to bottom,
      var(--gralax-blue-light-hex) 0%,
      rgb(var(--gralax-blue-light-rgb) / 0.95) 6%,
      var(--gralax-blue-dark-hex) 30%,
      rgb(var(--gralax-blue-dark-rgb) / 0.95) 48%,
      var(--gralax-black-hex) 100%);
  --main-btn-border: 1px solid rgb(var(--gralax-blue-light-rgb) / 0.58);
  --main-btn-color: var(--gralax-blue-dark-hex);

  --alt-btn-bg:
    radial-gradient(135% 110% at 30% 14%,
      rgb(var(--gralax-white-rgb) / 0.82) 0%,
      rgb(var(--gralax-white-rgb) / 0.44) 24%,
      transparent 58%),
    radial-gradient(125% 140% at 82% 118%,
      rgb(var(--gralax-blue-light-rgb) / 0.26) 0%,
      transparent 64%),
    linear-gradient(to bottom,
      rgb(var(--gralax-white-rgb) / 0.14) 0%,
      rgb(var(--gralax-gray-light-rgb) / 0.34) 14%,
      rgb(var(--gralax-gray-mid-rgb) / 0.6) 38%,
      rgb(var(--gralax-gray-dark-rgb) / 0.9) 70%,
      rgb(var(--gralax-black-rgb) / 0.95) 100%);
  --alt-btn-hover-bg:
    radial-gradient(135% 110% at 28% 12%,
      rgb(var(--gralax-white-rgb) / 0.96) 0%,
      rgb(var(--gralax-white-rgb) / 0.58) 24%,
      transparent 60%),
    radial-gradient(125% 140% at 82% 118%,
      rgb(var(--gralax-blue-light-rgb) / 0.34) 0%,
      transparent 62%),
    linear-gradient(to bottom,
      var(--gralax-gray-light-hex) 0%,
      rgb(var(--gralax-gray-light-rgb) / 0.46) 12%,
      rgb(var(--gralax-blue-light-rgb) / 0.46) 34%,
      rgb(var(--gralax-gray-mid-rgb) / 0.7) 62%,
      var(--gralax-black-hex) 100%);
  --alt-btn-border: 1px solid rgb(var(--gralax-white-rgb) / 0.45);
  --alt-btn-color: var(--gralax-gray-light-hex);

  --fancy-btn-bg:
    radial-gradient(130% 110% at 22% 12%,
      rgb(var(--gralax-gold-rgb) / 0.82) 0%,
      rgb(var(--gralax-gold-rgb) / 0.42) 24%,
      transparent 58%),
    radial-gradient(120% 140% at 84% 118%,
      rgb(var(--gralax-copper-rgb) / 0.32) 0%,
      transparent 62%),
    linear-gradient(to bottom,
      rgb(var(--gralax-white-rgb) / 0.1) 0%,
      rgb(var(--gralax-gold-rgb) / 0.32) 10%,
      rgb(var(--gralax-copper-rgb) / 0.92) 42%,
      rgb(var(--gralax-blue-dark-rgb) / 0.95) 100%);
  --fancy-btn-hover-bg:
    radial-gradient(130% 110% at 20% 10%,
      rgb(var(--gralax-white-rgb) / 0.98) 0%,
      rgb(var(--gralax-gold-rgb) / 0.56) 24%,
      transparent 60%),
    radial-gradient(120% 140% at 84% 116%,
      rgb(var(--gralax-copper-rgb) / 0.38) 0%,
      transparent 62%),
    linear-gradient(to bottom,
      var(--gralax-gold-hex) 0%,
      var(--gralax-gold-hex) 9%,
      var(--gralax-copper-hex) 40%,
      var(--gralax-blue-dark-hex) 100%);
  --fancy-btn-border: 1px solid rgb(var(--gralax-gold-rgb) / 0.75);
  --fancy-btn-color: var(--gralax-gray-light-hex);

  --main-btn-shadow:
    0 0 0.7em 0.2em rgb(var(--gralax-blue-dark-rgb) / 0.6),
    0 0.2em 0.5em rgb(var(--gralax-black-rgb) / 0.6),
    inset 0 1px 2px rgb(var(--gralax-blue-light-rgb) / 0.5);
  --main-btn-hover-shadow:
    0 0 1em 0.3em rgb(var(--gralax-blue-dark-rgb) / 0.75),
    0 0.2em 0.4em rgb(var(--gralax-black-rgb) / 0.5),
    inset 0 1px 2px rgb(var(--gralax-blue-light-rgb) / 0.7),
    inset 0 0 0.6em rgb(var(--gralax-gold-rgb) / 0.15);

  --alt-btn-shadow:
    0 0 0.65em 0.12em rgb(var(--gralax-gray-dark-rgb) / 0.45),
    0 0.2em 0.45em rgb(var(--gralax-black-rgb) / 0.55),
    inset 0 1px 2px rgb(var(--gralax-white-rgb) / 0.4);
  --alt-btn-hover-shadow:
    0 0 0.9em 0.2em rgb(var(--gralax-gray-dark-rgb) / 0.55),
    0 0.2em 0.45em rgb(var(--gralax-black-rgb) / 0.6),
    inset 0 1px 2px rgb(var(--gralax-white-rgb) / 0.6);

  --fancy-btn-shadow:
    0 0 0.75em 0.2em rgb(var(--gralax-copper-rgb) / 0.6),
    0 0.2em 0.4em rgb(var(--gralax-black-rgb) / 0.55),
    inset 0 1px 2px rgb(var(--gralax-gold-rgb) / 0.5);
  --fancy-btn-hover-shadow:
    0 0 1em 0.3em rgb(var(--gralax-gold-rgb) / 0.55),
    0 0.2em 0.4em rgb(var(--gralax-black-rgb) / 0.65),
    inset 0 1px 2px rgb(var(--gralax-gold-rgb) / 0.75),
    inset 0 0 0.45em rgb(var(--gralax-copper-rgb) / 0.22);

  /* Legacy Alias bis alle Vorkommen umgestellt sind */
  --btn-plastic-shadow: var(--main-btn-shadow);
  --btn-plastic-hover-shadow: var(--main-btn-hover-shadow);

  --alt-background-image: var(--background-image);
  --alt-background-color: var(--gralax-white-hex);
  --alt-shadow1: rgb(var(--gralax-copper-rgb) / 0.4);
  --alt-shadow2: rgb(var(--gralax-gold-rgb) / 0.6);
  --alt-text-color: var(--gralax-gray-dark-hex);
  --alt-button-background-color: var(--gralax-blue-dark-hex);
  --alt-button-text-color: var(--gralax-white-hex);

  --fancy-background-image: var(--background-image);
  --fancy-background-color: var(--gralax-gray-light-hex);
  --fancy-text-color: var(--gralax-blue-dark-hex);
  --fancy-button-background-color: var(--gralax-copper-hex);
  --fancy-button-text-color: var(--gralax-gray-dark-hex);

  --menu-main-background-color: transparent;
  --menu-main-text-color: inherit;
  --menu-sub-background-color: rgb(var(--gralax-black-rgb) / 0.5);
  --menu-sub-text-color: inherit;

  --menu-mainitem-background-color: rgb(var(--gralax-black-rgb) / 0.5);
  --menu-mainitem-text-color: inherit;
  --menu-subitem-background-color: transparent;
  --menu-subitem-text-color: inherit;


}


/* Standard-Styling für WordPress */
body {
  background-image: var(--body-background-image);
  background-color: var(--body-background-color);
  color: var(--body-text-color);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: 1.6;
  transition: background-image 2s ease-in-out, background-color 2s ease-in-out, color 1.5s ease-in-out;
}


/* Header und Navigation Styling */
header.site-header {
  position: fixed;
  top: 0;
  z-index: 1000;
}

header.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xs);
}

/* Logo-Styling */
header div.logo {
  border-radius: var(--gralax-radius-mini);
  background-color: rgb(var(--body-background-color-rgb) / 0.7);
  transition: background-color 1.8s ease-in-out;
}

header div.logo img {
  max-height: var(--logo-max-height);
  width: auto;
}

html.is-scolled header.site-header > .container {
  background-color: var(--body-background-color);
}

/* Hauptmenü */
header nav.site-navigation {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: flex-start;
  margin: 0 var(--space-md);
  padding: 0;
  z-index: 100
}

header nav .nav-menu {
  display: flex;
  gap: var(--space-sm);
  list-style: none;
  background-color: var(--menu-main-background-color);
  color: var(--menu-main-text-color);
  box-shadow: var(--menu-main-shadow);
  margin: 0;
  padding: var(--space-xs) 0;
  z-index: 200;
}

header nav .nav-menu > li {
  display: inline-block; /* Wichtig für transform */
  background-color: var(--menu-mainitem-background-color);
  color: var(--menu-mainitem-text-color);
  box-shadow: var(--menu-mainitem-shadow);
  backdrop-filter: blur(.5rem);
  -webkit-backdrop-filter: blur(.5rem);
  border-radius: var(--gralax-radius-mini);
  transform: var(--gralax-skew-maxi);
  transition: transform 0.8s ease-in-out;
}

header nav .nav-menu a {
  margin: .1em .7em;
  text-decoration: none;
  color: var(--menu-mainitem-text-color);
}

/* Untermenü */
header nav .nav-menu ul.sub-menu {
  position: absolute;
  display: none;
  min-width: clamp(10em, 10vw, 20em);
  max-width: 25em;
  background-color: var(--menu-sub-background-color);
  color: var(--menu-sub-text-color);
  box-shadow: var(--menu-sub-shadow);
  padding: var(--space-xs) var(--space-2xs);
  z-index: 300;
  animation: fadeOut 1s ease-in-out;

}

header nav .nav-menu .sub-menu li {
  display: block;
  background-color: var(--menu-subitem-background-color);
  color: var(--menu-subitem-text-color);
  box-shadow: var(--menu-subitem-shadow);
  /* transform: var(--gralax-skew-mini); */
  padding: var(--space-xs);
  border-radius: var(--gralax-radius-mini);
  padding: .1em;
  transition: background-color 0.8s ease-in-out, color 0.8s ease-in-out;
  transition-delay: .1s;
}

header nav .nav-menu .sub-menu a {
  display: block;
  text-decoration: none;
  color: var(--menu-subitem-text-color);
  padding-left: var(--space-xs);
  border-radius: var(--gralax-radius-mini);
}

header nav .nav-menu .sub-menu li:has(a:hover) {
  background-color: var(--main-button-background-color);
  color: var(--main-button-text-color);
  transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
}

/* Zeige das Untermenü beim Hover */
header nav .nav-menu li:hover > .sub-menu {
  display: block;
  transition: background-color 0.8s ease-in-out, color 0.8s ease-in-out;
  animation: fadeIn 0.6s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    display: none;
    transform: translateY(-1rem);
  }
  to {
    opacity: 1;
    display: block;
    transform: translateY(0);
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
    display: block;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    display: none;
    transform: translateY(1rem);
  }
}


/* Mobile Navigation */
@media screen and (max-width: 48em) {
  header nav.site-navigation {
    flex-direction: column;
    align-items: flex-start;
  }

  header nav .nav-menu {
    flex-direction: column;
    width: 100%;
    display: none;
  }

  header nav .nav-menu.show {
    display: flex;
  }

  .menu-toggle {
    display: block;
    cursor: pointer;
  }

  /* Mobile Dropdown-Menü */
  header nav .nav-menu .sub-menu {
    position: static;
    display: none;
    background-color: var(--menu-sub-background-color);
    width: 100%;
  }

  header nav .nav-menu .sub-menu li {
    width: 100%;
  }

  header nav .nav-menu li:hover > .sub-menu {
    display: block;
  }
}


/* Boxen */
.box {
  background-color: var(--main-background-color);
  padding: var(--box-padding);
  border-radius: var(--gralax-radius-mini);
}

/* Mobile Optimierung */
@media screen and (max-width: 48em) {
  .wp-block-button__link {
    display: block;
    text-align: center;
  }
}


/* Grid für Frontposts */
section.front.posts {
  background-image: none;
  background-color: transparent;
  color: var(--alt-text-color);
}

section.front.posts .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
  gap: 2em;
  justify-content: center;
}

section.front.posts .grid-item {
  margin: 1em;
  position: relative;
  overflow: hidden;
  padding: var(--box-padding);
  text-align: center;
  transform: var(--gralax-skew-mini);
}

section.front.posts .post {
  background-color: rgb(var(--alt-background-rgb) / 0.6);
  color: var(--alt-button-text-color);
  border-radius: var(--gralax-radius-mini);
  box-shadow: var(--alt-shadow-box);
}

section.front.page-content {
  background-image: var(--main-background-image);
  background-color: var(--main-background-color);
  color: var(--main-text-color);
  border-radius: var(--gralax-radius-mini);
    text-align: center;

}

.post,
.site-content .page {
  border-radius: var(--gralax-radius-mini);
  box-shadow: var(--alt-shadow1);
  padding: var(--box-padding);
  position: relative; /* Erforderlich für das Pseudo-Element */
  overflow: hidden; /* Verhindert Überlauf */
}

.post-image {
  width: 10em;
  height: 4em;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(1.5em);
  border-radius: var(--box-border-radius);
}

.post-image img {
  width: 10em;
  height: auto;
  object-fit: cover;
  border-radius: var(--box-border-radius);
}

.post h2,
.post p {
  margin: 1em auto auto;
  position: relative;
}

.wp-block-button__link,
.btn-primary,
.btn-secondary,
.btn-fancy {
  display: inline-block;
  margin: 0.2em auto;
  padding: 0.4em 1.2em;
  border-radius: var(--gralax-radius-mini);
  background-blend-mode: screen, soft-light, normal;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  transform: var(--gralax-skew-maxi);
  transition: background 0.4s ease-in-out, color 0.4s ease-in-out, transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}

.wp-block-button__link,
.btn-primary {
  background: var(--main-btn-bg);
  color: var(--main-btn-color);
  border: var(--main-btn-border);
  box-shadow: var(--main-btn-shadow);
}

.btn-secondary {
  background: var(--alt-btn-bg);
  color: var(--alt-btn-color);
  border: var(--alt-btn-border);
  box-shadow: var(--alt-btn-shadow);
}

.btn-fancy {
  background: var(--fancy-btn-bg);
  color: var(--fancy-btn-color);
  border: var(--fancy-btn-border);
  box-shadow: var(--fancy-btn-shadow);
}

.wp-block-button__link:hover,
.btn-primary:hover {
  background: var(--main-btn-hover-bg);
  color: var(--main-btn-color);
  box-shadow: var(--main-btn-hover-shadow);
  text-decoration: none;
}

.btn-secondary:hover,
a.btn-secondary:hover {
  background: var(--alt-btn-hover-bg);
  color: var(--alt-btn-color);
  box-shadow: var(--alt-btn-hover-shadow);
  text-decoration: none;
}

.btn-fancy:hover,
a.btn-fancy:hover {
  background: var(--fancy-btn-hover-bg);
  color: var(--fancy-btn-color);
  box-shadow: var(--fancy-btn-hover-shadow);
  text-decoration: none;

}

.hero-cta-row {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.5em;
}

.front.hero-fixed {
  position: relative;
  min-height: var(--hero-section-min-height);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-fixed__overlay {
  background-color: rgb(var(--body-background-rgb) / 0.7);
  padding: var(--space-xl);
  border-radius: var(--gralax-radius-mini);
  box-shadow: var(--main-shadow-box);
  text-align: center;
  max-width: 85vw;
}

.hero-fixed__title {
  color: var(--fancy-text-color);
  margin-bottom: var(--space-sm);
  text-shadow: var(--fancy-shadow-text);
}

.hero-fixed__text {
  color: var(--main-text-color);
  margin-bottom: var(--space-xs);
  text-shadow: var(--main-shadow-text);
}

/* ── Hero: Slider ───────────────────────────────────────────────────────── */
.front.hero-slider {
  position: relative;
  overflow: hidden;
  margin-bottom: 2em;
  min-height: var(--hero-section-min-height);
}

.hero-slider__track {
  display: flex;
  width: 100%;
  height: 100%;
}

.hero-slider__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  flex: 0 0 100%;
  min-height: var(--hero-section-min-height);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
}

.hero-slider__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.hero-slider__overlay {
  background: rgb(var(--gralax-black-rgb) / 0.55);
  padding: var(--hero-overlay-padding);
  border-radius: var(--gralax-radius-mini);
  text-align: center;
  max-width: 43.75rem;
}

.hero-slider__title {
  color: var(--gralax-white);
  font-size: var(--hero-title-size);
  margin-bottom: 0.4em;
}

.hero-slider__text {
  color: var(--gralax-gray-light);
  font-size: var(--hero-text-size);
  margin-bottom: 1em;
}

.hero-slider__btn {
  font-size: 1em;
}

/* Navigations-Pfeile */
.hero-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--menu-main-background-color);
  color: var(--menu-main-text-color);
  border: none;
  cursor: pointer;
  font-size: clamp(1.3rem, 2.3vw, 1.8rem);
  padding: clamp(0.2rem, 0.7vw, 0.3rem) clamp(0.4rem, 1.2vw, 0.6rem);
  border-radius: var(--box-border-radius);
  transition: background 0.25s;
  z-index: 10;
  line-height: 1;
}

.hero-slider__nav:hover {
  background: var(--menu-main-background-color);
}

.hero-slider__prev { left: 0.6em; }
.hero-slider__next { right: 0.6em; }

/* Punkte-Navigation */
.hero-slider__dots {
  position: absolute;
  bottom: 1em;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5em;
  z-index: 10;
}

.hero-slider__dot {
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  background: var(--menu-main-background-color);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s;
}

.hero-slider__dot.is-active,
.hero-slider__dot:hover {
  background: var(--menu-main-text-color);
}

/* ── Eingebettete Seiten ─────────────────────────────────────────────────── */
.front.hero.page-content {
  margin-top: 2em;
}

.front.hero.page-content {
  background-color: var(--alt-background-color);
  background-color: var(--alt-background-color);
  color: var(--alt-text-color);
}

.is-style-text-annotation {
  margin-left: auto;
  margin-right: auto;
}

.custom-footer-widgets {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: var(--space-md);
}

.custom-footer-widget-area {
  flex: 1 1 min(100%, 18rem);
  margin: var(--space-xs);
}

/* ── Landingpage Hero ───────────────────────────────────────────────────── */
.landing-hero {
  position: relative;
  min-height: clamp(22rem, 70vh, 44rem);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-hero__overlay {
  width: 100%;
  background: rgb(var(--gralax-black-rgb) / 0.60);
  padding: clamp(2rem, 5vw, 4rem) var(--hero-overlay-padding-x);
  text-align: center;
}

.landing-hero__title {
  color: var(--gralax-white);
  font-size: var(--hero-title-size);
  line-height: 1.2;
  margin-bottom: 0.4em;
}

.landing-hero__text {
  color: var(--gralax-gray-light);
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  max-width: 43.75rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

.landing-content {
  padding-top: 2em;
  padding-bottom: 2em;
}

/* ── Divider – blauer Spotlight-Trennstreifen (Blue Steel) ─────────────── */
section,
.divider {
  position: relative;
  isolation: isolate;
  overflow: visible;
}


section::before,
.divider::before {
  content: "";
  position: absolute;
  top: -.8em;
  left: 0;
  right: 0;
  height: 1.6em;
  background:
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent calc(50% - 0.05em),
      rgb(var(--gralax-blue-light-rgb) / 0.98) calc(50% - 0.05em),
      rgb(var(--gralax-blue-light-rgb) / 0.98) calc(50% + 0.05em),
      transparent calc(50% + 0.05em),
      transparent 100%
    ),
    radial-gradient(
      40% 50% at 25% 50%,
      rgb(var(--gralax-blue-light-rgb) / 1) 0,
      rgb(var(--gralax-blue-light-rgb) / 1) .2em,
      rgb(var(--gralax-blue-light-rgb) / 0.72) 28%,
      transparent 72%
    );
  pointer-events: none;
  z-index: 2;
}


/* ── Keystones (Blue Steel) ──────────────────────────────────────────────── */
.home .front.keystones {
  background-image: var(--fancy-background-image) ;
  padding: .5em 0;
  margin: 0;
}

.home .keystones__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18em), 1fr));
  align-items: start;
  gap: 0;
  width: 100%;
  margin: 0 auto;
}

.home .keystones__row > .keystone__container {
  display: flex;
  justify-content: center;
  height: 100%;
}

.home .keystone__container:not(:first-child) {
  border-left: .2rem ridge rgb(var(--gralax-blue-light-rgb) / 0.6);
}

.home .keystone {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
      "icon keyword"
      "icon text";
  column-gap: var(--space-md);
  padding: var(--space-xs) var(--space-md);
  align-items: start;
  width: 100%;
  max-width: 32rem; /* optional für schöneres Lesen */
  min-width: 0;
  color: var(--fancy-text-color);
  text-shadow: var(--fancy-shadow-text);
  background-color: rgb(var(--fancy-background-rgb) / 0.4);
  box-shadow: var(--fancy-shadow-box);

}

.home .keystone__icon {
  color: var(--fancy-btn-color);
  grid-area: icon;
  align-self: start;
  font-size: 2rem;
  margin-top: 0.15em; /* optisches Alignment */
  flex-shrink: 0;
}

.home .keystone__keyword {
  grid-area: keyword;
  display: block;
  line-height: 1.25;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.home .keystone__text {
  grid-area: text;
  display: block;
  line-height: 1.4;
  opacity: 0.8;

  font-size: clamp(0.78rem, 1.4vw, 0.9rem);
  font-weight: 600;
}

@media screen and (max-width: 48em) {
  .home .keystones__row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .keystone__container:not(:first-child) {
    border-left: none;
    border-top: 1px solid rgb(var(--gralax-blue-light-rgb) / 0.25);
    padding-left: 0;
    margin-top: 0.4em;
    padding-top: 0.4em;
  }

  .home .keystone__text {
    flex-basis: auto;
    padding-left: 0;
    font-weight: 600;
  }
}

/* ── Preisanfrage-Formular (Blue Steel) ─────────────────────────────────── */
.home section.front.preisanfrage {
  background-color: var(--alt-background-color);
  color: var(--alt-text-color);
  padding: var(--hero-overlay-padding);
}

.preisanfrage__body {
  background-image: var(--fancy-background-image);
  background-position: center;
  color: var(--fancy-text-color);
  border-radius: var(--gralax-radius-mini);
  box-shadow: var(--fancy-shadow-box);
  border: .2em ridge rgb(var(--fancy-background-rgb) / 0.4);
}

.preisanfrage__step-num {
  background: var(--main-btn-bg);
  border: var(--main-btn-border);
  color: var(--main-btn-color);
  box-shadow: var(--main-btn-shadow);
}

.preisanfrage__option {
  border-color: rgb(var(--fancy-background-rgb) / 0.45);
  color: var(--fancy-text-color);
  border-radius: var(--gralax-radius-mini);
  background-color: rgb(var(--fancy-background-rgb) / 0.6);
}

.preisanfrage__option:hover {
  border-color: var(--fancy-background-rgb);
  background-color: rgb(var(--fancy-background-rgb) / 0.35);
}

.preisanfrage__option:has(input:checked) {
  background-color: rgb(var(--fancy-background-rgb) / 0.75);
  border-color: var(--fancy-background-rgb);
  color: var(--fancy-text-color);
}

.preisanfrage__number-input {
  border-color: rgb(var(--fancy-background-rgb) / 0.45);
  color: var(--fancy-text-color);
  border-radius: var(--gralax-radius-mini);
}

.preisanfrage__number-input:focus {
  outline: none;
  border-color: var(--fancy-background-rgb);
  box-shadow: 0 0 0 2px rgb(var(--fancy-background-rgb) / 0.4);
}