/* =========================================================
   AH Fotografie – Main Stylesheet
   Palette: Warm Latte | Type: Ibarra Real Nova + Inter | Liquid Glass
   ========================================================= */

:root {
    /* Farben */
    --color-bg:        #FAF6F0;
    --color-cream:     #F5EFE6;
    --color-sand:      #E8DCCA;
    --color-caramel:   #B8896B;
    --color-caramel-d: #9C7355;
    /* Aufgehellte Variante nur fuer Text auf dunklem Espresso-Hintergrund (.keywords-overline):
       --color-caramel kommt dort nur auf ca. 4,37:1 Kontrast, knapp unter den geforderten 4,5:1
       (PageSpeed-Insights-Barrierefreiheits-Befund vom 13.09.2026). Gegen #3D2B1F liegt dieser
       Ton bei ca. 4,98:1. */
    --color-caramel-light: #BF957A;
    --color-espresso:  #3D2B1F;
    --color-text:      #2D2018;
    --color-muted:     #8A7A6A;
    --color-line:      rgba(61, 43, 31, 0.10);

    /* Glas */
    --glass-bg:    rgba(255, 252, 247, 0.55);
    --glass-bg-d:  rgba(61, 43, 31, 0.55);
    --glass-blur:  blur(20px) saturate(180%);
    --glass-border: 1px solid rgba(255, 255, 255, 0.45);
    --glass-shadow: 0 10px 40px rgba(61, 43, 31, 0.08), 0 2px 6px rgba(61, 43, 31, 0.04);

    /* Typo */
    --font-serif: "Ibarra Real Nova", Georgia, serif;
    --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Spacing */
    --container: 1240px;
    --gap-xs: .5rem;
    --gap-s:  1rem;
    --gap-m:  2rem;
    --gap-l:  4rem;
    --gap-xl: 5rem;

    /* Radii */
    --radius-s: 12px;
    --radius-m: 20px;
    --radius-l: 32px;

    --transition: 400ms cubic-bezier(.22,.61,.36,1);

    /* Hoehe der angepinnten Mobil-Leiste (.ah-mobile-cta), v6.76.
       0 am Desktop, weil es die Leiste dort nicht gibt. Der Wert unten am
       Breakpoint entspricht dem padding-bottom, das body.ah-onepager schon
       laenger fuer dieselbe Leiste reserviert – beide beschreiben dieselbe
       Hoehe, deshalb bewusst derselbe Zahlenwert.
       initHeroFit() in main.js misst die Leiste zur Laufzeit nach und
       ueberschreibt diesen Schaetzwert punktgenau; ohne JavaScript bleibt es
       bei den 4.5rem, was fuer den Zweck (Steuerelemente nicht verdecken)
       ausreicht. */
    --ah-cta-h: 0px;

    /* Hoehe des fixierten Kopfbereichs im ungescrollten Zustand (v6.78).
       Der Hero-Text haelt mobil diesen Abstand nach oben frei, damit er nie
       hinter Logo und Menue rutscht. 5.5rem ist bewusst der obere Schaetzwert
       (Innenabstand 2x 1.4rem plus Logo bis 40px); initHeroFit() in main.js
       misst nach und ersetzt ihn durch den echten Wert. */
    --ah-header-h: 5.5rem;
}
@media (max-width: 880px) {
    :root { --ah-cta-h: calc(4.5rem + env(safe-area-inset-bottom)); }
}

/* ---------- Reset / Base ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }

/* Keyboard-Fokus deutlich sichtbar (Caramel-Ring, nicht für Maus-Klicks) */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--color-caramel);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Respektiere Nutzer-Wunsch nach reduzierter Bewegung */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    html { scroll-behavior: auto; }
}
body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.65;
    font-weight: 400;
    overflow-x: hidden;
}

/* Sauberer Cream-Hintergrund, kein Rahmen-Effekt */
body { background: var(--color-bg); }

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

a { color: var(--color-espresso); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-caramel); }

p { margin: 0 0 1em; }

h1, h2, h3, h4, h5 {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--color-espresso);
    margin: 0 0 .6em;
    line-height: 1.15;
}
h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.4rem, 2vw, 1.7rem); }
h4 { font-size: 1.15rem; font-weight: 500; }

.eyebrow {
    font-family: var(--font-sans);
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--color-caramel);
    font-weight: 500;
    margin-bottom: 1rem;
    display: inline-block;
}

.lead {
    font-size: 1.15rem;
    color: var(--color-muted);
    max-width: 620px;
}

/* ---------- Layout ---------- */
.container { width: 92%; max-width: var(--container); margin: 0 auto; }
.section   { padding: var(--gap-xl) 0; position: relative; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto var(--gap-l); }
.section-head .lead { margin-left: auto; margin-right: auto; }

.skip-link {
    position: absolute; left: -9999px;
    background: var(--color-espresso); color: #fff;
    padding: .8rem 1.2rem; border-radius: var(--radius-s); z-index: 999;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: var(--font-sans); font-weight: 500; font-size: .95rem;
    padding: .95rem 1.8rem;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    letter-spacing: .01em;
}
.btn-primary {
    background: var(--color-espresso);
    color: #FAF6F0;
}
.btn-primary:hover {
    background: var(--color-caramel);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(184,137,107,.35);
}
.btn-ghost {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    color: var(--color-espresso);
}
.btn-ghost:hover {
    background: rgba(255,255,255,.8);
    transform: translateY(-2px);
}
.btn-outline {
    background: transparent;
    color: var(--color-espresso);
    border: 1px solid var(--color-espresso);
}
.btn-outline:hover { background: var(--color-espresso); color: #fff; }

/* ---------- Header / Glas-Sticky ---------- */
.site-header {
    position: fixed; top: 0; left: 0; right: 0;
    /* ACHTUNG: weiter unten auf 106 gehoben (siehe Kommentar bei .nav-backdrop).
       Seit v6.70 gilt der Wert dauerhaft, nicht mehr nur bei offenem Menue. */
    z-index: 100;
    transition: all var(--transition);
    padding: 1.4rem 0;
    /* Dezenter dunkler Verlauf oben für Lesbarkeit auf hellen Hero-Stellen */
    background: linear-gradient(180deg, rgba(45, 32, 24, 0.25) 0%, rgba(45, 32, 24, 0) 100%);
}
.site-header.is-scrolled {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: var(--glass-border);
    box-shadow: var(--glass-shadow);
    padding: .9rem 0;
}
.site-header .container {
    display: flex; align-items: center; justify-content: space-between;
    gap: 2rem;
}

/* Kleine Zeile neben dem Logo (v6.79), nur auf Handy und Tablet – am Desktop
   steht sie weiter im Hero-Textblock, wo genug Breite ist.
   Sie traegt denselben mehrlagigen Schatten wie der uebrige Hero-Text: Sie liegt
   ueber dem Foto und braucht dieselbe Absicherung gegen helle Bildstellen.
   v6.80: Ausdruecklich EINZEILIG (vorher durfte sie umbrechen). Der Umbruch
   wirkte im Kopfbereich unruhig. Damit das aufgeht, passt ahFitKopfEyebrow() in
   main.js die Schriftgroesse an die tatsaechlich freie Breite an – dieselbe
   Mechanik wie bei der E-Mail-Adresse im Menue (ahFitNavEmail).
   overflow: hidden ist dabei kein Schoenheitsfehler, sondern noetig: Nur mit
   begrenztem Kasten unterscheiden sich scrollWidth und clientWidth, und genau
   daran erkennt die Funktion, ob der Text noch ueberlaeuft.
   min-width: 0 hebt die Vorgabe von Flexbox auf, ein Element nie unter seine
   Inhaltsbreite zu stauchen – ohne das wuerde die Zeile das Logo verdraengen,
   statt selbst schmaler zu werden. */
.site-header__eyebrow {
    display: none;
    margin-left: auto;
    text-align: right;
    font-family: var(--font-sans);
    font-size: .56rem;
    letter-spacing: .1em;
    line-height: 1.5;
    text-transform: uppercase;
    font-weight: 500;
    color: rgba(255, 252, 247, .85);
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    flex: 0 1 auto;
    text-shadow:
        0 0 calc(var(--ah-tsh-blur, 10px) * .8) rgba(0,0,0,var(--ah-tsh-a, .28)),
        0 0 calc(var(--ah-tsh-blur, 10px) * .8) rgba(0,0,0,var(--ah-tsh-a, .28)),
        0 0 calc(var(--ah-tsh-blur, 10px) * 1.9) rgba(0,0,0,var(--ah-tsh-a, .28)),
        0 1px 2px rgba(0,0,0,var(--ah-tsh-edge, .35));
    transition: color var(--transition), text-shadow var(--transition);
}
@media (max-width: 880px) {
    .site-header__eyebrow { display: block; }
    /* Der Grundabstand von 2rem waere hier die halbe verfuegbare Breite. */
    .site-header .container { gap: .8rem; }
    /* Das Logo darf nicht mehr die halbe Breite belegen (v6.80): Die einzeilige
       Kopfzeile braucht den Rest, und was uebrig bleibt, entscheidet direkt
       ueber ihre Schriftgroesse. Es behaelt seine natuerliche Breite, gibt aber
       nichts unnoetig her – deshalb flex-shrink: 0 statt einer Prozentgrenze. */
    .site-branding { max-width: none; flex: 0 0 auto; }

    /* Ausweichzustand (v6.80): Passt die Zeile neben dem Logo auch bei der
       kleinsten noch lesbaren Schrift nicht auf EINE Zeile, setzt
       ahFitKopfEyebrow() diese Klasse und die Zeile bekommt eine eigene Reihe
       direkt unter dem Logo. Dort steht die volle Containerbreite zur Verfuegung,
       die Zeile bleibt einzeilig und lesbar. flex-wrap gehoert deshalb an den
       Container – ohne das koennte das Element nicht in eine zweite Reihe.
       Der Kopfbereich wird dadurch um eine Zeile hoeher; --ah-header-h wird
       danach neu gemessen, der Hero-Text rueckt also automatisch mit. */
    .site-header .container { flex-wrap: wrap; }
    .site-header.eyebrow-eigene-zeile .site-header__eyebrow {
        flex: 0 0 100%;
        margin-left: 0;
        margin-top: .3rem;
        text-align: left;
    }
}
/* Sobald der Kopfbereich beim Scrollen hell wird, muss auch diese Zeile
   umschalten – sonst steht Weiss auf Creme. Gleiches Muster wie beim Logo. */
.site-header.is-scrolled .site-header__eyebrow {
    color: var(--color-muted);
    text-shadow: none;
}

/* Initialer Zustand: über Hero → weiße Schrift mit Schatten */
.site-branding a {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    color: #FAF6F0;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: color var(--transition), text-shadow var(--transition);
}
.site-branding img {
    max-height: 56px; width: auto;
    filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 18px rgba(255, 252, 247, 0.55)) drop-shadow(0 0 40px rgba(255, 252, 247, 0.3));
    transition: filter var(--transition), max-height var(--transition);
}
.site-header.is-scrolled .site-branding a {
    color: var(--color-espresso);
    text-shadow: none;
}
.site-header.is-scrolled .site-branding img {
    max-height: 44px;
    filter: none;
}
/* Innenseiten (Impressum, Datenschutz, Blog ...) haben keinen Hero-Foto-Hintergrund
   hinter dem Header - die fuer den Hero gedachte helle Schrift waere dort auf dem
   cremefarbenen .page-hero-Hintergrund kaum lesbar (helle Schrift auf hellem Grund).
   Deshalb dort von Anfang an dieselbe dunkle Farbgebung wie im gescrollten Zustand
   (.site-header.is-scrolled), nicht erst nach dem ersten Scrollen. Body traegt die
   Klasse .ah-onepager nur auf der Startseite (ah_body_classes() in functions.php). */
body:not(.ah-onepager) .site-branding a {
    color: var(--color-espresso);
    text-shadow: none;
}
body:not(.ah-onepager) .site-branding img {
    filter: none;
}

.primary-nav ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; gap: 2.2rem; align-items: center;
}
.primary-nav a {
    font-size: .95rem;
    color: #FAF6F0;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
    position: relative;
    padding: .3rem 0;
    transition: color var(--transition), text-shadow var(--transition);
}
.site-header.is-scrolled .primary-nav a {
    color: var(--color-espresso);
    text-shadow: none;
}
/* Siehe Kommentar bei .site-branding weiter oben: Innenseiten ohne Hero
   brauchen von Anfang an dunkle Menue-Schrift statt der hellen Hero-Variante. */
body:not(.ah-onepager) .primary-nav a {
    color: var(--color-espresso);
    text-shadow: none;
}
.primary-nav a::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    height: 1px; width: 0; background: var(--color-caramel);
    transition: width var(--transition);
}
.primary-nav a:hover::after,
.primary-nav .current-menu-item > a::after { width: 100%; }

/* ---- Quicklinks im Kopfbereich (v6.70, nur PC ab 881 px) ----
   Die Menueliste blendet mit derselben Animation ein wie der Hero-Text. Ausgeloest
   wird sie ueber body.ah-hero-revealed, das initHeroMotion() setzt.
   Drei Sicherungen, damit die Navigation NIE dauerhaft unerreichbar ist:
   1. Der Schalter ist body.ah-hero-scroll. Die Klasse setzt PHP nur auf der
      Startseite mit "staged"-Hero (ah_body_classes() in functions.php); auf
      Unterseiten ohne Hero und im Rueckfallstand "classic" fehlt sie – dann gilt
      diese Regel gar nicht erst und das Menue ist normal sichtbar.
   2. html.js davor: Ohne JavaScript wird nichts versteckt, obwohl die Klasse im
      Markup steht. Bei Bewegungsreduzierung hebt der Hero-Block weiter unten die
      Regel per !important auf.
   3. :focus-within holt das Menue sofort hervor, wenn es per Tastatur angesteuert
      wird – unsichtbare, aber fokussierbare Links waeren sonst eine Falle.
   Die Klasse steht bewusst schon im gelieferten HTML: Wuerde sie erst main.js im
   Fussbereich setzen, waeren die Menuepunkte bis dahin sichtbar und wuerden danach
   sichtbar ausblenden.
   Ausgeblendet wird ueber opacity und einen kleinen Versatz, bewusst NICHT ueber
   visibility oder display: sonst wuerde das Header-Layout beim Umschalten springen.
   Weil die Klasse beim Hochscrollen nur entfernt wird, solange der Hero im Bild
   ist, bleibt das Menue weiter unten auf der Seite dauerhaft sichtbar. */
