/* ==========================================================================
   Elena Dieterle – Praxis für Geistiges Heilen
   Marken-Ebene über dem Wivana-Template.
   Farben stammen aus der bisherigen Website (#411E06, #FFF8F1, #6F5441, #E0BE9A).
   ========================================================================== */

:root {
    --haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
}

body {
    font-family: var(--font-2);
    color: var(--text-color-1);
    background-color: #fff;
}

/* Cormorant Garamond ist zierlicher als Philosopher – etwas mehr Gewicht und
   Größe, damit die Überschriften dieselbe Präsenz behalten. */
h1, h2, h3, h4, h5, h6, .title-about, .banner-title, .text-subtitle, .font-1 {
    font-weight: 600;
}
h1, .banner-title { font-size: 76px; line-height: 1.06em; }
h2 { font-size: 54px; }
.title-about { font-size: 52px; line-height: 1.1em; font-weight: 600; }
.text-subtitle { font-size: 26px; }

.text-grey, .text-white, .text-silver { font-size: 17px; line-height: 1.75; }
p { line-height: 1.75; }

/* Cormorant setzt Ziffern als Mediaevalziffern – "01" sah aus wie "o1".
   Ueberall, wo die Schrift Zahlen zeigt, normale Versalziffern verwenden. */
h1, h2, h3, h4, h5, h6, .title-about, .text-subtitle, .price-value, .notice-title {
    font-variant-numeric: lining-nums;
}

/* Kurze Ueberschrift neben langem Fliesstext: oben ausrichten und beim Lesen
   mitlaufen lassen, statt mittig in einer leeren Flaeche zu stehen. */
@media screen and (min-width: 992px) {
    .row.align-items-center:has(> .col.prose):not(:has(img)) { align-items: flex-start !important; }
    .row.align-items-center:has(> .col.prose):not(:has(img)) > .col:not(.prose) {
        position: sticky; top: 40px;
    }
}

/* Das Eyebrow-Label über den Überschriften */
.philosopher.fs-14 { letter-spacing: 1.6px; text-transform: uppercase; }

/* --- Navbar: Logo-Marke plus Wortmarke ---------------------------------- */
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 52px; height: 52px; object-fit: contain; }
.brand-name {
    font-family: var(--font-1);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 2.5px;
    line-height: 1;
    color: #fff;
}
.brand-claim {
    font-family: var(--font-2);
    font-size: 10px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--color-lighter);
}
.navbar-brand:hover .brand-name { color: var(--color-lighter); }
.nav-link { letter-spacing: 0.3px; }
.nav-link.active { color: #fff; }

/* Buttons: die Template-Regel max-width:fit-content laesst lange Beschriftungen
   inline umbrechen und ueberlappen. Als Flex-Element bleibt der Knopf geschlossen. */
.btn-light, .btn-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.3;
}

