/* =========================================
   STICKY HEADER FARBWECHSEL BEIM SCROLLEN
   ========================================= */

/* Sanfter Farbübergang für Hintergrund und Texte */
.site-header-sticky {
  transition: background-color 0.3s ease;
}

.site-header-sticky .wp-block-site-title a,
.site-header-sticky .wp-block-navigation a,
.site-header-sticky .wp-block-navigation-item__label {
  transition: color 0.3s ease;
}

/* 1. HINTERGRUND BEIM SCROLLEN */
.site-header-sticky.is-scrolled {
  background-color: #1a2b3c !important; /* Neue Hintergrundfarbe nach dem Scrollen */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Optional: Leichter Schatten für Tiefe */
}

/* 2. TEXTFARBEN BEIM SCROLLEN (Anpassung für Lesbarkeit) */
.site-header-sticky.is-scrolled .wp-block-site-title a,
.site-header-sticky.is-scrolled .wp-block-site-title,
.site-header-sticky.is-scrolled .wp-block-navigation a,
.site-header-sticky.is-scrolled .wp-block-navigation .wp-block-navigation-item__label {
  color: #ffffff !important; /* Weiße Schrift für perfekten Kontrast */
}

/* 3. OPTIONAL: LINK-HOVER IM GESCROLLTEN ZUSTAND */
.site-header-sticky.is-scrolled .wp-block-navigation a:hover {
  color: #e8eef4 !important; /* Helles Blau-Grau beim Drüberfahren mit der Maus */
}

/* =========================================
   RESPONSIVER HEADER-TITEL (SMARTPHONES)
   ========================================= */

@media (max-width: 768px) {
  /* 1. Titel-Breite dynamisch begrenzen */
  .site-header-sticky .wp-block-site-title {
    max-width: calc(100% - 60px) !important; /* Hält immer 60px Abstand für den Hamburger-Button frei */
    font-size: 0.95rem !important; /* Schrift auf Handys leicht verkleinern */
    line-height: 1.25 !important;
  }

  /* 2. Hamburger-Button schützen */
  .site-header-sticky .wp-block-navigation {
    flex-shrink: 0 !important; /* Verhindert, dass das Menü-Icon gequetscht wird */
  }
}

/* =========================================
   Abstandsgroessen Layout
   ========================================= */
:root {
  --wp--preset--spacing--small: 0.5rem;
  --wp--preset--spacing--medium: 1.0rem;
  --wp--preset--spacing--large: 1.5rem;
  --wp--preset--spacing--xl: 2.5rem;
  --wp--preset--spacing--xxl: clamp(2.5rem, 5vw, 4.0rem);
  --wp--preset--spacing--xxxl: clamp(3.5rem, 8vw, 6.0rem);
  --wp--preset--spacing--xxxxl: clamp(4.5rem, 10vw, 8.0rem);
}


/* =========================================
   Typographie
   ========================================= */
.kompakt-liste li{
    padding-bottom: 0;
    margin-bottom: 4px;
}

/* =========================================
   Galerie
   ========================================= */
   /* Bei grossen Geraeten erstes Bild in voller Breite anzeigen */
   /* Erzwingt das 4:3 Format NUR in der Galerie-Vorschau obwohl Seitenverhaeltnis auf Original eingestellt ist */
    
    /* 1. Setzt die Galerie-Bild-Container auf der Seite fest auf das 4:3 Format */
    .misch-galerie .wp-block-gallery .wp-block-image {
        aspect-ratio: 4 / 3 !important;
        overflow: hidden !important;
    }
    
    /* 2. Schneidet das Bild in der Vorschau zentriert zu */
    .misch-galerie .wp-block-gallery .wp-block-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* 3. REPARATUR: Zwingt den fehlerhaften Lightbox-Container auf die volle Breite */
    .lightbox-image-container {
        width: 100vw !important;
        height: auto !important;
    }
    
    /* 4. Erlaubt dem Bild in der Lightbox, sich wieder im Originalformat zu entfalten */
    .lightbox-image-container figure img {
        aspect-ratio: initial !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 90vh !important;
        object-fit: contain !important;
    }

   /* Bei grossen Geraeten erstes Bild in voller Breite anzeigen */
@media (min-width: 600px) {
    /* Das erste Galeriebild bricht aus und nimmt die volle Breite ein */
    .misch-galerie .wp-block-image:nth-child(1) {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
}


/* =========================================
   HAUPTMENÜ: PERFORMANCE-OPTIMIERTER STRICH
   ========================================= */

/* Basis für Menü-Links vorbereiten */
.wp-block-navigation .wp-block-navigation-item a {
  position: relative;
  text-decoration: none !important;
}

/* Der Strich unter dem Link (Hardware-beschleunigt via GPU) */
.wp-block-navigation .wp-block-navigation-item a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%; /* Strich ist immer 100% breit, wird aber skaliert */
  height: 3px;
  background-color: #d4835e;
  
  /* PERFORMANCE-OPTIMIERUNG: */
  transform: scaleX(0); /* Startzustand: Horizontale Skalierung auf Null (unsichtbar) */
  transform-origin: bottom left; /* Skalierung startet links */
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); /* Ergonomische, sehr geschmeidige Kurve */
  will-change: transform; /* Weist den Browser an, eine eigene Grafik-Ebene anzulegen */
}

