/* ============================================
   EURIPIDIS PHOTOGRAPHY TAUFE - MUENCHEN (/muenchen/)
   Nur fuer die Muenchen-Seite, geladen nach base.css.
   Kopie von frankfurt.css (Stand taufe/v62) plus Zusaetze am Dateiende.
   Abschnitt 10. PRICING ist in allen Stadtdateien wortgleich und wird
   gemeinsam geaendert (Domain-CLAUDE.md, Gekoppelte Dateien).
   ============================================ */

/* 6. HERO
   ============================================ */
.hero {
    position: relative;
    height: 100vh;
    height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: kenBurns 20s ease-in-out infinite;
    will-change: transform;
}

@keyframes kenBurns {
    0%   { transform: scale(1)   translate(0, 0); }
    50%  { transform: scale(1.08) translate(-1%, -0.5%); }
    100% { transform: scale(1)   translate(0, 0); }
}

@media (max-width: 767px) {
    .hero__bg img {
        object-position: 15% center;
    }
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(10, 10, 10, 0.3) 0%,
        rgba(10, 10, 10, 0.5) 50%,
        rgba(10, 10, 10, 0.8) 100%
    );
    z-index: 1;
}

.hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--space-lg);
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero__subtitle {
    font-family: 'Bodoni Moda', Georgia, serif;
    font-size: var(--fs-hero);
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.03em;
    color: var(--color-gold);
    margin-bottom: var(--space-md);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
    text-wrap: balance;
    order: 0;
}

@media (max-width: 767px) {
    .hero__subtitle {
        font-size: clamp(2rem, 8vw, 2.5rem);
    }
}

.hero__title {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--color-white);
    margin-bottom: var(--space-md);
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    order: -1;
}

.hero__text {
    font-size: var(--fs-lg);
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--space-xl);
    font-style: italic;
    font-family: var(--font-heading);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}

.hero__actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
}

.hero__actions .btn--outline {
    background: rgba(10, 10, 10, 0.4);
}

.hero__scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: var(--color-text-secondary);
    animation: scrollBounce 2s infinite;
}

.hero__scroll-arrow {
    display: block;
    width: 24px;
    height: 24px;
    border-right: 2px solid var(--color-gold);
    border-bottom: 2px solid var(--color-gold);
    transform: rotate(45deg);
}

@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

/* 6b. TRUST BAR
   ============================================ */
.trust-bar {
    background-color: var(--color-bg-card);
    padding: 1.4rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.trust-bar-inner {
    max-width: 1060px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
}

.trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.3rem 1.5rem;
}

.trust-number {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-gold);
    letter-spacing: 0.02em;
}

.trust-label {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.2rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.trust-divider {
    width: 1px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.12);
}

/* 7. PORTFOLIO
   ============================================ */
.portfolio {
    padding: var(--space-section) 0;
    background: var(--color-bg);
}

.portfolio__filters {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-2xl);
    flex-wrap: wrap;
}

.portfolio__filter {
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    padding: 0.65rem 1.2rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border-radius: 2rem;
    cursor: pointer;
    transition: all var(--transition-base);
}

.portfolio__filter:hover,
.portfolio__filter.active {
    border-color: var(--color-gold);
    color: var(--color-gold);
    background: rgba(201, 169, 110, 0.1);
}

.portfolio__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-xs);
    grid-auto-flow: dense;
}

.portfolio__item {
    overflow: hidden;
    border-radius: var(--radius-sm);
    cursor: pointer;
    position: relative;
}

.portfolio__item[data-orientation="portrait"] {
    grid-row: span 2;
}

.portfolio__item.hidden {
    display: none;
}

.portfolio__link {
    display: block;
    position: relative;
    overflow: hidden;
}

.portfolio__img {
    width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height);
    object-fit: cover;
    transition: transform var(--transition-slow), opacity var(--transition-base);
    opacity: 0;
}

/* Reserve space for lazy images before they load (prevents layout shift) */
.portfolio__item[data-orientation="landscape"] .portfolio__img {
    aspect-ratio: 4 / 3;
}

.portfolio__item[data-orientation="portrait"] .portfolio__img {
    aspect-ratio: 3 / 4;
}

.portfolio__img.loaded {
    opacity: 1;
}

.portfolio__item:hover .portfolio__img {
    transform: scale(1.05);
}

.portfolio__link::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0);
    transition: background var(--transition-base);
}

.portfolio__item:hover .portfolio__link::after {
    background: rgba(10, 10, 10, 0.2);
}

/* Gold frame hover */
.portfolio__link::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 2px solid var(--color-gold);
    opacity: 0;
    z-index: 2;
    transition: opacity var(--transition-base), inset var(--transition-base);
    border-radius: var(--radius-sm);
    pointer-events: none;
}

.portfolio__item:hover .portfolio__link::before {
    opacity: 1;
    inset: 8px;
}

/* Smooth filter transition */
.portfolio__item {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.portfolio__item.fade-out {
    opacity: 0;
    transform: scale(0.95);
}

.portfolio__load-more {
    display: block;
    margin: 0 auto;
}

.portfolio__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-2xl);
}

/* Reportage-Karussell unter dem Portfolio (v57): Scroll-Snap ohne JS,
   Desktop alle Karten mittig, mobil wischen mit angeschnittener Folgekarte */
.reportage-rail {
    margin-top: var(--space-2xl);
}

.reportage-rail__heading {
    margin-bottom: var(--space-md);
    font-size: var(--fs-xl);
    text-align: center;
}

.reportage-rail__track {
    display: flex;
    gap: var(--space-md);
    margin: 0;
    padding: 0 0 var(--space-xs);
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.reportage-rail__track::-webkit-scrollbar {
    display: none;
}

.reportage-tile {
    flex: 0 0 min(82%, 420px);
    scroll-snap-align: center;
}

.reportage-tile:first-child {
    margin-left: auto;
}

.reportage-tile:last-child {
    margin-right: auto;
}

.reportage-tile__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-base);
}

.reportage-tile__image {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--color-bg-alt);
}

.reportage-tile__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.reportage-tile__meta {
    padding: var(--space-md) var(--space-md) 0;
    color: var(--color-text-secondary);
    font-size: var(--fs-sm);
}

