/* ==========================================================================
   Praxis Hovermann · Stylesheet v2
   Idee (nach dem Gespräch am 30.10.): wie ihre alte Seite und ihr Entwurf.
   Startseite: ein großes Licht, das sanft von hellem Gelb in Dunkelrot übergeht.
   Danach helles Gelb mit dunkelroter Schrift, Unterseiten mit dunkelrotem Kopf
   und gelber Schrift. Am Fuß steigt ein orangefarbener Halbkreis auf.
   ========================================================================== */

@font-face { font-family: "Young Serif"; src: url("../fonts/young-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk-italic.woff2") format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }

:root {
  /* Dunkelrot (Kopf, Fuß, dunkle Flächen) */
  --night: #5e162b;
  --night-2: #6b1a31;
  --night-3: #7c2239;
  /* Helles Gelb statt Weiß */
  --paper: #f9ebc5;
  --rose: #f3dc9f;
  --rose-2: #ebcd83;
  --wine: #7a1d3a;
  --wine-deep: #4a0e22;
  --ember: #e2672e;
  --orange: #ee8a3c;
  --gold: #f5b94b;
  --core: #fff7e3;
  /* Schrift auf Gelb: Dunkelrot */
  --ink: #4a0e22;
  --ink-2: #74293d;
  /* Schrift auf Dunkelrot: helles Gelb */
  --cream: #fbe7b5;
  --cream-2: #e8c58e;
  --field: #fcf3d8;

  --serif: "Young Serif", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;

  --m: clamp(1.25rem, 3.4vw, 3.25rem);
  --gap: clamp(1rem, 2vw, 2rem);
  --section: clamp(5.5rem, 11vw, 10.5rem);
  --max: 100rem;

  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-section: clamp(2.1rem, 3.6vw, 3.4rem);
  --fs-title: clamp(2.6rem, 5.6vw, 5.1rem);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --t-hover: 180ms;
  --t-ui: 260ms;
  --t-reveal: 900ms;

  --callbar: 3.25rem;
  --radius: 14px;
}
@media (min-width: 60rem) { :root { --fs-body: 1.125rem; } }

/* ---------------------------------------------------------------- Basis */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  font-variant-numeric: lining-nums proportional-nums;
  overflow-wrap: break-word;
  padding-bottom: calc(var(--callbar) + env(safe-area-inset-bottom));
}
@media (min-width: 60rem) { body { padding-bottom: 0; } }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a, button, input, textarea { touch-action: manipulation; -webkit-tap-highlight-color: rgb(122 29 58 / .15); }
p, ul, ol, figure, address, table, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; scroll-margin-top: 1.5rem; }
address { font-style: normal; }
strong { font-weight: 650; }
:focus-visible { outline: 2.5px solid var(--wine); outline-offset: 3px; border-radius: 4px; }
.site-header :focus-visible, .page-head :focus-visible, .pager :focus-visible, .site-footer :focus-visible, .sheet :focus-visible, .ix :focus-visible { outline-color: var(--gold); }
.site-header--home :focus-visible, .site-header .mega :focus-visible { outline-color: var(--wine); }

.skip { position: absolute; left: var(--m); top: -4rem; z-index: 90; background: var(--gold); color: var(--ink); padding: .6rem 1rem; border-radius: 8px; font-weight: 600; }
.skip:focus { top: .75rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.wrap, .site-header, .hero, .welcome, .ix, .praxis, .infos, .page-head, .detail-body, .simple-body, .pager, .group, .info-rows, .kontakt-grid, .f-cols, .f-contact, .f-copy {
  padding-inline: var(--m);
  max-width: var(--max);
  margin-inline: auto;
}

.welcome, .praxis, .infos, .page-head, .detail-body, .kontakt-grid, .group, .f-cols, .ix-grid, .simple-body { grid-template-columns: minmax(0, 1fr); }
h1, h2, h3, .ix-name, .row-name, .in-name, .pager-name, .info-row-name { hyphens: manual; }

/* Unterstreichung, die unter dem Zeiger wächst */
.link-plain, .nav-list > li > a, .crumbs a, .f-list a, .side a, .mega a, .prose a, .sheet a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size var(--t-ui) var(--ease-out), color var(--t-hover) ease;
}
.link-plain:hover, .nav-list > li > a:hover, .crumbs a:hover, .f-list a:hover, .side a:hover, .mega a:hover, .prose a:hover, .sheet a:hover,
.link-plain:focus-visible, .nav-list > li > a:focus-visible { background-size: 100% 1.5px; }
.link-plain { font-weight: 600; background-size: 100% 1.5px; padding-bottom: 2px; }
.link-plain:hover { background-size: 0 1.5px; background-position: 100% 100%; }
.prose a { color: var(--wine); background-size: 100% 1px; }

