/* ============================================================
   ZIRKON (Version 3) – Ergänzungen zu main.css
   main.css wird immer als Basis geladen, diese Datei danach (siehe
   KONZEPT, Paket 6). Abschnitte in dieser Reihenfolge:
   1. Versions-Hooks (.section--NAME-zirkon, ehemals in main.css)
   2. Seitentypen (ehemals css/layouts/{typ}-3.css)
   3. Header (ehemals css/headers/header-3.css)
   Seitentyp-Regeln sind mit :where(.dv-<typ>) auf ihren Seitentyp begrenzt.
   ============================================================ */

/* ============================================================
   1. VERSIONS-HOOKS
   ============================================================ */

.section--galerie-zirkon .container {
  text-align: center;
}

@media (min-width: 1280px) {
  .section--alt.section--about-zirkon {
    padding-bottom: 0;
  }
}

.section--white.section--kontakt-split-zirkon {
  padding-top: 0;
  padding-bottom: 0;
}

/* ============================================================
   2. SEITENTYPEN
   ============================================================ */

/* ------------------------------------------------------------
   Kontakt (ehemals css/layouts/kontakt-3.css)
   ------------------------------------------------------------ */

/* ============================================================
   KONTAKT – VARIANTE 3 (page-kontakt-3.php)
   Hero-Section hat eine feste Höhe (min-height: 50vh, für alle
   Bildschirmgrößen gleich) – kein Hintergrundbild hier, da Kontakt kein
   Bildfeld für die Intro hat, nur Höhe + vertikale Zentrierung des Textes.
   Einzige Hook-Klasse ist section--kontakt-hero-zirkon (ersetzt die Basis-
   Klasse komplett, wie bei den anderen Seitentypen
   auch) – deshalb wird die geteilte Zentrierungs-Regel aus main.css
   (.section--kontakt-hero-{enamel,dentin,veneer,inlay} .page-hero__text) hier nochmal repliziert,
   sonst würde Variante 3 auf das linksbündige page-hero-Standardlayout
   zurückfallen.
   ============================================================ */

.section--kontakt-hero-zirkon {
  background: var(--color-primary-dark);
  min-height: 50vh;
  display: flex;
  align-items: center;
}

.section--kontakt-hero-zirkon .page-hero__text {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  gap: var(--gap-md);
}

.section--kontakt-hero-zirkon .page-hero__text h1,
.section--kontakt-hero-zirkon .page-hero__text p {
  color: var(--color-white);
}

/* Buttons in dieser Vorlage bekommen abgerundete Ecken statt des sitewide
   kantigen Designs (--radius-btn: 0). Kein .btn-primary/.btn-secondary auf
   dieser Seite, aber der Contact-Form-7-Absende-Button (eigene Plugin-
   Klassen, kein Theme-Button). Scope über "main" statt sitewide, damit
   Header/Footer-Buttons unangetastet bleiben – main.css bleibt unverändert. */
:where(.dv-kontakt) main .wpcf7-form input[type="submit"] {
  border-radius: 6px;
}

/* ------------------------------------------------------------
   Leistungen (ehemals css/layouts/leistungen-3.css)
   ------------------------------------------------------------ */

/* ============================================================
   LEISTUNGEN – VARIANTE 3 (page-leistungen-3.php)
   Hero: Vollflächiges Hintergrundbild (inline background-image, per PHP aus
   dem intro_bild-Feld gesetzt) statt separatem <img> neben dem Text –
   gleiches Prinzip wie .section--hero-zirkon auf der Startseite (siehe
   conventions.md → Layout-Baukasten). Text liegt über einem dunklen
   Overlay, damit er auf jedem Foto lesbar bleibt.
   ============================================================ */

.section--leistungen-hero-zirkon {
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-alt);
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.section--leistungen-hero-zirkon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.section--leistungen-hero-zirkon .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.section--leistungen-hero-zirkon .page-hero__text h1,
.section--leistungen-hero-zirkon .page-hero__text p {
  color: var(--color-white);
}

.section--leistungen-hero-zirkon .page-hero__text {
  max-width: 1000px;
}

@media (min-width: 768px) {
  .section--leistungen-hero-zirkon {
    min-height: 70vh;
  }
}

/* Buttons in dieser Vorlage bekommen abgerundete Ecken statt des sitewide
   kantigen Designs (--radius-btn: 0). Scope über "main" statt sitewide,
   damit Header/Footer-Buttons auf dieser Seite unangetastet bleiben –
   main.css bleibt komplett unverändert. */
:where(.dv-leistungen) main .btn-primary {
  border-radius: 6px;
}

/* ------------------------------------------------------------
   Notfall (ehemals css/layouts/notfall-3.css)
   ------------------------------------------------------------ */

/* ============================================================
   NOTFALL – VARIANTE 3 (page-notfall-3.php)
   Hero: Vollflächiges Hintergrundbild (inline background-image, per PHP aus
   dem hero_bild-Feld gesetzt) statt separatem <img> neben dem Text –
   gleiches Prinzip wie .section--hero-zirkon auf der Startseite (siehe
   conventions.md → Layout-Baukasten). Text liegt über einem dunklen
   Overlay, damit er auf jedem Foto lesbar bleibt. .btn-phone braucht keine
   eigene Farb-Anpassung, hat schon einen deckenden Hintergrund.
   ============================================================ */