@media (min-width: 881px) {
    .primary-nav ul.menu {
        transition:
            opacity   600ms cubic-bezier(.22,.61,.36,1),
            transform 600ms cubic-bezier(.22,.61,.36,1);
    }
    html.js body.ah-hero-scroll:not(.ah-hero-revealed) .primary-nav ul.menu {
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
    }
    html.js body.ah-hero-scroll:not(.ah-hero-revealed) .primary-nav ul.menu:focus-within {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}

.nav-toggle {
    display: none;
    background: rgba(255, 252, 247, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 252, 247, 0.25);
    width: 44px; height: 44px;
    border-radius: 50%;
    cursor: pointer;
    align-items: center; justify-content: center;
    flex-direction: column; gap: 4px;
    transition: all var(--transition);
}
.site-header.is-scrolled .nav-toggle {
    background: var(--glass-bg);
    border: var(--glass-border);
}
.nav-toggle span {
    display: block; width: 18px; height: 1.5px;
    background: #FAF6F0;
    transition: all var(--transition);
}
.site-header.is-scrolled .nav-toggle span {
    background: var(--color-espresso);
}
/* Siehe Kommentar bei .site-branding weiter oben: Innenseiten ohne Hero
   brauchen von Anfang an den dunklen Burger statt der hellen Hero-Variante. */
body:not(.ah-onepager) .nav-toggle span {
    background: var(--color-espresso);
}
.nav-toggle.is-open {
    background: var(--color-espresso);
    border-color: var(--color-espresso);
    box-shadow: 0 6px 20px rgba(61, 43, 31, 0.35);
}
.nav-toggle.is-open span { background: #FAF6F0; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Backdrop deckt die volle Flaeche.
   ACHTUNG STAPELKONTEXT (Ursache des Fehlers in v6.67): Das Nav-Panel .primary-nav
   steht im Markup INNERHALB von <header class="site-header"> (header.php). Der
   Header ist position:fixed mit z-index:100 — ein positioniertes Element mit
   z-index != auto eroeffnet einen eigenen Stapelkontext. Das z-index:110 des
   Panels gilt daher nur INNERHALB des Headers; nach aussen wird das Panel auf
   Ebene 100 gemalt, also UNTER diesem Backdrop (105). In v6.66 fiel das nicht auf,
   weil der Backdrop transparent war und vor dem Panel endete; seit v6.67 deckt er
   die volle Flaeche ab und malte dunkel plus weichgezeichnet ueber das Panel.
   Loesung: Bei offenem Menue wird der ganze Header ueber den Backdrop gehoben
   (siehe body.nav-open .site-header weiter unten). Die untere CTA-Leiste (120)
   bleibt darueber, damit der Burger tappbar bleibt. */
/* v6.70 – ERST die Abdunklung, DANN das Panel (Umkehr gegenueber v6.69).
   Die Verzoegerung ist vom Backdrop auf das Panel gewandert. Der Trick dabei: Es
   gilt immer die transition des ZIELzustands. Beim Oeffnen ist das .is-visible
   bzw. .is-open, beim Schliessen die Grundregel. Deshalb steht die Verzoegerung
   beim Backdrop in der GRUNDregel (wirkt nur beim Schliessen) und beim Panel in
   .is-open (wirkt nur beim Oeffnen). Ergebnis:
     Oeffnen:   Backdrop sofort  -> Panel nach 190 ms
     Schliessen: Panel sofort    -> Backdrop nach 190 ms
   Aus v6.69 uebernommen (bitte nicht wieder ausbauen), drei Ursachen im CSS:
   1. Der Weichzeichner hatte keinen Startwert. .nav-backdrop kannte gar kein
      backdrop-filter, .is-visible setzte blur(3px) – ohne interpolierbaren
      Ausgangswert und ohne Eintrag in der transition-Liste springt das hart.
      Deshalb steht hier jetzt blur(0px) saturate(100%) als Startwert, und
      backdrop-filter ist in der Ueberblendung aufgefuehrt (mit -webkit-Praefix).
   2. Es wurden zwei Eigenschaften fuer dieselbe Sache animiert (background UND
      opacity). Jetzt steht die Farbe fest, ueberblendet wird nur die Deckkraft.
   3. Es gab keine Abfolge (die Reihenfolge selbst ist in v6.70 umgedreht, s. o.).
   Die vierte Ursache (die untere CTA-Leiste) steht weiter unten bei
   body.nav-open .ah-mobile-cta. */
.nav-backdrop {
    position: fixed;
    top: 0; bottom: 0; left: 0; right: 0;
    background: rgba(61, 43, 31, .45);
    z-index: 105;
    pointer-events: none;
    opacity: 0;
    -webkit-backdrop-filter: blur(0px) saturate(100%);
    backdrop-filter: blur(0px) saturate(100%);
    transition:
        opacity var(--transition),
        -webkit-backdrop-filter var(--transition),
        backdrop-filter var(--transition);
    /* Gilt nur beim SCHLIESSEN (Zielzustand = diese Grundregel): erst faehrt das
       Panel hinaus, danach hellt der Hintergrund auf. */
    transition-delay: 190ms;
}
.nav-backdrop.is-visible {
    pointer-events: auto;
    opacity: 1;
    -webkit-backdrop-filter: blur(3px) saturate(120%);
    backdrop-filter: blur(3px) saturate(120%);
    /* Beim OEFFNEN ohne Verzoegerung – die Abdunklung geht voran. */
    transition-delay: 0ms;
}
/* Header (und damit sein Kind .primary-nav) liegt ueber dem Backdrop (105).
   v6.70: Der Wert steht jetzt FEST statt nur bei body.nav-open – der schlagartige
   Ebenenwechsel 100 -> 106 im selben Frame wie das Oeffnen hat zusammen mit dem
   Weichzeichner des Headers ein Neuzeichnen des ganzen Kopfbereichs ausgeloest
   und war einer der beiden verbliebenen Flacker-Ausloeser. Der Wechsel ist
   gefahrlos dauerhaft: Zwischen 100 und 106 liegt keine andere Ebene des Themes.
   Die Reihenfolge der fixierten Ebenen bleibt unveraendert:
   CTA-Leiste 120 > Header-mit-Panel 106 > Backdrop 105. Zurueck-nach-oben (115)
   wird bei .nav-open ohnehin ausgeblendet, Scroll-Fortschritt (200), Lightbox
   (9999) und Popup (10000) liegen weiterhin darueber. */
.site-header { z-index: 106; }

/* Scroll-Sperre bei offenen Overlays (JS setzt position:fixed am body). Kein
   touch-action hier — sonst waeren die Wischgesten in Lightbox, Wohnzimmer-Szene
   und Portfolio-Karussell tot. */
body.ah-scroll-locked {
    overscroll-behavior: none;
}

/* Mobile-only Nav-Header/Footer auf Desktop ausblenden */
.primary-nav__mobile-head,
.primary-nav__mobile-foot { display: none; }

@media (max-width: 880px) {
    .primary-nav {
        position: fixed; top: 0; right: 0;
        /* v6.70: 100dvh statt 100vh. 100vh meint auf dem Handy die Flaeche OHNE
           eingeblendete Browserleiste und ist damit groesser als das, was man
           tatsaechlich sieht – genau deshalb lagen E-Mail und Instagram-Symbol
           unter der Browserleiste. 100dvh meint die aktuell sichtbare Flaeche und
           passt sich mit, wenn die Leiste ein- oder ausfaehrt.
           100vh davor als Rueckfall fuer aeltere Browser. */
        height: 100vh;
        height: 100dvh;
        width: min(80vw, 360px);
        /* v6.70: Der eigene backdrop-filter ist ENTFALLEN. Ein Backdrop-Weichzeichner
           auf einer BEWEGTEN Flaeche ist auf Handys eine bekannte Flackerquelle –
           das Panel wird waehrend der Fahrt in jedem Frame neu zusammengesetzt.
           Optisch trug er bei einem zu 92 % deckenden Hintergrund fast nichts bei;
           die Deckung wurde stattdessen auf 97 % angehoben. Das war die Hauptursache
           des verbliebenen Flackerns. */
        background: rgba(250,246,240,.97);
        padding: 5rem 2rem calc(7rem + env(safe-area-inset-bottom));
        transform: translateX(100%);
        transition: transform var(--transition);
        box-shadow: -10px 0 40px rgba(61,43,31,.1);
        z-index: 110;
        display: flex;
        flex-direction: column;
        /* v6.70: alles rechtsbuendig (Vorgabe der Kundin). */
        align-items: flex-end;
        text-align: right;
        /* Bei vielen Menuepunkten auf niedrigen Bildschirmen bleibt alles erreichbar;
           overscroll-behavior verhindert, dass das Scrollen auf die gesperrte Seite
           durchschlaegt. */
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    /* Die Verzoegerung gilt nur beim OEFFNEN (Zielzustand .is-open): erst dunkelt
       der Hintergrund ab, danach faehrt die Leiste aus. Beim Schliessen greift die
       Grundregel ohne Verzoegerung – das Panel geht voran. Siehe .nav-backdrop. */
    .primary-nav.is-open { transform: translateX(0); transition-delay: 190ms; }

    .primary-nav__mobile-head {
        display: block;
        margin-bottom: 1.5rem;
        width: 100%;
        text-align: right;
    }
    .primary-nav__avatar {
        display: block;
        width: 72px; height: 72px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 1rem;
        margin-left: auto; /* Foto rechtsbuendig (v6.70) */
        box-shadow: 0 4px 14px rgba(61, 43, 31, .12);
    }
    .primary-nav__greeting {
        font-family: var(--font-serif);
        font-size: 1.35rem;
        color: var(--color-espresso);
        margin: 0 0 .35rem;
        line-height: 1.25;
    }
    .primary-nav__region {
        font-size: .85rem;
        color: var(--color-muted);
        margin: 0;
    }

    .primary-nav ul.menu {
        margin-top: auto; /* schiebt Links nach unten in den Daumenbereich */
        width: 100%;
        flex-direction: column;
        align-items: flex-end; /* v6.70: Menueeintraege rechtsbuendig */
        gap: 1.4rem;
        padding: 0;
        list-style: none;
        /* Der Quicklink-Ablauf aus dem Kopfbereich gilt ausdruecklich nur am PC
           (min-width: 881px) – hier auf dem Handy bleibt alles wie in v6.69. */
    }
    .primary-nav ul.menu li { text-align: right; }
    .primary-nav a {
        font-size: 1.2rem;
        font-family: var(--font-serif);
        color: var(--color-espresso);
        text-shadow: none;
        /* Tippflaeche und Fokusrahmen bleiben unveraendert gross – die
           Rechtsbuendigkeit aendert nur die Ausrichtung, nicht die Groesse. */
    }

    .primary-nav__mobile-foot {
        display: flex;
        align-items: center;
        /* v6.70: rechtsbuendig statt space-between; der Abstand kommt aus gap. */
        justify-content: flex-end;
        gap: 1rem;
        width: 100%;
        margin-top: 1.5rem;
        padding-top: 1.2rem;
        border-top: 1px solid rgba(61, 43, 31, .12);
    }
    /* Selektor bewusst spezifischer als ".primary-nav a" (font-size:1.2rem, weiter
       oben in dieser Media-Query) - sonst gewinnt jene Regel und die Adresse wird
       19px gross und bricht um. Genau daher kam der Zeilenumbruch. */
    .primary-nav a.primary-nav__contact {
        /* Adresse immer auf EINER Zeile. Frueher word-break:break-all -> Umbruch
           mitten im Wort. Stattdessen nowrap + fluide Groesse; min-width:0 ist
           zwingend, sonst schrumpft das Flex-Item nicht unter seine Textbreite
           und der JS-Autofit (initNavEmailFit) greift nie. */
        font-size: clamp(.62rem, 3.1vw, .85rem);
        font-family: var(--font-sans);
        color: var(--color-muted);
        text-decoration: none;
        white-space: nowrap;
        min-width: 0;
        overflow: hidden;
    }
    .primary-nav__social {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px; height: 36px;
        border-radius: 50%;
        background: rgba(61, 43, 31, .06);
        color: var(--color-espresso);
        flex: 0 0 36px;
    }

    .nav-toggle { display: flex; z-index: 110; }
    .site-branding { max-width: 50%; }
    .site-branding img { max-height: 40px; }
}

/* ---------- HERO ---------- */
/* v6.73: Der Ablauf haengt an der ZEIT, nicht mehr am Scrollen. Der Hero ist ein
   normaler Abschnitt (keine Haftstrecke mehr) und blendet Text, Verlauf und
   Weichzeichner eine feste Dauer nach dem Sichtbarwerden ein (Klasse .is-revealed,
   gesetzt von initHeroMotion() in main.js). .ah-hero bleibt trotzdem "position:
   relative" – das ist die Positionierungsbasis fuer .hero-slider, .hero-content
   usw., die per inset:0 darauf aufbauen. */
.ah-hero-track {
    position: relative;
}
.ah-hero {
    position: relative;
    height: 100vh;
    height: 100dvh;
    min-height: 640px;
    overflow: hidden;
    margin-top: 0;
}
/* v6.76: Mobil endet der Hero ueber der angepinnten CTA-Leiste statt dahinter.
   Bis v6.75 war er volle 100dvh hoch, die Leiste liegt aber fix am unteren
   Fensterrand – die Punkte-Navigation und der Augen-Schalter (beide bottom:
   2.4rem = 38px) lagen damit unter einer rund 72px hohen Leiste und waren weder
   sicht- noch antippbar.
   Bewusst die Hoehe verkleinert und nicht die Steuerelemente nach oben
   geschoben: So bleibt der ganze Hero sichtbar, und der Uebergang in den
   Espresso-Balken sitzt weiterhin genau an der Sektionsgrenze.
   min-height muss hier mit heruntergesetzt werden – 640px sind auf kleinen
   Geraeten mehr als 100dvh minus Leiste und wuerden die Rechnung aushebeln. */
@media (max-width: 880px) {
    .ah-hero {
        height: calc(100vh - var(--ah-cta-h));
        height: calc(100dvh - var(--ah-cta-h));
        min-height: 480px;
    }
}

.hero-slider {
    position: absolute; inset: 0;
}
.hero-slide {
    position: absolute; inset: 0;
    opacity: 0; transition: opacity 1.6s ease-in-out;
    /* WICHTIG: hier bewusst KEIN eigener transform-Grundwert. Genau der war in
       v6.68 die Falle – er gab dem Slide einen Basiswert, auf den das abgehende
       Bild beim Verlust der Animation sichtbar zurueckschnappte. */
}
.hero-slide picture { position: absolute; inset: 0; display: block; }
.hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-slide.is-active { opacity: 1; transition: opacity 1.6s ease-in-out; }
/* Ken Burns wieder JE BILD (v6.70, Rueckbau der gemeinsamen Zoomflaeche aus v6.69).
   Sprungfrei nach dem Vorbild der Wohnzimmer-Szene weiter unten: Der Selektor
   umfasst ausdruecklich AUCH .is-leaving. Das abgehende Bild behaelt damit seine
   Animation ueber die ganze Ueberblendung hinweg – ohne das fiele sie mit der
   Klasse .is-active weg und das noch voll sichtbare Bild spraenge in einem
   einzigen Frame auf die Ausgangsgroesse zurueck (der Rucker aus v6.68).
   Dauer = Anzeigedauer 6 s + Ueberblendung 1,6 s = 7,6 s: Der Zoom laeuft ueber
   die volle Standzeit und ist beim Wechsel fertig, statt nach 37 % abgeschnitten
   zu werden. "forwards" haelt den Endwert, solange .is-leaving anliegt. */
.hero-slide.is-active .hero-img,
.hero-slide.is-leaving .hero-img {
    animation: ah-kenburns 7.6s ease-out forwards;
    will-change: transform;
}
/* Verlauf ueber dem Foto, seit v6.69 ein eigenes Element (vorher .hero-slide::after).
   Zwei Gruende: Er soll eigenstaendig einblendbar sein, und als Kind des Slides
   skalierte er mit dem Zoom mit und lief gegen den unbewegten Sockel – genau das
   machte den Rucker beim Bildwechsel sichtbar. Er muss deshalb auch in v6.70
   AUSSERHALB von .hero-slider bleiben: .hero-slider traegt weiterhin Weichzeichner
   und Skalierung des Ablaufs, sonst skalierte der Verlauf wieder mit.
   Deutlich schwaecher als bis v6.68 (0.06/0.28/0.40 statt 0.15/0.42/0.55): Verlauf
   und Weichzeichner zusammen wuerden das Motiv sonst zudecken. Gilt in beiden
   Varianten – das ist die Verbesserung an der Bildwirkung, kein Teil des Ablaufs.
   Gleicher Espresso-Ton wie der Keyword-Balken, damit unten kein Farbton-Sprung
   entsteht.
   v6.76: Die drei Stopps haengen jetzt an EINER Zahl (--ah-scrim, Customizer
   „Abdunklung des Fotos"). --ah-scrim ist die Deckkraft am unteren Bildrand, die
   beiden oberen Stopps leiten sich mit 15 % und 70 % davon ab – das sind genau
   die Verhaeltnisse der bisherigen Festwerte, die Form des Verlaufs bleibt also
   erhalten und es braucht trotzdem nur einen Regler. Der Rueckfallwert .4 in
   var() ist der Stand bis v6.75: Faellt der Inline-Style aus hero.php je weg,
   sieht der Hero aus wie vorher statt ungeschuetzt. */
.hero-veil {
    position: absolute; inset: 0;
    z-index: 1;
    pointer-events: none;
    /* v6.77: Grundwert, damit der Verlauf auch in der Variante "Text sofort
       sichtbar" weich ausblendet, wenn der Augen-Schalter gedrueckt wird. Die
       Variante "staged" setzt weiter unten ihre eigene, laengere Uebergangszeit
       (--ah-hero-dauer) und ueberschreibt diese Zeile dort. */
    transition: opacity var(--transition);
    background: linear-gradient(180deg,
        rgba(61, 43, 31, calc(var(--ah-scrim, .4) * .15)) 0%,
        rgba(61, 43, 31, calc(var(--ah-scrim, .4) * .70)) 58%,
        rgba(61, 43, 31, var(--ah-scrim, .4)) 100%);
}
/* Ab hier gilt der Mobil-Wert. Bewusst als Umbelegung von --ah-scrim AUF dem
   Element selbst und nicht als zweiter background: Eine Zuweisung direkt an
   .hero-veil schlaegt den geerbten Wert vom Inline-Style der Sektion, und der
   Verlauf oben bleibt die einzige Stelle, an der die Farbwerte stehen.
   Gleicher Breakpoint wie die angepinnte CTA-Leiste (880px): Genau ab dort ist
   der Hero der schmale, hochkante Fall, um den es hier geht. */
@media (max-width: 880px) {
    .hero-veil { --ah-scrim: var(--ah-scrim-m, .6); }
}

/* ---- Ablauf der Variante "staged" (v6.73: zeitgesteuert statt scrollbasiert) ---- */
/* Alle Regeln bewusst an html.js gehaengt: Ohne JavaScript wird .is-revealed nie
   gesetzt, und dann waere das Foto dauerhaft unscharf und der Text unsichtbar.
   Ohne JavaScript darf vom Ablauf gar nichts uebrig bleiben.
   --ah-hero-dauer steuert alle drei Ebenen (Bild, Verlauf, Text) mit demselben Wert:
   Es soll als EINE Bewegung wahrgenommen werden, nicht als drei parallele. Der
   Auslöser ist jetzt initHeroMotion()'s Timer (Wartezeit aus dem Customizer), nicht
   mehr der Scrollweg. --ah-hero-blur kommt als Inline-Style von hero.php (Customizer
   „Stärke des Weichzeichners") und blendet über dieselbe Transition sanft ein. */
html.js .ah-hero[data-hero-motion="staged"] { --ah-hero-dauer: 600ms; }
html.js .ah-hero[data-hero-motion="staged"] .hero-slider {
    filter: blur(0px);
    transform: scale(1.04);
    transition:
        filter    var(--ah-hero-dauer) cubic-bezier(.22,.61,.36,1),
        transform var(--ah-hero-dauer) cubic-bezier(.22,.61,.36,1);
    will-change: filter, transform;
}
html.js .ah-hero[data-hero-motion="staged"].is-revealed .hero-slider {
    filter: blur(var(--ah-hero-blur, 4px));
    transform: scale(.99);
}
html.js .ah-hero[data-hero-motion="staged"] .hero-veil {
    opacity: 0;
    transition: opacity var(--ah-hero-dauer) cubic-bezier(.22,.61,.36,1);
}
html.js .ah-hero[data-hero-motion="staged"].is-revealed .hero-veil { opacity: 1; }
/* Keine Staffelung mehr: alle Textbloecke gleichzeitig, ein einziger Uebergang.
   Die frueheren Stufennummern --i sind samt Inline-Style aus hero.php entfallen. */
html.js .ah-hero[data-hero-motion="staged"] .ah-line {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity   var(--ah-hero-dauer) cubic-bezier(.22,.61,.36,1),
        transform var(--ah-hero-dauer) cubic-bezier(.22,.61,.36,1);
}
html.js .ah-hero[data-hero-motion="staged"].is-revealed .ah-line {
    opacity: 1;
    transform: translateY(0);
}
/* Fliessender Uebergang: der Hero-Unterrand laeuft weich in den Espresso-Balken
   der Keyword-Leiste aus. Liegt ueber den Bildern (z-index 1), aber unter dem
   Hero-Text/Buttons (z-index 2), damit die Schrift lesbar bleibt. */
.ah-hero::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 170px;
    /* weich einsteigende Kurve (ease-in) mit vielen Stopps: das Foto loest sich
       ohne sichtbare Kante auf und laeuft genau an der Sektionsgrenze in Vollton-
       Espresso aus (Slope naehert sich zum Ende gegen 0 -> keine Mach-Kante). */
    background: linear-gradient(180deg,
        rgba(61, 43, 31, 0)    0%,
        rgba(61, 43, 31, 0.06) 22%,
        rgba(61, 43, 31, 0.18) 40%,
        rgba(61, 43, 31, 0.38) 56%,
        rgba(61, 43, 31, 0.62) 72%,
        rgba(61, 43, 31, 0.85) 87%,
        var(--color-espresso) 100%);
    z-index: 1;
    pointer-events: none;
}

.hero-content {
    position: relative; z-index: 2;
    height: 100%;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding-bottom: 8rem;
    color: #FAF6F0;
}

/* ---- Mobile Aufteilung des Hero-Textes (v6.78) ----
   Bis v6.77 war der ganze Textblock unten verankert (justify-content: flex-end)
   und hatte KEIN padding-top. Wuchs er ueber die Hoehe hinaus, wanderte er nach
   oben aus dem Hero heraus und verschwand hinter dem fixierten Kopfbereich.
   Auf einem iPhone passierte das zuverlaessig, weil drei Dinge zusammenkamen:
   die Ueberschrift skalierte mobil gar nicht herunter (clamp(2.4rem, 5vw, 4.4rem)
   – 5vw liegt bei 390px Breite mit 19.5px weit unter der Untergrenze, die 2.4rem
   galten also fest), der Hero wurde in v6.76 um die Hoehe der CTA-Leiste
   kuerzer, und ein laengerer Eyebrow-Text braucht zwei Zeilen statt einer.

   Statt weiter unten zu stapeln wird der Text jetzt ueber die Hoehe verteilt:
   Eyebrow oben unter dem Kopfbereich, Ueberschrift und Untertitel in der Mitte,
   Buttons unten. Umgesetzt mit zwei margin-top: auto statt mit
   justify-content: space-between – space-between wuerde alle VIER Bloecke gleich
   weit auseinanderziehen und damit auch Ueberschrift und Untertitel trennen, die
   zusammengehoeren. Die beiden auto-Margins teilen den freien Platz stattdessen
   in genau zwei Luecken: eine vor der Ueberschrift, eine vor den Buttons.

   Das ist zugleich die Sperre gegen die Ueberlappung: Bei flex-start faellt eine
   auto-Marge auf 0 zusammen, sobald der Platz knapp wird. Der Text wandert dann
   nicht mehr nach oben raus, sondern bleibt unterhalb von padding-top stehen –
   im schlimmsten Fall wird er unten knapper, aber nie vom Logo verdeckt. */
@media (max-width: 880px) {
    .hero-content {
        /* v6.79: Der Text sitzt wieder so weit unten wie moeglich (in v6.78 war
           er ueber die Hoehe verteilt). Moeglich wird das, weil die kleine Zeile
           jetzt oben neben dem Logo steht und der Block dadurch kuerzer ist.
           "safe" ist hier der entscheidende Zusatz und kein Beiwerk: Reines
           flex-end laesst zu langen Inhalt nach OBEN aus dem Kasten laufen –
           genau der Fehler aus v6.77, bei dem die Zeile hinter dem Logo landete.
           Mit "safe" schaltet der Browser bei Platzmangel selbsttaetig auf
           flex-start um, der Text bleibt also unterhalb von padding-top stehen.
           Beide Zeilen sind noetig: Browser ohne "safe" ueberlesen die zweite
           und behalten flex-end. */
        justify-content: flex-end;
        justify-content: safe flex-end;
        padding-top: calc(var(--ah-header-h) + 1rem);
        /* 8rem stammen aus der Zeit, als der Hero noch die volle Fensterhoehe
           hatte. Seit v6.76 ist er um die CTA-Leiste kuerzer; 4.5rem lassen die
           Punkte-Navigation (bottom: 2.4rem) weiterhin frei. */
        padding-bottom: 4.5rem;
    }
    /* Die Fassung im Textblock entfaellt hier – sie steht jetzt im Kopfbereich.
       display:none statt visibility, damit der Text auch fuer Screenreader nur
       einmal vorkommt. */
    .hero-content .eyebrow { display: none; }

    /* Beide Schaltflaechen in einer Reihe (Variante C). flex: 1 1 0 gibt beiden
       dieselbe Breite, unabhaengig von der Textlaenge – sonst wuerde "Shooting
       anfragen" mit Pfeil den zweiten Knopf an den Rand druecken. Der schmalere
       Innenabstand und die kleinere Schrift sind noetig, damit auch auf einem
       375px breiten Geraet nichts umbricht. */
    .hero-actions { flex-wrap: nowrap; gap: .7rem; }
    .hero-actions .btn {
        flex: 1 1 0;
        justify-content: center;
        padding-left: .8rem; padding-right: .8rem;
        font-size: .84rem;
        white-space: nowrap;
    }
}
/* Erst hier skaliert die Ueberschrift wirklich mit der Bildschirmbreite. Die
   globale Regel clamp(2.4rem, 5vw, 4.4rem) kann das nicht: Auf Telefonen
   gewinnt immer die Untergrenze. 7.4vw ergeben bei 390px rund 29px und bei
   375px rund 28px – schmal genug fuer vier statt sechs Zeilen. Die Obergrenze
   2.4rem sorgt fuer den nahtlosen Anschluss an die globale Regel bei 600px. */
@media (max-width: 600px) {
    .hero-content h1 { font-size: clamp(1.6rem, 7.4vw, 2.4rem); }
    .hero-content .lead { font-size: 1.02rem; }
}
/* Staerkere Textschatten seit v6.69. Sie ersetzen einen Teil dessen, was der
   frueher viel dichtere Verlauf geleistet hat: Die Schrift bleibt lesbar, ohne
   dass das ganze Foto abgedunkelt werden muss. Gilt in beiden Varianten.

   v6.76 – warum drei Ebenen statt einer:
   Bis v6.75 stand hier EIN Schatten mit 26 px Weichzeichnung und .5 Deckkraft.
   26 px verteilen diese .5 auf eine grosse Flaeche; an der Buchstabenkante, wo
   der Kontrast entscheidet, kamen davon vielleicht 15 % an. Das war ein
   Stimmungsschatten, kein Lesbarkeitsschatten – auf hellen Motiven verschwand
   die Schrift trotzdem.
   Mehrere gleiche Ebenen multiplizieren dagegen ihre Deckkraft: Direkt an der
   Kante liegen alle drei uebereinander und ergeben 1-(1-a)^3. Der Hof folgt der
   Schrift, statt das halbe Foto abzudunkeln. Die Deckkraft je Ebene (--ah-tsh-a)
   rechnet ah_hero_shadow() in PHP aus der im Customizer eingestellten WIRKUNG
   zurueck, damit der Regler dort verstaendlich bleibt.
   Die dritte Ebene laeuft bewusst mit 2,4-facher Weichzeichnung weiter nach
   aussen: An der Kante zaehlt sie voll mit (die Rechnung stimmt also), weiter
   draussen ergibt sie den weichen Auslauf, der das harte „Aufgeklebt"-Aussehen
   verhindert.
   Die Werte gelten fuer Desktop UND Mobil. Getrennte Saetze waeren doppelt so
   viele Regler im Customizer, ohne dass der Schatten am Desktop stoert – dort
   liegt Text ebenso ueber Fotos.
   Rueckfallwerte in var(): der Stand bis v6.75, falls hero.php den Inline-Style
   je nicht liefert. */
.hero-content .eyebrow {
    color: rgba(255,252,247,.85);
    text-shadow:
        0 0 calc(var(--ah-tsh-blur, 10px) * .8) rgba(0,0,0,var(--ah-tsh-a, .28)),
        0 0 calc(var(--ah-tsh-blur, 10px) * .8) rgba(0,0,0,var(--ah-tsh-a, .28)),
        0 0 calc(var(--ah-tsh-blur, 10px) * 1.9) rgba(0,0,0,var(--ah-tsh-a, .28)),
        0 1px 2px rgba(0,0,0,var(--ah-tsh-edge, .35));
}
.hero-content h1 {
    color: #FAF6F0;
    max-width: 880px;
    font-weight: 300;
    text-shadow:
        0 0 var(--ah-tsh-blur, 10px) rgba(0,0,0,var(--ah-tsh-a, .28)),
        0 0 var(--ah-tsh-blur, 10px) rgba(0,0,0,var(--ah-tsh-a, .28)),
        0 0 calc(var(--ah-tsh-blur, 10px) * 2.4) rgba(0,0,0,var(--ah-tsh-a, .28)),
        0 1px 2px rgba(0,0,0,var(--ah-tsh-edge, .35));
}
.hero-content .lead {
    color: rgba(255,252,247,.92);
    text-shadow:
        0 0 calc(var(--ah-tsh-blur, 10px) * .8) rgba(0,0,0,var(--ah-tsh-a, .28)),
        0 0 calc(var(--ah-tsh-blur, 10px) * .8) rgba(0,0,0,var(--ah-tsh-a, .28)),
        0 0 calc(var(--ah-tsh-blur, 10px) * 1.9) rgba(0,0,0,var(--ah-tsh-a, .28)),
        0 1px 2px rgba(0,0,0,var(--ah-tsh-edge, .35));
}
/* Verfuegbarkeits-Hinweis und Buttons bilden die vierte und letzte Stufe des
   Ablaufs, darum liegen sie seit v6.69 in einer gemeinsamen Gruppe. */
.hero-actions-group { margin-top: 2rem; }
.hero-availability {
    font-size: .85rem;
    /* v6.76: von .85 auf .94 angehoben. Die Deckkraft wirkt auf das ganze Element,
       also auch auf den Textschatten – bei .85 wurde ausgerechnet die kleinste
       Schrift im Hero am schwaechsten abgesetzt. */
    opacity: .94;
    margin: 0 0 .5rem;
    text-shadow:
        0 0 calc(var(--ah-tsh-blur, 10px) * .8) rgba(0,0,0,var(--ah-tsh-a, .28)),
        0 0 calc(var(--ah-tsh-blur, 10px) * .8) rgba(0,0,0,var(--ah-tsh-a, .28)),
        0 0 calc(var(--ah-tsh-blur, 10px) * 1.9) rgba(0,0,0,var(--ah-tsh-a, .28)),
        0 1px 2px rgba(0,0,0,var(--ah-tsh-edge, .35));
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-actions .btn-primary { background: rgba(255,252,247,.95); color: var(--color-espresso); }
.hero-actions .btn-primary:hover { background: var(--color-caramel); color: #fff; }
/* v6.76: bis v6.75 als Inline-Style in hero.php, mit .15 Fuellung und .3 Rahmen.
   Weiss auf hellem Foto – der Rahmen verschwand dort komplett, und ein
   Textschatten hilft dagegen nichts, weil das Problem die Kontur ist, nicht die
   Schrift. Statt hellerem Weiss (das auf dunklen Motiven grell wuerde) jetzt
   eine dunkle Fuellung: Sie traegt den Rahmen auf JEDEM Motiv und passt zum
   Espresso-Ton des Verlaufs darunter. */
.ah-hero .btn-ghost {
    background: rgba(61, 43, 31, .34);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #FAF6F0;
    border-color: rgba(255, 252, 247, .5);
}
.ah-hero .btn-ghost:hover,
.ah-hero .btn-ghost:focus-visible {
    background: rgba(61, 43, 31, .55);
    border-color: rgba(255, 252, 247, .8);
    color: #FAF6F0;
}

.hero-dots {
    position: absolute; bottom: 2.4rem; left: 50%; transform: translateX(-50%);
    z-index: 3;
    display: flex; gap: .6rem;
}
.hero-dots button {
    width: 28px; height: 2px;
    background: rgba(255,252,247,.4);
    border: none; cursor: pointer;
    transition: all var(--transition);
    padding: 0;
}
.hero-dots button.is-active { background: #FAF6F0; width: 44px; }

/* Schalter "Nur Bilder zeigen": blendet Text, Weichzeichner UND den Verlauf ueber
   dem Foto aus; die Punkte-Navigation bleibt. Zustand kommt von main.js
   initHeroTextToggle() ueber aria-pressed und die Klasse .is-text-hidden auf
   .ah-hero. */
.hero-text-toggle {
    position: absolute; bottom: 2.4rem; right: 2rem;
    z-index: 3;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(61, 43, 31, .35);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,252,247,.35);
    border-radius: 50%;
    color: #FAF6F0;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.hero-text-toggle:hover,
.hero-text-toggle:focus-visible { background: rgba(61, 43, 31, .55); border-color: rgba(255,252,247,.6); }
.hero-text-toggle-icon { display: flex; }
.hero-text-toggle-icon--off { display: none; }
.hero-text-toggle[aria-pressed="true"] .hero-text-toggle-icon--on { display: none; }
.hero-text-toggle[aria-pressed="true"] .hero-text-toggle-icon--off { display: flex; }

html.js .ah-hero.is-text-hidden .hero-slider { filter: blur(0) !important; }
.ah-hero.is-text-hidden .ah-line { opacity: 0 !important; pointer-events: none; }
/* v6.77: Der Verlauf ueber dem Foto geht jetzt mit weg. Bis v6.76 blieb er
   stehen – bei einem Schalter mit der Beschriftung "Nur Bilder zeigen" war das
   schlicht falsch, und seit die Abdunklung mobil von 40 auf 60 % gestiegen ist
   (v6.76), war es auch deutlich sichtbar.
   Der Auslauf .ah-hero::after bleibt dagegen bewusst stehen: Er ist keine
   Abdunklung des Motivs, sondern die Naht zum Espresso-Balken direkt darunter.
   Ohne ihn stuende dort eine harte Kante. Aus demselben Grund behalten die
   Punkte-Navigation und der Schalter selbst ihren Untergrund und bleiben
   bedienbar.
   !important ist noetig, weil die staged-Variante weiter oben opacity: 1 auf
   .is-revealed .hero-veil setzt – ohne waere diese Regel dort wirkungslos. */
.ah-hero.is-text-hidden .hero-veil { opacity: 0 !important; }

/* Bewegungsreduzierung: eigener, gezielter Block. Der globale *-Block weiter oben
   reicht nicht, weil der Endzustand hier erzwungen werden muss, ohne dass
   JavaScript eine Klasse setzt.
   Wichtig: animation: none statt 0.01ms – bei 0.01ms wuerde der Ken-Burns-Zoom
   wegen "forwards" sofort auf den Endwert springen. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-snap-type: none !important; }
    .ah-hero .hero-slider { filter: none !important; transform: none !important; transition: none !important; }
    .ah-hero .hero-img { animation: none !important; transform: none !important; }
    .ah-hero .hero-veil { opacity: 1 !important; transition: none !important; }
    .ah-hero .ah-line { opacity: 1 !important; transform: none !important; transition: none !important; }
    /* Quicklinks im Kopfbereich duerfen nie unerreichbar sein. */
    body .primary-nav ul.menu { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
}

/* ---------- Über mich ---------- */
.ah-about {
    background: var(--color-cream);
    /* Sicherheitsnetz: der Fotostapel faechert bewusst ueber seinen Rahmen
       hinaus. Sind viele Ebenen offen, darf das auf schmalen Schirmen trotzdem
       kein horizontales Scrollen ausloesen. "clip" statt "hidden", damit kein
       Scroll-Container entsteht. */
    overflow-x: clip;
}
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--gap-l);
    align-items: center;
}
.about-image {
    position: relative;
    aspect-ratio: 4/5;
}
/* v6.70: Hoehe am PC deckeln. Die Buehne ist 4:5, also Hoehe = Breite x 1,25.
   Zielhoehe 0,7 Bildschirmhoehen – daraus folgt 56 % der Bildschirmhoehe als
   Breitengrenze (0,7 / 1,25). Oben und unten bleiben so je rund 15 % Luft.
   Der Wert ist abgestimmt: Zuerst stand hier 0,9 Bildschirmhoehen (72dvh), die
   Kundin hat sich beides angesehen und sich ausdruecklich fuer 0,7 entschieden.
   Bei 1240 px Containerbreite war der Stapel vorher rund 668 px hoch und
   fuellte den Bildschirm fast vollstaendig aus.
   margin-inline: auto zentriert die schmalere Buehne in ihrer Spalte.
   Kein Konflikt mit recentre() in main.js: das steigt oberhalb von 880 px sofort
   aus und setzt dort keine Pixelwerte fuer margin-left/right.
   100vh-Fallback vor dvh, weil dvh erst mit v6.69 ins Theme kam. */
@media (min-width: 881px) {
    .about-image {
        /* width: 100% ist hier ZWINGEND und war der Stolperstein beim Bauen:
           .about-image ist ein Grid-Item und wird normalerweise auf die Spalten-
           breite gestreckt. Sobald es aber auto-Raender bekommt, entfaellt dieses
           Strecken – und weil im Stapel nur absolut positionierte Karten liegen,
           hat er keine eigene Breite: die Buehne fiel auf 0 x 0 zusammen. */
        width: 100%;
        max-width: 56vh;
        max-width: 56dvh;
        margin-inline: auto;
    }
}
/* Fotostapel: die Karten liegen wie aufgefaecherte Abzuege. Sie drehen um
   einen Punkt weit unterhalb der Buehne, dadurch laeuft der seitliche Versatz
   auf einem Kreisbogen statt auf einer starren Diagonale. Die Geometrie selbst
   setzt initAboutStack() in main.js. */
.about-card {
    position: absolute;
    inset: 0;
    /* Gleicher Radius wie die Portfolio-Kacheln, damit der Stapel nicht aus
       dem Designsystem faellt. */
    border-radius: var(--radius-m);
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(61, 43, 31, .16), 0 4px 10px rgba(61, 43, 31, .07);
    background: var(--color-cream);
    /* Drehpunkt unterhalb des Bildes – erzeugt den Faecher. */
    transform-origin: 50% 145%;
    /* v6.69: 500 statt 900 ms. Der Wechsel ist jetzt eine einzige durchgehende
       Bewegung (kein Abheben mehr), und die war bei 900 ms spuerbar zaeh. */
    transition:
        transform 500ms cubic-bezier(.22,.61,.36,1),
        filter    500ms cubic-bezier(.22,.61,.36,1),
        box-shadow 500ms ease,
        opacity   500ms ease;
}
/* Feine helle Kante als eigenes Element, damit sie beim Hover-Zoom nicht
   mitskaliert und die Karten sauber voneinander trennt. */
.about-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
    pointer-events: none;
    z-index: 2;
}
.about-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.4s cubic-bezier(.22,.61,.36,1);
}
/* Die vorderste Karte traegt den kraeftigeren Schatten und reagiert auf Hover
   wie die uebrigen Bildflaechen im Theme (.portfolio-tile, .post-card). */
.about-card.is-front {
    box-shadow: 0 26px 60px rgba(61, 43, 31, .22), 0 6px 14px rgba(61, 43, 31, .08);
}
.about-card.is-front:hover {
    box-shadow: 0 34px 74px rgba(61, 43, 31, .26), 0 8px 18px rgba(61, 43, 31, .1);
}
.about-card.is-front:hover img { transform: scale(1.045); }
/* Faehrt man eine hintere Karte an, zeigt sie sich kurz in voller Farbe. */
.about-card:not(.is-front):hover { filter: none !important; }
/* Karten jenseits der sichtbaren Ebenen bleiben im Wechsel, treten aber nicht
   in Erscheinung – so ueberfrachten auch zehn Bilder den Stapel nicht. */
.about-card.is-hidden {
    opacity: 0;
    pointer-events: none;
}
.about-card:focus-visible {
    outline: 2px solid var(--color-caramel);
    outline-offset: 4px;
}
/* Ohne JavaScript liegen alle Karten deckungsgleich uebereinander. Dann darf
   nur das erste Bild sichtbar sein – vorher war es das letzte im Markup. */
html:not(.js) .about-card:not(.is-front) { display: none; }

/* Bedienpunkte unter dem Stapel (von initAboutStack erzeugt) */
.about-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2.2rem;
    display: flex;
    justify-content: center;
    gap: .5rem;
    z-index: 60;
}
.about-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(61, 43, 31, .2);
    cursor: pointer;
    transition: background var(--transition), width var(--transition);
}
.about-dots button[aria-current="true"] {
    background: var(--color-caramel);
    width: 20px;
    border-radius: 999px;
}
.about-dots button:focus-visible {
    outline: 2px solid var(--color-caramel);
    outline-offset: 3px;
}
.about-text h2 { margin-top: .4rem; }
.about-text p { margin: 0 0 1rem; }
.about-teaser { color: var(--color-text); }
.about-more {
    overflow: hidden;
    color: var(--color-text);
    /* Eingeklappt: hidden-Attribut greift. Animation siehe js-read-more. */
}
.about-more[hidden] { display: none; }
.about-toggle {
    display: inline-flex; align-items: center; gap: .6rem;
    background: transparent;
    border: 0;
    padding: .2rem 0;
    margin: .4rem 0 0;
    font-family: var(--font-sans);
    font-size: .95rem;
    letter-spacing: .03em;
    color: var(--color-caramel);
    cursor: pointer;
    transition: color var(--transition);
}
.about-toggle:hover { color: var(--color-espresso); }
.about-toggle:focus-visible {
    color: var(--color-espresso);
    outline: 2px solid var(--color-caramel);
    outline-offset: 3px;
    border-radius: 4px;
}
.about-toggle .label-less { display: none; }
.about-toggle[aria-expanded="true"] .label-more { display: none; }
.about-toggle[aria-expanded="true"] .label-less { display: inline; }
.about-toggle .chevron {
    transition: transform var(--transition);
    display: inline-block;
}
.about-toggle[aria-expanded="true"] .chevron { transform: rotate(90deg); }
.about-text .signature {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--color-caramel);
    margin-top: 2rem;
    display: block;
}
@media (max-width: 880px) {
    .about-grid { grid-template-columns: 1fr; }
    /* Der Faecher oeffnet nach links und ragt dort ueber die Buehne hinaus. Bis
       v6.68 stand hier ein fester margin-left von 12 %: Er hat die Buehne
       verschoben UND um 12 % verkleinert, und weil er den tatsaechlichen
       Ueberstand nicht kennt, stand der Stapel trotzdem schief (links 59 px Luft,
       rechts 16 px). Seit v6.69 rechnet initAboutStack() den Ueberstand aus und
       setzt Breite und Versatz punktgenau – siehe recentre() in main.js. */
    /* Mobil zuerst der Text, die Bilder ans Ende der Sektion. Der Abstand kommt
       aus dem gap des Grids, daher hier bewusst kein margin. */
    .about-text  { order: 1; }
    .about-image { order: 2; }
    .hero-content .eyebrow { font-size: .68rem; margin-top: 0; }
}
@media (max-width: 480px) {
    .site-branding img { max-height: 32px; }
    .hero-content .eyebrow { font-size: .62rem; letter-spacing: .12em; }
}