.reportage-tile__cta {
    display: block;
    padding: 0.35rem var(--space-md) var(--space-md);
    color: var(--color-gold);
    font-weight: 600;
    line-height: 1.45;
}

.reportage-tile__link:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}

@media (hover: hover) {
    .reportage-tile__link:hover {
        border-color: var(--color-gold-dark);
    }

    .reportage-tile__link:hover img {
        transform: scale(1.04);
    }

    .reportage-tile__link:hover .reportage-tile__cta {
        color: var(--color-gold-light);
    }
}

@media (prefers-reduced-motion: reduce) {
    .reportage-tile__image img {
        transition: none;
    }
}

/* 8. ABOUT
   ============================================ */
.about {
    padding: var(--space-section) 0;
    background: var(--color-bg-alt);
}

.about__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    align-items: center;
}

.about__photo {
    border-radius: var(--radius-md);
    border: 2px solid var(--color-border);
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.about__content p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.about__content .about__eyebrow {
    margin-bottom: var(--space-xs);
    color: var(--color-gold);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.14em;
}

.about .section-title--left::after {
    margin-inline: 0;
}

.about__content .about__lead {
    margin-top: var(--space-lg);
}

.about__lead strong {
    color: var(--color-text);
    font-weight: 600;
}

.about__links {
    display: grid;
    justify-items: start;
    gap: var(--space-xs);
    margin: var(--space-lg) 0 var(--space-md);
}

.about__text-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--color-text-secondary);
    text-decoration-color: var(--color-border-light);
    text-underline-offset: 0.3em;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.about__text-link--primary {
    color: var(--color-gold);
    font-weight: 600;
    text-decoration-color: var(--color-gold-dark);
}

.about__text-link:hover {
    color: var(--color-gold-light);
    text-decoration-color: currentColor;
}

/* 10. PRICING
   ============================================
   Karte von oben nach unten: Kopf (Name, Preis), Begleitung in
   Tagesreihenfolge, Buecherrahmen, Fotos und Lieferumfang, Button,
   Stundenhinweis, bei Essenz und Klassik der Hinweis auf das naechste
   Paket. Jede Karte nennt nur, was sie enthaelt.

   Schwelle T = 768 px. Sie steht unten in genau zwei Media Queries
   (max-width: T - 1 und min-width: T) und als COLUMNS_FROM in
   js/pricing-nav.js. Alle drei Stellen gemeinsam aendern.
   Unter T, Karussell: eine Karte mittig, Nachbarkarten angeschnitten,
   Paketleiste sticky. js/pricing-nav.js markiert die mittige Karte und
   laesst die Hoehe des Streifens ihr folgen.
   Ab T, Spalten: drei Karten nebeneinander, oben buendig, jede in ihrer
   natuerlichen Hoehe; bis 1023 px Kompaktform. */
.pricing {
    padding: var(--space-section) 0;
    background: var(--color-bg-alt);
}

.pricing .section-subtitle {
    margin-bottom: 0.65rem;
}

.pricing__album-promise {
    max-width: 780px;
    margin: 0 auto 1.75rem;
    padding: 0 0.25rem;
    color: #e0cfad;
    font-size: 0.98rem;
    line-height: 1.5;
    text-align: center;
}

.pricing__grid-wrapper {
    position: relative;
    max-width: 1120px;
    margin: 0 auto;
}

/* Karte */
.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 18px 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: var(--color-bg-card);
    text-align: left;
    transition: box-shadow var(--transition-base), border-color var(--transition-base), opacity 0.25s ease;
    /* Fliesstext und hervorgehobene Zeilen; die Kompaktform setzt beide kleiner. */
    --pricing-text: var(--fs-sm);
    --pricing-lead: 1.0625rem;
}

/* Nur mit Maus: auf Touch-Geraeten bliebe der Rand nach einem Tipp stehen. */
@media (hover: hover) {
    .pricing-card:hover {
        border-color: var(--color-gold-dark);
        box-shadow: 0 8px 32px rgba(201, 169, 110, 0.08);
    }
}

/* Einzige Empfehlung: Klassik. Der zweite Pixel Rand liegt im Schatten,
   damit alle Karten innen gleich breit bleiben. */
.pricing-card--featured,
.pricing-card--featured:hover {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 1px var(--color-gold);
}

/* Spaltenansicht: js/pricing-nav.js markiert kurz die Karte, auf die ein
   Hinweis am Kartenende zeigt. Der Ring blendet ueber die box-shadow-
   Transition der Karte ein und aus; bei reduzierter Bewegung schaltet
   base.css Uebergaenge ab. */
.pricing-card.is-target {
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.35);
}

.pricing-card--featured.is-target {
    box-shadow: 0 0 0 1px var(--color-gold), 0 0 0 3px rgba(201, 169, 110, 0.35);
}

.pricing-card__badge {
    position: absolute;
    z-index: 5;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-gold);
    color: var(--color-bg);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 1rem;
    border-radius: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

/* Kopf: Name und Preis mittig untereinander, darunter eine feine Linie */
.pricing-card__head {
    display: grid;
    row-gap: 8px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--color-border);
    text-align: center;
}

.pricing-card__title {
    color: var(--color-gold);
    font-size: 2rem;
    font-weight: 600;
}

.pricing-card__amount {
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: 2.375rem;
    line-height: var(--lh-heading);
    white-space: nowrap;
}

/* Kleines graues Label ueber Begleitung und Lieferumfang */
.pricing-card__label {
    margin-top: 24px;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Label unter dem Buecherrahmen: Abstand wie der Rahmen nach oben */
.pricing-card__books-panel + .pricing-card__label {
    margin-top: 26px;
}

/* Begleitung und Lieferumfang: Listen mit demselben Haken */
.pricing-card__coverage li,
.pricing-card__delivery li {
    position: relative;
    padding-left: 22px;
    color: var(--color-text-secondary);
    font-size: var(--pricing-text);
    line-height: 1.5;
}

.pricing-card__coverage li::before,
.pricing-card__delivery li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--color-gold);
    font-weight: 600;
}