.section--notfall-hero-zirkon {
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-alt);
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.section--notfall-hero-zirkon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.section--notfall-hero-zirkon .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.section--notfall-hero-zirkon .page-hero__text h1,
.section--notfall-hero-zirkon .page-hero__text p {
  color: var(--color-white);
}

.section--notfall-hero-zirkon .page-hero__text {
  max-width: 1000px;
}

@media (min-width: 768px) {
  .section--notfall-hero-zirkon {
    min-height: 70vh;
  }
}

/* Buttons in dieser Vorlage bekommen abgerundete Ecken statt des sitewide
   kantigen Designs (--radius-btn: 0). Scope über "main" statt sitewide,
   damit Header/Footer-Buttons auf dieser Seite unangetastet bleiben –
   main.css bleibt komplett unverändert. */
:where(.dv-notfall) main .btn-phone {
  border-radius: 6px;
}

/* ------------------------------------------------------------
   Startseite (ehemals css/layouts/startseite-3.css)
   ------------------------------------------------------------ */

/* ============================================================
   STARTSEITE – VARIANTE 3 (page-startseite-3.php)
   Hero: Vollflächiges Hintergrundbild (inline background-image, per
   PHP aus dem hero_bild-Feld gesetzt) statt separatem <img> neben dem
   Text. Bewusst KEIN wp_get_attachment_image() hier – ein CSS-
   Hintergrundbild bekommt kein automatisches srcset/sizes, lädt also
   immer dieselbe Auflösung unabhängig vom Endgerät (siehe Abwägung in
   conventions.md). Text liegt über einem dunklen Overlay, damit er auf
   jedem Foto lesbar bleibt, unabhängig von dessen Helligkeit.
   ============================================================ */

.section--hero-zirkon {
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-alt);
  background-attachment: fixed;
  min-height: 100svh;
  display: flex;
  align-items: center;
}

.section--hero-zirkon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(1.75rem);
  -webkit-backdrop-filter: blur(1.75rem);
}

.section--hero-zirkon .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Textspalte: Hälfte der Containerbreite, höchstens 1000px; Untergrenze 28rem
   bzw. volle Breite auf dem Handy (siehe main-enamel.css). */
.section--hero-zirkon .hero__content {
  width: clamp(min(100%, 28rem), 50%, 1000px);
  margin: 0 auto;
  text-wrap: balance;
}

.section--hero-zirkon .hero__content .hero__title,
.section--hero-zirkon .hero__content .hero__subtitle {
  text-align: center;
}

@media (min-width: 480px) {
  .section--hero-zirkon .hero__content .hero__buttons {
    justify-content: center;
  }
}

.section--hero-zirkon .hero__eyebrow,
.section--hero-zirkon .hero__title,
.section--hero-zirkon .hero__subtitle {
  color: var(--color-white);
}

.section--hero-zirkon .btn-secondary {
  color: var(--color-white);
  border-color: var(--color-white);
}

.section--hero-zirkon .btn-secondary:hover {
  background: var(--color-white);
  color: var(--color-text);
}

@media (min-width: 768px) {
  .section--hero-zirkon {
    min-height: 75svh;
  }
}

@media (min-width: 1024px) {
  .section--hero-zirkon {
    min-height: 100svh;
  }
}

/* Leistungsübersicht: Kachel-Bild als Hintergrundbild der ganzen Karte
   statt separatem <img> (gleiches Prinzip wie der Hero oben) – nur mit
   .leistungen__card--photo-Modifier, damit die Fallback-Karte ohne Bild
   (weiße Karte, dunkler Text) unangetastet bleibt.
   Bild liegt auf einem eigenen ::after-Layer (per --leistungen-card-bg
   Custom Property, s. PHP), nicht direkt als background-image auf der
   Karte – nur so lässt sich beim Hover ausschließlich das Bild zoomen
   (transform:scale), ohne Karte/Text/Overlay mit zu skalieren. */
.section--leistungen-zirkon .leistungen__card--photo {
  position: relative;
  min-height: 280px;
  justify-content: flex-end;
  overflow: hidden;
  padding: 4.5rem 1.5rem 1.5rem 1.5rem;
}

/* overflow:hidden auf der Karte selbst (nötig für den Bild-Zoom-Clip)
   schneidet sonst den sitewide Fokus-Rahmen (main.css: outline-offset: 2px,
   ragt also nach aussen) ab – Tastatur-Fokus wäre auf Foto-Karten unsichtbar.
   Negativer Offset zieht den Rahmen stattdessen nach innen. */
.section--leistungen-zirkon .leistungen__card--photo:focus-visible {
  outline-offset: -2px;
}

.section--leistungen-zirkon .leistungen__card--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--leistungen-card-bg);
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
}

.section--leistungen-zirkon .leistungen__card--photo:hover::after {
  transform: scale(1.2);
}

