/* =============================================================================
   Naturheilpraxis Lebensbaum - Design-System
   Behutsam modernisiert auf Basis der Farb- und Bildsprache der Vorgaengerseite.
   Alle Farbpaare sind gegen WCAG 1.4.3 geprueft (siehe docs/kontrast-pruefung.md).
   ========================================================================== */

/* --- Schriften: selbst gehostet, kein externes CDN -----------------------
   Die Vorgaengerseite verwendet durchgehend Old Standard TT - fuer
   Ueberschriften wie fuer Fliesstext. Sie laedt die Schrift allerdings von
   fonts.googleapis.com nach; hier liegt sie auf dem eigenen Server.
   (Die dort ebenfalls angeforderten Schriften Alegreya und Source Sans Pro
   kommen im gerenderten Ergebnis gar nicht vor - sie werden nie geladen und
   laufen ins Leere.) */
@font-face {
    font-family: 'Old Standard TT';
    src: url('../Fonts/old-standard-tt-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Old Standard TT';
    src: url('../Fonts/old-standard-tt-latin-400-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Old Standard TT';
    src: url('../Fonts/old-standard-tt-latin-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --- Gestaltungsraster ---------------------------------------------------- */
:root {
    /* Farben - im Browser aus der Vorgaengerseite ausgelesen, nicht aus dem
       CSS gezaehlt. Die beiden Gruentoene des Originals sind als Textfarbe
       unbrauchbar: Das Navigationsgruen #0BA010 erreicht auf Weiss 3,47:1,
       das Linkgruen #75A75A sogar nur 2,83:1. Verwendet wird deshalb ein
       abgedunkeltes Gruen derselben Anmutung. Alle uebrigen Werte sind
       unveraendert uebernommen. */
    --farbe-text:            #2B2B2B;
    --farbe-text-leise:      #5A5A5A;
    --farbe-grund:           #FFFFFF;
    --farbe-grund-akzent:    #FDE8EB;
    --farbe-primaer:         #541F04;
    --farbe-primaer-hell:    #7A3A16;
    --farbe-gruen:           #005F29;
    --farbe-gruen-dunkel:    #004A20;
    /* Originalgruen der Navigation - nur dekorativ, nie als Textfarbe und nie
       als Begrenzung einer Bedienflaeche (WCAG 1.4.11 nimmt Dekoration aus). */
    --farbe-marke:           #0BA010;
    --farbe-footer:          #5F2E2E;
    --farbe-footer-schluss:  #232323;
    --farbe-weiss:           #FFFFFF;
    --farbe-fehler:          #961C0E;
    --farbe-erfolg:          #2C5A34;
    --farbe-fokus:           #1A4FA0;
    /* Dekorative Trennlinie, bewusst unter 3:1 - nie als Begrenzung einer
       Bedienflaeche verwenden (WCAG 1.4.11). */
    --farbe-linie:           #EBD9DC;

    /* Typografie: fluide Skala, Basis 18px, kein Wert unter 16px */
    /* Wie im Original eine einzige Schrift fuer alles, in denselben Groessen:
       Fliesstext 16px bei 24px Zeilenhoehe, Ueberschriften mager statt fett.
       Die Vorlage deklariert Gewicht 300; Old Standard TT hat diesen Schnitt
       nicht, gerendert wird deshalb 400 - hier direkt so notiert. */
    --schrift-text:  'Old Standard TT', Georgia, 'Times New Roman', serif;
    --schrift-titel: 'Old Standard TT', Georgia, 'Times New Roman', serif;
    --groesse-basis:  1rem;
    --groesse-klein:  0.9375rem;
    --groesse-hero:   clamp(2.125rem, 1.4rem + 2.6vw, 3.0625rem);
    --groesse-h1:     clamp(1.875rem, 1.35rem + 1.9vw, 2.6rem);
    --groesse-h2:     clamp(1.5rem, 1.15rem + 1.3vw, 2.275rem);
    --groesse-h3:     clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);

    /* Abstaende */
    --abstand-xs: 0.5rem;
    --abstand-s:  1rem;
    --abstand-m:  1.75rem;
    --abstand-l:  3rem;
    --abstand-xl: 5rem;

    /* Der Inhaltsrahmen ist bewusst schmal gehalten: Bei 72rem stand der
       Fliesstext auf breiten Bildschirmen weit links und die rechte Haelfte
       blieb leer. 62rem liegt nah genug an der Lesebreite, damit die Spalte
       als bewusst gesetzte Kolumne wirkt. */
    /* Hoehe der festen Kopfzeile. Ergibt sich aus Logo (65px) plus dessen
       Innenabstand und dem Abstand der Kopfzeile - nachgemessen 90px. Auf
       schmalen Viewports ist das Logo kleiner, siehe Breakpoint unten. */
    --kopf-hoehe: 5.625rem;
    --hero-hoehe: min(32rem, 82vh);
    --banner-hoehe: min(24rem, 60vh);
    --breite-inhalt: 62rem;
    --breite-text:   44rem;
    --radius: 4px;

    /* WCAG 2.5.8: Mindestgroesse interaktiver Flaechen */
    --ziel-min: 24px;
}

/* --- Grundlagen ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    /* Kein festes font-size in px: respektiert die Browser-Grundschrift */
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--farbe-grund);
    color: var(--farbe-text);
    font-family: var(--schrift-text);
    font-size: var(--groesse-basis);
    line-height: 1.5;
    /* WCAG 1.4.12: Genug Raum, damit erhoehte Zeichen- und Zeilenabstaende
       den Text nicht abschneiden. */
    overflow-wrap: break-word;
}

h1, h2, h3, h4 {
    font-family: var(--schrift-titel);
    /* Wie in der Vorlage: dieselbe Textfarbe wie der Fliesstext, nicht braun.
       Das Braun kommt dort ausschliesslich im Kopfbereich der Startseite vor. */
    color: var(--farbe-text);
    /* Mager statt fett - der Browser wuerde sonst 700 einsetzen. */
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 var(--abstand-s);
    text-wrap: balance;
}
h1 { font-size: var(--groesse-h1); }
h2 { font-size: var(--groesse-h2); margin-top: var(--abstand-l); }
h3 { font-size: var(--groesse-h3); margin-top: var(--abstand-m); }

p, ul, ol { margin: 0 0 var(--abstand-s); max-width: var(--breite-text); }
ul, ol { padding-left: 1.25rem; }
li + li { margin-top: 0.35rem; }

img { max-width: 100%; height: auto; display: block; }

a {
    color: var(--farbe-gruen);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}
a:hover { color: var(--farbe-gruen-dunkel); text-decoration-thickness: 2px; }

/* WCAG 2.4.11 / 2.4.13: deutlich sichtbarer Fokus mit hohem Kontrast. Auf
   dunklem Grund wird der Rahmen weiss ausgespielt (siehe unten). */
:focus-visible {
    outline: 3px solid var(--farbe-fokus);
    outline-offset: 2px;
    border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Auf der dunklen Footer-Flaeche erreicht das Fokusblau nur 1.7:1 und waere
   praktisch unsichtbar. Dort wird weiss ausgespielt (13.3:1). */
.fuss :focus-visible,
.hero__inhalt :focus-visible {
    outline-color: var(--farbe-weiss);
}

/* Dasselbe in der durchsichtigen Kopfzeile ueber dem Foto: Dort lag das
   Fokusblau bei 1,0 bis 2,4:1 statt der geforderten 3:1 (WCAG 1.4.11).
   Ist die Kopfzeile weiss (gescrollt, Menue offen, Seite ohne Kopfbild),
   bleibt es beim Blau. */
.kopf--ueberlagernd:not(.kopf--gescrollt):not(.kopf--menue-offen) :focus-visible {
    outline-color: var(--farbe-weiss);
}

/* --- Hilfsklassen --------------------------------------------------------- */
.inhaltsbreite {
    width: 100%;
    max-width: var(--breite-inhalt);
    margin-inline: auto;
    padding-inline: var(--abstand-s);
}

.nur-fuer-screenreader {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skiplink {
    position: absolute;
    left: var(--abstand-s);
    top: -100%;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--farbe-primaer);
    color: var(--farbe-weiss);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--radius) var(--radius);
    transition: top 0.15s ease-in-out;
}
.skiplink:focus { top: 0; color: var(--farbe-weiss); }

main:focus { outline: none; }

/* --- Schaltflaechen ------------------------------------------------------- */
.knopf {
    display: inline-block;
    min-height: 44px;
    padding: 0.7rem 1.4rem;
    background: var(--farbe-gruen);
    color: var(--farbe-weiss);
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
}
.knopf:hover { background: var(--farbe-gruen-dunkel); color: var(--farbe-weiss); }
.knopf--hell {
    background: var(--farbe-weiss);
    color: var(--farbe-gruen);
    border-color: var(--farbe-gruen);
}
.knopf--hell:hover { background: var(--farbe-grund-akzent); color: var(--farbe-primaer); }

/* --- Kopfbereich ---------------------------------------------------------- */
/* Die Kopfzeile liegt fest am oberen Rand. Auf Seiten mit Kopfbild schwebt sie
   darueber; deshalb bekommt der Inhalt dort keinen Abstand nach oben. */
.seite { padding-top: var(--kopf-hoehe); }
.seite--kopfbild { padding-top: 0; }

.kopf {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 50;
    background: var(--farbe-weiss);
    border-bottom: 1px solid var(--farbe-linie);
    transition: background-color 0.35s ease, box-shadow 0.35s ease,
                border-color 0.35s ease;
}

/* Zustand am Seitenanfang, wenn ein Kopfbild darunter liegt.
   Der Schleier ist bewusst deckend genug: Bei voller Transparenz haenge der
   Kontrast der Navigation davon ab, wie hell das jeweilige Foto an genau
   dieser Stelle ist - und die Redakteurin tauscht Bilder aus. Bei 85 Prozent
   bleiben selbst ueber einem schwarzen Foto 5,7:1 fuer die Menuepunkte.
   Die Weichzeichnung laesst das Bild dennoch durchscheinen. */
/* Am Seitenanfang der Startseite: kein Balken, das Bild laeuft durch.
   Der weisse Hintergrund blendet sich beim Scrollen ein - und ebenso, sobald
   das Menue auf schmalen Bildschirmen aufgeklappt wird: Die weissen
   Menuepunkte lagen sonst auf hellen Bildstellen und reichten ueber das
   Kopfbild hinaus auf den weissen Seitengrund (gemessen 1,0 bis 2,3:1). */
.kopf--ueberlagernd:not(.kopf--gescrollt):not(.kopf--menue-offen) {
    background: transparent;
    border-bottom-color: transparent;
}
.kopf--ueberlagernd:not(.kopf--gescrollt):not(.kopf--menue-offen) .navigation__link {
    color: var(--farbe-weiss);
}
.kopf--ueberlagernd:not(.kopf--gescrollt):not(.kopf--menue-offen) .navigation__link:hover {
    color: var(--farbe-weiss);
    border-bottom-color: rgba(255, 255, 255, 0.65);
}
.kopf--ueberlagernd:not(.kopf--gescrollt):not(.kopf--menue-offen) .navigation__link[aria-current='page'] {
    color: var(--farbe-weiss);
    border-bottom-color: var(--farbe-weiss);
}
/* Das Logo traegt ein dunkles Rotbraun und steht am Seitenanfang ueber der
   dunkelsten Bildpartie. Dort erscheint es als helle Silhouette, sobald der
   Balken da ist wieder farbig. */
.kopf--ueberlagernd:not(.kopf--gescrollt):not(.kopf--menue-offen) .kopf__logo img {
    filter: brightness(0) invert(1);
}
.kopf--ueberlagernd:not(.kopf--gescrollt):not(.kopf--menue-offen) .kopf__umschalter {
    background: transparent;
    color: var(--farbe-weiss);
    border-color: var(--farbe-weiss);
}

.kopf--gescrollt,
.kopf--menue-offen { box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12); }

