/* Bewegungslust Pferd · Entwurf v1 */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/fraunces-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/fraunces-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }

:root {
  --anthrazit: #1E1C1A;
  --sand: #E9DFD0;
  --kastanie: #6B3A24;
  --kastanie-dunkel: #552D1B;
  --warmgrau: #8C8781;
  --warmgrau-text: #625D57; /* Warmgrau abgedunkelt für Nebentext, AA auf Hell und Sand */
  --offwhite: #FAF7F2;
  --hero-bg: #0C0B0A;
  --linie: #D9D1C5;
  --klaeren: #FFE27A;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --space: clamp(4rem, 9vw, 7.5rem);
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--offwhite);
  color: var(--anthrazit);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: var(--kastanie); text-underline-offset: 0.18em; }
a:hover { color: var(--kastanie-dunkel); }

:focus-visible { outline: 3px solid var(--kastanie); outline-offset: 3px; border-radius: 2px; }
.hero :focus-visible, .site-footer :focus-visible { outline-color: var(--sand); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 0.6em; }
h2 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 400; letter-spacing: -0.015em; }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
h4 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--anthrazit); color: var(--offwhite); padding: 0.6rem 1rem; }
.skip:focus { top: 1rem; }

.klaeren {
  background: var(--klaeren);
  color: var(--anthrazit);
  font-family: var(--sans);
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0;
  padding: 0.05em 0.35em;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 3rem; padding: 0.75rem 1.5rem;
  font: 600 1rem/1.2 var(--sans); letter-spacing: 0.01em;
  border: 1px solid transparent; border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn--primary { background: var(--kastanie); color: #fff; }
.btn--primary:hover { background: var(--kastanie-dunkel); color: #fff; }
.btn--outline { border-color: rgba(250, 247, 242, 0.55); color: var(--offwhite); }
.btn--small { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: 0.95rem; }
.is-disabled { cursor: not-allowed; opacity: 0.85; flex-wrap: wrap; max-width: 100%; text-align: center; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 247, 242, 0.96);
  border-bottom: 1px solid var(--linie);
}
@supports (backdrop-filter: blur(8px)) {
  .site-header { background: rgba(250, 247, 242, 0.88); backdrop-filter: blur(8px); }
}
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 4rem; gap: 1rem; }

.wordmark {
  font-family: var(--serif); font-weight: 600; font-size: 1.3rem; line-height: 1;
  color: var(--anthrazit); text-decoration: none; letter-spacing: -0.01em; margin: 0;
}
.wordmark span { font-weight: 400; color: var(--kastanie); }
.wordmark:hover { color: var(--anthrazit); }
.wordmark--light { color: var(--offwhite); }
.wordmark--light span { color: var(--sand); }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; margin-right: -0.75rem;
  background: none; border: 0; cursor: pointer; color: var(--anthrazit);
}
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
  display: block; width: 1.4rem; height: 2px; background: currentColor; position: relative; transition: transform 0.2s;
}
.nav-toggle-bar::before, .nav-toggle-bar::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bar::before { top: -7px; }
.nav-toggle-bar::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { transform: translateY(-7px) rotate(-45deg); }

.main-nav {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--offwhite); border-bottom: 1px solid var(--linie);
  padding: 0.5rem var(--gutter) 1.5rem;
}
.main-nav.is-open { display: block; }
.main-nav ul { list-style: none; margin-bottom: 1rem; }
.main-nav li a {
  display: block; padding: 0.8rem 0; border-bottom: 1px solid var(--linie);
  color: var(--anthrazit); text-decoration: none; font-weight: 500;
}
.main-nav li a:hover { color: var(--kastanie); }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .main-nav, .main-nav.is-open {
    display: flex; align-items: center; gap: 2rem;
    position: static; padding: 0; border: 0; background: none;
  }
  .main-nav ul { display: flex; gap: 1.75rem; margin: 0; }
  .main-nav li a { border: 0; padding: 0.5rem 0; }
}

