/* ============================================================
   Therapie nach Maß — Renato Mikic, Heilmasseur, 1050 Wien

   Leitgedanke: Die Seite muss eine Empfehlung bestätigen, nicht neu
   verkaufen. Die Patienten kommen über Mundpropaganda und mit langem
   Leidensweg. Sie brauchen: das Gesicht, die Bewertungen, die Preise,
   die Anfahrt, den Termin. In dieser Reihenfolge.

   Hell, warm, ruhig. Terracotta #B6713E ist SueLine Cosmetics
   Markenfarbe und verbindet die beiden Praxisseiten.
   ============================================================ */

@font-face {
  font-family: 'Newsreader';
  src: url('fonts/newsreader-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/newsreader-400-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Urbanist';
  src: url('fonts/urbanist-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Urbanist';
  src: url('fonts/urbanist-latin-ext.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --papier:      #FBF8F3;
  --creme:       #F3EDE3;
  --sand:        #EBE0CE;
  --dunkel:      #2E2418;
  --dunkel-hoch: #3E3223;

  --tinte:       #2C2419;
  --tinte-weich: #6B5D4C;
  /* Die Akzentfarbe ist exakt die Farbe seiner Wortmarke aus der alten
     Seite, gemessen aus header.gif: #B76706. Alles Orange auf der Seite
     kommt damit aus seinem eigenen Logo, nicht aus einer Palette. */
  --terracotta:  #B76706;
  --terracotta-tief: #8C4E05;   /* Textvariante, hält 5:1 auf allen drei Flächen */
  --gold:        #D98B2B;       /* Sterne und Logo auf dunklem Grund */
  --linie:       #E4DACA;
  --linie-dunkel:#4A3D2B;

  --serif: 'Newsreader', 'Iowan Old Style', Palatino, Georgia, serif;
  --sans:  'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg:   clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  --fs-xl:   clamp(1.6rem, 1.25rem + 1.5vw, 2.4rem);
  --fs-2xl:  clamp(2.1rem, 1.5rem + 2.9vw, 3.9rem);

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem;
  --sp-6:1.5rem; --sp-8:2rem; --sp-12:3rem; --sp-16:4rem; --sp-24:6rem;

  --breite: min(100% - 2.5rem, 1180px);
  --schmal: min(100% - 2.5rem, 760px);
  /* Eine Radius-Familie für das ganze Projekt: weich.
     Buttons laufen als Pille, Flächen und Bilder mit 16px, Formularfelder
     und kleine Elemente mit 10px. Vorher standen 4px an Bildern gegen
     runde Buttons, das las sich als zwei verschiedene Systeme. */
  --radius: 16px;
  --radius-klein: 10px;
  --schatten: 0 1px 3px rgba(44,36,25,.06), 0 8px 24px -12px rgba(44,36,25,.10);
  --ease: cubic-bezier(.23,1,.32,1);
}

*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
/* Weiches Scrollen erst nach der ersten Interaktion: gilt es schon beim Laden,
   bricht der Sprung zu einem Anker aus der Adresszeile ab und man landet
   irgendwo im Dokument. Genau das passiert bei den Links aus dem Menü, die
   auf behandlungen.html#technik zeigen. :focus-within greift erst, wenn die
   Seite steht, der Ladesprung bleibt dadurch hart und trifft. */
@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
}

html { overflow-x: clip; }

body {
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--tinte);
  background: var(--papier);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--sand); color: var(--tinte); }
:focus-visible { outline: 2px solid var(--terracotta-tief); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-2xl); line-height: 1.06; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); line-height: 1.25; }
p { text-wrap: pretty; }

.breite { width: var(--breite); margin-inline: auto; }
.schmal { width: var(--schmal); margin-inline: auto; }

.eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--terracotta-tief);
  margin-bottom: var(--sp-4);
}
.lede { font-size: var(--fs-lg); line-height: 1.5; color: var(--tinte-weich); max-width: 52ch; }

