/* ============================================================
   Phase 2: Säulen-Hubs, Zwischenseiten, alle Leistungsseiten & /aktuelles/
   1) Top-Padding für Seiten, die mit creative-element ODER
      single-page-top-block(-slider) starten (deren Row hat sonst nur
      pt-md-0 bzw. das knappe theme-eigene pt-7/pt-xl-9 und rutscht/klebt
      unter der fixen Nav).
   2) Karten-Look für Leistungs-Kacheln (Referenz: news-cards /aktuelles/)
   Scope strikt über .hub-cards — Bestandsseiten außerhalb der Leistungen
   (Praxis, Kontakt, Impressum etc.) bleiben unberührt. Meta _hub_cards=1
   sitzt auf: 3 Hubs, 7 Zwischenseiten, /aktuelles/, und allen ~40
   einzelnen Leistungsseiten (Beschwerden/Krankheitsbilder/Diagnostik-
   Detailseiten) — einheitliches Spacing-System für alles unter „Leistungen".
   ============================================================ */

/* --- 1) Top-Padding unter fixer Navigation ---
   Die Kontakt-Buttons ("Termin buchen"/"Jetzt anrufen") im Header sind
   absolut positioniert und ragen ÜBER die normale Header-Box hinaus (per
   Playwright gemessen: bis zu 141px unter 1200px Breite, 150px darüber,
   plateauend weil der Header-Container bei max-width:1920 gedeckelt ist).
   7rem (112px) reichte nicht -- auf /aktuelles/ (einzige .hub-cards-Seite
   ohne Breadcrumb) überlagerten die Buttons die H1 sichtbar. Werte jetzt
   mit ~20px Sicherheitsabstand über dem gemessenen Maximum je Tier.
   Gilt für beide Top-Block-Typen: creative-element (Hubs, neue
   Leistungsseiten) und single-page-top-block/-slider (ältere Bestands-
   Leistungsseiten) — beide haben dieselbe .section > .section__container
   > .row-Struktur. */
/* Beide Slider-Klassenschreibweisen nötig: der ACF-Blockname verwendet
   Bindestrich (single-page-top-block-slider), das Theme-Template rendert
   den Wrapper-Div aber mit Unterstrich (single-page-top-block_slider). */
.hub-cards main > .section.creative-element:first-child > .section__container > .row,
.hub-cards main > .section.single-page-top-block:first-child > .section__container > .row,
.hub-cards main > .d-none + .section.single-page-top-block > .section__container > .row,
.hub-cards main > .section.single-page-top-block-slider:first-child > .section__container > .row,
.hub-cards main > .d-none + .section.single-page-top-block-slider > .section__container > .row,
.hub-cards main > .section.single-page-top-block_slider:first-child > .section__container > .row,
.hub-cards main > .d-none + .section.single-page-top-block_slider > .section__container > .row {
    padding-top: 10rem !important; /* 160px, deckt Mobil+Tablet (max gemessen 141px) */
}
@media (min-width: 1200px) {
    .hub-cards main > .section.creative-element:first-child > .section__container > .row,
    .hub-cards main > .section.single-page-top-block:first-child > .section__container > .row,
    .hub-cards main > .d-none + .section.single-page-top-block > .section__container > .row,
    .hub-cards main > .section.single-page-top-block-slider:first-child > .section__container > .row,
    .hub-cards main > .d-none + .section.single-page-top-block-slider > .section__container > .row,
    .hub-cards main > .section.single-page-top-block_slider:first-child > .section__container > .row,
    .hub-cards main > .d-none + .section.single-page-top-block_slider > .section__container > .row {
        padding-top: 10.5rem !important; /* 168px, deckt Desktop/Ultra-Wide (max gemessen 150px) */
    }
}

/* Seiten mit sichtbarem Breadcrumb (Phase 2 T5): die Breadcrumb-Zeile sitzt
   im oben reservierten Freiraum unter der Nav — Reservierung um die
   Breadcrumb-Höhe (~2.5rem) kürzen, damit der Gesamtabstand gleich bleibt. */