.pricing-card__coverage li {
    margin-top: 12px;
}

/* Haken auf Hoehe der groesseren Hauptzeile */
.pricing-card__coverage li::before {
    line-height: 1.58;
}

/* Hauptzeile in Ueberschriftenschrift, Zusatzzeile klein darunter */
.pricing-card__coverage strong,
.pricing-card__coverage span {
    display: block;
}

/* Hervorgehobene Zeilen: Begleitung, Buchnamen, Fotozahl */
.pricing-card__coverage strong,
.pricing-card__book-item > strong,
.pricing-card__delivery strong {
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: var(--pricing-lead);
    font-weight: 500;
    line-height: 1.3;
}

/* Buecherrahmen: einziger hervorgehobener Rahmen der Karte */
.pricing-card__books-panel {
    margin-top: 26px;
    padding: 14px 14px 16px;
    border: 1px solid rgba(201, 169, 110, 0.45);
    border-radius: 10px;
    background: rgba(201, 169, 110, 0.06);
}

.pricing-card__books-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pricing-card__books-title {
    color: var(--color-gold);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Massstaebliche Skizze: 28x28 cm und 19x19 cm im Verhaeltnis 28:19 */
.pricing-card__books-scale {
    flex: none;
    fill: none;
    stroke: var(--color-gold);
    stroke-width: 1.2;
    opacity: 0.8;
}

.pricing-card__book-item,
.pricing-card__box-note {
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid rgba(201, 169, 110, 0.18);
}

/* Buchzeile: Name und Hinweise links untereinander, Format und Seitenzahl
   als schmale Spalte rechts, zweizeilig und ohne Trenner. Die Spalte reicht
   ueber alle Zeilen (hoechstens Name plus zwei Hinweise); ihre erste Zeile
   steht auf der Grundlinie des Namens. Gilt in allen Ansichten; die
   Kompaktform (siehe unten) verkleinert nur Schrift und Abstand. */
.pricing-card__book-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 12px;
}

.pricing-card__book-item > span,
.pricing-card__book-item > small,
.pricing-card__box-note {
    color: var(--color-text-secondary);
    font-size: var(--pricing-text);
    line-height: 1.5;
}

.pricing-card__book-item > strong,
.pricing-card__book-item > small {
    grid-column: 1;
}

.pricing-card__book-item > .pricing-card__book-spec {
    grid-column: 2;
    grid-row: 1 / span 3;
    font-size: 0.8125rem;
    text-align: right;
    white-space: nowrap;
}

.pricing-card__book-spec > span {
    display: block;
}

.pricing-card__book-spec > .pricing-card__book-sep {
    display: none;
}

.pricing-card__material {
    color: var(--color-text);
    font-weight: 600;
}

/* Gold nur fuer das, was dieses Paket gegenueber dem naechstkleineren
   neu enthaelt; Schrift, Groesse und Staerke bleiben. */
strong.pricing-card__added {
    color: var(--color-gold-light);
}