/* Auf dunklem Grund ist reines Gold-Braun zu dunkel für den Button */
.bg-hero .btn-light { background-color: var(--color-lighter); color: var(--heading-color); }
.bg-hero .btn-light:hover { background-color: #fff; color: var(--heading-color); }

/* --- Hero ---------------------------------------------------------------- */
.bg-hero { background-position: center; }
.hero-title { width: 80%; }
.hero-subtitle { width: 62%; }

/* --- Leistungskarten ----------------------------------------------------- */
.custom-card { max-width: 46%; }
.card-body .text-subtitle { line-height: 1.25; }

/* Das Template legt die Karte absolut auf das Bild. Bei laengeren Texten ragt
   sie dann unten heraus. Ab 992px steht die Karte deshalb im Fluss, unten links
   im Bild ausgerichtet – die Bildflaeche waechst dadurch mit dem Text mit.
   Ab 1200px; darunter (zweispaltig bzw. Handy) steht das Bild ueber der Karte. */
@media screen and (min-width: 1200px) {
    .bg-service-1, .bg-service-2, .bg-service-3,
    .bg-service-4, .bg-service-5, .bg-service-6 {
        display: flex;
        align-items: flex-end;
    }
    .custom-card {
        position: static;
        margin: 45px 0 45px 5%;
    }
}

/* Die Sektionsbilder brauchen einen Verlauf, damit die weiße Karte darauf trägt */
.bg-service-1, .bg-service-2, .bg-service-3, .bg-service-4,
.bg-service-5, .bg-service-6 {
    background-position: center;
    border-radius: 10px;
}
/* Das Template blendet die Bilder 1–4 unter 992 px aus, 5 und 6 nicht. Damit
   alle sechs Karten auf dem Handy gleich aussehen, hier fuer alle gesetzt. */
.bg-service-1 { background-image: url('../img/karte-aufrichtung.webp'); }
.bg-service-2 { background-image: url('../img/karte-energie.webp'); }
.bg-service-3 { background-image: url('../img/haus.webp'); }
.bg-service-4 { background-image: url('../img/karte-tier.webp'); }
.bg-service-5 {
    background-image: url('../img/karte-beratung.webp');
    min-height: 455px; background-size: cover; background-repeat: no-repeat; position: relative;
}
.bg-service-6 {
    background-image: url('../img/karte-fern.webp');
    min-height: 455px; background-size: cover; background-repeat: no-repeat; position: relative;
}
/* Tierbild: Tiere auf weissem Grund – am Desktop ganz zeigen, rechts neben der Karte */
@media screen and (min-width: 1200px) {
    .bg-service-4 { background-color: #fff; background-size: 50% auto; background-position: right 3% center; }
}
/* Aufrichtung: der liegende Mann soll rechts neben der Karte zu sehen sein */
.bg-service-1 { background-position: center 75%; }

/* --- Bilder --------------------------------------------------------------
   Das Template setzt bei .img-about-last height:100%. Steht ein Bild allein in
   seiner Spalte, kollabiert diese Hoehe auf 0 – deshalb hier eine eigene Klasse
   mit fester Seitenverhaeltnis-Angabe, die zugleich Layoutspruenge verhindert. */
.img-frame {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}
.img-frame-4x5  { aspect-ratio: 4 / 5;  height: auto; }
.img-frame-3x2  { aspect-ratio: 3 / 2;  height: auto; }
.img-frame-1x1  { aspect-ratio: 1 / 1;  height: auto; }

/* --- Inhaltsseiten (Fließtext) ------------------------------------------- */
.prose p { margin-bottom: 1.15rem; }
.prose ul { padding-left: 0; list-style: none; margin-bottom: 1.5rem; }
.prose ul li {
    position: relative; padding-left: 30px; margin-bottom: 12px; line-height: 1.7;
}
/* Haken als Hintergrundbild statt Icon-Schrift – spart das Font-Awesome-Paket */
.prose ul li::before {
    content: "";
    position: absolute; left: 0; top: 7px;
    width: 14px; height: 14px;
    background-color: var(--color-main);
    -webkit-mask: var(--haken) center / contain no-repeat;
            mask: var(--haken) center / contain no-repeat;
}
.prose ul.list-dot li::before {
    top: 10px; width: 7px; height: 7px; border-radius: 50%;
    -webkit-mask: none; mask: none;
}

/* --- Hinweis-Kaesten ------------------------------------------------------
   Gleiche Machart wie die Template-Karten (.card): feine Linie, 10 px Radius. */
.notice {
    background-color: var(--color-border);
    border: 1px solid #c4c4c4;
    border-radius: 10px;
    padding: 28px 32px;
}
.notice p:last-child { margin-bottom: 0; }
.notice .notice-title {
    font-family: var(--font-1); font-size: 22px; font-weight: 600;
    color: var(--heading-color); margin-bottom: 12px;
}
/* Rechtlicher Hinweis am Seitenende: kein Kasten, ruhiges Kleingedrucktes */
.notice-recht {
    background: none; border: 0; border-radius: 0; padding: 0;
    max-width: 640px; margin: 0 auto; text-align: center;
}
.notice-recht .notice-title { font-size: 20px; margin-bottom: 10px; }
.notice-recht p:not(.notice-title) { font-size: 15px; line-height: 1.75; }

/* --- Preise -------------------------------------------------------------- */
.price-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 18px 0; border-bottom: 1px solid #E8DCD0;
}
.price-row:last-child { border-bottom: none; }
.price-meta { font-size: 14px; color: var(--text-color-1); }
.price-value { font-family: var(--font-1); font-size: 24px; font-weight: 600; color: var(--color-main); white-space: nowrap; }

/* Preisliste in den Leistungskarten auf termin-buchen.html */
.preisliste { list-style: none; padding: 0; margin: 0; }
.preisliste .price-row { padding: 11px 0; font-size: 16px; color: var(--text-color-1); }
.preisliste .price-value { font-size: 22px; }
.card .text-subtitle a { color: var(--heading-color); }
.card .text-subtitle a:hover { color: var(--color-main); }

/* Einwilligungs-Haken im Formular in der Markenfarbe */
.form-consent input[type="checkbox"] { accent-color: var(--color-main); flex: 0 0 auto; }

/* --- Online-Buchung (termin-buchen.html, js/buchung.js) ------------------ */
.buchung-schritt { margin-bottom: 40px; }
.buchung-titel {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--font-1); font-size: 26px; font-weight: 600;
    color: var(--heading-color); margin-bottom: 18px;
    font-variant-numeric: lining-nums;
}
.buchung-titel span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--color-main); color: #fff;
    font-family: var(--font-2); font-size: 15px; font-weight: 500;
}
.buchung-varianten { display: grid; gap: 8px; }
.buchung-variante {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border: 1px solid #E8DCD0; border-radius: 10px;
    background: #fff; cursor: pointer; transition: border-color .2s ease, background-color .2s ease;
}
.buchung-variante:hover { border-color: var(--color-main); }
.buchung-variante:has(input:checked) { border-color: var(--color-main); background: var(--color-subtle); }
.buchung-variante input { accent-color: var(--color-main); }
.buchung-variante-name { flex: 1; color: var(--heading-color); }
.buchung-variante .price-value { font-size: 22px; }

