/* ============================================================
   global.css: Technik-Geruest + Design-Tokens der Site.

   WICHTIG: Die :root-Bloecke unten sind die EINZIGE Stelle, an der
   Design lebt (Farben, Font, Typo-Scale, Abstaende, Radien, Schatten,
   Motion). Alle Werte sind PLATZHALTER, nur damit der Styleguide vor
   Phase 2 ueberhaupt rendert. Phase 2 (Corporate Identity) MUSS jeden
   Token projektspezifisch setzen. Kein Platzhalter geht live, und
   zwei Kundenseiten teilen niemals dieselben Tokens.

   Nicht verhandelbar (Qualitaets-Untergrenzen, KEIN Design):
   Body-Schrift nie unter 17px, Touch-Targets min. 44px, WCAG-AA-
   Kontrast, Animationen nur mit transform + opacity.

   Fonts: self-hosted via css/fonts.css (scripts/fetch-fonts.sh),
   NIEMALS fonts.googleapis.com einbinden.
   ============================================================ */

/* CI "Abendlicht": Rosé als Atmosphaere, Petrol als Struktur, Koralle als Funke.
   Alle drei Farben stammen aus dem Kundenlogo (Verlauf Mauve->Altrosa, Baum-Petrol,
   Herz/Blaetter-Koralle) und dem Alt-Site-Rosé #F5CDCD. Details: ci.md */