.abschnitt { padding-block: clamp(2.5rem, 8vw, 6.5rem); }
.abschnitt--creme { background: var(--creme); }
.abschnitt--sand  { background: var(--sand); }
.abschnitt--dunkel { background: var(--dunkel); color: var(--papier); }
.abschnitt--dunkel h2, .abschnitt--dunkel h3 { color: var(--papier); }
.abschnitt--dunkel .lede { color: #D6C9B4; }
.abschnitt--dunkel .eyebrow { color: var(--gold); }

.kopfzeile-block { max-width: 58ch; margin-bottom: var(--sp-8); }
@media (min-width: 700px) { .kopfzeile-block { margin-bottom: var(--sp-12); } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 52px; padding: var(--sp-3) var(--sp-8);
  font-weight: 600; font-size: 1.0625rem; text-decoration: none;
  border: 2px solid transparent; border-radius: 100px; cursor: pointer;
  transition: background 180ms var(--ease), border-color 180ms var(--ease),
              color 180ms var(--ease), transform 90ms var(--ease);
}
.btn:active { transform: scale(.98); }
.btn--voll { background: var(--terracotta-tief); color: #fff; }
.btn--rand { border-color: currentColor; }
.btn--hell { background: var(--papier); color: var(--tinte); }
@media (hover:hover) and (pointer:fine) {
  .btn--voll:hover { background: #74400F; }
  .btn--rand:hover { background: var(--terracotta-tief); border-color: var(--terracotta-tief); color: #fff; }
  .btn--hell:hover { background: #fff; }
}
.btn-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.micro { font-size: var(--fs-sm); color: var(--tinte-weich); }
.abschnitt--dunkel .micro { color: #C4B69F; }

/* Touchziel mindestens 44px hoch, auch wenn es nur ein Textlink ist */
.tel-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600; text-decoration: none;
  border-bottom: 2px solid var(--terracotta);
  white-space: nowrap;
}
.marke { min-height: 44px; justify-content: center; }

/* ---------- Sterne ---------- */
.sterne { display: inline-flex; gap: 2px; vertical-align: middle; }
.sterne svg { width: 18px; height: 18px; fill: var(--gold); }
.sterne--gross svg { width: 22px; height: 22px; }

.bewertung-zeile {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
}
.bewertung-zeile b { font-size: 1.125rem; font-weight: 700; }
.bewertung-zeile a { color: var(--tinte-weich); }

/* ---------- Markenleiste ----------
   Drei Betriebe teilen eine Adresse: Heilmassage (Renato), Kosmetik und
   Supplements (Süner). Der Wechsel gehört über den Header, weil viele
   Besucher über eine der Schwestermarken kommen und sonst nicht wissen,
   daß es die anderen zwei gibt. */
.markenleiste {
  background: var(--dunkel);
  color: #D6C9B4;
  font-size: var(--fs-sm);
}
.markenleiste__innen {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-2) var(--sp-6);
  padding-block: var(--sp-2);
}
.markenleiste__ort { display: none; }
@media (min-width: 780px) { .markenleiste__ort { display: block; opacity: .75; } }
.markenleiste__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.markenleiste__nav > span {
  font-size: var(--fs-sm); opacity: .7; margin-right: var(--sp-2);
  display: none;
}
@media (min-width: 620px) { .markenleiste__nav > span { display: block; } }
.markenleiste__nav a {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-3);
  font-weight: 600; text-decoration: none; color: #D6C9B4;
  border-radius: 100px;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.markenleiste__nav a[aria-current="true"] {
  background: var(--terracotta); color: #fff; cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  .markenleiste__nav a:not([aria-current]):hover { background: var(--dunkel-hoch); color: var(--papier); }
}
/* Der kleine Punkt vor jeder Marke, damit die drei als Familie lesbar sind */
.markenleiste__nav a::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: .55; flex-shrink: 0;
}
.markenleiste__nav a[aria-current="true"]::before { opacity: 1; }

/* ---------- Kopf ----------
   Grundzustand ist die dunkle Leiste: sie schließt an die Markenleiste an und
   ist auf jedem Untergrund lesbar. Auf der Startseite liegt der Kopf über dem
   bildschirmfüllenden Bild und ist dort durchsichtig; sobald man am Bild vorbei
   ist, setzt app.js data-fest und die Leiste wird wieder deckend. Ohne
   JavaScript bleibt sie durchgehend deckend, also niemals unlesbar. */
.kopf {
  position: sticky; top: 0; z-index: 60;
  /* Ein einziger Zustand statt Umschalten per JavaScript: über dem Vollbild
     schimmert das Foto durch, über hellem Inhalt deckt die Leiste ab. Damit
     kann der Kopf in keinem Zustand und in keinem Browser unlesbar werden. */
  background: rgba(40, 31, 20, .88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--papier);
  border-bottom: 1px solid rgba(74, 61, 43, .8);
}
.kopf .marke__zusatz { color: #C4B69F; }
.kopf .nav > a, .kopf .nav__punkt > a { color: var(--papier); }
.kopf .tel-link { color: var(--papier); border-bottom-color: var(--gold); }
.kopf .nav a[aria-current="page"] { border-bottom-color: var(--gold); }
@media (hover:hover) and (pointer:fine) {
  .kopf .nav > a:hover, .kopf .nav__punkt > a:hover { border-bottom-color: var(--gold); }
}
/* eine Spur dunkler als das Logo-Orange: erst dort hält Weiß 4,5:1 */
.kopf .btn--voll { background: #A65D05; }
@media (hover:hover) and (pointer:fine) { .kopf .btn--voll:hover { background: var(--gold); color: var(--tinte); } }
.kopf .nav-schalter { color: var(--papier); }


.kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 68px; }
@media (max-width: 1159px) {
  .kopf__innen { flex-direction: row-reverse; }
  .nav-schalter { margin-right: 0; margin-left: -10px; }
}
/* Die Wortmarke ist das Original aus der alten Seite, aus header.gif
   freigestellt. Deshalb steht hier ein Bild und kein gesetzter Text. */
.marke { display: flex; flex-direction: column; flex-shrink: 0; gap: 3px; line-height: 1.1; text-decoration: none; }
.marke__bild { height: 34px; width: auto; }
@media (min-width: 700px) { .marke__bild { height: 40px; } }
.marke__zusatz { font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-weich); white-space: nowrap; }
.fuss .marke__bild { height: 38px; margin-bottom: var(--sp-3); }

.nav { display: none; gap: var(--sp-4); align-items: center; }
.nav > a, .nav__punkt, .nav-partner { flex-shrink: 0; white-space: nowrap; }
.nav > a, .nav__punkt > a { font-weight: 500; text-decoration: none; padding-block: var(--sp-2); border-bottom: 2px solid transparent; }
@media (hover:hover) and (pointer:fine) { .nav > a:hover, .nav__punkt > a:hover { border-bottom-color: var(--terracotta); } }
.nav a[aria-current="page"] { border-bottom-color: var(--terracotta); }
.kopf__aktion { display: none; align-items: center; gap: var(--sp-4); }

/* ---------- Ausklappmenü Behandlungen ----------
   Die dreizehn Verfahren stehen direkt in der Leiste, damit man ohne Umweg
   sieht, was es gibt. Drei Spalten nach denselben Gruppen wie auf der
   Behandlungsseite. Öffnet per Hover und per Tastaturfokus, ohne JavaScript. */
.nav__punkt { position: relative; display: flex; align-items: center; }
.nav__punkt > a { display: inline-flex; align-items: center; gap: 6px; }
.nav__pfeil { width: 11px; height: 7px; flex-shrink: 0; transition: transform 200ms var(--ease); }
/* Linksbündig am Menüpunkt, nicht zentriert: zentriert schöbe sich der Kasten
   über das Logo hinaus, links am Punkt bleibt er innerhalb der Inhaltsbreite. */
.megamenue {
  position: absolute; top: 100%; left: 0; transform: translateY(6px);
  z-index: 70; padding-top: var(--sp-3);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms;
}
.nav__punkt:hover .megamenue, .nav__punkt:focus-within .megamenue {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.nav__punkt:hover .nav__pfeil, .nav__punkt:focus-within .nav__pfeil { transform: rotate(180deg); }
.nav-partner { position: relative; }
.nav-partner > summary {
  display: inline-flex; align-items: center; gap: 6px;
  padding-block: var(--sp-2); border-bottom: 2px solid transparent;
  font-weight: 500; cursor: pointer; list-style: none;
}
.nav-partner > summary::-webkit-details-marker { display: none; }
.nav-partner[open] > summary, .nav-partner > summary:hover { border-bottom-color: var(--gold); }
.nav-partner[open] .nav__pfeil { transform: rotate(180deg); }
.nav-partner__menue {
  position: absolute; top: 100%; right: 0; z-index: 70;
  display: grid; min-width: 12rem; padding: var(--sp-2);
  background: var(--papier); color: var(--tinte);
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  box-shadow: 0 24px 48px -20px rgba(44,36,25,.28);
}
.nav-partner__menue a {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-klein);
  text-decoration: none; white-space: nowrap;
}
.nav-partner__menue a:hover, .nav-partner__menue a:focus-visible {
  background: var(--creme); color: var(--terracotta-tief);
}
.megamenue__innen {
  /* Farbe ausdrücklich zurücksetzen: der Kopf vererbt Papierweiß für die
     dunkle Leiste, das Menü liegt aber auf hellem Grund. */
  color: var(--tinte);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-8);
  width: max-content; max-width: min(58rem, calc(100vw - 3rem));
  padding: var(--sp-6) var(--sp-8);
  background: var(--papier);
  border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: 0 4px 10px rgba(44,36,25,.06), 0 24px 48px -20px rgba(44,36,25,.28);
}
.megamenue__titel {
  font-size: .6875rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--terracotta-tief); margin-bottom: var(--sp-2); padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--linie);
}
.megamenue ul { list-style: none; padding: 0; margin: 0; }
.megamenue li a {
  display: block; padding: 7px var(--sp-3); margin-inline: calc(var(--sp-3) * -1);
  font-size: var(--fs-sm); font-weight: 500; line-height: 1.35;
  text-decoration: none; border-radius: var(--radius-klein); border-bottom: 0;
}
@media (hover:hover) and (pointer:fine) {
  .megamenue li a:hover { background: var(--creme); color: var(--terracotta-tief); }
}
.megamenue__fuss {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-4);
  padding-top: var(--sp-4); border-top: 1px solid var(--linie);
  font-size: var(--fs-sm); color: var(--tinte-weich);
}
.megamenue__fuss a { font-weight: 600; color: var(--terracotta-tief); border-bottom: 0; text-decoration: underline; text-underline-offset: 3px; }

/* Sprungziele aus dem Menü dürfen nicht unter dem klebenden Kopf landen */
:target, .methode[id], section[id] { scroll-margin-top: 92px; }

.nav-schalter { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: -10px; background: none; border: 0; cursor: pointer; }
.nav-schalter svg { width: 26px; height: 26px; }
.nav-schalter .kreuz { display: none; }
.nav-schalter[aria-expanded="true"] .balken { display: none; }
.nav-schalter[aria-expanded="true"] .kreuz { display: block; }

.mobilnav { display: none; background: var(--papier); color: var(--tinte); border-top: 1px solid var(--linie); padding-block: var(--sp-4) var(--sp-8); }
.mobilnav[data-offen] { display: block; }
.mobilnav ul { list-style: none; padding: 0; }
.mobilnav a { display: block; padding: var(--sp-3) 0; font-family: var(--serif); font-size: 1.25rem; text-decoration: none; border-bottom: 1px solid var(--linie); }
.mobilnav__partner-titel {
  padding-top: var(--sp-4); font-size: .75rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--terracotta-tief);
}
.mobilnav__partner-titel + li a, .mobilnav__partner-titel + li + li a {
  padding-left: var(--sp-4); font-family: var(--sans); font-size: 1rem;
}
.mobilnav .btn { margin-top: var(--sp-6); width: 100%; }

/* Am Handy klappen die dreizehn Verfahren über ein natives details-Element auf,
   das braucht kein JavaScript und funktioniert auch ohne. */