.kopf__zeile {
    display: flex;
    align-items: center;
    /* Navigation schliesst direkt an das Logo an, wie in der Vorlage - nicht
       am rechten Rand. Rechts bleibt Platz frei. */
    justify-content: flex-start;
    /* Normaler Abstand: Die Lesbarkeit haengt nicht mehr von der Position ab,
       sondern vom Verlauf unter der Kopfzeile. */
    gap: var(--abstand-l);
    flex-wrap: wrap;
    padding-block: var(--abstand-xs);
}
.kopf__logo { display: inline-flex; padding: 0.25rem; }
.kopf__logo img {
    width: auto;
    /* Darstellungsgroesse wie auf der Vorgaengerseite: 65px hoch (173px breit) */
    height: 4.0625rem;
    transition: height 0.25s ease, filter 0.25s ease;
}
/* Nach dem Scrollen ruecken Logo und Zeile zusammen, damit vom Inhalt mehr
   sichtbar bleibt. */
.kopf--gescrollt .kopf__logo img { height: 2.6rem; }

.kopf__umschalter {
    display: none;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.9rem;
    background: var(--farbe-weiss);
    color: var(--farbe-primaer);
    font: inherit;
    font-weight: 600;
    border: 2px solid var(--farbe-primaer);
    border-radius: var(--radius);
    cursor: pointer;
}
.kopf__umschalter[hidden] { display: none; }
.kopf__umschalter-strich,
.kopf__umschalter-strich::before,
.kopf__umschalter-strich::after {
    display: block;
    width: 1.25rem;
    height: 2px;
    background: currentColor;
    content: '';
}
.kopf__umschalter-strich { position: relative; }
.kopf__umschalter-strich::before { position: absolute; top: -6px; }
.kopf__umschalter-strich::after  { position: absolute; top: 6px; }