/* ANIMATION BEIM HOVERN: Auf volle Größe skalieren */
.wp-block-navigation .wp-block-navigation-item a:hover::after {
  transform: scaleX(1);
}

/* SCHRIFTFARBE BEIM HOVERN NICHT ÄNDERN */
.wp-block-navigation .wp-block-navigation-item a:hover {
  color: inherit !important;
}

/* AKTIVER MENÜPUNKT (Brand Alt Farbe für den Text) */
.wp-block-navigation .wp-block-navigation-item.current-menu-item > a,
.wp-block-navigation .wp-block-navigation-item.current-menu-ancestor > a {
  color: #d4835e !important;
}

/* Strich beim aktiven Element dauerhaft anzeigen */
.wp-block-navigation .wp-block-navigation-item.current-menu-item > a::after {
  transform: scaleX(1);
}

/* =========================================
   BADGES / PILL LABELS
   ========================================= */

/* Basis-Styling für alle Badges */
.badge {
  display: inline-block;
  font-size: 0.75rem; /* Kleine Schrift */
  font-weight: 700; /* Fett gedruckt */
  text-transform: uppercase; /* Großbuchstaben */
  letter-spacing: 0.5px; /* Leicht erhöhter Buchstabenzahl-Abstand */
  padding: 4px 10px; /* Innenabstand (Oben/Unten | Links/Rechts) */
  border-radius: 50px; /* Perfekte Pillen-Form; Standard: var(--wp--preset--border-radius--sm) */
  margin-bottom: 8px; /* Abstand nach unten zur Überschrift */
}

/* Farb-Variante 1: Wichtig / Impfaktion (Dezentes Orange/Rot) */
.badge-orange {
  background-color: #fce8e1; /* Sehr heller, warmer Hintergrund */
  color: #d4835e; /* Deine Brand Alt Farbe */
}

/* Farb-Variante 2: Praxisinfo / Allgemein (Dezentes Grau/Blau) */
.badge-grey {
  background-color: #e8eef4; /* Dein helles Blau-Grau */
  color: #1a2b3c; /* Deine dunkle Markenfarbe */
}

/* =========================================
   Barrierefreiheit
   ========================================= */

/* Globale Links im Fließtext */
a {
  color: var(--wp--preset--color--contrast);
  text-decoration: underline;
  text-underline-offset: 0.2em; /* Schafft etwas Abstand zwischen Text und Linie */
  transition: color 0.2s ease;
}

/* Hover- & Fokus-Zustand */
a:hover,
a:focus-visible {
  color: var(--wp--preset--color--primary-alt);
  text-decoration-thickness: 2px;
}

/* Sichtbarer Fokus-Rahmen für Tastatur-User */
a:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary-alt);
  outline-offset: 3px;
  border-radius: 2px;
}

/* =========================================
   Besonderheiten
   ========================================= */
/* --- Flexibler Mobil-Umbruch --- */
/* 1. Auf Desktop: Den Umbruch im Absatz komplett ignorieren */
@media only screen and (min-width: 769px) {
  .nur-mobil-umbruch br {
    display: none;
  }
}

/* 2. Auf Mobilgeräten: Text ganz normal umbrechen lassen */
@media only screen and (max-width: 768px) {
  .nur-mobil-umbruch {
    white-space: pre-line;
  }
  .nur-mobil-umbruch br {
    display: inline;
  }
}

/* --- Buttons mobil auf volle Breite bringen --- */
@media only screen and (max-width: 768px) {
  /* 1. BUTTONS-CONTAINER: Löst die Block-Verschachtelung für Flexbox auf */
  div.wp-block-buttons.mobil-vollbreite {
    display: block !important; /* Deaktiviert das Flex-Layout von WP */
    width: 100% !important;
    max-width: 100% !important;
    clear: both !important;
  }
  
  /* 2. INNERER BUTTON-WRAPPER: Zwingt das Element auf volle Breite */
  .mobil-vollbreite .wp-block-button {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0 0 12px 0 !important; /* Erzeugt Abstand nach unten */
  }

  /* 3. DER TATSÄCHLICHE LINK: Füllt den Button komplett aus */
  .mobil-vollbreite .wp-block-button__link {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important; /* Verhindert das Rausfallen durch Padding */
  }
}