.section--leistungen-zirkon .leistungen__card--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.25);
  transition: background 0.4s ease;
}

.section--leistungen-zirkon .leistungen__card--photo:hover::before {
  /* color-mix() statt hartcodiertem rgba(), damit die Tönung mit dem
     Farbthema (Standard/Warm/Kühl) mitwechselt statt an einer festen
     Standard-Theme-Farbe hängen zu bleiben. */
  background: color-mix(in srgb, var(--color-primary-dark) 60%, transparent);
}

/* Bild-Zoom + Farbübergang sind reine Hover-Verzierung – für Nutzer mit
   reduzierter Bewegungspräferenz werden die Übergänge deaktiviert, der
   Effekt selbst (gezoomtes Bild/getönter Overlay bei Hover) bleibt
   erhalten, wechselt dann aber ohne Animation sofort. */
@media (prefers-reduced-motion: reduce) {
  .section--leistungen-zirkon .leistungen__card--photo::after,
  .section--leistungen-zirkon .leistungen__card--photo::before {
    transition: none;
  }
}

/* Text + "Mehr erfahren" liegen in .leistungen__card-more(-inner). Ohne Hover-Gerät (Handy/Tablet) lösen sich die Hüllen
   auf (display: contents): Titel, Text und Button stehen dauerhaft da. Mit Maus ("Hochschieben"): Titel steht unten, beim
   Überfahren oder Tastatur-Fokus schieben Text und Button von unten ein, der Titel gleitet nach oben. Nur Foto-Karten. */
.section--leistungen-zirkon .leistungen__card-more,
.section--leistungen-zirkon .leistungen__card-more-inner {
  display: contents;
}

@media (hover: hover) and (pointer: fine) {
  /* Mindesthöhe so, dass die Kachel beim Aufklappen nicht wächst (sonst springt die ganze Reihe) */
  .section--leistungen-zirkon .leistungen__card--photo {
    gap: 0;
    min-height: 21.5rem;
  }

  .section--leistungen-zirkon .leistungen__card--photo .leistungen__card-more {
    display: grid;
    grid-template-rows: 0fr;
    position: relative;
    z-index: 2;
    transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .section--leistungen-zirkon .leistungen__card--photo .leistungen__card-more-inner {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.35s ease;
  }

  /* Abstand zum Titel als Außenabstand (Innenabstand würde die zugeklappte Höhe nicht auf 0 lassen) */
  .section--leistungen-zirkon .leistungen__card--photo .leistungen__card-more-inner > :first-child {
    margin-top: var(--gap-md);
  }

  .section--leistungen-zirkon .leistungen__card--photo:hover .leistungen__card-more,
  .section--leistungen-zirkon .leistungen__card--photo:focus-visible .leistungen__card-more {
    grid-template-rows: 1fr;
  }

  .section--leistungen-zirkon .leistungen__card--photo:hover .leistungen__card-more-inner,
  .section--leistungen-zirkon .leistungen__card--photo:focus-visible .leistungen__card-more-inner {
    opacity: 1;
    transition-delay: 0.12s;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .section--leistungen-zirkon .leistungen__card--photo .leistungen__card-more,
  .section--leistungen-zirkon .leistungen__card--photo .leistungen__card-more-inner {
    transition: none;
  }
}

.section--leistungen-zirkon .leistungen__card--photo h3,
.section--leistungen-zirkon .leistungen__card--photo p,
.section--leistungen-zirkon .leistungen__card--photo .leistungen__card-link {
  position: relative;
  z-index: 2;
  color: var(--color-white);
}

/* Ganze Karte ist jetzt selbst ein <a> (statt <div> mit innerem Link) –
   sauberer für Barrierefreiheit/Tastatur-Fokus als ein Stretched-Link-Trick.
   Reset der Anchor-Standardstile, damit h3/p nicht wie Linktext aussehen.
   Nur für dieses Layout, nicht sitewide – .leistungen__card in main.css
   bleibt unangetastet. */
.section--leistungen-zirkon .leistungen__card {
  text-decoration: none;
}

/* "Mehr erfahren"-Span ist kein <a> mehr (siehe oben), deshalb die
   sitewide .leistungen__card a-Optik (main.css) hier nochmal repliziert,
   plus Pfeil-Icon statt &rarr;-Textzeichen sauber neben dem Text
   ausgerichtet. */
.section--leistungen-zirkon .leistungen__card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  color: var(--color-primary-text);
  font-size: 0.9375rem;
  font-weight: 500;
}

/* Buttons in dieser Vorlage bekommen abgerundete Ecken statt des sitewide
   kantigen Designs (--radius-btn: 0). Scope über "main" statt sitewide,
   damit Header/Footer-Buttons (z.B. "Termin buchen" in der Nav) auf dieser
   Seite unangetastet bleiben – main.css bleibt komplett unverändert. */
:where(.dv-startseite) main .btn-primary,
:where(.dv-startseite) main .btn-secondary {
  border-radius: 6px;
}

:where(.dv-startseite) .trust__item {
  border-bottom: solid 3px var(--color-primary);
}

/* Inneres 1:1 wie bei Startseite-1 (Foto/Platzhalter + Flex-Layout,
   siehe main-enamel.css) übernommen, nur die Farben (oben) bleiben
   unsere eigenen statt die von Startseite-1. */
:where(.dv-startseite) .bewertungen__card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  background: var(--color-primary);
  border: none;
  /* opacity/transform hier mit aufgeführt, nicht nur background: transition
     ist ein Shorthand, eine spätere Deklaration mit gleicher Spezifität
     (hier: main.css .reveal, lädt vor dieser Datei) würde sonst komplett
     überschrieben statt ergänzt, dadurch bliebe der Scroll-Reveal-Effekt
     (js/scroll-reveal.js) auf dieser Karte ohne Animation hängen. */
  transition: background 300ms, opacity 0.5s ease-out, transform 0.5s ease-out;
}