/* --- Navigation ----------------------------------------------------------- */
.navigation__liste,
.navigation__unterliste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: none;
}
/* Die allgemeine Listenregel (li + li) setzt einen Abstand nach oben. In der
   Navigation verschob sie jeden Punkt ausser dem ersten um 5,6 px nach unten,
   sodass "Home" hoeher stand; die Abstaende regelt hier allein gap. */
.navigation__liste li + li { margin-top: 0; }
.navigation__link {
    display: inline-block;
    /* WCAG 2.5.8: Zielflaeche sicher ueber 24x24px */
    min-height: 44px;
    padding: 0.6rem 0.4rem;
    color: var(--farbe-text);
    transition: color 0.35s ease, border-color 0.35s ease;
    /* Feste Groesse statt Mitwachsen mit der Grundschrift: Sonst wird die
       Navigation so breit, dass sie neben dem grossen Logo umbricht. Das
       Original setzt hier ebenfalls 16px - wie dort im Normalschnitt. */
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
    border-bottom: 3px solid transparent;
}
.navigation__link:hover {
    color: var(--farbe-gruen);
    border-bottom-color: var(--farbe-linie);
}
.navigation__link[aria-current='page'] {
    color: var(--farbe-gruen);
    border-bottom-color: var(--farbe-gruen);
}
.navigation__unterliste {
    flex-direction: column;
    gap: 0;
    padding-left: var(--abstand-s);
}
.navigation__link--unter { font-weight: 400; min-height: var(--ziel-min); padding-block: 0.35rem; }