/* ---------- Leistungen / Services ---------- */
.ah-services { background: var(--color-cream); }
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
}
@media (max-width: 1100px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
}
.service-card {
    contain: layout style;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-l);
    padding: 2.4rem 2rem;
    box-shadow: var(--glass-shadow);
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}
.service-card::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(184,137,107,.08), transparent 60%);
    opacity: 0; transition: opacity var(--transition);
    pointer-events: none;
    z-index: 0;
}
.service-card > * { position: relative; z-index: 1; }
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(61,43,31,.12);
}
.service-card:hover::before { opacity: 1; }
.service-icon {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: rgba(184,137,107,.15);
    display: grid; place-items: center;
    margin-bottom: 1.4rem;
    color: var(--color-caramel);
}
.service-card h3 { margin-bottom: .6rem; }
.service-card p { color: var(--color-muted); margin-bottom: 1.4rem; }
.service-features {
    list-style: none; padding: 0; margin: 0 0 1.6rem;
    font-size: .92rem;
    color: var(--color-text);
}
.service-features li {
    padding: .35rem 0;
    border-top: 1px solid var(--color-line);
    display: flex; align-items: center; gap: .5rem;
}
.service-features li::before {
    content: ""; width: 4px; height: 4px;
    background: var(--color-caramel); border-radius: 50%;
}
@media (max-width: 700px) { .services-grid { grid-template-columns: 1fr; } }
.service-card { display: flex; flex-direction: column; }
.service-card .service-cta { margin-top: auto; align-self: flex-start; }