:where(.dv-startseite) .bewertungen__card blockquote {
  flex-grow: 1;
  transition: color 300ms;
}

:where(.dv-startseite) .bewertungen__card img,
:where(.dv-startseite) .bewertungen__card .img-placeholder {
  width: 100px;
  height: 100px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 100%;
  align-self: flex-start;
  /* Foto ragt zur Hälfte über die Kartenkante hinaus (klassisches
     Testimonial-Muster). -64px = 24px Karten-Padding + 40px sichtbarer
     Überstand, passt sicher in den 3rem-Abstand zur Überschrift darüber. */
  margin-top: -64px;
  margin-bottom: var(--gap-md);
}

:where(.dv-startseite) .bewertungen__card img {
  box-shadow: 0 0 0 10px #fff;
}

@media (min-width: 1440px) {
  :where(.dv-startseite) .bewertungen__card img {
    width: 150px;
    height: 150px;
  }
}

:where(.dv-startseite) .bewertungen__card .stars {
  color: var(--color-white);
}

:where(.dv-startseite) .bewertungen__card cite {
  transition: color 300ms;
}

:where(.dv-startseite) .bewertungen__card:hover {
  background: var(--color-primary-dark);
}

:where(.dv-startseite) .bewertungen__card:hover blockquote,
:where(.dv-startseite) .bewertungen__card:hover cite {
  color: var(--color-white);
}

:where(.dv-startseite) .bewertungen__header {
  margin-bottom: 6rem;
}

:where(.dv-startseite) .bewertungen__grid {
  gap: 2.5rem;
}

@media (max-width: 767.98px) {
  :where(.dv-startseite) .bewertungen__grid {
    gap: 3.5rem;
  }
}