/* --- Hero ----------------------------------------------------------------- */
.hero {
    position: relative;
}

/* Parallaxe: Das Kopfbild bleibt beim Scrollen am Fenster stehen, waehrend
   der weisse Inhaltsbereich darueber hinweggleitet. Die Vorlage erreicht das
   mit background-attachment: fixed. Hier steht stattdessen ein echtes
   <img> in einer feststehenden Huelle - so bleiben Alternativtext und
   responsive Bildgroessen erhalten, die ein CSS-Hintergrundbild nicht bietet.
   Der Text im Hero scrollt normal mit, genau wie im Original. */
.hero--mit-bild {
    height: var(--hero-hoehe);
    overflow: visible;
}
.hero__bildhuelle {
    position: fixed;
    inset-inline: 0;
    top: 0;
    height: var(--hero-hoehe);
    overflow: hidden;
    z-index: 0;
}
.hero--mit-bild .hero__bild {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    /* Ausschnitt nach oben versetzt: Dort ist das Foto hell, was die
       Navigation ueber dem Bild lesbar haelt. */
    object-position: 50% 18%;
}


/* Schmaler Verlauf, der ausschliesslich den Kopfzeilenstreifen abdunkelt.
   Er endet knapp darunter, sodass das Bild selbst unberuehrt bleibt. Ohne ihn
   haenge die Lesbarkeit der Navigation davon ab, welches Foto die Redakteurin
   gewaehlt hat - gemessen schwankt der Untergrund je nach Bild zwischen
   nahezu Schwarz und Weiss. Er blendet gegenlaeufig zum weissen Balken aus. */