/* ---------------------------------------------------------------- Knöpfe */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.25rem; padding: .7rem 1.6rem;
  font: 600 1rem/1.2 var(--sans); letter-spacing: .01em;
  border: 0; border-radius: 999px; text-decoration: none; cursor: pointer;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform 140ms var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn--sun { background: var(--gold); color: var(--night); }
.btn--sun:hover { background: #ffd07a; }
.btn--ghost { background: var(--night-3); color: var(--cream); }
.btn--ghost:hover { background: #50202e; }
.btn--wine { background: var(--wine); color: var(--cream); }
.btn--wine:hover { background: var(--wine-deep); }
.btn[aria-disabled="true"] { opacity: .75; cursor: progress; }

/* ---------------------------------------------------------------- Kopf */
.site-header {
  position: relative; z-index: 40;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding-block: clamp(.75rem, 2.4svh, 1.4rem);
}
.brand { grid-column: 1; justify-self: start; font-family: var(--serif); font-size: 1.2rem; line-height: 1.2; text-decoration: none; padding: .4rem 0; }
.nav { grid-column: 2; display: none; }
.head-call { grid-column: 3; justify-self: end; display: none; font-weight: 600; font-size: .98rem; text-decoration: none; padding: .5rem 0; }
.menu-toggle {
  grid-column: 3; justify-self: end;
  font: 600 1rem var(--sans); color: inherit; background: none; border: 0; cursor: pointer;
  min-height: 44px; padding: 0 .25rem;
}
.site-header--home .menu-toggle { grid-column: 2; justify-self: center; }
.site-header { color: var(--cream); border-image: conic-gradient(var(--night) 0 0) fill 0 // 0 100vmax; }
.head-call:hover { color: var(--gold); }

@media (min-width: 60rem) {
  .nav { display: block; }
  .head-call { display: inline-block; }
  .menu-toggle { display: none; }
}
.nav-list { display: flex; gap: clamp(1.75rem, 3vw, 3rem); font-weight: 550; font-size: 1.02rem; letter-spacing: .01em; }
.nav-list { position: relative; }
.nav-list > li { position: relative; }
.nav-list > li.has-mega:first-child { position: static; }
.nav-list > li > a { display: inline-block; padding: .55rem 0; }
.nav-list > li > a[aria-current="page"] { background-size: 100% 1.5px; }
.has-mega > a::after { content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .45em; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-.2em) rotate(45deg); transition: transform var(--t-ui) var(--ease-out); }
.has-mega:hover > a::after, .has-mega:focus-within > a::after { transform: translateY(0) rotate(225deg); }

.mega {
  position: absolute; top: 100%; left: 50%; z-index: 50;
  translate: -50% 10px;
  min-width: 16rem;
  margin-top: .6rem;
  padding: 1.6rem 1.8rem;
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -20px rgb(36 19 26 / .35);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-ui) ease, translate var(--t-ui) var(--ease-out), visibility 0s linear var(--t-ui);
}
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
.has-mega:hover > .mega, .has-mega:focus-within > .mega {
  opacity: 1; visibility: visible; translate: -50% 0;
  transition: opacity var(--t-ui) ease, translate var(--t-ui) var(--ease-out), visibility 0s;
}
.mega--offers { display: grid; grid-template-columns: repeat(4, minmax(10rem, 1fr)); gap: 1.5rem 2rem; width: min(58rem, 92vw); }
.mega-head { font-family: var(--serif); color: var(--wine); font-size: 1.1rem; margin-bottom: .5rem; }
.mega li a { display: inline-block; padding: .28rem 0; font-size: .97rem; line-height: 1.35; }
.mega-all { grid-column: 1 / -1; padding-top: 1rem; margin-top: .25rem; background: none; }
.mega-all a { font-weight: 600; color: var(--wine); }

/* Mobiles Menü */
.sheet { position: fixed; inset: 0; z-index: 60; background: var(--night); color: var(--cream); overflow-y: auto; overscroll-behavior: contain; }
.sheet[hidden] { display: none; }
.sheet-inner { padding: 5.5rem var(--m) calc(var(--callbar) + 3rem); display: grid; gap: .9rem; }
.sheet-title { font-family: var(--serif); font-size: 2rem; line-height: 1.15; margin-top: 1.4rem; }
.sheet-title a { text-decoration: none; background: none; }
.sheet-groups { display: grid; gap: 1.2rem; }
.sheet-head { font-size: .9rem; color: var(--cream-2); margin-bottom: .2rem; }
.sheet li a { display: inline-block; padding: .35rem 0; font-size: 1.08rem; }
.menu-open { overflow: hidden; }
.menu-open .menu-toggle { position: fixed; top: 1.4rem; right: var(--m); z-index: 70; color: var(--cream); }
.menu-open .site-header--home .menu-toggle { right: auto; left: 50%; translate: -50% 0; }
@media (min-width: 60rem) { .sheet { display: none !important; } }

/* ---------------------------------------------------------------- Startseite: das Licht */
/* Kopf liegt über dem Licht, ohne eigene Fläche */
.site-header--home { position: absolute; top: 0; left: 0; right: 0; border-image: none; }
.hero {
  --hell: #fffaf0;
  position: relative; isolation: isolate;
  max-width: none;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(1.25rem, 3.4svh, 2.5rem);
  padding-block: clamp(5rem, 12svh, 7.5rem) clamp(3rem, 8svh, 5rem);
  text-align: center;
  color: var(--ink);
  background-color: var(--night);
  /* ein großes Licht: viele Zwischenstufen, damit es ohne Kanten von Hellgelb in Dunkelrot übergeht */
  /* langer, weicher Übergang: viele Stufen, außen sehr flach auslaufend */
  background-image: radial-gradient(ellipse max(48vw, 19rem) max(43svh, 17rem) at 50% 54%,
    #fffaf0 0%, #fff5dc 8%, #feebbd 16%, #fbdb95 24%, #f8c770 32%, #f3ad52 40%, #ec9142 48%, #e0743b 56%, #cc5a3a 63%, #b2443a 70%, #942f38 77%, #7a2335 84%, #6c1b30 90%, #63182d 95%, #60172c 98%, var(--night) 100%);
  background-image: radial-gradient(in oklab ellipse max(48vw, 19rem) max(43svh, 17rem) at 50% 54%,
    #fffaf0 0%, #fff5dc 8%, #feebbd 16%, #fbdb95 24%, #f8c770 32%, #f3ad52 40%, #ec9142 48%, #e0743b 56%, #cc5a3a 63%, #b2443a 70%, #942f38 77%, #7a2335 84%, #6c1b30 90%, #63182d 95%, #60172c 98%, var(--night) 100%);
}
/* feines Korn gegen Streifen im Verlauf */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.site-header--home .nav-list > li > a { color: var(--cream); }
.site-header--home .menu-toggle { color: var(--cream); }
.hero-text { max-width: 60rem; }
.hero-title { font-size: clamp(2rem, min(4.4vw, 7svh), 3.9rem); line-height: 1.1; color: var(--wine-deep); }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero-title .line > span { display: inline-block; }
.hero-sub { text-wrap: balance; margin-top: clamp(.6rem, 2svh, 1.1rem); font-family: var(--serif); font-size: clamp(1.15rem, 1.8vw, 1.5rem); color: var(--wine); }
.hero-who { font-size: 1rem; line-height: 1.55; color: var(--wine-deep); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; }
.hero .btn--ghost { background: rgb(74 14 34 / .08); color: var(--wine-deep); box-shadow: inset 0 0 0 1.5px var(--wine-deep); }
.hero .btn--ghost:hover { background: rgb(74 14 34 / .16); }
@media (max-width: 40rem) {
  .hero { background-image: radial-gradient(in oklab ellipse 92vw 46svh at 50% 46%,
    #fffaf0 0%, #fff5dc 10%, #feebbd 20%, #fbdb95 30%, #f8c770 39%, #f3ad52 47%, #ec9142 55%, #e0743b 62%, #cc5a3a 69%, #b2443a 76%, #942f38 82%, #7a2335 88%, #6c1b30 93%, #63182d 97%, var(--night) 100%); }
  .hero-title { font-size: clamp(1.9rem, 8.4vw, 2.5rem); }
  .hero-actions { flex-direction: column; align-items: stretch; width: min(100%, 20rem); }
}

/* ---------------------------------------------------------------- Startseite: Abschnitte */
.section-title { font-size: var(--fs-section); }

.welcome {
  display: grid; gap: 2.5rem 0; align-items: center;
  padding-block: var(--section);
}
@media (min-width: 52rem) {
  .welcome { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .welcome-portrait { grid-column: 2 / span 4; }
  .welcome-text { grid-column: 7 / span 6; }
}
.welcome-portrait img { width: min(100%, 20rem); border-radius: 4px; }
.welcome-portrait figcaption { margin-top: .9rem; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.5; }
.statement { font-family: var(--serif); font-size: clamp(1.5rem, 2.3vw, 2.15rem); line-height: 1.3; margin-top: 1.1rem; max-width: 24ch; }
.statement--welcome { max-width: none; text-wrap: balance; }
.statement--welcome .nb { display: block; }
.statement--welcome .nb + .nb--von { margin-top: .5em; font-size: .78em; color: var(--ink-2); }
.statement--welcome .nb { white-space: nowrap; }
/* Handy: Schrift so groß, dass die längste Zeile („Kunst- & Psychotherapie (HPG)“) gerade noch passt */
@media (max-width: 39.99rem) { .statement--welcome { font-size: min(1.5rem, calc((100vw - 2 * var(--m)) / 16.1)); } }
.statement--s { font-size: clamp(1.3rem, 1.8vw, 1.65rem); max-width: 32ch; }
.quote { margin-top: 2.25rem; padding-left: 1.6rem; position: relative; color: var(--wine); font-size: 1.2rem; font-weight: 550; max-width: 30ch; line-height: 1.5; }
.quote::before { content: "~"; position: absolute; left: 0; top: -.05em; font-family: var(--serif); color: var(--ember); font-size: 1.5rem; }
.welcome-text > p:last-child { margin-top: 2rem; }

.ix { max-width: none; background: var(--night); color: var(--cream); padding-block: var(--section); }
.ix-top, .ix-grid { max-width: calc(var(--max) - 2 * var(--m)); margin-inline: auto; }
.ix-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem 2rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.ix-all a { color: var(--gold); }
.ix-grid { display: grid; gap: 3.5rem var(--gap); }
@media (min-width: 40rem) { .ix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .ix-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ix-head { font-size: 1.55rem; color: var(--gold); margin-bottom: 1rem; }
.ix-list { display: grid; gap: .35rem; }
.ix-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: center; padding: .65rem .8rem .7rem; margin-inline: -.8rem; border-radius: 10px; text-decoration: none; transition: background-color var(--t-hover) ease; }
.ix-list a:hover, .ix-list a:focus-visible { background: rgb(255 255 255 / .07); }
.ix-list a > :not(.row-arrow) { grid-column: 1; }
.ix .row-arrow { width: 2.2rem; height: 2.2rem; background: rgb(251 231 181 / .12); color: var(--gold); }
.ix-list a:hover .row-arrow, .ix-list a:focus-visible .row-arrow { translate: .25rem 0; background: var(--gold); color: var(--night); }
.ix-name { display: block; font-weight: 600; font-size: 1.06rem; line-height: 1.35; }
.ix-teaser { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: .25rem; color: var(--cream-2); font-size: .93rem; line-height: 1.5; }

.praxis {
  display: grid; gap: 3rem 0; align-items: center;
  padding-block: var(--section);
}
@media (min-width: 52rem) {
  .praxis { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .praxis-text { grid-column: 2 / span 8; }
  .praxis-photo { grid-column: 8 / span 5; }
}
.praxis-photo img { width: 100%; border-radius: 4px; }
.facts { display: grid; gap: .6rem; margin-top: 2.25rem; max-width: 30rem; }
.facts > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem 1rem; padding: .85rem 1.1rem; background: var(--rose); border-radius: 10px; }
.facts dt { font-weight: 550; }
.facts dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.praxis-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.25rem; }

.infos { padding-block: 0 var(--section); display: grid; gap: 2rem 0; }
@media (min-width: 52rem) {
  .infos { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .infos .section-title { grid-column: 2 / span 4; }
  .in-list { grid-column: 6 / span 6; }
}
.in-list { display: grid; gap: .4rem; }
.in-list a { display: grid; gap: .3rem; padding: 1.25rem 1rem; margin-inline: -1rem; border-radius: var(--radius); text-decoration: none; transition: background-color var(--t-hover) ease; }
.in-list a:hover, .in-list a:focus-visible { background: var(--rose); }
.in-name { font-family: var(--serif); font-size: clamp(1.5rem, 2.2vw, 1.95rem); line-height: 1.15; }
.in-teaser { color: var(--ink-2); max-width: 52ch; }

/* ---------------------------------------------------------------- Unterseiten */
.page-head {
  max-width: none;
  background: var(--night);
  color: var(--cream);
  display: grid; gap: 2.5rem 0; align-items: end;
  padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(2.75rem, 6vw, 5rem);
}
.page-head > * { max-width: calc(var(--max) - 2 * var(--m)); }
.page-head--gallery { align-items: center; }
@media (min-width: 60rem) {
  .page-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .page-head-text { grid-column: 1 / span 7; }
  .page-head:not(.page-head--gallery) .page-head-text { grid-column: 1 / span 10; }
  .page-gallery { grid-column: 8 / span 5; }
}
.crumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: var(--fs-small); color: var(--cream-2); margin-bottom: 1.5rem; }
.crumbs li + li::before { content: "/"; margin-right: .5rem; opacity: .6; }
.crumbs a { display: inline-block; padding: .2rem 0; }
.kontakt-daten .crumbs ol { color: var(--ink-2); }
.page-title { font-size: var(--fs-title); line-height: 1.04; max-width: 17ch; }
/* ohne Bilder im Kopf ist Platz: Titel nur trennen, wenn er wirklich nicht passt */
.page-head:not(.page-head--gallery) .page-title { max-width: none; }
.page-title .t-main { display: block; }
.page-title .t-pre, .page-title .t-post { display: block; font-size: .42em; line-height: 1.25; color: var(--gold); letter-spacing: 0; }
.page-title .t-pre { margin-bottom: .35em; }
.page-title .t-post { margin-top: .45em; }
.page-lead { margin-top: 1.5rem; font-size: 1.2rem; max-width: 46ch; color: var(--cream-2); }
.page-head .page-title { color: var(--cream); }

.page-gallery { display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: flex-end; gap: clamp(.75rem, 1.5vw, 1.25rem); }
.g-item { flex: 0 1 auto; min-width: 0; }
.g-item img { width: auto; max-height: 12rem; }
.g-item figcaption { margin-top: .5rem; font-size: .85rem; color: var(--cream-2); }
.g-count-1 .g-item img { max-height: 24rem; border-radius: 4px; }
.g-count-2 .g-item:first-child img { max-height: 16rem; }
.g-item.g-1 { margin-bottom: clamp(0rem, 3vw, 2.5rem); }
@media (max-width: 59.99rem) {
  .page-gallery { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
  .g-item { flex: 0 0 auto; }
  .g-item img, .g-count-2 .g-item:first-child img { max-height: 10rem; }
  .g-count-1 .g-item img { max-height: 20rem; }
  .g-item.g-1 { margin-bottom: 0; }
}

.detail-body { display: grid; gap: 3.5rem 0; padding-block: clamp(3.5rem, 8vw, 7rem); }
@media (min-width: 60rem) {
  .detail-body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .side { grid-column: 1 / span 3; position: sticky; top: 2rem; align-self: start; }
  .detail-body > .prose { grid-column: 5 / span 7; }
}
@media (max-width: 59.99rem) { .side { order: 2; padding-top: 2.5rem; } }
.side { display: grid; gap: 1.75rem; font-size: .97rem; }
.side-head { font-family: var(--serif); font-size: 1.1rem; color: var(--wine); margin-bottom: .35rem; }
.side li a { display: inline-block; padding: .3rem 0; line-height: 1.35; color: var(--ink-2); }
.side li a:hover { color: var(--ink); }
.side li a[aria-current="page"] { color: var(--ink); font-weight: 650; }
.side li a[aria-current="page"]::before { content: "~ "; color: var(--ember); }
.side-toc { padding-top: 1.25rem; }

.simple-body { padding-block: clamp(3rem, 7vw, 6rem) var(--section); }
@media (min-width: 60rem) {
  .simple-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .simple-body > .prose { grid-column: 1 / span 7; }
}

/* Fließtext */
.prose { max-width: 42rem; }
.prose > * + * { margin-top: 1.05em; }
.prose > p:first-child, .prose > .lead:first-child { font-size: 1.22em; line-height: 1.6; color: var(--ink); }
.prose > h2 { font-size: clamp(1.75rem, 2.4vw, 2.25rem); color: var(--wine); margin-top: 2.6em; margin-bottom: -.15em; line-height: 1.12; }
.prose > h3 { font-size: 1.35rem; margin-top: 2em; margin-bottom: -.3em; }
.prose > h2 + h3 { margin-top: 1.1em; }
.prose em { font-style: italic; }
.prose ul > li { position: relative; padding-left: 1.6em; }
.prose ul > li + li { margin-top: .4em; }
.prose ul > li::before { content: "~"; position: absolute; left: .1em; top: -.08em; font-family: var(--serif); color: var(--ember); font-size: 1.15em; }
.prose .lead { font-family: var(--serif); font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.35; }
.prose .fee { margin-top: 2em; padding: 1.1rem 1.3rem; background: var(--rose); border-radius: 12px; font-weight: 600; }
.prose .fee a { color: inherit; }
.prose .small { font-size: var(--fs-small); color: var(--ink-2); margin-top: 2.5em; }
.prose .born { color: var(--ink-2); }
.prose > p:first-child.born { font-size: 1em; }

.prose ul.vita > li { padding-left: 0; display: grid; gap: .1rem; }
.prose ul.vita > li::before { content: none; }
.prose ul.vita > li + li { margin-top: 1.3em; }
@media (min-width: 36rem) { .prose ul.vita > li { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.5rem; } }
.vita-y { font-family: var(--serif); color: var(--wine); line-height: 1.5; }
.vita-t strong { white-space: nowrap; }
.vita-small .vita-t { font-size: var(--fs-small); }

.rites { counter-reset: rite; }
.rites > li { counter-increment: rite; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: .9rem; }
.rites > li + li { margin-top: 1.4em; }
.rites > li::before { content: counter(rite); grid-row: span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--rose); color: var(--wine); font-family: var(--serif); font-size: 1.05rem; }
.rite-name { font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; }
.rite-orig { font-family: var(--sans); font-style: italic; font-size: .95rem; color: var(--ink-2); white-space: nowrap; }
.prices { display: grid; gap: 1rem; }
@media (min-width: 44rem) { .prices { grid-template-columns: 1fr 1fr; } }
.price { background: var(--rose); padding: 1.5rem 1.6rem 1.7rem; border-radius: var(--radius); }
.price h3 { font-size: 1.3rem; color: var(--wine); margin-bottom: .6rem; }
.price p + p { margin-top: .8em; }

.practice-address { font-size: 1.1rem; line-height: 1.65; }
.practice-address strong { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; display: block; margin-bottom: .35rem; }
.route { font-weight: 600; }
.fees { width: 100%; border-collapse: separate; border-spacing: 0 .4rem; font-variant-numeric: tabular-nums; }
.fees th, .fees td { text-align: left; vertical-align: top; padding: .8rem 1.1rem; background: var(--rose); }
.fees th { font-weight: 600; border-radius: 10px 0 0 10px; }
.fees td { border-radius: 0 10px 10px 0; }
@media (max-width: 36rem) {
  .fees th, .fees td { display: block; border-radius: 0; }
  .fees th { padding-bottom: 0; border-radius: 10px 10px 0 0; }
  .fees td { padding-top: .2rem; border-radius: 0 0 10px 10px; margin-bottom: .4rem; }
}
.link-list { font-family: var(--serif); font-size: 1.3rem; line-height: 1.35; }
.prose .link-list > li { padding-left: 0; }
.prose .link-list > li::before { content: none; }
.link-list a { display: inline-block; padding: .3rem 0; }

/* Blättern */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding-block: 0 var(--section); }
.pager a { display: grid; gap: .25rem; padding: 1.6rem 1.8rem; border-radius: var(--radius); background: var(--night); color: var(--cream); text-decoration: none; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.pager a:hover, .pager a:focus-visible { background: var(--night-3); color: #fff3d0; }
.pager-next { text-align: right; }
.pager-kind { font-size: var(--fs-small); color: var(--gold); }
.pager-name { font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1.2; }
@media (max-width: 36rem) { .pager { grid-template-columns: 1fr; } .pager-next { text-align: left; } }

/* Übersicht Angebote */
.group { display: grid; gap: 2rem 0; padding-block: clamp(4rem, 8vw, 7rem); max-width: none; }
.group:nth-of-type(even) { background: var(--rose); }
.group > * { max-width: calc(var(--max) - 2 * var(--m)); }
@media (min-width: 56rem) {
  .group { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .group-text { grid-column: 2 / span 10; }
}
.group-title { font-size: var(--fs-section); margin-bottom: 1.75rem; }
.rows { display: grid; gap: .35rem; }
.row-link { display: grid; gap: .35rem; padding: 1.2rem 1rem; margin-inline: -1rem; border-radius: var(--radius); text-decoration: none; transition: background-color var(--t-hover) ease; }
.row-link:hover, .row-link:focus-visible { background: var(--rose-2); }
.group:nth-of-type(odd) .row-link:hover, .group:nth-of-type(odd) .row-link:focus-visible { background: var(--rose); }
.row-name { font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.2; }
.row-teaser { color: var(--ink-2); max-width: 56ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row-link { grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; align-items: center; }
.row-link > :not(.row-arrow) { grid-column: 1; }
.group .rows { max-width: 46rem; }
.row-arrow { grid-column: 2; grid-row: 1 / span 2; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; background: var(--night); color: var(--cream); transition: translate var(--t-ui) var(--ease-out), background-color var(--t-hover) ease; }
.row-arrow svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.row-link:hover .row-arrow, .row-link:focus-visible .row-arrow { translate: .3rem 0; background: var(--night-3); }

/* Übersicht Informationen */
.info-rows { padding-block: clamp(3.5rem, 7vw, 6rem) var(--section); display: grid; gap: .5rem; }
.info-row-link { display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem 1.5rem; align-items: center; padding: 1rem; margin-inline: -1rem; border-radius: var(--radius); text-decoration: none; transition: background-color var(--t-hover) ease; }
.info-row-link:hover, .info-row-link:focus-visible { background: var(--rose); }
.info-row-media { grid-row: span 2; }
.info-row-media img { width: 6rem; height: 6rem; object-fit: cover; }
.info-row-name { font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.15; }
.info-row-teaser { color: var(--ink-2); max-width: 60ch; }
@media (min-width: 60rem) {
  .info-row-link { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; }
}

/* ---------------------------------------------------------------- Kontakt (ohne Formular) */
.kontakt-grid { display: grid; gap: 3rem 0; padding-block: clamp(3.5rem, 8vw, 7rem) var(--section); }
@media (min-width: 60rem) {
  .kontakt-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .kontakt-wege { grid-column: 1 / span 7; }
  .kontakt-ort { grid-column: 9 / span 4; }
}
.k-label { font-size: var(--fs-small); color: var(--ink-2); }
.k-label + .k-big { margin-top: .2rem; }
.k-big + .k-label { margin-top: 2rem; }
.k-big { font-family: var(--serif); font-size: clamp(1.55rem, 3.4vw, 2.8rem); line-height: 1.2; overflow-wrap: anywhere; }
.k-big a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size var(--t-ui) var(--ease-out); }
.k-big a:hover, .k-big a:focus-visible { background-size: 100% 1.5px; }
.kontakt-ort > * + * { margin-top: 1rem; }
.k-addr { line-height: 1.7; }
.k-addr strong { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; }

/* ---------------------------------------------------------------- Fuß: unten steigt ein orangefarbener Halbkreis auf */
.site-footer { --rise: 1; position: relative; isolation: isolate; background: var(--night); color: var(--cream); overflow: hidden; }
/* liegt im Hintergrund des Fußes: unten mittig, weniger als die Hälfte sichtbar, Rand läuft lang aus */
.horizont { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.halbkreis {
  position: absolute; left: 50%; bottom: 0;
  width: clamp(52rem, 130vw, 120rem); aspect-ratio: 1;
  translate: -50% calc(65% + (1 - var(--rise)) * 8%);
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgb(244 156 68 / .8) 0%, rgb(236 132 60 / .6) 16%, rgb(222 110 56 / .42) 32%, rgb(190 74 54 / .22) 50%, rgb(140 42 50 / .11) 66%, rgb(96 22 40 / .04) 82%, rgb(62 11 28 / 0) 100%);
  background: radial-gradient(in oklab circle closest-side, rgb(244 156 68 / .8) 0%, rgb(228 120 58 / .5) 26%, rgb(178 64 52 / .22) 50%, rgb(110 28 44 / .06) 76%, rgb(62 11 28 / 0) 100%);
  will-change: translate;
}
/* Inhalt des Fußes */
.f-ground { position: relative; }
.f-contact {
  display: grid; gap: 2.5rem 0;
  padding-block: clamp(3.5rem, 7vw, 6rem) 0;
}
@media (min-width: 56rem) {
  .f-contact { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .f-contact-main { grid-column: 1 / span 7; }
  .f-contact-side { grid-column: 9 / span 4; }
}
.f-title { font-size: var(--fs-section); color: var(--gold); }
.f-big { font-family: var(--serif); font-size: clamp(1.4rem, 3.8vw, 3.4rem); white-space: nowrap; line-height: 1.15; margin-top: .5rem; }
.f-contact-main .f-big:first-of-type { margin-top: 1.5rem; }
.f-big a { text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 2px no-repeat; transition: background-size var(--t-ui) var(--ease-out), color var(--t-hover) ease; }
.f-big a:hover, .f-big a:focus-visible { background-size: 100% 2px; color: #fff3d0; }
.f-addr { line-height: 1.7; color: var(--cream); }
.f-addr strong { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; }
.f-transit { margin-top: .9rem; color: var(--cream-2); }
.f-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1.75rem; }
.f-actions .link-plain { color: var(--gold); }
.f-cols { display: grid; gap: 2.5rem var(--gap); padding-block: clamp(4.5rem, 8vw, 6.5rem) 0; }
@media (min-width: 48rem) {
  .f-cols { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .f-col { grid-column: 9 / span 4; }
  .f-col.f-col--wide { grid-column: 1 / span 7; }
}
.f-head { font-family: var(--serif); color: var(--gold); margin-bottom: .7rem; font-size: 1.15rem; }
.f-list a { display: inline-block; padding: .3rem 0; font-size: .98rem; line-height: 1.4; color: var(--cream); }
.f-list--two { columns: 2 13rem; column-gap: var(--gap); }
.f-list--two li { break-inside: avoid; }

.f-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 2rem;
  padding: 1.75rem var(--m) 2.5rem; max-width: var(--max); margin: clamp(4rem, 8vw, 6rem) auto 0;
  font-size: .9rem; color: var(--cream-2);
}
.f-credit { flex-basis: 100%; font-size: .82rem; color: #c9a173; }
.f-credit a { color: inherit; }
.f-bottom ul { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.f-bottom a { display: inline-block; padding: .45rem 0; color: var(--cream-2); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--t-ui) var(--ease-out), color var(--t-hover) ease; }
.f-bottom a:hover { color: var(--cream); background-size: 100% 1px; }

/* ---------------------------------------------------------------- Nach oben */
.nach-oben {
  position: fixed; right: var(--m); bottom: calc(var(--callbar) + env(safe-area-inset-bottom) + 1rem); z-index: 31;
  width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--gold); color: var(--wine-deep); box-shadow: 0 0 0 1.5px rgb(74 14 34 / .18), 0 .6rem 1.6rem -.5rem rgb(40 6 18 / .55);
  transition: opacity var(--t-ui) ease, translate var(--t-ui) var(--ease-out), background-color var(--t-hover) ease;
}
.nach-oben svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nach-oben:hover { background: #ffd07a; translate: 0 -2px; }
.nach-oben:focus-visible { outline-color: var(--wine); }
.js .nach-oben:not(.is-sichtbar) { opacity: 0; translate: 0 .75rem; pointer-events: none; visibility: hidden; }
@media (min-width: 60rem) { .nach-oben { bottom: 1.75rem; } }

/* ---------------------------------------------------------------- Kontaktleiste (mobil) */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1fr 1fr; background: var(--night); padding-bottom: env(safe-area-inset-bottom); }
.callbar a { display: flex; align-items: center; justify-content: center; min-height: var(--callbar); font-weight: 600; color: var(--cream); text-decoration: none; }
.callbar a + a { box-shadow: inset 1px 0 0 rgb(248 236 226 / .16); }
.callbar a:active { background: var(--night-3); }
@media (min-width: 60rem) { .callbar { display: none; } }

/* ---------------------------------------------------------------- Bewegung
   Inhalte sind ohne JavaScript sofort sichtbar. Mit JavaScript (html.js)
   kommen sie beim Erscheinen in Leserichtung herein, je Abschnitt verschieden. */
.js [data-reveal] { opacity: 0; translate: 0 26px; transition: opacity var(--t-reveal) var(--ease-expo), translate var(--t-reveal) var(--ease-expo); }
.js [data-reveal="rise"] { translate: 0 .5em; }
.js [data-reveal="open"] { translate: none; clip-path: inset(10% 10% 10% 10% round 4px); transition: opacity 1.1s var(--ease-expo), clip-path 1.3s var(--ease-expo); }
.js [data-reveal].is-in { opacity: 1; translate: none; }
.js [data-reveal="open"].is-in { clip-path: inset(0 0 0 0 round 4px); }

/* Listen kommen Zeile für Zeile */
.js [data-reveal] :is(.ix-list, .rows, .side ul) > li { opacity: 0; translate: 0 12px; transition: opacity .7s var(--ease-out), translate .7s var(--ease-out); }
.js [data-reveal].is-in :is(.ix-list, .rows) > li { opacity: 1; translate: none; }
.js [data-reveal].is-in :is(.ix-list, .rows) > li:nth-child(1) { transition-delay: 120ms; }
.js [data-reveal].is-in :is(.ix-list, .rows) > li:nth-child(2) { transition-delay: 190ms; }
.js [data-reveal].is-in :is(.ix-list, .rows) > li:nth-child(3) { transition-delay: 260ms; }
.js [data-reveal].is-in :is(.ix-list, .rows) > li:nth-child(4) { transition-delay: 330ms; }
.js [data-reveal].is-in :is(.ix-list, .rows) > li:nth-child(5) { transition-delay: 400ms; }
.ix-grid > .ix-1.is-in { transition-delay: 90ms; }
.ix-grid > .ix-2.is-in { transition-delay: 180ms; }
.ix-grid > .ix-3.is-in { transition-delay: 270ms; }
.welcome-text.is-in { transition-delay: 120ms; }
.page-gallery.is-in { transition-delay: 150ms; }

/* Startseite: Ladefolge ohne Skript, ab dem ersten Bild, nach 1,2 Sekunden abgeschlossen */
@keyframes steigen { from { translate: 0 105%; } }
@keyframes auftauchen { from { opacity: 0; translate: 0 12px; } }
.hero-title .line > span { animation: steigen 1s var(--ease-expo) both; }
.hero-title .line + .line > span { animation-delay: 90ms; }
.hero-sub { animation: auftauchen .8s var(--ease-out) .35s both; }
.hero-actions { animation: auftauchen .8s var(--ease-out) .5s both; }
.hero-who { animation: auftauchen .8s var(--ease-out) .45s both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
  .js [data-reveal], .js [data-reveal] li { opacity: 1 !important; translate: none !important; scale: 1 !important; clip-path: none !important; }
  .site-footer { --rise: 1 !important; }
}

/* ---------------------------------------------------------------- Druck */
@media print {
  body { background: #fff; color: #000; padding: 0; font-size: 11pt; }
  .nav, .menu-toggle, .sheet, .callbar, .skip, .side, .pager, .horizont, .f-cols, .head-call { display: none !important; }
  .hero, .site-footer, .ix, .page-head { background: #fff !important; color: #000 !important; min-height: 0; }
  .js [data-reveal] { opacity: 1 !important; translate: none !important; clip-path: none !important; }
}