@media (min-width: 1024px) {
  :where(.dv-startseite) .bewertungen__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

/* Slider (> 3 Bewertungen, siehe main.css): gleiche Abstände wie das Grid
   oben, über --bew-gap. Die Fotos ragen 64px über die Karte hinaus – der
   Scroll-Container würde sie abschneiden, daher oben 4rem Innenabstand,
   per negativem Margin ausgeglichen (Layout bleibt unverändert). */
:where(.dv-startseite) .bewertungen__grid.bewertungen__grid--slider {
  --bew-gap: 3.5rem;
  padding-top: 4rem;
  margin-top: -4rem;
}

@media (min-width: 768px) {
  :where(.dv-startseite) .bewertungen__grid.bewertungen__grid--slider {
    --bew-gap: 2.5rem;
  }
}

@media (min-width: 1024px) {
  :where(.dv-startseite) .bewertungen__grid.bewertungen__grid--slider {
    --bew-gap: 1.5rem;
  }
}

/* Google-Link steht jetzt unter .bewertungen__grid statt im Header,
   braucht deshalb eigene Positionierung (vorher übernahm
   .bewertungen__header { text-align: center } das automatisch) – gleicher
   Fix wie bei Startseite-1. */
:where(.dv-startseite) .bewertungen__link {
  display: block;
  text-align: center;
  margin-top: var(--gap-lg);
}

/* ------------------------------------------------------------
   Über uns & Team (ehemals css/layouts/ueber-uns-3.css)
   ------------------------------------------------------------ */

/* ============================================================
   ÜBER UNS – VARIANTE 3 (page-ueber-uns-3.php)
   Hero: Vollflächiges Hintergrundbild (inline background-image, per PHP aus
   dem intro_bild-Feld gesetzt) statt separatem <img> neben dem Text –
   gleiches Prinzip wie .section--hero-zirkon auf der Startseite (siehe
   conventions.md → Layout-Baukasten). Text liegt über einem dunklen
   Overlay, damit er auf jedem Foto lesbar bleibt.
   ============================================================ */

.section--ueberuns-hero-zirkon {
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-alt);
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.section--ueberuns-hero-zirkon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.section--ueberuns-hero-zirkon .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.section--ueberuns-hero-zirkon .page-hero__text h1,
.section--ueberuns-hero-zirkon .page-hero__text p {
  color: var(--color-white);
}

.section--ueberuns-hero-zirkon .page-hero__text {
  max-width: 1000px;
}

@media (min-width: 768px) {
  .section--ueberuns-hero-zirkon {
    min-height: 70vh;
  }
}

/* Buttons in dieser Vorlage bekommen abgerundete Ecken statt des sitewide
   kantigen Designs (--radius-btn: 0). Scope über "main" statt sitewide,
   damit Header/Footer-Buttons auf dieser Seite unangetastet bleiben –
   main.css bleibt komplett unverändert. */
:where(.dv-ueber-uns) main .btn-primary {
  border-radius: 6px;
}

/* CTA-Abschnitt: volle Breite des Containers statt der 560 px aus main.css (.cta__inner) */
:where(.dv-ueber-uns) .section--cta-zirkon .cta__inner {
  max-width: none;
}

/* ============================================================
   3. HEADER
   ============================================================ */

/* Header-Variante 3 (ehemals Header 2, umbenannt da der Style zu den
   "-3"-Seitenvorlagen passt): transparenter Header, schwebt über dem Hero
   (negativer margin-bottom in Höhe der Nav-Leiste). Logo bleibt frei ohne
   Hintergrund, Nav-Links sitzen stattdessen in einer abgesetzten weissen Pill. */

.nav--zirkon {
  background: transparent;
  border-bottom: none;
  margin-bottom: calc(-1 * var(--nav-height));
}

.nav--zirkon .nav__links-group {
  display: none;
}

@media (min-width: 768px) {
  .nav--zirkon .nav__links-group {
    display: flex;
    align-items: center;
    /* Volle Höhe der Nav-Leiste statt fester Höhe: die Links (und damit der
       Unterstrich der aktiven Seite) reichen dadurch bis zum unteren Rand. */
    align-self: stretch;
    border-radius: 9px;
    outline: 1px solid rgba(0, 0, 0, 0.05);
    padding: 0 5px;
    gap: 4px;
  }
}

.nav--zirkon .nav__links {
  align-self: stretch;
  padding: 0 1rem;
  gap: var(--gap-md);
}

/* Stärke des Unterstrichs: einzige Quelle für den Rahmen der aktiven Seite
   und den animierten Hover-Strich (müssen gleich hoch sein). Oben/unten
   gleich, damit der Text vertikal mittig bleibt. */
.nav--zirkon {
  --nav-underline: 2px;
}

.nav--zirkon .nav__links a {
  font-size: 1rem;
  color: #ffffff;
  border-top-width: var(--nav-underline);
  border-bottom-width: var(--nav-underline);
}

/* Wie Logo/Hamburger unten: weiss über dem Hero-Bild, dunkel sobald der
   Header beim Scrollen seinen weissen Hintergrund bekommt (.nav--scrolled). */
.nav--zirkon.nav--scrolled .nav__links a {
  color: var(--color-text);
}

/* Aktive Seite: weiss mit weissem Unterstrich (border-bottom aus main.css,
   liegt am unteren Rand der Nav-Leiste an, weil .nav__links-group die volle
   Leistenhöhe hat). */
.nav--zirkon .nav__links a[aria-current="page"] {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

/* Hover/Fokus bei den übrigen Links: Unterstrich fährt von links ein, gleiche
   Position und Stärke wie der Unterstrich der aktiven Seite (liegt genau auf
   dem transparenten border-bottom aus main.css, daher bottom = −Rahmenstärke).
   Farbe folgt der Linkfarbe (weiss über dem Hero, dunkel nach dem Scrollen). */
.nav--zirkon .nav__links a:not([aria-current="page"]) {
  position: relative;
}

.nav--zirkon .nav__links a:not([aria-current="page"])::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--nav-underline));
  height: var(--nav-underline);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav--zirkon .nav__links a:not([aria-current="page"]):hover::after,
.nav--zirkon .nav__links a:not([aria-current="page"]):focus-visible::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .nav--zirkon .nav__links a:not([aria-current="page"])::after {
    transition: none;
  }
}

/* Aktive Seite nach dem Scrollen (weisser Header): Akzentfarbe wie in main.css */
/* Sprachumschalter (Globus): wie Logo/Hamburger weiss über dem Hero, nach dem
   Scrollen bzw. bei geöffnetem Menü dunkel. Die Popup-Links erben sonst die
   weissen Menülink-Stile (.nav--zirkon .nav__links a, inkl. Hover-Unterstrich). */
.nav--zirkon .lang__toggle {
  color: #ffffff;
}

.nav--zirkon.nav--scrolled .lang__toggle,
.nav--zirkon.nav--open .lang__toggle {
  color: var(--color-text);
}

.nav--zirkon .lang__toggle:hover,
.nav--zirkon .lang__toggle[aria-expanded="true"] {
  color: var(--color-primary-text);
  background: var(--color-bg-alt);
}

.nav--zirkon .nav__links .lang__pop .lang__link {
  color: var(--color-text);
}

.nav--zirkon .nav__links .lang__pop .lang__link::after {
  display: none;
}

.nav--zirkon.nav--scrolled .nav__links a[aria-current="page"] {
  color: var(--color-primary-text);
  border-bottom-color: var(--color-primary-text);
}