.hero__bildhuelle::after,
.seitenbanner::after {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: calc(var(--kopf-hoehe) + 4rem);
    background: linear-gradient(to bottom,
                rgba(16, 12, 9, 0.76) 0,
                rgba(16, 12, 9, 0.70) var(--kopf-hoehe),
                rgba(16, 12, 9, 0) 100%);
    pointer-events: none;
    transition: opacity 0.35s ease;
    content: '';
}
.kopf--gescrollt ~ main .hero__bildhuelle::after,
.kopf--gescrollt ~ main .seitenbanner::after,
.kopf--menue-offen ~ main .hero__bildhuelle::after,
.kopf--menue-offen ~ main .seitenbanner::after { opacity: 0; }

/* Alles, was nach dem Kopfbild kommt, muss darueber liegen und einen eigenen
   Hintergrund mitbringen. Sonst bleibt das feststehende Bild sichtbar und die
   Inhalte verschwinden dahinter - das Bild gehoert nach hinten, die Flaechen
   scrollen davor. */
.inhalt-nach-hero,
.fuss {
    position: relative;
    z-index: 1;
}
.inhalt-nach-hero {
    background: var(--farbe-grund);
}
/* --- Willkommensblock unter dem Kopfbild -------------------------------- */
.willkommen {
    padding-block: var(--abstand-l) 0;
    text-align: center;
}
.willkommen__titel {
    margin-bottom: 0.5rem;
    font-size: var(--groesse-hero);
    color: var(--farbe-primaer);
}
.willkommen__name {
    margin: 0 auto;
    font-size: var(--groesse-h3);
    color: var(--farbe-primaer);
    letter-spacing: 0.02em;
}
.willkommen__name::after {
    display: block;
    width: 4rem;
    height: 2px;
    margin: var(--abstand-s) auto 0;
    background: var(--farbe-primaer);
    opacity: 0.55;
    content: '';
}

/* --- Seitenkopf ----------------------------------------------------------- */
/* Kopfbild der Unterseiten. Bewusst als eigenes Band ueber der Ueberschrift
   statt als Hintergrund mit Text darauf - so gibt es keinerlei Kontrastrisiko,
   egal welches Foto die Redakteurin spaeter waehlt. */
.seitenbanner {
    position: relative;
}

/* Abstand zwischen Kopfbild bzw. Kopfzeile und Seitenueberschrift. Ohne ihn
   stiess die H1 unmittelbar an die Bildkante oder die Kopfzeile. */
.seitenkopf { padding-top: var(--abstand-l); }

.seitenbanner img {
    width: 100%;
    height: var(--banner-hoehe);
    max-height: none;
    object-fit: cover;
    /* Wie beim Hero nach oben versetzt - dort sind die Fotos heller, was die
       Kopfzeile ueber dem Bild lesbar haelt. */
    object-position: 50% 18%;
    display: block;
}
/* --- Inhaltselemente ------------------------------------------------------ */
.inhalt-element { margin-bottom: var(--abstand-l); }
/* Hervorgehobener Block (Layout 1, z. B. TFM auf der Startseite): rosa Band ueber
   die volle Fensterbreite wie auf der Vorgaengerseite. box-shadow + clip-path statt
   100vw, weil 100vw die Scrollleiste mitzaehlt und waagerechtes Scrollen erzeugt. */
.frame-layout-1 {
    background: var(--farbe-grund-akzent);
    box-shadow: 0 0 0 100vmax var(--farbe-grund-akzent);
    clip-path: inset(0 -100vmax);
    padding-block: var(--abstand-l);
    margin-top: var(--abstand-l);
}
/* Zentrierter Block (Layout 2), z. B. "Herzlich willkommen" auf der Startseite -
   gleiche Ausrichtung wie die Oeffnungszeiten darueber */