/* Fotos und Lieferumfang */
.pricing-card__delivery {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.pricing-card__cta {
    display: block;
    width: 100%;
    margin-top: 30px;
}

.pricing-card__hour-note {
    margin-top: 12px;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.4;
    text-align: center;
}

/* Hinweis auf das naechste Paket am Kartenende: Text links, Pfeil im
   Kreis rechts; die ganze Zeile ist der Link. */
.pricing-card__next {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
    text-decoration: none;
}

.pricing-card__next:focus-visible {
    outline: 2px solid var(--color-gold-light);
    outline-offset: 2px;
}

.pricing-card__next-text {
    flex: 1;
    min-width: 0;
}

.pricing-card__next-label,
.pricing-card__next-title,
.pricing-card__next-detail {
    display: block;
}

.pricing-card__next-label {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    line-height: 1.4;
}

.pricing-card__next-title {
    color: var(--color-gold-light);
    font-family: var(--font-heading);
    font-size: var(--pricing-lead);
    font-weight: 500;
    line-height: 1.3;
}

.pricing-card__next-detail {
    color: var(--color-text-secondary);
    font-size: var(--pricing-text);
    line-height: 1.5;
}

.pricing-card__next-arrow {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(201, 169, 110, 0.6);
    border-radius: 50%;
    color: var(--color-gold);
    transition: background-color var(--transition-fast);
}

.pricing-card__next:active .pricing-card__next-arrow {
    background-color: rgba(201, 169, 110, 0.12);
}

@media (hover: hover) {
    .pricing-card__next:hover .pricing-card__next-arrow {
        background-color: rgba(201, 169, 110, 0.12);
    }
}

/* Unter T: Karussell */
@media (max-width: 767px) {
    /* Paketleiste: sticky unter dem Header, bleibt im Paketbereich */
    .pricing__package-nav {
        position: sticky;
        top: var(--nav-height);
        z-index: 30;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        margin: 0 calc(-1 * var(--container-padding)) 0.75rem;
        padding: 9px max(var(--container-padding), calc((100% + 2 * var(--container-padding) - 520px) / 2));
        background: rgba(10, 10, 10, 0.98);
        border-block: 1px solid rgba(201, 169, 110, 0.2);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
    }

    .pricing__package-pill {
        display: flex;
        min-width: 0;
        min-height: 70px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 5px 2px;
        border: 1px solid rgba(201, 169, 110, 0.28);
        border-radius: 18px;
        background: rgba(34, 26, 15, 0.6);
        color: var(--color-text-secondary);
        text-align: center;
        text-decoration: none;
        line-height: 1.25;
    }

    .pricing__package-pill.is-active {
        border-color: var(--color-gold);
        background: rgba(201, 169, 110, 0.15);
    }

    .pricing__package-pill:focus-visible {
        outline: 2px solid var(--color-gold-light);
        outline-offset: 2px;
    }

    .pricing__package-name {
        color: var(--color-text);
        font-family: var(--font-heading);
        font-size: clamp(0.82rem, 3.4vw, 0.98rem);
    }

    .pricing__package-pill.is-active .pricing__package-name {
        color: var(--color-gold-light);
    }

    .pricing__package-price {
        color: var(--color-gold-dark);
        font-size: 0.72rem;
        letter-spacing: 0.02em;
    }

    .pricing__package-pill.is-active .pricing__package-price {
        color: var(--color-gold);
    }

    .pricing__package-books {
        color: #e0c797;
        font-size: 0.6875rem;
        font-weight: 600;
        line-height: 1.2;
    }

    /* Streifen: randlos ueber die Bildschirmbreite, eine Karte mittig. Die
       Karte wird nie breiter als 360 px; mehr Platz zeigt mehr von den
       Nachbarkarten. Der seitliche Innenabstand laesst auch die erste und
       letzte Karte mittig einrasten. Oben Platz fuer das Badge, unten fuer
       den Kartenrand. Hoehe: ohne JavaScript die laengste Karte, sonst
       setzt js/pricing-nav.js die Hoehe der mittigen Karte. */
    .pricing__grid {
        --pricing-card-width: min(86vw, 360px);
        display: flex;
        align-items: flex-start;
        gap: clamp(8px, 2.2vw, 18px);
        margin-inline: calc(-1 * var(--container-padding));
        padding: 14px calc((100% + 2 * var(--container-padding) - var(--pricing-card-width)) / 2) 8px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Hoehe folgt der Karte; Deckkraft und Versatz wie .reveal in base.css */
        transition: height 0.22s ease,
                    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .pricing__grid::-webkit-scrollbar {
        display: none;
    }

    .pricing-card {
        flex: none;
        width: var(--pricing-card-width);
        scroll-snap-align: center;
        scroll-snap-stop: always;
        scroll-margin-top: calc(var(--nav-height) + 106px);
    }

    /* Nachbarkarten treten zurueck, sobald js/pricing-nav.js die mittige
       Karte markiert; ohne JavaScript bleiben alle voll sichtbar. */
    .pricing__grid.has-active .pricing-card:not(.is-active) {
        opacity: 0.65;
    }

    /* Nach-oben-Button verdeckt sonst Karteninhalt. */
    html.pricing-in-view .floating-top {
        opacity: 0;
        pointer-events: none;
    }

    /* Ab 560 px sind die Nachbarkarten deutlich zu sehen: der Streifen
       laeuft an beiden Bildschirmraendern weich aus. Darunter bleibt der
       schmale Wisch-Hinweis scharf. */
    @media (min-width: 560px) {
        .pricing__grid {
            -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
        }
    }
}

/* Ab T: drei Spalten. Die Karten stehen oben buendig und sind so hoch wie
   ihr Inhalt; der Button folgt direkt auf den Lieferumfang. */
@media (min-width: 768px) {
    .pricing {
        padding-top: clamp(3.5rem, 5vw, 4.5rem);
    }

    .pricing__package-nav {
        display: none;
    }

    .pricing__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
        column-gap: 26px;
        padding-bottom: var(--space-xs);
    }

    .pricing-card {
        padding: 36px 26px 30px;
    }

    .pricing-card__books-panel {
        padding-inline: 16px;
    }

    /* Kompaktform bis 1023 px: schmale Spalten. Name und Preis sind
       kleiner, der Fliesstext waechst von 13 px bei 768 px auf 14 px
       ab 824 px, Skizze, Button und der Pfeilkreis des Hinweises sind
       schmaler, die Abstaende rund ein Fuenftel kleiner. */
    @media (max-width: 1023px) {
        .pricing__grid {
            column-gap: 12px;
        }

        .pricing-card {
            padding: 26px 12px 22px;
            --pricing-text: clamp(0.8125rem, 1.7vw, 0.875rem);
            --pricing-lead: 1rem;
        }

        .pricing-card__head {
            padding-bottom: 22px;
        }

        .pricing-card__title {
            font-size: 1.75rem;
        }

        .pricing-card__amount {
            font-size: 2rem;
        }

        .pricing-card__label {
            margin-top: 20px;
        }

        .pricing-card__books-panel + .pricing-card__label {
            margin-top: 22px;
        }

        .pricing-card__coverage li {
            margin-top: 10px;
        }

        /* Seitenpolster des Rahmens: 8 px bei 768 px, 12 px ab 832 px */
        .pricing-card__books-panel {
            margin-top: 22px;
            padding: 12px clamp(8px, calc(8px + (100vw - 768px) * 0.0625), 12px) 14px;
        }

        /* Titel und vier Skizzen (Prestige) passen bei 768 px nur mit
           kleinerem Mindestabstand in eine Zeile. */
        .pricing-card__books-head {
            gap: 6px;
        }

        .pricing-card__books-scale {
            width: auto;
            height: 20px;
        }

        .pricing-card__book-item,
        .pricing-card__box-note {
            margin-top: 11px;
            padding-top: 11px;
        }

        /* Buchzeile wie in den anderen Ansichten: Format und Seitenzahl als
           Spalte rechts. Damit `2x Parentbooks` bei 768 px neben `je 50
           Seiten` in eine Zeile passt, ist die Spalte 1 px kleiner als der
           Fliesstext (12 px bei 768 px, 13 px ab 824 px) und steht naeher
           am Namen; Karte und Buecherrahmen sind seitlich schmaler
           gepolstert (siehe oben). */
        .pricing-card__book-item {
            column-gap: 6px;
        }

        .pricing-card__book-item > .pricing-card__book-spec {
            font-size: calc(var(--pricing-text) - 1px);
        }

        .pricing-card__delivery {
            gap: 8px;
            margin-top: 10px;
        }

        .pricing-card__cta {
            margin-top: 26px;
            padding-inline: 0.5rem;
        }

        .pricing-card__next {
            gap: 10px;
            margin-top: 22px;
            padding-top: 18px;
        }

        .pricing-card__next-arrow {
            width: 32px;
            height: 32px;
        }
    }
}

/* 11. FAQ
   ============================================ */
.faq {
    padding: var(--space-section) 0;
    background: var(--color-bg);
}

.faq__list {
    max-width: 800px;
    margin: 0 auto;
}

.faq__item {
    border-bottom: 1px solid var(--color-border);
}

.faq__question {
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    color: var(--color-text);
    padding: var(--space-md) 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    transition: color var(--transition-fast);
}

.faq__question:hover { color: var(--color-gold); }

.faq__question::-webkit-details-marker { display: none; }

.faq__question::marker { display: none; content: ""; }

.faq__question::after {
    content: '';
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--color-gold);
    border-bottom: 2px solid var(--color-gold);
    transform: rotate(45deg);
    transition: transform var(--transition-base);
    flex-shrink: 0;
    margin-left: var(--space-sm);
}