.mobilnav details > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) 0; font-family: var(--serif); font-size: 1.25rem;
  border-bottom: 1px solid var(--linie); cursor: pointer; list-style: none;
}
.mobilnav details > summary::-webkit-details-marker { display: none; }
.mobilnav details > summary::after {
  content: ""; flex: 0 0 14px; height: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5 7 7.5l6-6' fill='none' stroke='%238C4E05' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 9px no-repeat;
  transition: transform 200ms var(--ease);
}
.mobilnav details[open] > summary::after { transform: rotate(180deg); }
.mobilnav details ul { padding-left: var(--sp-4); border-left: 2px solid var(--linie); margin-block: var(--sp-2); }
.mobilnav details ul a { font-family: var(--sans); font-size: 1rem; padding: 11px 0; border-bottom: 0; }
.mobilnav details .mobilnav__gruppe {
  padding-top: var(--sp-3); font-size: .6875rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--terracotta-tief);
}

@media (min-width: 1160px) {
  .nav, .kopf__aktion { display: flex; }
  .nav-schalter, .mobilnav { display: none !important; }
  .kopf__innen > .nav { order: 1; }
  .kopf__innen > .kopf__aktion { order: 2; }
  .kopf__innen > .marke { order: 3; }
}
@media (min-width: 1160px) and (max-width: 1439px) {
  .kopf__aktion .tel-link { display: none; }
}
.kopf__aktion .btn { white-space: nowrap; }

/* ---------- Vollbild-Hero ----------
   Das Bild füllt den ersten Bildschirm, der Kopf liegt darüber. Der Text sitzt
   im unteren Drittel: dort ist im Foto die ruhigste Fläche, und Renato bleibt
   im oberen Bereich frei sichtbar. --kopf-hoehe setzt app.js aus der echten
   Höhe, der Wert hier ist nur die Rückfallebene. */
/* Der Begrüßungsbalken steht jetzt davor und trägt den Versatz unter die
   Kopfzeile, deshalb beginnt der Hero hier normal. */
.hero--voll {
  position: relative; isolation: isolate;
  min-height: min(78svh, 720px);
  display: grid; align-content: end;
  padding-top: var(--sp-8);
  padding-bottom: clamp(2.5rem, 7vh, 5rem);
  color: var(--papier);
  background: var(--dunkel);
}
/* picture braucht die Höhe ausdrücklich: sonst bleibt es auf auto stehen, das
   height:100% des Bildes läuft ins Leere, und das Bild ragt in seiner vollen
   Eigenhöhe unter der Sektion heraus. overflow ist der zweite Riegel davor. */
.hero--voll .hero__medium { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero--voll .hero__medium picture { display: block; width: 100%; height: 100%; }
.hero--voll .hero__medium img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.hero--voll::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(28,21,13,.94) 0%, rgba(28,21,13,.86) 22%, rgba(28,21,13,.42) 52%, rgba(28,21,13,.20) 74%, rgba(28,21,13,.50) 100%),
    linear-gradient(to right, rgba(28,21,13,.55), rgba(28,21,13,0) 62%);
}
.hero--voll .eyebrow { color: var(--gold); }
/* Etwas kleiner als eine Seiten-H1 sonst: der Satz ist lang, und je schmaler
   der Textblock bleibt, desto mehr vom Bild bleibt frei. */
.hero--voll h1 {
  font-size: clamp(2rem, 1.35rem + 2.1vw, 3.05rem);
  max-width: 18ch; margin-bottom: var(--sp-6);
  text-shadow: 0 1px 24px rgba(20,14,8,.45);
}
.hero--voll .lede { color: #E4DACA; max-width: 46ch; }
.hero__inhalt { max-width: 40rem; }
.hero--voll .btn-reihe { margin-top: var(--sp-6); }
.hero--voll .btn--rand { color: var(--papier); }
@media (hover:hover) and (pointer:fine) {
  .hero--voll .btn--rand:hover { background: var(--papier); border-color: var(--papier); color: var(--tinte); }
}
.hero--voll .tel-link { color: var(--papier); border-bottom-color: var(--gold); }
.hero--voll .micro { color: #C9BCA6; }

/* Bewertungsbeleg: bleibt der stärkste Punkt und steht deshalb im ersten Bild */
.hero__beleg--dunkel {
  margin-top: var(--sp-6); padding-bottom: var(--sp-6);
  border-bottom: 1px solid rgba(235,224,206,.28);
  color: #E4DACA;
}
.hero__beleg--dunkel a { color: #E4DACA; }
.hero__beleg--dunkel .sterne svg { fill: var(--gold); }

/* Begrüßungsbalken über dem Hero. Renato im Telefonat vom 01.09.2026:
   „Ich hätte gerne so ein dickeres, braunes Balken oben, das edel aussieht,
   wo mein Logo schön drauf passt … rechts auf der rechten Seite", dazu
   „so dass du ihn auch ausfüllen kannst mit dem Begrüßungstext".
   Das Logo ist bewusst klein gehalten, sonst sprengt es den Balken. */
.begruessung {
  background: var(--dunkel); color: var(--papier);
  margin-top: calc(var(--kopf-hoehe, 69px) * -1);
  padding-top: calc(var(--kopf-hoehe, 69px) + clamp(2rem, 5vw, 3.75rem));
  padding-bottom: clamp(2rem, 5vw, 3.75rem);
}
.begruessung__innen {
  display: flex; align-items: center; gap: clamp(1.5rem, 5vw, 4rem);
}
.begruessung__text { flex: 1 1 auto; min-width: 0; }
.begruessung__text h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.6rem);
  line-height: 1.12; margin-bottom: var(--sp-5); text-wrap: balance;
}
.begruessung__text .lede {
  color: #E8DFD2; font-size: clamp(1rem, .96rem + .2vw, 1.12rem);
  line-height: 1.62; max-width: 62ch;
}
.begruessung__text .lede + .lede { margin-top: var(--sp-3); }
.begruessung__adresse {
  color: var(--gold); font-size: var(--fs-sm); letter-spacing: .035em;
  margin-bottom: var(--sp-5);
}
.begruessung__logo-link {
  position: relative; flex: 0 0 auto; display: block;
  width: clamp(180px, 24vw, 340px); height: clamp(260px, 30vw, 390px);
  background: transparent; border: 0;
}
.begruessung__logo-link:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.begruessung__logo {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 16px rgba(12, 8, 4, .5));
}
/* Am Telefon reicht die Breite nicht für zwei Spalten. Das Logo bleibt rechts,
   rückt aber über den Text, damit der die volle Breite behält. */
@media (max-width: 760px) {
  .begruessung__innen { flex-direction: column-reverse; align-items: flex-end; gap: var(--sp-4); }
  .begruessung__text { width: 100%; }
  .begruessung__logo-link { width: min(68vw, 270px); height: min(83vw, 330px); }
  .begruessung__logo { inset: 0; width: 100%; height: 100%; }
}

/* Sein Logo am Front, freigestellt: der schwarze Grund ist herausgerechnet,
   ein weicher Schatten trägt Schriftzug und Figur auf dem Praxisfoto.

   Renato am 31.08.2026: „Du kannst dazwischen an Startseite und Logo arbeiten
   das es an allen Geräten einheitlich zeigt." Am iPad war die Figur rechts
   angeschnitten, am iPhone stand ein winziges Logo über der Überschrift.
   Deshalb gibt es jetzt genau eine Anordnung für alle Geräte: unten rechts im
   Hero, immer vollständig, Größe an der Fensterbreite statt an der Höhe. */
.hero__logo {
  /* Der Hero schiebt sich unter die Kopfzeile, deshalb deren Höhe aufschlagen,
     sonst verschwindet der Schriftzug dahinter. */
  position: absolute; right: 4%; z-index: 2;
  top: calc(var(--kopf-hoehe, 69px) + clamp(.75rem, 2.5vh, 2.5rem));
  width: clamp(104px, 16vw, 292px); height: auto;
  max-height: 62vh; object-fit: contain; object-position: top right;
  filter: drop-shadow(0 4px 22px rgba(12, 8, 4, .78))
          drop-shadow(0 1px 3px rgba(12, 8, 4, .55));
  pointer-events: none;
}
/* Die Adresszeile läuft sonst unter das Logo. */
.hero--voll .eyebrow { padding-right: calc(clamp(104px, 16vw, 292px) + 3.5%); }

/* Am Telefon steht das Anfrageformular im Hero. Damit es nicht erst nach
   zwei Bildschirmen auftaucht, laufen Überschrift, Vorspann und Beleg
   enger, und der Hero darf statt voller Höhe genau so hoch sein, wie sein
   Inhalt braucht. */
