/* Paropraxis — assets/css/stil.css · Neubau v0.260830.6
   Welt: "Das goldene Praxisschild" — Gold auf Milchglas-Weiß, nach der echten
   Art-déco-Beschriftung der Praxis (Schild-Foto gemessen: Ø #B17C41).
   Vorgabe Aranđel 18.08.2026: Hauptfarben Gold/Weiß, sofort als Zahnarzt-Website
   erkennbar (Kategorie-Standard in voller Handwerksqualität), Déco nur dezent.
   Typografie: Josefin Sans (Display, geometrisch mit 20er-Anklang, variabel 400–600)
   + Geist (Fließtext) — beide selbst gehostet. Präfix --pp-*, --av-*-Brücke = Vertrag.
   Déco-Details (dezent): Doppel-Hairlines in Gold, Bogenfenster-Radius auf Bildern,
   gesperrte Versal-Labels. Keine Schattenberge: Tiefe über Flächen + Goldlinien. */

@font-face {
  font-family: "Josefin Sans";
  src: url("../fonts/josefin-sans-var-latin.woff2") format("woff2");
  font-weight: 100 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-var-latin.woff2") format("woff2");
  font-weight: 380 620; font-style: normal; font-display: swap;
}

:root {
  /* Grundpalette — Gold/Weiß nach Praxisschild */
  --pp-bg: #FDFCFA;              /* Milchglas-Weiß, Seitengrund */
  --pp-flaeche: #F6F1E8;         /* Elfenbein, zweite Fläche */
  --pp-flaeche-2: #F0E7D8;       /* goldgetönte dritte Fläche */
  --pp-ink: #2B2214;             /* warmes Fast-Schwarz */
  --pp-ink-2: #201A0F;           /* dunkler Grund (Fuß, CTA-Banner) */
  --pp-muted: #6E604B;           /* Sekundärtext auf hellem Grund */
  --pp-muted-2: #9A8B72;
  --pp-linie: rgba(177,124,65,.30);       /* Gold-Hairline */
  --pp-linie-stark: rgba(177,124,65,.6);
  --pp-gold: #B17C41;            /* Marken-Gold (Linien, Ornament, Display-Akzente) */
  --pp-gold-tief: #8A5E23;       /* Text- und CTA-Gold auf hellem Grund (WCAG-fest) */
  --pp-gold-hover: #6F4B1A;
  --pp-gold-hell: #C99A5B;       /* Gold auf dunklem Grund */
  --pp-auf-akzent: #FFFFFF;
  --pp-auf-dunkel: #F8F4EA;
  --pp-fehler: #A23A2E;
  --pp-erfolg: #3E6B4F;

  --pp-serif: "Josefin Sans", "Trebuchet MS", sans-serif;   /* Display-Stimme */
  --pp-sans: "Geist", -apple-system, "Segoe UI", Roboto, sans-serif;
  --pp-breite: 1180px;
  --pp-radius: 12px;             /* weiche moderne Rundung */
  --pp-radius-klein: 8px;
  --pp-bogen: 220px;             /* Déco-Bogen für Bildfenster */

  /* Kontaktzeichen als Masken (data-URI, CSP img-src 'self' data: erlaubt das).
     Maske statt Bild, damit sie currentColor tragen und Hover/Fokus mitgehen. */
  --pp-zeichen-telefon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.4 3.6H5.2a1.7 1.7 0 0 0-1.7 1.9C4 14.2 9.8 20 18.5 20.5a1.7 1.7 0 0 0 1.9-1.7v-4.2l-4.1-1.4-1.6 2a14.5 14.5 0 0 1-6-6l2-1.6Z'/%3E%3C/svg%3E");
  --pp-zeichen-brief: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.8' y='5' width='18.4' height='14' rx='.8'/%3E%3Cpath d='m3.4 6.2 8.6 6.3 8.6-6.3'/%3E%3C/svg%3E");
  --pp-zeichen-ort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.2s6.8-6.1 6.8-11a6.8 6.8 0 1 0-13.6 0c0 4.9 6.8 11 6.8 11Z'/%3E%3Ccircle cx='12' cy='10.1' r='2.5'/%3E%3C/svg%3E");
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Design-Brücke für den Editor-Kern — 15 Alias-Variablen, Namen sind Vertrag */
  --av-bg: var(--pp-bg);
  --av-flaeche: var(--pp-flaeche);
  --av-flaeche-2: var(--pp-flaeche-2);
  --av-text: var(--pp-ink);
  --av-gedaempft: var(--pp-muted);
  --av-gedaempft-2: var(--pp-muted-2);
  --av-linie: var(--pp-linie);
  --av-linie-stark: var(--pp-linie-stark);
  --av-akzent: var(--pp-gold-tief);
  --av-auf-akzent: var(--pp-auf-akzent);
  --av-schrift: var(--pp-sans);
  --av-anzeige: var(--pp-serif);
  --av-breite: var(--pp-breite);
  --av-radius: var(--pp-radius-klein);
  --av-fehler: var(--pp-fehler);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--pp-ink-2); overscroll-behavior-y: none; }
/* Sicherheitsnetz gegen waagerechten Ueberlauf — ausdruecklich NICHT die Reparatur.
   Die beiden echten Ursachen (randlose Flaeche mit inset: -100vw, Kachelgitter ohne
   greifende Medienabfrage) sind an ihrer Quelle behoben; ohne dieses Netz ist die Seite
   gemessen ueberlauffrei. Es bleibt stehen, damit eine kuenftig ergaenzte randlose Flaeche
   nicht sofort wieder die ganze Seite verschiebbar macht. Verlassen darf man sich darauf
   nicht: `overflow-x: clip` kennen erst Chrome 90+, Firefox 81+ und Safari 16+ — aeltere
   Browser ignorieren die Zeile, weshalb eine geklammerte, aber ungeloeste Geometrie dort
   weiterhin ueberlaufen wuerde. Geklammert wird am <main>, nicht an <html>: am
   Wurzelelement reicht der Browser overflow an den Viewport weiter und ignoriert `clip`
   (gemessen). `clip` statt `hidden`, weil `hidden` einen Scroll-Container erzeugt und damit
   position: sticky der Kopfzeile sowie das Sprungmarken-Verhalten beschaedigt. */