details[open] .faq__question::after {
    transform: rotate(-135deg);
}

.faq__answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-base);
}

details[open] .faq__answer {
    grid-template-rows: 1fr;
}

.faq__answer-inner {
    overflow: hidden;
}

.faq__answer-inner p {
    color: var(--color-text-secondary);
    padding-bottom: var(--space-md);
    font-size: var(--fs-sm);
}

.faq__answer-inner a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

/* 12. CONTACT
   ============================================ */
.contact {
    padding: var(--space-section) 0;
    background: var(--color-bg-alt);
}

.contact__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
}

.contact__details {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.contact__detail-row {
    display: flex;
    gap: var(--space-lg);
}

.contact__detail strong {
    display: block;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gold);
    margin-bottom: 0.25rem;
}

.contact__detail a,
.contact__detail p {
    color: var(--color-text);
    font-size: var(--fs-base);
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 14. LIGHTBOX
   ============================================ */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: opacity 0.4s ease, visibility 0.4s;
}

.lightbox.active {
    visibility: visible;
    opacity: 1;
}

.lightbox__img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
    transform: scale(0.92);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.4s ease;
}

.lightbox.active .lightbox__img {
    transform: scale(1);
    opacity: 1;
}

/* Direction-aware slide */
.lightbox__img.slide-left {
    transform: translateX(-20px);
    opacity: 0;
}

.lightbox__img.slide-right {
    transform: translateX(20px);
    opacity: 0;
}

.lightbox__close {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 1rem);
    right: 1rem;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast), background var(--transition-fast);
    z-index: 10;
}

.lightbox__close:hover { color: var(--color-gold); }

.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 2.5rem;
    cursor: pointer;
    padding: 1rem;
    transition: color var(--transition-fast);
}

.lightbox__nav:hover { color: var(--color-gold); }

.lightbox__nav:active {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.lightbox__prev { left: 0.5rem; }

.lightbox__next { right: 0.5rem; }

.lightbox__counter {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-text-secondary);
    font-size: var(--fs-sm);
}

/* 15b. TESTIMONIALS
   ============================================ */
.testimonials {
    padding: var(--space-section) 0;
    background: var(--color-bg);
}

/* Mobile: Horizontal Scroll-Snap Carousel */
.testimonials__grid {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-xs);
}

.testimonials__grid::-webkit-scrollbar {
    display: none;
}

.testimonial-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    position: relative;
    flex: 0 0 85%;
    scroll-snap-align: center;
}

.testimonial-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xs);
}

/* Dot-Indicators */
.testimonials__dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: var(--space-xl);
}

/* Mobil: Karte, Ueberschrift und Punkte zusammen im Bild (iPhone 393 x 711) */
@media (max-width: 767px) {
    .testimonials .section-subtitle {
        margin-bottom: var(--space-lg);
    }
}

.testimonials__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-border);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease;
}

.testimonials__dot.active {
    background: var(--color-gold);
}

.testimonial-card::before {
    content: '\201E';
    position: absolute;
    top: 0.3rem;
    left: 0.8rem;
    font-size: 2rem;
    color: var(--color-gold);
    opacity: 0.2;
    font-family: var(--font-heading);
    line-height: 1;
}

.testimonial-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

@media (hover: hover) {
    .testimonial-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(201, 169, 110, 0.1);
        border-color: rgba(201, 169, 110, 0.3);
    }
}

.testimonial-card__stars {
    color: var(--color-gold);
    font-size: var(--fs-base);
    letter-spacing: 0.1em;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible .testimonial-card__stars,
.testimonial-card__stars.stars-visible {
    clip-path: inset(0 0 0 0);
}

.testimonial-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    color: var(--color-text-secondary);
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.testimonial-card__badge::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%234285F4' d='M43.6 20.5H42V20H24v8h11.3c-1.6 4.7-6.1 8-11.3 8-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 8 3l5.7-5.7C34 6 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.2-.1-2.3-.4-3.5z'/%3E%3Cpath fill='%2334A853' d='M6.3 14.7l6.6 4.8C14.5 15.5 18.8 12 24 12c3.1 0 5.8 1.2 8 3l5.7-5.7C34 6 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%23FBBC05' d='M24 44c5.2 0 9.9-1.9 13.4-5.1l-6.2-5.2c-2 1.5-4.5 2.3-7.2 2.3-5.2 0-9.6-3.3-11.3-8l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%23EA4335' d='M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C36.7 39.5 44 34 44 24c0-1.2-.1-2.3-.4-3.5z'/%3E%3C/svg%3E") no-repeat center/contain;
}

.testimonial-card__text {
    color: var(--color-text-secondary);
    font-size: var(--fs-sm);
    font-style: italic;
    line-height: 1.6;
    margin-bottom: var(--space-xs);
}

.testimonial-card__readmore {
    background: none;
    border: none;
    color: var(--color-gold);
    font-size: var(--fs-sm);
    font-style: italic;
    cursor: pointer;
    padding: 2px 0;
    transition: opacity var(--transition-base);
    align-self: flex-start;
    margin-top: auto;
    text-align: left;
}

.testimonial-card__readmore:hover {
    opacity: 0.8;
}

.testimonial-card__link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.3);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--transition-base);
}

.testimonial-card__link:hover {
    text-decoration-color: var(--color-gold);
}

.testimonial-card__author {
    font-size: var(--fs-sm);
    color: var(--color-gold);
    font-weight: 500;
    margin-top: var(--space-xs);
}

.testimonials__cta {
    text-align: center;
}

/* Bewertungen: Original in der Karte (nur sichtbar ohne showModal-Unterstuetzung) */
.testimonial-card__full {
    color: var(--color-text-secondary);
    font-size: var(--fs-sm);
    font-style: italic;
    line-height: 1.6;
    margin-bottom: var(--space-xs);
}