@media (max-width: 700px) {
  .hero--voll { min-height: auto; padding-bottom: var(--sp-8); }
  .hero--voll h1 { font-size: clamp(1.85rem, 6.4vw, 2.3rem); max-width: 20ch; margin-bottom: var(--sp-4); }
  .hero--voll .lede { font-size: 1rem; line-height: 1.55; }
  .hero__beleg--dunkel { margin-top: var(--sp-4); padding-bottom: var(--sp-4); }
  .hero__beleg--dunkel .bewertung-zeile { font-size: var(--fs-sm); }
  .schnellform { margin-top: var(--sp-4); padding: var(--sp-4); }
  .schnellform__titel { margin-bottom: var(--sp-3); font-size: 1.1rem; }
  .hero__weiter { display: none; }
  /* Am Telefon steht mehr Text über dem Bild als am Rechner, deshalb deckt
     der Verlauf hier kräftiger ab. */
  .hero--voll::after {
    background:
      linear-gradient(to top, rgba(28,21,13,.95) 0%, rgba(28,21,13,.90) 30%, rgba(28,21,13,.66) 62%, rgba(28,21,13,.52) 82%, rgba(28,21,13,.62) 100%);
  }
}

/* Hinweis, dass es weitergeht. Verschwindet, sobald gescrollt wird. */
.hero__weiter {
  position: absolute; left: 50%; bottom: var(--sp-4); transform: translateX(-50%);
  display: none; align-items: center; gap: var(--sp-2);
  font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(235,224,206,.72); text-decoration: none;
}
@media (min-width: 900px) and (min-height: 640px) { .hero__weiter { display: inline-flex; } }
.hero__weiter svg { width: 14px; height: 9px; }
@media (prefers-reduced-motion: no-preference) {
  .hero__weiter svg { animation: tippen 2.4s var(--ease) infinite; }
}
@keyframes tippen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ---------- Bildbühne ----------
   Eine zweite große Bildfläche im Seitenverlauf, damit der Rhythmus nicht nach
   dem Hero abreißt. Trägt ein Zitat, das sonst nirgends steht. Kein
   background-attachment: fixed, das ruckelt auf iOS und wird dort ignoriert. */
.buehne {
  position: relative; isolation: isolate;
  display: grid; place-items: center;
  min-height: min(60vh, 30rem);
  padding-block: clamp(3.5rem, 9vw, 6rem);
  color: var(--papier); text-align: center;
  background: var(--dunkel);
}
.buehne__medium { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.buehne__medium picture { display: block; width: 100%; height: 100%; }
.buehne__medium img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.buehne::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(28,21,13,.74), rgba(28,21,13,.82));
}
.buehne blockquote {
  font-family: var(--serif); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  line-height: 1.25; text-wrap: balance; max-width: 24ch; margin-inline: auto;
}
.buehne .sterne { margin-bottom: var(--sp-4); }
.buehne .sterne svg { width: 20px; height: 20px; fill: var(--gold); }
.buehne figcaption { margin-top: var(--sp-6); font-size: var(--fs-sm); color: #C9BCA6; }
.buehne figcaption strong { display: block; font-size: 1.0625rem; color: var(--papier); }
.buehne .btn-reihe { justify-content: center; margin-top: var(--sp-8); }
.buehne .btn--rand { color: var(--papier); }
@media (hover:hover) and (pointer:fine) {
  .buehne .btn--rand:hover { background: var(--papier); border-color: var(--papier); color: var(--tinte); }
}


/* ---------- Vertrauensleiste ---------- */
.vertrauen { background: var(--creme); border-block: 1px solid var(--linie); padding-block: var(--sp-8); }
.vertrauen__gitter { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-4); }
@media (min-width: 860px) { .vertrauen__gitter { grid-template-columns: repeat(4, 1fr); } }
.vertrauen__wert { font-family: var(--serif); font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); line-height: 1; }
.vertrauen__text { font-size: var(--fs-sm); color: var(--tinte-weich); margin-top: var(--sp-2); max-width: 22ch; }

/* ---------- Beschwerdeliste ---------- */
.beschwerden { display: grid; gap: var(--sp-3); list-style: none; padding: 0; }
@media (min-width: 800px) { .beschwerden { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3) var(--sp-4); } }
.beschwerden li {
  display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--sp-3);
  padding: var(--sp-4); background: var(--papier);
  border: 1px solid var(--linie); border-radius: var(--radius);
}
.abschnitt--creme .beschwerden li { background: var(--papier); }
.beschwerden svg { width: 20px; height: 20px; stroke: var(--terracotta); fill: none; stroke-width: 2; margin-top: 3px; }

/* ---------- Startseitenfotos ---------- */
.startbilder { padding-block: clamp(2rem, 5vw, 4.5rem); overflow: hidden; }
.startbilder__raster {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.75rem, 2vw, 1.5rem); align-items: stretch;
}
.startbilder figure { margin: 0; min-width: 0; overflow: hidden; border-radius: var(--radius); }
.startbilder img { display: block; width: 100%; height: 100%; object-fit: cover; }
.startbilder figure { aspect-ratio: 3 / 4; }
@media (max-width: 700px) {
  .startbilder { padding-block: var(--sp-8); }
  .startbilder__raster { grid-template-columns: 1fr; gap: var(--sp-3); }
  .startbilder figure { aspect-ratio: 4 / 5; }
}

/* Renatos lange Originaltexte bleiben wortgleich. Das Layout gibt ihnen Rhythmus,
   ohne Überschriften festzukleben oder schmale Texttürme zu erzeugen. */
.editorial-copy > .breite { max-width: 68rem; }
.editorial-copy .kopfzeile-block { max-width: 34rem; }
@media (min-width: 900px) {
  .editorial-copy > .breite {
    display: grid; grid-template-columns: minmax(320px, .92fr) minmax(0, 1.08fr);
    gap: clamp(3.5rem, 6vw, 6rem); align-items: start;
  }
  .editorial-copy .kopfzeile-block { margin: 0; }
  .editorial-copy .fliesstext { padding-top: .35rem; }
}

.story__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.story__text { min-width: 0; }
.story__bild { width: 100%; max-width: 100%; margin: 0; min-width: 0; overflow: hidden; border-radius: var(--radius); box-shadow: var(--schatten); }
.story__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story__bild--quer { height: clamp(440px, 48vw, 680px); }
.story__bild--hoch { aspect-ratio: 4 / 5; max-height: 720px; }
@media (min-width: 860px) {
  .story__grid { grid-template-columns: minmax(0, 1.02fr) minmax(340px, .98fr); }
  .story--bild-rechts .story__grid { grid-template-columns: minmax(340px, .98fr) minmax(0, 1.02fr); }
}
@media (max-width: 859px) {
  .story--bild-rechts .story__bild { order: -1; }
  .story__bild--quer,
  .story__bild--hoch { height: auto; aspect-ratio: 4 / 3; }
}

.manifest { text-align: center; }
.manifest .schmal { max-width: 58rem; }
.manifest .kopfzeile-block { margin-inline: auto; }
.manifest .fliesstext { max-width: 48rem; margin-inline: auto; }
.manifest .kernsatz, .manifest strong { color: var(--gold); }

/* ---------- Galerie mit Lightbox ---------- */
.galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); list-style: none; padding: 0; margin: 0; width: 100%; }
@media (min-width: 720px) { .galerie { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } }
.galerie > li { min-width: 0; list-style: none; }
.galerie button {
  position: relative; display: block; width: 100%; max-width: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.galerie img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
/* Sichtbarer Hinweis, daß man klicken kann. Auf Touch dauerhaft, auf
   Zeigergeräten beim Überfahren. */
.galerie button::after {
  content: "Vergrößern";
  position: absolute; left: var(--sp-3); bottom: var(--sp-3);
  padding: 6px 12px; border-radius: 100px;
  background: rgba(20,16,10,.72); color: #fff;
  font-size: .8125rem; font-weight: 600;
  opacity: 1; transition: opacity 200ms var(--ease);
}
@media (hover:hover) and (pointer:fine) {
  .galerie button::after { opacity: 0; }
  .galerie button:hover { transform: translateY(-3px); box-shadow: 0 12px 32px -12px rgba(44,36,25,.28); }
  .galerie button:hover::after, .galerie button:focus-visible::after { opacity: 1; }
}

dialog.leuchte { padding: 0; border: 0; background: transparent; max-width: min(94vw, 1100px); max-height: 92dvh; }
dialog.leuchte::backdrop { background: rgba(20,16,10,.88); backdrop-filter: blur(3px); }
.leuchte__bild { width: 100%; max-height: 78dvh; object-fit: contain; border-radius: var(--radius); }
.leuchte__zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-3); color: var(--papier); font-size: var(--fs-sm); }
.leuchte__zu, .leuchte__pfeil {
  min-width: 48px; min-height: 48px; display: inline-grid; place-items: center;
  background: rgba(251,248,243,.14); color: var(--papier);
  border: 0; border-radius: 100px; cursor: pointer; font-size: 1.3rem;
}
@media (hover:hover) and (pointer:fine) { .leuchte__zu:hover, .leuchte__pfeil:hover { background: rgba(251,248,243,.28); } }
.leuchte__nav { display: flex; gap: var(--sp-2); }