/* Hero */
.hero {
  background: var(--hero-bg);
  color: var(--offwhite);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.hero-media { position: relative; }
.hero-media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 62%;
}
.hero-media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 30%;
  background: linear-gradient(to bottom, rgba(12, 11, 10, 0), var(--hero-bg));
}
.hero-text { padding: 0.5rem var(--gutter) 3.5rem; max-width: 40rem; }
.eyebrow {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sand); margin-bottom: 1rem;
}
/* Keine automatische Silbentrennung (sah bei Ortsnamen unruhig aus), Zeilen gleichmäßig verteilt */
.hero h1 { font-size: clamp(1.85rem, 5.5vw, 3.6rem); margin-bottom: 0.5em; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; text-wrap: balance; }
.hero-lead { font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.45; color: var(--sand); }
.trust {
  font-size: 0.9rem; color: #CFC7BB; border-top: 1px solid rgba(233, 223, 208, 0.25);
  padding-top: 1rem; margin-top: 1.5rem; overflow: hidden;
}
/* Jede Angabe bleibt zusammen und bricht nur als Ganzes um. Die Trennpunkte stehen links vor jeder Angabe;
   am Zeilenanfang liegen sie links außerhalb von .trust (overflow: hidden) und sind unsichtbar. */
.trust-list { list-style: none; display: flex; flex-wrap: wrap; row-gap: 0.25rem; margin: 0 0 0 -1.4em; padding: 0; }
.trust-list li { position: relative; padding-left: 1.4em; white-space: nowrap; }
.trust-list li::before { content: "·"; position: absolute; left: 0.55em; color: var(--warmgrau); }
@media (max-width: 359px) { .trust-list li { white-space: normal; } }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* Scroll-down-Button unter "Termin anfragen": runder Kreis mit Pfeil, der sanft nach unten wippt */
.scroll-down {
  display: flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem; margin-top: 2.5rem;
  border: 1px solid rgba(233, 223, 208, 0.45); border-radius: 50%;
  color: var(--sand); text-decoration: none;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.scroll-down:hover { background: var(--sand); border-color: var(--sand); color: var(--anthrazit); }
.scroll-down .icon { width: 1.15rem; height: 1.15rem; stroke-width: 1.5; animation: scroll-down 2s ease-in-out infinite; }
@keyframes scroll-down { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }

/* Hero beim Laden ruhig einblenden */
@keyframes hero-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
.hero-text > * { animation: hero-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-text > :nth-child(2) { animation-delay: 0.08s; }
.hero-text > :nth-child(3) { animation-delay: 0.16s; }
.hero-text > :nth-child(4) { animation-delay: 0.24s; }
.hero-text > :nth-child(5) { animation-delay: 0.32s; }
.hero-text > :nth-child(6) { animation-delay: 0.6s; }
.hero-media img { animation: hero-fade 1.4s ease-out both; }

@media (min-width: 900px) {
  /* Kompakter als vorher: weniger dunkle Fläche über dem Foto */
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; min-height: min(84vh, 50rem); }
  .hero-text {
    grid-column: 1; grid-row: 1;
    padding: 2.5rem 3rem 3rem max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
    max-width: none;
  }
  /* Schrift an die Textspalte koppeln, damit "Pferdephysiotherapie" in eine Zeile passt */
  .hero h1 { font-size: clamp(2rem, 4vw, 3.3rem); }
  .hero-media { grid-column: 2; grid-row: 1; align-self: stretch; }
  /* Bildausschnitt nach unten verschoben, damit Pferd und Frau Klosa höher im Bild stehen */
  /* Bild absolut, damit seine Höhe den Hero nicht aufbläht (vorher rund 960 px statt der Mindesthöhe) */
  .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-position: 40% 75%; }
  /* Mit Container-Einheiten: Ohrenspitzen (bei ca. 24 % der Bildhöhe) sitzen rund 2,5 rem unter der Hero-Oberkante,
     unabhängig von der Bildschirmbreite. clamp verhindert eine Lücke unten. */
  @supports (container-type: size) {
    .hero-media { container-type: size; overflow: hidden; }
    .hero-media img {
      inset: auto; left: 0; width: 100%; height: auto; object-fit: fill;
      top: clamp(100cqh - 150cqw, 2.5rem - 35.7cqw, 0px);
    }
  }
  .hero-media::after { inset: 0 auto 0 0; width: 30%; height: auto; background: linear-gradient(to right, var(--hero-bg), rgba(12, 11, 10, 0)); }
}

/* Sections */
.section { padding: var(--space) 0; }
.section--sand { background: var(--sand); }
.lead { font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.5; max-width: 40rem; }