.nav--zirkon .nav__cta {
  border-radius: 6px;
  padding: 0.25em .75em;
  font-size: 1rem;
}

/* Aufgeklapptes Mobile-Menü braucht einen echten Hintergrund, sonst nicht
   lesbar vor dem, was hinter dem transparenten Header liegt. */
.nav--zirkon.nav--open {
  background: var(--color-white);
}

/* Sobald über die Header-Höhe hinaus gescrollt wurde (header-3.js), ist der
   Header nicht mehr über dem Hero, sondern über beliebigem Seiteninhalt –
   bekommt dafür einen weiss-transparenten, geblurten Hintergrund statt
   komplett transparent zu bleiben. */
.nav--zirkon.nav--scrolled {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Schwebende Pille mit Abstand zum Fensterrand (Abstand --nav-gap): Die Pille ist das <header> selbst, damit das Mobile-Menü
   (.nav__mobile) in ihr aufklappt statt darunter in voller Breite. Unter 1200 px (Hamburger) ist der Header ungescrollt bündig
   (volle Breite, oben, eckig, transparent über dem Hero); sobald gescrollt wird (header-3.js, dort ab 8 px) oder das Menü offen ist,
   fährt er weich zur Pille: Abstand oben und seitlich, 12px Radius. Ab 1200 px hat er den Abstand immer. Position nur über
   top/width (kein Einfluss auf den Seitenfluss); alle Übergänge 0,3 s. */
:root {
  --nav-gap: 0.75rem;
}

@media (min-width: 1024px) {
  :root {
    --nav-gap: 1rem;
  }
}

.nav--zirkon {
  top: 0;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  border-radius: 0;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: top 0.3s ease, width 0.3s ease, border-radius 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}

.nav--zirkon.nav--scrolled,
.nav--zirkon.nav--open {
  top: var(--nav-gap);
  width: calc(100% - 2 * var(--nav-gap));
  border-radius: 12px;
}

@media (min-width: 1200px) {
  .nav--zirkon {
    top: var(--nav-gap);
    width: calc(100% - 2 * var(--nav-gap));
  }
}

/* Offenes Menü: deckend weiß (lesbar), auch wenn bereits gescrollt wurde (sonst gewänne der weiß-transparente Blur-Hintergrund oben) */
.nav--zirkon.nav--open,
.nav--zirkon.nav--scrolled.nav--open {
  border-radius: 12px 12px 0 0;
}

.nav--zirkon.nav--scrolled.nav--open {
  background: var(--color-white);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
}

/* Das Menü liegt über dem Seiteninhalt statt ihn nach unten zu schieben (sonst entstand hinter der schwebenden Pille ein Versatz: der Header
   bleibt 65px hoch im Seitenfluss). Header (offen: deckend weiß, unten eckig) und Menü (weiß, unten abgerundet) bilden dabei eine Pille. */
.nav--zirkon .nav__mobile {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-white);
  border-radius: 0 0 12px 12px;
}

@media (prefers-reduced-motion: reduce) {
  .nav--zirkon {
    transition: none;
  }
}

/* Logo & Hamburger: erst weiss (schwebt über dem Hero-Bild), wechseln
   zusammen mit dem Hintergrund zu dunkel, sobald .nav--scrolled (oder .nav--open) aktiv ist,
   sonst weiss auf weiss unsichtbar. Die Logo-Werte sind Versions-Standards als Variablen
   (Zustandsregeln in main.css); Überschreibung per Plugin (includes/logo.php) ebenfalls auf :root. */
:root {
  --logo-text-color: #ffffff;
  --logo-text-color-scrolled: var(--color-text);
  --logo-symbol-fill: #ffffff;
  --logo-symbol-fill-scrolled: #000000;
  --logo-symbol-letter: #1A1A1A;
  --logo-symbol-letter-scrolled: #ffffff;
}

.nav--zirkon .nav__logo-text {
  transition: color 0.2s ease;
}

.nav--zirkon .nav__hamburger span {
  background: #ffffff;
  transition: background 0.2s ease;
}

.nav--zirkon .nav__logo-icon circle,
.nav--zirkon .nav__logo-icon rect,
.nav--zirkon .nav__logo-icon text {
  transition: fill 0.2s ease;
}

.nav--zirkon.nav--scrolled .nav__hamburger span,
.nav--zirkon.nav--open .nav__hamburger span {
  background: var(--color-text);
}

/* Mobil: Bewertungen als Swipe-Carousel wie bei Inlay (Muster: conventions.md → Mobile-Swipe-Carousel; Punkte: js/carousel-dots.js).
   Der Slider ab vier Bewertungen (.bewertungen__grid--slider) hat eigene Pfeile und Punkte und ist ausgenommen. */