.kalender { background: #fff; border: 1px solid #E8DCD0; border-radius: 10px; padding: 20px; }
.kalender-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.kalender-monat { font-family: var(--font-1); font-size: 24px; font-weight: 600; color: var(--heading-color); }
.kalender-nav {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid #E8DCD0; background: transparent; color: var(--heading-color);
    font-size: 22px; line-height: 1;
}
.kalender-nav:hover:not(:disabled) { border-color: var(--color-main); color: var(--color-main); }
.kalender-nav:disabled { opacity: .3; }
.kalender-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; justify-items: center; }
.kalender-wt { width: 100%; text-align: center; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-color-1); padding-bottom: 4px; }
.kalender-tag {
    width: 100%; max-width: 46px; aspect-ratio: 1 / 1; border-radius: 50%; border: 1px solid transparent;
    background: transparent; color: #B9A79A; font-size: 15px; font-variant-numeric: tabular-nums;
}
.kalender-tag:disabled { cursor: default; }
.kalender-tag.frei { color: var(--heading-color); background: var(--color-subtle); border-color: var(--color-main); font-weight: 500; }
.kalender-tag.frei:hover { background: var(--color-lighter); }
.kalender-tag.gewaehlt, .kalender-tag.gewaehlt:hover { background: var(--color-main); color: #fff; }
.kalender-legende { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-color-1); margin: 14px 0 0; }
.kalender-legende .punkt { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--color-main); background: var(--color-subtle); }

