/*
Theme Name: Ästhetik Fünf Höfe
Theme URI: https://aesthetik-fuenfhoefe.de
Description: Child Theme von GeneratePress für Ästhetik Fünf Höfe – Ästhetische Medizin in den Fünf Höfen, München. Erscheinungsbild angelehnt an zahnarzt-fuenfhoefe.de.
Author: Jenny Wullich
Author URI: https://jenny-wullich.de
Template: generatepress
Version: 0.1.0
Text Domain: aesthetik-fuenfhoefe
*/

/* Schriften, Farben, Abstände: im Customizer (GeneratePress) und in den Blöcken.
   Hier steht nur, was GenerateBlocks nicht als Einstellung anbietet. */

/* Gleich hohe Karten: Innenraum als Spalte, letzte Zeile rutscht ans Kartenende */
.ae-karte > .gb-inside-container { display: flex; flex-direction: column; height: 100%; }
.ae-unten { margin-top: auto !important; padding-top: .8rem; }

/* Überschriften ausgewogen umbrechen */
h1, h2, h3 { text-wrap: balance; }

/* Sprungziele landen nicht unter dem klebenden Kopf */
[id] { scroll-margin-top: 96px; }


/* ---------------------------------------------------------------------------
   Nunito Sans, lokal eingebunden – wie auf zahnarzt-fuenfhoefe.de.
   Keine Verbindung zu Google-Servern, damit DSGVO-konform.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-200.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-200.woff') format('woff');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-200italic.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-200italic.woff') format('woff');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-300.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-300.woff') format('woff');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-300italic.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-300italic.woff') format('woff');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-regular.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-italic.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-italic.woff') format('woff');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-600.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-600.woff') format('woff');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-600italic.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-600italic.woff') format('woff');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-700.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-700.woff') format('woff');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-700italic.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-700italic.woff') format('woff');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-800.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-800.woff') format('woff');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-800italic.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-800italic.woff') format('woff');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-900.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-900.woff') format('woff');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-900italic.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-900italic.woff') format('woff');
}

/* Die Z5H benennt die Fließtextschrift „Nunito"; die Dateien sind Nunito Sans.
   Derselbe Alias, damit beide Namen auf dieselben lokalen Dateien zeigen. */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-200.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-200.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-200italic.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-200italic.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-300.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-300.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-300italic.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-300italic.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-regular.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-italic.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-italic.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-600.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-600.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-600italic.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-600italic.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-700.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-700.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-700italic.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-700italic.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-800.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-800.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-800italic.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-800italic.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-900.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-900.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-900italic.woff2') format('woff2'),
       url('fonts/nunito-sans-v6-latin/nunito-sans-v6-latin-900italic.woff') format('woff');
}

/* ---------------------------------------------------------------------------
   Fliegender Seitenstreifen rechts – wie auf zahnarzt-fuenfhoefe.de
   --------------------------------------------------------------------------- */
.gb-container.sticky-navigation {
  position: fixed;
  right: 0;
  top: 35%;
  transform: translateY(-50%);
  z-index: 4;
}
.gb-container.sticky-navigation .gb-button-wrapper {
  display: flex;
  flex-direction: column;
}
.gb-container.sticky-navigation .gb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 17px;
  background-color: var(--contrast-2);
  color: #ffffff;
  text-decoration: none;
}
.gb-container.sticky-navigation .gb-button:hover,
.gb-container.sticky-navigation .gb-button:focus {
  background-color: #0f5e77;
  color: #ffffff;
}
.gb-container.sticky-navigation .gb-button + .gb-button { margin-top: 4px; }
.gb-container.sticky-navigation .gb-icon { line-height: 0; }
.gb-container.sticky-navigation .gb-icon svg { width: 1em; height: 1em; fill: currentColor; }

/* Am Handy stört der Streifen – dort führen die Angaben im Fuß zum Ziel */
@media (max-width: 768px) {
  .gb-container.sticky-navigation { display: none; }
}

