/* Sarah's Augenblick & Fußzauber – Website
   Farben und Schriften aus dem Styleguide (Okt 2026). CMYK FOGRA39 → sRGB:
   Oliv 37/42/73/29 · Oliv dunkel 48/52/80/50 · Gold hell 4/12/48/0 · Logo-Gold 25/35/62/12 */

@font-face { font-family: "Open Sans"; src: url("fonts/OpenSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/OpenSans-Semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --oliv: #8C7546;          /* Marke: Überschriften ab 28 px, Linien, Punkte */
  --oliv-dunkel: #604E2C;   /* Lesetext (Kontrast > 6 : 1 auf Creme) */
  --gold-hell: #F8DF9A;
  --logo-gold: #B99966;     /* Rahmen ums Porträt, nie Text */
  --creme-innen: #FBF6EB;
  --creme-aussen: #EFE3CB;
  --flaeche: rgba(255, 252, 245, .62);
  --kante: rgba(140, 117, 70, .26);
  --serif: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "Noto Serif", "Georgia", serif;
  --sans: "Open Sans", system-ui, sans-serif;
  --breit: 72rem;
  --spalte: 42rem;
  --rand: clamp(16px, 4vw, 48px);
  --abstand: clamp(56px, 9vw, 112px);
  --ecke: 10px;                                  /* Knöpfe: eckig mit abgerundeten Ecken */
  --kopf: 85px;                                  /* Höhe der Kopfleiste */
  --unten: 0px;                                  /* Höhe der Handy-Leiste unten */
  --fenster: calc(100vh - var(--kopf) - var(--unten));
  /* Bewegung: starkes ease-out für Ein-/Austritte, weich für Seitenwechsel */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.nb { white-space: nowrap; }   /* Wörter mit Bindestrich bleiben zusammen */   /* „hidden“ gewinnt immer gegen display-Regeln */
html { background: var(--creme-aussen); scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--kopf); }
@supports (height: 100svh) { :root { --fenster: calc(100svh - var(--kopf) - var(--unten)); } }
body {
  margin: 0; min-height: 100vh;
  font: 400 1.25rem/1.65 var(--serif);      /* 20 px – lesefreundlich für ältere Leser */
  color: var(--oliv-dunkel);
  background: transparent;   /* Farbe liegt auf html – sonst verdeckt body den Verlauf und das Monogramm */
  hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal;
  text-rendering: optimizeLegibility;
}
/* radialer Creme-Verlauf wie im Flyer, fest hinter dem Inhalt */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120vmax 90vmax at 50% 12%, var(--creme-innen) 0%, var(--creme-innen) 18%, var(--creme-aussen) 72%);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--kante); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--oliv); outline-offset: 3px; border-radius: 4px; }
strong { font-weight: 600; }
.sym { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

.skip { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--oliv-dunkel); color: var(--creme-innen);
  padding: 12px 18px; border-radius: 8px; font: 600 1rem var(--sans); }
.skip:focus { top: 12px; }

.breit { width: min(100% - 2 * var(--rand), var(--breit)); margin-inline: auto; }
.spalte { width: min(100% - 2 * var(--rand), var(--spalte)); margin-inline: auto; }

/* ------------------------------------------------------------ Kopf */
/* Leiste und Logo aus einem Guss: ein gemeinsamer weicher Schatten folgt dem Umriss
   von Leiste UND überstehendem Logo (drop-shadow statt box-shadow). Hintergrund im Creme des Logos. */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: #FBF6EB;
  filter: drop-shadow(0 2px 3px rgba(96, 78, 44, .08)) drop-shadow(0 10px 18px rgba(96, 78, 44, .12));
  view-transition-name: kopf;               /* bleibt beim Seitenwechsel stehen */
}
.kopf-innen { width: min(100% - 2 * var(--rand), var(--breit)); margin-inline: auto; display: flex; align-items: center; gap: 24px; min-height: 84px; }
/* Logo ragt groß aus der Leiste – immer in voller Größe */
.kopf { --logo: 132px; }
.marke { position: relative; display: block; width: var(--logo); min-height: 84px; text-decoration: none; margin-right: auto; }
.marke-logo { position: absolute; left: 0; top: 8px; width: var(--logo); height: var(--logo); }