#inhalt { overflow-x: clip; }
/* One-Pager: Sprungziele dürfen nicht unter der klebenden Kopfzeile landen */
[id] { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  /* Lange Komposita und E-Mail-Adressen dehnen sonst ihren Kasten ueber den Bildschirmrand
     hinaus (gemessen bei 320 px: +86 px). Bricht nur, wenn es sonst ueberliefe. */
  overflow-wrap: break-word;
  background: var(--pp-bg);
  color: var(--pp-ink);
  font-family: var(--pp-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Josefin sitzt tief auf der Grundlinie — line-height bewusst knapp */
/* Überschriften sprechen wie das Praxisschild: Gold, geometrisch, gesperrt gesetzt */
h1, h2, h3 { font-family: var(--pp-serif); font-weight: 600; line-height: 1.12; margin: 0 0 .5em; letter-spacing: .012em; text-wrap: balance; color: var(--pp-gold-tief); }
/* Ueberschriften vom body-weiten overflow-wrap: break-word ausnehmen — dort ist es fuer
   lange Adressen und Komposita im Fliesstext gedacht, in einer Display-Schrift zerschneidet
   es aber Woerter mitten drin ("Zahnerha/lt"). Reicht der Platz wirklich nicht, trennt
   hyphens weiter unten sauber mit Bindestrich statt hart zu schneiden. */
h1, h2, h3, h4 { overflow-wrap: normal; }
h1 { font-size: clamp(2.7rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
p { margin: 0 0 1em; }
a { color: inherit; }
img { max-width: 100%; display: block; }
address { font-style: normal; }

.springen { position: absolute; left: -9999px; top: 0; background: var(--pp-ink); color: var(--pp-auf-dunkel); padding: .75em 1.2em; z-index: 200; border-radius: 0 0 var(--pp-radius-klein) 0; }
.springen:focus { left: 1rem; top: 1rem; }

/* Kern-Label über Sektionen: gesperrte Versalien in Gold (Déco-Detail) */
.eyebrow {
  display: inline-flex; align-items: center; gap: .7em;
  font-family: var(--pp-serif); font-weight: 600; font-size: .8rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--pp-gold-tief); margin-bottom: 1em;
}
.eyebrow::before { content: ""; width: 26px; height: 4px; border-top: 1px solid var(--pp-gold); border-bottom: 1px solid var(--pp-gold); }

/* Zeilenlänge: Der Kern setzt .av-baustein .lead auf 65ch — das sind bei Geist real ~86
   Zeichen pro Zeile. 54ch landet bei ~71 Zeichen und damit im Lesefenster 65–75. */
.lead, .av-baustein .lead { color: var(--pp-muted); font-size: 1.1rem; max-width: 54ch; }
.lead p:last-child { margin-bottom: 0; }

/* ── Knopf-System: „Gravurplatte" ────────────────────────────────────────
   Eigenes Knopfbild nach dem Logo/Praxisschild (Wunsch Aranđel 18.08.2026): angeschnittene
   Ecken wie die Winkel der Déco-Lettern, dazu eine umlaufende Innenlinie — wie ein
   graviertes Messingschild. Ersetzt die runden Pillen.
   --k-schnitt = Größe der Eckabschrägung. clip-path beschneidet auch die Fokus-Outline,
   deshalb liegt der Fokusring als inset-Schatten INNEN (bleibt sichtbar, WCAG 2.4.7). */
.btn, .knopf, .av-baustein a.btn, .av-baustein button.btn {
  --k-schnitt: 11px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .92em 1.9em;
  font-family: var(--pp-sans); font-weight: 600; font-size: .93rem; letter-spacing: .085em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer;
  border: none; border-radius: 0; box-shadow: none;
  clip-path: polygon(var(--k-schnitt) 0, 100% 0, 100% calc(100% - var(--k-schnitt)), calc(100% - var(--k-schnitt)) 100%, 0 100%, 0 var(--k-schnitt));
  background: var(--pp-gold-tief); color: var(--pp-auf-akzent);
  transition: transform 140ms var(--ease-out), background-color 140ms var(--ease-out), color 140ms var(--ease-out);
}
/* Die Gravurlinie: eigene Fläche, 5 px eingerückt, mit demselben Eckschnitt */
.btn::before, .knopf::before, .av-baustein a.btn::before, .av-baustein button.btn::before {
  content: ""; position: absolute; inset: 5px; pointer-events: none;
  border: 1px solid rgba(255,255,255,.42);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: border-color 140ms var(--ease-out);
}
.btn:active, .knopf:active, .av-baustein a.btn:active { transform: scale(.975); }
.btn:focus-visible, .knopf:focus-visible, .av-baustein a.btn:focus-visible, .av-baustein button.btn:focus-visible {
  outline: none; box-shadow: inset 0 0 0 2px var(--pp-auf-akzent), inset 0 0 0 4px var(--pp-ink);
}
@media (hover:hover) and (pointer:fine) {
  .btn-primary:hover, .knopf:not(.zweit):hover, .av-baustein a.btn:hover, .av-baustein button.btn:hover { background: var(--pp-gold-hover); }
  .btn-primary:hover::before, .knopf:not(.zweit):hover::before, .av-baustein a.btn:hover::before { border-color: rgba(255,255,255,.75); }
}
/* Zweitknopf: offene Platte, Goldlinie außen und innen */
.btn-ghost, .knopf.zweit, .av-baustein a.btn.btn-ghost {
  background: transparent; color: var(--pp-ink);
  box-shadow: inset 0 0 0 1.5px var(--pp-linie-stark);
}
.btn-ghost::before, .knopf.zweit::before, .av-baustein a.btn.btn-ghost::before { border-color: rgba(177,124,65,.35); }
@media (hover:hover) and (pointer:fine) {
  .btn-ghost:hover, .knopf.zweit:hover, .av-baustein a.btn.btn-ghost:hover {
    background: rgba(177,124,65,.08); color: var(--pp-ink); box-shadow: inset 0 0 0 1.5px var(--pp-gold-tief);
  }
  .btn-ghost:hover::before, .knopf.zweit:hover::before, .av-baustein a.btn.btn-ghost:hover::before { border-color: rgba(177,124,65,.6); }
}
.btn-ghost:focus-visible, .knopf.zweit:focus-visible, .av-baustein a.btn.btn-ghost:focus-visible {
  box-shadow: inset 0 0 0 2px var(--pp-gold-tief), inset 0 0 0 4px var(--pp-bg);
}
.btn.klein { --k-schnitt: 8px; padding: .6em 1.2em; font-size: .8rem; letter-spacing: .09em; }
.btn.klein::before { inset: 4px; clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
/* Dunkle Kontexte: Gold-hell trägt, Konturen müssen auf Fast-Schwarz sichtbar bleiben */
.av-subcta a.btn.btn-primary, .karte__kachel a.btn.btn-primary { background: var(--pp-gold-hell); color: var(--pp-ink-2); }
.av-subcta a.btn.btn-primary::before, .karte__kachel a.btn.btn-primary::before { border-color: rgba(32,26,15,.35); }
.av-subcta a.btn.btn-ghost, .karte__kachel a.btn.btn-ghost { color: var(--pp-auf-dunkel); box-shadow: inset 0 0 0 1.5px rgba(201,154,91,.6); }
.av-subcta a.btn.btn-ghost::before, .karte__kachel a.btn.btn-ghost::before { border-color: rgba(201,154,91,.35); }
@media (hover:hover) and (pointer:fine) {
  .av-subcta a.btn.btn-primary:hover, .karte__kachel a.btn.btn-primary:hover { background: #DBB077; }
  .av-subcta a.btn.btn-ghost:hover, .karte__kachel a.btn.btn-ghost:hover {
    color: var(--pp-auf-dunkel); background: rgba(201,154,91,.14); box-shadow: inset 0 0 0 1.5px var(--pp-gold-hell);
  }
}
.av-subcta a.btn:focus-visible, .karte__kachel a.btn:focus-visible { box-shadow: inset 0 0 0 2px var(--pp-ink-2), inset 0 0 0 4px var(--pp-gold-hell); }
/* Anfahrt-Link nicht auf Spaltenbreite strecken (sah aus wie ein Eingabefeld) */
.oeffnungszeiten__anfahrt .btn, .oeffnungszeiten__anfahrt a.btn { align-self: flex-start; }


/* Kopfzeile schrumpft beim Scrollen: Das gerahmte Originallogo bekommt beim Ankommen die
   Groesse, die es braucht (96px, Feinschrift lesbar) — sobald gelesen wird, faehrt die
   klebende Leiste auf ein schlankes Mass zurueck. Klasse kommt aus site.js. */
.kopf .marke__bild { transition: height 240ms var(--ease-out); }
.kopf__zeile { transition: padding-block 240ms var(--ease-out); }
.kopf--kompakt .marke__bild { height: 34px; }
.kopf--kompakt .kopf__zeile { padding-block: .55rem; }
@media (prefers-reduced-motion: reduce) {
  .kopf .marke__bild, .kopf__zeile { transition: none; }
}
@media (max-width: 860px) {
  .kopf--kompakt .marke__bild { height: 30px; }
}

/* ── Kopf / Navigation: weiß, mit goldener Doppel-Hairline ─────────────── */
.kopf {
  position: sticky; top: 0; z-index: 100; background: rgba(253,252,250,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--pp-linie);
}
.kopf::after { content: ""; display: block; height: 3px; border-bottom: 1px solid var(--pp-linie); }
.innen { max-width: var(--pp-breite); margin: 0 auto; padding: 0 1.5rem; }
/* padding-block statt Kurzschreibweise: sonst löscht diese Regel das seitliche
   Polster von .innen (Logo klebte mobil links, „Termin buchen" rechts am Rand). */
.kopf__zeile { display: flex; align-items: center; justify-content: space-between; padding-block: .9rem; gap: 1.5rem; }
.marke { display: flex; align-items: center; text-decoration: none; }
/* Gerahmtes Originallogo (1,55:1) — braucht Höhe, sonst ist der Text im Rahmen unleserlich.
   Die Datei liegt bereits in Gold vor, deshalb kein CSS-Farbfilter mehr. */
.marke__bild { height: 46px; width: auto; aspect-ratio: 1186 / 258; }  /* Verhaeltnis reserviert den Platz, sonst springt der Kopf beim Laden */
/* Kopfzeile: rahmenlose Wortmarke (Wunsch Aranđel 18.08.2026) — der Rahmen macht die
   Schrift bei Kopfzeilengroesse unruhig, ohne ihn bleibt sie bis 34 px gut lesbar.
   Die gerahmte Fassung traegt weiterhin die Fussleiste, dort in voller Groesse. */
.marke__text { font-family: var(--pp-serif); font-weight: 600; font-size: 1.25rem; letter-spacing: .06em; color: var(--pp-gold-tief); text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: 1.9rem; }
.nav a:not(.btn) {
  text-decoration: none; color: var(--pp-muted); font-weight: 500; font-size: .96rem;
  position: relative; padding: .2em 0; transition: color 140ms var(--ease-out);
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1.5px; background: var(--pp-gold);
  transform: scaleX(0); transform-origin: left; transition: transform 180ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine) { .nav a:not(.btn):hover { color: var(--pp-ink); } .nav a:not(.btn):hover::after { transform: scaleX(1); } }
.nav a.aktiv { color: var(--pp-ink); }
.nav a.aktiv::after { transform: scaleX(1); }

.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: .5rem; }
.burger span { width: 22px; height: 2px; background: var(--pp-gold-tief); transition: transform 220ms var(--ease-out), opacity 160ms var(--ease-out); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .burger { display: flex; }
  .marke__bild { height: 40px; }
  .nav {
    /* Direkt unter dem gesamten Kopfbereich statt mit einem festen Abstand: Das große
       Praxislogo ist mobil höher als die Standard-Kopfzeile und hatte sonst eine Lücke
       zwischen Kopf und Menü erzeugt. */
    position: absolute; inset: 100% 0 auto 0; background: var(--pp-bg); flex-direction: column;
    align-items: flex-start; gap: 0; padding: 1rem 1.5rem 1.5rem; border-bottom: 2px solid var(--pp-linie);
    transform: scaleY(0); transform-origin: top; opacity: 0; pointer-events: none;
    transition: transform 220ms var(--ease-out), opacity 200ms var(--ease-out);
  }
  .nav.offen { transform: scaleY(1); opacity: 1; pointer-events: auto; }
  .nav a:not(.btn) { width: 100%; padding: .9rem 0; border-bottom: 1px solid var(--pp-linie); }
  .nav a.btn { margin-top: 1rem; }
}

/* ── Hero (Startseite, Kern-Baustein hero.php): hell, Foto rechts ────────
   Ein orchestrierter Auftritt: Inhalt steigt beim Laden sanft ein. */
.hero {
  position: relative; color: var(--pp-ink); background: var(--pp-flaeche);
  padding: clamp(4rem, 10vw, 8rem) 0 clamp(4rem, 9vw, 7rem);
  overflow: hidden; isolation: isolate;
}
/* Das Foto bekommt ein eigenes rechtes Fenster statt der vollen Breite: Der Behandlungsstuhl
   liegt bei 30–58 % der Bildbreite (am Original ausgemessen) und verschwand vorher hinter
   dem Textverlauf. Im 58 %-Fenster mit Position 33 % steht er vollständig frei. */
.hero-mit-foto::before {
  content: ""; position: absolute; inset: 0 0 0 34%; z-index: -2;
  background-image: var(--hero-bild); background-size: cover; background-position: 33% center;
  /* Das Foto löst sich an seiner linken Kante selbst auf — dadurch kann dort keine
     harte Bildkante stehen bleiben, egal wie breit der Bildschirm ist. */
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.30) 20%, #000 46%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.30) 20%, #000 46%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--pp-flaeche) 0%, var(--pp-flaeche) 42%, rgba(246,241,232,.85) 52%, rgba(246,241,232,.25) 66%, rgba(246,241,232,0) 80%);
}
.hero .innen.hero-grid {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 6vw, 4.5rem); align-items: center;
}
.hero-inhalt { animation: hero-auftritt 640ms var(--ease-out) both; }
/* Das Foto trägt die rechte Hero-Hälfte selbst — kein doppeltes Logo darüber */
.hero .hero-visual { display: none; }
@keyframes hero-auftritt { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-inhalt h1 { max-width: 15ch; }
.hero-inhalt h1::after { content: ""; display: block; width: 72px; height: 5px; margin-top: .45em; border-top: 1px solid var(--pp-gold); border-bottom: 1px solid var(--pp-gold); }
/* Das Doppellinien-Ornament wandert von den (entfernten) Eyebrow-Labels unter jede Sektions-Überschrift */
.av-baustein h2::after { content: ""; display: block; width: 56px; height: 5px; margin-top: .5em; border-top: 1px solid var(--pp-gold); border-bottom: 1px solid var(--pp-gold); }
.av-baustein.av-mitte h2::after { margin-left: auto; margin-right: auto; }
.av-subcta h2::after { border-color: var(--pp-gold-hell); }
.hero-text { color: var(--pp-muted); font-size: 1.16rem; max-width: 46ch; margin-top: 1.1rem; }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem; }
@media (max-width: 860px) {
  .hero { padding-top: 3rem; }
  /* Eine Spalte statt zwei (Fund Aranđel 18.08.2026): Das Raster blieb auch auf dem Handy
     zweispaltig, obwohl die rechte Spalte mit .hero-visual leer und ausgeblendet ist. Der
     Text stand dadurch in einer 147-px-Spalte bei 375 px Fensterbreite — schmaler als das
     Wort "Zahnersatz" (227 px), weshalb die Ueberschrift mitten im Wort umbrach. */
  .hero .innen.hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* Foto bleibt Untergrund HINTER dem Text (Aranđel 18.08.2026 — ein eigenes Bildband
     unter dem Text gefiel nicht). Damit es trotzdem deutlich sichtbar wird, ist der Schleier
     jetzt zonenweise nur so dicht wie noetig statt durchgehend 0,94:
       gemessen an der dunkelsten Stelle der Textzone (RGB 22/22/22) braucht
       – Fliesstext in --pp-ink (#2B2214) fuer 4,5:1 nur 0,53 Deckkraft (in --pp-muted waeren es 0,91),
       – die 43-px-Ueberschrift in Gold fuer die bei Grossschrift geltenden 3:1 nur 0,76.
     Deshalb: Fliesstext auf dem Handy in --pp-ink, Schleier 0,86 hinter der Ueberschrift,
     0,64 hinter dem Lauftext, darunter bis 0,20 auslaufend. Ueber und unter dem Text
     ist das Foto damit klar zu sehen. */
  /* Eigenes Motiv fuers Handy (Aranđel 18.08.2026): der helle Flur statt des
     Behandlungsstuhls — ueber ihm ist der Text deutlich besser lesbar, weil die grossen
     Flaechen hell sind. Das Bild ist hochkant auf genau das Verhaeltnis der mobilen Buehne
     geschnitten (820 x 1285 = 0,638), es wird also nicht noch einmal beschnitten.
     Die Variable --hero-bild kommt inline vom Baustein und laesst sich nicht ueberschreiben;
     deshalb eine eigene, die im Zweifel auf das Originalbild zurueckfaellt. */
  .hero-mit-foto { --hero-bild-mobil: url("/assets/img/empfang-header.png"); }
  .hero-mit-foto::before {
    inset: 0; height: auto; background-image: var(--hero-bild-mobil, var(--hero-bild));
    background-position: center center; -webkit-mask-image: none; mask-image: none;
  }
  .hero::after {
    display: block;
    /* ZWEI Lagen (Wunsch Aranđel 18.08.2026: "der Farb-Fade muss auch etwas mehr von links
       kommen") — waagerecht von links wie am Schreibtisch, darunter die senkrechte Staffelung.
       Beide zusammen decken multiplikativ; weil die waagerechte Lage genau dort liegt, wo der
       linksbuendige Text steht, durfte die senkrechte um 10 % duenner werden. Ergebnis
       gemessen: gleicher Kontrastpuffer wie vorher, rechte Bildhaelfte aber sichtbar freier
       (mittlere Deckkraft 0,58 statt 0,62).
       Werte ueber 320/390/430/600/768/860 px geprueft — die Buehne wird mit der Breite flacher
       und das hochkant-Motiv dann anders beschnitten; eine einzelne Breite haette getrogen. */
    background:
      linear-gradient(90deg,
        rgba(246,241,232,.40) 0%,
        rgba(246,241,232,.24) 38%,
        rgba(246,241,232,.07) 72%,
        rgba(246,241,232,0) 100%),
      linear-gradient(180deg,
        rgba(246,241,232,.47) 0%,
        rgba(246,241,232,.77) 8%,
        rgba(246,241,232,.77) 32%,
        rgba(246,241,232,.58) 39%,
        rgba(246,241,232,.58) 66%,
        rgba(246,241,232,.40) 74%,
        rgba(246,241,232,.27) 92%,
        rgba(246,241,232,.16) 100%);
  }
  /* Dunklerer Fliesstext — er ist der Grund, warum der Schleier so viel duenner sein darf. */
  .hero-text { color: var(--pp-ink); }
  /* Der Ghost-Knopf traegt sonst nur Goldschrift auf durchsichtigem Grund; ueber dem Foto
     braucht er eine eigene Flaeche, sonst haengt seine Lesbarkeit am Bildinhalt.
     Die Flaeche kostete allerdings die Kante: Die duenne Goldlinie (--pp-linie-stark, 60 %)
     hatte auf dem hellen Foto Kontrast, auf der hellen Flaeche kaum noch (Fund Aranđel
     18.08.2026: "nicht mehr wirklich wahrnehmbar"). Aussenlinie deshalb auf Tiefgold bei
     85 %, Gravurlinie innen auf 45 % — beides nur im Kopfbereich, der uebrige Bestand
     bleibt unberuehrt. */
  /* ACHTUNG Selektor: Der Kern rendert die Hero-Knoepfe als .knopf bzw. .knopf.zweit,
     NICHT als .btn/.btn-ghost — eine Regel nur auf .btn-ghost greift hier nie (gemessen). */
  .hero-ctas .knopf.zweit, .hero-ctas .btn-ghost, .hero-ctas .btn.btn-ghost {
    background: rgba(246,241,232,.94);
    box-shadow: inset 0 0 0 1.5px rgba(138,94,35,.85);
  }
  .hero-ctas .knopf.zweit::before, .hero-ctas .btn-ghost::before, .hero-ctas .btn.btn-ghost::before {
    border-color: rgba(138,94,35,.45);
  }
}

/* ── Unterseiten-Kopf (subhero): Bild als Déco-Bogenfenster rechts ─────── */
.av-subhero { position: relative; padding: clamp(3.2rem, 8vw, 5.5rem) 1.5rem clamp(4rem, 9vw, 6.5rem); background: var(--pp-flaeche); overflow: visible; }
.av-subhero .hero__in { max-width: var(--pp-breite); margin: 0 auto; position: relative; z-index: 1; padding: 0 1.5rem 0 0; }
.av-subhero h1 { max-width: 16ch; }
.av-subhero .hero__text { color: var(--pp-muted); font-size: 1.12rem; max-width: 46ch; margin-top: 1rem; }
.hero__bg {
  /* Mindestabstand 1.5rem: sonst klebt der Bogen bei ~1200 px am Fensterrand */
  position: absolute; right: max(1.5rem, calc((100% - var(--pp-breite)) / 2 - 1rem)); top: 2.2rem; width: min(38%, 440px);
  aspect-ratio: 4/5; overflow: hidden; box-shadow: none; z-index: 0;
  border-radius: var(--pp-bogen) var(--pp-bogen) var(--pp-radius) var(--pp-radius);
  outline: 1px solid var(--pp-linie); outline-offset: 8px;
}
@media (min-width: 861px) {
  /* Der Bogen ragt sonst in den Folgeblock — Sektion muss ihn samt Luft fassen */
  .av-subhero { min-height: 645px; }
  /* Das Bogenbild liegt absolut rechts: Der Textspalte muss dieser Platz genommen
     werden, sonst laufen Überschrift und Lead darunter (bei 900 px gemessen: 22 px). */
  .av-subhero .hero__in { padding-right: clamp(340px, 46%, 510px); }
}
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  /* Das Bogenbild steht im Quelltext VOR dem Text — mobil braucht es Luft nach unten,
     sonst klebt die Überschrift direkt an der Bildkante (gemessen: 0 px). */
  .hero__bg { position: static; width: 100%; aspect-ratio: 16/10; margin: 0 0 1.9rem; border-radius: var(--pp-radius); outline: none; }
  .av-subhero .hero__in { padding-right: 0; }
  /* Kern-Grundstil setzt das Bild absolut ohne Mobil-Gegenregel — hier neutralisieren */
  .av-subhero .hero__bg img { position: static; height: 100%; }
}

/* ── Sektionsrhythmus ───────────────────────────────────────────────────── */
.av-textabschnitt, .av-featgrid, .av-services, .av-faq, .av-steps, .av-karussell, .av-oeffnungszeiten, .av-karte, .av-hinweis { padding: clamp(3.4rem, 7vw, 6rem) 1.5rem; max-width: var(--pp-breite); margin: 0 auto; }
.av-textabschnitt { max-width: 780px; }
.av-textabschnitt h2 { max-width: 18ch; }

.av-feature { padding: clamp(3.5rem, 8vw, 6rem) 1.5rem; max-width: var(--pp-breite); margin: 0 auto; }
.feature__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.av-feature.feature--umkehr .feature__grid { direction: rtl; }
.av-feature.feature--umkehr .feature__grid > * { direction: ltr; }
/* One-Pager: Praxis- und Angst-Abschnitt stehen direkt hintereinander — der zweite
   spiegelt, damit nicht zweimal dieselbe Anordnung untereinander steht. */
#angst .feature__grid { direction: rtl; }
#angst .feature__grid > * { direction: ltr; }
/* Die Praxisfotos sind nur ~768 px breit (Porträt 768×822) — größer dargestellt
   werden sie sichtbar weich. Deshalb Anzeigebreite deckeln und Spalte zentrieren. */
.feature__media { position: relative; max-width: 400px; margin-inline: auto; }
.feature__media img { aspect-ratio: 4/5; object-fit: cover; border-radius: var(--pp-bogen) var(--pp-bogen) var(--pp-radius) var(--pp-radius); outline: 1px solid var(--pp-linie); outline-offset: 8px; }
.feature__grid h2 { max-width: 15ch; }
@media (max-width: 860px) { .feature__grid { grid-template-columns: 1fr; } .feature__media { order: -1; } .feature__media img { aspect-ratio: 16/10; border-radius: var(--pp-radius); outline: none; } }

/* ── Leistungen: helle Karten mit Gold-Hairline ─────────────────────────── */
.svc__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem 3rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.svc__head h2 { max-width: 16ch; }
/* Der Beitext stand frei am rechten Rand und wirkte losgelöst (Fund Aranđel 18.08.2026).
   Jetzt ist er als Randnotiz gesetzt: schmaler, mit Goldlinie darüber angebunden und mit
   Abstand zur Außenkante, damit er nicht am Containerrand klebt. */
.svc__head .lead {
  max-width: 40ch; margin-right: clamp(0rem, 5vw, 5rem);
  padding-top: .85rem; border-top: 1px solid var(--pp-linie);
  font-size: 1.02rem;
}
@media (max-width: 860px) {
  .svc__head .lead { margin-right: 0; max-width: none; }
}
/* Kern-Grundstil setzt .av-services .svc__grid auf auto-fit — hier bewusst 2 ruhige Spalten */
.av-services .svc__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.av-services .card, .card {
  display: flex; gap: 1.3rem; align-items: flex-start; padding: 1.7rem 1.7rem;
  background: #FFFEFB; border: 1px solid var(--pp-linie); border-radius: var(--pp-radius);
  text-decoration: none; color: inherit;
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out), transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine) { .av-services a.card:hover, a.card:hover { border-color: var(--pp-linie-stark); background: #FFFDF7; transform: translateY(-3px); box-shadow: 0 14px 30px rgba(138,94,35,.12); } }
/* Karten ohne Link sind keine Knöpfe: Kern-Hover (Lift + schwarzer Schatten) neutralisieren */
.av-services .card:not(a):hover { transform: none; box-shadow: none; border-color: var(--pp-linie); background: #FFFEFB; }
.card__ziffer { font-family: var(--pp-serif); font-size: 1.9rem; font-weight: 400; color: var(--pp-gold); line-height: 1; flex-shrink: 0; min-width: 2.1ch; padding-top: .15em; }
.card__body h3 { margin-bottom: .35em; }
.card__body p { color: var(--pp-muted); margin: 0; font-size: .98rem; }
@media (max-width: 760px) { .av-services .svc__grid { grid-template-columns: 1fr; } }
/* Leistungs-Sektionen wechseln auf Elfenbein, Karten bleiben weiß */
.av-services { position: relative; }
/* Randlose Flaeche ohne Ueberlauf (korrigiert 18.08.2026): Frueher ragte dieses Element
   per inset: 0 -100vw um eine volle Fensterbreite nach rechts hinaus und machte die ganze
   Seite waagerecht verschiebbar. Jetzt bleibt der Kasten exakt auf der Sektion (inset: 0),
   und die Farbe wird per Schlagschatten nach aussen getragen — ein Schatten ist Farbe, keine
   Geometrie, und zaehlt daher nicht zum scrollbaren Bereich. clip-path schneidet den Schatten
   oben und unten wieder ab, damit die Flaeche nur waagerecht auslaeuft. Der clip-path wirkt
   nur auf dieses Pseudoelement (es hat keine Kinder) — die Karten der Sektion bleiben
   unberuehrt. 100vmax deckt auch Hochkant-Bildschirme sicher ab. */
.av-services::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--pp-flaeche);
  box-shadow: 0 0 0 100vmax var(--pp-flaeche);
  clip-path: inset(0 -100vmax);
}
/* Jede zweite Leistungs-Sektion bleibt auf Seitengrund: Fuellung UND Schatten abschalten —
   nur die Fuellung zu entfernen liesse den Schatten als Rahmen links und rechts stehen. */
.av-services:nth-of-type(odd)::before { background: transparent; box-shadow: none; }

/* ── Featgrid („So arbeiten wir") ───────────────────────────────────────── */
.av-featgrid .feat__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 1.2rem; }
/* Ab sechs Kacheln auf drei Spalten: bei 4er-Raster bliebe sonst eine angebrochene
   Reihe aus zwei Kacheln stehen (gemessen auf der Praxis-Seite, 18.08.2026). */
.av-featgrid .feat__grid:has(.feat:nth-child(6)) { grid-template-columns: repeat(3, 1fr); }
/* Kern setzt border-top: 3px Akzentbalken + Hover-Lift — zurück zur 1px-Hairline-Welt */
.av-featgrid .feat, .feat { padding: 1.6rem 1.5rem; background: var(--pp-bg); border: 1px solid var(--pp-linie); border-top: 1px solid var(--pp-linie); border-radius: var(--pp-radius); }
.av-featgrid .feat:hover { transform: none; box-shadow: none; border-color: var(--pp-linie); }
.feat__ziffer { display: block; font-family: var(--pp-serif); font-size: 1.5rem; color: var(--pp-gold); margin-bottom: .4rem; }
.feat h3 { font-size: 1.08rem; margin-bottom: .3em; }
.feat p { color: var(--pp-muted); font-size: .95rem; margin: 0; }
.av-featgrid .feat h3 { color: var(--pp-gold-tief); }
/* Spaltenzahl auf schmalen Schirmen. Die Selektoren muessen die Grundregel oben
   (.av-featgrid .feat__grid) UND die :has-Regel fuer sechs Kacheln ueberbieten — mit dem
   frueheren blossen .feat__grid taten sie das nicht, und das Gitter blieb auf dem Handy
   vierspaltig und lief aus dem Bild heraus (Fund 18.08.2026, Aranđel). */
@media (max-width: 860px) {
  .feat__grid,
  .av-featgrid .feat__grid,
  .av-featgrid .feat__grid:has(.feat:nth-child(6)) { grid-template-columns: repeat(2, 1fr); }
}
/* Sehr schmale Schirme (ab iPhone SE, 320 px): Knopfbeschriftungen duerfen umbrechen,
   sonst steht der Knopf breiter als das Fenster (white-space: nowrap oben). */
@media (max-width: 400px) {
  .btn, .knopf, .av-baustein a.btn, .av-baustein button.btn { white-space: normal; max-width: 100%; }
}
@media (max-width: 560px) {
  .feat__grid,
  .av-featgrid .feat__grid,
  .av-featgrid .feat__grid:has(.feat:nth-child(6)) { grid-template-columns: 1fr; }
}

/* ── Merkmale-Band (Barrierefrei · Klimatisiert · Bestellpraxis) ─────────────
   Randlose Leiste direkt unter der Bühne. Bewusst KEINE Kacheln wie im übrigen
   featgrid, sondern eine durchgehende Fläche mit Haarlinien-Trennern — das liest
   sich als eingraviertes Schild statt als weiterer Kartensatz. Die id-Selektoren
   (1,1,0) schlagen sowohl den Kern-Grundstil als auch den Sektionsrhythmus oben,
   deshalb müssen Innenabstand und Breite hier vollständig neu gesetzt werden. */
#merkmale, #merkmale-kontakt {
  max-width: none; padding: clamp(1.5rem, 3vw, 2.1rem) 0;
  background: var(--pp-flaeche);
  border-top: 1px solid var(--pp-linie); border-bottom: 1px solid var(--pp-linie);
}
/* Überschrift nur für Screenreader — die drei Begriffe sprechen für sich, und eine
   sichtbare Zeile würde die Leiste zum vollwertigen Abschnitt aufblähen. */