.frame-layout-2 { text-align: center; }
.frame-layout-2 p { margin-inline: auto; }
/* Das Logo in Originalgroesse statt auf die Bildspalte gestreckt */
.frame-layout-1 h2 { margin-top: 0; }
.frame-layout-1 .ce-gallery img { width: auto; max-width: 100%; }
/* Steht das Band am Seitenende, schliesst es wie im Original direkt an den Fuss an */
.seite:has(main .frame-layout-1:last-child) .fuss { margin-top: 0; }

.therapie {
    display: grid;
    gap: var(--abstand-m);
    padding-block: var(--abstand-l);
    border-top: 1px solid var(--farbe-linie);
}
.therapie h2 { margin-top: 0; }
/* Sprungziel der Inhaltsliste: nicht unter der festen Kopfzeile verschwinden */
.therapie h2[id] { scroll-margin-top: calc(var(--kopf-hoehe) + var(--abstand-s)); }
.therapie__bild img { border-radius: var(--radius); }
.therapie__text > :last-child { margin-bottom: 0; }
/* Zwei Bilder: auf schmalen Bildschirmen untereinander ueber dem Text, im
   gleichen 4:3-Format wie die Einzelbilder */
.therapie--bilderspalte .therapie__bild { display: flex; flex-direction: column; gap: var(--abstand-s); }
.therapie--bilderspalte .therapie__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* --- Text mit Bild (Fluid Styled Content) --------------------------------- */
/* Ein Stylesheet fuer Fluid Styled Content ist bewusst nicht eingebunden; hier
   steht nur, was die Website braucht: Bild neben dem Text (links oder rechts,
   mit oder ohne Umfliessen werden gleich behandelt) sowie Bild darueber oder
   darunter. Auf schmalen Bildschirmen steht das Bild ueber dem Text. */
.ce-textpic { display: grid; gap: var(--abstand-m); }
.ce-gallery figure { margin: 0; }
.ce-gallery img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}
.ce-textpic.ce-intext .ce-gallery { max-width: 18rem; }
/* Mehrere Bilder einer Reihe stehen gleich breit nebeneinander */
.ce-gallery .ce-row { display: flex; gap: var(--abstand-s); }
.ce-gallery .ce-row + .ce-row { margin-top: var(--abstand-s); }
.ce-gallery .ce-column { flex: 1 1 0; min-width: 0; }
.ce-textpic.ce-intext .ce-gallery[data-ce-columns="2"] { max-width: 28rem; }
/* Mehrere Bilder in einer Spalte: auf schmalen Bildschirmen nebeneinander
   ueber dem Text, sonst untereinander neben dem Text (siehe unten) */
.ce-gallery[data-ce-columns="1"]:not([data-ce-images="1"]) { display: flex; gap: var(--abstand-s); }
.ce-textpic.ce-intext .ce-gallery[data-ce-columns="1"]:not([data-ce-images="1"]) { max-width: 28rem; }
.ce-gallery[data-ce-columns="1"]:not([data-ce-images="1"]) .ce-row { flex: 1 1 0; min-width: 0; margin-top: 0; }
/* Die erste Ueberschrift im Text beginnt buendig mit den Bildern */
.ce-bodytext > :first-child { margin-top: 0; }
.ce-bodytext > :last-child { margin-bottom: 0; }