.hub-cards.has-breadcrumb main > .section.creative-element:first-child > .section__container > .row,
.hub-cards.has-breadcrumb main > .section.single-page-top-block:first-child > .section__container > .row,
.hub-cards.has-breadcrumb main > .d-none + .section.single-page-top-block > .section__container > .row,
.hub-cards.has-breadcrumb main > .section.single-page-top-block-slider:first-child > .section__container > .row,
.hub-cards.has-breadcrumb main > .d-none + .section.single-page-top-block-slider > .section__container > .row,
.hub-cards.has-breadcrumb main > .section.single-page-top-block_slider:first-child > .section__container > .row,
.hub-cards.has-breadcrumb main > .d-none + .section.single-page-top-block_slider > .section__container > .row {
    padding-top: calc(10rem - 2.5rem) !important;
}
@media (min-width: 1200px) {
    .hub-cards.has-breadcrumb main > .section.creative-element:first-child > .section__container > .row,
    .hub-cards.has-breadcrumb main > .section.single-page-top-block:first-child > .section__container > .row,
    .hub-cards.has-breadcrumb main > .d-none + .section.single-page-top-block > .section__container > .row,
    .hub-cards.has-breadcrumb main > .section.single-page-top-block-slider:first-child > .section__container > .row,
    .hub-cards.has-breadcrumb main > .d-none + .section.single-page-top-block-slider > .section__container > .row,
    .hub-cards.has-breadcrumb main > .section.single-page-top-block_slider:first-child > .section__container > .row,
    .hub-cards.has-breadcrumb main > .d-none + .section.single-page-top-block_slider > .section__container > .row {
        padding-top: calc(10.5rem - 2.5rem) !important;
    }
}


/* --- 2) Kacheln als Karten — 1:1 wie .news-card auf /aktuelles/:
       beige Karte (#e9e6e4) auf weißem Grund, Bild oben,
       Titel/Text im Body, dezenter "Mehr erfahren"-Textlink --- */
/* Kacheln klebten am oberen Rand der Sektion (Theme-Row hatte nur
   pb-md-6/pb-lg-7/pb-xl-8, keinerlei Top-Padding). Gleiche Abstufung wie
   unten, damit der Abstand oben/unten symmetrisch ist. */
.hub-cards .section.service-blocks {
    background: #fff;
    padding-top: 2.5rem;
}
@media (min-width: 768px) {
    .hub-cards .section.service-blocks { padding-top: 4rem; }
}
@media (min-width: 992px) {
    .hub-cards .section.service-blocks { padding-top: 5rem; }
}
@media (min-width: 1200px) {
    .hub-cards .section.service-blocks { padding-top: 6rem; }
}
/* Außenabstand wie der News-Grid-Wrapper (padding: 0 1.5rem):
   Container-Padding anheben und die negativen Row-Margins begrenzen,
   sonst fressen sie das Padding auf und die Karten kleben am Rand. */
.hub-cards .section.service-blocks .section__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
/* Flexbox statt CSS Grid: bei Grid teilen sich ALLE Reihen dieselben
   Spalten-Tracks (eine unvollständige letzte Reihe -- z.B. 6 Karten = 4+2 --
   bleibt dadurch schmal, nur die letzte Zeile mit exakt so vielen Karten wie
   Gesamtanzahl < 4 würde stretchen). Flexbox verteilt freien Platz dagegen
   PRO ZEILE unabhängig, genau das will der Nutzer: jede Reihe mit weniger
   als 4 Karten wird breiter, egal ob es die einzige Reihe ist (3 Karten auf
   /sportkardiologie/) oder die letzte unvollständige Reihe einer
   6/10-Karten-Sektion.
   flex-basis calc(25% - 1.5rem) ist der Standard-Trick für "flex-wrap mit
   gap, hart gedeckelt auf 4 pro Reihe": 4 Items á (25% - 1.5rem) + 3 Gaps á
   2rem ergeben zusammen exakt 100% -- ein 5. Item würde die Zeile um 25%
   überschreiten und zwingt so den Umbruch. max() mit 280px als Untergrenze
   sorgt dafür, dass auf schmalen Screens (wo 1/4 der Breite unter 280px
   läge) automatisch weniger Karten pro Reihe passen statt sie zu quetschen. */