@media (max-width: 767.98px) {
  .section--bewertungen-zirkon .bewertungen__grid:not(.bewertungen__grid--slider) {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* bis an den rechten Bildschirmrand (hebt den Innenabstand 1.5rem des .container auf; der Abstand bleibt am Ende der Reihe erhalten) */
    margin-right: -1.5rem;
    padding-right: 1.5rem;
    /* Die Fotos ragen 64px über die Karte hinaus (siehe oben): Der Scroll-Container würde sie oben abschneiden, daher 4rem
       Innenabstand oben, per negativem Margin ausgeglichen (Layout bleibt unverändert, wie beim Slider ab vier Bewertungen). */
    padding-top: 4rem;
    margin-top: -4rem;
    /* Abstand zwischen den Karten: kleiner als der 3,5rem-Abstand der gestapelten Karten (Foto-Überstand), in der Reihe nicht nötig */
    gap: 1.5rem;
  }

  .section--bewertungen-zirkon .bewertungen__grid:not(.bewertungen__grid--slider)::-webkit-scrollbar {
    display: none;
  }

  .section--bewertungen-zirkon .bewertungen__grid:not(.bewertungen__grid--slider) > .bewertungen__card {
    scroll-snap-align: start;
  }

  /* Keine Eingangsanimation in der Wisch-Reihe: auch der Schutz vor dem ersten Paint (html.reveal-pending, functions.php) versteckt diese Karten nicht. */
  html.reveal-pending .section--bewertungen-zirkon .bewertungen__grid:not(.bewertungen__grid--slider) > * {
    opacity: 1;
  }
}

/* Leistungen-Navigation (Anker-Leiste unter dem Header auf der Leistungen-Seite). Der äußere Streifen (.leistungen-nav) ist weiß und
   deckt ab, was dahinter liegt (der Footer liegt als dunkle Fläche unter dem Seiteninhalt und schien durch, solange der Streifen
   transparent war). Klebt die Leiste beim Scrollen am Header (.leistungen-nav--stuck, js/leistungen-nav.js), sieht sie aus wie die
   Header-Leiste: der Streifen wird transparent, ohne Linie, und der Container darin (gleiche Breite wie die Header-Box) bekommt den
   weiß-transparenten Blur-Hintergrund mit 12px Radius. Ein kleiner Abstand trennt beide. */
/* Klebt die Leiste (position: sticky), bleibt ihr Platz im Seitenfluss leer. Da der Header transparent/weiß-transparent ist und <main>
   keinen Hintergrund hat, schien dort der dunkle Footer (liegt fest unter dem Seiteninhalt) durch: Der Inhaltsbereich der
   Leistungen-Seite bekommt daher die Seitenfarbe. */
:where(.dv-leistungen) main {
  background: var(--color-bg);
}

.leistungen-nav {
  top: calc(var(--nav-height) + var(--nav-gap) + 0.5rem);
}

.leistungen-nav .container {
  border-radius: 12px;
  transition: background 0.2s ease;
}

.leistungen-nav.leistungen-nav--stuck {
  background: transparent;
  border-bottom-color: transparent;
}

.leistungen-nav.leistungen-nav--stuck .container {
  width: calc(100% - 2 * var(--nav-gap));
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.leistungsblock {
  scroll-margin-top: calc(var(--nav-height) + var(--nav-gap) + var(--leistungen-nav-height) + 0.5rem);
}

/* Handy (unter 768 px): Header und Leistungen-Navigation bilden, solange die Navigation am Header klebt, einen einzigen Block – kein
   Abstand (1px Überlappung gegen eine Haarlinie), der Header unten und die Navigation oben eckig, dazwischen eine feine Trennlinie.
   :has() setzt die Rundung des Headers, wenn irgendwo die Klasse .leistungen-nav--stuck steht (js/leistungen-nav.js). */
@media (max-width: 767.98px) {
  .leistungen-nav {
    top: calc(var(--nav-height) + var(--nav-gap) - 1px);
  }

  body:has(.leistungen-nav--stuck) .nav--zirkon.nav--scrolled {
    border-radius: 12px 12px 0 0;
  }

  .leistungen-nav.leistungen-nav--stuck .container {
    border-radius: 0 0 12px 12px;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.08);
  }

  .leistungsblock {
    scroll-margin-top: calc(var(--nav-height) + var(--nav-gap) + var(--leistungen-nav-height));
  }
}

/* ============================================================
   FOOTER – VARIANTE 3 (footer-3.php)
   Hook-Klasse .footer--zirkon (nur dieser Footer); gemeinsame Grundstile in main.css (.footer …).
   Kein Aufdeck-Effekt (main.css: sticky am unteren Fensterrand): der Footer steht normal am Seitenende. Hintergrund bleibt dunkel (main.css). Aufbau: Social-Kasten (Primärfarbe) rechts oben, halb über dem Footer;
   Raster mit Logo und Öffnungszeiten (oben) sowie Anschrift, Kontakt und Google-Maps-Button (unten); unten Linie mit Copyright
   und Rechtlichem. Daten aus den Praxis-Optionen (Anschrift, Telefon, E-Mail, Öffnungszeiten).
   ============================================================ */