@media (min-width: 48em) {
    .ce-textpic.ce-intext.ce-right { grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem); align-items: start; }
    .ce-textpic.ce-intext.ce-right .ce-gallery { order: 2; }
    .ce-textpic.ce-intext.ce-left { grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr); align-items: start; }
    /* Ueberschrift und Text senkrecht mittig zum Logo, wie im Original */
    .frame-layout-1 .ce-textpic.ce-intext.ce-left { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
    /* Zwei Bilder nebeneinander brauchen eine breitere Bildspalte */
    .ce-textpic.ce-intext.ce-right:has(.ce-gallery[data-ce-columns="2"]) { grid-template-columns: minmax(0, 1fr) minmax(16rem, 26rem); }
    .ce-textpic.ce-intext.ce-left:has(.ce-gallery[data-ce-columns="2"]) { grid-template-columns: minmax(16rem, 26rem) minmax(0, 1fr); }

    /* Mehrere Bilder untereinander neben dem Text: Die Bildspalte ist genau so
       hoch wie der Textblock, jedes Bild fuellt seinen Anteil und wird bei
       Bedarf beschnitten (object-fit). contain: size nimmt die Bilder aus der
       Hoehenberechnung - sonst bestimmten sie die Zeilenhoehe mit und die
       Spalte wuerde laenger als der Text. min-height verhindert winzige Bilder
       neben sehr kurzem Text. */
    .ce-textpic.ce-intext.ce-left:has(.ce-gallery[data-ce-columns="1"]:not([data-ce-images="1"])) { grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr); align-items: stretch; }
    .ce-textpic.ce-intext.ce-right:has(.ce-gallery[data-ce-columns="1"]:not([data-ce-images="1"])) { grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem); align-items: stretch; }
    .ce-textpic.ce-intext .ce-gallery[data-ce-columns="1"]:not([data-ce-images="1"]) {
        flex-direction: column;
        max-width: none;
        contain: size;
        min-height: 20rem;
    }
    .ce-gallery[data-ce-columns="1"]:not([data-ce-images="1"]) .ce-row { min-height: 0; }
    .ce-gallery[data-ce-columns="1"]:not([data-ce-images="1"]) .ce-column,
    .ce-gallery[data-ce-columns="1"]:not([data-ce-images="1"]) figure { height: 100%; }
    .ce-gallery[data-ce-columns="1"]:not([data-ce-images="1"]) img { height: 100%; object-fit: cover; }
}

/* Uhrzeiten und Telefonnummern nicht mitten in der Angabe umbrechen */
.zeiten__uhrzeit,
a[href^="tel:"] { white-space: nowrap; }
/* E-Mail-Adressen als Ganzes in die naechste Zeile statt am Bindestrich
   ("naturheilpraxis-" / "lebensbaum.de") - das saehe wie eine Silbentrennung
   aus. Getrennt wird nur, wenn die Adresse auch allein nicht in die Zeile
   passt (max-width), damit nichts ueber den Rand ragt. */
a[href^="mailto:"] { display: inline-block; max-width: 100%; }

/* --- Kontaktseite --------------------------------------------------------- */
.kontakt__raster { display: grid; gap: var(--abstand-m); }
.kontakt__einleitung { margin-bottom: var(--abstand-m); }
.kontakt__einleitung > :last-child > :last-child { margin-bottom: 0; }
.kontakt__daten {
    background: var(--farbe-grund-akzent);
    padding: var(--abstand-m);
    border-radius: var(--radius);
}
.kontakt__daten h2:first-child { margin-top: 0; }
.kontakt__daten > :last-child { margin-bottom: 0; }
.kontakt__daten address { font-style: normal; margin-bottom: var(--abstand-s); }

/* --- Fussbereich ---------------------------------------------------------- */
.fuss {
    margin-top: var(--abstand-xl);
    background: var(--farbe-footer);
    color: var(--farbe-weiss);
}
.fuss a { color: var(--farbe-weiss); }
.fuss a:hover { color: var(--farbe-grund-akzent); }
.fuss__raster {
    display: grid;
    gap: var(--abstand-m);
    padding-block: var(--abstand-l);
}
.fuss__titel { color: var(--farbe-weiss); font-size: var(--groesse-h3); margin-top: 0; }
.fuss__adresse { font-style: normal; }
.fuss__name { font-weight: 600; }
.fuss__liste { list-style: none; padding: 0; margin: 0; }
.fuss__liste li + li { margin-top: 0.35rem; }
.fuss__liste a { display: inline-block; min-height: var(--ziel-min); padding-block: 0.2rem; }
.fuss__schluss {
    background: var(--farbe-footer-schluss);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding-block: var(--abstand-s);
    font-size: var(--groesse-klein);
}
.fuss__schluss p { margin: 0; }

/* =============================================================================
   Breakpoints. Mobile first; ab hier wird ergaenzt, nie zurueckgenommen.
   ========================================================================== */

/* Schmale Viewports: Navigation wird eingeklappt. Die Regeln greifen nur,
   wenn JavaScript die Klasse gesetzt hat - ohne JavaScript bleibt das Menue
   sichtbar und damit bedienbar. */
/* Menue-Knopf bis 900px: Mit dem Logo in Originalgroesse passen Logo und
   sechs Menuepunkte erst ab dieser Breite in eine Zeile - darunter brach die
   Kopfzeile um und verdeckte den Seitenanfang. Gleicher Wert in main.js. */