:root {
  /* ── Farben ── */
  --color-brand-main:       #97214E;  /* Rosé 700, Links/Buttons/Eyebrow, 7.5:1 auf Papier */
  --color-brand-darker:     #72173A;  /* Rosé 800, Hover, 10.4:1                          */
  --color-brand-lighter:    #CE8DAD;  /* Logo-Mauve, dekorativ (Verlaeufe, Linien)        */
  --color-brand-subtle:     #F3D8DE;  /* Blush, getoente Flaechen                         */
  --color-bg-light:         #FCF7F9;  /* Papier: rosé getoentes Weiss, KEIN Creme        */
  --color-bg-dark:          #1B2F37;  /* Petrol. Seit dem hellen Footer nirgends im Einsatz */
  --color-bg-card:          #FFFFFF;
  --color-bg-accent:        #FAF0F2;  /* Wash, ruhige Zwischenflaeche                     */
  --color-border:           #EEDDE1;
  --color-text-muted:       #7B656E;  /* 5.0:1 auf Papier. NICHT auf Blush verwenden.     */
  --color-off-white:        #FCF7F9;
  --color-success:          #2F745B;
  --color-heading:          #1B2F37;
  --color-body:             #534148;  /* warmes Mauve-Grau, 8.9:1 auf Papier              */

  /* Projekteigene Zusatz-Tokens */
  --color-border-strong:    #E5D1D6;
  --color-accent-coral:     #FF725C;  /* Herz im Logo. NUR Grafik-Akzent, NIE Text.       */
  --color-rose-on-dark:     #E8B0BE;  /* 7.6:1 auf Petrol. Ungenutzt, solange nichts dunkel ist */

  /* ── Typografie: Outfit (geometrisch, wie das Linien-Haus im Logo) fuer
        Display, Figtree (humanistisch, warm) fuer Fliesstext.
        Body bewusst 19px: die Zielgruppe liest schlechter. ── */
  --font-display:           'Outfit', -apple-system, 'Segoe UI', sans-serif;
  --font-main:              'Figtree', -apple-system, 'Segoe UI', sans-serif;
  --font-weight-heading:    500;
  --letter-spacing-h1:      -0.035em;
  --letter-spacing-h2:      -0.025em;
  --font-size-body:         19px;
  --line-height-body:       1.72;
  --line-height-heading:    1.08;
  --font-size-h1:           76px;
  --font-size-h1-md:        56px;    /* greift <= 1024px */
  --font-size-h1-sm:        38px;    /* greift <= 767px  */
  --font-size-h2:           46px;
  --font-size-h2-md:        38px;
  --font-size-h2-sm:        30px;
  --font-size-h3:           28px;
  --font-size-h3-sm:        24px;
  --font-size-h4:           22px;
  --font-size-h5:           19px;
  --font-size-eyebrow:      13px;    /* einzige erlaubte Ausnahme unter 17px */
  --font-size-page-title:   58px;    /* h1 der Unterseiten, zwischen h1 und h2 */
  --font-size-page-title-md: 44px;
  --font-size-page-title-sm: 32px;

  /* ── Layout + Abstaende: grosszuegig, damit die Seite ruhig bleibt ── */
  --nav-height:             92px;    /* eine Quelle: nav.html UND die erste Section
                                        jeder Seite, die darunter durchlaeuft */
  --max-width:              1180px;
  --container-padding:      48px;
  --container-padding-sm:   22px;
  /* Nur vertikal: den seitlichen Rand liefert .container (--container-padding).
     Vorher stand hier 48px bzw. 22px seitlich, und beides addierte sich: Inhalts-Sections
     sassen auf dem Telefon bei x=44 statt bei x=22 (Nav, Hero, Footer), auf dem Tablet
     bei 96 statt 48, und die Textspalte war 287 statt 331px breit. */
  --section-padding:        128px 0;
  --section-padding-mobile: 72px 0;
  --header-gap-eyebrow:     16px;    /* Abstand Eyebrow -> Title   */
  --header-gap-title:       20px;    /* Abstand Title -> Subline   */
  --header-gap-subline:     52px;    /* Abstand Subline -> Inhalt  */

  /* ── Form + Tiefe: weich gerundet, Schatten rosé getoent und flach ── */
  --radius-s:               10px;    /* Buttons, Inputs        */
  --radius-m:               20px;    /* Cards, Bilder          */
  --radius-l:               32px;    /* grosse Bildflaechen    */
  --rail-width:             3px;     /* Signatur: die Rosé-Leiste (Flyer-Zitat) */
  --shadow-card:
    0 1px 2px rgba(0, 0, 0, 0.038),
    0 10px 28px -10px rgba(0, 0, 0, 0.085),
    0 32px 60px -34px rgba(0, 0, 0, 0.138);
  --shadow-float:
    0 2px 6px rgba(0, 0, 0, 0.054),
    0 18px 44px -14px rgba(0, 0, 0, 0.131),
    0 48px 88px -46px rgba(0, 0, 0, 0.184);

  /* ── Motion: langsam und ruhig, kein Federn (Zielgruppe) ── */
  --ease-out:               cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:            cubic-bezier(0.34, 1.3, 0.64, 1);
  --duration-fast:          0.3s;
  --reveal-duration:        1s;
  --reveal-distance:        30px;
  --reveal-stagger:         110ms;   /* Versatz, wenn mehrere Elemente gemeinsam einlaufen */
  /* Seitenstart (Hero, Seitenkoepfe): Text rueckt nacheinander ein, das Foto setzt sich. */
  --intro-delay:            0ms;
  --intro-duration:         1.1s;
  --intro-stagger:          120ms;
  --intro-bild-duration:    1.8s;
  /* Hover: Karten heben sich, Fotos ruecken naeher. Lang und weich, kein Federn. */
  --hover-duration:         0.5s;
  --hover-lift:             -6px;
  --hover-zoom:             1.03;
  --shadow-lift:
    0 2px 6px rgba(0, 0, 0, 0.05),
    0 26px 44px -18px rgba(0, 0, 0, 0.17);
}

/* Responsive Token-Umschaltung: Komponenten unten enthalten KEINE
   eigenen Breakpoint-Werte, hier werden nur Tokens umgeschaltet. */
@media (max-width: 1024px) {
  :root {
    --font-size-h1: var(--font-size-h1-md);
    --font-size-h2: var(--font-size-h2-md);
    --font-size-page-title: var(--font-size-page-title-md);
    --nav-height: 78px;
  }
}
@media (max-width: 767px) {
  :root {
    --font-size-h1: var(--font-size-h1-sm);
    --font-size-h2: var(--font-size-h2-sm);
    --font-size-h3: var(--font-size-h3-sm);
    --font-size-page-title: var(--font-size-page-title-sm);
    --container-padding: var(--container-padding-sm);
    --header-gap-eyebrow: 10px;
    --header-gap-title: 14px;
    --header-gap-subline: 28px;
  }
}