.service-more {
    color: var(--color-text);
    font-size: .92rem;
    line-height: 1.55;
    margin: 0 0 1rem;
    overflow: hidden;
}
.service-more p { margin: 0 0 .8rem; }
.service-more p:last-child { margin-bottom: 0; }
.service-more[hidden] { display: none; }

.service-more-toggle {
    align-self: flex-start;
    background: transparent;
    border: 0;
    padding: .2rem 0;
    margin: -.4rem 0 1.2rem;
    font-family: var(--font-sans);
    font-size: .85rem;
    letter-spacing: .03em;
    color: var(--color-caramel);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: color var(--transition);
}
.service-more-toggle:hover { color: var(--color-espresso); }
.service-more-toggle:focus-visible {
    color: var(--color-espresso);
    outline: 2px solid var(--color-caramel);
    outline-offset: 3px;
    border-radius: 4px;
}
.service-more-toggle .label-less { display: none; }
.service-more-toggle[aria-expanded="true"] .label-more { display: none; }
.service-more-toggle[aria-expanded="true"] .label-less { display: inline; }
.service-more-toggle .chevron {
    transition: transform var(--transition);
    display: inline-block;
}
.service-more-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }

/* ---------- Garantien ---------- */
.section-guarantees {
    background: var(--color-espresso);
    color: var(--color-bg);
    padding: var(--gap-l) 0;
}
.section-guarantees .section-title {
    text-align: center;
    color: var(--color-bg);
}
.section-guarantees .section-lead {
    text-align: center;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    color: rgba(250,246,240,.7);
}
.guarantees-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2.5rem;
}
.guarantee-card {
    contain: layout style;
    position: relative;
    background: rgba(255,252,247,.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,252,247,.12);
    border-radius: var(--radius-l);
    padding: 2.4rem 2rem 2rem;
    text-align: center;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    overflow: hidden;
}
.guarantee-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-caramel), rgba(184,137,107,.3));
}
.guarantee-card:hover {
    transform: translateY(-4px);
    border-color: rgba(184,137,107,.35);
    box-shadow: 0 16px 48px rgba(0,0,0,.2);
}
.guarantee-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(184,137,107,.15);
    color: var(--color-caramel);
    margin-bottom: 1.2rem;
    transition: transform var(--transition);
}
.guarantee-card:hover .guarantee-icon {
    transform: scale(1.08);
}
.guarantee-icon svg {
    width: 28px;
    height: 28px;
}
.guarantee-title {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--color-bg);
    margin: 0 0 .75rem;
}
.guarantee-text {
    font-size: .9rem;
    line-height: 1.7;
    color: rgba(250,246,240,.7);
    margin: 0;
}
@media (max-width: 768px) {
    .guarantees-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .guarantee-card {
        padding: 2rem 1.5rem 1.8rem;
    }
}

/* ---------- Portfolio: horizontal scrollbares Mosaik (eine Wand) ---------- */
.ah-portfolio { background: var(--color-bg); padding-bottom: var(--gap-l); }