.testimonial-card__full p {
    margin: 0 0 0.75em;
}

.testimonial-card__full p:last-child {
    margin-bottom: 0;
}

/* Bewertung im Volltext (Dialog, js/review-dialog.js) */
html.review-dialog-open {
    overflow: hidden;
    scrollbar-gutter: stable;
}

html.review-dialog-open body {
    overflow: hidden;
}

.review-dialog {
    width: calc(100% - 32px);
    max-width: 640px;
    max-height: 85vh;
    max-height: 85dvh;
    margin: auto;
    padding: 0;
    border: 1px solid rgba(201, 169, 110, 0.3);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    color: var(--color-text);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.review-dialog[open] {
    display: flex;
    flex-direction: column;
    animation: review-dialog-in 200ms ease-out;
}

.review-dialog::backdrop {
    background: rgba(5, 5, 5, 0.8);
    animation: review-backdrop-in 200ms ease-out;
}

.review-dialog.is-closing {
    animation: review-dialog-out 200ms ease-in forwards;
}

.review-dialog.is-closing::backdrop {
    animation: review-backdrop-out 200ms ease-in forwards;
}

.review-dialog__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.review-dialog__close:hover {
    color: var(--color-gold);
    background-color: rgba(255, 255, 255, 0.05);
}

.review-dialog__header {
    flex: 0 0 auto;
    padding: 24px 60px 16px 24px;
    border-bottom: 1px solid var(--color-border);
}

.review-dialog__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
}

.review-dialog__stars {
    color: var(--color-gold);
    font-size: var(--fs-base);
    letter-spacing: 0.1em;
}

.review-dialog__author {
    margin: 8px 0 0;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--color-gold);
}

.review-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 20px 24px 24px;
    font-size: var(--fs-base);
    font-style: normal;
    line-height: 1.75;
    color: var(--color-text);
}

.review-dialog__body:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: -2px;
}

.review-dialog__body p {
    margin: 0 0 1em;
}

.review-dialog__body p:last-child {
    margin-bottom: 0;
}

.review-dialog__footer {
    flex: 0 0 auto;
    padding: 14px 24px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-alt);
}

.review-dialog__link {
    color: var(--color-gold);
    font-size: var(--fs-sm);
    text-decoration: underline;
    text-decoration-color: rgba(201, 169, 110, 0.4);
    text-underline-offset: 3px;
}

.review-dialog__link:hover {
    color: var(--color-gold-light);
    text-decoration-color: var(--color-gold-light);
}

@media (max-width: 480px) {
    .review-dialog__header {
        padding: 20px 56px 14px 20px;
    }

    .review-dialog__body {
        padding: 16px 20px 20px;
    }

    .review-dialog__footer {
        padding: 12px 20px;
    }
}

@keyframes review-dialog-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes review-dialog-out {
    from {
        opacity: 1;
        transform: none;
    }
    to {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
}

@keyframes review-backdrop-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes review-backdrop-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .review-dialog[open],
    .review-dialog::backdrop,
    .review-dialog.is-closing,
    .review-dialog.is-closing::backdrop {
        animation: none;
    }
}

/* 15c. EXTRA COMPONENT STYLES
   ============================================ */
.pricing__standesamt {
    text-align: center;
    margin-top: var(--space-2xl);
    font-style: italic;
    color: var(--color-text-secondary);
    font-size: var(--fs-base);
}

.pricing__standesamt a {
    color: var(--color-gold);
    font-weight: 500;
}

.pricing__note {
    text-align: center;
    margin-top: var(--space-lg);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.portfolio__item.hidden-by-loadmore {
    display: none;
}

/* 16. ANIMATIONS
   ============================================ */
/* Portfolio stagger grid reveal */
.portfolio__item.stagger-in {
    animation: gridReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--stagger-i, 0) * 60ms);
}

@keyframes gridReveal {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* 17. FLOATING BUTTONS
   ============================================ */
.floating-wa,
.floating-top {
    position: fixed;
    right: clamp(1rem, 3vw, 1.5rem);
    z-index: 900;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease, opacity 0.3s ease, box-shadow 0.2s ease;
}

.floating-wa {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
    background: #25d366;
    color: #fff;
}

.floating-wa svg {
    width: 30px;
    height: 30px;
}

.floating-wa:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

.floating-top {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 5rem);
    background: var(--color-bg-card);
    color: var(--color-gold);
    border: 1px solid var(--color-border);
    opacity: 0;
    pointer-events: none;
}

.floating-top svg {
    width: 28px;
    height: 28px;
}

.floating-top.visible {
    opacity: 1;
    pointer-events: auto;
}

.floating-top:hover {
    transform: scale(1.1);
    background: var(--color-bg-card-hover);
}

/* Scroll progress bar */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold), var(--color-gold-light));
    z-index: 2001;
    width: 0%;
    pointer-events: none;
}

/* Hide floating WhatsApp when contact section is in view */
.floating-wa.at-contact {
    opacity: 0;
    pointer-events: none;
}

/* =============================================
   ZEREMONIE — Orthodoxe Taufe Bildstrecke
   ============================================= */
.zeremonie {
    background: #000;
    padding: var(--space-section) 0;
    overflow: hidden;
}