#merkmale > h2, #merkmale-kontakt > h2 {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
#merkmale .feat__grid, #merkmale-kontakt .feat__grid {
  grid-template-columns: repeat(3, 1fr); gap: 0;
  /* Innenabstand hier statt am Abschnitt: so steht die erste Spalte auf derselben
     Fluchtlinie wie die Überschriften der übrigen Abschnitte (gemessen 76 px). */
  max-width: var(--pp-breite); margin: 0 auto; padding-inline: 1.5rem;
}
#merkmale .feat, #merkmale-kontakt .feat {
  background: none; border: 0; border-radius: 0;
  border-left: 1px solid var(--pp-linie);
  padding: .1rem clamp(1rem, 2.6vw, 2.2rem);
}
#merkmale .feat:first-child, #merkmale-kontakt .feat:first-child { border-left: 0; padding-left: 0; }
#merkmale .feat h3, #merkmale-kontakt .feat h3 {
  font-size: 1.02rem; letter-spacing: .03em; margin-bottom: .25em;
}
#merkmale .feat p, #merkmale-kontakt .feat p { font-size: .9rem; line-height: 1.55; }
@media (max-width: 760px) {
  #merkmale .feat__grid, #merkmale-kontakt .feat__grid { grid-template-columns: 1fr; gap: .85rem; }
  #merkmale .feat, #merkmale-kontakt .feat {
    border-left: 0; padding: .85rem 0 0; border-top: 1px solid var(--pp-linie);
  }
  #merkmale .feat:first-child, #merkmale-kontakt .feat:first-child { border-top: 0; padding-top: 0; }
}