.portfolio-wall {
    width: 100%;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    padding: 0 4vw;
    margin-bottom: 1.6rem;
    position: relative;
    /* Sanftes Ausblenden an den Rändern */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4vw, #000 calc(100% - 4vw), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 4vw, #000 calc(100% - 4vw), transparent 100%);
}
.portfolio-wall.is-dragging { cursor: grabbing; }

.portfolio-wall-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Rows duerfen nicht auf parent-width stretchen */
    gap: 1rem;
    padding: 0;
    width: max-content;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    contain: style;
}
.portfolio-row {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    height: 240px;
    flex-shrink: 0;
    width: max-content;
}

.portfolio-tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-m);
    box-shadow: var(--glass-shadow);
    display: block;
    cursor: zoom-in;
    height: 100%;
    flex-shrink: 0;
    -webkit-user-drag: none;
    user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
}
.portfolio-tile.is-clone { cursor: zoom-in; }
.portfolio-tile:focus-visible {
    outline: 2px solid var(--color-caramel);
    outline-offset: 3px;
}
.portfolio-wall.is-dragging,
.portfolio-wall.is-dragging .portfolio-tile { cursor: grabbing !important; }
.portfolio-tile img {
    height: 100%;
    width: auto;
    display: block;
    transition: transform 1.4s cubic-bezier(.22,.61,.36,1);
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
    user-select: none;
}
.portfolio-tile:hover img { transform: scale(1.06); }
.portfolio-tile::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(45,32,24,.35));
    opacity: 0; transition: opacity var(--transition);
    pointer-events: none;
}
.portfolio-tile:hover::after { opacity: 1; }

.portfolio-hint {
    display: flex; justify-content: center; align-items: center;
    gap: .8rem;
    color: var(--color-muted);
    font-size: .85rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin-top: 1rem;
    opacity: .7;
}
.portfolio-hint .hint-arrow {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: var(--color-caramel);
}

@media (max-width: 880px) {
    .portfolio-wall-inner { gap: .6rem; }
    .portfolio-row { height: 200px; gap: .6rem; }
}
@media (max-width: 600px) {
    .portfolio-wall-inner { gap: .4rem; }
    .portfolio-row { height: 150px; gap: .4rem; }
    .portfolio-tile { border-radius: 6px; }
}

/* ---------- Social-Proof Zahlen ---------- */
.ah-stats {
    background: #3D2B1F;
    background: var(--color-espresso);
    color: #FAF6F0;
    color: var(--color-bg);
    padding: 4.5rem 0;
    padding: calc(var(--gap-m) + 1.5rem) 0;
}
.stats-head {
    text-align: center;
    margin-bottom: 3rem;
}
.stats-head .eyebrow {
    color: #B8896B;
    color: var(--color-caramel);
    opacity: .9;
}
.stats-head h2 {
    color: #FAF6F0;
    color: var(--color-bg);
    margin-top: .4rem;
}
.stats-head .lead {
    color: #FAF6F0;
    color: var(--color-bg);
    opacity: .75;
    max-width: 560px;
    margin: .8rem auto 0;
}
.stats-grid {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 1.8rem;
    flex-wrap: wrap;
}
.stat-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 200px;
    flex: 1 1 200px;
    max-width: 280px;
    background: rgba(255,252,247,.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,252,247,.08);
    border-radius: 14px;
    padding: 2.4rem 1.8rem 2rem;
    overflow: hidden;
    transition: transform .35s cubic-bezier(.22,.61,.36,1), background .35s ease, border-color .35s ease;
}
/* Caramel-Hairline oben als Akzent: in der Mitte voll deckend, zu den Raendern transparent */
.stat-item::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    width: 96px;
    height: 2px;
    background: #B8896B;
    background: linear-gradient(90deg, transparent 0%, var(--color-caramel) 50%, transparent 100%);
    transform: translateX(-50%);
    transition: width .35s cubic-bezier(.22,.61,.36,1);
}
.stat-item:hover {
    transform: translateY(-4px);
    background: rgba(255,252,247,.06);
    border-color: rgba(184,137,107,.25);
}
.stat-item:hover::before {
    width: 144px;
}
.stat-number {
    font-family: "Ibarra Real Nova", Georgia, serif;
    font-family: var(--font-serif);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: #B8896B;
    color: var(--color-caramel);
    letter-spacing: -.01em;
}
/* ---- Fußnoten zu den Zahlen (v6.67, ohne Verweisziffern seit v6.68) ----
   Die Section steht auf Espresso; var(--color-muted)/var(--color-line) waeren
   hier praktisch unsichtbar. Daher dieselben hellen Toene, die .stat-item und
   .stat-label ohnehin verwenden — gleiche Designsprache, lesbarer Kontrast.
   Die hochgestellten Verweisziffern (.stat-note-ref) sind entfallen: bei .34em
   direkt an einer 3rem grossen Zahl war der Groessenunterschied zu klein und der
   Abstand (.12em) zu gering, um als Hochstellung erkannt zu werden — die Ziffer
   las sich als letzte Stelle der Zahl. Wer sie je wieder einbauen will, braucht
   deutlich mehr Abstand, eine klar andere Farbe und eine Trennung (Klammer). */
.stats-notes {
    max-width: 44rem;
    margin: 2.4rem auto 0;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 252, 247, .14);
    color: #FAF6F0;
    color: var(--color-bg);
    font-size: .8rem;
    line-height: 1.65;
    text-align: center;
}
.stats-notes__summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    opacity: .75;
    transition: opacity var(--transition);
}
.stats-notes__summary::-webkit-details-marker { display: none; }
.stats-notes__summary:hover { opacity: 1; }
.stats-notes__summary::after {
    content: "";
    width: .45rem; height: .45rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform var(--transition);
}
.stats-notes[open] .stats-notes__summary::after {
    transform: rotate(225deg) translate(-1px, -1px);
}
/* Liste ohne Aufzaehlungszeichen: Die Zuordnung leistet seit v6.68 die
   vorangestellte Bezeichnung der Zahl (.stats-notes__ref), nicht mehr eine
   Nummerierung. */
.stats-notes__list {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
    opacity: .72;
}
.stats-notes__list li { margin-bottom: .55rem; }
.stats-notes__list li:last-child { margin-bottom: 0; }
.stats-notes__ref {
    font-weight: 600;
    color: #FAF6F0;
    color: var(--color-bg);
    letter-spacing: .01em;
}

.stat-label {
    font-size: .92rem;
    color: #FAF6F0;
    color: var(--color-bg);
    opacity: .82;
    margin-top: .8rem;
    letter-spacing: .03em;
    line-height: 1.35;
}
.stat-divider { display: none; }

@media (max-width: 600px) {
    .ah-stats { padding: 3rem 0; }
    .stats-head { margin-bottom: 2rem; }
    .stats-grid { gap: 1rem; }
    .stat-item {
        min-width: 0;
        flex: 1 1 calc(50% - .5rem);
        max-width: none;
        padding: 1.6rem 1rem 1.4rem;
    }
    .stat-number { font-size: 2.2rem; }
    .stat-label { font-size: .82rem; margin-top: .5rem; }
}

/* ---------- Verfügbarkeits-Element ---------- */
.ah-availability {
    max-width: 480px;
    margin: 2rem auto 0;
    text-align: center;
}
.availability-bar {
    width: 100%;
    height: 8px;
    background: #E8DCCA;
    background: var(--color-sand);
    border-radius: 4px;
    overflow: hidden;
}
.availability-fill {
    height: 100%;
    background: #B8896B;
    background: var(--color-caramel);
    border-radius: 4px;
    transition: width .6s ease;
}
.availability-info {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-top: .6rem;
    font-size: .85rem;
    color: #8A7A6A;
    color: var(--color-muted);
}
.availability-slots strong {
    color: #3D2B1F;
    color: var(--color-espresso);
}
.availability-full {
    color: var(--color-caramel-d);
    font-weight: 600;
}

/* Puls-Effekt bei hoher Auslastung */
@keyframes bar-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .6; }
}
.availability-fill.is-pulsing {
    animation: bar-pulse 2s ease-in-out infinite;
}

/* Countdown-Timer Styling (fuehrt die Espresso-Farbe der Slots-Zeile mit) */
.availability-countdown strong {
    color: #3D2B1F;
    color: var(--color-espresso);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-sans);
    letter-spacing: .03em;
}

/* Tickende Uhr vor dem Countdown-Text. Bewusst inline (kein flex):
   .availability-countdown ist ein <span> und selbst kein Flex-Container. */
.availability-clock {
    width: 1.7em;
    height: 1.7em;
    vertical-align: -.45em;
    margin-right: .45em;
    color: var(--color-caramel-d);
}

/* Ein Radius-Strich, der sich gut sichtbar dreht: eine Umdrehung je 5s.
   Der Zeiger bildet bewusst keine echten Sekunden ab - er signalisiert nur,
   dass Zeit laeuft, deshalb gleichmaessig statt in 1-Sekunden-Spruengen.
   transform-box:view-box + Origin in User-Units (8 8 = Mitte der viewBox):
   bei SVG-Kindern liegt transform-origin sonst auf 0 0, und fill-box scheitert
   an der Bounding-Box-Breite 0 einer senkrechten Linie. */
@keyframes ah-clock-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.availability-clock-hand {
    transform-box: view-box;
    transform-origin: 8px 8px;
    animation: ah-clock-spin 5s linear infinite;
    animation-play-state: paused; /* laeuft erst, wenn der Block im Blick ist */
}
.ah-availability.is-ticking .availability-clock-hand {
    animation-play-state: running;
}

/* ---------- Zwischen-CTA ---------- */
.section-cta {
    text-align: center;
    padding: var(--gap-m) 0;
}
.section-cta--secondary {
    padding-top: 0;
}

/* ---------- Ablauf / Process ---------- */
.ah-process { background: var(--color-bg); }
.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
    counter-reset: step;
}
.process-step {
    text-align: left;
    padding: 2rem 1.6rem;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-m);
    position: relative;
    transition: all var(--transition);
}
.process-step:hover { transform: translateY(-4px); }
.process-step .step-num {
    font-family: var(--font-serif);
    font-size: 3rem; font-weight: 300;
    color: var(--color-caramel);
    line-height: 1; display: block;
    margin-bottom: .6rem;
}
.process-step h4 { margin: .4rem 0 .6rem; }
.process-step p { color: var(--color-muted); font-size: .94rem; margin: 0; }
@media (max-width: 880px) { .process-steps { grid-template-columns: 1fr; } }

/* ---------- Keyword-Leiste (nach Hero, vor Kundenstimmen) ---------- */
/* Dunkler Espresso-Balken; der Hero laeuft per Verlauf am Unterrand nahtlos in
   diesen Balken aus (siehe .ah-hero::after). Drei Keywords je mit kurzer
   Zusatzzeile, getrennt durch feine Karamell-Haarlinien. */
.ah-keywords {
    background: var(--color-espresso);
    color: var(--color-bg);
    padding: 3rem 0;
    /* 1px Ueberlappung mit dem Hero, damit keine Sub-Pixel-Haarlinie entsteht */
    position: relative;
    z-index: 2;
    margin-top: -1px;
}
.keywords-overline {
    text-align: center;
    margin: 0 0 1.7rem;
    font-family: var(--font-sans);
    font-size: .98rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--color-caramel-light);
}
.keywords-bar {
    display: flex;
    justify-content: center;
    align-items: stretch;
}
.keyword-item {
    position: relative;
    flex: 1 1 0;
    max-width: 300px;
    padding: 0 2.2rem;
    text-align: center;
}
/* feine Karamell-Haarlinie zwischen den Spalten */
.keyword-item + .keyword-item::before {
    content: "";
    position: absolute; left: 0; top: 12%; bottom: 12%;
    width: 1px;
    background: rgba(184, 137, 107, .3);
}
.keyword-word {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.55rem;
    font-weight: 500;
    color: var(--color-bg);
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1.1;
    white-space: nowrap;
}
.keyword-sub {
    display: block;
    margin-top: .55rem;
    font-family: var(--font-sans);
    font-size: .82rem;
    line-height: 1.4;
    letter-spacing: .02em;
    color: rgba(250, 246, 240, .6);
}
/* Mobil: die drei Sektionen UNTEREINANDER, getrennt durch eine horizontale
   Karamell-Linie – so bleibt die Schrift gut lesbar (kein Quetschen in 3 Spalten). */
@media (max-width: 880px) {
    .ah-keywords { padding: 2.2rem 0; }
    .keywords-bar { flex-direction: column; align-items: stretch; }
    .keyword-item { flex: none; max-width: none; padding: 1.1rem 0; }
    .keyword-word { font-size: 1.5rem; letter-spacing: .05em; }
    .keyword-sub { font-size: .9rem; margin-top: .35rem; }
    .keyword-item + .keyword-item::before {
        left: 18%; right: 18%; top: 0; bottom: auto;
        width: auto; height: 1px;
    }
}

/* ---------- Testimonials, horizontales Drag-Karussell ---------- */
.ah-testimonials { background: var(--color-bg); }

.testimonials-carousel {
    width: 100%;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    padding: 0.4rem 0 0.2rem;
    /* sanftes Ausblenden an den Rändern */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4vw, #000 calc(100% - 4vw), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 4vw, #000 calc(100% - 4vw), transparent 100%);
}
.testimonials-carousel.is-dragging { cursor: grabbing; }

.testimonials-track {
    display: flex;
    /* stretch: alle Karten sind gleich hoch (= höchste Karte) – sowohl eingeklappt
       als auch (per globalem .is-expanded) gemeinsam ausgeklappt. */
    align-items: stretch;
    gap: 1.6rem;
    padding: 0 4vw;
    width: max-content;
    will-change: transform;
    /* GPU-Layer, verhindert Subpixel-Ruckeln */
    transform: translate3d(0, 0, 0);
}

.testimonial-card {
    contain: layout style;
    flex: 0 0 380px;
    max-width: 80vw;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-l);
    padding: 2.2rem;
    box-shadow: var(--glass-shadow);
    transition: transform var(--transition), box-shadow var(--transition);
    display: flex;
    flex-direction: column;
    min-height: 240px;
}
.testimonials-carousel:not(.is-dragging) .testimonial-card:hover {
    transform: translateY(-4px);
}

/* Zitat-Bereich: fuellt den Platz ueber dem Autor. Der Text sitzt immer oben; lange
   Zitate werden auf ~6 Zeilen geklappt und per "Mehr lesen" in einem Overlay geoeffnet. */
.testimonial-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.testimonial-quote {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--color-text);
    margin: 0;
    font-style: italic;
    /* Standardmäßig auf ~6 Zeilen einklappen; per JS wird bei Überlauf ein
       "Mehr lesen"-Button ergänzt, der die volle Stimme im Overlay öffnet. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
}
.testimonial-more {
    align-self: flex-start;
    /* direkt in der naechsten Zeile nach dem Zitat, ohne grossen Abstand */
    margin: .4rem 0 0;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    /* gleicher Stil wie der Zitattext: Serife, kursiv, gleiche Groesse -> einheitlich */
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-style: italic;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--color-caramel);
    transition: color var(--transition);
}
.testimonial-more:hover { color: var(--color-caramel-d); text-decoration: underline; }
.testimonial-quote::before {
    content: "\00AB";
    font-family: var(--font-sans);
    font-style: normal;
    font-size: 2rem; line-height: 0;
    vertical-align: -0.3rem;
    color: var(--color-caramel); margin-right: .3rem;
}