/* ---------- Bewertungs-Karussell ---------- */
.karussell {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(88%, 30rem);
  /* proximity statt mandatory: mandatory zieht einen programmatisch
     ausgelösten weichen Scroll wieder zurück, dann bewegen die Pfeile nichts. */
  gap: var(--sp-6); overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; padding-bottom: var(--sp-2);
  margin-inline: calc(var(--sp-4) * -1); padding-inline: var(--sp-4);
}
.karussell::-webkit-scrollbar { display: none; }
.karussell > * { scroll-snap-align: start; }
@media (min-width: 900px) { .karussell { grid-auto-columns: min(46%, 30rem); } }
.karussell__steuerung { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); }
.karussell__pfeil {
  min-width: 48px; min-height: 48px; display: grid; place-items: center;
  background: transparent; border: 1px solid currentColor; border-radius: 100px;
  cursor: pointer; font-size: 1.2rem;
}
.karussell__pfeil[disabled] { opacity: .35; cursor: default; }
@media (hover:hover) and (pointer:fine) { .karussell__pfeil:not([disabled]):hover { background: var(--terracotta-tief); border-color: var(--terracotta-tief); color: #fff; } }

/* ---------- Bewertungskarten ---------- */
.stimmen { display: grid; gap: var(--sp-6); }
@media (max-width: 759px) {
  /* Drei gestapelte Zitate sind am Telefon anderthalb Bildschirme. Als
     Wischleiste bleibt es einer, und man sieht am angeschnittenen Rand,
     daß es weitergeht. */
  .stimmen--drei {
    width: 100%; max-width: 100%; min-width: 0;
    grid-auto-flow: column; grid-auto-columns: 86%;
    overflow-x: auto; scroll-snap-type: x proximity;
    gap: var(--sp-3); padding-bottom: var(--sp-3);
    scrollbar-width: none;
  }
  .stimmen--drei::-webkit-scrollbar { display: none; }
  .stimmen--drei > * { scroll-snap-align: start; }
}
@media (min-width: 760px)  { .stimmen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .stimmen--drei { grid-template-columns: repeat(3, 1fr); } }

.stimme {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6); background: var(--papier);
  border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.abschnitt--dunkel .stimme { background: var(--dunkel-hoch); border-color: var(--linie-dunkel); box-shadow: none; }
.stimme blockquote { font-size: var(--fs-base); line-height: 1.6; }
.stimme__wer { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--linie); font-size: var(--fs-sm); color: var(--tinte-weich); }
.abschnitt--dunkel .stimme__wer { border-top-color: var(--linie-dunkel); color: #C4B69F; }
.stimme__wer strong { display: block; color: var(--tinte); font-weight: 600; }
.abschnitt--dunkel .stimme__wer strong { color: var(--papier); }

/* ---------- Behandlungen ---------- */
.gruppe[open] > .ablauf-gitter img { width: 100%; border-radius: var(--radius); box-shadow: var(--schatten); }
.ablauf-gitter figcaption { font-size: var(--fs-sm); color: var(--tinte-weich); margin-top: var(--sp-3); }

/* ---------- Ablauf als Zeitstrahl ----------
   Eine durchgehende Linie, die beim Scrollen mitwächst. Der Fortschritt
   läuft über animation-timeline, also ohne JavaScript. Browser ohne
   Unterstützung zeigen die Linie vollständig, das ist der richtige
   Endzustand und nie ein leerer Strang. */
.ablauf {
  position: relative; counter-reset: schritt;
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--sp-8);
}
/* Die graue Grundlinie */
.ablauf::before {
  content: ""; position: absolute; left: 1.25rem; top: .6rem; bottom: .6rem;
  width: 2px; background: var(--linie);
}
/* Die gefüllte Linie, wächst mit dem Scrollfortschritt */
.ablauf::after {
  content: ""; position: absolute; left: 1.25rem; top: .6rem;
  width: 2px; height: calc(100% - 1.2rem);
  background: linear-gradient(var(--terracotta), var(--terracotta));
  transform-origin: top; transform: scaleY(1);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ablauf::after {
      animation: strang linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 65%;
    }
  }
}
@keyframes strang { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.ablauf li {
  position: relative; display: grid;
  grid-template-columns: 2.5rem 1fr; gap: var(--sp-4);
  align-items: start;
}
.ablauf li::before {
  content: counter(schritt); counter-increment: schritt;
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--papier); color: var(--terracotta-tief);
  border: 2px solid var(--terracotta);
  font-family: var(--serif); font-size: 1.15rem;
}
.abschnitt--creme .ablauf li::before { background: var(--creme); }
.abschnitt--sand .ablauf li::before { background: var(--sand); }
.abschnitt--dunkel .ablauf li::before { background: var(--dunkel); color: var(--gold); border-color: var(--gold); }
.abschnitt--dunkel .ablauf::before { background: var(--linie-dunkel); }
.abschnitt--dunkel .ablauf::after { background: var(--gold); }

/* Jeder Schritt taucht einzeln auf, leicht versetzt zur Linie */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ablauf li > div {
      animation: schritt-auf linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 60%;
    }
  }
}
@keyframes schritt-auf {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: none; }
}

.ablauf h3 { margin-bottom: var(--sp-2); }
.ablauf p { font-size: var(--fs-sm); color: var(--tinte-weich); line-height: 1.6; max-width: 60ch; }
.abschnitt--dunkel .ablauf p { color: #C4B69F; }
.ablauf__dauer {
  display: inline-block; margin-top: var(--sp-2);
  font-size: var(--fs-sm); font-weight: 600; color: var(--terracotta-tief);
}
.abschnitt--dunkel .ablauf__dauer { color: var(--gold); }

/* ---------- Preise ---------- */
.preisblock { display: grid; gap: var(--sp-12); align-items: start; }
@media (min-width: 940px) { .preisblock { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-16); } }

.preistafel { background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); }
.preistafel__kopf { background: var(--dunkel); color: var(--papier); padding: var(--sp-3) var(--sp-6); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.preistafel__zeile { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--linie); }
.preistafel__zeile:last-child { border-bottom: 0; }
.preistafel__dauer { font-weight: 500; }
.preistafel__preis { font-family: var(--serif); font-size: 1.35rem; }
.preistafel__hinweis { padding: var(--sp-4) var(--sp-6); background: var(--creme); font-size: var(--fs-sm); color: var(--tinte-weich); }

/* Preisliste. Renato wollte am 23.08. das beige Kästchen weg und stattdessen
   "einfach die Preisliste". Also eine schlichte Liste, kein Kasten drumherum. */
.preisliste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.preisliste li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--linie);
  font-size: 1.0625rem;
}
.preisliste__preis { font-family: var(--serif); font-size: 1.35rem; white-space: nowrap; }
.preisliste__preis[data-offen] { font-family: inherit; font-size: var(--fs-sm); color: var(--tinte-weich); font-style: italic; }

.kasse > * + * { margin-top: var(--sp-4); }
.kasse h3 { margin-bottom: var(--sp-3); }
.kasse__punkt { display: grid; grid-template-columns: 1.4rem 1fr; gap: var(--sp-3); }
.kasse__punkt svg { width: 18px; height: 18px; stroke: var(--terracotta); fill: none; stroke-width: 2.2; margin-top: 5px; }
.kasse__punkt p { font-size: var(--fs-sm); line-height: 1.6; }