/* ── Karussell: Bild-Bühne, läuft aus dem Raster ────────────────────────── */
.av-karussell { max-width: none; padding-left: 0; padding-right: 0; position: relative; }
.av-karussell h2 { max-width: var(--pp-breite); margin: 0 auto 1.8rem; padding: 0 1.5rem; }
.karussell__huelle { position: relative; }
/* Karussell mit hervorgehobener Mitte (Wunsch Aranđel 18.08.2026): Die mittlere Folie steht
   in voller Groesse, die Nachbarn werden nach aussen hin kleiner und blasser. Die Groesse
   macht site.js per transform — LAYOUT-neutral, damit Rasten, Endlosumlauf und Zieh-Mathematik
   unberuehrt bleiben. Die Spur ist position: relative, weil site.js seither mit offsetLeft
   rechnet: getBoundingClientRect liefert bei skalierten Folien die VERKLEINERTE Kante und
   haette jede Positionsrechnung verfaelscht. */
.karussell__spur {
  display: flex; gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  /* Innenabstand = halbe Restbreite, damit die erste und die letzte Folie mittig stehen koennen */
  padding: .6rem calc(50% - var(--folie) / 2) 1.2rem;
  position: relative; scrollbar-width: none;
}
.karussell__spur::-webkit-scrollbar { display: none; }
/* Mit der Maus ziehbar (site.js); Touch scrollt ohnehin nativ */
.karussell__spur { cursor: grab; }
.karussell__spur--zieht { cursor: grabbing; user-select: none; }
.karussell__spur img { -webkit-user-drag: none; user-select: none; }
/* Dunkler Grund unter dem Foto: verhindert das weiße Aufblitzen beim Laden, ist der
   richtige Rückfall, wenn ein Bild fehlt — und macht den Schleier-Kontrast der
   Bildunterschrift auch für rein statische Prüfungen auflösbar. */
.av-karussell { --folie: min(78vw, 660px); }
/* Handy: EINE Aufnahme, keine angeschnittenen Nachbarn mehr (Aranđel 19.08.2026: "das leichte
   nach links und rechts wackeln der Bilder gefaellt mir nicht"). Die Folie nimmt die Buehne
   fast ganz ein; dass es weitergeht, zeigen die Punktreihe und der einmalige Wisch-Hinweis. */
@media (max-width: 759px) { .av-karussell { --folie: calc(100% - 3rem); } }
/* Kern-Spezifitaet noetig: grundstil.css setzt scroll-snap-align: start und die Folie
   raste sonst weiterhin linksbuendig ein — die vergroesserte Folie stuende dann nicht mittig. */
.av-karussell .karussell__folie { scroll-snap-align: center; }
.karussell__folie {
  flex: 0 0 auto; width: var(--folie); scroll-snap-align: center; margin: 0; position: relative;
  border-radius: var(--pp-radius); overflow: hidden; background: var(--pp-ink-2);
  /* Keine transition: site.js setzt die Groesse pro Einzelbild — ein Uebergang liefe der
     Zeigerbewegung hinterher. Die Weichheit kommt aus der Bildrate, nicht aus der Kurve. */
  transform-origin: center center; will-change: transform;
}
/* Nachbarfolien holt ein Klick in die Mitte — der Zeiger muss das zeigen. Die Spur bleibt
   eine Ziehflaeche (cursor: grab), nur die seitlichen Folien weisen auf den Klick hin. */
.karussell__folie { cursor: pointer; }
.karussell__folie.folie--mitte { cursor: inherit; }
/* Rueckmeldung beim Zeigen: filter statt opacity, weil die Deckkraft von site.js je
   Einzelbild gesetzt wird und eine CSS-Regel dagegen nicht ankaeme. */
@media (hover: hover) and (pointer: fine) {
  .karussell__folie:not(.folie--mitte):hover { filter: brightness(1.08); }
}
.karussell__spur--zieht .karussell__folie { cursor: grabbing; }
/* Bewegungsarme Einstellung: keine wandernde Groesse, alle Folien gleich */
@media (prefers-reduced-motion: reduce) { .karussell__folie { transform: none !important; opacity: 1 !important; } }
.karussell__bild { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
/* Kern-Spezifität nötig (.av-karussell … gewinnt sonst): Der Kern-Verlauf ist oben
   durchsichtig, genau dort steht aber der fette Folientitel — auf hellen Fotos ergab das 1,0:1.
   Der Schleier deckt jetzt die gesamte Textzone (≈8:1 auch über weißer Wand). */
.karussell__folie figcaption,
.av-karussell .karussell__folie figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3.4rem 1.2rem 1.05rem;
  background: linear-gradient(180deg, rgba(32,26,15,0) 0%, rgba(32,26,15,.18) 30%, rgba(32,26,15,.62) 62%, rgba(32,26,15,.92) 100%);
  color: var(--pp-auf-dunkel); font-size: .93rem; font-weight: 500;
}
/* Pfeile folgen dem Knopfbild: angeschnittene Ecken statt Kreis
   (Kern-Spezifität nötig — grundstil.css setzt border-radius: 50%) */
/* Runde Icon-Knöpfe gab es hier nie — sie tragen den Eckschnitt der Gravurplatte. Was
   ihnen fehlte, war die zweite Hälfte des Knopfbildes: die eingerückte Gravurlinie und die
   kräftige Tiefgold-Kante der übrigen Knöpfe (Fund Aranđel 18.08.2026: "sollen mehr im
   Design der anderen Buttons sein"). Beides steht jetzt im gemeinsamen Block weiter unten
   — hier bleiben nur Lage und Größe. */
.av-karussell .karussell__pfeil, .karussell__pfeil {
  position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 0;
  border: none;
  background: var(--pp-bg); font-size: 1.3rem; cursor: pointer; color: var(--pp-gold-tief);
  display: none; align-items: center; justify-content: center; transition: transform 140ms var(--ease-out), background-color 140ms var(--ease-out);
}
.karussell__pfeil:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--pp-gold-tief); }
/* Auf dem Handy KEINE Pfeile: Sie saessen zwangslaeufig im Bild (die Folie nimmt fast die
   ganze Breite ein) und verdeckten es. Dort uebernehmen die angeschnittenen Nachbarfolien
   und die Punktreihe die Aufgabe zu zeigen, dass es weitergeht. */
.av-karussell .karussell__pfeil, .karussell__pfeil { display: none; }
@media (min-width: 760px) { .av-karussell .karussell__pfeil, .karussell__pfeil { display: flex; } }
.lichtkasten__knopf { display: flex; }
/* .975 wie bei .btn:active — die Seite hat EINE Druckrückmeldung, nicht zwei. */
.karussell__pfeil:active { transform: translateY(-50%) scale(.975); }
.karussell__vor { left: max(.5rem, calc((100% - var(--pp-breite)) / 2 - 23px)); }
.karussell__nach { right: max(.5rem, calc((100% - var(--pp-breite)) / 2 - 23px)); }
@media (hover:hover) and (pointer:fine) { .karussell__pfeil:hover { background: var(--pp-flaeche-2); } }

/* ── Wisch-Hinweis: läuft einmal über das Bild (nur Handy) ───────────────
   Eine Geste statt einer Erklärung: Die Marke wandert einmal nach links und verblasst.
   Sie liegt über dem Bild, nimmt aber keine Eingaben an (pointer-events: none) — die erste
   Berührung gehört dem Karussell, nicht dem Hinweis. `animation` statt `transition`, weil
   es ein einmaliger Ablauf ist und kein Zustandswechsel. */
.karussell__wisch {
  /* z-index 60: MUSS ueber der Coverflow-Staffelung liegen — site.js hebt die Mittelfolie
     auf z-index 50 (Fund 19.08.2026: die Pille lief vier Runden lang UNSICHTBAR HINTER dem
     Bild, waehrend jede DOM-Messung "vorhanden" meldete; erst ein Bildschirmfoto samt
     elementFromPoint deckte es auf). */
  position: absolute; left: 50%; top: 50%; z-index: 60; pointer-events: none;
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem 1rem; border-radius: 999px;
  background: rgba(32,26,15,.72); color: var(--pp-auf-dunkel);
  font-family: var(--pp-sans); font-size: .82rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  transform: translate(-50%, -50%);
  animation: wisch-hinweis 2.4s var(--ease-out) forwards;
}
.karussell__wischPfeil { font-size: 1.1rem; line-height: 1; opacity: .85; }
/* Einmal nach links, einmal nach rechts, dann verblassen (Vorgabe Aranđel 19.08.2026 —
   die Doppelbewegung war ihm zu viel). Die Auslenkung bleibt kraeftig (34 px), damit die
   einzelne Bewegung nicht untergeht. */
@keyframes wisch-hinweis {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.96); }
  10%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  40%  { opacity: 1; transform: translate(calc(-50% - 34px), -50%); }
  72%  { opacity: 1; transform: translate(calc(-50% + 22px), -50%); }
  88%  { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, -50%); }
}
/* Reduzierte Bewegung: Der Hinweis bleibt, wandert aber nicht — er blendet nur auf und ab.
   Ihn ganz zu verstecken war falsch: Wer Bewegung abschaltet, braucht den Hinweis genauso,
   und auf iOS ist "Bewegung reduzieren" verbreitet (Fund 19.08.2026). */
@media (prefers-reduced-motion: reduce) {
  .karussell__wisch { animation: wisch-ruhig 2.4s var(--ease-out) forwards; }
}
@keyframes wisch-ruhig {
  0%, 100% { opacity: 0; }
  10%, 82% { opacity: 1; }
}

/* ── Punktreihe unter dem Karussell (Handy) ──────────────────────────────
   Ein Punkt je Aufnahme, der mitwandert: beantwortet "wie viele sind es" und "wo bin ich"
   ohne eine einzige Linie im Bild. Antippbar — damit gibt es auf dem Handy einen zweiten
   Weg neben dem Wischen. Am Schreibtisch uebernehmen die Pfeile, dort ist die Reihe aus.
   Der aktive Punkt wird laenger statt nur dunkler: Form traegt weiter als Farbe, und die
   Reihe bleibt auch fuer Farbschwaeche lesbar. */