.testimonial-author {
    display: flex; align-items: center; gap: .8rem;
    border-top: 1px solid var(--color-line);
    padding-top: 1rem;
}
.testimonial-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    -webkit-user-drag: none;
    user-drag: none;
}
.testimonial-avatar--initials {
    display: inline-flex;
    align-items: center; justify-content: center;
    background: linear-gradient(135deg, #B8896B, #3D2B1F);
    color: #FBF7F2;
    font-family: var(--font-serif);
    font-size: 1rem;
    letter-spacing: .04em;
    font-weight: 500;
}
.testimonial-author .name { font-weight: 500; color: var(--color-espresso); }
.testimonial-author .meta { font-size: .85rem; color: var(--color-muted); }

/* Karten sind klickbar (oeffnen die Lightbox, wie Portfolio-Kacheln) */
.testimonials-carousel .testimonial-card { cursor: pointer; }

/* ----- Kundenstimmen-Lese-Overlay (Lightbox fuer lange Zitate) ----- */
.ah-tmodal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(30, 20, 12, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
}
.ah-tmodal.is-open {
    opacity: 1;
    visibility: visible;
}
.ah-tmodal-dialog {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 2.5rem;
    /* helle, fast weisse Lesekarte (opak) statt Glas – wirkt nicht ausgegraut */
    background: #FDFBF8;
    border: 1px solid rgba(61, 43, 31, 0.06);
    border-radius: var(--radius-l);
    box-shadow: 0 24px 60px rgba(30, 20, 12, 0.35);
    /* Eingangs-Animation macht jetzt JS (FLIP-Zoom aus der Karte) */
    transform-origin: center center;
    will-change: transform;
}
/* Steuerelemente sind absolut positioniert (nicht Teil des Flex-Centerings) */
.ah-tmodal-close {
    position: absolute;
    top: 1rem;
    right: 1.2rem;
    z-index: 2;
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(250, 246, 240, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--color-espresso);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: color var(--transition), background var(--transition);
}
.ah-tmodal-close:hover { color: var(--color-caramel-d); background: #fff; }
.ah-tmodal-prev, .ah-tmodal-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(250, 246, 240, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    color: var(--color-espresso);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: background var(--transition), color var(--transition);
}
.ah-tmodal-prev { left: 1rem; }
.ah-tmodal-next { right: 1rem; }
.ah-tmodal-prev:hover, .ah-tmodal-next:hover { background: #fff; color: var(--color-caramel-d); }
.ah-tmodal-counter {
    position: absolute;
    top: 1.3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: var(--color-bg);
    font-family: var(--font-sans);
    font-size: .85rem;
    letter-spacing: .12em;
    opacity: .85;
}
.ah-tmodal-close svg,
.ah-tmodal-prev svg,
.ah-tmodal-next svg { width: 56%; height: 56%; display: block; }
/* optischer Ausgleich der Chevrons (leicht nach aussen) */
.ah-tmodal-prev svg { transform: translateX(-1.5px); }
.ah-tmodal-next svg { transform: translateX(1.5px); }
.ah-tmodal-quote {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    line-height: 1.65;
    font-style: italic;
    color: var(--color-text);
    margin: .5rem 0 0;
}
.ah-tmodal-quote::before {
    content: "\00AB";
    font-family: var(--font-sans);
    font-style: normal;
    font-size: 2.4rem;
    line-height: 0;
    vertical-align: -0.35rem;
    color: var(--color-caramel);
    margin-right: .35rem;
}
.ah-tmodal-author {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--color-line);
}
.ah-tmodal-author .ah-tmodal-name { font-weight: 500; color: var(--color-espresso); }
.ah-tmodal-author .ah-tmodal-meta { font-size: .85rem; color: var(--color-muted); }
.ah-tmodal-avatar.testimonial-avatar--initials { font-size: 1rem; }

@media (max-width: 600px) {
    .ah-tmodal { padding: 1rem; align-items: center; }
    .ah-tmodal-dialog { padding: 1.8rem 1.4rem; max-height: 84vh; }
    .ah-tmodal-quote { font-size: 1.12rem; }
    /* Pfeile als Paar unten-mittig (Daumenregion), damit sie den Text nicht ueberdecken */
    .ah-tmodal-prev, .ah-tmodal-next {
        top: auto; bottom: 1rem; transform: none;
        width: 2.6rem; height: 2.6rem; font-size: 1.6rem;
    }
    .ah-tmodal-prev { left: calc(50% - 3.6rem); }
    .ah-tmodal-next { right: calc(50% - 3.6rem); }
    .ah-tmodal-close { width: 2.3rem; height: 2.3rem; font-size: 1.5rem; top: .8rem; right: .8rem; }
    .ah-tmodal-counter { top: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ah-tmodal,
    .ah-tmodal-dialog { transition: none; }
    .ah-tmodal-dialog { transform: none; }
}

.testimonials-hint {
    display: flex; justify-content: center; align-items: center;
    gap: .8rem;
    color: var(--color-muted);
    font-size: .85rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin-top: 1.2rem;
    opacity: .7;
}
.testimonials-hint .hint-arrow {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: var(--color-caramel);
}

@media (max-width: 880px) {
    .testimonial-card { flex-basis: 320px; padding: 1.8rem; min-height: 220px; }
    .testimonials-track { gap: 1rem; }
}

/* ---------- Tipps für dein Shooting (Accordion-Liste) ---------- */
.ah-tips { background: var(--color-bg); }
.tips-list { max-width: 820px; margin: 0 auto; }
.tip-item {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-m);
    margin-bottom: .7rem;
    overflow: hidden;
    transition: all var(--transition);
}
.tip-item summary {
    padding: 1.1rem 1.4rem;
    cursor: pointer;
    list-style: none;
    display: flex; align-items: center; gap: 1rem;
    color: var(--color-espresso);
}
.tip-item summary::-webkit-details-marker { display: none; }
.tip-item .tip-num {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--color-caramel);
    min-width: 2.4rem;
    line-height: 1;
}
.tip-item .tip-title {
    flex: 1;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height: 1.3;
}
.tip-item summary::after {
    content: "+";
    font-family: var(--font-sans);
    font-size: 1.4rem; font-weight: 300;
    color: var(--color-caramel);
    transition: transform var(--transition);
}
.tip-item[open] summary::after { transform: rotate(45deg); }
.tip-content {
    padding: 0 1.4rem 1.3rem 4.2rem;
    color: var(--color-muted);
    line-height: 1.6;
}
@media (max-width: 600px) {
    .tip-item summary { padding: 1rem 1.1rem; gap: .7rem; }
    .tip-item .tip-num { font-size: 1.15rem; min-width: 1.8rem; }
    .tip-item .tip-title { font-size: .98rem; }
    .tip-content { padding: 0 1.1rem 1.1rem 3.6rem; }
}

/* ---------- FAQ ---------- */
.ah-faq { background: var(--color-cream); }
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
    contain: layout style;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-m);
    margin-bottom: .9rem;
    overflow: hidden;
    transition: all var(--transition);
}
.faq-item summary {
    padding: 1.3rem 1.6rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--color-espresso);
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    font-family: var(--font-sans);
    font-size: 1.6rem; font-weight: 300;
    color: var(--color-caramel);
    transition: transform var(--transition);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-content {
    padding: 0 1.6rem 1.6rem;
    color: var(--color-muted);
}

/* ---------- Kontakt ---------- */
.ah-contact { background: var(--color-bg); }
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--gap-l);
    align-items: start;
}
.contact-intro h2 { margin-bottom: 1.2rem; }
.contact-info {
    list-style: none; padding: 0; margin: 2rem 0;
}
.contact-info li {
    padding: .8rem 0;
    border-top: 1px solid var(--color-line);
    display: flex; gap: 1rem; align-items: center;
    font-size: .98rem;
}
.contact-info li:last-child { border-bottom: 1px solid var(--color-line); }
.contact-info .label {
    font-size: .78rem; letter-spacing: .15em; text-transform: uppercase;
    color: var(--color-caramel); min-width: 110px;
}

/* Tabs für die zwei Formulare */
.contact-tabs {
    display: flex; gap: .4rem; margin-bottom: 1.6rem;
}
.contact-tabs button {
    flex: 1;
    background: transparent; border: 1px solid var(--color-line);
    padding: .8rem 1rem;
    border-radius: var(--radius-s);
    font-family: var(--font-sans); font-size: .92rem;
    color: var(--color-muted);
    cursor: pointer; transition: all var(--transition);
}
.contact-tabs button.is-active {
    background: var(--color-espresso); color: #FAF6F0; border-color: var(--color-espresso);
}

.contact-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-l);
    padding: 2.4rem;
    box-shadow: var(--glass-shadow);
}
.contact-form .field {
    margin-bottom: 1.2rem;
}
.contact-form label {
    display: block;
    font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--color-caramel); font-weight: 500;
    margin-bottom: .4rem;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    background: rgba(255,255,255,.6);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-s);
    padding: .9rem 1rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--color-text);
    transition: all var(--transition);
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: none;
    border-color: var(--color-caramel);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(184,137,107,.12);
}
.contact-form textarea { min-height: 140px; resize: vertical; }

/* Vom Popup-CTA vorbefuellter Aktionscode: kurz hervorheben, damit er nicht
   uebersehen wird. Klasse wird per JS entfernt, sobald der Besucher tippt. */
.contact-form textarea.is-prefilled {
    border-color: var(--color-caramel);
    background: #FFFBF6;
}

/* Multi-Step */
.wizard-progress {
    display: flex; gap: .4rem; margin-bottom: 2rem;
}
.wizard-progress span {
    flex: 1; height: 3px; border-radius: 2px;
    background: var(--color-line);
    transition: background var(--transition);
}
.wizard-progress span.is-active,
.wizard-progress span.is-done { background: var(--color-caramel); }
.wizard-step { display: none; }
.wizard-step.is-active { display: block; animation: fadeUp .4s ease-out; }
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.wizard-step h4 { margin-bottom: .4rem; }
.wizard-step .step-hint { color: var(--color-muted); font-size: .92rem; margin-bottom: 1.4rem; }

.choice-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem;
    margin-bottom: 1.4rem;
}
.choice-grid label {
    display: flex; align-items: center; gap: .6rem;
    padding: 1rem 1.2rem;
    background: rgba(255,255,255,.6);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: all var(--transition);
    text-transform: none; letter-spacing: 0; color: var(--color-text); font-weight: 400;
    font-size: .98rem;
    margin-bottom: 0;
}
.choice-grid label:hover { background: rgba(255,255,255,.85); border-color: var(--color-caramel); }
.choice-grid input[type="radio"]:checked + label,
.choice-grid label.is-checked {
    background: var(--color-espresso); color: #FAF6F0; border-color: var(--color-espresso);
}
.choice-grid input { display: none; }

.wizard-actions {
    display: flex; justify-content: space-between; gap: .8rem; margin-top: 1.6rem;
}
.wizard-actions .btn-prev { visibility: hidden; }
.wizard-step.is-active.show-prev .btn-prev { visibility: visible; }

/* Datenschutzhinweis ueber den Absenden-Buttons (Art. 13 DSGVO, siehe
   ah_privacy_note() in template-tags.php). Klein und gedaempft, aber bewusst
   NICHT ausgegraut/versteckt - die Information muss lesbar bleiben. */
.form-privacy-note {
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-muted);
    margin: .8rem 0 1rem;
}
.form-privacy-note a { color: var(--color-caramel); text-decoration: underline; }
.form-privacy-note a:hover { color: var(--color-caramel-d); }

.form-feedback {
    margin-top: 1rem;
    padding: 1rem 1.2rem;
    border-radius: var(--radius-s);
    font-size: .94rem;
    display: none;
}
.form-feedback.is-success { display: block; background: #E8F0E5; color: #3A5A2C; }
.form-feedback.is-error   { display: block; background: #F4E1DD; color: #7A3A2A; }

@media (max-width: 880px) {
    .contact-grid { grid-template-columns: 1fr; }
    .choice-grid { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--color-espresso);
    color: rgba(250,246,240,.85);
    padding: var(--gap-xl) 0 var(--gap-m);
    margin-top: var(--gap-l);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap: var(--gap-l);
    margin-bottom: var(--gap-l);
}
.site-footer h4 {
    color: #FAF6F0;
    font-family: var(--font-serif);
    font-weight: 400;
    margin-bottom: 1.2rem;
}
.site-footer .brand-line {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    color: #FAF6F0;
    margin-bottom: 1rem;
}
.site-footer p { color: rgba(250,246,240,.7); }
.footer-contact li { padding: .35rem 0; color: rgba(250,246,240,.85); }
.footer-contact a { color: rgba(250,246,240,.85); }
.footer-contact a:hover { color: var(--color-caramel); }

.social-icons { display: flex; gap: .8rem; margin-top: 1rem; }
.social-icons a {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(250,246,240,.08);
    display: grid; place-items: center;
    color: #FAF6F0;
    transition: all var(--transition);
}
.social-icons a:hover { background: var(--color-caramel); transform: translateY(-2px); }

.footer-newsletter input {
    width: 100%;
    background: rgba(250,246,240,.08);
    border: 1px solid rgba(250,246,240,.15);
    color: #FAF6F0;
    padding: .8rem 1rem;
    border-radius: var(--radius-s);
    margin-bottom: .6rem;
    font-family: var(--font-sans);
}
.footer-newsletter input::placeholder { color: rgba(250,246,240,.5); }
.footer-newsletter .btn {
    background: var(--color-caramel); color: #fff; border: none;
    padding: .8rem 1.4rem; border-radius: var(--radius-s);
    font-family: var(--font-sans); cursor: pointer;
    transition: all var(--transition);
}
.footer-newsletter .btn:hover { background: var(--color-caramel-d); }
/* Footer ist dunkel (Espresso-Hintergrund) - der Datenschutzhinweis braucht
   dort helle statt dunkle gedaempfte Farbe, sonst waere er kaum lesbar. */
.footer-newsletter .form-privacy-note { color: rgba(250,246,240,.6); margin: .2rem 0 .8rem; }
.footer-newsletter .form-privacy-note a { color: rgba(250,246,240,.9); }
.footer-newsletter .form-privacy-note a:hover { color: var(--color-caramel); }

.footer-bottom {
    border-top: 1px solid rgba(250,246,240,.1);
    padding-top: 1.6rem;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 1rem;
    font-size: .85rem;
    color: rgba(250,246,240,.6);
}
.footer-bottom ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; gap: 1.6rem; flex-wrap: wrap;
}
.footer-bottom a { color: rgba(250,246,240,.7); }

@media (max-width: 880px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; text-align: center; }
}

/* ---------- Blog / Single ---------- */
.page-hero {
    padding: 12rem 0 4rem;
    text-align: center;
    background: linear-gradient(180deg, var(--color-cream) 0%, var(--color-bg) 100%);
}
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
}
.post-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-l);
    overflow: hidden;
    transition: all var(--transition);
    box-shadow: var(--glass-shadow);
}
.post-card:hover { transform: translateY(-6px); }
.post-card .thumb {
    aspect-ratio: 4/3;
    overflow: hidden;
}
.post-card .thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.2s ease;
}
.post-card:hover .thumb img { transform: scale(1.05); }
.post-card-body { padding: 1.6rem 1.8rem 2rem; }
.post-card .meta {
    font-size: .78rem; letter-spacing: .15em;
    text-transform: uppercase; color: var(--color-caramel);
    margin-bottom: .6rem;
}
.post-card h3 { font-size: 1.3rem; margin-bottom: .6rem; }
.post-card .excerpt { color: var(--color-muted); font-size: .94rem; margin-bottom: 1.2rem; }
.post-card .read-more {
    font-size: .9rem; font-weight: 500;
    color: var(--color-espresso);
    border-bottom: 1px solid var(--color-caramel);
    padding-bottom: 2px;
}
@media (max-width: 880px) { .blog-grid { grid-template-columns: 1fr; } }

/* Single Post */
.single-post-content {
    max-width: 760px; margin: 0 auto;
    padding: 6rem 0;
}
.single-post-content h1 { font-size: clamp(2rem, 4vw, 3.4rem); margin-bottom: 1.4rem; }
.single-post-content .meta {
    color: var(--color-caramel);
    font-size: .82rem; letter-spacing: .15em; text-transform: uppercase;
    margin-bottom: 2rem; display: block;
}
.single-post-content .featured-image {
    margin: 2rem 0 3rem;
    border-radius: var(--radius-l);
    overflow: hidden;
}
.single-post-content p,
.single-post-content ul,
.single-post-content ol { font-size: 1.08rem; }
.single-post-content blockquote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.4rem;
    border-left: 3px solid var(--color-caramel);
    padding: .4rem 0 .4rem 1.6rem;
    margin: 2rem 0;
    color: var(--color-espresso);
}