.footer--zirkon {
  --footer-bg: #1A1A1A; /* dunkler Footer-Hintergrund (Streifen hinter dem Kasten und Hauptteil) */
  position: static; /* hebt das sticky von main.css auf: kein Aufdeck-Effekt */
  --footer-top-bg: transparent; /* Farbe hinter der oberen Kastenhälfte = Hintergrund der letzten Sektion (siehe unten) */
  margin-top: 0;
  padding: 0;
  background: transparent;
}

/* Die obere Hälfte des Streifens nimmt die Hintergrundfarbe der letzten Sektion im <main> an (sonst: Seitenhintergrund). Der Abstand nach oben
   ergibt sich aus der Kastenhöhe; ein eigener Außenabstand würde die Seitenfarbe zeigen. */
main:has(> section:last-child.section--alt) + .footer--zirkon {
  --footer-top-bg: var(--color-bg-alt);
}

main:has(> section:last-child.section--white) + .footer--zirkon {
  --footer-top-bg: var(--color-white);
}

/* Streifen mit dem Social-Kasten: obere Hälfte transparent, untere dunkel – der Kasten (so hoch wie der Streifen) sitzt damit immer
   mittig auf der Oberkante des Footers, egal wie hoch er wird. */
.footer--zirkon .footer__follow-wrap {
  display: grid;
  background: linear-gradient(to bottom, var(--footer-top-bg) 50%, var(--footer-bg) 50%);
}

.footer--zirkon .footer__main {
  background: var(--footer-bg);
}

.footer--zirkon .footer__follow {
  justify-self: end; /* Breite = Inhalt plus Padding, am rechten Rand (statt festem linken Außenabstand) */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: var(--gap-md) var(--gap-lg) var(--gap-md);
  background: var(--color-primary-text);
  color: var(--color-white);
}

.footer--zirkon .footer__follow-title {
  font-size: var(--text-small);
  color: var(--color-white);
}

.footer--zirkon .footer__social {
  margin-top: 0;
  flex-wrap: wrap;
  gap: var(--gap-md) var(--gap-lg);
  padding-left: var(--gap-sm);
}

.footer--zirkon .footer__social a {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  color: var(--color-white);
  font-size: var(--text-h5);
  text-decoration: none;
}

.footer--zirkon .footer__social a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

.footer--zirkon .footer__grid {
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
  padding: var(--gap-lg) 0;
}

.footer--zirkon .footer__address {
  font-style: normal;
  line-height: var(--leading-body);
  color: rgba(255, 255, 255, 0.9);
}

.footer--zirkon .footer__contact p {
  line-height: var(--leading-body);
  color: rgba(255, 255, 255, 0.9);
}

.footer--zirkon .footer__contact a {
  color: inherit;
  text-decoration: none;
}

.footer--zirkon .footer__contact a:hover {
  color: var(--color-primary);
}

.footer--zirkon .footer__hours .footer__heading {
  margin-bottom: var(--gap-xs);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
}

.footer--zirkon .footer__hours-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--gap-xxs) var(--gap-md);
  line-height: var(--leading-body);
  color: rgba(255, 255, 255, 0.9);
}

.footer--zirkon .footer__map-button {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: var(--gap-sm) var(--gap-md);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-btn, 4px);
  background: var(--color-primary-text);
  color: var(--color-white);
  text-decoration: none;
  transition: filter 0.2s ease;
}

.footer--zirkon .footer__map-button:hover {
  filter: brightness(1.12);
}

.footer--zirkon .footer__bottom {
  padding: 0;
  border-top: 0;
  text-align: left;
}

.footer--zirkon .footer__bottom-inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: var(--gap-md) 0 var(--gap-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.footer--zirkon .footer__bottom p {
  font-size: var(--text-nav); /* gleich groß wie die Links rechts (main.css: .footer__bottom 0.8125rem) */
  color: rgba(255, 255, 255, 0.85);
}

.footer--zirkon .footer__links a {
  color: rgba(255, 255, 255, 0.85);
}

@media (min-width: 768px) {
  .footer--zirkon .footer__bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .footer--zirkon .footer__follow {
    width: 50%;
    margin: 0 0 0 auto;
    padding: var(--gap-md);
  }

  .footer--zirkon .footer__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "brand . hours"
      "address contact map";
    gap: 4rem var(--gap-lg);
    height: auto; /* hebt die feste Höhe von main.css (min(35vh, 300px)) auf */
    padding: var(--gap-lg) 0 4rem;
    align-items: start;
  }

  .footer--zirkon .footer__brand {
    grid-area: brand;
  }

  .footer--zirkon .footer__hours {
    grid-area: hours;
  }

  .footer--zirkon .footer__address {
    grid-area: address;
  }

  .footer--zirkon .footer__contact {
    grid-area: contact;
    align-self: end;
  }

  .footer--zirkon .footer__map {
    grid-area: map;
    align-self: end;
  }
}

/* Leistungen: Kosten-Box 960 px statt 720 px aus main.css, CTA in voller Breite des Containers statt 560 px (.cta__inner) */
:where(.dv-leistungen) .section--kosten-zirkon .kosten__box {
  max-width: 960px;
}

:where(.dv-leistungen) .section--cta-zirkon .cta__inner {
  max-width: none;
}