.karussell__punkte { display: none; }
@media (max-width: 759px) {
  .karussell__punkte {
    display: flex; justify-content: center; align-items: center; gap: .5rem;
    margin: 1.1rem auto 0; padding: 0 1.5rem;
  }
  .karussell__punkt {
    width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px; cursor: pointer;
    background: rgba(138,94,35,.28);
    transition: width 200ms var(--ease-out), background-color 200ms var(--ease-out);
  }
  .karussell__punkt--an { width: 26px; background: var(--pp-gold-tief); }
  .karussell__punkt:focus-visible { outline: 2px solid var(--pp-gold-tief); outline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) { .karussell__punkt { transition: none; } }

/* ── Icon-Knöpfe im Knopfbild der Seite ──────────────────────────────────
   Dieselbe Gravurplatte wie .btn/.knopf, nur quadratisch: Eckschnitt außen, eine zweite
   Linie 5 px eingerückt mit demselben Schnitt, Tiefgold statt der blassen Hairline.
   Werte bewusst identisch zu den Zweitknöpfen im Kopf- und Kontaktbereich (85 % außen,
   45 % innen), damit die Seite EIN Knopfbild hat und nicht zwei ähnliche. */
.karussell__pfeil, .av-karussell .karussell__pfeil, .lichtkasten__knopf {
  --k-schnitt: 9px;
  position: absolute; background: var(--pp-bg); color: var(--pp-gold-tief);
  font-family: var(--pp-sans); font-weight: 600; line-height: 1; cursor: pointer;
  align-items: center; justify-content: center;
  clip-path: polygon(var(--k-schnitt) 0, 100% 0, 100% calc(100% - var(--k-schnitt)), calc(100% - var(--k-schnitt)) 100%, 0 100%, 0 var(--k-schnitt));
  box-shadow: inset 0 0 0 1.5px rgba(138,94,35,.85);
}
.karussell__pfeil::before, .lichtkasten__knopf::before {
  content: ""; position: absolute; inset: 5px; pointer-events: none;
  border: 1px solid rgba(138,94,35,.45);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: border-color 140ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .karussell__pfeil:hover::before, .lichtkasten__knopf:hover::before { border-color: rgba(138,94,35,.7); }
}

/* ── Lichtkasten: das mittlere Bild groß (Wunsch Aranđel 18.08.2026) ──────
   Kein fremdes Skript, kein <dialog> (Kern-unabhängig und in älteren Browsern berechenbar):
   eine feste Fläche über der Seite, die site.js einhängt. Bewegung nur beim Öffnen. */
.lichtkasten {
  position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem); background: rgba(32,26,15,.88);
  opacity: 0; pointer-events: none; transition: opacity 180ms var(--ease-out);
}
.lichtkasten[data-offen] { opacity: 1; pointer-events: auto; }
.lichtkasten__bild {
  max-width: min(96vw, 1200px); max-height: 84vh; width: auto; height: auto;
  border-radius: var(--pp-radius); background: var(--pp-ink-2); display: block;
  transform: scale(.97); transition: transform 220ms var(--ease-out);
}
.lichtkasten[data-offen] .lichtkasten__bild { transform: scale(1); }
.lichtkasten figure { margin: 0; display: flex; flex-direction: column; gap: .9rem; align-items: center; }
.lichtkasten figcaption { color: var(--pp-auf-dunkel); font-size: .98rem; text-align: center; max-width: 60ch; }
.lichtkasten__knopf {
  /* z-index: Die Knoepfe stehen im Markup VOR der Abbildung; ohne eigene Ebene legt sich das
     Bild darueber — auf dem Handy war der linke Pfeil unsichtbar und das X halb verdeckt
     (Fund Aranđel 18.08.2026). Aussehen kommt aus dem gemeinsamen Icon-Knopf-Block oben. */
  z-index: 2; width: 48px; height: 48px; border: none; font-size: 1.45rem;
  transition: transform 140ms var(--ease-out), background-color 140ms var(--ease-out);
}
.lichtkasten__knopf:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--pp-gold-tief); }
.lichtkasten__knopf:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .lichtkasten__knopf:hover { background: var(--pp-flaeche-2); } }
.lichtkasten__zu { top: clamp(.75rem, 3vw, 1.5rem); right: clamp(.75rem, 3vw, 1.5rem); }
.lichtkasten__vor { left: clamp(.5rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lichtkasten__nach { right: clamp(.5rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lichtkasten__vor:active, .lichtkasten__nach:active { transform: translateY(-50%) scale(.975); }
.lichtkasten__zu:active { transform: scale(.975); }
/* Solange der Lichtkasten offen ist, steht die Seite dahinter still. scrollbar-gutter hält
   die Breite konstant, damit das Sperren keinen Sprung erzeugt. */
html { scrollbar-gutter: stable; }
html.lichtkasten-offen { overflow: hidden; }
/* Handy: Das Bild nimmt fast die ganze Breite ein, deshalb duerfen die Knoepfe nicht mehr
   seitlich daneben stehen — sie sitzen auf dem Bild und brauchen Halt gegen jeden Bildinhalt.
   Der Schlagschatten gibt ihn, ohne die Flaeche zu verdunkeln. */
@media (max-width: 700px) {
  .lichtkasten { padding: 3.5rem .75rem 1rem; }
  .lichtkasten__knopf { box-shadow: inset 0 0 0 1.5px rgba(138,94,35,.85), 0 4px 14px rgba(32,26,15,.45); }
  .lichtkasten__vor { left: .6rem; }
  .lichtkasten__nach { right: .6rem; }
  .lichtkasten__zu { top: .75rem; right: .75rem; }
  .lichtkasten__bild { max-height: 72vh; }
}
@media (prefers-reduced-motion: reduce) {
  .lichtkasten, .lichtkasten__bild { transition: none; }
  .lichtkasten__bild { transform: none; }
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
details { border-top: 1px solid var(--pp-linie); padding: 1.2rem 0; }
details:last-of-type { border-bottom: 1px solid var(--pp-linie); }
summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--pp-serif); font-size: 1.4rem; color: var(--pp-gold); transition: transform 200ms var(--ease-out); }
details[open] summary::after { transform: rotate(45deg); }
details p { margin-top: .8rem; color: var(--pp-muted); }

/* ── Ablauf in Schritten ────────────────────────────────────────────────── */
.steps { list-style: none; margin: 1.5rem 0 0; padding: 0; counter-reset: step; }
.step { display: flex; gap: 1.4rem; padding: 1.4rem 0; border-top: 1px solid var(--pp-linie); }
.step:first-child { border-top: none; }
.step__num { font-family: var(--pp-serif); font-size: 1.5rem; color: var(--pp-gold); min-width: 2ch; }

/* ── Hinweis-Box ────────────────────────────────────────────────────────── */
.av-hinweis { max-width: var(--pp-breite); }
/* Der Kern zeichnet links einen dicken farbigen Balken (im Kanon verboten) und tönt den
   Grund per color-mix; beides hier mit Kern-Spezifität auf die Hairline-Welt zurückgeholt. */
.hinweis__box,
.av-hinweis .hinweis__box, .av-hinweis .hinweis__info, .av-hinweis .hinweis__erfolg, .av-hinweis .hinweis__warnung {
  border: 1px solid var(--pp-linie); border-left: 1px solid var(--pp-gold); border-left-width: 1px;
  background: var(--pp-flaeche); padding: 1.5rem 1.7rem; border-radius: var(--pp-radius-klein); position: relative;
}
.av-hinweis .hinweis__box p { max-width: 58ch; }
.hinweis__box::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--pp-gold); opacity: .5; }
.hinweis__titel { display: block; margin-bottom: .4em; font-family: var(--pp-serif); font-weight: 600; font-size: 1.12rem; }
.hinweis__box p:last-child { margin-bottom: 0; }
.hinweis__warnung, .av-hinweis .hinweis__warnung { border-left-color: var(--pp-fehler); }
.hinweis__warnung::before { background: var(--pp-fehler); }
.hinweis__erfolg, .av-hinweis .hinweis__erfolg { border-left-color: var(--pp-erfolg); }
.hinweis__erfolg::before { background: var(--pp-erfolg); }

/* ── Öffnungszeiten & Anfahrt: goldgerahmte Tafel ───────────────────────── */
.oeffnungszeiten__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 5vw, 4rem); background: var(--pp-flaeche); padding: clamp(2rem, 4vw, 3rem); border-radius: var(--pp-radius); border: 1px solid var(--pp-linie); }
/* table-layout: fixed — sonst bestimmt der laengste Zelleninhalt die Tabellenbreite
   (min-content 320 px) und die Tabelle schiebt auf dem Handy die ganze Seite zur Seite
   (gemessen bei 375 px: +31 px, Fund 18.08.2026). Mit fester Aufteilung gelten die
   Spaltenprozente unten, und der Text umbricht statt zu druecken. */
.oeffnungszeiten__tabelle { width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: 1rem; }
.oeffnungszeiten__tabelle tr { border-top: 1px solid var(--pp-linie); }
.oeffnungszeiten__tabelle tr:first-child { border-top: none; }
.oeffnungszeiten__tabelle td { padding: .6rem 0; }
.oeffnungszeiten__tabelle td:first-child { font-weight: 600; width: 40%; }
.oeffnungszeiten__tabelle tr.geschlossen td:last-child { color: var(--pp-muted); }
.oeffnungszeiten__hinweis, .av-oeffnungszeiten .oeffnungszeiten__hinweis { margin-top: 1rem; font-size: .9rem; color: var(--pp-muted); max-width: 58ch; }
.oeffnungszeiten__anfahrt { border-left: 1px solid var(--pp-linie-stark); padding-left: clamp(1.5rem, 3vw, 3rem); display: flex; flex-direction: column; gap: .6rem; justify-content: center; }
.oeffnungszeiten__anfahrt address { font-size: 1.15rem; font-family: var(--pp-serif); font-weight: 600; }
.oeffnungszeiten__anfahrt .telefon { font-weight: 600; text-decoration: none; color: var(--pp-gold-tief); }
@media (max-width: 760px) { .oeffnungszeiten__grid { grid-template-columns: 1fr; } .oeffnungszeiten__anfahrt { border-left: none; border-top: 1px solid var(--pp-linie-stark); padding-left: 0; padding-top: 1.5rem; } }
@media (max-width: 560px) {
  /* Sicherheitsventil: Passt ein langes Wort trotz voller Breite nicht mehr, trennt der
     Browser es nach deutschen Regeln mit Bindestrich (html lang="de") — besser als ein
     harter Schnitt und besser als ein Ueberlauf. Greift nur, wenn es sonst nicht ginge. */
  /* hyphens trennt sauber mit Bindestrich — braucht aber ein Silbenwoerterbuch im Browser.
     Fehlt es (manche Systeme/Umgebungen), bliebe ein langes Wort ungebrochen und schoebe die
     Seite auf: gemessen "Datenschutzerklaerung" bei 320 px, Ueberschrift 333 px in einem
     257-px-Kasten. overflow-wrap: anywhere ist der Notausgang — es bricht nur, wenn es sonst
     nicht geht, und schrumpft anders als break-word auch die Mindestbreite des Kastens. */
  h1, h2, h3 { hyphens: auto; overflow-wrap: anywhere; }
  /* Innenabstand der Kachel kleiner und Zeitzeile etwas schmaler gesetzt: erst damit passt
     "08:00–13:00 Uhr · 14:00–18:00 Uhr" auf dem Handy in EINE Zeile, und der Trennpunkt
     steht mitten im Text statt am Zeilenende (Fund Aranđel 18.08.2026). */
  .av-oeffnungszeiten .oeffnungszeiten__grid { padding: 1.25rem; }
  .oeffnungszeiten__tabelle td:last-child { font-size: .95rem; }
  .oeffnungszeiten__tabelle, .oeffnungszeiten__tabelle tbody { display: block; }
  .av-oeffnungszeiten .oeffnungszeiten__tabelle tr, .oeffnungszeiten__tabelle tr { display: block; padding: .6rem 0; }
  .av-oeffnungszeiten .oeffnungszeiten__tabelle td, .oeffnungszeiten__tabelle td { display: block; padding: 0; border-bottom: none; text-align: left; }
  .oeffnungszeiten__tabelle td:first-child {
    width: auto; font-size: .82rem; font-weight: 600; letter-spacing: .09em;
    text-transform: uppercase; color: var(--pp-gold-tief); margin-bottom: .1rem;
  }
  .oeffnungszeiten__tabelle tr.geschlossen td:last-child { color: var(--pp-muted); }
}

/* ── Standort-Kachel ────────────────────────────────────────────────────── */
/* Kern gewinnt sonst mit hellem Grund (--av-flaeche) UND 4px-Akzentbalken — dabei blieb die
   helle Schrift stehen: Adresse war hell auf hell praktisch unsichtbar. Mit Kern-Spezifität
   zurück auf die dunkle Kachel samt 1px-Hairline. */
.karte__kachel,
.av-karte .karte__kachel {
  background: var(--pp-ink-2); color: var(--pp-auf-dunkel); padding: clamp(2rem, 4vw, 3rem);
  display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap;
  border: 1px solid rgba(201,154,91,.35); border-left: 1px solid rgba(201,154,91,.35);
  border-radius: var(--pp-radius);
}
.karte__adresse,
.av-karte .karte__adresse { font-family: var(--pp-serif); font-weight: 600; font-size: 1.35rem; letter-spacing: .02em; line-height: 1.35; }
.karte__kachel .btn-ghost { border-color: rgba(201,154,91,.55); color: var(--pp-auf-dunkel); }