.nav { display: flex; align-items: center; gap: 4px; font: 400 1rem var(--sans); }
.nav-punkt { position: relative; display: block; }
.nav-punkt > a, .nav summary { padding: 10px 12px; border-radius: var(--ecke); text-decoration: none; cursor: pointer; transition: background-color 200ms ease; }
.nav-punkt > a:hover, .nav summary:hover { background: rgba(140, 117, 70, .1); }
.nav [aria-current="page"], .nav-leist[data-aktiv] > summary { color: var(--oliv-dunkel); font-weight: 600; }
.nav-leist { position: relative; }
/* „Sie sind hier“: dunkles Feld unter der Telefonnummer – gleiche Breite, halbe Höhe */
.kopf-rechts { display: grid; grid-template-columns: auto auto; row-gap: 4px; align-items: center; }
.kopf-rechts .knopf-tel { grid-column: 1; }
.hier {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 4px; height: 22px; padding: 0 6px; border-radius: 6px;
  background: var(--oliv-dunkel); color: var(--creme-innen); text-align: center;
  font: 600 .73rem/22px var(--sans); letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 0; min-width: 100%;   /* nie breiter als der Telefonknopf */
}
@keyframes hier-ein { from { opacity: 0; transform: translateY(-4px); } }
.hier .sym { width: 9px; height: 9px; fill: currentColor; flex: none; }   /* Dreieck in Schriftfarbe */
.hier-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .hier { animation: none; } }
.nav-leist summary { list-style: none; display: flex; align-items: center; gap: 6px; }
.nav-leist summary::-webkit-details-marker { display: none; }
.nav-leist summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-2px) rotate(45deg); transition: transform 200ms var(--ease-out); }
.nav-leist[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.nav-leist ul {
  position: absolute; top: calc(100% + 8px); left: 0; margin: 0; padding: 8px; list-style: none; min-width: 270px;
  background: #FFFCF6; border: 1px solid var(--kante); border-radius: 14px; box-shadow: 0 18px 40px -18px rgba(96, 78, 44, .35);
  transform-origin: top left;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
@starting-style { .nav-leist[open] ul { opacity: 0; transform: translateY(-4px) scale(.97); } }
.nav-leist li a { display: block; padding: 10px 14px; border-radius: 10px; text-decoration: none; }
.nav-leist li a:hover, .nav-leist li a[aria-current] { background: rgba(140, 117, 70, .1); }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 26px;
  border-radius: var(--ecke); font: 600 1.05rem/1.2 var(--sans); text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 160ms var(--ease-out);
}
.knopf:active { transform: scale(.97); }
.knopf-voll { background: var(--oliv-dunkel); color: var(--creme-innen); box-shadow: 0 10px 24px -14px rgba(96, 78, 44, .8); }
.knopf-voll:hover { background: #4E3F23; }
.knopf-linie { border-color: var(--oliv); color: var(--oliv-dunkel); background: rgba(255, 252, 245, .4); }
.knopf-linie:hover { background: rgba(140, 117, 70, .1); }
.knopf-tel { background: var(--oliv-dunkel); color: var(--creme-innen); min-height: 46px; padding: 10px 20px; font-size: 1rem; }
.knopf-tel:hover { background: #4E3F23; }

/* Mobil-Menü: ganzer Bildschirm, Reihenfolge wie am Desktop, Leistungen aufklappbar,
   im Hintergrund ganz leicht das runde Logo */
.menue { display: none; }
.menue > summary { list-style: none; width: 48px; height: 48px; display: grid; place-content: center; gap: 5px; border-radius: var(--ecke); cursor: pointer; }
.menue > summary::-webkit-details-marker { display: none; }
.menue > summary span { display: block; width: 24px; height: 2px; background: var(--oliv-dunkel); border-radius: 2px; transition: transform 250ms var(--ease-out), opacity 200ms ease; }
/* geöffnet: statt Kreuz das Dreieck (wie im Seitenfeld), zeigt nach oben = Menü einklappen */
.menue > summary { position: relative; }
/* Winkelpfeil wie beim Leistungen-Menü: zeigt beim Öffnen per Drehung nach oben */
.menue-pfeil { position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; margin: -5px 0 0 -6.5px;
  border-right: 2px solid var(--oliv-dunkel); border-bottom: 2px solid var(--oliv-dunkel); border-radius: 1px;
  opacity: 0; transform: rotate(45deg) scale(.8); transition: opacity 260ms var(--ease-out), transform 420ms var(--ease-out); }
.menue[open] > summary span { opacity: 0; transform: scaleX(.4); }
.menue[open] > summary .menue-pfeil { opacity: 1; transform: rotate(-135deg) scale(1); }
@media (prefers-reduced-motion: reduce) { .menue-pfeil { transition: opacity 200ms ease; } }
/* Tablet: Menü als Karte rechts unter dem Menü-Knopf (wie das Leistungen-Menü), Leiste bleibt sichtbar */
.kopf-rechts { position: relative; }
.menue-tafel {
  position: absolute; top: calc(100% + 14px); right: 0; width: 360px; max-height: calc(100vh - var(--kopf) - 40px);
  overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: 8px 18px 14px;
  background: #FFFCF6; border: 1px solid var(--kante); border-radius: 16px; box-shadow: 0 22px 46px -20px rgba(96, 78, 44, .45);
  isolation: isolate; transform-origin: top right;
  transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
}
@starting-style { .menue[open] .menue-tafel { opacity: 0; transform: translateY(-8px) scale(.98); } }
/* sanftes Schließen: Tafel blendet aus, Striche und Logo kommen weich zurück */
.menue.schliesst .menue-tafel { opacity: 0; transform: translateY(-8px) scale(.98); }
.menue.schliesst > summary span { opacity: 1; transform: none; }
.menue.schliesst > summary .menue-pfeil { opacity: 0; transform: rotate(45deg) scale(.8); }
.kopf:has(.menue.schliesst) .marke { opacity: 1 !important; visibility: visible !important; }
.menue-anruf { display: none; }                      /* Tablet: Telefon steht oben in der Leiste */

/* Handy: offenes Menü füllt den ganzen Bildschirm, nur der Menü-Knopf liegt darüber.
   position: fixed wirkt hier, weil die Leiste beim offenen Menü keinen filter mehr hat. */
@media (max-width: 619px) {
  .kopf-rechts { position: static; }
  .menue-tafel {
    position: fixed; inset: 0; z-index: -1; width: auto; height: 100vh; max-height: none;
    padding: calc(var(--kopf) + 8px) var(--rand) calc(28px + env(safe-area-inset-bottom));
    background: #FBF6EB; border: 0; border-radius: 0; box-shadow: none;
  }
  @supports (height: 100dvh) { .menue-tafel { height: 100dvh; } }
  .menue-tafel::before {               /* rundes Logo, ganz leicht */
    content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(86vw, 420px); aspect-ratio: 1;
    transform: translate(-50%, -50%); background: url("img/logo-640.webp") center / contain no-repeat; opacity: .07; pointer-events: none;
  }
  @starting-style { .menue[open] .menue-tafel { opacity: 0; transform: translateY(-10px); } }
  html:has(.menue[open]) { overflow: hidden; }          /* Seite dahinter scrollt nicht mit */
  .marke { transition: opacity 220ms var(--ease-out), visibility 220ms; }
  .kopf:has(.menue[open]) { filter: none; }
  .kopf:has(.menue[open]) .marke { opacity: 0; visibility: hidden; }
  .menue-anruf { display: inline-flex; }
}
.menue-liste { list-style: none; margin: 0; padding: 0; font: 400 1.35rem/1.3 var(--serif); }
.menue-liste > li { border-bottom: 1px solid rgba(140, 117, 70, .2); }
.menue-liste a, .menue-leist > summary { display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding: 10px 4px;
  text-decoration: none; color: var(--oliv-dunkel); }
.menue-liste a[aria-current], .menue-leist > summary.aktiv { color: var(--oliv); font-weight: 600; }
.menue-leist > summary { list-style: none; cursor: pointer; }
.menue-leist > summary::-webkit-details-marker { display: none; }
.menue-leist > summary::after { content: ""; width: 10px; height: 10px; margin-right: 6px; border-right: 2px solid var(--oliv); border-bottom: 2px solid var(--oliv);
  transform: translateY(-3px) rotate(45deg); transition: transform 250ms var(--ease-out); }
.menue-leist[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.menue-leist ul { list-style: none; margin: 0 0 12px; padding: 0 0 0 16px; border-left: 2px solid rgba(140, 117, 70, .3); font: 400 1.1rem/1.3 var(--sans); }
.menue-leist ul a { min-height: 50px; padding: 8px 4px; }
.menue-leist::details-content { block-size: 0; overflow: hidden; transition: block-size 300ms var(--ease-out), content-visibility 300ms allow-discrete; }
.menue-leist[open]::details-content { block-size: auto; }
.menue-anruf { margin-top: auto; width: 100%; min-height: 56px; font-size: 1.1rem; }
.menue-liste { margin-bottom: 28px; }

/* ------------------------------------------------------------ Held (auf jeder Seite gleich) */
/* Jeder Bereich füllt das Fenster: beim Öffnen sieht man nur ihn, der nächste beginnt darunter */
.held, .abschnitt { min-height: var(--fenster); display: flex; flex-direction: column; justify-content: center; }
.held { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 80px) 0; }
/* Monogramm wie im Flyer innen: groß, mittig, vollständig sichtbar */
.wasserzeichen {
  position: absolute; top: 5%; bottom: 5%; left: 50%; transform: translateX(-50%);
  aspect-ratio: 363 / 568; max-width: 90vw;
  opacity: .08; pointer-events: none;
}
.wasserzeichen img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Parallax: das Monogramm bleibt beim Scrollen zurück (langsamer als die Seite) und hat
   die Seite oben genau dann verlassen, wenn man unten ankommt. Scroll-gesteuert in CSS,
   läuft ohne JavaScript. Ohne Unterstützung oder bei reduzierter Bewegung: steht still im Kopf. */
.parallax-js .wasserzeichen { position: fixed; z-index: -1; top: 96px; bottom: auto; height: min(78vh, 640px); will-change: transform; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .wasserzeichen {
      position: fixed; z-index: -1; top: 96px; bottom: auto; height: min(78vh, 640px);
      animation: wasserzeichen-weg linear both; animation-timeline: scroll(root block);
    }
    @keyframes wasserzeichen-weg { to { transform: translate(-50%, calc(-100% - 96px)); } }
  }
}
/* Handy: Parallax nach fester Scrollstrecke statt nach Seitenanteil. Die Browserleiste blendet beim Scrollen
   ein und aus und ändert die Seitenlänge – ein Anteil würde dann springen, eine feste Strecke nicht.
   Volle Breite statt Verschieben um -50 % (Safari kennt die Breite erst nach dem Bild: stand sonst kurz links). */
@media (max-width: 619px) {
  .wasserzeichen, .parallax-js .wasserzeichen {
    position: fixed; z-index: -1; top: 132px; bottom: auto; left: 0; right: 0;   /* Abstand zum runden Logo (ragt bis 100 px) */
    /* Höhe passt in den Platz zwischen rundem Logo und Leiste unten (72 px + iPhone-Rand), je 32 px Luft */
    width: auto; height: min(540px, calc(100svh - 132px - 72px - env(safe-area-inset-bottom, 0px) - 32px)); max-width: none; aspect-ratio: auto; transform: none;
  }
  .wasserzeichen img { object-position: 50% 50%; }
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .wasserzeichen { animation: wz-handy linear both; animation-timeline: scroll(root block); animation-range: 0px 1700px; }
    }
  }
  @keyframes wz-handy { to { transform: translateY(calc(-100% - 132px)); } }
  @media (prefers-reduced-motion: reduce) { .wasserzeichen { position: absolute; top: 5%; bottom: 5%; height: auto; } }
}
.held { padding-top: clamp(96px, 10vw, 128px); }   /* Platz für das überstehende Logo */
.held-text { max-width: 48rem; margin-inline: auto; text-align: center; }
.held-text .strich { margin-inline: auto; }
.held-text .lead { margin-inline: auto; }
.held-text .held-knoepfe { justify-content: center; }
.held-innen { position: relative; width: min(100% - 2 * var(--rand), var(--breit)); margin-inline: auto;
  display: grid; grid-template-columns: 1fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
.krumen { font: 400 .95rem var(--sans); margin-bottom: 22px; color: var(--oliv-dunkel); }
.krumen a { text-decoration: none; border-bottom: 1px solid var(--kante); }
.krumen span[aria-hidden] { margin: 0 6px; color: var(--oliv); }
.dachzeile { hyphens: manual; margin: 0 0 14px; font: 600 .85rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--oliv-dunkel); }
h1 { margin: 0; font-weight: 400; font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4rem); line-height: 1.1; color: var(--oliv); letter-spacing: -.005em; hyphens: manual; text-wrap: balance; }
.strich { display: block; width: 64px; height: 2px; background: var(--oliv); margin: 22px 0 24px; }
.lead { margin: 0; font-size: clamp(1.3rem, 1.15rem + .5vw, 1.5rem); line-height: 1.6; max-width: 34em; text-wrap: pretty; }
.held-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* ------------------------------------------------------------ Abschnitte */
.abschnitt { padding: var(--abstand) 0; }
.abschnitt > * { width: min(100% - 2 * var(--rand), var(--breit)); }
.abschnitt > .spalte { width: min(100% - 2 * var(--rand), var(--spalte)); }
/* helle Bereiche im Wechsel mit dem Creme-Verlauf */
.hell { background: rgba(255, 254, 251, .94); border-block: 1px solid rgba(140, 117, 70, .16); }
.hell .karte, .hell .kurz { background: rgba(251, 246, 235, .9); }
.hell .kontakt-raster { background: rgba(251, 246, 235, .75); }
.spalte-innen { max-width: var(--spalte); margin: 0 auto clamp(40px, 6vw, 64px); }
.spalte-innen .einleitung .text { margin: 0; }
.einleitung + div, .einleitung + aside { margin-top: clamp(40px, 6vw, 64px); }
.fragen + .hinweis { margin-top: clamp(32px, 5vw, 48px); }
.h2 { margin: 0; font-weight: 400; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.15; color: var(--oliv); text-wrap: balance; hyphens: manual; }
.spalte > div + div, .spalte > div + aside, .spalte > aside + div { margin-top: clamp(40px, 6vw, 64px); }
.text { margin: 0 0 18px; text-wrap: pretty; }
.punkte { list-style: none; margin: 0; padding: 0; }
.punkte li { position: relative; padding-left: 28px; margin-bottom: 14px; }
.punkte li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--oliv); }