/* ============================================================
   Ab hier nur noch Technik: alles referenziert Tokens,
   nirgendwo stehen Design-Literale.
   ============================================================ */

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* KEIN scroll-behavior: smooth hier oder anderswo: kollidiert mit Lenis (Phase 5). */

body {
  font-family: var(--font-main);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-body);
  background: var(--color-bg-light);
  -webkit-font-smoothing: antialiased;
}

/* Fliesstext: keine einzelnen Woerter in der letzten Zeile ("Jahr.", "muss."). Browser ohne
   Unterstuetzung ignorieren die Zeile, dort bleibt es beim bisherigen Umbruch. */
p, li, blockquote, figcaption { text-wrap: pretty; }

/* Display-Rollen: h1 bis h3 in Outfit (geometrisch), h4/h5 in Figtree (warm).
   Der Wechsel ist Absicht: er trennt Ueberschrift von Zwischentitel. */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  text-wrap: balance;
}

h1, h2, h3 { font-family: var(--font-display); }
h4, h5, h6 { font-family: var(--font-main); font-weight: 600; }

h1 { font-size: var(--font-size-h1); letter-spacing: var(--letter-spacing-h1); }
h2 { font-size: var(--font-size-h2); letter-spacing: var(--letter-spacing-h2); }
h3 { font-size: var(--font-size-h3); letter-spacing: -0.015em; }
h4 { font-size: var(--font-size-h4); line-height: 1.3; }
h5 { font-size: var(--font-size-h5); line-height: 1.4; }

a { color: var(--color-brand-main); text-decoration: none; }
a:hover { color: var(--color-brand-darker); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-brand-main);
  outline-offset: 2px;
}

/* height: auto ist Pflicht, sobald Bilder width/height-Attribute tragen (gegen CLS):
   ohne sie wuerde das height-Attribut als feste Hoehe gelten und das Bild verzerren. */
img { max-width: 100%; height: auto; display: block; }
/* <picture> erzeugt keine eigene Box: das <img> darin bleibt Layout-Kind des Elternelements
   (sonst wuerden Flex-/Grid-Regeln und height: 100% am Bild ins Leere laufen). */
picture { display: contents; }

/* Sperrt den Seiten-Scroll, solange das mobile Menue offen ist (Logik: js/main.js). */
body.nav-locked { overflow: hidden; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Buttons: Look kommt komplett aus den Tokens (Radius, Farben, Motion).
   min-height 48px ist Touch-Target-Untergrenze, kein Design. */
.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 34px;
  border-radius: var(--radius-s);
  font-family: var(--font-main);
  font-size: var(--font-size-body);
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  border: none;
  text-align: center;
  transition:
    background-color var(--duration-fast) ease,
    color var(--duration-fast) ease,
    transform var(--duration-fast) var(--ease-spring),
    box-shadow var(--duration-fast) ease;
}
.btn-primary {
  background: var(--color-brand-main);
  color: #FFFFFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.108), 0 12px 26px -12px rgba(0, 0, 0, 0.362);
}
.btn-primary:hover {
  background: var(--color-brand-darker);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.123), 0 18px 34px -12px rgba(0, 0, 0, 0.395);
}
.btn-primary:active { transform: translateY(0); }
/* Der Rand liegt schon im Ruhezustand sichtbar an und wird beim Hover nur dunkler.
   Ein erst beim Hover erscheinender Rand liest sich wie ein Groessensprung. */
.btn-secondary {
  background: var(--color-bg-card);
  color: var(--color-brand-main);
  box-shadow: inset 0 0 0 1.5px var(--color-brand-lighter);
}
.btn-secondary:hover {
  background: var(--color-brand-subtle);
  color: var(--color-brand-darker);
  box-shadow: inset 0 0 0 1.5px var(--color-brand-main);
  transform: translateY(-2px);
}
.btn-secondary:active { transform: translateY(0); }

/* Auf dem Telefon laufen die Knoepfe ueber die volle Breite. Mit 34px Seitenabstand blieben
   263px fuer Symbol + Beschriftung, und laengere Texte ("Anfahrt und Karte ansehen") brachen
   um. Jetzt 16px; was auch dann nicht in eine Zeile passt ("Nach einem Gaestezimmer fragen",
   braucht ~295px bei 269px Platz), bricht ausgewogen um statt mit einem Wort allein in Zeile 2. */