.hub-cards .section.service-blocks .section__container > .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.hub-cards .service-blocks__block {
    flex: 1 1 max(280px, calc(25% - 1.5rem));
    /* Karten wachsen bei <4 pro Reihe, aber nicht randlos bis zum
       Container-Rand -- 480px als Obergrenze (deutlich breiter als die
       alten 380px, aber weiterhin "inset" statt Vollbreite). Bleibt
       Restfläche übrig (z.B. 2 Karten auf einem sehr breiten Screen),
       verteilt justify-content:center sie symmetrisch statt einseitig. */
    max-width: 480px;
    /* Flex-Items haben wie Grid-Items per Spec min-width:auto (inhalts-
       basiert) statt 0 -- ein langes zusammengesetztes deutsches Wort ohne
       Umbruchstelle (z.B. "Durchschlafstörungen", "Verhaltensauffälligkeiten")
       zwingt die Karte sonst breiter als ihr Flex-Basis-Anteil, Text läuft
       sichtbar über den Kartenrand hinaus (Nutzer-Fund auf
       /schlafmedizin-krankheitsbilder/). min-width:0 lässt die Karte auf
       ihre berechnete Breite schrumpfen, erst DANN greift unten
       overflow-wrap zum Umbrechen des Worts selbst. */
    min-width: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* /leistungen/ (page-id-2704): die Überschrift sagt "Unsere drei Säulen",
   darunter standen aber vier gleich breite Kacheln in einer Reihe -- die
   vierte ("Mehr über CORTINUUM") ist keine Säule und zählte optisch mit.
   Sie bekommt deshalb eine eigene Zeile in doppelter Kachelbreite.
   Mechanik: die drei Säulen-Kacheln auf je 1/3 setzen, dann ist Zeile 1
   exakt voll (3 x (33.33% - 1.333rem) + 2 Gaps á 2rem = 100%) und die
   vierte wird von flex-wrap zwangsläufig umgebrochen -- kein ::after-
   Trick und kein Markup-Eingriff nötig.
   Die 2x-Breite muss die 480px-Deckelung oben mitziehen: min() nimmt auf
   breiten Screens 2 Kacheln + 1 Gap (2*480 + 2rem = 992px), auf schmaleren
   den prozentualen Wert. Ohne das bliebe die Kachel bei 480px stehen und
   sähe genauso breit aus wie eine normale. */
.page-id-2704.hub-cards .section.service-blocks .section__container > .row > .service-blocks__block {
    flex-basis: max(280px, calc(33.3333% - 1.3333rem));
}
.page-id-2704.hub-cards .section.service-blocks .section__container > .row > .service-blocks__block:nth-child(4) {
    flex-basis: max(280px, calc(66.6667% - 0.6667rem));
    max-width: min(calc(66.6667% - 0.6667rem), 992px);
}
/* Das Kachelbild würde bei doppelter Breite im 3:2-Format auch doppelt so
   hoch und liefe der Bildhöhe der drei Säulen-Kacheln davon. 3:1 hält die
   Bildhöhe stattdessen auf dem Wert der normalen Kacheln (doppelte Breite
   / doppeltes Seitenverhältnis), die Zeile behält ihren Rhythmus.
   Nur ab der Breakpoint-Grenze, ab der die Kachel überhaupt doppelt breit
   ist -- gestapelt auf schmalen Screens gilt wieder 3:2, sonst bliebe vom
   Motiv ein Streifen übrig.
   object-position:top, weil der mittige Default bei 3:1 oben und unten
   gleich viel wegnimmt -- auf dem Ärzte-Porträt (1620) schnitt das die
   Köpfe an. Oben ausgerichtet bleiben die Gesichter vollständig, weg fällt
   nur der untere Bildteil. Gilt anders als bei den Hero-Bildern, wo das
   Motiv unten liegt und deshalb mittig beschnitten wird. */
@media (min-width: 992px) {
    .page-id-2704.hub-cards .service-blocks__block:nth-child(4) .img-content img {
        aspect-ratio: 3 / 1;
        object-position: top;
    }
}

.hub-cards .service-blocks__block {
    position: relative;
    background: #e9e6e4;
    box-shadow: none;
    transition: box-shadow 0.2s ease;
    overflow: hidden;
    /* height:100% (Grid-Ära) resolved in Flexbox nicht mehr: ein Flex-Item
       mit explizit gesetzter Höhe wird vom Default align-items:stretch NICHT
       mehr auf die Zeilenhöhe gestreckt (stretch greift nur bei height:auto).
       Ergebnis war zuletzt unterschiedlich hohe Karten in derselben Reihe.
       height:auto lässt stretch wieder greifen -- alle Karten einer Flex-
       Reihe werden automatisch gleich hoch (Reihe für Reihe unabhängig). */
    height: auto;
}
.hub-cards .service-blocks__block:hover {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}
@media (prefers-reduced-motion: reduce) {
    .hub-cards .service-blocks__block {
        transition: none;
    }
}

/* Die dekorative "CO"-Grafik unter dem Header fing Klicks ab.
   .img-content__alt-img liegt position:absolute und wird per
   translateY(33%) ein Drittel ihrer Höhe unter die Header-Sektion
   geschoben -- ihr <img>-Kasten liegt damit über dem Anfang des nächsten
   Abschnitts. Auf /aktuelles/ sind das genau die Filter-Chips, die
   dadurch nicht mehr zuverlässig klickbar waren (Kundenfund).
   Das Theme macht es beim zweiten Header-Blocktyp bereits richtig
   (.single-page-top-block .alt-img hat pointer-events:none) -- beim
   creative-element fehlte es. Rein funktional, ändert nichts am Aussehen.
   Bewusst nicht auf .hub-cards eingegrenzt: die Grafik darf auf keiner
   Seite Klicks abfangen. */
.section.creative-element .img-content__alt-img {
    pointer-events: none;
}

/* Hero-Bilder auf ein einheitliches 3:2 begrenzen (Nutzer-Fund auf
   /schlafmedizin/: das hochformatige Schlafraum-Foto 1928x2560 machte den
   Header unnötig hoch -- das Theme lässt Hero-Bilder mit height:auto in
   Originalhöhe laufen, ein Hochformat frisst dadurch fast einen ganzen
   Viewport).
   Beschnitten wird MITTIG, nicht von unten: der Wunsch war "von unten
   beschneiden", das nimmt bei diesen Raumfotos aber genau das Motiv weg --
   auf 2777 liegt das Bett in der unteren Bildhälfte, oben ist nur Wand
   und Fensterlaibung; auf 2779 (/schlafapnoe/) bliebe vom Bild an der Wand
   nur der obere Rand. Mittig bleibt bei beiden der Raum als Ganzes
   erkennbar (Bett + Fenster + Nachttisch bzw. Bild + Sideboard + Stuhl).
   object-position ist deshalb bewusst nicht gesetzt (Default: center).
   Wirkung nach Bestand: 68 der 71 Hero-Bilder liegen bereits exakt auf
   1.50 und bleiben dadurch unverändert; beschnitten werden nur
   /schlafdiagnostik/ (1.33, minimal) und die beiden Hochformate
   /schlafmedizin/ + /schlafapnoe/ (0.75). Gilt für beide Hero-Blocktypen,
   die ein .img-content führen -- creative-element und
   single-page-top-block. Deko-Overlays (.alt-img, .img-content__alt-img)
   sind eigene Klassen und bleiben unberührt. */
.hub-cards .section.creative-element .img-content img,
.hub-cards .section.single-page-top-block .img-content img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Die frühere TEMPORÄR-Regel (.img-content { display:none !important })
   ist entfallen: sie hatte die Kachel-Bilder ausgeblendet, solange alle
   Kacheln dieselbe kleine Foto-Auswahl recycelten. Seit
   staging-changes/set-card-photos.php trägt jede Kachel ein thematisch
   passendes Foto (kein Motiv doppelt pro Seite), damit ist der Grund für
   die Ausblendung weg. */

/* Bild IMMER oben (Theme ordnet mobil Text vor Bild), bündig zur Karte —
   Theme-Abstände (margin-bottom 2rem !important) neutralisieren. */
.hub-cards .service-blocks__block .img-content {
    order: -1 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Hover-Overlay des alten Service-Looks abschalten (News-Karten haben keins) */
.hub-cards .service-blocks__block .img-content__shade {
    display: none !important;
}

/* Body wie news-card__body (padding 1.75rem 2rem 2rem) — überschreibt
   pb-5 und die asymmetrischen nth-child-Gutter-Paddings des Themes */
.hub-cards .service-blocks__block .text-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.75rem 2rem 2rem !important;
    margin: 0 !important;
}
/* Nutzer-Fund: reines overflow-wrap:break-word verhindert zwar das
   Überlaufen, bricht lange Wörter aber blind irgendwo um (z.B. "Einschlaf-
   störunge" + einzelnes "n" in der nächsten Zeile) -- hässlich. Echte
   Worttrennung mit Bindestrich an sinnvoller Silbengrenze braucht
   hyphens:auto + ein lang-Attribut (jetzt lang="de" in header.php, fehlte
   komplett). overflow-wrap bleibt als Fallback für Fälle, die die
   Trennungs-Engine nicht sauber umbrechen kann. */
.hub-cards .service-blocks__block .text-content h2 {
    color: #735b5f;
    margin-bottom: 1rem;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
}
.hub-cards .service-blocks__block .text-content p {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
}
/* Normaler Textabstand statt Bottom-Pin: der Link folgt dem Absatz wie ein
   weiteres Textelement, mit demselben Abstand, den auch der Absatz selbst
   nach oben hätte — klebt dadurch nicht mehr an der Kartenkante. */
.hub-cards .service-blocks__block__link {
    order: 10;
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
}

/* .btn → Textlink im news-card__readmore-Stil */
.hub-cards .service-blocks__block__link .btn {
    background: none;
    border: none;
    padding: 0;
    margin-left: 0; /* Theme-.btn bringt -1.3rem mit (für den echten Button gedacht) */
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #735b5f;
    font-weight: bold;
}
.hub-cards .service-blocks__block__link .btn > span:first-child::after {
    content: " \2192";
}
.hub-cards .service-blocks__block__link .service-blocks__block__on {
    display: none;
}

/* Ganze Kachel klickbar (wie news-card auf /aktuelles/), ohne das
   Theme-Markup anzufassen: Stretched-Link auf den bereits vorhandenen
   "Mehr erfahren"-Link (Theme liefert schon .service-blocks__block__link
   .btn mit korrektem href) -- dessen ::after deckt per position:absolute
   die komplette Karte ab (Bezugsrahmen: .service-blocks__block oben auf
   position:relative gesetzt). Rein CSS, reversibel, kein zusätzliches
   <a>-Wrapping nötig. */
.hub-cards .service-blocks__block__link .btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Vertikaler Abstand zwischen gestapelten Kachel-Reihen (mehrere
   service-block-Instanzen untereinander). Horizontaler Gutter läuft
   jetzt über gap in der .row-Regel weiter oben. */
.hub-cards .service-blocks .service-blocks__block {
    margin-bottom: 1.5rem;
}

/* Innenleben der Karte: Bild oben vollflächig, Text mit Innenabstand */
.hub-cards .service-blocks__block .img-content img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}
.hub-cards .service-blocks__block .text-content {
    padding: 1.75rem 2rem 2rem;
}