.kurz { margin: 0 0 clamp(40px, 6vw, 64px); padding: 22px 26px; border-left: 3px solid var(--oliv); background: var(--flaeche); border-radius: 0 14px 14px 0; }
.kurz-titel, .hinweis-titel { margin: 0 0 6px; font: 600 .8rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--oliv-dunkel); }
.kurz p:last-child { margin: 0; }

.hinweis { margin-top: clamp(40px, 6vw, 64px); padding: 24px 26px; border: 1px solid var(--kante); border-radius: 14px; background: rgba(248, 223, 154, .22); }
.hinweis p { margin: 0 0 12px; }
.mehr { display: inline-flex; align-items: center; gap: 8px; font: 600 1rem var(--sans); color: var(--oliv-dunkel); text-decoration: none; }
.mehr .sym { transition: transform 200ms var(--ease-out); }

/* Karten */
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.karte {
  display: flex; flex-direction: column; gap: 10px; padding: 28px 26px 24px; text-decoration: none;
  background: var(--flaeche); border: 1px solid var(--kante); border-radius: 16px;
  transition: transform 550ms var(--ease-out), box-shadow 550ms var(--ease-out), background-color 550ms ease, border-color 550ms ease, opacity 700ms var(--ease-out);
}
.karte h3 { margin: 0; font-weight: 400; font-size: 1.45rem; line-height: 1.25; color: var(--oliv-dunkel); }
.karte p { margin: 0 0 6px; font-size: 1.1rem; flex: 1; }
@media (hover: hover) and (pointer: fine) {
  .karte:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -28px rgba(96, 78, 44, .45); background: rgba(255, 252, 245, .9); border-color: rgba(140, 117, 70, .38); }
  .karte:hover .mehr .sym, .mehr:hover .sym { transform: translateX(4px); }
  .karte .mehr .sym { transition: transform 450ms var(--ease-out); }
}

/* Ablauf */
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.ablauf li { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; }
.ziffer { font-size: 2.6rem; line-height: 1; color: var(--oliv); text-align: center; padding-top: 2px; }
.ablauf h3 { margin: 4px 0 4px; font-weight: 600; font-size: 1.25rem; }
.ablauf p { margin: 0; }