/* ---------- Person ---------- */
.person { display: grid; gap: var(--sp-8); align-items: start; }
@media (min-width: 880px) { .person { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--sp-16); } }
.person img { width: 100%; max-width: 15rem; border-radius: var(--radius); box-shadow: var(--schatten); }
.person__text > * + * { margin-top: var(--sp-4); }
.person__text p { max-width: 60ch; }
.person__belege { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); list-style: none; padding: 0; }
.person__belege li { font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-4); background: var(--creme); border: 1px solid var(--linie); border-radius: 100px; }
.abschnitt--dunkel .person__belege li { background: var(--dunkel-hoch); border-color: var(--linie-dunkel); }

/* ---------- Praxis und Anfahrt ---------- */
.praxis { display: grid; gap: var(--sp-8); align-items: start; }
@media (min-width: 940px) { .praxis { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-12); } }
.praxis img { width: 100%; border-radius: var(--radius); box-shadow: var(--schatten); }
.praxis figcaption { font-size: var(--fs-sm); color: var(--tinte-weich); margin-top: var(--sp-3); }

.zeiten { list-style: none; padding: 0; margin-top: var(--sp-6); }
.zeiten li { display: flex; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-3); border-bottom: 1px solid var(--linie); font-size: var(--fs-sm); }
.zeiten .uhr { font-weight: 600; font-variant-numeric: tabular-nums; }
.abschnitt--dunkel .zeiten li { border-bottom-color: var(--linie-dunkel); }

.wegweiser { margin-top: var(--sp-6); padding: var(--sp-6); background: var(--creme); border-radius: var(--radius); border: 1px solid var(--linie); }
.wegweiser h3 { font-size: var(--fs-base); font-family: var(--sans); font-weight: 700; margin-bottom: var(--sp-2); }
.wegweiser p { font-size: var(--fs-sm); color: var(--tinte-weich); line-height: 1.6; }
.wegweiser p + p { margin-top: var(--sp-2); }

/* ---------- Karte ----------
   Ein Bild, kein iframe: siehe Kommentar im Markup. Adresskarte und Handlungs-
   aufforderung liegen als Overlay darauf, damit die Karte ohne Beschriftung
   nicht bloß Dekoration ist. */
.karte { margin-top: var(--sp-12); }
.karte__interaktiv { display: block; width: 100%; height: 420px; border: 0; border-radius: var(--radius); }
.karte > .btn { margin-top: var(--sp-4); }
.karte__flaeche {
  position: relative; display: block; overflow: hidden;
  border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: var(--schatten); text-decoration: none; color: var(--tinte);
}
.karte__flaeche img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.karte__marke {
  position: absolute; left: var(--sp-4); top: var(--sp-4);
  max-width: min(22rem, calc(100% - 2rem));
  padding: var(--sp-3) var(--sp-4);
  background: var(--papier); border-radius: var(--radius-klein);
  box-shadow: 0 2px 12px rgba(44,36,25,.16);
  font-size: var(--fs-sm); line-height: 1.45;
}
.karte__marke strong { display: block; font-size: 1.0625rem; font-family: var(--serif); font-weight: 400; }
.karte__tat {
  /* bottom hält Abstand zur OSM-Namensnennung, die unten rechts im Bild steht */
  position: absolute; right: var(--sp-4); bottom: var(--sp-12);
  display: inline-flex; align-items: center; min-height: 44px;
  padding: var(--sp-2) var(--sp-6);
  background: var(--terracotta-tief); color: #fff;
  border-radius: 100px; font-size: var(--fs-sm); font-weight: 600;
  box-shadow: 0 2px 12px rgba(44,36,25,.22);
  transition: background 180ms var(--ease);
}
@media (hover:hover) and (pointer:fine) { .karte__flaeche:hover .karte__tat { background: #74400F; } }
.karte figcaption { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--tinte-weich); }
@media (max-width: 560px) {
  .karte__flaeche img { aspect-ratio: 4 / 3; }
  .karte__tat { right: var(--sp-4); left: var(--sp-4); bottom: var(--sp-4); justify-content: center; }
}

/* ---------- FAQ ----------
   Eine Spalte statt zwei: in zwei Spalten schiebt jedes geöffnete Element
   die Nachbarn in der Spalte weiter, der Leseweg springt und die Hälfte der
   Fläche steht leer. Eine Spalte in Lesebreite ist ruhiger und kürzer im Code.
   Das Zeichen rechts ist derselbe Chevron wie an den Auswahlfeldern. */
.faq { max-width: 44rem; }
.faq details { border-top: 1px solid var(--linie); }
.faq details:last-of-type { border-bottom: 1px solid var(--linie); }
.faq summary {
  display: flex; justify-content: space-between; gap: var(--sp-6); align-items: center;
  min-height: 64px; padding-block: var(--sp-4); cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: 1.15rem; line-height: 1.35;
  transition: color 160ms var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 14px; height: 9px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5 7 7.5l6-6' fill='none' stroke='%238C4E05' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 14px 9px;
  transition: transform 220ms var(--ease);
}
.faq details[open] summary::after { transform: rotate(180deg); }
@media (hover:hover) and (pointer:fine) { .faq summary:hover { color: var(--terracotta-tief); } }
.faq details p { font-size: var(--fs-base); color: var(--tinte-weich); line-height: 1.7; max-width: 60ch; }
.faq details p:first-of-type { margin-top: calc(var(--sp-1) * -1); }
.faq details p + p { margin-top: var(--sp-3); }
.faq details p:last-child { padding-bottom: var(--sp-6); }
.abschnitt--dunkel .faq details { border-color: var(--linie-dunkel); }
.abschnitt--dunkel .faq details p { color: #C4B69F; }

/* ---------- Schwesterpraxis ---------- */
.schwester { display: grid; gap: var(--sp-6); align-items: center; padding: var(--sp-8); background: var(--creme); border: 1px solid var(--linie); border-radius: var(--radius); }
@media (min-width: 780px) { .schwester { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-12); } }
.schwester h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.schwester p { font-size: var(--fs-sm); color: var(--tinte-weich); max-width: 56ch; }

/* ---------- Formular ---------- */
.anfrage { display: grid; gap: var(--sp-12); }
@media (min-width: 940px) { .anfrage { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--sp-16); } }
.feld { margin-bottom: var(--sp-4); }
.feld label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-2); }
/* background-color statt der Kurzform background: die Kurzform würde das
   background-image des Auswahlpfeils weiter unten wieder auf none setzen. */
.feld input, .feld textarea, .feld select {
  width: 100%; min-height: 52px; padding: var(--sp-3) var(--sp-4);
  font-size: 1rem; background-color: var(--papier); color: var(--tinte);
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
}
/* Pfeil als SVG statt als Gradient-Dreieck: das Gradient-Konstrukt war auf
   dunklem Grund praktisch unsichtbar. */
.feld select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5 7 7.5l6-6' fill='none' stroke='%238C4E05' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right var(--sp-4) center;
  background-size: 14px 9px;
  background-repeat: no-repeat;
  padding-right: var(--sp-12);
  cursor: pointer;
}
.abschnitt--dunkel .feld select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5 7 7.5l6-6' fill='none' stroke='%23D98B2B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.abschnitt--dunkel .feld input, .abschnitt--dunkel .feld textarea,
.abschnitt--dunkel .feld select { background-color: var(--dunkel-hoch); color: var(--papier); border-color: var(--linie-dunkel); }

/* Pflichtfelder sichtbar auszeichnen, nicht nur über das required-Attribut.
   Die Telefonnummer ist der wichtigere Kanal: er ruft zurück. */
.feld__pflicht { color: var(--terracotta); font-weight: 700; }
.abschnitt--dunkel .feld__pflicht { color: var(--gold); }
.feld__hinweis { display: block; font-size: var(--fs-sm); font-weight: 400; opacity: .75; margin-top: 2px; }
.feld input:user-invalid, .feld textarea:user-invalid, .feld select:user-invalid {
  border-color: #B4442A;
}
.feld__fehler { display: none; font-size: var(--fs-sm); color: #E08A6E; margin-top: var(--sp-2); }
.feld input:user-invalid ~ .feld__fehler,
.feld select:user-invalid ~ .feld__fehler { display: block; }
.feld textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: var(--sp-4); font-size: var(--fs-sm); }