/* ============================================================
   Phase 2 T5: sichtbare Breadcrumbs
   Dezent, klein, muted — direkt unter der fixen Nav. Auf .hub-cards-Seiten
   sitzt sie im per Regel 1 reservierten Freiraum (siehe oben).
   ============================================================ */
/* Breadcrumb liegt in header.php NACH dem schließenden </header>, im
   normalen Textfluss — die Nav ist aber position:fixed (Bootstrap
   .position-fixed überschreibt das Theme-eigene position:sticky) und damit
   aus dem Fluss genommen. Ohne eigene Reservierung rutscht das Breadcrumb
   als erstes Flow-Element direkt unter/hinter die Nav und wird unsichtbar.
   Fix: Breadcrumb bekommt dieselbe Nav-Freiraum-Reservierung wie die
   Content-Blöcke (.pt-7/.pt-xl-9-Konvention des Themes) via padding-top,
   und zieht per negativem margin-bottom in exakt gleicher Höhe den
   nachfolgenden Block wieder hoch — so wird die Reservierung nicht doppelt
   verbraucht (Breadcrumb + folgender Block hätten sonst je einmal Nav-Höhe
   Leerraum). Netto-Effekt: ein Nav-Abstand, Breadcrumb sichtbar dazwischen. */
/* Breadcrumb-Sektion (.section.breadcrumb-section, header.php) folgt jetzt
   derselben Section+Container-Konvention wie jede andere Sektion der Seite:
   bg-gray für den vollflächigen, ruhigen Beige-Ton (kein Farbwechsel zu
   Weiß zwischen zwei Beige-Sektionen) und .section__container-Padding für
   die vertikale Achse — dadurch Text jetzt bündig mit dem Logo. */