@media (max-width: 767px) {
  .btn-primary, .btn-secondary { padding-left: 16px; padding-right: 16px; text-wrap: balance; }
}

/* ── Section-Header: Eyebrow / Title / Subline ──
   PFLICHT: Jeder Section-Header nutzt diese 3 Klassen, damit Groessen,
   Abstaende und Alignment in JEDER Section identisch sind. Das ist ein
   Konsistenz-Mechanismus INNERHALB einer Site; wie er aussieht, steuern
   die Tokens oben. Niemals pro Section ueberschreiben. */
/* Die Rosé-Leiste vor dem Eyebrow ist die Signatur der Site (Zitat der farbigen
   Randspalte aus dem Kundenflyer). Sie lebt genau hier, nie in einer Section. */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-main);
  font-size: var(--font-size-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-brand-main);
  margin-bottom: var(--header-gap-eyebrow);
}
.section-eyebrow::before {
  content: '';
  flex: none;
  width: var(--rail-width);
  height: 1.35em;
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    var(--color-brand-lighter) 0%,
    var(--color-brand-main) 100%
  );
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-h2);
  color: var(--color-heading);
  margin-bottom: var(--header-gap-title);
  text-wrap: balance;
  max-width: 20ch;
}
.section-subline {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-muted);
  margin-bottom: var(--header-gap-subline);
  max-width: 62ch;
  text-wrap: pretty;
}

/* ── Seitenkopf der Unterseiten (Pflicht-Komponente) ──
   Gleiche Begruendung wie beim Section-Header oben: der Kopf jeder Unterseite muss
   identisch sitzen, damit die Site zusammenhaengt. Deshalb liegt er hier und nicht
   viermal in vier Sections. Wie er AUSSIEHT, steuern ausschliesslich die Tokens. */
/* Laeuft unter der transparenten Navigation durch: sonst stuende die Nav-Zeile auf
   dem Papierton und der Blush-Block daruntersetzte mit sichtbarer Kante an.
   Feste Flaechenfarbe, kein Verlauf: ruhiger und ueber die Unterseiten hinweg gleich. */
.page-head {
  position: relative;
  margin-top: calc(var(--nav-height) * -1);
  padding: calc(88px + var(--nav-height)) 0 84px;
  background: var(--color-brand-subtle);
  overflow: hidden;
}
/* Divider: macht sichtbar, dass unter dem Seitenkopf weiterer Inhalt folgt.
   Laeuft zu den Raendern hin aus, damit es keine harte Kastenkante wird. */
.page-head::after,
.hero-divider::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-brand-lighter) 16%,
    var(--color-brand-lighter) 84%,
    transparent 100%);
}
.page-head-title {
  font-family: var(--font-display);
  font-size: var(--font-size-page-title);
  font-weight: var(--font-weight-heading);
  line-height: 1.06;
  letter-spacing: var(--letter-spacing-h1);
  color: var(--color-heading);
  margin-bottom: var(--header-gap-title);
  max-width: 20ch;
  text-wrap: balance;
}
/* Auf Blush ist --color-text-muted zu schwach (siehe ci.md), deshalb --color-body. */
.page-head-lead {
  font-size: var(--font-size-h4);
  line-height: 1.58;
  color: var(--color-body);
  max-width: 52ch;
}

@media (max-width: 767px) {
  .page-head { padding: calc(56px + var(--nav-height)) 0 52px; }
  .page-head-lead { font-size: var(--font-size-h5); }
}

/* ── Rechtsseiten (legal/*.html) ──
   Reine Lesetypografie. Der Inhalt kommt woanders her (Kundendaten bzw. Anwaltstext),
   deshalb steht das Layout hier und nicht in einer Section. */