.zeit-knopf {
    border: 1px solid var(--color-main); background: #fff; color: var(--heading-color);
    border-radius: 50px; padding: 10px 20px; font-size: 15px; font-variant-numeric: tabular-nums;
    transition: background-color .2s ease, color .2s ease;
}
.zeit-knopf:hover { background: var(--color-subtle); }
.zeit-knopf.gewaehlt { background: var(--color-main); color: #fff; }

.buchung-formular, .buchung-erfolg { position: sticky; top: 24px; }
.buchung-zusammenfassung {
    background: var(--color-subtle); border-radius: 10px; padding: 16px 18px; margin-bottom: 22px;
    font-size: 15px; color: var(--text-color-1);
}
.buchung-zusammenfassung dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.buchung-zusammenfassung dt { font-weight: 500; color: var(--heading-color); }
.buchung-zusammenfassung dd { margin: 0; }
.buchung-zusammenfassung dd.offen { font-style: italic; }
.buchung-erfolg .buchung-titel span { background: var(--color-main); }
.form-button:disabled { opacity: .5; cursor: not-allowed; }
.kalender-tag:focus-visible, .zeit-knopf:focus-visible, .kalender-nav:focus-visible,
.buchung-variante:has(input:focus-visible) { outline: 2px solid var(--color-main); outline-offset: 2px; }
@media screen and (max-width: 991px) {
    .buchung-formular, .buchung-erfolg { position: static; }
}
@media screen and (max-width: 575px) {
    .kalender { padding: 14px 10px; }
    .kalender-gitter { gap: 3px; }
    .kalender-tag { font-size: 14px; }
}

/* --- Terminverwaltung (verwaltung.html) --------------------------------- */
.verwaltung-liste { display: grid; gap: 12px; }
.verwaltung-eintrag { background: #fff; border: 1px solid #E8DCD0; border-radius: 10px; padding: 16px 20px; }
.verwaltung-eintrag.abgesagt { opacity: .7; }
.verwaltung-kopf { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; color: var(--heading-color); }
.verwaltung-preis { font-family: var(--font-1); font-size: 20px; font-weight: 600; color: var(--color-main); font-variant-numeric: lining-nums; }
.verwaltung-notiz { font-style: italic; }
.price-pick-absage {
    border: 1px solid #B3261E; background: transparent; color: #B3261E;
    border-radius: 50px; padding: 6px 16px; font-size: 14px; white-space: nowrap;
}
.price-pick-absage:hover { background: #B3261E; color: #fff; }
details > summary.buchung-titel { list-style: none; }
details > summary.buchung-titel::before { content: "›"; display: inline-block; transition: transform .2s ease; }
details[open] > summary.buchung-titel::before { transform: rotate(90deg); }

/* --- Seitenkopf der Unterseiten ------------------------------------------ */
/* Der Hero wird zweifach abgedunkelt: vom Farbverlauf im style-Attribut von
   .page-head und vom .overlay-hero des Templates darueber. Frueher hatte
   .page-head zusaetzlich Innenabstaende (oben 40 px, unten 90 px). Die lagen
   ausserhalb des .overlay-hero und bekamen deshalb nur die erste Ebene ab –
   sichtbar als hellbrauner Balken oben und unten im Seitenkopf.
   Ohne diesen Innenabstand fuellt .overlay-hero den ganzen Kopf, die Abdunklung
   ist ueberall gleich. Den Abstand bringt .overlay-hero selbst mit
   (padding-bottom 100 px, unter 992 px 60 px). */
.page-head {
    background-color: var(--color-darker);
    background-size: cover;
    background-position: center;
    padding-top: 0;
    padding-bottom: 0;
}
.page-head .overlay-hero { padding-top: 0; }
.page-head .breadcrumb-trail { font-size: 14px; color: var(--color-lighter); letter-spacing: 0.4px; }
.page-head .breadcrumb-trail a { color: var(--color-lighter); }
.page-head .breadcrumb-trail a:hover { color: #fff; }

/* --- Ablauf als Zeitleiste ---------------------------------------------
   Template-Karten aus "Our Process", nur mit Schrittnamen. Die Nummer ist
   groesser, ab 992 px verbindet eine feine Linie die Schritte. */
.ablauf .card-body { padding: 34px 28px; display: flex; flex-direction: column; gap: 14px; }
.ablauf .card-body .c-main {
    font-family: var(--font-1); font-size: 54px; line-height: 1; font-weight: 600;
    opacity: .85;
}
.ablauf .card-body .c-semi-black { font-size: 24px; line-height: 1.25; hyphens: manual; }
/* Fuenf Schritte (Aufrichtung): kleinere Karten, damit alle in eine Reihe passen */
.ablauf-5 .card-body { padding: 28px 20px; gap: 10px; }
.ablauf-5 .card-body .c-main { font-size: 44px; }
.ablauf-5 .card-body .c-semi-black { font-size: 20px; }
/* Verbindungslinie ab 992 px, wenn alle vier Schritte in einer Reihe stehen. */
@media screen and (min-width: 992px) {
    .ablauf > .col { position: relative; }
    .ablauf > .col:not(:last-child)::after {
        content: ""; position: absolute; z-index: 1;
        top: 50%; right: -9px; width: 18px; height: 1px;
        background-color: var(--color-main);
    }
    .ablauf > .col:not(:last-child)::before {
        content: ""; position: absolute; z-index: 2;
        top: calc(50% - 3px); right: -3px; width: 7px; height: 7px; border-radius: 50%;
        background-color: var(--color-main);
    }
}

/* --- Bewegter Hintergrund im Seitenkopf ---------------------------------
   Wie auf der bisherigen Wix-Seite laeuft hinter dem Kopf ein stummes Video.
   Es liegt unter .overlay-hero, die Abdunklung des Templates bleibt also
   dieselbe. Das Posterbild steht da, bis das Video laeuft; bei
   "Bewegung reduzieren" haelt index.js das Video an. */
.bg-hero, .page-head { position: relative; isolation: isolate; }
.hero-video {
    position: absolute; inset: 0; z-index: -1;
    width: 100%; height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* --- Formular ------------------------------------------------------------ */
.form { background-color: var(--color-subtle); border-color: #E8DCD0; }
.form-input, .form-textarea, .form-select { background-color: transparent; color: var(--heading-color); }
.form-input:focus, .form-textarea:focus, .form-select:focus { border-bottom-color: var(--color-main); }
.form-button { border-radius: 50px; font-family: var(--font-2); }
.form-consent { font-size: 13px; line-height: 1.6; color: var(--text-color-1); }
.form-consent a { color: var(--color-main); text-decoration: underline; }
.form-status { display: none; border-radius: 8px; padding: 12px 16px; font-size: 15px; margin-bottom: 16px; }
.form-status.ok { display: block; background: #EAF3EC; color: #2E7D4F; }
.form-status.err { display: block; background: #FBEAE8; color: #B3261E; }

/* --- Datenschutzkonforme Einbettung (Zwei-Klick) ------------------------- */
.embed-consent {
    background-color: var(--color-subtle);
    border: 1px solid #E8DCD0;
    border-radius: 10px;
    padding: 40px 32px;
    text-align: center;
}
.embed-consent .embed-title {
    font-family: var(--font-1); font-size: 24px; font-weight: 600; color: var(--heading-color);
}
.embed-consent p { font-size: 15px; max-width: 560px; margin: 12px auto 20px; }
.embed-frame { width: 100%; height: 420px; border: 0; border-radius: 10px; display: block; }

/* --- Footer -------------------------------------------------------------- */
.footer-logo { width: 84px; height: 84px; object-fit: contain; }
.footer-brand-name {
    font-family: var(--font-1); font-size: 24px; font-weight: 600;
    letter-spacing: 2.5px; color: #fff;
}
.footer-legal { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 24px; margin-top: 48px; }
.subtext-footer { width: 80%; }

/* --- Cookie-Hinweis ------------------------------------------------------ */
.cookie-bar {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1080;
    background: #fff; border-radius: 10px;
    box-shadow: 0 10px 30px rgba(65,30,6,0.16);
    padding: 20px 24px; max-width: 560px; display: none;
}
.cookie-bar.show { display: block; }
.cookie-bar p { font-size: 14px; margin-bottom: 14px; }
.cookie-bar a { color: var(--color-main); text-decoration: underline; }

/* --- Sprungmarke für Screenreader / Tastatur ----------------------------- */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 2000;
    background: var(--color-darker); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* --- Media Queries ------------------------------------------------------- */
@media screen and (max-width: 1220px) {
    /* Das Template nimmt .width-base unterhalb 1220px die Breitenbegrenzung, aber
       nicht den Innenabstand – dadurch ragen die negativen Zeilenraender von
       Bootstrap heraus. Hier wieder Innenabstand geben. */
    .width-base { padding-left: 24px; padding-right: 24px; }
    .hero-title, .hero-subtitle, .subtext-footer { width: 100%; }
}
/* Das Menue klappt seit dem langen Punkt "Geistige Wirbelsaeulenaufrichtung"
   schon unter 1200 px ein (navbar-expand-xl), ab 1200 bis 1399 px ohne
   "Startseite" (das Logo fuehrt dorthin). */
@media screen and (max-width: 1199px) {
    .offcanvas.show .nav-link { font-size: 15px; }
    /* Leistungskarten unter 1200 px: oben das Bild, darunter die Karte. Frueher
       wurde die Karte 60 px hochgezogen – sie verdeckte das Bild ganz und
       ueberlappte den Knopf der Karte darueber. */
    .custom-card { position: static; max-width: 100%; margin: 0; }
    .bg-service-1, .bg-service-2, .bg-service-3,
    .bg-service-4, .bg-service-5, .bg-service-6 {
        min-height: 0;
        padding: 0;
        background-size: 100% auto;
        background-position: center top;
    }
    /* Das ganze Bild als Streifen ueber der Karte – bei "cover" auf die hohe
       Karte war oben nur ein zufaelliger Ausschnitt zu sehen. */
    .bg-service-1::before, .bg-service-2::before, .bg-service-3::before,
    .bg-service-4::before, .bg-service-5::before, .bg-service-6::before {
        content: ""; display: block; aspect-ratio: 16 / 9;
    }
    .bg-service-1 .custom-card, .bg-service-2 .custom-card, .bg-service-3 .custom-card,
    .bg-service-4 .custom-card, .bg-service-5 .custom-card, .bg-service-6 .custom-card {
        border-radius: 0 0 10px 10px;
    }
}
@media screen and (max-width: 991px) {
    h1, .banner-title { font-size: 48px; }
    h2 { font-size: 38px; }
    .title-about { font-size: 36px; }
    .text-subtitle { font-size: 22px; }
    .brand-name { font-size: 18px; }
    .brand-mark { width: 42px; height: 42px; }
    .page-head .overlay-hero { padding-bottom: 60px; }
}
@media screen and (max-width: 575px) {
    h1, .banner-title { font-size: 38px; }
    .title-about { font-size: 30px; }
}

/* Sicherheitsnetz: kein horizontales Scrollen, egal was passiert */
html, body { overflow-x: clip; }

/* --- Startseite: Zitatband und Bildcollage ------------------------------
   Aufbau wie "CEO Quote" und "About" im Template. Das Zitatband bekommt ein
   eigenes Bild, damit es sich vom Termin-Band unten (Klangschale) abhebt. */
.bg-zitat {
    background-image: linear-gradient(rgba(46, 21, 4, 0.74), rgba(46, 21, 4, 0.74)), url('../img/buddha-kerzen.webp');
}
.bg-zitat figure { padding-top: 80px !important; padding-bottom: 80px !important; }
.zitat-zeichen { color: var(--color-lighter); opacity: .85; }
.zitat-name { font-family: var(--font-1); font-size: 26px; font-weight: 600; letter-spacing: 1px; color: #fff; }
.collage-quadrat { aspect-ratio: 1 / 1; object-fit: cover; }
.collage .img-about-last { min-height: 100%; }
@media screen and (max-width: 991px) {
    .bg-zitat figure { padding-top: 56px !important; padding-bottom: 56px !important; }
}

/* Lesbare Zeilenlaenge: Einleitungen unter Ueberschriften und Fliesstext,
   der sonst ueber die volle Breite (150+ Zeichen pro Zeile) laufen wuerde. */
div.fade-in:not(.text-center) > h2 + p.text-grey,
.text-mass { max-width: 720px; }
.form-consent.text-mass { max-width: 620px; }

/* hidden muss auch gegen Bootstrap-Klassen wie d-flex gewinnen */
[hidden] { display: none !important; }

/* --- Mitlaufendes Menü ---------------------------------------------------
   index.js setzt .navbar-fest, sobald der Seitenkopf weggescrollt ist.
   Kein transform/filter an der Leiste: sonst haengt das Handy-Menue
   (offcanvas, position: fixed) an der Leiste statt am Fenster. */
.navbar-fest {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1045;
    background-color: var(--color-darker);
    box-shadow: 0 6px 20px rgba(46, 21, 4, 0.18);
    padding-top: 10px; padding-bottom: 10px;
    animation: leiste-ein .35s ease-out;
}
.navbar-fest .brand-mark { width: 42px; height: 42px; }
/* Der Seitenkopf ist wegen des Videos eine eigene Stapelebene (isolation).
   Damit die feste Leiste ueber dem restlichen Inhalt liegt, muss der ganze
   Kopf solange nach oben. */
.bg-hero:has(.navbar-fest), .page-head:has(.navbar-fest) { z-index: 1045; }
@keyframes leiste-ein { from { top: -90px; } to { top: 0; } }
@media (prefers-reduced-motion: reduce) { .navbar-fest { animation: none; } }

/* --- Elenas eigene Fotos und Videos (Hochformat vom Handy) ---------------
   Gleicher Rahmen wie .img-frame, nur im Seitenverhaeltnis der Handybilder. */
.img-frame-9x16 { aspect-ratio: 9 / 16; height: auto; }
video.img-frame { background-color: var(--color-darker); }