/* ── Sub-CTA-Banner: der dunkle, goldene Abschluss ──────────────────────── */
.av-subcta { background: var(--pp-ink-2); color: var(--pp-auf-dunkel); padding: clamp(3.4rem, 8vw, 6rem) 1.5rem; position: relative; }
.av-subcta::before, .av-subcta::after { content: ""; position: absolute; left: 0; right: 0; height: 4px; border-top: 1px solid var(--pp-gold); border-bottom: 1px solid var(--pp-gold); opacity: .55; }
.av-subcta::before { top: 10px; } .av-subcta::after { bottom: 10px; }
.subcta { max-width: var(--pp-breite); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.subcta h2 { max-width: 17ch; color: var(--pp-gold-hell); }
.subcta .lead { color: rgba(248,244,234,.78); }
.subcta__btns { display: flex; gap: 1rem; flex-wrap: wrap; }
.av-subcta .eyebrow { color: var(--pp-gold-hell); }
.av-subcta .eyebrow::before { border-color: var(--pp-gold-hell); }
.av-subcta .btn-primary { background: var(--pp-gold-hell); color: var(--pp-ink-2); }
@media (hover:hover) and (pointer:fine) { .av-subcta .btn-primary:hover { background: #DBB077; } }
.av-subcta .btn-ghost { border-color: rgba(201,154,91,.55); color: var(--pp-auf-dunkel); }

/* ── Kontaktformular ────────────────────────────────────────────────────── */
.contact__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); }
.contact__grid h2 { max-width: 14ch; }
.contact__info { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.4rem; }
.contact__info a { text-decoration: none; font-weight: 600; color: var(--pp-gold-tief); }
.form { display: flex; flex-direction: column; gap: 1.1rem; }
.form__status {
  padding: .9em 1.1em; border-radius: var(--pp-radius-klein); font-weight: 600; font-size: .95rem;
  border: 1.5px solid transparent; margin-bottom: .2rem;
}
.form__status--ok { background: rgba(62,107,79,.1); border-color: var(--pp-erfolg); color: var(--pp-erfolg); }
.form__status--fehler { background: rgba(162,58,46,.1); border-color: var(--pp-fehler); color: var(--pp-fehler); }
.form__hinweis, .av-contact .form .form__hinweis { font-size: .88rem; color: var(--pp-muted); margin: .2rem 0 0; max-width: 60ch; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-size: .88rem; font-weight: 600; }
.req { color: var(--pp-gold-tief); }
/* Volle Kern-Spezifität (.av-contact .form .input …), sonst gewinnen die Kern-Defaults
   samt outline:none im Fokus (WCAG 2.4.7) und 1px-Schwachrand (WCAG 1.4.11). */
/* Felder folgen der Eckensprache der Knöpfe (angeschnitten statt gerundet), damit das
   Formular als ein System liest. Rand als inset-Schatten, weil clip-path Ränder beschneidet. */
.input, .textarea,
.av-contact .form .input, .av-contact .form .textarea {
  font-family: var(--pp-sans); font-size: 1rem; padding: .85em 1em; border: none;
  border-radius: 0; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  box-shadow: inset 0 0 0 1.5px var(--pp-linie-stark);
  background: var(--pp-bg); color: var(--pp-ink);
  transition: box-shadow 140ms var(--ease-out);
}
/* Senden-Knopf nicht über die volle Formularbreite ziehen */
.form .btn, .form button.btn, .av-contact .form button { align-self: flex-start; }
.textarea, .av-contact .form .textarea { min-height: 130px; resize: vertical; }
.input:focus, .textarea:focus,
.av-contact .form .input:focus, .av-contact .form .textarea:focus {
  outline: none; box-shadow: inset 0 0 0 2px var(--pp-gold-tief), inset 0 0 0 4px var(--pp-bg), inset 0 0 0 5px var(--pp-gold);
}
.input::placeholder, .textarea::placeholder,
.av-contact .form .input::placeholder, .av-contact .form .textarea::placeholder { color: var(--pp-muted); opacity: 1; }
@media (max-width: 760px) { .contact__grid { grid-template-columns: 1fr; } .row { grid-template-columns: 1fr; } }

/* ── Fuß: dunkel, mit weißem Logo und Goldlinien ────────────────────────── */
.fuss { background: var(--pp-ink-2); color: rgba(248,244,234,.85); padding: 1.4rem 1.5rem 1rem; margin-top: 0; }
.fuss__zeile { padding-bottom: 1rem; border-bottom: 1px solid rgba(201,154,91,.35); }
.fuss__marke { display: flex; justify-content: center; }
/* Das gerahmte Original bleibt erhalten; sein beschnittenes Seitenverhaeltnis verhindert
   eine Verzerrung durch die allgemeine Regel fuer das Kopfzeilenlogo. */
.fuss__logo { height: 90px; width: auto; max-width: none; aspect-ratio: 923 / 575; filter: none; }
.fuss__links { display: flex; gap: 1.5rem; }
.fuss__links a { text-decoration: none; color: rgba(248,244,234,.75); font-size: .92rem; }
@media (hover:hover) and (pointer:fine) { .fuss__links a:hover { color: var(--pp-gold-hell); } }
.fuss__zeile2 { margin: 1.4rem 0 0; font-size: .82rem; color: rgba(248,244,234,.55); display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.fuss__kodran { color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; font-size:.8rem; }
.fuss__kodran strong { color:rgba(248,244,234,.82); letter-spacing:.12em; position:relative; }
.fuss__kodran strong::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:currentColor; transform:scaleX(.1); transform-origin:left; transition:transform .55s cubic-bezier(.23,1,.32,1); }
.fuss__kodran:hover strong::after,.fuss__kodran:focus-visible strong::after { transform:scaleX(1); }
.fuss__kodran_zeile{display:flex;justify-content:center;border-top:1px solid rgba(201,154,91,.35);margin-top:1rem;padding-top:.8rem}.fuss__kodran_zeile .fuss__kodran{color:inherit}



/* ── Ablauf-Schritte: durchgehende Linie statt Stückwerk ─────────────────
   Der Kern zeichnet je Schritt ein eigenes Liniensegment (top: 2.5rem / bottom: -1.75rem),
   wodurch an jeder Ziffer eine Lücke entsteht. Hier eine einzige Linie über die ganze
   Liste, die Ziffern decken sie mit einem Ring in Seitenfarbe ab. */
.av-steps .steps { position: relative; }
/* Querlinien entfallen — die senkrechte Verbindung traegt die Struktur */
.av-steps .step { border-top: none; padding: .4rem 0; }
.av-steps .step:not(:last-child)::before { display: none; }
/* Ein Segment je Schritt statt einer Linie über die ganze Liste (korrigiert 18.08.2026,
   Fund Aranđel: unter der letzten Ziffer stand ein Reststrich). Die durchgehende Linie
   konnte unten nur einen festen Abstand halten — der letzte Schritt ist aber so hoch wie
   sein Text, nicht wie seine Ziffer, weshalb die Linie 100 px zu weit lief.
   Jedes Segment reicht exakt von Ziffermitte zu Ziffermitte:
     oben   = Innenabstand des Schritts (.4rem) + halber Ziffernkreis (1.125rem)
     unten  = Rasterabstand der Liste (1.75rem) + derselbe Betrag, negativ
   Der letzte Schritt bekommt keins — damit endet die Linie in der 4. */
.av-steps .step:not(:last-child)::after {
  content: ""; position: absolute; left: 1.125rem;
  top: calc(.4rem + 1.125rem);
  bottom: calc(-1.75rem - .4rem - 1.125rem);
  width: 2px; background: var(--pp-linie-stark);
  transform: translateX(-50%); transform-origin: top;
}
/* Eingeklappt startet das Segment NUR, wenn der Auftritt ueberhaupt scharf gestellt ist.
   site.js versieht ausschliesslich Bausteine unterhalb von 90 % Fensterhoehe mit .auftritt —
   liegt der Ablauf beim Laden schon im Bild (grosser Bildschirm), bekommt er weder .auftritt
   noch .auftritt--da. Ein bedingungsloses scaleY(0) liesse die Linie dort fuer immer
   verschwinden (Fund 18.08.2026; die frueher durchgehende Linie hatte denselben Fehler). */
.av-steps.auftritt .step:not(:last-child)::after { transform: translateX(-50%) scaleY(0); }
/* Beim Scrollen wird die Verbindung gezogen, die Ziffern erscheinen im Takt dazu:
   jedes Segment läuft dem Erscheinen der nächsten Ziffer (320/600/880 ms) voraus. */
.av-steps.auftritt--da .step:not(:last-child)::after,
.auftritt--da .av-steps .step:not(:last-child)::after {
  transform: translateX(-50%) scaleY(1); transition: transform 520ms var(--ease-out);
}
.av-steps.auftritt--da .step:nth-child(1)::after, .auftritt--da .av-steps .step:nth-child(1)::after { transition-delay: 120ms; }
.av-steps.auftritt--da .step:nth-child(2)::after, .auftritt--da .av-steps .step:nth-child(2)::after { transition-delay: 400ms; }
.av-steps.auftritt--da .step:nth-child(3)::after, .auftritt--da .av-steps .step:nth-child(3)::after { transition-delay: 680ms; }
.av-steps .step__num { box-shadow: 0 0 0 6px var(--pp-bg); }
.auftritt--da .av-steps .step:nth-child(2), .av-steps.auftritt--da .step:nth-child(2) { transition-delay: 320ms; }
.av-steps.auftritt--da .step:nth-child(3) { transition-delay: 600ms; }
.av-steps.auftritt--da .step:nth-child(4) { transition-delay: 880ms; }
@media (prefers-reduced-motion: reduce) { .av-steps.auftritt .step:not(:last-child)::after { transform: translateX(-50%) scaleY(1); } }

/* ── „So erreichen und finden Sie uns" — ein Bereich, zwei Spalten ────────
   Vorgeschichte: Kontakt und Anfahrt standen als vier dünne Bausteine untereinander
   (Sprechzeiten · Text · Knöpfe · Karte). Aranđel: "gefällt mir gar nicht". Neu
   geschnitten mit `emil-design-eng` als Maßstab — keine Dekoration auf einem Stapel,
   sondern eine Komposition:
     Zeile 1  Überschrift über beide Spalten
     Zeile 2  LINKS die Sprechzeiten (Daten), RECHTS Anschrift, Telefon, Anfahrt (Ort),
              getrennt durch die senkrechte Goldlinie des Bausteins
     Zeile 3  Handlungsreihe über die volle Breite: Termin als einzige gefüllte Platte,
              dahinter Telefon, E-Mail, Route — Auskunft oben, Handeln unten.
   Technisch trägt EIN Kern-Baustein die zwei Spalten (oeffnungszeiten), die Knopfreihe
   ist der zweite. Der Kern steckt die Überschrift in die linke Spalte; damit sie über
   beide läuft, wird diese zu `display: contents` und ihre Kinder werden selbst zu
   Rasterzellen. Kein Eingriff in den Kern, kein Wrapper-Hack.
   Bewegung: bewusst keine eigene. Der Bereich wird bei jedem Besuch gesehen — Auftritt
   und Knopf-Feedback (:active scale) genügen, alles Weitere wäre Selbstzweck. */
#kontakt, #kontakt + .av-buttons {
  position: relative; background: var(--pp-flaeche);
  box-shadow: 0 0 0 100vmax var(--pp-flaeche);
  clip-path: inset(-1px -100vmax);
}
#kontakt { padding-bottom: 1.6rem; }
#kontakt .oeffnungszeiten__grid {
  background: none; border: 0; border-radius: 0; padding: 0;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  column-gap: clamp(2rem, 5vw, 4.5rem); row-gap: 1.4rem;
}
#kontakt .oeffnungszeiten__zeiten { display: contents; }
#kontakt .oeffnungszeiten__zeiten > h2 { grid-column: 1 / -1; margin-bottom: .2rem; }
#kontakt .oeffnungszeiten__tabelle { grid-column: 1; grid-row: 2; margin-top: 0; align-self: start; }
#kontakt .oeffnungszeiten__hinweis { grid-column: 1; grid-row: 3; margin-top: .2rem; }
#kontakt .oeffnungszeiten__anfahrt {
  grid-column: 2; grid-row: 2 / span 2; justify-content: flex-start; gap: .5rem;
}
#kontakt .oeffnungszeiten__anfahrt address { font-size: 1.28rem; line-height: 1.35; }
/* Telefonzeichen neben der Nummer (Wunsch Aranđel 19.08.2026). Es steht auf ::before,
   nicht als eigenes Wort — der Link bleibt fuer Vorleseprogramme genau die Nummer. */
#kontakt .oeffnungszeiten__anfahrt .telefon {
  font-size: 1.08rem; display: inline-flex; align-items: center; gap: .5em;
}
#kontakt .oeffnungszeiten__anfahrt .telefon::before {
  content: ""; flex: 0 0 auto; width: 1.05em; height: 1.05em;
  background-color: currentColor; transform: translateY(-.045em);   /* s. o.: Versalmitte */
  -webkit-mask-image: var(--pp-zeichen-telefon); mask-image: var(--pp-zeichen-telefon);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