/* Über mich */
.about { display: grid; gap: 2.5rem; align-items: start; }
.about-text p { max-width: 36rem; }
.about-photo { overflow: hidden; border-radius: var(--radius); }
/* Originalformat, nichts beschnitten */
.about-photo img { width: 100%; height: auto; }
.about-media { display: grid; gap: 1.5rem; }
/* Ella 1990: alter Abzug, Originalformat, mit Bildunterschrift */
.about-ella { margin: 0; justify-self: end; width: min(100%, 26rem); }
.about-ella img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(30, 28, 26, 0.12); }
.about-ella figcaption { font-family: var(--serif); font-size: 1.05rem; color: var(--warmgrau-text); margin-top: 0.6rem; text-align: right; }
.about-quote {
  font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.4;
  border-left: 2px solid var(--kastanie); padding-left: 1.25rem; margin: 2rem 0;
}
.about-facts {
  display: grid; gap: 1.25rem; margin: 2.25rem 0 0;
  border-top: 1px solid var(--linie); padding-top: 1.5rem;
}
.about-facts dt { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; line-height: 1.1; color: var(--kastanie); }
.about-facts dd { margin: 0.3rem 0 0; font-size: 0.92rem; line-height: 1.45; color: var(--warmgrau-text); }
@media (min-width: 480px) { .about-facts { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
@media (min-width: 900px) {
  /* Foto deutlich größer: Fotospalte jetzt breiter als die Textspalte (vorher 1 : 0,8) */
  .about { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 3.5rem; align-items: start; }
  /* Ella-Foto schiebt sich als Abzug über die untere Kante des großen Fotos */
  .about-ella { width: 62%; margin-top: -5.5rem; margin-right: -1rem; position: relative; }
  .about-ella img { border: 6px solid #fff; border-radius: 2px; }
}

.quals { display: grid; gap: 1rem; margin-top: 3.5rem; }
@media (min-width: 900px) { .quals { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.qual { border-top: 1px solid var(--anthrazit); padding: 1rem 0 0.5rem; }
.qual summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.qual summary::-webkit-details-marker { display: none; }
.qual summary::after { content: "+"; font: 400 1.6rem/1 var(--sans); color: var(--kastanie); }
.qual[open] summary::after { content: "−"; }
.qual summary h3 { margin: 0; }
.qual > p { margin-top: 1rem; }
.qual ul { list-style: none; margin: 0.75rem 0 1rem; }
.qual li { padding: 0.45rem 0; border-bottom: 1px solid var(--linie); font-size: 0.98rem; }
.list-label { font-weight: 600; margin: 1.25rem 0 0; }

/* Leitsatz mit Augen-Bild: dunkles Band, das ohne Lücke in den nächsten Abschnitt übergeht */
#ueber-mich { padding-bottom: 0; }
.band { margin-top: var(--space); background: var(--anthrazit); padding: clamp(3rem, 7vw, 5.5rem) 0; }
.band-inner { display: grid; gap: 2rem; align-items: center; }
.band-inner img { width: 100%; height: auto; border-radius: var(--radius); }
.band figcaption {
  font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.35; color: var(--sand);
}
/* Desktop: Augen-Bild füllt die volle Höhe des Bands und reicht bis an den linken Bildschirmrand,
   der Leitsatz steht daneben mittig in der Reihe */
@media (min-width: 900px) {
  .band { padding: 0; }
  .band .band-inner {
    max-width: none; padding: 0;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0; align-items: center;
  }
  /* Originalformat 3:2, Höhe ergibt sich aus der Spaltenbreite, nichts beschnitten */
  .band-inner img { height: auto; border-radius: 0; }
  /* Leitsatz nutzt die Breite der rechten Spalte, links und rechts gleicher Abstand.
     Vorher hing der rechte Abstand am Seitenraster und quetschte den Satz auf breiten Bildschirmen. */
  .band figcaption {
    font-size: clamp(1.6rem, 2.6vw, 2.5rem); line-height: 1.3; max-width: 38rem;
    padding: 3rem clamp(2.5rem, 5vw, 5rem);
    box-sizing: content-box; text-wrap: balance;
  }
}

/* Behandlung */
.ticks { list-style: none; }
.ticks li { position: relative; padding: 0.35rem 0 0.35rem 1.5rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0.1rem; top: 1.02em;
  width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--kastanie);
}

.techniques { display: grid; gap: 2rem; margin-top: var(--space); }

/* Bildreihe (Slider): alle Fotos gleich hoch, jedes in seinem Originalformat, nichts beschnitten.
   Das aktive Foto rastet in der Mitte ein, die Nachbarn schauen links und rechts gedimmt herein.
   Die Reihe läuft über die volle Bildschirmbreite. Kein Scrollbalken. */
.swipe {
  margin-top: 2.5rem;
  /* Handy: Querformat nimmt fast die ganze Breite, links und rechts bleibt ein Streifen für die Nachbarn */
  --swipe-h: min(64vh, calc((100vw - 3.5rem) / 1.5));
}
.swipe-track {
  position: relative; display: flex; align-items: center; gap: clamp(0.75rem, 1.6vw, 1.25rem);
  overflow-x: auto; margin-inline: calc(50% - 50vw); padding-inline: var(--gutter);
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.swipe-track::-webkit-scrollbar { display: none; }
.swipe-track:focus-visible { outline: 2px solid var(--kastanie); outline-offset: -2px; }
.swipe-track figure {
  flex: none; margin: 0; scroll-snap-align: center; scroll-snap-stop: always;
  transition: opacity 0.5s;
}
/* Breite ergibt sich aus width/height im HTML, auch bevor das Bild geladen ist */
.swipe-track img {
  display: block; width: auto; height: var(--swipe-h);
  border-radius: var(--radius); user-select: none; -webkit-user-drag: none;
}
/* Erst mit JS dimmen, sonst blieben ohne Skript alle Fotos blass. Nur Deckkraft, kein transform:
   Safari rechnet Einrastpunkte sonst aus der verkleinerten Box und das Wischen springt. */
.swipe-track.is-ready figure:not(.is-active) { opacity: 0.45; cursor: pointer; }

/* Steuerleiste unter den Fotos: Pfeil, Punkte, Pfeil, mittig */
.swipe-nav { display: flex; justify-content: center; align-items: center; gap: 0.75rem; margin-top: 1.25rem; }
.swipe-nav[hidden] { display: none; }
.swipe-btn {
  display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0; cursor: pointer;
  background: var(--offwhite); color: var(--anthrazit); border: 0; border-radius: 50%;
  box-shadow: 0 1px 2px rgba(30, 28, 26, 0.1), 0 8px 20px -10px rgba(30, 28, 26, 0.45);
  transition: background 0.2s, color 0.2s, opacity 0.25s, transform 0.2s;
}
.swipe-btn .icon { width: 1.2rem; height: 1.2rem; stroke-width: 2; }
.swipe-btn:hover:not(:disabled) { background: var(--kastanie); color: #fff; }
.swipe-btn:active:not(:disabled) { transform: scale(0.94); }
.swipe-btn:focus-visible { outline: 2px solid var(--kastanie); outline-offset: 3px; }
.swipe-btn:disabled { opacity: 0.35; cursor: default; box-shadow: none; }

/* Punkte: aktiver Punkt wird zur Kapsel */
.swipe-dots { display: flex; justify-content: center; }
.swipe-dot {
  display: inline-grid; place-items: center; height: 2.75rem; min-width: 1.5rem; padding: 0 0.3rem;
  border: 0; background: none; cursor: pointer;
}
.swipe-dot::before {
  content: ""; width: 0.55rem; height: 0.55rem; border-radius: 999px;
  background: var(--warmgrau-text); opacity: 0.55; transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.3s, opacity 0.3s;
}
.swipe-dot:hover::before { opacity: 1; }
.swipe-dot[aria-current="true"]::before { width: 1.9rem; background: var(--kastanie); opacity: 1; }
.swipe-dot:focus-visible { outline: 2px solid var(--kastanie); outline-offset: -6px; border-radius: 999px; }

@media (hover: hover) and (pointer: fine) {
  .swipe-track { cursor: grab; }
  .swipe-track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
  .swipe-track.is-dragging img { pointer-events: none; }
}
/* Rechner: Fotos größer, Pfeile etwas größer */
@media (min-width: 900px) {
  .swipe { --swipe-h: min(74vh, 38rem); }
  .swipe-nav { gap: 1rem; margin-top: 1.5rem; }
  .swipe-btn { width: 3rem; height: 3rem; }
}

.indications { display: grid; gap: 2rem; margin-top: 2.5rem; }
@media (min-width: 640px) { .ticks--cols { columns: 2; column-gap: 2rem; } .ticks--cols li { break-inside: avoid; } }
@media (min-width: 900px) { .indications { grid-template-columns: 1.4fr 0.6fr; gap: 3rem; align-items: end; } }
.note {
  background: var(--offwhite); border-left: 2px solid var(--kastanie);
  padding: 1.25rem 1.5rem; border-radius: 0 var(--radius) var(--radius) 0;
}
.note p:last-child { margin: 0; }
.note-title { font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; color: var(--kastanie); margin-bottom: 0.4rem; }

.prices-title { margin-top: var(--space); }
.prices { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .prices { grid-template-columns: 1fr 1fr; align-items: stretch; } }
/* Preiskarten: Foto oben über die volle Breite, Inhalt darunter */
.price-card {
  background: var(--offwhite); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(30, 28, 26, 0.04);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s, opacity 0.9s, translate 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.price-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(30, 28, 26, 0.35); }
.price-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 50%; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.price-card:hover .price-photo { transform: scale(1.03); }
/* Ersttermin: Hochformat im 4:3-Rahmen, Ausschnitt so, dass Gesicht und tastende Hand zu sehen sind */
.price-photo--erst { object-position: 50% 61%; }
.price-body { padding: 1.75rem; }
.price-body h4 { margin-bottom: 0.4rem; }
.price-meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem;
  padding-bottom: 0.9rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--linie);
  color: var(--warmgrau-text); font-size: 0.95rem;
}
.price-meta strong { font-family: var(--serif); font-size: 2rem; font-weight: 600; color: var(--anthrazit); line-height: 1.1; }
.price-meta strong .klaeren { font-size: 0.85rem; }
.price-hint { margin: 1rem 0 0; font-size: 0.95rem; color: var(--warmgrau-text); font-style: italic; }

.facts { display: grid; gap: 1.5rem; margin: 3rem 0 0; }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.facts div { border-top: 1px solid var(--anthrazit); padding-top: 0.9rem; }
.facts dt { font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; color: var(--kastanie); margin-bottom: 0.35rem; }
.facts dd { margin: 0; font-size: 0.98rem; }

/* Kontakt */
.contact { display: grid; gap: 3rem; }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } }
.contact-photo img { width: 100%; border-radius: var(--radius); margin: 1.5rem 0 0; }
.direct { list-style: none; margin-top: 2rem; border-top: 1px solid var(--linie); }
.direct li { padding: 0.55rem 0; border-bottom: 1px solid var(--linie); }
.direct-label { display: block; font-weight: 600; font-size: 0.85rem; }
.area { margin-top: 1rem; }
/* Ab Tablet: Bezeichnung links, Wert rechts in eigener Spalte, umbrechende Zeilen bleiben bündig */
@media (min-width: 640px) {
  .direct li, .area { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 0.5rem; align-items: baseline; }
}

.form { background: var(--sand); padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--radius); }
.field { margin: 0 0 1.25rem; border: 0; padding: 0; min-width: 0; }
.field > label, legend { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.4rem; padding: 0; }
.req { color: var(--kastanie); }
input[type="text"], textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--anthrazit);
  background: #fff; border: 1px solid #A49D94; border-radius: var(--radius);
  padding: 0.75rem 0.85rem; min-height: 3rem;
}
input[type="text"]:focus, textarea:focus { border-color: var(--kastanie); outline: 2px solid var(--kastanie); outline-offset: 0; }
textarea { resize: vertical; min-height: 6.5rem; }
.field-hint { font-size: 0.85rem; color: var(--warmgrau-text); margin: 0.35rem 0 0; text-align: right; }
.field-hint.is-full { color: var(--kastanie); font-weight: 600; }
::placeholder { color: #75706A; }
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem;
  background: #fff; border: 1px solid #A49D94; border-radius: var(--radius);
  padding: 0.5rem 1rem; cursor: pointer; font-size: 0.98rem;
}
.choice:has(input:checked) { border-color: var(--kastanie); box-shadow: inset 0 0 0 1px var(--kastanie); }
input[type="radio"], input[type="checkbox"] { accent-color: var(--kastanie); width: 1.15rem; height: 1.15rem; margin: 0; flex: none; }
.field--check { display: flex; gap: 0.75rem; align-items: flex-start; }
.field--check input { margin-top: 0.25rem; }
.field--check label { font-size: 0.92rem; font-weight: 400; line-height: 1.5; }
.form-note { font-size: 0.85rem; color: var(--warmgrau-text); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { padding: 1rem 1.25rem; border-radius: var(--radius); margin-bottom: 1.5rem; font-weight: 500; }
.form-status.is-ok { background: #E3EEDD; border-left: 4px solid #3F6B2E; }
.form-status.is-error { background: #F6E0DA; border-left: 4px solid #9B2C1A; }
.field.has-error input[type="text"], .field.has-error textarea, .field.has-error .choice { border-color: #9B2C1A; box-shadow: inset 0 0 0 1px #9B2C1A; }
.field--check.has-error input { outline: 2px solid #9B2C1A; outline-offset: 2px; }
.field--check { flex-wrap: wrap; }
.field--check label { flex: 1 1 0; min-width: 0; }
.field-error { flex-basis: 100%; margin: 0.4rem 0 0; font-size: 0.9rem; font-weight: 600; color: #8A2415; }
.form input, .form textarea { scroll-margin-top: 7rem; }

/* Footer */
.site-footer { background: var(--anthrazit); color: #D6CFC5; padding: 3rem 0; }
.footer-inner { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .footer-inner { grid-template-columns: 1fr auto auto; align-items: center; gap: 2.5rem; } }
.site-footer ul { list-style: none; display: flex; gap: 1.5rem; }
.site-footer a { color: var(--offwhite); }
.site-footer a:hover { color: var(--sand); }
.small { font-size: 0.875rem; margin: 0; line-height: 1.7; }
/* Bildnachweis im Impressum */
.credit-block { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 0.75rem; }
.credit-block img { width: 12rem; height: auto; }
.credit-block p { margin: 0; max-width: 28rem; }

/* Header beim Scrollen, aktiver Menüpunkt */
.site-header { transition: box-shadow 0.25s; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(30, 28, 26, 0.08); }
.main-nav li a[aria-current] { color: var(--kastanie); }
@media (min-width: 900px) {
  .main-nav li a { position: relative; }
  .main-nav li a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0.2rem; height: 2px;
    background: var(--kastanie); transform: scaleX(0); transform-origin: left; transition: transform 0.25s;
  }
  .main-nav li a[aria-current]::after, .main-nav li a:hover::after { transform: scaleX(1); }
}

/* Icons */
.icon {
  width: 1.3rem; height: 1.3rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

.icon--fill { fill: currentColor; stroke: none; }

/* Schnellkontakt: mobil Leiste unten */
.quick {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  /* Flex statt festem Raster: Leiste passt sich an, wenn WhatsApp ein- oder ausgeblendet ist */
  display: flex; gap: 0.5rem;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(250, 247, 242, 0.97); border-top: 1px solid var(--linie);
  box-shadow: 0 -6px 24px rgba(30, 28, 26, 0.08);
  transition: transform 0.25s ease;
}
.quick.is-hidden { transform: translateY(110%); }
.quick-item {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 3rem; padding: 0 0.5rem;
  border: 1px solid #A49D94; border-radius: var(--radius);
  background: #fff; color: var(--anthrazit);
  font: 600 0.92rem/1.1 var(--sans); text-decoration: none;
}
.quick-item:hover { color: var(--kastanie); border-color: var(--kastanie); }
.quick-item:not(.quick-item--cta) { flex: 0 0 3.9rem; flex-direction: column; gap: 0.2rem; font-size: 0.75rem; font-weight: 500; }
.quick-item--cta { flex: 1; background: var(--kastanie); border-color: var(--kastanie); color: #fff; white-space: nowrap; }
.quick-item--cta:hover { background: var(--kastanie-dunkel); color: #fff; }
.quick-label .klaeren, .quick-detail { display: none; }
@media (max-width: 419px) { .quick-item--cta .icon { display: none; } }
/* Gelber Punkt: Nummer oder Adresse noch offen */
.quick-item[data-placeholder]::after {
  content: ""; position: absolute; top: 0.35rem; right: 0.35rem;
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--klaeren); box-shadow: 0 0 0 1px rgba(30, 28, 26, 0.35);
}
body { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom)); }

/* Nach oben */
.to-top {
  position: fixed; right: var(--gutter); bottom: calc(5rem + env(safe-area-inset-bottom)); z-index: 39;
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--anthrazit); color: var(--offwhite);
  box-shadow: 0 4px 16px rgba(30, 28, 26, 0.25);
  opacity: 0; visibility: hidden; transform: translateY(0.5rem);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s, background-color 0.2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--kastanie); color: #fff; }
.to-top:focus-visible { outline-offset: 3px; }

/* Schnellkontakt: Desktop rechts am Rand */
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .quick {
    left: auto; right: 0; bottom: auto; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 1px;
    padding: 0; background: none; border: 0; box-shadow: 0 6px 24px rgba(30, 28, 26, 0.18);
    border-radius: var(--radius) 0 0 var(--radius);
  }
  .quick.is-hidden { transform: translateY(-50%); }
  .quick-item--cta { display: none; }
  .quick-item, .quick-item:not(.quick-item--cta) {
    flex: none; width: 3rem; height: 3rem; min-height: 0; padding: 0;
    border: 0; border-radius: 0; background: var(--anthrazit); color: var(--offwhite);
    transition: background-color 0.2s;
  }
  .quick-item:first-child { border-top-left-radius: var(--radius); }
  .quick-item:nth-last-child(2) { border-bottom-left-radius: var(--radius); }
  .quick-item:hover, .quick-item:focus-visible { background: var(--kastanie); color: #fff; }
  .quick-item:focus-visible { outline-color: var(--anthrazit); outline-offset: 2px; }
  .quick-item[data-placeholder]::after { top: 0.4rem; right: 0.4rem; width: 0.45rem; height: 0.45rem; box-shadow: none; }
  .quick-label {
    position: absolute; right: calc(100% + 0.6rem); top: 50%;
    display: flex; align-items: center; gap: 0.5rem; white-space: nowrap;
    padding: 0.5rem 0.85rem; border-radius: var(--radius);
    background: var(--anthrazit); color: var(--offwhite); font-size: 0.9rem; font-weight: 500;
    box-shadow: 0 4px 16px rgba(30, 28, 26, 0.2);
    opacity: 0; visibility: hidden; transform: translate(0.4rem, -50%);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    pointer-events: none;
  }
  .quick-label .klaeren { display: inline; font-size: 0.8rem; }
  .quick-label .quick-detail { display: inline; color: var(--sand); }
  .quick-item:hover .quick-label, .quick-item:focus-visible .quick-label {
    opacity: 1; visibility: visible; transform: translate(0, -50%);
  }
  .to-top { right: 1.25rem; bottom: 1.5rem; }
}
/* Schmale Desktops: Seitenrand breiter als die Leiste rechts (3 rem), damit nichts überdeckt wird */
@media (min-width: 900px) and (max-width: 1279px) { :root { --gutter: 3.5rem; } }

/* Sanfte Einblendungen beim Scrollen. Nur aktiv, wenn main.js .has-reveal setzt. */
.has-reveal .reveal {
  opacity: 0; translate: 0 18px;
  transition: opacity 0.9s ease, translate 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--d, 0) * 0.12s);
}
.has-reveal .reveal.is-in { opacity: 1; translate: 0 0; }
.has-reveal .price-card.reveal {
  transition-property: opacity, translate, transform, box-shadow;
  transition-duration: 0.9s, 0.9s, 0.4s, 0.4s;
  transition-delay: calc(var(--d, 0) * 0.15s), calc(var(--d, 0) * 0.15s), 0s, 0s;
}
.has-reveal .price-card.reveal .price-photo { transform: scale(1.06); }
.has-reveal .price-card.reveal.is-in .price-photo { transform: none; }
.has-reveal .price-card.reveal.is-in:hover .price-photo { transform: scale(1.03); }
/* Trennlinie unter Dauer und Preis zeichnet sich von links */
.price-meta { background: linear-gradient(var(--kastanie), var(--kastanie)) 0 100% / 0 1px no-repeat; transition: background-size 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s; }
.price-card.is-in .price-meta, .price-card:hover .price-meta { background-size: 3rem 1px; }

@media (prefers-reduced-motion: reduce) {
  .quick, .quick-label, .to-top, .main-nav li a::after { transition: none; }
  .hero-text > *, .hero-media img, .scroll-down .icon { animation: none; }
  .has-reveal .reveal { opacity: 1; translate: none; transform: none; transition: none; }
  .price-card, .price-photo, .swipe-track figure, .swipe-dot::before, .swipe-btn { transition: none; }
  .swipe-track { scroll-behavior: auto; }
  .price-card:hover, .price-card:hover .price-photo { transform: none; }
}

/* Unterseiten */
.page { padding: clamp(3rem, 8vw, 6rem) 0; min-height: 60vh; }
.page h1 { font-size: clamp(2rem, 5vw, 3rem); }
.page h2 { font-size: 1.35rem; font-weight: 600; margin-top: 2rem; }
.back { display: inline-block; margin-top: 2rem; }