/**
 * Dynamic Styles - Verwendet CSS Variables aus PayloadCMS Style-Einstellungen
 * Diese Datei zeigt, wie die im CMS konfigurierten Styles verwendet werden können
 */

/* Override Tailwind Preflight: subpixel-antialiased für weichere Schrift */
body {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* Überschriften mit CMS-Styles */
h1 {
  font-family: var(--font-h1-family);
  font-size: var(--font-h1-size);
  font-weight: var(--font-h1-weight);
  text-transform: var(--font-h1-transform);
  font-style: var(--font-h1-style);
  line-height: var(--font-h1-line-height);
  letter-spacing: var(--font-h1-letter-spacing);
  color: var(--font-h1-color);
}

/* Parallax Blocks h1 - höhere Spezifität um Tailwind-Klassen zu überschreiben */
.parallax-richtext h1,
.parallax-richtext h1[class] {
  font-family: var(--font-h1-family);
}

/* HeroParallax verwendet die gleiche Font wie Hero */
.hero-parallax-block h1,
.hero-parallax-block h1[class] {
  font-family: var(--font-hero-title-family);
}

h2 {
  font-family: var(--font-h2-family);
  font-size: var(--font-h2-size);
  font-weight: var(--font-h2-weight);
  text-transform: var(--font-h2-transform);
  font-style: var(--font-h2-style);
  line-height: var(--font-h2-line-height);
  letter-spacing: var(--font-h2-letter-spacing);
  color: var(--font-h2-color);
}

h3 {
  font-family: var(--font-h3-family);
  font-size: var(--font-h3-size);
  font-weight: var(--font-h3-weight);
  text-transform: var(--font-h3-transform);
  font-style: var(--font-h3-style);
  line-height: var(--font-h3-line-height);
  letter-spacing: var(--font-h3-letter-spacing);
  color: var(--font-h3-color);
  margin-bottom: 0.5rem;
}

/* RichText: h2 mit Abstand unten, h3+h2 Paar kompakt */
.payload-richtext h2 {
  margin-bottom: 0.5rem;
  font-size: 2rem;
}

.payload-richtext h2 span[style] {
  font-size: inherit !important;
}

.payload-richtext h3 + h2 {
  margin-top: 0;
}

h4 {
  font-family: var(--font-h2-family);
  font-size: var(--font-h3-size);
  font-weight: var(--font-h2-weight);
  text-transform: var(--font-h2-transform);
  font-style: var(--font-h2-style);
  line-height: var(--font-h2-line-height);
  letter-spacing: var(--font-h2-letter-spacing);
  color: var(--font-h2-color);
}

/* Website Hintergrund */
body {
  background-color: var(--color-background-website);
}

/* Fließtext mit CMS-Styles */
body,
p,
.text {
  font-family: var(--font-text-family);
  font-size: var(--font-text-size);
  font-weight: var(--font-text-weight);
  text-transform: var(--font-text-transform);
  font-style: var(--font-text-style);
  line-height: var(--font-text-line-height);
  letter-spacing: var(--font-text-letter-spacing);
  color: var(--font-text-color);
}

/* Links im Fließtext mit CMS-Styles */
a,
.link {
  font-family: var(--font-link-family);
  font-size: var(--font-link-size);
  font-weight: var(--font-link-weight);
  text-transform: var(--font-link-transform);
  font-style: var(--font-link-style);
  line-height: var(--font-link-line-height);
  letter-spacing: var(--font-link-letter-spacing);
  color: var(--font-link-color);
}

a:hover,
.link:hover {
  color: var(--font-link-color-hover);
}

a:active,
.link:active {
  color: var(--font-link-color-active);
}

/* Navigation mit CMS-Styles */
/* Transparent beim Laden - background-color wird nur bei .navigation--scrolled gesetzt */

/* Angebot Block Tabellenkopf */
.angebote .table .thead td {
  background-color: black;
  color: white;
  font-weight: bold;
}
.angebote table .tbody td {
  background-color: black;
  color: white;
  font-weight: bold;
}

.navigation {
  transition:
    background-color 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    -webkit-backdrop-filter 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Navigation Logo - Größe und Farbe auf dem LINK (existiert immer) */
.navigation__logo-link {
  color: var(--nav-logo-color-top, #ffffff);
  display: inline-flex;
  align-items: center;
  height: var(--nav-logo-size-top);
  transition:
    color 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure color inheritance to wrapper div and svg */
.navigation__logo-link > *,
.navigation__logo-link svg {
  color: inherit;
}

/* Logo children - fill parent height */
.navigation__logo-link img,
.navigation__logo-link svg,
.navigation__logo-link > div {
  width: auto;
  height: 100%;
  display: block;
  transform: translateZ(0);
}

/* Apply height to SVG elements inside wrapper div */
.navigation__logo-link > div svg {
  height: 100%;
  width: auto;
}

/* Hover state for top (non-scrolled) - fallback to same color if no hover configured */
.navigation:not(.navigation--scrolled) .navigation__logo-link:hover {
  color: var(--nav-logo-color-top-hover, var(--nav-logo-color-top, #ffffff));
}

/* Scroll state - height and color on the LINK */
.navigation.navigation--scrolled .navigation__logo-link {
  color: var(--nav-logo-color-scroll, #000000);
  height: var(--nav-logo-size-scroll);
}

/* Ensure scroll color inheritance to wrapper div and svg */
.navigation.navigation--scrolled .navigation__logo-link > *,
.navigation.navigation--scrolled .navigation__logo-link svg {
  color: inherit;
}

/* Hover state for scrolled - higher specificity */
.navigation.navigation--scrolled .navigation__logo-link:hover {
  color: var(--nav-logo-color-scroll-hover, #333333);
}

/* Navigation beim Scrollen - Liquid Glass Effekt */
@media (min-width: 768px) {
  .navigation.navigation--scrolled {
    background-color: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.04),
      0 8px 32px rgba(0, 0, 0, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
}

/* Navigation Links (transparent/top) */
.navigation__menu li a:not(.navigation__cta-button),
.navigation__menu li > button,
.navigation__menu .navigation__menu-button {
  font-family: var(--font-navigation-text-family);
  font-size: var(--font-navigation-text-size);
  font-weight: var(--font-navigation-text-weight);
  text-transform: var(--font-navigation-text-transform);
  font-style: var(--font-navigation-text-style);
  line-height: var(--font-navigation-text-line-height);
  letter-spacing: var(--font-navigation-text-letter-spacing);
  color: var(--font-navigation-text-color);
}

.navigation--loaded .navigation__menu li a,
.navigation--loaded .navigation__menu li > button,
.navigation--loaded .navigation__phone,
.navigation--loaded .navigation__cta-button {
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Navigation Links beim Scrollen */
.navigation.navigation--scrolled .navigation__menu li a:not(.navigation__cta-button),
.navigation.navigation--scrolled .navigation__menu li > button,
.navigation.navigation--scrolled .navigation__menu .navigation__menu-button {
  font-family: var(--font-navigation-scroll-text-family);
  font-size: var(--font-navigation-scroll-text-size);
  font-weight: var(--font-navigation-scroll-text-weight);
  text-transform: var(--font-navigation-scroll-text-transform);
  font-style: var(--font-navigation-scroll-text-style);
  line-height: var(--font-navigation-scroll-text-line-height);
  letter-spacing: var(--font-navigation-scroll-text-letter-spacing);
  color: var(--font-navigation-scroll-text-color);
}

.navigation.navigation--scrolled .navigation__menu li a:hover,
.navigation.navigation--scrolled .navigation__menu li > button:hover {
  color: var(--font-navigation-scroll-text-color-hover);
}

.navigation.navigation--scrolled .navigation__menu li a:active,
.navigation.navigation--scrolled .navigation__menu li > button:active {
  color: var(--font-navigation-scroll-text-color-active);
}

/* Navigation CTA Button (Termin buchen) — immer dunkler Hintergrund (wie scroll) */
.navigation__cta-button {
  background-color: var(--font-navigation-scroll-text-color, #3d2e2a);
  color: var(--color-background-navigation, #ffffff);
  font-family: var(--font-navigation-text-family);
  font-size: var(--font-navigation-text-size);
  font-weight: var(--font-navigation-text-weight);
  letter-spacing: var(--font-navigation-text-letter-spacing);
  text-decoration: none;
}

.navigation.navigation--scrolled .navigation__cta-button {
  background-color: var(--font-navigation-scroll-text-color, #3d2e2a);
  color: var(--color-background-navigation, #ffffff);
  font-family: var(--font-navigation-scroll-text-family);
  font-size: var(--font-navigation-scroll-text-size);
  font-weight: var(--font-navigation-scroll-text-weight);
  letter-spacing: var(--font-navigation-scroll-text-letter-spacing);
}

.navigation__cta-button:hover,
.navigation.navigation--scrolled .navigation__cta-button:hover {
  color: var(--color-background-navigation, #ffffff) !important;
}

/* Navigation Telefonnummer - gleiche Styles wie Menu Links */
.navigation .navigation__phone {
  font-family: var(--font-navigation-text-family);
  font-size: var(--font-navigation-text-size);
  color: var(--font-navigation-text-color);
  text-decoration: none;
}

.navigation.navigation--scrolled .navigation__phone {
  font-family: var(--font-navigation-scroll-text-family);
  font-size: var(--font-navigation-scroll-text-size);
  color: var(--font-navigation-scroll-text-color);
}

/* Footer mit CMS-Styles */
.footer {
  background-color: var(--color-background-footer);
}

.footer__block-title {
  font-family: var(--font-footer-title-family);
  font-size: var(--font-footer-title-size);
  font-weight: var(--font-footer-title-weight);
  text-transform: var(--font-footer-title-transform);
  font-style: var(--font-footer-title-style);
  line-height: var(--font-footer-title-line-height);
  letter-spacing: var(--font-footer-title-letter-spacing);
  color: var(--font-footer-title-color);
}

.footer__block-content,
.footer__block-content p {
  font-family: var(--font-footer-text-family);
  font-size: var(--font-footer-text-size);
  font-weight: var(--font-footer-text-weight);
  text-transform: var(--font-footer-text-transform);
  font-style: var(--font-footer-text-style);
  line-height: var(--font-footer-text-line-height);
  letter-spacing: var(--font-footer-text-letter-spacing);
  color: var(--font-footer-text-color);
}

/* Footer Links - Use footer text color and size */
.footer a,
.footer__block-content a {
  color: var(--font-footer-text-color);
  font-size: var(--font-footer-text-size);
}

/* Quote Block Text mit CMS-Styles */
.quote-block__text {
  font-family: var(--font-quote-family);
  font-size: var(--font-quote-size);
  font-weight: var(--font-quote-weight);
  text-transform: var(--font-quote-transform);
  font-style: var(--font-quote-style);
  line-height: var(--font-quote-line-height);
  letter-spacing: var(--font-quote-letter-spacing);
  color: var(--font-quote-color);
}

/* Contact Info im FormWithImageBlock: Lexical-Grids immer 2-spaltig, kein Gap/Margin auf Mobile */
.contact-info-compact .grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

/* Formular-Elemente mit CMS-Styles */
form label {
  font-family: var(--font-form-label-family);
  font-size: var(--font-form-label-size);
  font-weight: var(--font-form-label-weight);
  text-transform: var(--font-form-label-transform);
  font-style: var(--font-form-label-style);
  line-height: var(--font-form-label-line-height);
  letter-spacing: var(--font-form-label-letter-spacing);
  color: var(--font-form-label-color);
}

/* Checkbox Labels mit Form Text Styles */
.checkbox-group-label,
.checkbox-group-label span {
  font-family: var(--font-form-text-family);
  font-size: var(--font-form-text-size);
  font-weight: var(--font-form-text-weight);
  text-transform: var(--font-form-text-transform);
  font-style: var(--font-form-text-style);
  line-height: var(--font-form-text-line-height);
  letter-spacing: var(--font-form-text-letter-spacing);
  color: var(--font-form-text-color);
}

form input,
form textarea,
form select {
  font-family: var(--font-form-text-family);
  font-size: var(--font-form-text-size);
  font-weight: var(--font-form-text-weight);
  text-transform: var(--font-form-text-transform);
  font-style: var(--font-form-text-style);
  line-height: var(--font-form-text-line-height);
  letter-spacing: var(--font-form-text-letter-spacing);
  color: var(--font-form-text-color);
}

form button,
form input[type='submit'] {
  font-family: var(--font-form-button-family);
  font-size: var(--font-form-button-size);
  font-weight: var(--font-form-button-weight);
  text-transform: var(--font-form-button-transform);
  font-style: var(--font-form-button-style);
  line-height: var(--font-form-button-line-height);
  letter-spacing: var(--font-form-button-letter-spacing);
  color: var(--font-form-button-color);
  background-color: var(--font-form-button-background-color);
  border-radius: var(--font-form-button-border-radius);
}

form button:hover,
form input[type='submit']:hover {
  color: var(--font-form-button-color-hover);
  background-color: var(--font-form-button-background-color-hover);
}

form button:active,
form input[type='submit']:active {
  color: var(--font-form-button-color-active);
}

/*
 * HINWEIS: Generische Button-Styles wurden entfernt.
 * CMS-Styles gelten nur für .button-block__button (siehe unten).
 * Andere Buttons (Nav, Language Switcher, etc.) nutzen Tailwind.
 */

/* Hintergrundfarben */
.bg-primary {
  background-color: var(--color-background-primary);
}

.bg-secondary {
  background-color: var(--color-background-secondary);
}

.bg-accent {
  background-color: var(--color-background-accent);
}

/* Optional: Fallback für fehlende CSS Variables */
/* WICHTIG: Keine font-family Fallbacks hier setzen - sie überschreiben CMS-Werte! */
/* Die font-family Werte kommen aus dem inline <style> Tag im <head> */
:root {
  /* Falls keine Style-Einstellungen vorhanden sind, werden diese Defaults verwendet */
  --base-font-size: 16px;

  /* Default line-heights (überschreiben nichts Wichtiges) */
  --font-h1-line-height: normal;
  --font-h2-line-height: normal;
  --font-h3-line-height: normal;
  --font-text-line-height: normal;
  --font-link-line-height: normal;
  --font-navigation-text-line-height: normal;
  --font-navigation-scroll-text-line-height: normal;
  --font-footer-title-line-height: normal;
  --font-footer-text-line-height: normal;
  --font-quote-line-height: normal;
  --font-form-label-line-height: normal;
  --font-form-text-line-height: normal;
  --font-form-button-line-height: normal;
  --font-hero-title-line-height: normal;
  --font-hero-subtitle-line-height: normal;
  --font-button-line-height: normal;

  /* Default Colors */
  --color-background-website: #ffffff;
  --color-background-primary: #ffffff;
  --color-background-secondary: #f5f5f5;
  --color-background-accent: #0070f3;
  --color-background-footer: #1a1a1a;
  --color-background-navigation: #ffffff;

  /* Default Navigation Logo Sizes */
  --nav-logo-size-top: 80px;
  --nav-logo-size-scroll: 50px;
  --nav-logo-size-mobile: 40px;
}

/* Text-Size Utility Klassen */
.text-h1 {
  font-size: var(--font-h1-size);
}

@media (max-width: 768px) {
  .content-container .text-h1 {
    font-size: 2.5rem !important;
  }
  .hero-block h1 {
    font-size: 2rem !important;
    line-height: 2.5rem !important;
  }
  .hero-block h2 {
    font-size: 0.75rem !important;
    line-height: 1.25rem !important;
  }
  h2 {
    font-size: 1.75rem !important;
    line-height: 2.25rem !important;
  }
}

.text-h1 {
  font-size: var(--font-h1-size);
}
/* CTA Mobile */
@media (max-width: 768px) {
  .cta-button {
    font-size: 1rem !important;
    line-height: normal !important;
    padding: 0.75rem 1.5rem !important;
    top: 4% !important;
    right: 5px !important;
    width: 110px !important;
    height: 110px !important;
  }
}

/* Mobile Logo Size Override - set on LINK */
@media (max-width: 768px) {
  /* Mobile Navigation: Immer Scroll-Styles verwenden */
  .navigation__logo-link {
    height: var(--nav-logo-size-mobile) !important;
    color: var(--nav-logo-color-scroll, #000000) !important;
  }

  /* Mobile Navigation: Logo-Link sollte immer Scroll-Styles haben */
  nav.navigation .navigation__logo-link {
    height: var(--nav-logo-size-mobile) !important;
    color: var(--nav-logo-color-scroll, #000000) !important;
  }

  .navigation.navigation--scrolled .navigation__logo-link {
    height: var(--nav-logo-size-mobile) !important;
  }

  /* Mobile Navigation - Liquid Glass Effekt */
  nav.navigation,
  nav.navigation.navigation--scrolled {
    background-color: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.04),
      0 8px 32px rgba(0, 0, 0, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }

  /* Mobile Vollbild-Menu - Seitenhintergrund */
  div.navigation {
    background-color: var(--color-background-website);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
  }

  /* Initial verstecken für Mobile Navigation (vor Animation) */
  nav.navigation.navigation--mobile-hidden {
    transform: translateY(110%);
    opacity: 0;
  }

  /* Desktop: Keine Versteckung */
  @media (min-width: 768px) {
    nav.navigation.navigation--mobile-hidden {
      transform: none;
      opacity: 1;
    }
  }

  /* Mobile Vollbild-Menu - Seitenhintergrund */
  /* div.navigation {
    background-color: var(--color-background-website);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
  } */

  /* Mobile Navigation - Logo und Menu Farben immer gleich (wie beim Scrollen) */
  /* Unabhängig vom Scroll-Status sollten die Farben immer gleich sein */
  /* Diese Regeln überschreiben die Desktop-Styles für Mobile */
  nav.navigation .navigation__logo-link {
    color: var(--nav-logo-color-scroll, #000000) !important;
    height: var(--nav-logo-size-mobile) !important;
  }

  nav.navigation .navigation__logo-link > *,
  nav.navigation .navigation__logo-link svg {
    color: inherit !important;
  }

  nav.navigation .navigation__logo-link:hover {
    color: var(--nav-logo-color-scroll-hover, #333333) !important;
  }

  nav.navigation .navigation__menu li a:not(.navigation__cta-button),
  nav.navigation .navigation__menu li > button,
  nav.navigation .navigation__menu .navigation__menu-button {
    font-family: var(--font-navigation-scroll-text-family) !important;
    font-size: var(--font-navigation-scroll-text-size) !important;
    font-weight: var(--font-navigation-scroll-text-weight) !important;
    text-transform: var(--font-navigation-scroll-text-transform) !important;
    font-style: var(--font-navigation-scroll-text-style) !important;
    line-height: var(--font-navigation-scroll-text-line-height) !important;
    letter-spacing: var(--font-navigation-scroll-text-letter-spacing) !important;
    color: var(--font-navigation-scroll-text-color) !important;
  }

  nav.navigation .navigation__menu li a:hover,
  nav.navigation .navigation__menu li > button:hover {
    color: var(--font-navigation-scroll-text-color-hover) !important;
  }

  nav.navigation .navigation__menu li a:active,
  nav.navigation .navigation__menu li > button:active {
    color: var(--font-navigation-scroll-text-color-active) !important;
  }
}

/* Hero Titel mit CMS-Styles */
.hero-block h1 {
  font-family: var(--font-hero-title-family);
  font-size: var(--font-hero-title-size);
  font-weight: var(--font-hero-title-weight);
  text-transform: var(--font-hero-title-transform);
  font-style: var(--font-hero-title-style);
  line-height: var(--font-hero-title-line-height);
  letter-spacing: var(--font-hero-title-letter-spacing);
  color: var(--font-hero-title-color);
}

/* Hero Subtitle mit CMS-Styles */
.hero-block h2 {
  font-family: var(--font-hero-subtitle-family);
  font-size: var(--font-hero-subtitle-size);
  font-weight: var(--font-hero-subtitle-weight);
  text-transform: var(--font-hero-subtitle-transform);
  font-style: var(--font-hero-subtitle-style);
  line-height: var(--font-hero-subtitle-line-height);
  letter-spacing: var(--font-hero-subtitle-letter-spacing);
  color: var(--font-hero-subtitle-color);
}

/* Hero Small Titel mit CMS-Styles */
.hero-small-block h1 {
  font-family: var(--font-hero-title-family);
  font-size: var(--font-hero-title-size);
  font-weight: var(--font-hero-title-weight);
  text-transform: var(--font-hero-title-transform);
  font-style: var(--font-hero-title-style);
  line-height: var(--font-hero-title-line-height);
  letter-spacing: var(--font-hero-title-letter-spacing);
  color: var(--font-hero-title-color);
}

/* Hero Small Subtitle mit CMS-Styles */
.hero-small-block h2 {
  font-family: var(--font-hero-subtitle-family);
  font-size: var(--font-hero-subtitle-size);
  font-weight: var(--font-hero-subtitle-weight);
  text-transform: var(--font-hero-subtitle-transform);
  font-style: var(--font-hero-subtitle-style);
  line-height: var(--font-hero-subtitle-line-height);
  letter-spacing: var(--font-hero-subtitle-letter-spacing);
  color: var(--font-hero-subtitle-color);
}

/* Button Block mit CMS-Styles */
.button-block__button {
  font-family: var(--font-button-family);
  font-size: var(--font-button-size);
  font-weight: var(--font-button-weight);
  text-transform: var(--font-button-transform);
  font-style: var(--font-button-style);
  line-height: var(--font-button-line-height);
  letter-spacing: var(--font-button-letter-spacing);
  color: var(--font-button-color);
  background-color: var(--font-button-background-color);
  border-radius: var(--font-button-border-radius);
}

.button-block__button:hover {
  color: var(--font-button-color-hover);
  background-color: var(--font-button-background-color-hover);
}

.button-block__button:active {
  color: var(--font-button-color-active);
}

/* Language Switcher - oben rechts fixiert */
.language-switcher {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1001;
  display: flex;
  gap: 0;
  background-color: var(--color-background-website);
  border-bottom-left-radius: 8px;
}

.language-switcher__button {
  /* Reset - keine CMS Button Styles */
  all: unset;
  box-sizing: border-box;
  cursor: pointer;

  /* Eigene Styles */
  padding: 0.25rem 0.5rem;
  font-family: var(--font-navigation-scroll-text-family);
  font-size: var(--font-navigation-scroll-text-size);
  font-weight: var(--font-navigation-scroll-text-weight);
  text-transform: var(--font-navigation-scroll-text-transform);
  font-style: var(--font-navigation-scroll-text-style);
  line-height: var(--font-navigation-scroll-text-line-height);
  letter-spacing: var(--font-navigation-scroll-text-letter-spacing);
  text-decoration: none;
  color: var(--font-navigation-scroll-text-color);
  opacity: 0.7;
  transition:
    opacity 0.3s ease,
    color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.language-switcher__button:hover {
  opacity: 1;
}

.language-switcher__button--active {
  opacity: 1;
  text-underline-offset: 3px;
}

/* Navigation Mobile - unten positioniert */
@media (max-width: 768px) {
  nav.navigation {
    top: auto;
    bottom: 10px;
    left: 1rem;
    right: 1rem;
    width: auto;
    /* Initial state: Navigation auf finaler Position, aber versteckt
       (sichtbar für backdrop-filter Rendering, aber nicht sichtbar für User) */
    transform: translateY(0) translateZ(0);
    opacity: 0;
    visibility: visible;
    will-change: transform, opacity;
  }

  /* Während Animation: GPU-Beschleunigung aktivieren */
  nav.navigation.animate-reveal-up {
    will-change: transform, opacity;
    /* Animation überschreibt die initialen Werte */
  }

  /* Navigation sichtbar, wenn bereits geladen */
  nav.navigation.navigation--loaded {
    transform: translateY(0) translateZ(0);
    opacity: 1;
    will-change: auto;
  }

  /* Mobile Vollbild-Menu - volle Breite, versteckt wenn inaktiv */
  div.navigation {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .navigation .content-container {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    width: 100%;
  }

  /* Mobile: Logo-Container links ausrichten */
  .liquidGlass-wrapper .content-container > div:first-child {
    flex: 0 0 auto;
    justify-content: flex-start;
  }

  /* Mobile: Hamburger Button - Reset und eigene Styles */
  .liquidGlass-wrapper .content-container > button {
    all: unset;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: 2rem;
    height: 1.5rem;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: var(--nav-logo-color-scroll, #000000);
    flex: 0 0 auto;
    margin-left: auto;
  }

  .navigation .content-container > button span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transition:
      transform 0.3s ease,
      opacity 0.3s ease;
  }

  /* Hamburger -> X Animation */
  .navigation .content-container > button.hamburger-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .navigation .content-container > button.hamburger-active span:nth-child(2) {
    opacity: 0;
  }

  .navigation .content-container > button.hamburger-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* Keyframes für Chat Button Animation (synchron mit Navigation) */
  @keyframes chat-button-reveal-up {
    0% {
      transform: translate(-50%, 110%);
      opacity: 0;
    }
    100% {
      transform: translate(-50%, 0);
      opacity: 1;
    }
  }

  /* Chat Button - Mobile: Zentriert in Navigation Bar, Größe wie Burger */
  .chat-widget-button {
    position: fixed !important;
    bottom: 1.75rem !important;
    left: 50% !important;
    top: auto !important;
    right: auto !important;
    z-index: 1000 !important;
    width: 2rem !important;
    height: 1.5rem !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: #000000 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Initial state - versteckt wie Navigation */
    transform: translate(-50%, 110%) !important;
    opacity: 0 !important;
    /* Animation synchron mit Navigation */
    animation: chat-button-reveal-up 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
  }

  /* Wenn Navigation geladen ist, Chat-Button sofort anzeigen (ohne Animation) */
  body:has(nav.navigation.navigation--loaded) .chat-widget-button {
    animation: none !important;
    transform: translate(-50%, 0) !important;
    opacity: 1 !important;
  }

  .chat-widget-button svg {
    width: 2rem !important;
    height: 2rem !important;
    stroke: #000000 !important;
    color: #000000 !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    shape-rendering: crispEdges !important;
    transform: translateZ(0) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    will-change: transform !important;
  }
}

/* ===== Panorama 360° Viewer ===== */
/* Styled to match yet-another-react-lightbox */
.panorama-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panorama-viewer-container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
}

.panorama-viewer-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10001;
  background: transparent;
  border: none;
  padding: 16px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.2s ease;
}

.panorama-viewer-close:hover {
  color: rgba(255, 255, 255, 1);
}

.panorama-viewer-close svg {
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8));
}

.panorama-viewer-pannellum {
  width: 100%;
  height: 100%;
}

/* Hide title by default - matches lightbox which has no title */
.panorama-viewer-title {
  display: none;
}

/* Pannellum controls styling to match lightbox */
.panorama-viewer-pannellum .pnlm-controls-container {
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
}

.panorama-viewer-pannellum .pnlm-zoom-controls,
.panorama-viewer-pannellum .pnlm-fullscreen-toggle-button {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.panorama-viewer-pannellum .pnlm-zoom-in,
.panorama-viewer-pannellum .pnlm-zoom-out,
.panorama-viewer-pannellum .pnlm-fullscreen-toggle-button {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.8) !important;
  width: 48px !important;
  height: 48px !important;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8));
  transition: color 0.2s ease;
}

.panorama-viewer-pannellum .pnlm-zoom-in:hover,
.panorama-viewer-pannellum .pnlm-zoom-out:hover,
.panorama-viewer-pannellum .pnlm-fullscreen-toggle-button:hover {
  color: rgba(255, 255, 255, 1) !important;
}

/* Compass styling */
.panorama-viewer-pannellum .pnlm-compass {
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8));
}

/* Hide chat button and cookie banner when panorama is open */
body.panorama-open .cta-button,
body.panorama-open .chat-widget-button,
body.panorama-open .fixed.bottom-6.left-6 {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ===== Image-Text Block ===== */
.image-text-block {
  padding: 3rem 0;
}

/* Mobile: Fixe min-height für Bild-Spalte */
@media (max-width: 768px) {
  .image-text-block {
    padding-bottom: 0;
  }

  .image-text-block__image-column {
    min-height: 500px;
  }

  /* Mobile: Hero Blöcke auf 500px Höhe */
  .hero-block,
  .hero-small-block {
    height: 500px !important;
  }
}

.image-text-block__heading,
.service-grid__heading,
.testimonials__heading {
  font-family: var(--font-h2-family);
  font-size: var(--font-h2-size);
  font-weight: var(--font-h2-weight);
  text-transform: var(--font-h2-transform);
  font-style: var(--font-h2-style);
  line-height: var(--font-h2-line-height);
  letter-spacing: var(--font-h2-letter-spacing);
  color: var(--font-h2-color);
}

.image-text-block__content,
.service-grid__description {
  font-family: var(--font-text-family);
  font-size: var(--font-text-size);
  line-height: var(--font-text-line-height);
  color: var(--font-text-color);
}

.image-text-block__caption {
  font-size: 0.875rem;
  font-style: italic;
}

/* Override für Text-Invert in ContentGridBlock und anderen Komponenten */
/* Höhere Spezifität als die globale body, p, .text Regel */
.text-invert,
.text-invert p,
.text-invert h1,
.text-invert h2,
.text-invert h3,
.text-invert h4,
.text-invert h5,
.text-invert h6,
.text-invert span,
.text-invert li,
.text-invert a,
.text-invert .prose,
.text-invert .prose p,
.text-invert .prose h1,
.text-invert .prose h2,
.text-invert .prose h3,
.text-invert .prose h4,
.text-invert .prose h5,
.text-invert .prose h6,
.text-invert .prose span,
.text-invert .prose li,
.text-invert .prose a {
  color: #ffffff !important;
}

/* Lexical Table Container - immer 100% Block-Breite */
.lexical-table-container {
  width: 100% !important;
  max-width: 100% !important;
}
.lexical-table {
  width: 100% !important;
  max-width: 100% !important;
}

/* ==============================================
   LIQUID GLASS STYLES
   ============================================== */

.liquidGlass-wrapper {
  position: relative;
  font-weight: 600;
  overflow: hidden;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 0 12px rgba(0, 0, 0, 0.04);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.liquidGlass-effect {
  position: absolute;
  z-index: 0;
  inset: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(3px);
  filter: url(#glass-distortion);
  overflow: hidden;
  transform: translateZ(0);
  will-change: backdrop-filter;
}

.liquidGlass-tint {
  z-index: 1;
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.4);
}

.liquidGlass-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  box-shadow:
    inset 1px 1px 1px 0 rgba(255, 255, 255, 0.08),
    inset -1px -1px 1px 1px rgba(255, 255, 255, 0.05);
}

.liquidGlass-text {
  z-index: 3;
  font-size: 2rem;
  color: black;
}

/* Content Container innerhalb Liquid Glass Wrapper - über allen Layern */
.liquidGlass-wrapper .content-container {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Sicherstellen, dass Liquid Glass Wrapper auf Desktop versteckt ist */
@media (min-width: 768px) {
  .liquidGlass-wrapper {
    display: none !important;
  }
}
.hr .hr-line {
  margin: 0;
  border: 1px solid #ccc;
  padding-top: 1rem;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  height: 1px;
  color: #ccc;
}