.direkt { padding: var(--sp-8); background: var(--dunkel-hoch); border-radius: var(--radius); border: 1px solid var(--linie-dunkel); }
.direkt .tel-gross { display: inline-block; font-family: var(--serif); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); text-decoration: none; border-bottom: 2px solid var(--terracotta); padding-bottom: 3px; margin-block: var(--sp-3); }

/* ---------- Fußzeile ---------- */
.fuss { background: var(--dunkel); color: #D6C9B4; padding-block: var(--sp-16) var(--sp-8); font-size: var(--fs-sm); }
.fuss__gitter { display: grid; gap: var(--sp-8); }
/* Am Telefon waren die Links in der Fußzeile nur 18 Pixel hoch und damit als
   Tippziel zu klein. Der Innenabstand hebt sie über die 24-Pixel-Schwelle,
   ohne den Abstand zwischen den Zeilen zu sprengen. */
@media (max-width: 780px) {
  .fuss__gitter li a,
  .fuss__gitter p > a,
  .fuss__nachbarn a,
  .fuss__unten a { display: inline-block; padding-block: .38rem; }
}
@media (min-width: 780px) { .fuss__gitter { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--sp-12); } }
.fuss h3 { font-family: var(--sans); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--sp-4); }
.fuss a { color: #D6C9B4; text-decoration: none; }
@media (hover:hover) and (pointer:fine) { .fuss a:hover { color: var(--papier); } }
.fuss ul { list-style: none; padding: 0; }
.fuss li + li { margin-top: var(--sp-2); }
.fuss strong { color: var(--papier); }
.fuss__unten { margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: 1px solid var(--linie-dunkel); display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); justify-content: space-between; }