.sk-legal {
  padding: 88px 0 112px;
  background: var(--color-bg-light);
  /* Rechtstexte bestehen aus langen Komposita und Adressen. Auf dem Desktop reicht
     die Zeilenlaenge ohne Trennung (automatische Trennung wirkte dort zerhackt:
     "Ih-ren", "verantwortli-chen"), auf dem Telefon wird sie im Media-Query unten
     zugeschaltet. */
  overflow-wrap: break-word;
}
.sk-legal .container { max-width: 760px; }
.sk-legal h1 {
  font-size: var(--font-size-h2);
  letter-spacing: var(--letter-spacing-h2);
  margin-bottom: 40px;
}
/* Die nummerierten Hauptabschnitte (Generator-Text: "1. Datenschutz auf einen Blick" ...)
   bekommen eine Haarlinie. Auf dem Telefon liegen h2 (24px) und h3 (22px) nur zwei Pixel
   auseinander, die Linie macht die Gliederung der langen Erklaerung trotzdem sichtbar. */
.sk-legal h2 {
  font-size: var(--font-size-h3);
  margin: 56px 0 14px;
  padding-top: 40px;
  border-top: 1px solid var(--color-border-strong);
}
.sk-legal h1 + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
/* Ueberschriften trennt nur der Generator ueber seine Trennhilfen (&shy;). Die automatische
   Trennung machte aus "Universalschlichtungsstelle" ein falsches "Univer-salschlichtungsstelle". */
.sk-legal h1, .sk-legal h2, .sk-legal h3, .sk-legal h4 { hyphens: manual; }
/* Absaetze in GROSSBUCHSTABEN (Widerspruchsrecht nach Art. 21 DSGVO) nie trennen: mit Trennstrichen
   in jeder vierten Zeile sind sie kaum lesbar. Die Klasse setzt js/main.js, der Rechtstext bleibt unberuehrt. */
.sk-legal .sk-legal-versal { hyphens: manual; }
.sk-legal h3 {
  font-size: var(--font-size-h4);
  font-family: var(--font-main);
  font-weight: 600;
  margin: 32px 0 10px;
}
/* Generator-Texte (z.B. eRecht24) gehen bis zur vierten Ebene. Ohne diese Regel waeren
   h3 und h4 gleich gross (beide 22px) und die Gliederung ginge verloren. */
.sk-legal h4 {
  font-size: var(--font-size-h5);
  margin: 26px 0 8px;
}
.sk-legal p, .sk-legal li {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-body);
}
.sk-legal p + p { margin-top: 18px; }
.sk-legal ul, .sk-legal ol { margin: 16px 0 16px 24px; }
.sk-legal li + li { margin-top: 8px; }
.sk-legal a {
  text-decoration: underline;
  text-decoration-color: var(--color-brand-lighter);
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
  /* Eine E-Mail-Adresse oder Nummer mit Trennstrich ("hot-mail.com") ist missverstaendlich. */
  hyphens: none;
}
.sk-legal-zurueck {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
}

@media (max-width: 767px) {
  .sk-legal {
    padding: 56px 0 72px;
    /* Bei ~35 Zeichen je Zeile klaffen ohne Trennung grosse Luecken. Die Grenzen halten
       kurze Reste ("Ausfuehrli-che") und die Grossbuchstaben-Absaetze (Widerspruchsrecht)
       lesbar. Safari kennt hyphenate-limit-chars nicht und trennt dort etwas haeufiger. */
    hyphens: auto;
    hyphenate-limit-chars: 9 4 4;
  }
}

/* ── Reveal-Animationen (Init in js/main.js) ──
   Charakter (Distanz, Dauer, Kurve) kommt aus den Motion-Tokens.
   Ohne JS (html ohne .js-Klasse) bleibt alles sichtbar.
   Der Versatz (--reveal-delay) wirkt NUR auf opacity + transform. Die Hover-Eigenschaften
   translate + scale stehen mit in der Liste, sonst wuerde dieser Block die Hover-Transition
   jeder eingeblendeten Karte ueberschreiben (Spezifitaet) und der Hover spraenge ohne Uebergang. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity var(--reveal-duration) var(--ease-out) var(--reveal-delay, 0s),
    transform var(--reveal-duration) var(--ease-out) var(--reveal-delay, 0s),
    translate var(--hover-duration) var(--ease-out),
    scale var(--hover-duration) var(--ease-out);
}
html.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ── Seitenstart ──
   Hero und Seitenkoepfe laufen beim Laden gestaffelt ein. Reines CSS und mit
   fill-mode "backwards": der Endzustand ist der normale Stil, nach der Animation haengt
   nichts mehr am Element (kein Stacking-Context). Kein Warten auf JS, sonst blitzte der
   Text erst auf und spraenge dann auf unsichtbar. */