/* Fragen (Akkordeon, ohne JS bedienbar) */
.fragen { border-top: 1px solid var(--kante); }
.frage { border-bottom: 1px solid var(--kante); }
.frage summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 2px; cursor: pointer; }
.frage summary::-webkit-details-marker { display: none; }
.frage h3 { margin: 0; font-weight: 400; font-size: 1.3rem; line-height: 1.35; }
.plus { position: relative; width: 22px; height: 22px; flex: none; }
.plus::before, .plus::after { content: ""; position: absolute; left: 3px; right: 3px; top: 10px; height: 2px; background: var(--oliv); transition: transform 250ms var(--ease-out); }
.plus::after { transform: rotate(90deg); }
.frage[open] .plus::after { transform: rotate(0deg); }
.antwort { overflow: hidden; }
.antwort p { margin: 0 0 22px; max-width: 38em; }
.frage::details-content { block-size: 0; overflow: hidden; transition: block-size 300ms var(--ease-out), content-visibility 300ms allow-discrete; }
.frage[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

/* Ortskarte wie im Flyer */
.zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.ortskarte { position: relative; aspect-ratio: 1; max-width: 520px; margin-inline: auto; width: 100%; font: 400 clamp(.78rem, .6rem + .5vw, 1rem)/1 var(--sans); }
/* Schein wie im runden Logo: innen helles Creme, nach außen warmes Beige, am Rand ein Hauch Logo-Gold */
.ortskarte .kreis { position: absolute; inset: -2%; border-radius: 50%; pointer-events: none;
  /* viele Zwischenstufen = weicher, langer Auslauf ohne sichtbare Kante */
  background: radial-gradient(closest-side,
    rgba(253, 249, 240, .96) 0%, rgba(251, 245, 233, .92) 16%, rgba(248, 240, 225, .85) 30%,
    rgba(244, 233, 214, .74) 43%, rgba(239, 226, 203, .6) 55%, rgba(232, 216, 189, .45) 66%,
    rgba(224, 205, 174, .3) 76%, rgba(214, 193, 158, .17) 85%, rgba(204, 180, 142, .07) 93%,
    rgba(195, 168, 128, 0) 100%); }
.ort { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; color: var(--oliv-dunkel);
  transition: transform 380ms var(--ease-out), color 300ms ease, opacity 380ms var(--ease-out), text-shadow 380ms ease; }
.ortskarte .ort.ort-extra:not(.aktiv) { opacity: 0 !important; }   /* Gehrden nur beim Zeigen */
.ortskarte:has(.ort-extra.aktiv) .ort[data-ort="Ronnenberg"] { opacity: 0 !important; }   /* liegt sonst darüber */
/* Ort aus der Liste zeigen → in der Karte hervorheben, die anderen treten zurück */
.ortskarte.hat-aktiv .ort { opacity: .45 !important; }
.ortskarte .ort.aktiv { opacity: 1 !important; transform: translate(-50%, -50%) scale(1.45); color: var(--oliv); font-weight: 600; z-index: 2;
  text-shadow: 0 0 12px rgba(251, 246, 235, 1), 0 0 4px rgba(251, 246, 235, 1); }
.arnum { transition: transform 380ms var(--ease-out); }
.arnum.aktiv { transform: translate(-50%, -6px) scale(1.2); }
.orte li { cursor: default; transition: color 250ms ease, padding-left 250ms var(--ease-out); }
.orte li.aktiv, .orte li:focus-visible { color: var(--oliv); font-weight: 600; padding-left: 6px; outline: none; }
.ort-gross { font-weight: 600; font-size: 1.12em; }
.arnum { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -6px); display: flex; flex-direction: column; align-items: center; gap: 6px;
  font: 600 1.5em/1 var(--serif); color: var(--oliv-dunkel); }
.arnum i { width: 14px; height: 14px; border-radius: 50%; background: var(--oliv); box-shadow: inset 0 0 0 4px var(--oliv), inset 0 0 0 7px var(--gold-hell); }
.orte { columns: 2; gap: 24px; list-style: none; padding: 0; margin: 0; }
.orte li { padding: 6px 0; break-inside: avoid; border-bottom: 1px solid rgba(140, 117, 70, .15); }
.orte-hinweis { margin-top: 20px; }