/* ---------------------------------------------------------------------------
   Obere Leiste (zweite Navigation) – Telefon und Wunschtermin
   --------------------------------------------------------------------------- */
.ae5h-topbar { display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
.ae5h-topbar a.ae5h-tel,
.ae5h-topbar a.ae5h-termin {
  display: inline-flex; align-items: center; gap: .6em;
  text-decoration: none; font-size: 17px; line-height: 1;
}
.ae5h-topbar a.ae5h-tel { padding: 12px 8px; }
.ae5h-topbar a.ae5h-termin { padding: 12px 24px; }
.ae5h-topbar .ae5h-icon { line-height: 0; display: inline-flex; }
.ae5h-topbar .ae5h-icon svg { width: .95em; height: .95em; fill: currentColor; }
.ae5h-topbar a.ae5h-tel { color: var(--global-color-10); }
.ae5h-topbar a.ae5h-termin { background-color: var(--global-color-12); color: #fff; }
.ae5h-topbar a.ae5h-termin:hover { background-color: #0f5e77; color: #fff; }

/* Die obere Leiste liegt über dem verschmolzenen Kopfbereich und schiebt ihn nach unten */
.ae5h-topbar-wrap {
  position: relative;
  z-index: 20;
  background: #ffffff;
  padding: 0 80px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 30px;   /* Abstand bis zum Kopfbereich wie auf der Z5H */
}
.ae5h-topbar { max-width: 100%; }
@media (max-width: 768px) {
  .ae5h-topbar-wrap { padding: 6px 20px; }
  .ae5h-topbar .ae5h-tel { padding-left: 0; }
}

/* Knöpfe in mittig gesetzten Bändern mittig ausrichten.
   GenerateBlocks richtet die Knopfhülle sonst immer links aus. */
.gb-container[class*="gb-container-"] .gb-headline[style*="center"] ~ .gb-button-wrapper,
.ae5h-mitte .gb-button-wrapper { justify-content: center; }
.gb-container .gb-inside-container > .gb-button-wrapper { display: flex; }

/* ---------------------------------------------------------------------------
   Leistungen im Fokus: quadratische Kacheln, Titel auf gleicher Höhe
   --------------------------------------------------------------------------- */
.ae5h-fokus .gb-grid-column > .gb-container { display: flex; flex-direction: column; height: 100%; }
.ae5h-fokus figure.wp-block-image { margin: 0; }
.ae5h-fokus figure.wp-block-image img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: auto;
  display: block;
}
.ae5h-fokus .gb-headline { margin-top: 12px; }
.ae5h-fokus .gb-headline a { text-decoration: none; }
.ae5h-fokus .gb-headline a:hover { text-decoration: underline; text-underline-offset: .15em; }

/* ---------------------------------------------------------------------------
   Siegelzeile unter dem Kopfband. Gleiche Höhe, nichts angeschnitten.
   --------------------------------------------------------------------------- */
.ae5h-siegelband .gb-grid-wrapper { align-items: center; }
.ae5h-siegelband figure.ae5h-siegel-bild { margin: 0; }
.ae5h-siegelband figure.ae5h-siegel-bild img {
  height: 150px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
@media (max-width: 768px) {
  .ae5h-siegelband figure.ae5h-siegel-bild img { height: 100px; }
}

/* ---------------------------------------------------------------------------
   Telefon und Wunschtermin im Kopf, im geklebten Zustand wie auf der Z5H
   --------------------------------------------------------------------------- */
.main-navigation .menu-bar-item.ae5h-nav-termin > a {
  background-color: var(--global-color-12);
  color: #ffffff !important;
  margin-left: 10px;
}
.main-navigation .menu-bar-item.ae5h-nav-termin > a:hover,
.main-navigation .menu-bar-item.ae5h-nav-termin > a:focus {
  background-color: var(--global-color-9);
  color: #ffffff !important;
}
/* Goldene Linie über dem geklebten Kopf, wie auf der Z5H */
.main-navigation.navigation-stick { border-top: 3px solid #b08a4f; }