@keyframes eintritt { from { opacity: 0; transform: translateY(var(--reveal-distance)); } }
@keyframes bild-eintritt { from { transform: scale(1.07); } }
.intro > *,
.page-head .container > * {
  animation: eintritt var(--intro-duration) var(--ease-out) backwards;
  animation-delay: calc(var(--intro-delay) + var(--i, 0) * var(--intro-stagger));
}
.intro > :nth-child(2),  .page-head .container > :nth-child(2) { --i: 1; }
.intro > :nth-child(3),  .page-head .container > :nth-child(3) { --i: 2; }
.intro > :nth-child(4),  .page-head .container > :nth-child(4) { --i: 3; }
.intro > :nth-child(5),  .page-head .container > :nth-child(5) { --i: 4; }
.intro > :nth-child(6),  .page-head .container > :nth-child(6) { --i: 5; }

/* ── Hover ──
   .card-hover  Karte hebt sich (translate) und bekommt einen tieferen Schatten. Der Schatten
                liegt auf einer Ebene dahinter, die nur ihre Deckkraft aendert: so animieren
                nur transform + opacity, nie box-shadow selbst. Die Karte darf deshalb kein
                overflow: hidden tragen (es schnitte den Schatten ab).
   .img-hover   Foto rueckt ein Stueck naeher (scale).
   translate und scale sind eigene Eigenschaften und kollidieren nicht mit dem transform
   des Reveals. Hover nur dort, wo es einen Zeiger gibt; Tastaturfokus hebt gleich. */
.card-hover {
  position: relative;
  isolation: isolate;
  transition: translate var(--hover-duration) var(--ease-out);
}
.card-hover::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hover-duration) var(--ease-out);
}
.img-hover { transition: scale var(--hover-duration) var(--ease-out); }
a.card-hover:focus-visible { translate: 0 var(--hover-lift); }
a.card-hover:focus-visible::after { opacity: 1; }
@media (hover: hover) {
  .card-hover:hover { translate: 0 var(--hover-lift); }
  .card-hover:hover::after { opacity: 1; }
  .img-hover:hover { scale: var(--hover-zoom); }
}
.card-hover:active { translate: 0 calc(var(--hover-lift) / 3); }

/* Screenshots deterministisch: screenshot.mjs setzt html.screenshot */
html.screenshot [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
html.screenshot *,
html.screenshot *::before,
html.screenshot *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .intro > *, .page-head .container > * { animation: none !important; }
  .card-hover, .card-hover::after, .img-hover { transition: none; }
  .card-hover:hover, .card-hover:active, a.card-hover:focus-visible { translate: none; }
  .img-hover:hover { scale: none; }
}

/* ── Google Maps Zwei-Klick (Markup: snippets/google-maps-consent.html) ── */
.map-consent {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--color-bg-accent);
}
.map-consent > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(2px) brightness(0.85);
}
.map-consent-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 28px;
  text-align: center;
  background: linear-gradient(160deg, rgba(27, 47, 55, 0.72), rgba(83, 38, 56, 0.72));
}
.map-consent-overlay p {
  color: var(--color-off-white);
  font-size: var(--font-size-body);
  max-width: 520px;
}
.map-consent-overlay a { color: #FFFFFF; text-decoration: underline; }

/* Auf dem Telefon reicht das feste Seitenverhaeltnis nicht fuer Einwilligungstext + Knopf:
   der Overlay wurde oben und unten abgeschnitten, der Knopf war kaum zu sehen. Jetzt liegt
   der Overlay im Fluss, die Box waechst mit ihm, das Vorschaubild bleibt absolut dahinter.
   min-height gilt auch nach dem Klick: dann ersetzt main.js den Inhalt durch einen absolut
   positionierten iframe, und die Box haette sonst keine Hoehe mehr. */
@media (max-width: 767px) {
  .map-consent { aspect-ratio: auto; min-height: 340px; }
  .map-consent-overlay { position: relative; inset: auto; min-height: 340px; padding: 28px 20px; }
}