@media (max-width: 56.249em) {
    /* Etwas kleineres Logo, damit es zusammen mit dem Menue-Knopf in eine
       Zeile passt - sonst bricht die Kopfzeile auf schmalen Geraeten um.
       Der reservierte Platz wird entsprechend mitgezogen. */
    :root { --kopf-hoehe: 4.0625rem; }
    /* Wie auf der Vorgaengerseite: 40px hoch (106px breit) */
    .kopf__logo img { height: 2.5rem; }
    .kopf--gescrollt .kopf__logo img { height: 2.4rem; }

    .js-menue .navigation { display: none; width: 100%; }
    .js-menue .navigation--offen {
        display: block;
        /* Feste Kopfzeile: Das offene Menue darf nicht ueber den Bildschirm
           hinauslaufen, sonst sind die unteren Punkte unerreichbar. */
        max-height: calc(100vh - var(--kopf-hoehe));
        overflow-y: auto;
    }
    .js-menue .kopf__umschalter { display: inline-flex; }
    .navigation__liste { flex-direction: column; gap: 0; }
    .navigation__link { display: block; border-bottom: 1px solid var(--farbe-linie); }
    /* Das offene Menue scrollt (overflow-y) und schneidet alles ab, was ueber
       seine Kanten ragt - beim vollbreiten Menuepunkt also die Seiten des
       aussen liegenden Fokusrahmens. Hier sitzt der Rahmen deshalb buendig
       innen; der Innenabstand des Links haelt ihn von der Schrift fern. */
    .js-menue .navigation--offen .navigation__link:focus-visible { outline-offset: -3px; }
}

@media (min-width: 48em) {
    .inhaltsbreite { padding-inline: var(--abstand-m); }
    /* Die Bildspalte wird nur reserviert, wenn es auch ein Bild gibt.
       Sonst quetschte sich der Text in die schmale zweite Spalte und die
       linke Haelfte blieb leer. */
    .therapie--mit-bild { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); align-items: start; }
    /* Zwei Bilder neben dem Text: Die Bildspalte ist genau so hoch wie der
       Text, beide Bilder teilen sich die Hoehe. contain: size nimmt die
       Bilder aus der Hoehenberechnung - sonst bestimmten sie die Zeilenhoehe
       mit und die Spalte wuerde laenger als der Text (wie bei der Galerie
       auf der Seite Informationen). */
    .therapie--bilderspalte { align-items: stretch; }
    .therapie--bilderspalte .therapie__bild { contain: size; min-height: 20rem; }
    .therapie--bilderspalte .therapie__bild img { flex: 1 1 0; min-height: 0; aspect-ratio: auto; }
    .kontakt__raster { grid-template-columns: 1fr 1fr; }
    .fuss__raster { grid-template-columns: repeat(3, 1fr); }

    /* Der Textkasten liegt frei auf dem Bild - ohne Schleier. Gemessen
       erreicht das Braun dort 9,2:1 gegen den hellsten Untergrund. */
}

/* WCAG 2.3.3 / Nutzerpraeferenz: keine Bewegung, wenn abbestellt. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    /* Parallaxe ist eine Bewegung, die beim Scrollen entsteht und bei
       vestibulaeren Beschwerden Uebelkeit ausloesen kann. Wer Bewegung
       abbestellt hat, bekommt ein normal mitscrollendes Bild. */
    .hero__bildhuelle { position: absolute; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Hoher Kontrastmodus / erzwungene Farben */
@media (forced-colors: active) {
    .knopf { border-color: currentColor; }
    .navigation__link[aria-current='page'] { border-bottom-color: currentColor; }
}

@media print {
    .kopf, .fuss, .skiplink { display: none; }
    body { background: #fff; color: #000; font-size: 11pt; }
    a::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}


/* --- Oeffnungszeiten unter dem Kopfbild ----------------------------------- */
.oeffnungszeiten {
    padding-block: var(--abstand-l) var(--abstand-m);
    text-align: center;
}
.oeffnungszeiten h2 { margin-top: 0; }
.oeffnungszeiten p { margin-inline: auto; }
.oeffnungszeiten__zeit { font-size: 1.125rem; }