#kontakt .oeffnungszeiten__anfahrt .lead { font-size: .97rem; margin-top: .5rem; color: var(--pp-muted); }
#kontakt + .av-buttons { padding-top: 0; padding-bottom: clamp(3.4rem, 7vw, 6rem); }
/* ── Kontaktwege: gleiche Zellen statt ausgefranster Reihe ────────────────
   Aranđel 19.08.2026: "Es wirkt nicht geordnet, dass in jeder Reihe unterschiedlich
   große Buttons sind." Ursache war die Kern-Reihe: ein umbrechendes flex mit
   INHALTSBREITEN Knöpfen — jede Zeile endet woanders, und die Breite richtet sich
   nach der Zufälligkeit der Wortlängen ("02324 6859360" gegen "info@paropraxis-af.de").
   Zwei Eingriffe, kein Kern-Umbau:
   1. Raster mit gleich breiten Spalten; jeder Knopf füllt seine Zelle. Damit gibt es
      keine ungleichen Nachbarn mehr — links wie rechts eine durchgehende Kante.
   2. Der Haupt-Knopf steht ALLEIN in seiner Zeile (grid-column: 1 / -1). Wo nur ein
      Element steht, kann keine Ungleichheit entstehen, und er wird dabei zum breiten
      Band mit zentrierter Versalzeile — genau die Anmutung des gravierten Praxisschilds,
      aus dem die Welt dieser Seite kommt. Hierarchie durch Fläche, nicht durch Farbe.
   Die drei Wege darunter sind gleichrangig und werden deshalb wie eine Liste gesetzt:
   linksbündig, das Zeichen in einer eigenen Spalte, sodass Symbole und Wortanfänge
   jeweils auf einer Achse stehen. */
#kontakt + .av-buttons .buttons__reihe {
  max-width: var(--pp-breite); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem;
  border-top: 1px solid var(--pp-linie); padding-top: 1.8rem;
}
#kontakt + .av-buttons .buttons__reihe .btn { width: 100%; }
#kontakt + .av-buttons .buttons__reihe .btn-primary {
  grid-column: 1 / -1; padding-block: 1.15em; letter-spacing: .12em;
}
/* Die drei Wege: Zeichen und Wort als EINE mittige Gruppe.
   Erst linksbündig gesetzt (Symbole auf gemeinsamer Achse) — Aranđel 19.08.2026:
   "Die Symbole und der Text sind nicht mittig nebeneinander platziert." Gemessen war
   die senkrechte Lage schon richtig (0,8 px Abweichung zur optischen Versalmitte); es
   war die waagerechte: Die Gruppe klebte links, rechts stand viel Luft. Jetzt sitzt sie
   mittig im Knopf — die Ordnung tragen die gleich breiten Zellen, nicht die Textkante. */
#kontakt + .av-buttons .buttons__reihe .btn-ghost {
  justify-content: center; gap: .7em; padding-inline: 1.3em;
}
/* Das Zeichen liegt auf ::after (::before traegt die Gravurlinie) und wird per order
   nach vorn geholt. Als Maske eingefaerbt, damit es Hover und Fokus mitgeht. */
#kontakt + .av-buttons .buttons__reihe .btn-ghost::after {
  content: ""; order: -1; flex: 0 0 auto; width: 1.15em; height: 1.15em;
  background-color: currentColor;
  /* Feinausgleich: Flex zentriert das Zeichen auf die Mitte der ZEILENBOX, das Auge
     misst aber gegen die Mitte der VERSALIEN — die liegt hoeher, weil die Zeilenbox
     unten Platz fuer Unterlaengen mitfuehrt, die Versalien nicht haben. Gemessen:
     0,77 px bei 14,9 px Schrift. */
  transform: translateY(-.045em);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
#kontakt + .av-buttons .buttons__reihe .btn-ghost[href^="tel:"]::after {
  -webkit-mask-image: var(--pp-zeichen-telefon); mask-image: var(--pp-zeichen-telefon);
}
#kontakt + .av-buttons .buttons__reihe .btn-ghost[href^="mailto:"]::after {
  -webkit-mask-image: var(--pp-zeichen-brief); mask-image: var(--pp-zeichen-brief);
}
#kontakt + .av-buttons .buttons__reihe .btn-ghost[href*="google.com/maps"]::after {
  -webkit-mask-image: var(--pp-zeichen-ort); mask-image: var(--pp-zeichen-ort);
}
@media (max-width: 760px) {
  /* Eine Spalte — der Haupt-Knopf spannt weiterhin ueber die volle Breite, die drei
     Wege stehen als ruhige Liste darunter. Alle vier exakt gleich breit. */
  #kontakt + .av-buttons .buttons__reihe { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  #kontakt .oeffnungszeiten__grid { grid-template-columns: minmax(0, 1fr); }
  #kontakt .oeffnungszeiten__zeiten > h2,
  #kontakt .oeffnungszeiten__tabelle,
  #kontakt .oeffnungszeiten__hinweis { grid-column: 1; }
  #kontakt .oeffnungszeiten__tabelle { grid-row: auto; }
  #kontakt .oeffnungszeiten__hinweis { grid-row: auto; }
  #kontakt .oeffnungszeiten__anfahrt { grid-column: 1; grid-row: auto; }
}
/* Copyright und Rechtslinks unter der Kontaktleiste. */
.fuss__zeile2 { display: flex; justify-content: center; align-items: center; gap: .8rem 2rem; flex-wrap: wrap; margin: 1rem 0 0; text-align: center; }
.fuss__recht { margin: 0; font-size: .82rem; color: rgba(248,244,234,.55); }
.fuss__links { gap: 1.6rem; }
@media (max-width: 700px) {
  .fuss__zeile2 { flex-direction: column; align-items: center; text-align: center; gap: .8rem; }
  .fuss__links { justify-content: center; flex-wrap: wrap; }
}
@media (max-width: 440px) {
  .fuss__logo { height: 82px; }
}

/* ── Rechtstexte ────────────────────────────────────────────────────────── */
.rechtstext { max-width: 760px; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) 1.5rem clamp(4rem, 7vw, 6rem); }
.rechtstext h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 1.2rem; }
.rechtstext h2 { font-size: 1.45rem; margin-top: 2.4rem; }
.rechtstext p, .rechtstext li { color: var(--pp-muted); }
.rechtstext .warnung { color: var(--pp-fehler); font-weight: 600; }
.rechtstext a { color: var(--pp-ink); text-decoration: underline; text-underline-offset: .18em; overflow-wrap: anywhere; }
@media (hover:hover) and (pointer:fine) { .rechtstext a:hover { color: var(--pp-gold-tief); } }

/* ── 404 & Wartung ──────────────────────────────────────────────────────── */
.fehler404 { max-width: 620px; margin: 0 auto; padding: clamp(5rem, 12vw, 8rem) 1.5rem; }
.fehler404 h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); }
.wartung { display: grid; place-items: center; min-height: 60vh; padding: 2rem 1.5rem; }
.wartung__box { max-width: 520px; text-align: center; border: 1px solid var(--pp-linie); border-radius: var(--pp-radius); padding: 2.5rem 2rem; background: var(--pp-flaeche); }

/* ── Zentrierte Variante (Design-Regler av-mitte) ───────────────────────── */
.av-mitte .hero__in, .av-mitte .svc__head, .av-mitte .feature__grid > div:first-child { text-align: center; margin-left: auto; margin-right: auto; }


/* ── Auftritte beim Scrollen ─────────────────────────────────────────────
   Die Klassen kommen aus site.js (ohne JS bleibt alles sichtbar). Kein Eingriff ins
   native Scrollen — nur ein kurzer Auftritt je Abschnitt, damit die Seite beim Lesen
   lebendig wirkt. Bewegung nur über opacity/transform, Dauer 520–700ms. */
.auftritt { opacity: 0; transform: translateY(18px); }
.auftritt--da { opacity: 1; transform: none; transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out); }
/* Karten, Kacheln, Folien und Schritte folgen leicht versetzt */
/* Karussellfolien sind hier bewusst NICHT dabei (Fund 18.08.2026, Aranđel: "flackert und
   springt wie verrueckt" beim schnellen Scrollen auf dem Handy): site.js schreibt auf sie
   pro Einzelbild ein inline transform: scale() fuer die Karussell-Optik. Eine CSS-transition
   auf derselben Eigenschaft macht aus jeder Groessenaenderung eine 520-ms-Animation mit bis
   zu 280 ms Verzoegerung — zwei Besitzer fuer eine Eigenschaft. Die Sektion selbst blendet
   ein, das genuegt. */