/* Pagination */
.pagination {
    display: flex; justify-content: center; gap: .4rem;
    margin-top: var(--gap-l);
}
.pagination a, .pagination span {
    padding: .6rem 1rem;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-s);
    color: var(--color-espresso);
    font-size: .9rem;
}
.pagination .current { background: var(--color-espresso); color: #FAF6F0; }

/* 404 */
.error-404 { padding: 14rem 0 8rem; text-align: center; }
.error-404 .big {
    font-family: var(--font-serif);
    font-size: clamp(6rem, 18vw, 14rem);
    color: var(--color-caramel);
    line-height: 1; margin-bottom: 1rem;
    opacity: .7;
}

/* Scroll Reveal
   Standard: sichtbar – damit Inhalt ohne JS / bei langsamem JS sofort da ist.
   Versteckt wird nur, wenn JS bestaetigt ist (.js, per Inline-Skript im <head>).
   Failsafe: falls das (deferred) main.js verzoegert ist, wird nach 2 s trotzdem
   eingeblendet, auch ohne den IntersectionObserver. */
.reveal {
    opacity: 1;
    transform: none;
}
.js .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 800ms ease, transform 800ms cubic-bezier(.22,.61,.36,1);
    animation: ah-reveal-safety 1ms linear 2000ms forwards;
}
.js .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    animation: none;
}
@keyframes ah-reveal-safety {
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; animation: none; }
}

/* Utilities */
.text-center { text-align: center; }
.mt-l { margin-top: var(--gap-l); }
/* Visually-hidden (Screenreader-only) - genutzt von Suchformular-Label und Formular-Legenden */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px; width: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    position: absolute !important;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background-color: #fff;
    clip: auto !important;
    clip-path: none;
    color: var(--color-espresso);
    display: block;
    height: auto; width: auto;
    padding: 1rem 1.5rem;
    left: 5px; top: 5px;
    z-index: 100000;
    border-radius: 6px;
}
/* (Frueher dupliziertes prefers-reduced-motion entfernt - der vollstaendige Block steht im Reset/Base oben.) */


/* ---------- Saisonales Popup ---------- */
.ah-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(61, 43, 31, .28);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.ah-popup-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}
.ah-popup-modal {
    position: relative;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 20px;
    max-width: 480px;
    width: 100%;
    overflow: hidden;
    box-shadow:
        0 32px 80px rgba(61, 43, 31, .22),
        inset 0 1px 0 rgba(255, 255, 255, .85);
    transform: translateY(20px) scale(.96);
    transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.ah-popup-overlay.is-visible .ah-popup-modal {
    transform: translateY(0) scale(1);
}
.ah-popup--has-image {
    max-width: 520px;
}
.ah-popup-image {
    width: 100%;
    max-height: 220px;
    overflow: hidden;
}
.ah-popup-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}
.ah-popup-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(61,43,31,.08);
    color: var(--color-espresso);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    z-index: 2;
}
.ah-popup-close:hover {
    background: rgba(61,43,31,.15);
}
.ah-popup-content {
    padding: 2rem 2rem 2.2rem;
    text-align: center;
}
.ah-popup-badge {
    display: inline-block;
    background: var(--color-espresso);
    color: var(--color-bg);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .35rem .9rem;
    border-radius: 20px;
    margin-bottom: 1rem;
}
.ah-popup-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-espresso);
    margin: 0 0 .75rem;
}
.ah-popup-text {
    font-size: .95rem;
    line-height: 1.6;
    color: var(--color-muted);
    margin: 0 0 1rem;
}
.ah-popup-offer {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-caramel);
    margin: 0 0 1.4rem;
}
.ah-popup-cta {
    display: inline-block;
    width: auto;
    padding: .85rem 2rem;
}
@media (max-width: 500px) {
    .ah-popup-modal { border-radius: 12px; }
    .ah-popup-content { padding: 1.5rem 1.25rem 1.8rem; }
    .ah-popup-title { font-size: 1.3rem; }
}

/* ---------- Lightbox / Bildvergroesserung ---------- */
/* ---------- Tipps-Slider Bildbox ---------- */
.tipps-slider-box {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(45, 32, 24, 0.15);
}
.tipps-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.tipps-slide.is-active {
    opacity: 1;
}
.tipps-slider-dots {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: .5rem;
    z-index: 2;
}
.tipps-slider-dots button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 252, 247, 0.7);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all 300ms ease;
}
.tipps-slider-dots button.is-active {
    background: #FAF6F0;
    border-color: #FAF6F0;
}
.tipps-slider-dots button:hover {
    background: rgba(255, 252, 247, 0.5);
}
@media (max-width: 600px) {
    .tipps-slider-box {
        border-radius: 8px;
        aspect-ratio: 4 / 3;
    }
}

.ah-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(45, 32, 24, 0.92);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    cursor: zoom-out;
    opacity: 0;
    transition: opacity 350ms ease;
}
.ah-lightbox.is-open {
    display: flex;
    opacity: 1;
}
.ah-lightbox img {
    /* schmaler als der Viewport, damit die seitlichen Pfeile NEBEN dem Bild
       Platz haben (auch bei Querformat), statt darueber zu liegen */
    max-width: calc(100vw - 12rem);
    max-height: 88vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    transform: scale(.96);
    transition: transform 350ms cubic-bezier(.22,.61,.36,1);
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
    touch-action: none;
    cursor: grab;
}
.ah-lightbox img:active {
    cursor: grabbing;
}
.ah-lightbox.is-open img { transform: scale(1); }
.ah-lightbox-close {
    position: absolute;
    /* weiter oben, optisch auf einer Linie mit der Bildanzahl (Counter top:1rem) */
    top: 0.4rem;
    right: 1.6rem;
    z-index: 11;
    background: rgba(255, 252, 247, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 252, 247, 0.3);
    color: #FAF6F0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    line-height: 1;
    cursor: pointer;
    transition: all 300ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* SVG-Icons zentrieren perfekt (statt Text-Glyphen ‹ › ×) */
.ah-lightbox-close svg,
.ah-lightbox-prev svg,
.ah-lightbox-next svg { width: 56%; height: 56%; display: block; }
/* Optischer Ausgleich: Chevrons haben ihr Gewicht auf der offenen Seite,
   daher minimal nach aussen (Richtung Spitze) ruecken, damit sie mittig wirken. */
.ah-lightbox-prev svg { transform: translateX(-1.5px); }
.ah-lightbox-next svg { transform: translateX(1.5px); }
.ah-lightbox-close:hover {
    background: rgba(255, 252, 247, 0.3);
    transform: scale(1.06);
}
.ah-lightbox-prev,
.ah-lightbox-next {
    position: absolute;
    /* Desktop: seitlich neben dem Bild, vertikal mittig */
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 252, 247, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 252, 247, 0.25);
    color: #FAF6F0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    transition: all 300ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.ah-lightbox-prev { left: 1.6rem; }
.ah-lightbox-next { right: 1.6rem; }
.ah-lightbox-prev:hover,
.ah-lightbox-next:hover {
    background: rgba(255, 252, 247, 0.3);
    transform: translateY(-50%) scale(1.1);
}
/* ---------- Mobile Quick-CTA-Bar ---------- */
.ah-mobile-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 120; /* ueber dem Nav-Panel (110), damit der Menue-Toggle als Schliessen-Control tappbar bleibt */
    display: none;
    align-items: center;
    gap: .5rem;
    padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
    background: rgba(255, 252, 247, .85);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border-top: 1px solid rgba(61, 43, 31, .12);
    box-shadow: 0 -8px 28px rgba(61, 43, 31, .08);
    /* backdrop-filter gehoert seit v6.69 mit in die Ueberblendung: sonst schaltet
       der Weichzeichner der Leiste beim Oeffnen des Menues schlagartig ab – das war
       der zweite harte Sprung im selben Frame wie der Backdrop. */
    transition:
        background .25s ease,
        box-shadow .25s ease,
        border-top-color .25s ease,
        -webkit-backdrop-filter .25s ease,
        backdrop-filter .25s ease;
}
/* Bei offenem Menue: Leiste transparent, nur der X-Toggle bleibt ueber dem Panel sichtbar */
body.nav-open .ah-mobile-cta {
    background: transparent;
    border-top-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: blur(0px) saturate(100%);
    backdrop-filter: blur(0px) saturate(100%);
}
/* v6.69: Die drei Buttons weichen weich nach unten, statt per display:none in
   einem Frame zu verschwinden. Derselbe Mechanismus wie beim Einklappen ab dem
   Kontaktbereich (body.ah-cta-collapsed, v6.67) – die Uebergangszeiten dafuer
   haengen am Grundzustand und gelten damit in beide Richtungen. */
body.nav-open .ah-mobile-cta__call,
body.nav-open .ah-mobile-cta__primary,
body.nav-open .ah-mobile-cta__whatsapp {
    opacity: 0;
    transform: translateY(130%);
    pointer-events: none;
}

/* ---- v6.67: Ab dem Kontaktbereich klappt die Leiste ein ----
   Termin/Anrufen/WhatsApp weichen weich nach unten, der Leistenhintergrund wird
   transparent, der Burger bleibt als kleiner runder Knopf am rechten Rand tippbar.
   Der Zustand "Menue offen" hat Vorrang -> :not(.nav-open), damit die Leiste bei
   geoeffnetem Menue normal bedienbar bleibt. */
body.ah-cta-collapsed:not(.nav-open) .ah-mobile-cta {
    background: transparent;
    border-top-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: none; /* die Leiste selbst faengt keine Taps mehr ab */
}
body.ah-cta-collapsed:not(.nav-open) .ah-mobile-cta__primary,
body.ah-cta-collapsed:not(.nav-open) .ah-mobile-cta__call,
body.ah-cta-collapsed:not(.nav-open) .ah-mobile-cta__whatsapp {
    opacity: 0;
    transform: translateY(130%);
    pointer-events: none;
}
body.ah-cta-collapsed:not(.nav-open) .ah-mobile-cta__menu {
    pointer-events: auto; /* Burger bleibt tippbar */
    width: 42px; height: 42px;
    background: rgba(255, 252, 247, .88);
    box-shadow: 0 4px 16px rgba(61, 43, 31, .18);
    border: 1px solid rgba(61, 43, 31, .10);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
}
.ah-mobile-cta__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .85rem 1rem;
    font-size: .9rem;
    font-weight: 500;
    border-radius: 999px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .2s ease;
}
.ah-mobile-cta__btn:active { transform: scale(.97); }
.ah-mobile-cta__call {
    background: rgba(61, 43, 31, .08);
    color: var(--color-espresso);
    flex: 0 0 auto;
    padding: .85rem 1.1rem;
}
.ah-mobile-cta__primary {
    background: var(--color-espresso);
    color: #FAF6F0;
    box-shadow: 0 6px 18px rgba(61, 43, 31, .22);
}
/* Weiches, symmetrisches Ein-/Ausklappen (v6.67) — gilt fuer beide Richtungen,
   weil die Uebergangszeiten am Grundzustand haengen, nicht am eingeklappten. */
.ah-mobile-cta__primary,
.ah-mobile-cta__call,
.ah-mobile-cta__whatsapp {
    transition: transform .28s ease, opacity .28s ease, box-shadow .2s ease;
}
/* Menue-Toggle als rechtes Element der Leiste (Daumenregion) */
.ah-mobile-cta__menu {
    margin-left: auto;
    flex: 0 0 auto;
    display: flex;
    width: 46px; height: 46px;
    background: rgba(61, 43, 31, .08);
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: width .28s ease, height .28s ease, background .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.ah-mobile-cta__menu span { background: var(--color-espresso); }
@media (max-width: 880px) {
    .ah-mobile-cta { display: flex; }
    body.ah-onepager { padding-bottom: 4.5rem; transition: padding-bottom .28s ease; }
    /* Eingeklappt braucht nur noch der kleine Burger Platz (v6.67) */
    body.ah-onepager.ah-cta-collapsed:not(.nav-open) { padding-bottom: 3.2rem; }
}

/* ===================================================================
   Komfort-Funktionen (v6.35)
   =================================================================== */

/* WhatsApp-Button in der Mobile-Leiste */
.ah-mobile-cta__whatsapp {
    background: #25D366;
    color: #fff;
    flex: 0 0 auto;
    padding: .85rem 1.1rem;
}

/* Desktop: persistenter "Termin sichern"-Button im Header */
.header-cta { display: none; }
@media (min-width: 881px) {
    .header-cta {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        margin-left: 1.6rem;
        padding: .6rem 1.3rem;
        border-radius: 999px;
        background: var(--color-espresso);
        color: #FAF6F0;
        font-size: .85rem;
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
        flex: 0 0 auto;
        transition: transform .15s ease, box-shadow .2s ease;
    }
    .header-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(61,43,31,.22); }
    .header-cta svg { width: 14px; height: 14px; }
}

/* Scroll-Spy: aktiver Menuepunkt (nutzt die vorhandene Unterstrich-Animation) */
.primary-nav a.is-active::after { width: 100%; }

/* Scroll-Fortschrittsleiste am oberen Rand */
.ah-scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px; width: 0;
    background: var(--color-caramel);
    z-index: 200;
    transition: width .08s linear;
    pointer-events: none;
}

/* Nach-oben-Button (FAB) */
.ah-to-top {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(61,43,31,.15);
    background: rgba(255,252,247,.9);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    color: var(--color-espresso);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(61,43,31,.15);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    z-index: 115;
}
.ah-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
/* Bei geöffnetem Mobil-Menü ausblenden: der Button (z-index 115) lag sonst über
   dem Nav-Panel (110) und schwebte sichtbar auf der Sidebar. Höhere Spezifität als
   .ah-to-top.is-visible, gewinnt also unabhängig von der Reihenfolge. */
body.nav-open .ah-to-top { opacity: 0; visibility: hidden; pointer-events: none; }
.ah-to-top svg { width: 20px; height: 20px; }
/* Auf Mobile oberhalb der unteren Aktionsleiste platzieren */
@media (max-width: 880px) {
    .ah-to-top { bottom: calc(4.8rem + env(safe-area-inset-bottom)); }
}

/* Lightbox-Bildzaehler */
.ah-lightbox-counter {
    position: absolute;
    top: 1rem; left: 1rem;
    color: #fff;
    font-size: .9rem;
    letter-spacing: .03em;
    background: rgba(0,0,0,.35);
    padding: .25rem .7rem;
    border-radius: 999px;
    z-index: 2;
    pointer-events: none;
}

/* Formular: Lade- und Erfolgs-Animation */
.btn.is-loading { opacity: .7; cursor: progress; }
.form-feedback.is-success {
    display: flex; align-items: center; gap: .5rem;
    animation: ah-fb-in .35s cubic-bezier(.22,.61,.36,1);
}
.form-feedback .ah-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; flex: 0 0 22px;
    border-radius: 50%;
    background: #2e7d4f; color: #fff;
}
.form-feedback .ah-check svg { width: 14px; height: 14px; }
@keyframes ah-fb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Hero: langsamer Zoom mit leichtem Schwenk. Seit v6.70 wieder JE BILD ueber
   dessen Anzeigedauer (7,6 s = 6 s Standzeit + 1,6 s Ueberblendung), siehe
   .hero-slide.is-active/.is-leaving .hero-img weiter oben.
   Die Untergrenze 1.06 ist kein Zufall: In der Variante "staged" skaliert
   .hero-slider im eingeblendeten Zustand auf 0.99 herunter, erst beide Ebenen
   zusammen halten die Bildflaeche sicher ueber 100 % (0.99 x 1.06 = 1.049) –
   sonst wuerde die weichgezeichnete Kante am Rand durchscheinen. Die Amplitude
   von 0.06 entspricht dem Eindruck bis v6.68. */