/* ---------- Mobile Leiste ---------- */
.leiste { position: fixed; inset-inline: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: 1fr 1fr; background: var(--papier); border-top: 1px solid var(--linie); transform: translateY(100%); transition: transform 240ms var(--ease); box-shadow: 0 -4px 20px -8px rgba(44,36,25,.18); }
.leiste[data-sichtbar] { transform: translateY(0); }
.leiste a { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 58px; font-weight: 600; text-decoration: none; }
.leiste a + a { background: var(--terracotta-tief); color: #fff; }
.leiste svg { width: 18px; height: 18px; }
@media (min-width: 1000px) { .leiste { display: none; } }
@supports (padding: max(0px)) { .leiste { padding-bottom: max(0px, env(safe-area-inset-bottom)); } }

.sprung { position: absolute; left: -9999px; background: var(--terracotta-tief); color: #fff; padding: var(--sp-3) var(--sp-6); z-index: 100; }
.sprung:focus { left: 0; }

/* ---------- Unterseiten ---------- */
/* Seitenkopf der Unterseiten: dunkel wie die Kopfleiste darüber, damit die
   Unterseiten zur Startseite mit ihrem Vollbild passen. Markenleiste, Kopf und
   Seitenkopf bilden dadurch einen zusammenhängenden Block, danach beginnt der
   helle Inhalt. */
.uhero {
  background: var(--dunkel); color: var(--papier);
  border-bottom: 1px solid var(--linie-dunkel);
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem);
}
.uhero h1 { font-size: var(--fs-xl); max-width: 22ch; color: var(--papier); }
.uhero .lede { margin-top: var(--sp-4); color: #D6C9B4; }
.uhero .eyebrow { color: var(--gold); }
.uhero .krume, .uhero .krume a { color: #B9AB94; }
.uhero .krume a { border-bottom-color: var(--linie-dunkel); }
.uhero .btn--rand { color: var(--papier); }
@media (hover:hover) and (pointer:fine) {
  .uhero .btn--rand:hover { background: var(--papier); border-color: var(--papier); color: var(--tinte); }
}
.uhero .btn--voll { background: #A65D05; }
@media (hover:hover) and (pointer:fine) { .uhero .btn--voll:hover { background: var(--gold); color: var(--tinte); } }
.uhero .tel-link { color: var(--papier); border-bottom-color: var(--gold); }
.uhero .bewertung-zeile, .uhero .bewertung-zeile a { color: #D6C9B4; }

/* Behandlungsbild auf jeder Therapieseite, von Renato ausdrücklich gewünscht. */
.therapiebild { padding-block: clamp(1.5rem, 4vw, 3.5rem); background: var(--papier); }
.therapiebild figure { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--creme); }
.therapiebild img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; }
@media (max-width: 719px) {
  .therapiebild { padding-block: var(--sp-5); }
  .therapiebild img { aspect-ratio: 4 / 3; }
}
.krume { font-size: var(--fs-sm); color: var(--tinte-weich); margin-bottom: var(--sp-4); }
.krume a { text-decoration: none; border-bottom: 1px solid var(--linie); }
.krume span { margin-inline: var(--sp-2); opacity: .5; }

.fliesstext > * + * { margin-top: var(--sp-4); }
.fliesstext h2 { margin-top: var(--sp-12); }
.fliesstext h3 { margin-top: var(--sp-8); }
.fliesstext p { max-width: 68ch; }
.fliesstext ul { padding-left: var(--sp-6); max-width: 66ch; }
.fliesstext li + li { margin-top: var(--sp-2); }
.fliesstext li::marker { color: var(--terracotta); }

.hinweiskasten { padding: var(--sp-6); background: var(--creme); border: 1px solid var(--linie); border-left: 0; border-radius: var(--radius); max-width: 64ch; }
.hinweiskasten h3 { font-family: var(--sans); font-size: var(--fs-base); font-weight: 700; margin-bottom: var(--sp-2); }
.hinweiskasten p { font-size: var(--fs-sm); color: var(--tinte-weich); line-height: 1.65; }
.hinweiskasten p + p { margin-top: var(--sp-3); }

/* ---------- Reveal, rein in CSS ----------
   Kein JS-Gate: Browser ohne Unterstützung zeigen sofort den Endzustand,
   damit keine Sektion unsichtbar hängen bleiben kann. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .auf { animation: auf linear both; animation-timeline: view(); animation-range: entry 0% entry 38%; }
  }
}
@keyframes auf { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .leiste { transition: none; } }

/* Am Telefon nehmen die Hochformat-Bilder je einen halben Bildschirm ein.
   Auf 4:3 beschnitten bleibt das Motiv erkennbar und die Seite deutlich kürzer. */
@media (max-width: 699px) {
  .praxis figure img, .person picture img, .person img {
    aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%;
  }
}

/* Die drei Partner bleiben auch am Telefon oben sichtbar. */
@media (max-width: 699px) {
  .markenleiste__innen { justify-content: center; }
  .markenleiste__nav { justify-content: center; width: 100%; }
  .markenleiste__nav a { padding-inline: var(--sp-2); }
}
.fuss__nachbarn { margin-top: var(--sp-4); line-height: 1.9; }
.fuss__nachbarn a { text-decoration: underline; text-underline-offset: 3px; }

/* Renatos Merksatz zum Preismodell, bewusst als eigener Absatz gesetzt */
.preis-merksatz {
  margin-top: var(--sp-6); padding-top: var(--sp-6);
  border-top: 1px solid var(--linie);
  font-family: var(--serif); font-size: var(--fs-lg); line-height: 1.4;
  color: var(--tinte);
}
.preis-merksatz strong { color: var(--terracotta-tief); font-weight: 400; }

/* ---------- Unter einem Dach ----------
   Ersetzt die frühere Leiste über dem Kopf. Die drei Betriebe stehen jetzt als
   eigener Abschnitt im Seitenverlauf, mit klarer Zuordnung, wer was macht. */
.dach { display: grid; gap: var(--sp-4); list-style: none; padding: 0; }
@media (min-width: 820px) { .dach { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }
.dach__karte {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-6);
  background: var(--dunkel-hoch);
  border: 1px solid var(--linie-dunkel); border-radius: var(--radius);
}
.dach__karte--aktiv { border-color: var(--terracotta); }
.dach__name { font-family: var(--serif); font-size: var(--fs-lg); color: var(--papier); }
.dach__wer { font-size: var(--fs-sm); color: var(--gold); }
.dach__satz { font-size: var(--fs-sm); color: #C9BCA6; line-height: 1.6; margin-top: var(--sp-2); }
.dach__hier, .dach__link {
  margin-top: auto; padding-top: var(--sp-4);
  font-size: var(--fs-sm); font-weight: 600;
}
.dach__hier { color: var(--gold); }
.dach__link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--papier); text-decoration: underline; text-underline-offset: 4px;
}
@media (hover:hover) and (pointer:fine) { .dach__link:hover { color: var(--gold); } }

/* ---------- Textseiten der Behandlungen ----------
   Renato schreibt Aufzählungen als Reihe mit Mittelpunkt und setzt Kernsätze
   fett. Beides bekommt hier eine eigene Form, damit die langen Texte Struktur
   haben statt als Wand zu wirken. */
.merkmale {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  list-style: none; padding: 0; margin-block: var(--sp-4);
}
.merkmale li {
  padding: var(--sp-2) var(--sp-4);
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: 100px; font-size: var(--fs-sm); line-height: 1.4;
}
.abschnitt--creme .merkmale li { background: #FBF8F3; }
.kernsatz {
  margin-block: var(--sp-6);
  padding-left: var(--sp-6);
  border-left: 3px solid var(--terracotta);
  font-family: var(--serif); font-size: var(--fs-lg); line-height: 1.35;
  color: var(--tinte);
}
.fliesstext h3 { margin-top: var(--sp-8); }
.fliesstext .merkmale + p, .fliesstext .kernsatz + p { margin-top: var(--sp-4); }

/* Übersicht der Verfahren: eine Karte je Behandlung, führt auf die eigene Seite */
.verfahren-raster { display: grid; gap: var(--sp-3); list-style: none; padding: 0; }
@media (min-width: 620px) { .verfahren-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .verfahren-raster { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }
/* Jede Behandlung eine Kachel mit Bild, so wie auf Renatos alter Seite */
.verfahren {
  display: flex; flex-direction: column; height: 100%;
  overflow: hidden; background: var(--papier);
  border: 1px solid var(--linie); border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 180ms var(--ease), transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.abschnitt--creme .verfahren { background: #FBF8F3; }
.verfahren img {
  display: block; width: 100%; aspect-ratio: 32 / 10; object-fit: cover;
  background: var(--sand);
  filter: saturate(.9) contrast(1.02);
  transition: transform 400ms var(--ease);
}
.verfahren__name {
  display: block; padding: var(--sp-4) var(--sp-5) var(--sp-3);
  font-family: var(--serif); font-size: 1.1rem; line-height: 1.25;
  color: var(--tinte); text-wrap: balance;
}
.verfahren__satz {
  display: block; padding: 0 var(--sp-5);
  font-size: var(--fs-sm); color: var(--tinte-weich); line-height: 1.5;
}
.verfahren::after {
  content: "Mehr dazu"; margin-top: auto;
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  font-size: var(--fs-sm); font-weight: 600; color: var(--terracotta-tief);
}
@media (hover:hover) and (pointer:fine) {
  .verfahren:hover { border-color: var(--terracotta); transform: translateY(-2px); box-shadow: var(--schatten); }
  .verfahren:hover img { transform: scale(1.04); }
}
.verfahren:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .verfahren, .verfahren img { transition: none; } }

.renato-seziersaal { margin: 0; }
.renato-seziersaal img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

/* Beschwerdeliste kompakt, sie ist lang */
.beschwerden--knapp li { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); }
.beschwerden--knapp svg { fill: var(--terracotta); stroke: none; width: 9px; height: 9px; margin-top: 7px; flex: none; }
@media (min-width: 1000px) { .beschwerden--knapp { grid-template-columns: repeat(3, 1fr); } }
.hinweis-zeile {
  margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--terracotta); background: rgba(183, 103, 6, .06);
  font-size: var(--fs-sm); color: var(--tinte-weich); line-height: 1.6; border-radius: 0 var(--radius) var(--radius) 0;
}

/* Anfrage direkt am großen Bild im Hero */
.schnellform {
  margin-top: var(--sp-5); padding: var(--sp-5);
  background: rgba(28, 21, 13, .72); backdrop-filter: blur(10px);
  border: 1px solid rgba(232, 152, 46, .35); border-radius: var(--radius);
}
.schnellform__titel {
  margin: 0 0 var(--sp-4); font-family: var(--serif); font-size: 1.25rem;
  color: var(--papier); letter-spacing: .01em;
}
.schnellform__felder { display: grid; gap: var(--sp-3); }
@media (min-width: 760px) { .schnellform__felder { grid-template-columns: repeat(3, 1fr); } }
.schnellform .feld { display: grid; gap: .35rem; }
.schnellform .feld span { font-size: var(--fs-xs); font-weight: 600; color: rgba(251, 248, 243, .82); letter-spacing: .04em; text-transform: uppercase; }
.schnellform input {
  width: 100%; padding: .7rem .85rem; font: inherit; font-size: 1rem;
  color: var(--papier); background: rgba(251, 248, 243, .1);
  border: 1px solid rgba(251, 248, 243, .3); border-radius: 8px;
}
.schnellform input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; background: rgba(251, 248, 243, .16); }
.schnellform .btn { margin-top: var(--sp-4); width: 100%; }
@media (min-width: 760px) { .schnellform .btn { width: auto; min-width: 15rem; } }
.schnellform .micro { margin-top: var(--sp-3); color: rgba(251, 248, 243, .75); }
.schnellform .micro a { color: var(--gold); }
.schnellform .form-status:empty { display: none; }
.schnellform .form-status { margin-top: var(--sp-3); color: var(--papier); }

/* Renatos Einstiegsfrage steht als Unterzeile unter dem Seitentitel */
.uhero__frage {
  margin-top: var(--sp-4);
  font-family: var(--serif); font-size: var(--fs-lg); line-height: 1.3;
  color: var(--gold); max-width: 34ch;
}

/* Die achtzehn Techniken auf der Startseite: kompakte Liste, jede führt auf
   ihre eigene Seite. Ersetzt die früheren ausklappbaren Beschreibungsblöcke,
   die Texte stehen jetzt vollständig auf den Einzelseiten. */
.technikliste { display: grid; gap: var(--sp-2); list-style: none; padding: 0; }
@media (min-width: 620px) { .technikliste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .technikliste { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); } }
.technikliste a {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 52px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius-klein);
  font-size: var(--fs-sm); font-weight: 500; text-decoration: none; line-height: 1.35;
  transition: border-color 160ms var(--ease), color 160ms var(--ease);
}
.technikliste a::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--terracotta);
}
@media (hover:hover) and (pointer:fine) {
  .technikliste a:hover { border-color: var(--terracotta); color: var(--terracotta-tief); }
}

/* ---------- Dachband ----------
   Der Verweis auf die beiden Schwesterangebote. Auf Wunsch von Renato steht er
   unterhalb statt über dem Kopf, dafür auf jeder Seite direkt über der Fußzeile.
   Die ausführliche Fassung mit Erklärung steht weiterhin auf der Startseite. */
.dachband {
  background: var(--dunkel-hoch); color: #D6C9B4;
  border-top: 1px solid var(--linie-dunkel);
  font-size: var(--fs-sm);
}
.dachband__innen {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-2) var(--sp-6);
  padding-block: var(--sp-3);
}
.dachband__ort { opacity: .72; }
@media (max-width: 620px) { .dachband__ort { flex-basis: 100%; } }
.dachband ul { display: flex; flex-wrap: wrap; gap: var(--sp-1); list-style: none; padding: 0; margin: 0; }
.dachband a, .dachband__hier {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-3);
  border-radius: 100px; text-decoration: none; font-weight: 600; color: #D6C9B4;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.dachband a span { font-weight: 400; opacity: .7; }
.dachband__hier span { font-weight: 400; opacity: .85; }
@media (max-width: 520px) { .dachband a span, .dachband__hier span { display: none; } }
/* Weiß auf #B76706 kam nur auf 4,24:1. Die dunklere Textvariante hält 6:1. */
.dachband__hier { background: var(--terracotta-tief); color: #fff; }
.dachband__hier span { opacity: .85; }
@media (hover:hover) and (pointer:fine) {
  .dachband a:hover { background: var(--dunkel); color: var(--papier); }
}