.section.breadcrumb-section .section__container {
    padding-left: .75rem;
    padding-right: .75rem;
    max-width: 1920px;
    margin: 0 auto;
}

/* Breadcrumb liegt außerhalb von <main> — die Nav ist position:fixed
   (Bootstrap .position-fixed überschreibt das Theme-eigene sticky) und
   damit aus dem Fluss. Ohne eigene Reservierung rutscht das Breadcrumb
   hinter die Nav. Fix: nur ein padding-top in Nav-Höhe, sonst nichts — der
   nachfolgende Content-Block reserviert seinen eigenen Abstand bereits
   selbst (Regel oben in Abschnitt 1). */
.breadcrumb-trail {
    padding: calc(7rem - 2rem) 0 0.6rem;
    font-size: 0.8125rem;
    color: #767676;
}
@media (min-width: 1200px) {
    .breadcrumb-trail {
        padding-top: 7rem;
    }
}
.breadcrumb-trail ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.breadcrumb-trail li:not(:last-child)::after {
    content: "/";
    margin: 0 0.4em;
    color: #b3b3b3;
}
.breadcrumb-trail a {
    color: inherit;
    text-decoration: none;
}
.breadcrumb-trail a:hover {
    text-decoration: underline;
}
.breadcrumb-trail li:last-child {
    color: #4d4d4d;
}

/* ============================================================
   Nutzer-Feedback (/bluthochdruck/): Intro-Text-Block direkt nach dem
   creative-element-Kopf klebt am Farbwechsel -- die Theme-Row hat dort
   nur pb-5 (3rem unten), kein Top-Padding (gleiches Muster wie das
   frühere .service-blocks-Problem, siehe Abschnitt 2 oben). Betrifft alle
   Leistungsseiten mit creative-element-Kopf + folgendem Text-Block (T2/T3/
   T4-Seiten). Zwischen den Sektionen sitzt ein unsichtbares (d-none)
   Debug-Label als echtes DOM-Geschwister -- direkter "+"-Combinator
   greift daher nicht, siehe gleiches Muster in Abschnitt 1 oben.
   Nur der ERSTE Text-Block nach dem Kopf bekommt das Top-Padding
   (symmetrisch zu dessen eigenem pb-5), nicht jeder weitere gestapelte
   Text-Block darunter -- die brauchen den Abstand nicht. */
.hub-cards main > .section.creative-element + .d-none + .section.text-block .row {
    padding-top: 3rem;
}