@keyframes ah-kenburns {
    from { transform: scale(1.06) translate(0, 0); }
    to   { transform: scale(1.12) translate(-.9%, -.7%); }
}

/* Blur-up: sanftes Einblenden statischer Inhaltsbilder (per JS aktiviert, ohne JS normal sichtbar) */
.ah-img-fade {
    opacity: 0;
    filter: blur(12px);
    transform: scale(1.02);
    transition: opacity .7s ease, filter .7s ease, transform .7s ease;
}
.ah-img-fade.is-loaded {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

/* Schwebendes Verfuegbarkeits-Badge */
.ah-avail-badge {
    position: fixed;
    z-index: 125;
    display: flex;
    align-items: center;
    gap: .4rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s, transform .3s ease;
}
.ah-avail-badge.is-visible { opacity: 1; visibility: visible; }
.ah-avail-badge__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: inherit;
    font-weight: 500;
}
.ah-avail-badge__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #3fae6a;
    flex: 0 0 8px;
    animation: ah-badge-pulse 2.2s infinite;
}
/* Ausgebucht: kein gruener, pulsierender Punkt (signalisiert "noch frei"),
   sondern dieselbe warme Karamell-Farbe wie der "ausgebucht"-Text im
   Buchungsbalken (.availability-full, main.css ~1731). Puls faellt weg,
   da das Pulsieren "jetzt zugreifen, noch offen" suggeriert. */
.ah-avail-badge.is-full .ah-avail-badge__dot {
    background: var(--color-caramel-d);
    animation: none;
}
.ah-avail-badge__close {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: .6;
    font-size: 1.15rem;
    line-height: 1;
    padding: 0 .15rem;
}
.ah-avail-badge__close:hover { opacity: 1; }
@keyframes ah-badge-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(63,174,106,.5); }
    70%  { box-shadow: 0 0 0 7px rgba(63,174,106,0); }
    100% { box-shadow: 0 0 0 0 rgba(63,174,106,0); }
}

/* Desktop: Pille oben rechts unter dem Header */
@media (min-width: 881px) {
    .ah-avail-badge {
        top: 5.5rem; right: 1.2rem;
        background: rgba(255,252,247,.92);
        -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
        border: 1px solid rgba(61,43,31,.12);
        box-shadow: 0 8px 24px rgba(61,43,31,.14);
        padding: .55rem .8rem .55rem 1rem;
        border-radius: 999px;
        font-size: .85rem;
        color: var(--color-espresso);
        transform: translateY(-8px);
    }
    .ah-avail-badge.is-visible { transform: translateY(0); }
}

/* Mobile: kompakte Pille rechts IM Header (Logo links, Hinweis rechts) statt eigenem Balken */
@media (max-width: 880px) {
    .ah-avail-badge {
        top: calc(env(safe-area-inset-top) + 1.25rem);
        left: auto;
        right: 1.1rem;
        max-width: 58%;
        justify-content: flex-start;
        background: var(--color-espresso);
        color: #FAF6F0;
        gap: .3rem;
        padding: .4rem .5rem .4rem .72rem;
        border-radius: 999px;
        font-size: .72rem;
        box-shadow: 0 6px 18px rgba(61,43,31,.28);
        transform: translateY(-8px);
    }
    .ah-avail-badge.is-visible { transform: translateY(0); }
    .ah-avail-badge__dot { background: #7BE0A0; }
    .ah-avail-badge.is-full .ah-avail-badge__dot { background: var(--color-caramel-d); }
    .ah-avail-badge__link { min-width: 0; overflow: hidden; }
    .ah-avail-badge__text {
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
    }
    .ah-avail-badge__close { font-size: 1rem; padding: 0 .1rem; opacity: .55; }
    /* Header bleibt oben – kein Herunterschieben mehr */
    body.ah-badge-visible .site-header { top: 0; }

    /* v6.81: Die Pille sitzt fest oben rechts – genau dort, wo seit v6.79 auch
       die kleine Zeile aus dem Hero steht. Beide ueberlagerten sich. Solange die
       Pille sichtbar ist, entfaellt die Zeile; die Pille nimmt ihren Platz ein,
       was wie ein Wechsel wirkt und nicht wie ein Fehler.
       Bewusst display: none und nicht nur ausgeblendet: Sonst bliebe eine leere
       Zeile im Kopfbereich stehen. Der Kopfbereich wird dadurch in diesem Moment
       kompakter – das faellt nicht auf, weil die Pille erst ab 450px Scrollweg
       erscheint, wo der Kopfbereich ohnehin schon in seinen schmalen Zustand
       gewechselt ist.
       Die Zeile kommt zurueck, sobald die Pille wieder verschwindet (nach oben
       gescrollt) oder von der Besucherin geschlossen wird – beides nimmt die
       Klasse ah-badge-visible wieder weg. */
    body.ah-badge-visible .site-header__eyebrow { display: none; }
}

/* ===================================================================
   Wohnzimmer-Szene mit wechselndem Wandbild (v6.64)
   Die Fotos liegen in .ah-room__frame (absolut positioniert über die
   Custom Properties, die PHP aus der transparenten PNG-Fläche ermittelt).
   Darüber liegt das Szenenbild, dessen transparentes Rahmenloch den Blick
   auf genau diese Fläche freigibt.
   =================================================================== */
.ah-room {
    margin-top: var(--gap-l);
    /* Fallback, falls das Inline-CSS fehlt (kein Rahmen erkannt) */
    --ah-room-l: 0%;
    --ah-room-t: 0%;
    --ah-room-w: 0%;
    --ah-room-h: 0%;
    /* 0px = harte Kante, also exakt das Verhalten ohne weiche Randausblendung */
    --ah-room-fade: 0px;
    /* 0px = kein Schatten am Rahmeninnenrand */
    --ah-room-shadow: 0px;
}
.ah-room__stage {
    position: relative;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    /* Wischen zum Blättern: waagrechte Gesten gehören der Szene, senkrechte dem
       Browser. Damit bleibt das normale Scrollen der Seite auf dem Bild möglich. */
    touch-action: pan-y;
}
.ah-room__scene,
.ah-room__scene img {
    display: block;
    width: 100%;
    height: auto;
}
/* Das genaue Seitenverhältnis je Ansicht kommt aus dem PHP-Inline-CSS (Desktop =
   Querformat, mobil = Hochformat). object-fit sichert zusätzlich ab, dass ein Bild
   nie verzerrt wird, falls Verhältnis und Datei einmal nicht zusammenpassen. */
.ah-room__scene img { object-fit: cover; }
/* Optional (Customizer): abgerundete Ecken wie bei den übrigen Bildflächen der Seite */
.ah-room.is-rounded .ah-room__stage {
    border-radius: var(--radius-m);
    overflow: hidden;
}
.ah-room__scene {
    position: relative;
    z-index: 2;
    pointer-events: none;
}
/* Weiche Randausblendung (Customizer: „Weiche Kante der Bildfläche"):
   Die Fläche behält exakt das erkannte Rahmenrechteck. Der Verlauf liegt INNERHALB
   der Fläche: voll deckend bis --ah-room-fade innerhalb der Kante, von dort weich
   auf transparent bis zur Kante. Damit liegt der weiche Übergang genau dort, wo man
   ihn sieht, und überdeckt eine von Hand freigestellte, leicht ausgefranste
   Schnittkante des Szenen-PNGs.
   (In v6.64 wurde die Fläche stattdessen vergrößert – dadurch lag der ganze
   Auslauf außerhalb des Rahmenlochs und war wirkungslos.)
   Die Maske gilt für den gesamten Rahmeninhalt, also auch für den Lichtstreifen.
   Bei --ah-room-fade: 0px liegen alle Farbstopps auf den Kanten: die Fläche bleibt
   voll deckend und sieht exakt aus wie ohne Randausblendung. */
.ah-room__frame {
    position: absolute;
    left: var(--ah-room-l);
    top: var(--ah-room-t);
    width: var(--ah-room-w);
    height: var(--ah-room-h);
    overflow: hidden;
    z-index: 1;
    background: rgba(61, 43, 31, .08);
    -webkit-mask-image:
        linear-gradient(to right, transparent 0, #000 var(--ah-room-fade), #000 calc(100% - var(--ah-room-fade)), transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 var(--ah-room-fade), #000 calc(100% - var(--ah-room-fade)), transparent 100%);
    mask-image:
        linear-gradient(to right, transparent 0, #000 var(--ah-room-fade), #000 calc(100% - var(--ah-room-fade)), transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 var(--ah-room-fade), #000 calc(100% - var(--ah-room-fade)), transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    /* Beide Verläufe müssen sich überlagern, damit alle vier Seiten ausblenden.
       source-in ist die alte WebKit-Schreibweise für dasselbe wie intersect. */
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}
/* Zweites Werkzeug gegen unsaubere Rahmenkanten (Customizer: „Weicher Schatten am
   Rahmeninnenrand"): ein weicher, dunkler Verlauf von der Kante nach innen. Anders
   als die weiche Bildkante liegt dieses Element ÜBER dem Szenenbild (z-index 3 gegen
   2 der Szene) – nur so lässt sich ein heller Saum verdecken, der beim Freistellen
   im PNG stehengeblieben ist. Gleiches Rechteck wie die Rahmenfläche.
   Der Spread wächst mit dem Wert, damit der dunkelste Punkt auf der Kante liegt und
   bei 0 wirklich nichts zu sehen ist (blur 0 und spread 0). */
.ah-room__inset {
    position: absolute;
    left: var(--ah-room-l);
    top: var(--ah-room-t);
    width: var(--ah-room-w);
    height: var(--ah-room-h);
    z-index: 3;
    pointer-events: none;
    box-shadow: inset 0 0 var(--ah-room-shadow) calc(var(--ah-room-shadow) / 10) rgba(30, 20, 14, .5);
}

/* Zwei Ebenen je Wandbild (ab v6.64):
   - .ah-room__slide (Wrapper) bewegt sich waagrecht in den Rahmen und wieder hinaus
   - .ah-room__art (das <img>) bleibt frei für den Ken-Burns-Zoom
   Beides auf einem Element wäre nicht möglich, weil sich zwei Transform-Animationen
   gegenseitig überschreiben. */
.ah-room__slide {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* Ruheposition der wartenden Bilder: rechts außerhalb des Rahmens */
    transform: translateX(100%);
    transition: transform .7s cubic-bezier(.65, .05, .36, 1);
    /* Vorderkante des einlaufenden "Prints" wirft einen weichen Schatten auf das
       weichende Bild. Im Ruhezustand liegt der Schatten außerhalb und wird geclippt.
       Da das neue Bild von rechts kommt, liegt die Vorderkante links. */
    box-shadow: -18px 0 26px -12px rgba(30, 20, 14, .45);
    z-index: 1;
}
.ah-room__slide.is-active  { transform: translateX(0); z-index: 3; }
.ah-room__slide.is-leaving { transform: translateX(-100%); z-index: 2; }
/* Zurückblättern (Wisch nach rechts): dieselbe Bewegung gespiegelt, damit die
   Richtung zur Geste passt. Der Schatten wandert auf die andere Vorderkante. */
.ah-room__frame.is-reverse .ah-room__slide {
    transform: translateX(-100%);
    box-shadow: 18px 0 26px -12px rgba(30, 20, 14, .45);
}
.ah-room__frame.is-reverse .ah-room__slide.is-active  { transform: translateX(0); }
.ah-room__frame.is-reverse .ah-room__slide.is-leaving { transform: translateX(100%); }
/* Kurzzeitig gesetzt, wenn die wartenden Bilder die Seite wechseln: der Sprung
   soll nicht als Animation zu sehen sein. */
.ah-room__frame.is-instant .ah-room__slide { transition: none; }
.ah-room__art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ken Burns: das stehende Wandbild zoomt über seine Standzeit unmerklich heran.
   Die Dauer kommt aus dem Inline-CSS (Wechselintervall + 1 s Überblendung).
   Auch das weichende Bild behält die Animation, sonst würde es beim Hinausgleiten
   sichtbar auf die Ausgangsgröße zurückspringen. */
@keyframes ah-room-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.04); }
}
.ah-room[data-kenburns="1"] .ah-room__slide.is-active .ah-room__art,
.ah-room[data-kenburns="1"] .ah-room__slide.is-leaving .ah-room__art {
    animation: ah-room-kenburns var(--ah-room-kb, 6s) linear forwards;
}

/* Einleit-Effekt beim ersten Sichtkontakt (Customizer: „Effekt beim ersten
   Sichtbarwerden"). Die Klasse is-revealing setzt JS einmalig und nimmt sie
   nach dem Ende wieder weg. */
.ah-room__sheen {
    position: absolute;
    inset: -25% -10%;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-130%);
    background: linear-gradient(105deg,
        rgba(255, 255, 255, 0) 42%,
        rgba(255, 255, 255, .5) 50%,
        rgba(255, 255, 255, 0) 58%);
}
@keyframes ah-room-sheen {
    0%   { opacity: 0; transform: translateX(-130%); }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(130%); }
}
.ah-room.is-revealing[data-reveal="sheen"] .ah-room__sheen,
.ah-room.is-revealing[data-reveal="slide-sheen"] .ah-room__sheen {
    animation: ah-room-sheen 1200ms ease-out;
}
/* Aufleuchten: ersetzt für die Dauer des Effekts die Ken-Burns-Animation
   (höhere Spezifität), danach startet Ken Burns wieder bei 1.00. */
@keyframes ah-room-glow {
    0%   { filter: brightness(1);    transform: scale(1); }
    45%  { filter: brightness(1.18); transform: scale(1.03); }
    100% { filter: brightness(1);    transform: scale(1); }
}
.ah-room.is-revealing[data-reveal="glow"] .ah-room__slide.is-active .ah-room__art {
    animation: ah-room-glow 900ms ease-in-out;
}
/* KI-Kennzeichnung unten links auf der Szene (Artikel 50 EU-KI-Verordnung).
   Bewusst kontraststark und ohne Transparenzspielereien, damit der Hinweis auf
   jedem Motiv klar lesbar bleibt: Weiß auf dunklem Grund erreicht auch über
   hellen Bildstellen ein Kontrastverhältnis von rund 11:1. */
.ah-room__ai {
    position: absolute;
    left: .75rem;
    bottom: .75rem;
    z-index: 4;
    margin: 0;
    padding: .3rem .6rem;
    border-radius: 999px;
    background: rgba(30, 20, 14, .72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .02em;
    pointer-events: none;
}
@media (max-width: 600px) {
    .ah-room__ai { left: .5rem; bottom: .5rem; font-size: .75rem; padding: .28rem .55rem; }
}

.ah-room__caption {
    text-align: center;
    color: var(--color-muted);
    font-size: .92rem;
    margin: 1rem auto 0;
    max-width: 40rem;
}
.ah-room__dots {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 1rem;
}
.ah-room__dots button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(61, 43, 31, .35);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all 300ms ease;
}
.ah-room__dots button.is-active {
    background: var(--color-caramel);
    border-color: var(--color-caramel);
}
.ah-room__dots button:hover { background: rgba(61, 43, 31, .25); }

@media (prefers-reduced-motion: reduce) {
    .ah-room__slide { transition: none; box-shadow: none; }
    /* Kein Ken Burns, kein Lichtstreifen, kein Aufleuchten */
    .ah-room__art,
    .ah-room__sheen { animation: none !important; }
    .ah-room__sheen { display: none; }
}

@media (max-width: 600px) {
    /* Mobil: Bild etwas kleiner, Pfeile als Paar UNTER dem Bild */
    .ah-lightbox img { max-width: 94vw; max-height: 76vh; }
    .ah-lightbox-prev,
    .ah-lightbox-next {
        top: auto; bottom: 1.2rem; transform: none;
        width: 42px; height: 42px;
    }
    .ah-lightbox-prev { left: calc(50% - 3.4rem); }
    .ah-lightbox-next { right: calc(50% - 3.4rem); }
    .ah-lightbox-prev:hover,
    .ah-lightbox-next:hover { transform: scale(1.1); }
}