.auftritt .card, .auftritt .feat, .auftritt .step { opacity: 0; transform: translateY(12px); }
.auftritt--da .card, .auftritt--da .feat, .auftritt--da .step {
  opacity: 1; transform: none; transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
.auftritt--da .card:nth-child(2), .auftritt--da .feat:nth-child(2), .auftritt--da .step:nth-child(2) { transition-delay: 70ms; }
.auftritt--da .card:nth-child(3), .auftritt--da .feat:nth-child(3), .auftritt--da .step:nth-child(3) { transition-delay: 140ms; }
.auftritt--da .card:nth-child(4), .auftritt--da .feat:nth-child(4), .auftritt--da .step:nth-child(4) { transition-delay: 210ms; }
.auftritt--da .card:nth-child(5), .auftritt--da .feat:nth-child(5) { transition-delay: 280ms; }
.auftritt--da .card:nth-child(6), .auftritt--da .feat:nth-child(6) { transition-delay: 350ms; }
/* Das Gold-Ornament unter der Ueberschrift wird gezeichnet — dieselbe Geste wie die
   Unterstreichung in der Navigation. */
.auftritt h2::after { transform: scaleX(0); transform-origin: left; }
.auftritt--da h2::after { transform: scaleX(1); transition: transform 700ms var(--ease-out) 140ms; }
@media (prefers-reduced-motion: reduce) {
  .auftritt, .auftritt .card, .auftritt .feat, .auftritt .karussell__folie, .auftritt .step { opacity: 1; transform: none; }
  .auftritt h2::after { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
  .hero-inhalt { animation: none; }
  .burger span, .nav, .karussell__spur { transition: none !important; }
}

/* ── Bewertungen: zwei gegenläufige Kartenreihen ─────────────────────────
   Vorlage: Taste-Library-Eintrag `systra-bewertungen-marquee` (Fach `beweis`).
   Übernommen ist das Niveau, nicht die Komposition: entspanntes Eigentempo statt
   hektischem Marquee, Anhalten auf Anfrage ohne Klick — und das Anhalten ist reines
   CSS (animation-play-state), keine Skriptlogik. Die gewählte Praxis-Übersetzung: Sandfläche,
   elfenbeinfarbene Karten und warme Goldakzente.  */
/* 0.260927.4: gewählte helle Variante Sand. */
.bew {
  --pp-flaeche: #f0e9de;
  --pp-ink: #302c26;
  --pp-muted: #6c645b;
  --pp-gold: #89622e;
  --pp-gold-tief: #89622e;
  --pp-linie: #ded7cb;
  --pp-linie-stark: #b8aa93;
  color: var(--pp-ink);
  max-width: none; padding: clamp(3.4rem, 7vw, 6rem) 0;
  background: var(--pp-flaeche);
  border: 0;
  font-family: Calibri, Geist, sans-serif;
}
.bew__kopf { max-width: var(--pp-breite); margin: 0 auto 1.6rem; padding: 0 1.5rem; }
.bew__kopf .lead { margin-top: .6rem; }
.bew__kopf h2 { color: var(--pp-ink); }

/* Gesamtnote: Beleg, kein Werbebanner — Fließtext neben den Sternen statt Kennzahl. */
.bew__note { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; color: var(--pp-muted); }
.bew__note-text strong { color: var(--pp-ink); font-size: 1.05rem; }
.bew__sterne { color: var(--pp-gold); letter-spacing: .14em; line-height: 1; }

/* Steuerung: WCAG 2.2.2 verlangt für dauerhaft laufende Bewegung einen echten
   Mechanismus zum Anhalten — Hover und Fokus allein genügen dem Kriterium nicht.
   site.js nimmt das hidden weg; ohne JavaScript bleibt der Knopf unsichtbar, weil
   ein wirkungsloser Knopf schlimmer wäre als keiner (dann läuft auch keine
   Animation, denn ohne .bew--laeuft steht die Spur still — siehe unten).           */
.bew__steuer { max-width: var(--pp-breite); margin: 0 auto 1rem; padding: 0 1.5rem; }
.bew__steuer[hidden] { display: none; }
.bew__pause {
  font: inherit; font-size: .9rem; color: var(--pp-gold-tief);
  background: none; border: 1px solid var(--pp-linie); border-radius: 999px;
  padding: .4rem 1rem; cursor: pointer;
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.bew__pause:active { transform: scale(.97); }
.bew__pause:focus-visible { outline: 2px solid var(--pp-gold-tief); outline-offset: 2px; }
@media (hover:hover) and (pointer:fine) {
  .bew__pause:hover { border-color: var(--pp-linie-stark); background: rgba(177,124,65,.08); }
}
.bew__pause-aus { display: none; }
.bew__pause[aria-pressed="true"] .bew__pause-an { display: none; }
.bew__pause[aria-pressed="true"] .bew__pause-aus { display: inline; }

.bew__baender { display: grid; gap: 1.1rem; position: relative; }

/* Die Reihe ist eine per Tastatur ansteuerbare Region (tabindex/role im Markup):
   overflow-x: auto macht sie wirklich scrollbar, sonst wäre der Fokus eine Sackgasse.
   Der weiche Rand ersetzt den harten Schnitt an den Sektionskanten.                  */
.bew__reihe {
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.bew__reihe::-webkit-scrollbar { display: none; }
@media (hover:hover) and (pointer:fine) {
  .bew__reihe { cursor: grab; }
}
.bew__reihe.bew__reihe--zieht { cursor: grabbing; user-select: none; }
.bew--laeuft .bew__reihe--zieht .bew__spur { animation-play-state: paused; }

/* site.js legt auf dem Handy beide Reihen zu einer zusammen und blendet die zweite mit
   `hidden` aus. Diese Regel sichert das ab: Bekäme .bew__reihe hier oder im Editor-Kern
   je ein eigenes `display`, würde das UA-Stylesheet-`display:none` von `hidden` überstimmt
   und die geleerte Reihe bliebe als Lücke stehen. */
.bew__reihe[hidden] { display: none !important; }
.bew__reihe:focus-visible { outline: 2px solid var(--pp-gold-tief); outline-offset: -2px; }

/* KEIN gap zwischen den Karten, sondern margin-right an jeder einzelnen: die Spur trägt
   den Kartensatz zweimal, und -50 % ist nur dann ein nahtloser Umlauf, wenn beide Hälften
   exakt gleich breit sind. Mit gap fehlt am Ende der ersten Hälfte genau ein halber
   Zwischenraum — das ergibt bei jedem Umlauf einen sichtbaren Sprung.                  */
.bew__spur { display: flex; align-items: stretch; width: max-content; }
.bew--laeuft .bew__spur { animation: bew-lauf 115s linear infinite; }
.bew--laeuft .bew__reihe[data-richtung="rechts"] .bew__spur { animation-direction: reverse; }
@keyframes bew-lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Anhalten auf Anfrage — reines CSS, der Kern des Vorbilds. Der Fokus hält genauso an
   wie der Mauszeiger, sonst liefe die Reihe unter dem Tastaturnutzer weg.             */
@media (hover:hover) and (pointer:fine) {
  .bew--laeuft .bew__reihe:hover .bew__spur { animation-play-state: paused; }
}
.bew--laeuft .bew__reihe:focus-within .bew__spur,
.bew--laeuft .bew__reihe:focus .bew__spur { animation-play-state: paused; }
.bew--pausiert .bew__spur { animation-play-state: paused; }

.bew__karte {
  flex: 0 0 clamp(258px, 25vw, 330px); margin: 0 1.1rem 0 0;
  display: flex; flex-direction: column; gap: .8rem;
  padding: 1.5rem 1.6rem;
  background: #fffdf8; border: 1px solid var(--pp-linie); border-radius: var(--pp-radius);
}
.bew__karte .bew__sterne { font-size: .95rem; }
.bew__zitat { margin: 0; flex: 1 1 auto; }
.bew__zitat p { margin: 0; font-size: .97rem; line-height: 1.62; color: var(--pp-ink); }
/* Hervorhebung im Zitat: nur Schriftgewicht, KEINE Farbe. Gold wäre hier zweifach falsch —
   es ist der Akzent für Handlungen (Links, Knöpfe) und würde eine fremde Äußerung zusätzlich
   zur Betonung auch noch als Werbeversprechen einfärben. Das Gewicht reicht, um die Karte im
   Vorbeilaufen erfassbar zu machen. Dass die Hervorhebungen von uns stammen und nicht von den
   Verfasserinnen und Verfassern, sagt der Pflichthinweis unter den Karten. */
.bew__zitat b { font-weight: 600; }
.bew__wer { font-family: var(--pp-serif); font-weight: 600; color: var(--pp-muted); font-size: .95rem; }

/* Fußzeile: Pflichtangabe nach § 5b Abs. 3 UWG und Anhang Nr. 23b UWG — klein gesetzt,
   aber lesbar (keine 11-px-Grauschrift, die den Hinweis faktisch versteckt).          */
.bew__fuss {
  max-width: min(var(--pp-breite), 78ch); margin: 1.5rem auto 0; padding: 0 1.5rem;
  font-size: .88rem; line-height: 1.6; color: var(--pp-muted);
}
.bew__profil { color: var(--pp-gold-tief); white-space: nowrap; }
.bew__extern { font-size: .9em; }
.nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Handy: kein Umlauf, sondern ein Wischband mit Einrasten — dieselbe Idee, andere
   Bedienung (das Vorbild macht es genauso). Die Kopien für den nahtlosen Umlauf
   entfallen hier, sonst wischt man jede Stimme zweimal durch.                        */
@media (max-width: 780px) {
  .bew__spur { animation: none !important; }
  .bew__reihe { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  /* Schmalere Karte = mehr Anschnitt. Das ist das WICHTIGSTE Wisch-Signal, weil es
     dauerhaft da ist: Bei 375 px Gerätebreite bleiben so rund 50 px je Seite für die
     Nachbarkarten übrig statt der 37 px vorher — sichtbar genug, um zu verstehen, dass
     seitlich weitergeht. Die Pille unten ist nur die einmalige Zugabe. */
  .bew__karte { scroll-snap-align: center; flex-basis: min(72vw, 300px); }
  .bew__karte[aria-hidden="true"] { display: none; }
  .bew__steuer { display: none; }
  .bew__baender { gap: .9rem; }
  /* Der weiche Rand muss hier zurücktreten: Bei 5 % frisst er genau den Anschnitt weg,
     den er sichtbar machen soll. 2 % nehmen der Kante die Härte, ohne die Nachbarkarte
     zu verschlucken. */
  .bew__reihe {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
  }
}

/* ── Wisch-Hinweis über den Bewertungen (Handy) ───────────────────────────
   Dieselbe Geste und dieselben Keyframes wie beim Karussell (`wisch-hinweis` /
   `wisch-ruhig`, s. o.) — eine Seite, eine Bildsprache. Nur die Platzierung ist eigen.
   Die vier Lektionen von dort gelten hier genauso und sind der Grund für jede Zeile:
     1. z-index MUSS über allem im Abschnitt liegen (dort lief die Pille vier Runden
        unsichtbar hinter dem Bild, während jede DOM-Messung „vorhanden" meldete).
     2. pointer-events: none — die erste Berührung gehört dem Band, nicht dem Hinweis.
     3. Bei „Bewegung reduzieren" NICHT verstecken, sondern ruhig ein- und ausblenden:
        wer Bewegung abschaltet, braucht den Hinweis genauso.
     4. Abräumen erst verzögert scharf stellen — sonst räumt die Wischbewegung, mit der
        man herscrollt, den Hinweis sofort wieder weg.                                  */
.bew__wisch {
  /* top setzt site.js auf die MITTE DER ERSTEN REIHE. Ein fester Wert wie 50 % wäre falsch:
     Er bezieht sich auf den ganzen Bänder-Container, und der ist auf dem Handy über 900 px
     hoch (zwei Reihen untereinander) — die Pille landete damit am unteren Bildschirmrand,
     halb abgeschnitten. Aufgefallen ist das NUR im Bildschirmfoto; die Stilmessung meldete
     brav „opacity 1, z-index 60". Genau derselbe Fehlertyp wie beim Karussell am
     19.08.2026, nur mit anderer Ursache. Der Wert hier ist der Rückfall ohne Skript. */
  position: absolute; left: 50%; top: 30%; z-index: 60; pointer-events: none;
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem 1rem; border-radius: 999px;
  background: rgba(32,26,15,.72); color: var(--pp-auf-dunkel);
  font-family: var(--pp-sans); font-size: .82rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  transform: translate(-50%, -50%);
  animation: wisch-hinweis 2.4s var(--ease-out) forwards;
}
.bew__wischPfeil { font-size: 1.1rem; line-height: 1; opacity: .85; }
@media (prefers-reduced-motion: reduce) {
  .bew__wisch { animation: wisch-ruhig 2.4s var(--ease-out) forwards; }
}

/* Bewegungsarm: die Reihen stehen still und bleiben trotzdem vollständig erreichbar —
   das Wischband ersetzt den Umlauf. Mit !important, weil der globale Block weiter oben
   animation-duration: 0.001ms !important setzt; eine unendlich wiederholte 0,001-ms-
   Animation wäre nicht Ruhe, sondern Flackern.                                        */
@media (prefers-reduced-motion: reduce) {
  .bew__spur { animation: none !important; }
  .bew__reihe { scroll-snap-type: x proximity; }
  .bew__karte[aria-hidden="true"] { display: none; }
  .bew__steuer { display: none; }
}

/* Sand 0.260927.4: aus der ausgewählten Vorschau; Laufbänder unverändert. */
.bew .bew__kopf { max-width:1280px;margin-bottom:22px; }
.bew .bew__kopf h2 { font:500 clamp(34px,4vw,56px)/1.1 Calibri,Geist,sans-serif;letter-spacing:-.035em;color:#775a32;max-width:22ch;margin:0 0 20px;padding:0; }
.bew .bew__kopf h2::after { display:none; }
.bew .bew__kopf .lead { font-size:18px;margin:0; }
.bew .bew__note { margin-top:22px;gap:12px; }
.bew .bew__note-text strong { font-size:21px; }
.bew .bew__steuer { max-width:1280px;margin-bottom:22px; }
.bew .bew__pause { font-size:14px; }
.bew .bew__karte { flex-basis:clamp(300px,27vw,380px);padding:30px 32px;gap:22px;border:1px solid transparent;background:#fffdf8;border-radius:12px; }
.bew .bew__zitat p { font:400 18px/1.58 Calibri,Geist,sans-serif;color:var(--pp-ink); }
.bew .bew__zitat b { font-weight:600; }
.bew .bew__wer { font:600 16px/1.3 Calibri,Geist,sans-serif;color:#775a32;padding-top:10px; }
.bew .bew__fuss { max-width:1280px;font-size:13px;margin-top:28px; }
@media(max-width:780px) {
 .bew .bew__karte { flex-basis:min(82vw,340px);padding:25px; }
 .bew .bew__kopf h2 { font-size:36px; }
 .bew .bew__zitat p { font-size:17px;line-height:1.6; }
}

/* Kontaktleiste 0.260927.5: mobil Doppeltaste, Desktop Termin rechts unten. */
  .pp-mobile-kontakt {
    position:fixed; z-index:90; left:50%; bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    display:flex; width:max-content; max-width:calc(100% - 24px); padding:4px; gap:0;
    border:1px solid #75634c; border-radius:12px; background:#302b24; box-shadow:0 4px 14px #201a0f24;
    visibility:hidden; transform:translate(-50%,calc(100% + 24px));
    transition:transform 260ms ease-out, visibility 260ms;
  }
  .pp-mobile-kontakt.is-visible { visibility:visible; transform:translate(-50%,0); transition-duration:520ms, 0ms; }
  .pp-mobile-kontakt .btn {
    font-family:Calibri,Geist,sans-serif; text-transform:none; letter-spacing:0; font-weight:600;
    font-size:15px; min-height:44px; line-height:1.2; padding:10px 17px; text-align:center;
    justify-content:center; clip-path:none; border:0; border-radius:8px; box-shadow:none;
    background:none; color:#e5c79c; transition:background 160ms ease-out;
  }
  .pp-mobile-kontakt .btn + .btn { color:#fff; border-left:1px solid #786b59; border-radius:0 8px 8px 0; }
  .pp-mobile-kontakt .btn::before, .pp-mobile-kontakt .btn::after { display:none; }
  .pp-mobile-kontakt .btn:hover { background:#4d4234; }
  .pp-mobile-kontakt .btn:focus-visible { outline:2px solid #e5c79c; outline-offset:2px; }
  html:has(.pp-mobile-kontakt) { scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px)); }
@media (min-width:801px) {
  .pp-mobile-kontakt { left:auto; right:24px; bottom:24px; transform:translateY(calc(100% + 36px)); }
  .pp-mobile-kontakt.is-visible { transform:translateY(0); }
  .pp-mobile-kontakt a[href^="tel:"] { display:none; }
}
@media (prefers-reduced-motion:reduce) { .pp-mobile-kontakt, .pp-mobile-kontakt .btn { transition:none; } }

/* Titelmarkierung: gleiche Schrift und Zeilenhöhe, ausschließlich vorhandenes Gold. */
mark.pp-titel-gold { background:transparent; color:var(--s-gold, var(--pp-gold, #89622e)); font:inherit; line-height:inherit; display:inline; padding:0; }

.va-titel mark.pp-titel-gold { color:#dbb077; }
.pp-merkmale--nacht mark.pp-titel-gold { color:var(--pp-gold-hell); }
.pp-us__buehnentext mark.pp-titel-gold { color:var(--us-gold-hell, #dbb077); }

.sv h2 mark.pp-titel-gold { color:#95744b; }

.pp-us .pp-us__nacht h2 mark.pp-titel-gold { color:var(--pp-gold-hell, #c99a5b); }