/* Umkreis-Check: Eingabe über der Karte, Ergebnis als Marke in der Karte */
.karte-block { display: grid; gap: 18px; }
@media (min-width: 900px) { .karte-block { position: sticky; top: calc(var(--kopf) + 24px); } }
.ortscheck { display: grid; gap: 10px; max-width: 520px; width: 100%; margin-inline: auto; }
.text + .ortscheck { margin: 8px 0 28px; max-width: none; }
.nur-vorlesen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Einzugsgebiet: Text und Karte oben bündig, klare Reihenfolge links */
.pruefen-raster { align-items: start; }
.pruefen-text .text { max-width: 34em; }
.pruefen-text .orte-text { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--kante); }
.ortscheck label { font: 600 1.05rem var(--sans); }
.ortscheck-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.ortscheck-feld { position: relative; min-width: 0; }
.ortscheck-feld input { width: 100%; }
/* Vorschlagsliste im Stil des Leistungen-Menüs */
.vorschlaege { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none;
  max-height: 320px; overflow-y: auto; background: #FFFCF6; border: 1px solid var(--kante); border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(96, 78, 44, .4); transform-origin: top center;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
@starting-style { .vorschlaege:not([hidden]) { opacity: 0; transform: translateY(-4px) scale(.98); } }
.vorschlaege li { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 12px; border-radius: 10px; cursor: pointer;
  font: 400 1.05rem/1.3 var(--sans); color: #3B301B; transition: background-color 150ms ease; }
.vorschlaege li .sym { width: 18px; height: 18px; fill: var(--oliv); flex: none; }
.vorschlaege li.aktiv { background: rgba(140, 117, 70, .12); }
.vorschlaege mark { background: none; color: var(--oliv-dunkel); font-weight: 600; padding: 0; }
.ortscheck input { min-height: 54px; padding: 12px 16px; font: 400 1.1rem var(--sans); color: #3B301B; background: #FFFDF8;
  border: 1.5px solid #A8936A; border-radius: var(--ecke); transition: border-color 200ms ease, box-shadow 200ms ease; }
.ortscheck input:focus { outline: none; border-color: var(--oliv-dunkel); box-shadow: 0 0 0 4px rgba(140, 117, 70, .2); }
.ortscheck .knopf { min-height: 54px; }
.ortscheck-ergebnis { margin: 0; font: 400 1.02rem/1.5 var(--sans); min-height: 0; }
.ortscheck-ergebnis:empty { display: none; }
.ortscheck-ergebnis { padding: 12px 16px; border-radius: var(--ecke); border: 1.5px solid; animation: hier-ein 380ms var(--ease-out); }
.ortscheck-ergebnis.drin { border-color: rgba(96, 120, 60, .55); background: rgba(196, 214, 160, .25); }
.ortscheck-ergebnis.draussen { border-color: rgba(160, 110, 60, .5); background: rgba(248, 223, 154, .25); }
.ortscheck-ergebnis.unbekannt { border-color: var(--kante); background: rgba(255, 253, 248, .7); }
.ortscheck-ergebnis strong { color: var(--oliv-dunkel); }
.osm-hinweis { margin: 0; text-align: center; font: 400 .8rem var(--sans); opacity: .75; }
.osm-hinweis a { text-decoration: underline; }
/* 20-km-Ring (erscheint bei einer Prüfung) */
.ring20 { position: absolute; inset: 8.33%; border-radius: 50%; border: 1.5px dashed rgba(140, 117, 70, .55); pointer-events: none;
  opacity: 0; transform: scale(.96); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.ring20 b { position: absolute; top: -.7em; left: 50%; transform: translateX(-50%); padding: 0 6px; background: rgba(251, 246, 235, .9);
  font: 600 .72rem/1.4 var(--sans); color: var(--oliv); border-radius: 4px; }
.ortskarte.zeige-ring .ring20 { opacity: 1; transform: none; }
/* Suchmarke */
.such-punkt { position: absolute; z-index: 3; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px;
  pointer-events: none; animation: punkt-ein 450ms var(--ease-out); }
.such-punkt i { width: 16px; height: 16px; border-radius: 50%; background: var(--oliv-dunkel); box-shadow: 0 0 0 4px rgba(251, 246, 235, .95), 0 0 0 8px rgba(96, 78, 44, .25); }
.such-punkt.draussen i { background: #9A5B2E; }
.such-punkt.links { align-items: flex-start; transform: translate(-8px, -50%); }   /* Beschriftung nach rechts, bleibt in der Karte */
.such-punkt.rechts { align-items: flex-end; transform: translate(calc(-100% + 8px), -50%); }
.such-punkt b { font: 600 .9rem/1.2 var(--sans); color: var(--oliv-dunkel); white-space: nowrap; padding: 2px 8px; border-radius: 6px;
  background: rgba(251, 246, 235, .95); box-shadow: 0 4px 12px -6px rgba(96, 78, 44, .5); }
@keyframes punkt-ein { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } }
.ortskarte.zeige-ring .ort:not(.aktiv) { opacity: .5; }
.ortskarte .ort.verdeckt { opacity: 0 !important; }   /* Name steht jetzt in der Marke (mit PLZ) */
@media (prefers-reduced-motion: reduce) { .such-punkt, .ortscheck-ergebnis { animation: none; } }

/* Kontakt */
.kontakt-raster { --bild: 168px; display: grid; grid-template-columns: var(--bild) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center;
  padding: clamp(32px, 5vw, 56px); background: var(--flaeche); border: 1px solid var(--kante); border-radius: 22px; }
.portraet { margin: 0; width: var(--bild); text-align: center; }
.portraet picture { display: block; padding: 7px; border: 1.5px solid var(--logo-gold); }
.portraet img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.portraet figcaption { margin-top: 12px; font-weight: 400; line-height: 1.1; white-space: nowrap;
  letter-spacing: .08em; color: var(--oliv); font-size: calc(var(--bild) / 6.1); }   /* Name genau so breit wie Bild mit Rahmen (wie im Flyer) */
.kontaktdaten { list-style: none; margin: 0 0 14px; padding: 0; font: 400 1.15rem/1.4 var(--sans); }
.kontaktdaten li { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.kontaktdaten a { text-decoration: none; overflow-wrap: normal; hyphens: none; white-space: nowrap; }
.kontaktdaten strong { font-size: 1.3rem; }
.termine { margin: 0; font-style: normal; }
.kontakt .held-knoepfe { margin-top: 24px; }

/* Formular */
.formular { display: grid; gap: 22px; }
.formular fieldset { border: 0; margin: 0; padding: 0; }
.formular legend, .feld label { display: block; margin-bottom: 8px; font: 600 1.05rem var(--sans); }
.optional { font-weight: 400; color: var(--oliv-dunkel); opacity: .85; font-size: .92em; }
.pflicht { color: #8A2F1B; }
.feld input, .feld textarea {
  width: 100%; min-height: 56px; padding: 14px 16px; font: 400 1.15rem/1.4 var(--sans); color: #3B301B;
  background: #FFFDF8; border: 1.5px solid #A8936A; border-radius: 12px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.feld textarea { resize: vertical; }
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--oliv-dunkel); box-shadow: 0 0 0 4px rgba(140, 117, 70, .2); }
.feld input[aria-invalid="true"] { border-color: #8A2F1B; box-shadow: 0 0 0 4px rgba(138, 47, 27, .12); }
.feld small { display: block; margin-top: 6px; font: 400 .95rem var(--sans); }
.wahlreihe, .wahlgitter { display: grid; gap: 10px; }
.wahlgitter { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.wahl { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; cursor: pointer;
  background: #FFFDF8; border: 1.5px solid rgba(140, 117, 70, .4); border-radius: var(--ecke); font: 400 1.08rem/1.3 var(--sans);
  transition: border-color 200ms ease, background-color 200ms ease; }
.zustimmung { align-items: flex-start; font-size: 1rem; line-height: 1.5; }
.zustimmung input { margin-top: 2px; }
.zustimmung a { text-decoration: underline; }
.zustimmung:has(input[aria-invalid="true"]) { border-color: #8A2F1B; box-shadow: 0 0 0 4px rgba(138, 47, 27, .12); }
.wahl-zusatz { display: block; margin-top: 2px; font-size: .88rem; opacity: .8; }
.wahl input { width: 22px; height: 22px; accent-color: var(--oliv-dunkel); flex: none; margin: 0; }
.wahl:has(input:checked) { border-color: var(--oliv-dunkel); background: rgba(248, 223, 154, .3); }
.wahl:has(input:focus-visible) { outline: 3px solid var(--oliv); outline-offset: 2px; }
.falle { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.klein { font: 400 .98rem/1.55 var(--sans); margin: 0; }
.knopf-senden { justify-self: start; min-width: 240px; min-height: 58px; font-size: 1.15rem; }
.knopf-senden[aria-busy="true"] { opacity: .7; pointer-events: none; }
.status { margin: 0; font: 400 1rem var(--sans); min-height: 1.5em; }
.fehler-meldung { padding: 18px 22px; border-radius: 12px; background: rgba(138, 47, 27, .08); border: 1px solid rgba(138, 47, 27, .35); color: #6E2614; font: 400 1.05rem/1.5 var(--sans); margin: 0 0 28px; }
.danke { padding: 32px; border-radius: 18px; background: var(--flaeche); border: 1px solid var(--kante); }
.danke:focus { outline: none; }
/* nur bei lokal geöffneter Datei sichtbar */
.testmodus { margin: 0 0 24px; padding: 14px 18px; border: 1.5px dashed var(--oliv); border-radius: 12px; font: 400 .98rem/1.5 var(--sans); background: rgba(248, 223, 154, .25); }
.danke .testmodus { margin-top: 28px; }
.mailvorschau { margin: 0; padding: 20px; overflow-x: auto; white-space: pre-wrap; font: 400 .92rem/1.55 ui-monospace, Menlo, Consolas, monospace;
  background: #FFFDF8; border: 1px solid var(--kante); border-radius: 12px; color: #3B301B; }


/* Kalender Wunschtermin – im Seitendesign */
.termin-wahl { display: grid; gap: 14px; }
.kalender { padding: 18px 18px 14px; background: #FFFDF8; border: 1.5px solid rgba(140, 117, 70, .4); border-radius: 16px; max-width: 460px; }
.kal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.kal-monat { margin: 0; font: 400 1.35rem/1.2 var(--serif); color: var(--oliv-dunkel); }
.kal-pfeil { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--ecke); border: 1.5px solid rgba(140, 117, 70, .45);
  background: transparent; color: var(--oliv-dunkel); cursor: pointer; transition: background-color 200ms ease, transform 160ms var(--ease-out); }
.kal-pfeil svg { width: 26px; height: 26px; fill: currentColor; }
.kal-pfeil:hover:not(:disabled) { background: rgba(140, 117, 70, .1); }
.kal-pfeil:active:not(:disabled) { transform: scale(.94); }
.kal-pfeil:disabled { opacity: .3; cursor: default; }
.kal-wt, .kal-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.kal-wt span { text-align: center; font: 600 .82rem/2 var(--sans); color: var(--oliv-dunkel); letter-spacing: .04em; }
.kal-wt span:last-child { opacity: .55; }
.kal-tag { aspect-ratio: 1; min-height: 44px; border: 0; border-radius: var(--ecke); background: transparent; cursor: pointer;
  font: 400 1.1rem var(--sans); color: #3B301B; position: relative;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out), box-shadow 200ms ease; }
.kal-tag:disabled { color: rgba(96, 78, 44, .32); cursor: default; }
.kal-heute { box-shadow: inset 0 0 0 1.5px var(--oliv); }
.kal-tag[aria-pressed="true"] { background: var(--oliv-dunkel); color: var(--creme-innen); font-weight: 600; box-shadow: 0 6px 14px -8px rgba(96, 78, 44, .9); }
.kal-tag:active:not(:disabled) { transform: scale(.92); }
.kal-tag:focus-visible { outline: 3px solid var(--oliv); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .kal-tag:not(:disabled):not([aria-pressed="true"]):hover { background: rgba(248, 223, 154, .55); } }
.kal-legende { margin: 12px 0 0; display: flex; align-items: center; gap: 8px; font: 400 .92rem var(--sans); }
.kal-punkt { width: 14px; height: 14px; border-radius: 4px; background: var(--oliv-dunkel); }
.kal-hinweis { margin: 8px 0 0; font: 600 .95rem/1.45 var(--sans); color: #6E2614; }
.kal-hinweis:empty { display: none; }
/* Wunschtage: drei feste Plätze */
.kal-auswahl { display: flex; flex-direction: column; gap: 8px; }
.kal-auswahl-titel { margin: 0; font: 600 1rem var(--sans); }
.kal-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kal-slot { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 10px 10px 12px;
  border-radius: var(--ecke); background: #FFFDF8; border: 1.5px dashed rgba(140, 117, 70, .45); }
.kal-slot.voll { border-style: solid; border-color: var(--oliv-dunkel); background: rgba(248, 223, 154, .3); }
.kal-nr { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px;
  font: 600 .9rem var(--sans); color: var(--oliv); border: 1.5px solid rgba(140, 117, 70, .45); }
.voll .kal-nr { background: var(--oliv-dunkel); border-color: var(--oliv-dunkel); color: var(--creme-innen); }
.kal-datum { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.kal-wt { font: 600 .82rem var(--sans); letter-spacing: .04em; color: var(--oliv-dunkel); }
.kal-dm { font: 400 1.2rem var(--serif); color: #3B301B; white-space: nowrap; }
.kal-datum .dk { display: none; }
.kal-frei { font: 400 1rem var(--sans); color: var(--oliv-dunkel); opacity: .7; }
.kal-weg { margin-left: auto; flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; cursor: pointer;
  border-radius: 6px; background: rgba(96, 78, 44, .1); color: var(--oliv-dunkel); font: 400 1.3rem/1 var(--sans);
  transition: background-color 200ms ease, transform 160ms var(--ease-out); }
.kal-weg:hover { background: rgba(96, 78, 44, .18); }
.kal-weg:active { transform: scale(.92); }
.kal-slot.neu { animation: slot-ein 320ms var(--ease-out); }
@keyframes slot-ein { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .kal-slot.neu { animation: none; } }
.unterlegende { margin: 6px 0 0; font: 600 1.05rem var(--sans); }
/* Desktop: Wunschtage rechts neben dem Kalender */
@media (min-width: 720px) {
  .termin-wahl { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; align-items: start; }
  .termin-wahl > :not(.kalender):not(.kal-auswahl) { grid-column: 1 / -1; }
  .termin-wahl .kalender { grid-column: 1 / span 2; max-width: none; }
  .termin-wahl .kal-auswahl { grid-column: 3; }
  .termin-wahl .kal-auswahl { align-self: stretch; }
  .kal-slots { flex: 1; grid-template-rows: repeat(3, 1fr); }
}
.wahlreihe-zeit { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 719px) {
  .kal-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .kal-slot { flex-direction: column; align-items: flex-start; gap: 6px; min-height: 96px; padding: 8px; }
  .kal-datum .dl { display: none; } .kal-datum .dk { display: inline; }
  .kal-dm { font-size: 1.15rem; }
  .kal-weg { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; }
}
@media (max-width: 519px) { .wahlreihe-zeit { grid-template-columns: 1fr; } .kalender { padding: 14px 10px 12px; } }

/* Preisliste: Punktlinie zwischen Leistung und Preis wie auf der gedruckten Preisliste */
.preisraster { display: grid; gap: clamp(24px, 3vw, 36px); max-width: var(--spalte); margin-inline: auto; }
.preisblock { padding: clamp(24px, 3vw, 32px); background: var(--flaeche); border: 1px solid var(--kante); border-radius: 16px; }
.hell .preisblock { background: rgba(251, 246, 235, .9); }
.preis-unter { margin: 6px 0 0; font: 600 .82rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--oliv-dunkel); }
.preisblock .strich { margin: 16px 0 18px; }
.preisliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
/* Punkte laufen wie auf der gedruckten Liste vom letzten Wort bis zum Preis – auch wenn der Name umbricht */
.preis { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: end; }
.preis-name { position: relative; overflow: hidden; font-size: 1.15rem; line-height: 1.4; }
.preis-name::after {
  content: "........................................................................................................................................................................................................";
  position: absolute; padding-left: 6px; white-space: nowrap; letter-spacing: .22em; color: rgba(140, 117, 70, .7);
}
.preis-betrag { font-size: 1.25rem; line-height: 1.4; color: var(--oliv); white-space: nowrap; }
.preis-hinweis { grid-column: 1 / -1; margin-top: 2px; font: 400 .92rem/1.4 var(--serif); color: var(--oliv-dunkel); opacity: .85; }

/* Fotos */
.foto { display: block; border-radius: 14px; overflow: hidden; background: var(--creme-aussen);
  box-shadow: 0 18px 36px -24px rgba(96, 78, 44, .55); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
figure { margin: 0; }
figcaption { margin-top: 10px; font: 400 .95rem var(--sans); color: var(--oliv-dunkel); }
.studio-kopf { max-width: var(--spalte); margin: 0 auto clamp(32px, 5vw, 48px); }
.studio-adresse { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; font: 600 1.05rem/1.45 var(--sans); font-style: normal; }
.studio-adresse .sym { margin-top: 3px; color: var(--oliv); }
.galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.galerie .foto { aspect-ratio: 5 / 4; }
.galerie .g-gross { grid-row: span 2; }
.galerie img[src*="neue-nagellackfarben"] { object-position: 50% 88%; }   /* Ausschnitt auf die schwarzen Fläschchen */
.galerie .g-gross .foto { aspect-ratio: auto; height: calc(100% - 34px); }
@media (max-width: 719px) {
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galerie .g-gross { grid-column: 1 / -1; grid-row: auto; }
  .galerie .foto { aspect-ratio: 4 / 5; }
  .galerie .g-gross .foto { height: auto; aspect-ratio: 4 / 5; }
}
.foto-quer { aspect-ratio: 16 / 11; }
.mit-bild { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(24px, 4vw, 40px); align-items: start; }
.mit-bild .foto { aspect-ratio: 3 / 4; }
.mit-bild .bilder { display: grid; gap: 16px; }
@media (max-width: 719px) { .mit-bild { grid-template-columns: 1fr; } .mit-bild figure { max-width: 320px; } }
@media (hover: hover) and (pointer: fine) {
  .galerie .foto img { transition: transform 600ms var(--ease-out); }
  .galerie figure:hover .foto img { transform: scale(1.03); }
}

/* Rechtstexte */
.rechtstext .h2 { font-size: 1.5rem; margin-top: 40px; }
.rechtstext .h2:first-child { margin-top: 0; }
.rechtstext p { margin: 14px 0 0; }
mark { background: rgba(248, 223, 154, .8); color: inherit; padding: 0 4px; }

/* ------------------------------------------------------------ Fuß */
/* Fuß: ein gemeinsames Zeilenraster – jede Zeile links liegt auf derselben Linie wie Mitte und rechts */
.fuss { --zeile: 1.75rem; padding: 56px 0 32px; border-top: 1px solid var(--kante); background: rgba(239, 227, 203, .55);
  color: var(--oliv-dunkel); font: 400 1rem/var(--zeile) var(--sans); }
.fuss-raster { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; align-items: start; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li, .fuss p { line-height: var(--zeile); }
.fuss a { text-decoration: none; }
.fuss a { transition: color 200ms ease; }
.fuss a:hover { color: var(--oliv); text-decoration: none; }
.fuss p { margin: 0; }
.fuss-marke, .fuss-titel { height: calc(var(--zeile) * 1.5); margin: 0 !important; display: flex; align-items: flex-start; }
.fuss-marke { font: 400 1.35rem/var(--zeile) var(--serif) !important; color: var(--oliv-dunkel); }
.fuss-titel { font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; color: var(--oliv-dunkel); }
.fuss-kontakt li { display: flex; align-items: flex-start; gap: 10px; }
.fuss-kontakt .sym { height: var(--zeile); width: 1.1em; color: var(--oliv); flex: none; }   /* mittig zur ersten Zeile */
.fuss-kontakt a { white-space: nowrap; }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(140, 117, 70, .18); font-size: .9rem; }
.fuss-unten p { margin: 0; }
/* dezenter Hinweis auf Colora Design */
.colora { opacity: 1; }
.colora a { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; color: var(--oliv-dunkel); text-decoration: none;
  transition: color 250ms ease; }
.colora a:hover { color: var(--oliv); text-decoration: none; }
.colora-logo { width: 26px; height: 26px; flex: none; }
.colora-impressum { display: inline-flex; align-items: center; gap: 10px; color: var(--oliv-dunkel); text-decoration: none; transition: color 250ms ease; }
.colora-impressum:hover { color: var(--oliv); }
.colora-impressum .colora-logo { width: 34px; height: 34px; }


.mobil-leiste { display: none; }
.nur-handy { display: none; }

/* ------------------------------------------------------------ Bewegung
   Weiche Übergänge: Seitenwechsel als Überblendung (Kopf bleibt stehen),
   Inhalte gleiten beim Scrollen sanft herein. Nur transform und opacity. */
@view-transition { navigation: auto; }
/* Ersatz-Überblendung per JS (lokal geöffnet / Browser ohne View Transitions) */
/* Seitenwechsel ruhig: nur Überblenden, keine Verschiebung; die Kopfleiste steht (view-transition-name: kopf) */
/* Ersatz-Überblendung: nur Inhalte, das Monogramm im Hintergrund bleibt stehen */
main > section, .held-innen, .fuss { transition: opacity 340ms cubic-bezier(.55, 0, 1, .45), transform 340ms cubic-bezier(.55, 0, 1, .45); }
.wasserzeichen img { transition: opacity 340ms ease; }
.seite-weg main > section:not(.held), .seite-weg .held-innen, .seite-weg .fuss { transform: translateY(-14px); }
.seite-rein main > section, .seite-rein .held-innen, .seite-rein .fuss { animation: seite-ein 620ms cubic-bezier(.22, 1, .36, 1) both; }
.seite-rein main > section.held { animation: none; }
.seite-weg main > section:not(.held), .seite-weg .held-innen, .seite-weg .fuss, .seite-weg .wasserzeichen img { opacity: 0; }
::view-transition-group(root) { animation-duration: 280ms; }
/* Seitenwechsel im Motion Design: die alte Seite gleitet leicht nach oben und blendet aus,
   die neue schwebt sanft von unten herein (langsam auslaufend). Kopfleiste, Logo und Leiste unten stehen still. */
::view-transition-old(root) { animation: 340ms cubic-bezier(.55, 0, 1, .45) both seite-aus; }
::view-transition-new(root) { animation: 620ms cubic-bezier(.22, 1, .36, 1) 160ms both seite-ein; }
::view-transition-group(kopf), ::view-transition-old(kopf), ::view-transition-new(kopf) { animation-duration: 400ms; }
/* Logo oben links: eigene Ebene beim Seitenwechsel. Das alte bleibt voll sichtbar stehen, das neue liegt
   deckungsgleich darüber – kein kurzes Verschwinden, auch wenn das neue Bild einen Moment später fertig ist. */
.marke-logo { view-transition-name: logo; }
::view-transition-old(logo), ::view-transition-new(logo) { animation: none; opacity: 1; mix-blend-mode: normal; }
::view-transition-group(logo) { animation-duration: 0s; }
/* kam man aus dem offenen Handy-Menü, gibt es kein altes Logo: das neue blendet weich ein statt aufzuspringen */
::view-transition-new(logo):only-child, ::view-transition-new(kopf):only-child { animation: nur-ein 480ms ease both; }
/* Hintergrund-Monogramm ist auf jeder Seite gleich: bleibt beim Wechsel stehen (gleitet nur, wenn es durch Scrollen verschoben war) */
.wasserzeichen { view-transition-name: wasserzeichen; }
::view-transition-group(wasserzeichen) { animation-duration: 320ms; animation-timing-function: var(--ease-out); }
/* SAF beim Seitenwechsel: alt blendet sanft aus, neu sanft ein (nacheinander, kein Doppelbild) */
::view-transition-group(wasserzeichen) { animation-duration: 520ms; }
::view-transition-old(wasserzeichen) { animation: wz-aus 380ms ease both; mix-blend-mode: normal; }
::view-transition-new(wasserzeichen) { animation: wz-ein 380ms ease 140ms both; mix-blend-mode: normal; }
@keyframes wz-aus { to { opacity: 0; } }
/* kein altes Monogramm (Seite war gescrollt): neues blendet sanft ein statt plötzlich dazustehen */
::view-transition-new(wasserzeichen):only-child { animation: wz-ein 800ms ease both; }
@keyframes wz-ein { from { opacity: 0; } }
.wz-einblenden .wasserzeichen img { animation: wz-ein 800ms ease both; }   /* dasselbe ohne View Transitions (lokal, Firefox) */
@keyframes seite-aus { to { opacity: 0; transform: translateY(-14px); } }
@keyframes seite-ein { from { opacity: 0; transform: translateY(22px); } }
@keyframes nur-ein { from { opacity: 0; } }

/* Kopfbereich: beim ersten Aufruf sanft einblenden (nur Deckkraft) – beim Wechsel innerhalb der Seite gar nicht */
@keyframes auftauchen { from { opacity: 0; } }
.held [data-stufe] { animation: auftauchen 500ms ease both; }
.held .held-text > :nth-child(2) { animation-delay: 40ms; }
.held .held-text > :nth-child(3) { animation-delay: 80ms; }
.held .held-text > :nth-child(4) { animation-delay: 120ms; }
.held .held-text > :nth-child(5) { animation-delay: 160ms; }
.ohne-einstieg .held [data-stufe] { animation: none; }

/* Einblenden beim Scrollen – nur was beim Laden noch NICHT im Bild ist (sonst steht es sofort fest) */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js [data-reveal].sichtbar { opacity: 1; transform: none; }
.js [data-reveal].sofort, .js .sofort .ort { transition: none !important; }
/* Karten: das Einblenden darf die weichen Hover-Übergänge nicht überschreiben */
.js .karte[data-reveal] { transition: transform 550ms var(--ease-out), box-shadow 550ms var(--ease-out), background-color 550ms ease,
  border-color 550ms ease, opacity 700ms var(--ease-out); }
.js .karte.sichtbar { transition-delay: 0ms; }   /* Hover danach ohne Verzögerung */
.js .ortskarte .ort { opacity: 0; transition: opacity 600ms var(--ease-out) calc(200ms + var(--i) * 45ms), transform 380ms var(--ease-out), color 300ms ease, text-shadow 380ms ease; }
.js .ortskarte.hat-aktiv .ort { transition-delay: 0ms; }
.js .sichtbar .ortskarte .ort, .js .ortskarte.sichtbar .ort { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .held [data-stufe] { animation: none; }
  .js [data-reveal] { transform: none; transition: opacity 300ms ease; transition-delay: 0ms; }
  .karte, .nav-leist ul, .menue-tafel { transition-property: opacity, background-color, box-shadow; }
  .karte:hover { transform: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; animation-delay: 0ms; animation-name: seite-aus-sanft; }
  ::view-transition-new(root) { animation-name: seite-ein-sanft; }
  @keyframes seite-aus-sanft { to { opacity: 0; } }
  @keyframes seite-ein-sanft { from { opacity: 0; } }
}

/* ------------------------------------------------------------ Haltepunkte */
/* Navigation quer nur, wenn sie vollständig passt (Logo + 6 Punkte + Telefon ≈ 1150 px, z. B. iPad quer 1180).
   Darunter (iPad hochkant): Telefon mit Nummer + Menü-Knopf, Menü als Karte rechts darunter. */
@media (max-width: 1159px) {
  .nav { display: none; }
  .menue { display: block; }
  .hier { display: none; }   /* Seitenfeld nur bei querer Navigation */
  .knopf-tel { white-space: nowrap; }
  .kopf-rechts { column-gap: 10px; }
  .kopf-innen { gap: 12px; }
}
@media (max-width: 619px) {
  .nav { display: none; }
  .menue { display: block; }
}
@media (max-width: 899px) {
  .held-innen { grid-template-columns: 1fr; }
  .zwei { grid-template-columns: 1fr; }
  .kontakt-raster { grid-template-columns: 1fr; text-align: left; }

  .fuss-raster { grid-template-columns: 1fr 1fr; }
  .fuss-raster > div:first-child { grid-column: 1 / -1; }
}
/* Handy: Logo mittig in der Leiste, Fuß aufgeräumt und zentriert */
@media (max-width: 619px) {
  .kopf-innen { position: relative; }
  .marke { position: absolute; left: 50%; top: 0; transform: translateX(-50%); margin: 0; }
  .kopf-rechts { margin-left: auto; }

  .fuss { padding-top: 44px; }
  .fuss-raster { gap: 26px; }
  .fuss-marke, .fuss-titel { height: auto; margin-bottom: 6px !important; }
  .fuss-kontakt { margin-top: 10px; }
  .fuss-leist { display: none; }                   /* Leistungen stehen im Menü */
  .fuss-info { display: none; }                   /* Links stehen im Menü; Impressum/Datenschutz unten in der letzten Zeile */
  .fuss-unten .nur-handy { display: block; }   /* eigene Zeile */
  .fuss-unten { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 22px; }
}
@media (max-width: 619px) {
  body { font-size: 1.19rem; padding-bottom: 76px; }
  :root { --unten: 76px; }
  .kopf { --logo: 92px; }

  .held-knoepfe { display: none; }   /* Anrufen und Termin stehen dauerhaft in der Leiste unten */
  .knopf-senden { width: 100%; }
  .fuss-raster { grid-template-columns: 1fr; }
  .orte { columns: 1; }
  .kopf-rechts .knopf-tel { display: none; }   /* Handy: kein Hörer oben – Anrufen über die Leiste unten und das Menü */
  .hier { display: none; }   /* Handy: kein Feld – die aktive Seite ist im Menü fett markiert */
  .kontaktdaten { font-size: 1rem; }
  .kontaktdaten li { align-items: flex-start; }
  .mobil-leiste {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(251, 246, 235, .94);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--kante);
    view-transition-name: leiste;
  }
  .mobil-leiste a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: var(--ecke);
    font: 600 1.05rem var(--sans); text-decoration: none; border: 1.5px solid var(--oliv); }
  .mobil-leiste a:first-child { background: var(--oliv-dunkel); color: var(--creme-innen); border-color: var(--oliv-dunkel); }
}
@media print {
  .kopf, .mobil-leiste, .held-knoepfe, .wasserzeichen { display: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}