.zeremonie .section-title {
    color: var(--color-gold);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.zeremonie__strip {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 max(1rem, calc((100vw - var(--container-max)) / 2));
}

.zeremonie__strip::-webkit-scrollbar {
    display: none;
}

.zeremonie__strip.zeremonie__strip--dot-scroll {
    scroll-snap-type: none;
}

.zeremonie__item {
    flex: 0 0 auto;
    scroll-snap-align: center;
}

.zeremonie__img-wrapper {
    overflow: hidden;
    border-radius: 2px;
    height: clamp(250px, 35vw, 380px);
}

.zeremonie__img-wrapper img {
    width: auto;
    height: 100%;
    display: block;
    object-fit: cover;
}

.zeremonie__caption {
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-top: 0.75rem;
    text-align: center;
}

.zeremonie__outro {
    text-align: center;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    line-height: 1.8;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* =============================================
   ALBUM SHOWCASE — Taufalbum Slider
   ============================================= */
.album-showcase {
    background: #000;
    padding: var(--space-section) 0;
}

.album-showcase .section-title {
    color: var(--color-gold);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.album-showcase__text {
    text-align: center;
    margin-top: clamp(2rem, 4vw, 3rem);
}

.album-showcase__headline {
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.album-showcase__subline {
    color: var(--color-text-secondary);
    font-size: 1rem;
    margin-bottom: 1rem;
}

.album-showcase__note {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    opacity: 0.7;
}

.album-product-gallery {
    display: grid;
    max-width: 1080px;
    margin: clamp(3rem, 6vw, 5rem) auto 0;
    grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: clamp(0.65rem, 1.4vw, 1rem);
}

.album-product-card {
    position: relative;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    background: #141310;
}

.album-product-card--feature {
    grid-row: 1 / span 2;
}

.album-product-card img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 230px;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.album-product-card--feature img {
    min-height: 480px;
}

.album-product-card::after {
    position: absolute;
    inset: auto 0 0;
    height: 48%;
    background: linear-gradient(to top, rgba(5, 5, 4, 0.88), transparent);
    content: '';
    pointer-events: none;
}

.album-product-card:hover img {
    transform: scale(1.025);
}

.album-product-card figcaption {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    padding: clamp(0.9rem, 2vw, 1.35rem);
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(0.72rem, 1vw, 0.82rem);
    line-height: 1.45;
}

.album-product-card figcaption span {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--color-gold-light);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .album-product-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto;
        gap: 0.55rem;
    }

    .album-product-card--feature,
    .album-product-gallery--frankfurt .album-product-card--feature {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .album-product-gallery--frankfurt .album-product-card:not(.album-product-card--feature) {
        grid-column: auto;
    }

    .album-product-card img,
    .album-product-card--feature img {
        min-height: 0;
        aspect-ratio: 3 / 2;
    }

    .album-product-card:not(.album-product-card--feature) img {
        aspect-ratio: 4 / 5;
    }

    .album-product-card figcaption {
        padding: 0.7rem;
        font-size: 0.68rem;
    }

    .album-product-card:not(.album-product-card--feature) figcaption {
        line-height: 1.3;
    }
}

/* =============================================
   PRICING ALTERNATIVE — Kleinere Taufe
   ============================================= */
.pricing__alternative {
    max-width: 600px;
    margin: clamp(2rem, 4vw, 3rem) auto 0;
    text-align: center;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid #333;
    border-radius: 8px;
    background: var(--color-bg-alt);
}

.pricing__alternative h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    color: var(--color-gold);
    margin-bottom: 1rem;
}

.pricing__alternative p {
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

/* Frankfurt church list */
.kirchen {
    padding: var(--space-section) 0;
    background: var(--color-bg);
}

.church-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    width: 100%;
    min-width: 0;
    max-width: 1100px;
    margin: 0 auto;
}

.church-card {
    min-width: 0;
    overflow: hidden;
    background: var(--color-bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.church-card:hover {
    border-color: var(--color-gold-dark);
    box-shadow: 0 8px 32px rgba(201, 169, 110, 0.08);
}

.church-card--featured {
    border-color: rgba(201, 169, 110, 0.48);
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.22);
}

.church-card__image {
    aspect-ratio: 1 / 1;
    margin: 0;
    overflow: hidden;
    background: var(--color-bg-alt);
}

.church-card__image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.church-card__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: auto;
    padding: clamp(1.25rem, 3vw, 2rem);
}

.church-card__eyebrow {
    margin-bottom: 0.65rem;
    color: var(--color-gold);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.church-card__name {
    margin-bottom: 0.5rem;
    color: var(--color-gold);
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.25;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.church-card__location {
    margin-bottom: var(--space-sm);
    color: var(--color-text);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.church-card__address {
    margin-bottom: var(--space-md);
    color: var(--color-text-secondary);
    font-size: var(--fs-sm);
    font-style: normal;
    line-height: 1.55;
}

.church-card__description {
    color: var(--color-text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.7;
}

.church-card__reportage-link {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    min-height: 44px;
    margin-top: var(--space-md);
    padding: 0.55rem 0;
    color: var(--color-gold);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.45;
}

@media (min-width: 768px) {
    .church-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .church-card__body {
        height: 100%;
    }

    .church-card--featured {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    }

    .church-card--featured .church-card__image {
        min-height: 0;
        aspect-ratio: 1400 / 1443;
        align-self: start;
    }

    .church-card--featured .church-card__reportage-link {
        margin-top: auto;
        padding-top: var(--space-lg);
    }
}

@media (min-width: 1024px) {
    .church-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .church-card--featured {
        grid-column: 1 / -1;
    }

    .church-card:hover {
        transform: translateY(-3px);
    }
}

/* Kirchen-Karussell (v59): je Kirche Aussen- und Innenbild.
   Ohne JS wischbar per Scroll-Snap; js/church-gallery.js blendet
   Pfeile und Punkte ein. */
.church-gallery {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: var(--color-bg-alt);
}

.church-gallery__track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.church-gallery__track::-webkit-scrollbar {
    display: none;
}

.church-gallery__slide {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.church-gallery__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--color-gold);
    font-size: 1.8rem;
    line-height: 1;
    background: rgba(10, 10, 10, 0.78);
    border: 1px solid rgba(201, 169, 110, 0.7);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity var(--transition-base), border-color var(--transition-base);
}

.church-gallery__nav[hidden] {
    display: none;
}

.church-gallery__nav--prev {
    left: 0.75rem;
}

.church-gallery__nav--next {
    right: 0.75rem;
}

.church-gallery__nav:hover,
.church-gallery__nav:focus-visible {
    border-color: var(--color-gold);
}

.church-gallery__nav:disabled {
    opacity: 0;
    pointer-events: none;
}

.church-gallery__dots {
    position: absolute;
    bottom: 0.4rem;
    left: 50%;
    z-index: 2;
    display: flex;
    gap: 0.1rem;
    transform: translateX(-50%);
}

.church-gallery__dots[hidden] {
    display: none;
}

.church-gallery__dot {
    position: relative;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.church-gallery__dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: rgba(240, 240, 240, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
    transform: translate(-50%, -50%);
    transition: background var(--transition-base);
}

.church-gallery__dot.is-active::before {
    background: var(--color-gold);
}

/* Kirchen-Zeilen (v59): Querformat 4:3 wie Stuttgart, ab 960px im Wechsel
   Bild links und rechts. Bild-Bereich ist Karussell oder Einzelbild. */
.church-rows {
    max-width: 1180px;
    margin: 0 auto;
}

.church-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    padding: clamp(2.5rem, 6vw, 5rem) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.church-row:first-child {
    padding-top: 0;
    border-top: 0;
}

.church-row__media {
    position: relative;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: var(--color-bg-alt);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}

.church-row__media::after {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    width: 34%;
    height: 2px;
    background: var(--color-gold);
    content: '';
    pointer-events: none;
}

.church-row__figure {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.church-row__figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.church-row__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 60ch;
}

.church-row__tag {
    align-self: flex-start;
    margin-bottom: 0.9rem;
    padding: 0.3rem 0.75rem;
    color: var(--color-gold);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
    border: 1px solid rgba(201, 169, 110, 0.55);
    border-radius: 999px;
}

.church-row .church-card__name {
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
}

.church-row .church-card__description {
    font-size: 1rem;
    line-height: 1.8;
}

.church-row__tip {
    margin-top: clamp(1.5rem, 3.5vw, 2.2rem);
    padding: 1.2rem 1.4rem 1.25rem;
    border-left: 2px solid var(--color-gold);
    background: linear-gradient(90deg, rgba(201, 169, 110, 0.09), rgba(201, 169, 110, 0.025));
}

.church-row__tip h4 {
    margin-bottom: 0.6rem;
    color: var(--color-gold);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1.5;
    text-transform: uppercase;
}

.church-row__tip p {
    color: rgba(240, 240, 240, 0.82);
    font-size: 0.95rem;
    line-height: 1.75;
}

.church-others__title {
    max-width: 1100px;
    margin: clamp(3rem, 6vw, 5rem) auto var(--space-md);
    color: var(--color-text);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 400;
}

@media (min-width: 960px) {
    .church-row {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        align-items: center;
        gap: clamp(3rem, 6vw, 5rem);
    }

    .church-row:nth-child(even) {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    }

    .church-row:nth-child(even) .church-row__media {
        order: 2;
    }

    .church-row:nth-child(even) .church-row__body {
        order: 1;
        justify-self: end;
    }
}

/* 18. MEDIA QUERIES
   ============================================ */
/* Tablet */
@media (min-width: 768px) {
    /* Testimonials: carousel with 2 visible cards on tablet */

    .testimonial-card {
        flex: 0 0 calc((100% - var(--space-md)) / 2);
        scroll-snap-align: start;
    }

    .contact__grid {
        grid-template-columns: 1fr 1.5fr;
    }

    .portfolio__grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .about__grid {
        grid-template-columns: 1fr 1.2fr;
    }

    /* Testimonials: carousel with 3 visible cards on desktop */

    .testimonial-card {
        flex: 0 0 calc((100% - 2 * var(--space-md)) / 3);
        scroll-snap-align: start;
    }

    /* footer grid inherited from tablet breakpoint */

    .portfolio__grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

/* Trust-Bar mobile */
@media (max-width: 767px) {
    .trust-bar-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        justify-items: center;
    }

    .trust-divider {
        display: none;
    }

    .trust-item {
        padding: 0.4rem 0.5rem;
    }
}

/* 18. REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .testimonial-card__stars {
        clip-path: none;
    }

    .lightbox__img {
        transform: none;
        opacity: 1;
    }
}

/* Zeremonie CTA */
.zeremonie__cta {
    text-align: center;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* Zeremonie + Album Mobile */
@media (max-width: 767px) {
    .zeremonie__strip {
        gap: 1rem;
        padding: 0 1rem;
    }

    .zeremonie__item {
        flex: 0 0 clamp(200px, 55vw, 280px);
    }
}

/* =============================================
   NEUE STADTSEITE
   Zusaetze gegenueber frankfurt.css (Kompetenzblock,
   Gemeindeuebersicht Stufe 1, Hinweis-Kasten)
   ============================================= */
@media (max-width: 767px) {
    .hero__bg img {
        object-position: center;
    }
}

.zeremonie__lead {
    max-width: 760px;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    padding: 0 1rem;
    text-align: center;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    line-height: 1.8;
}

.zeremonie .section-title {
    margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.portfolio__reportage {
    margin-top: 2rem;
    text-align: center;
}

.church-note {
    max-width: 760px;
    margin: 2.5rem auto 0;
    padding: 1.25rem 1.5rem;
    border-left: 2px solid var(--color-gold);
    background: rgba(255, 255, 255, 0.03);
}

.church-note__title {
    margin-bottom: 0.4rem;
    color: var(--color-gold);
    font-family: var(--font-heading);
    font-size: 1.1rem;
}

.church-note p:not(.church-note__title) {
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.ablauf {
    padding: var(--space-section) 0;
    background: #0d0d0d;
}

.ablauf__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    max-width: 1100px;
    margin: clamp(2rem, 4vw, 3rem) auto 0;
    padding: 0;
    list-style: none;
}

.ablauf__step {
    padding-top: 1rem;
    border-top: 1px solid rgba(201, 169, 110, 0.35);
}

.ablauf__nr {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-gold);
    font-family: var(--font-heading);
    font-size: 1.5rem;
}

.ablauf__title {
    margin-bottom: 0.5rem;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 400;
}

.ablauf__step p {
    color: var(--color-text-secondary);
    line-height: 1.7;
}

@media (min-width: 768px) {
    .ablauf__list {
        grid-template-columns: repeat(3, 1fr);
        max-width: 960px;
    }
}

.ablauf__note {
    max-width: 640px;
    margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
    color: var(--color-text-secondary);
    line-height: 1.7;
    text-align: center;
}