/* Salon Vesna · style.css · Mehrseiter (Neubau 02.11.2026) · nutzt nur Variablen aus tokens.css
   Eine Kurve (--ease, token-studio-signatur), Dauern aus der Skala, Schließen × --aus-faktor.
   Muster je Block im Kommentar. Leitidee: Handschrift. Ein Schwung (SVG-Strich) zieht sich als Zeichen durch die Seiten. */

/* ======================================================= Grund */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  background: var(--hg); color: var(--vg);
  font: 400 var(--text) / var(--zeilenhoehe-text) var(--schrift-text);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf-hoehe) + 16px);
  scrollbar-color: var(--farbe-text) var(--farbe-flaeche);
  accent-color: var(--farbe-signal); caret-color: var(--farbe-signal);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dauer-m) var(--ease), color var(--dauer-m) var(--ease);
}
/* theme-farbwechsel-scroll (Schwelle): seite.js setzt data-thema, sobald eine dunkle Bühne die Bildmitte erreicht */
html[data-thema="dunkel"] { --hg: var(--farbe-grund-2); --vg: var(--farbe-auf-dunkel); --vg-leise: var(--farbe-auf-dunkel-leise); --linie: var(--farbe-linie-dunkel); --fokus-ring: 2px solid var(--farbe-auf-dunkel); }
body { min-height: 100svh; overflow-x: clip; }
::selection { background: var(--vg); color: var(--hg); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-weight: 500; text-wrap: balance; }
p, li, dd, blockquote { text-wrap: pretty; }
data, .ziffern, time { font-variant-numeric: tabular-nums lining-nums; }
:focus-visible { outline: var(--fokus-ring); outline-offset: var(--fokus-abstand); }
[hidden] { display: none !important; }
.nur-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h2 { font: 500 var(--h2) / 1.02 var(--schrift-headline); font-stretch: 100%; letter-spacing: -.01em; }

/* Raster: 12 Spalten, Rand und Spalt aus tokens.css */
.raster, main > section, .ueberlapp > section, .fuss__innen, .kopf__innen {
  display: grid; grid-template-columns: repeat(var(--raster-spalten), minmax(0, 1fr)); column-gap: var(--raster-spalt);
  width: 100%; max-width: calc(var(--raster-max) + 2 * var(--raster-rand)); margin-inline: auto; padding-inline: var(--raster-rand);
}
main > section, .ueberlapp > section { padding-block: var(--raum-sektion); }
main > section > *, .ueberlapp > section > * { grid-column: 1 / -1; }
.vollbreit { max-width: none !important; padding-inline: max(var(--raster-rand), (100% - var(--raster-max)) / 2) !important; }

/* Sprunglink (sprunglinks-landmarken) */
.sprung { position: fixed; left: var(--raum-4); top: var(--raum-4); z-index: 100; padding: var(--raum-3) var(--raum-4); border-radius: var(--radius-klein); background: var(--farbe-grund-2); color: var(--farbe-grund); transform: translateY(-160%); transition: transform var(--dauer-s-aus) var(--ease); }
.sprung:focus-visible { transform: none; transition-duration: var(--dauer-s); outline-color: var(--farbe-grund-2); }

/* Platzhalter für Angaben, die der Kunde liefert */
.platzhalter { font-size: .875em; color: var(--vg-leise); border-bottom: 1px dashed currentColor; }
.platzhalter::before { content: 'Platzhalter: '; }
.platzhalter--block { display: block; padding: var(--raum-3) var(--raum-4); border: 1px dashed var(--farbe-feld-rand); border-radius: var(--radius-klein); }

/* ======================================================= Bildflächen (Fotos oder Platzhalter in Zielproportion, Leitfaden 7b) */
.bild { position: relative; overflow: hidden; border-radius: var(--radius-gross); background: var(--farbe-flaeche); }
.bild > img { width: 100%; height: 100%; object-fit: cover; }
.bild--platz {
  background:
    radial-gradient(110% 70% at 22% 10%, rgb(255 255 255 / .34), transparent 64%),
    radial-gradient(90% 60% at 85% 95%, rgb(30 20 18 / .16), transparent 70%),
    linear-gradient(166deg, color-mix(in oklab, var(--ton, var(--ton-beige)) 30%, var(--farbe-flaeche)) 0%, color-mix(in oklab, var(--ton, var(--ton-beige)) 86%, var(--farbe-grund-2)) 100%);
}
figure { margin: 0; }

/* ======================================================= Zeilen aus Masken (split-mask-reveal, intro-ohne-wartezeit)
   Startet mit .ist-da (pagereveal, vor dem ersten Paint; vorgerenderte Seiten erst beim Aufruf). Ohne JS stehen alle Zeilen. */
.steigt { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; }
/* längstes Wort passt immer in die Spalte: --lw = Zeichen des längsten unteilbaren Stücks (bauen.py), .92em je Zeichen ist der Kalnia-Höchstwert bei wdth 112 */
h1:has(> .steigt) { container-type: inline-size; }
.steigt[style*="--lw"] { font-size: min(1em, 100cqi / (var(--lw) * .92)); }
.steigt > span { display: block; }
[data-bewegung="voll"].ist-da .steigt > span { animation: steigen var(--dauer-l) var(--ease) both; animation-delay: calc(var(--start, 60ms) + var(--i, 0) * 90ms); }
[data-bewegung="voll"].via-wechsel { --start: 220ms; }
@keyframes steigen { from { transform: translateY(108%); } }
@keyframes auftauchen { from { opacity: 0; transform: translateY(12px); } }

/* ======================================================= Unterstreichung, Textrolle, Pfeil-Link */
.unterstrichen, .fuss a, .text a:not(.knopf), .kontakt a:not(.knopf), .karriere__initiativ a {
  text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 100% 1px; padding-bottom: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .unterstrichen:hover, .fuss a:hover, .text a:not(.knopf):hover, .kontakt a:not(.knopf):hover { animation: linie-wieder var(--dauer-m) var(--ease); }
}
@keyframes linie-wieder { 0% { background-size: 100% 1px; background-position: right bottom; } 45% { background-size: 0% 1px; background-position: right bottom; } 46% { background-position: left bottom; } 100% { background-size: 100% 1px; background-position: left bottom; } }

/* pfeil-icon-button (Pfeil-Tausch) als Nebenhandlung, dazu text-roll-hover auf dem Wort */
.pfeil-link { display: inline-flex; align-items: center; gap: var(--raum-3); min-height: 44px; text-decoration: none; font-weight: 500; }
.pfeil-link__text { display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3; }
.pfeil-link__text > span { display: block; transition: transform var(--dauer-s-aus) var(--ease); }
.pfeil-link__text > span::after { content: attr(data-t); display: block; }
.pfeil-link__pfeil { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor; overflow: hidden; flex: none; transition: background-color var(--dauer-xs) var(--ease), color var(--dauer-xs) var(--ease); }
.pfeil-link__pfeil svg { grid-area: 1 / 1; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: translate var(--dauer-s-aus) var(--ease); }
.pfeil-link__pfeil svg + svg { translate: -150% 0; }
@media (hover: hover) and (pointer: fine) {
  .pfeil-link:hover .pfeil-link__text > span { transform: translateY(-100%); transition-duration: var(--dauer-s); }
  .pfeil-link:hover .pfeil-link__pfeil { background: var(--vg); color: var(--hg); }
  .pfeil-link:hover .pfeil-link__pfeil svg { translate: 150% 0; transition-duration: var(--dauer-s); }
  .pfeil-link:hover .pfeil-link__pfeil svg + svg { translate: 0 0; }
}

/* ======================================================= Buttons: fuellung-vom-eintrittspunkt (Haupt), Kontur (Neben), button-zustaende, druck-feedback */
.knopf {
  --knopf-fuellung: var(--farbe-grund-2); --knopf-text-hover: var(--farbe-grund);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--raum-2);
  min-height: var(--button-hoehe); padding: 0 var(--raum-5); border-radius: var(--radius-button);
  border: 1px solid transparent; background: transparent; font-weight: 500; font-size: 1rem; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: color var(--dauer-xs) var(--ease), scale var(--dauer-xs) var(--ease), border-color var(--dauer-xs) var(--ease);
}
.knopf::before { content: ''; position: absolute; inset: -1px; z-index: -1; background: var(--knopf-fuellung); clip-path: var(--zu, inset(100% 0 0 0)); transition: clip-path var(--dauer-button-aus) var(--ease); }
.knopf__text { position: relative; }
.knopf--primaer { background: var(--farbe-signal); color: #fff; }
.knopf.still::before { clip-path: var(--zu) !important; transition: none !important; }
.knopf--kontur { border-color: currentColor; color: var(--vg); --knopf-fuellung: var(--vg); --knopf-text-hover: var(--hg); }
.knopf--klein { min-height: var(--button-hoehe-klein); padding: 0 var(--raum-4); font-size: .9375rem; }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { color: var(--knopf-text-hover); }
  .knopf:hover::before { clip-path: inset(0 0 0 0); transition-duration: var(--dauer-button); }
}
.knopf:active { scale: .97; }
.knopf:focus-visible { outline-offset: 3px; }
.knopf[aria-disabled="true"], .knopf:disabled { opacity: .55; cursor: not-allowed; }
.knopf[data-zustand="laden"] .knopf__text { opacity: 0; }
.knopf[data-zustand="laden"]::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: drehen 800ms linear infinite; }
@keyframes drehen { to { rotate: 1turn; } }
[data-bewegung="ruhig"] .knopf[data-zustand="laden"]::after { animation-duration: 2400ms; }

.rund { display: inline-grid; place-items: center; width: var(--button-hoehe); height: var(--button-hoehe); border-radius: 50%; border: 1px solid currentColor; background: transparent; color: inherit; transition: background-color var(--dauer-xs) var(--ease), color var(--dauer-xs) var(--ease), scale var(--dauer-xs) var(--ease), opacity var(--dauer-xs) var(--ease); }
.rund svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .rund:hover { background: var(--vg); color: var(--hg); } }
.rund:active { scale: .94; }
.rund:disabled { opacity: .35; cursor: default; background: transparent; color: inherit; }

/* ======================================================= Kopf: Navigation, Status (oeffnungszeiten-status kompakt), Menü-Knopf
   view-transition-name: kopf → bleibt beim Seitenwechsel stehen, das Blatt fährt darunter. Nie ausgeblendet (Telefon, Termin). */
.kopf { position: sticky; top: 0; z-index: 40; view-transition-name: kopf; background: var(--hg); color: var(--vg); border-bottom: 1px solid transparent; transition: border-color var(--dauer-xs) var(--ease), background-color var(--dauer-m) var(--ease), color var(--dauer-m) var(--ease); }
.kopf.ist-gerollt { border-bottom-color: var(--linie); }
.kopf__innen { display: flex; align-items: center; min-height: var(--kopf-hoehe); gap: var(--raum-5); }
.marke { font: 500 1.75rem/1 var(--schrift-headline); font-stretch: var(--h1-breite); letter-spacing: -.02em; text-decoration: none; padding-block: var(--raum-2); }
.kopf__nav { margin-left: auto; }
.kopf__nav ul { display: flex; gap: var(--raum-5); list-style: none; padding: 0; }
.kopf__nav a { position: relative; display: inline-block; padding-block: var(--raum-2); text-decoration: none; }
.kopf__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--dauer-s-aus) var(--ease); }
.kopf__nav a[aria-current="page"]::after { transform: none; }
@media (hover: hover) and (pointer: fine) { .kopf__nav a:hover::after { transform: none; transform-origin: left; transition-duration: var(--dauer-s); } }
.status { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--raum-2); min-height: 44px; font-size: var(--text-klein); color: var(--vg-leise); text-decoration: none; font-variant-numeric: tabular-nums; }
.status__punkt { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
.status[data-offen="ja"] { color: var(--vg); }
.status[data-offen="ja"] .status__punkt { background: currentColor; }
.kopf__menue { display: inline-flex; align-items: center; gap: var(--raum-3); min-height: 44px; padding: 0 0 0 var(--raum-2); border: 0; background: none; font-weight: 500; }
.kopf__menue-text { display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3; }
.kopf__menue-text > span { display: block; transition: transform var(--dauer-s-aus) var(--ease); }
.kopf__menue-text > span::after { content: 'Menü'; display: block; }
@media (hover: hover) and (pointer: fine) { .kopf__menue:hover .kopf__menue-text > span { transform: translateY(-100%); transition-duration: var(--dauer-s); } }
.kopf__menue-striche { position: relative; width: 22px; height: 10px; }
.kopf__menue-striche::before, .kopf__menue-striche::after { content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: translate var(--dauer-s) var(--ease); }
.kopf__menue-striche::before { top: 0; } .kopf__menue-striche::after { bottom: 0; }
@media (hover: hover) and (pointer: fine) { .kopf__menue:hover .kopf__menue-striche::before { translate: 0 1.5px; } .kopf__menue:hover .kopf__menue-striche::after { translate: 0 -1.5px; } }

/* ======================================================= Menü (vollbild-overlay-menue-bildvorschau, Takt des Salons)
   Fläche wischt von oben herein (clip-path 400 ms), Zeilen steigen gestaffelt aus Masken; Schließen 260 ms ohne Staffel. */
.menue { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--farbe-auf-dunkel);
  overflow: hidden; transition: display var(--dauer-s-aus) allow-discrete, overlay var(--dauer-s-aus) allow-discrete; }
.menue::backdrop { background: transparent; }
.menue__flaeche { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; background: var(--farbe-grund-2);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--raster-spalt);
  padding: 0 var(--raster-rand) var(--raum-7);
  clip-path: inset(0 0 100% 0); transition: clip-path var(--dauer-s-aus) var(--ease); }
.menue[open] .menue__flaeche { clip-path: inset(0); transition-duration: var(--dauer-s); }
@starting-style { .menue[open] .menue__flaeche { clip-path: inset(0 0 100% 0); } }
.menue :focus-visible { outline-color: var(--farbe-auf-dunkel); }
.menue ::selection { background: var(--farbe-grund); color: var(--farbe-grund-2); }
.menue__kopf { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-height: var(--kopf-hoehe); }
.menue__marke { font: 500 1.75rem/1 var(--schrift-headline); font-stretch: var(--h1-breite); letter-spacing: -.02em; }
.menue__zu { display: inline-flex; align-items: center; gap: var(--raum-3); min-height: 44px; padding: 0; border: 0; background: none; font-weight: 500; }
.menue__zu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: rotate var(--dauer-s) var(--ease); }
@media (hover: hover) and (pointer: fine) { .menue__zu:hover svg { rotate: 90deg; } }
.menue__nav { grid-column: 1 / 9; align-self: center; padding-block: var(--raum-6); }
.menue__nav ul { list-style: none; padding: 0; display: grid; }
.menue__nav a { display: inline-block; text-decoration: none; font: 500 min(clamp(2rem, 1rem + 3.4vw, 4.5rem), 7.4svh) / 1 var(--schrift-headline); font-stretch: var(--h1-breite); letter-spacing: -.02em; padding-block: .04em; transition: color var(--dauer-xs) var(--ease); }
.menue__maske { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.menue__maske > span { display: block; transform: translateY(110%); transition: transform var(--dauer-s-aus) var(--ease); }
.menue[open] .menue__maske > span { transform: none; transition-duration: var(--dauer-m); transition-delay: calc(120ms + var(--i) * var(--stagger)); }
@starting-style { .menue[open] .menue__maske > span { transform: translateY(110%); } }
.menue__nav li { --i: 0; }
.menue__nav li[style] .menue__maske > span { transition-delay: 0ms; }
.menue[open] .menue__nav li[style] .menue__maske > span { transition-delay: calc(120ms + var(--i) * var(--stagger)); }
.menue__nav a[aria-current="page"] { color: var(--farbe-auf-dunkel-leise); }
.menue__nav a[aria-current="page"] .menue__maske > span::after { content: ' ·'; }
@media (hover: hover) and (pointer: fine) { .menue__nav:hover a:not(:hover) { color: var(--farbe-auf-dunkel-leise); } }
.menue__neben { grid-column: 9 / -1; align-self: center; display: grid; gap: var(--raum-5); color: var(--farbe-auf-dunkel-leise); opacity: 0; transition: opacity var(--dauer-xs) var(--ease); }
.menue[open] .menue__neben { opacity: 1; transition-delay: 300ms; }
@starting-style { .menue[open] .menue__neben { opacity: 0; } }
.menue__neben a { color: var(--farbe-auf-dunkel); display: inline-flex; min-height: 44px; align-items: center; }
.menue__vorschau { position: relative; aspect-ratio: 4 / 5; width: 100%; max-width: 320px; }
.menue__bild { position: absolute; inset: 0; clip-path: inset(100% 0 0 0 round var(--radius-gross)); transition: clip-path var(--dauer-s-aus) var(--ease); }
.menue__bild .bild { position: absolute; inset: 0; }
.menue__bild.ist { clip-path: inset(0 0 0 0 round var(--radius-gross)); transition-duration: var(--dauer-s); z-index: 1; }

/* ======================================================= Start: Held (Foto-Hero 7/5, intro-ohne-wartezeit Variante clip) */
.held { min-height: calc(100svh - var(--kopf-hoehe)); padding-block: var(--raum-5) var(--raum-7) !important; align-items: stretch; row-gap: var(--raum-6); }
.held__text { grid-column: 1 / 8 !important; display: flex; flex-direction: column; min-width: 0; container-type: inline-size; }
.held__titel { font: 500 min(var(--titel-riesig), 19cqi) / .86 var(--schrift-headline); font-stretch: var(--h1-breite); letter-spacing: -.035em; margin-left: -.04em; }
.held__titel .steigt:nth-child(2) { padding-left: .5em; }
.held__schwung { width: min(64%, 620px); margin: var(--raum-3) 0 0 .6em; }
.schwung { width: 100%; height: auto; aspect-ratio: 600 / 80; overflow: visible; }
.schwung path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.held__satz { margin-top: auto; padding-top: var(--raum-7); font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.4; max-width: 30ch; }
.held__knoepfe { display: flex; flex-wrap: wrap; gap: var(--raum-3); margin-top: var(--raum-5); }
.held__wege { display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-5); margin-top: var(--raum-3); font-variant-numeric: tabular-nums; }
.held__wege a { display: inline-flex; align-items: center; min-height: 44px; }
.held__bild { grid-column: 8 / -1 !important; display: flex; flex-direction: column; gap: var(--raum-3); margin-right: calc(-1 * max(var(--raster-rand), (100vw - var(--raster-max)) / 2)); }
.bild--held { flex: 1; width: 100%; min-height: 62svh; border-radius: var(--radius-gross) 0 0 var(--radius-gross); }
.held__unterschrift { font-size: var(--text-klein); color: var(--vg-leise); font-variant-numeric: tabular-nums; }
/* Intro: läuft beim Laden, nicht nach einem Seitenwechsel */
[data-bewegung="voll"].ist-da:not(.via-wechsel) .intro { animation: auftauchen var(--dauer-m) var(--ease) both; animation-delay: calc(240ms + var(--i, 0) * 90ms); }
[data-bewegung="voll"].ist-da:not(.via-wechsel) .intro-schwung path { animation: schwung-zieht var(--dauer-l) var(--ease) both; animation-delay: 420ms; }
[data-bewegung="voll"].ist-da:not(.via-wechsel) .intro-bild .bild { animation: held-auf var(--dauer-l) var(--ease) both; animation-delay: 80ms; }
[data-bewegung="voll"].ist-da:not(.via-wechsel) .intro-bild .bild > img { animation: held-zoom calc(var(--dauer-l) * 1.6) var(--ease) both; animation-delay: 80ms; }
[data-bewegung="voll"].via-wechsel .steigt.intro > span { animation: none; }
@keyframes schwung-zieht { from { stroke-dashoffset: 1; } }
@keyframes held-auf { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes held-zoom { from { scale: 1.08; } }

/* ======================================================= Bewertungsband (bewertungsprofil-mit-echtheitshinweis, band) */
.band { --vg: var(--farbe-grund-2); --vg-leise: var(--farbe-text); color: var(--vg); background: var(--farbe-flaeche); padding-block: var(--raum-7) !important; row-gap: var(--raum-6); max-width: none !important; padding-inline: max(var(--raster-rand), (100% - var(--raster-max)) / 2) !important; }
.band__profil { grid-column: 1 / 5 !important; display: grid; gap: var(--raum-3); align-content: start; }
.band__schnitt { font: 500 clamp(3.5rem, 2.6rem + 3vw, 5rem) / .9 var(--schrift-headline); font-stretch: var(--h1-breite); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.band__meta { display: grid; gap: var(--raum-1); font-size: var(--text-klein); color: var(--farbe-text); }
.band__meta b { color: var(--farbe-grund-2); font-weight: 500; }
.band__echt { font-size: var(--text-klein); color: var(--farbe-text); max-width: 44ch; }
.band__links a { display: inline-flex; min-height: 44px; align-items: center; }
.band__stimmen { grid-column: 5 / -1 !important; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raster-spalt); }
.band__stimmen li { display: grid; gap: var(--raum-3); align-content: start; padding-top: var(--raum-4); border-top: 1px solid var(--farbe-grund-2); }
.band__stimmen blockquote { font-size: 1.125rem; line-height: 1.45; }
.band__wer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-1) var(--raum-3); font-size: var(--text-klein); color: var(--farbe-text); }
.band__wer b { color: var(--farbe-grund-2); font-weight: 500; }
.sterne { --n: 5; display: inline-block; width: 76px; height: 13px; flex: none;
  background: linear-gradient(90deg, var(--farbe-grund-2) calc(var(--n) / 5 * 100%), var(--farbe-feld-rand) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.2 13'%3E%3Cpath d='M6.5 0l1.6 4.6 4.9.1-3.9 3 1.4 4.7-4-2.8-4 2.8 1.4-4.7-3.9-3 4.9-.1z'/%3E%3C/svg%3E") left / 15.2px 13px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.2 13'%3E%3Cpath d='M6.5 0l1.6 4.6 4.9.1-3.9 3 1.4 4.7-4-2.8-4 2.8 1.4-4.7-3.9-3 4.9-.1z'/%3E%3C/svg%3E") left / 15.2px 13px repeat-x; }
.antwort { font-size: var(--text-klein); }
.antwort summary { cursor: pointer; color: var(--farbe-text); min-height: 44px; display: inline-flex; align-items: center; gap: var(--raum-2); list-style: none; }
.antwort summary::-webkit-details-marker { display: none; }
.antwort summary::after { content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; rotate: 45deg; translate: 0 -2px; transition: rotate var(--dauer-s) var(--ease); }
.antwort[open] summary::after { rotate: 225deg; translate: 0 2px; }
.antwort p { padding-left: var(--raum-3); border-left: 1px solid var(--farbe-feld-rand); }

/* ======================================================= Satz mit Inline-Porträts (team-ueber-mich-layout, statement) */
.satz { padding-block: var(--raum-10) var(--raum-9) !important; row-gap: var(--raum-7); }
.satz__text { grid-column: 1 / 12 !important; font: 500 var(--satz-gross) / 1.1 var(--schrift-headline); font-stretch: 100%; letter-spacing: -.02em; text-wrap: pretty; }
.satz__person { text-decoration: none; white-space: nowrap; background: linear-gradient(currentColor, currentColor) no-repeat right 92% / 0% 2px; transition: background-size var(--dauer-s-aus) var(--ease); }
@media (hover: hover) and (pointer: fine) { .satz__person:hover { background-size: 100% 2px; background-position: left 92%; transition-duration: var(--dauer-s); } }
.pille { display: inline-block; width: 1.5em; height: .95em; margin: 0 .16em 0 .02em; vertical-align: -.08em; border-radius: .48em; overflow: hidden; view-transition-class: portraet; transition: width var(--dauer-s) var(--ease); }
.pille .bild { width: 100%; height: 100%; border-radius: inherit; }
@media (hover: hover) and (pointer: fine) { .satz__person:hover .pille { width: 2.1em; } }
.satz__weiter { grid-column: 1 / -1; }

/* ======================================================= Hand (medien-expansion-scroll, scrub linear)
   Spur 260 svh, Bühne klebt; das Bild wächst von 34 vw auf randlos, die Wörter weichen der Kante. */
.hand { padding: 0 !important; max-width: none !important; display: block !important; height: 175svh; view-timeline: --hand block; }
.hand__buehne { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.hand__titel { position: relative; z-index: 2; display: flex; justify-content: space-between; width: 100%; padding-inline: var(--raster-rand); font: 500 min(var(--titel-text), 5.4vw) / 1 var(--schrift-headline); font-stretch: var(--h1-breite); letter-spacing: -.025em; pointer-events: none; }
.hand__wort { display: block; width: calc(33vw - var(--raum-5)); }
.hand__wort--l { text-align: right; } .hand__wort--r { text-align: left; }
.hand__titel { justify-content: center; gap: calc(34vw + 2 * var(--raum-5)); }
.hand__bild { position: absolute; inset: 0; z-index: 1; }
.bild--hand { position: absolute; inset: 0; border-radius: 0; }
.hand__text { position: absolute; z-index: 3; left: max(var(--raster-rand), (100vw - var(--raster-max)) / 2); bottom: var(--raum-7); max-width: 24ch; padding: var(--raum-4) var(--raum-5); border-radius: var(--radius-klein); background: var(--farbe-grund); color: var(--farbe-grund-2); font: 500 var(--h3) / 1.2 var(--schrift-headline); }
@supports (animation-timeline: view()) {
  [data-bewegung="voll"] .hand__bild { animation: hand-auf linear both; animation-timeline: --hand; animation-range: contain 0% contain 78%; }
  [data-bewegung="voll"] .bild--hand > img { animation: hand-zoom linear both; animation-timeline: --hand; animation-range: contain 0% contain 78%; }
  [data-bewegung="voll"] .hand__wort--l { animation: weg-links linear both; animation-timeline: --hand; animation-range: contain 0% contain 70%; }
  [data-bewegung="voll"] .hand__wort--r { animation: weg-rechts linear both; animation-timeline: --hand; animation-range: contain 0% contain 70%; }
  [data-bewegung="voll"] .hand__text:not(:focus-within) { animation: text-da linear both; animation-timeline: --hand; animation-range: contain 58% contain 76%; }
}
@keyframes hand-auf { from { clip-path: inset(calc(50% - 11.4vw) 33vw round var(--radius-gross)); } to { clip-path: inset(0 0 0 0 round 0px); } }
@keyframes hand-zoom { from { scale: 1.2; } }
@keyframes weg-links { to { translate: -62vw 0; } }
@keyframes weg-rechts { to { translate: 62vw 0; } }
@keyframes text-da { from { opacity: 0; translate: 0 12px; } }
/* Rückfall: ohne Scroll-Zeitleiste oder bei reduzierter Bewegung ein ruhiges Vollbild */
@supports not (animation-timeline: view()) {
  .hand { height: auto; } .hand__buehne { position: relative; height: auto; display: block; }
  .hand__titel { gap: .3em; flex-wrap: wrap; justify-content: flex-start; padding-block: var(--raum-9) var(--raum-6); } .hand__wort { width: auto; text-align: left !important; }
  .hand__bild { position: relative; width: 100%; aspect-ratio: 16 / 9; } .hand__buehne { place-items: normal; }
}
[data-bewegung="ruhig"] .hand { height: auto; } [data-bewegung="ruhig"] .hand__buehne { position: relative; height: auto; display: block; }
[data-bewegung="ruhig"] .hand__titel { gap: .3em; flex-wrap: wrap; justify-content: flex-start; padding-block: var(--raum-9) var(--raum-6); }
[data-bewegung="ruhig"] .hand__wort { width: auto; text-align: left !important; }
[data-bewegung="ruhig"] .hand__bild { position: relative; width: 100%; aspect-ratio: 16 / 9; }
[data-bewegung="ruhig"] .hand__buehne { place-items: normal; }

/* ======================================================= Bühne: Looks als Kartenstapel (flick-karten-stapel, Signatur) auf Espresso */
.buehne { min-height: 100svh; align-items: center; row-gap: var(--raum-7); padding-block: var(--raum-10) !important; }
.buehne__text { grid-column: 1 / 6 !important; display: grid; gap: var(--raum-4); justify-items: start; align-self: center; }
.buehne__text h2 { font-size: var(--titel-text); font-stretch: var(--h1-breite); letter-spacing: -.025em; line-height: .96; }
.buehne__text p { color: var(--vg-leise); }
.buehne .looks { grid-column: 6 / -1 !important; }
.looks { --kb: clamp(240px, 24vw, 340px); display: grid; justify-items: center; gap: var(--raum-5); }
.looks__buehne { width: 100%; max-width: 680px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raster-spalt); }
.look { --vg: var(--farbe-grund-2); --vg-leise: var(--farbe-text); color: var(--vg); display: grid; gap: var(--raum-2); align-content: start; padding: var(--raum-3) var(--raum-3) var(--raum-4); background: var(--farbe-grund); border-radius: var(--radius-gross); }
.bild--look { aspect-ratio: 4 / 5; border-radius: var(--radius-klein); }
.look h3, .look h4 { font: 600 1.0625rem / 1.25 var(--schrift-text); padding: var(--raum-2) var(--raum-1) 0; }
.look p { font-size: var(--text-klein); color: var(--farbe-text); font-variant-numeric: tabular-nums; padding: 0 var(--raum-1); }
.look__wer { color: var(--farbe-grund-2); font-weight: 500; }
.js .looks:not(.alle) .looks__buehne { position: relative; display: block; height: calc(var(--kb) * 1.25 + 150px); touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; }
.js .looks:not(.alle) .look { position: absolute; left: 50%; top: var(--raum-3); width: var(--kb); height: calc(var(--kb) * 1.25 + 112px); margin-left: calc(var(--kb) / -2); box-shadow: var(--schatten-karte); cursor: grab; will-change: transform; transition: box-shadow var(--dauer-xs) var(--ease); }
[data-thema="dunkel"] .js .looks:not(.alle) .look, .js [data-thema="dunkel"] .looks:not(.alle) .look { box-shadow: 0 2px 4px rgb(0 0 0 / .3), 0 30px 60px -24px rgb(0 0 0 / .8); }
.js .looks:not(.alle) .look.gepackt { cursor: grabbing; box-shadow: 0 2px 4px rgb(30 20 18 / .1), 0 34px 54px -22px rgb(30 20 18 / .55); }
.js .looks__buehne:focus-visible { outline: var(--fokus-ring); outline-offset: 6px; border-radius: var(--radius-gross); }
.looks__steuer { display: flex; align-items: center; gap: var(--raum-3); }
.looks__zaehler { min-width: 4ch; text-align: center; font-size: var(--text-klein); color: var(--vg-leise); font-variant-numeric: tabular-nums; }
.looks__alle { margin-left: var(--raum-3); }
.looks.alle .looks__zaehler, .looks.alle [data-schritt] { visibility: hidden; }
/* Kartenstapel in der Startbühne: Karten drehen sich beim Hereinscrollen aus dem Stapel auf (einmal, nicht dauernd) */

/* ======================================================= Preise kurz + Abschluss (section-overlap-uebergang) */
.ueberlapp { timeline-scope: --abschluss; }
.kurz { row-gap: var(--raum-6); align-content: center; }
.ueberlapp .kurz { position: sticky; top: 0; min-height: 100svh; transform-origin: 50% 0; }
.kurz h2 { font-size: var(--titel-text); font-stretch: var(--h1-breite); letter-spacing: -.025em; line-height: .96; }
.kurz__stufe { display: inline-block; vertical-align: .55em; margin-left: .3em; padding: .2em .7em; border: 1px solid currentColor; border-radius: var(--radius-button); font: 500 var(--label) / 1.2 var(--schrift-text); letter-spacing: .06em; text-transform: uppercase; }
.kurz__liste { list-style: none; padding: 0; border-top: 1px solid var(--vg); }
.kurz__liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: var(--raum-5); padding-block: var(--raum-4); border-bottom: 1px solid var(--linie); }
.kurz__name { font: 500 clamp(1.125rem, 1rem + .5vw, 1.375rem) / 1.25 var(--schrift-text); }
.kurz__dauer { color: var(--vg-leise); font-size: var(--text-klein); font-variant-numeric: tabular-nums; }
.kurz__preis { min-width: 6ch; text-align: right; font: 500 clamp(1.125rem, 1rem + .5vw, 1.375rem) / 1.25 var(--schrift-text); font-variant-numeric: tabular-nums lining-nums; }
.kurz__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--raum-3) var(--raum-6); color: var(--vg-leise); }
.kurz__fuss .pfeil-link { color: var(--vg); }
.abschluss { position: relative; z-index: 2; min-height: 100svh; align-content: center; row-gap: var(--raum-7);
  --hg: var(--farbe-grund-2); --vg: var(--farbe-auf-dunkel); --vg-leise: var(--farbe-auf-dunkel-leise); --fokus-ring: 2px solid var(--farbe-auf-dunkel);
  background: var(--farbe-grund-2); color: var(--vg); border-radius: var(--radius-gross) var(--radius-gross) 0 0; max-width: none !important;
  padding-inline: max(var(--raster-rand), (100% - var(--raster-max)) / 2) !important; view-timeline: --abschluss block; }
.abschluss h2 { font-size: var(--titel-seite); font-stretch: var(--h1-breite); letter-spacing: -.03em; line-height: .92; max-width: 12ch; }
.abschluss__namen { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--raum-3); }
.knopf--hell { color: var(--farbe-auf-dunkel); --knopf-fuellung: var(--farbe-grund); --knopf-text-hover: var(--farbe-grund-2); min-height: 56px; padding-inline: var(--raum-6); font-size: 1.125rem; }
.abschluss__oder { color: var(--vg-leise); }
.abschluss__oder a { color: var(--vg); font-variant-numeric: tabular-nums; }
@supports (animation-timeline: view()) {
  [data-bewegung="voll"] .ueberlapp .kurz { animation: zurueckweichen linear both; animation-timeline: --abschluss; animation-range: entry 0% entry 100%; }
}
@keyframes zurueckweichen { to { scale: .93; opacity: .35; } }

/* ======================================================= Seitenkopf der Unterseiten */
.seitenkopf { padding-block: var(--raum-9) var(--raum-7) !important; row-gap: var(--raum-6); }
.seitenkopf__titel { font: 500 var(--titel-seite) / .9 var(--schrift-headline); font-stretch: var(--h1-breite); letter-spacing: -.032em; hyphens: manual; }
.seitenkopf__titel:focus { outline: none; }
.seitenkopf__titel--adresse { font-size: clamp(2.5rem, 1rem + 6.4vw, 8rem); }
.seitenkopf--text .seitenkopf__titel { font-size: var(--titel-text); }
.pfad { width: 100%; max-width: calc(var(--raster-max) + 2 * var(--raster-rand)); margin-inline: auto; padding: var(--raum-5) var(--raster-rand) 0; }
.pfad ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--raum-2); font-size: var(--text-klein); color: var(--vg-leise); }
.pfad li + li::before { content: '/'; margin-right: var(--raum-2); }
.pfad a { display: inline-flex; min-height: 44px; align-items: center; }

/* ======================================================= Team: Namensliste mit Porträt daneben (projektindex-hover-vorschau, ohne Zeigerfolgen) */
.leute { padding-top: 0 !important; align-items: start; }
.leute__liste { grid-column: 1 / 9 !important; list-style: none; padding: 0; border-top: 1px solid var(--vg); }
.leute__zeile { border-bottom: 1px solid var(--linie); }
.leute__link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; min-width: 0; align-items: center; gap: var(--raum-5); padding-block: var(--raum-4); text-decoration: none; }
.leute__pille { display: none; width: 3.2rem; aspect-ratio: 3 / 4; border-radius: var(--radius-klein); overflow: hidden; view-transition-class: portraet; }
.leute__pille .bild { width: 100%; height: 100%; border-radius: inherit; }
.leute__name { min-width: 0; font: 500 clamp(2.5rem, 1rem + 7.4vw, 8.5rem) / .95 var(--schrift-headline); font-stretch: var(--h1-breite); letter-spacing: -.035em; transition: translate var(--dauer-s-aus) var(--ease), color var(--dauer-xs) var(--ease); }
.leute__daten { display: grid; justify-items: end; text-align: right; font-size: var(--text-klein); color: var(--vg-leise); }
.leute__daten span:first-child { color: var(--vg); font-size: var(--label); letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
.leute__pfeil svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: translate var(--dauer-s-aus) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .leute__liste:hover .leute__link:not(:hover) .leute__name { color: var(--vg-leise); }
  .leute__link:hover .leute__name { translate: .12em 0; transition-duration: var(--dauer-s); }
  .leute__link:hover .leute__pfeil svg { translate: 6px 0; transition-duration: var(--dauer-s); }
}
.leute__vorschau { grid-column: 9 / -1 !important; position: sticky; top: calc(var(--kopf-hoehe) + var(--raum-5)); aspect-ratio: 3 / 4; }
.leute__bild { position: absolute; inset: 0; clip-path: inset(100% 0 0 0 round var(--radius-gross)); transition: clip-path var(--dauer-s-aus) var(--ease); }
.leute__bild .bild { position: absolute; inset: 0; }
.leute__bild.ist { clip-path: inset(0 0 0 0 round var(--radius-gross)); transition-duration: var(--dauer-m); z-index: 1; }
.stufen { row-gap: var(--raum-6); }
.stufen__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raster-spalt); }
.stufen__liste div { padding-top: var(--raum-4); border-top: 1px solid var(--vg); display: grid; gap: var(--raum-2); }
.stufen__liste dt { font: 500 var(--label) / 1.3 var(--schrift-text); letter-spacing: .06em; text-transform: uppercase; }
.stufen__liste dd { color: var(--vg-leise); max-width: 28ch; }

/* ======================================================= Person (Porträt, Unterschrift, Daten, Buchen) */
.person-held { row-gap: var(--raum-7); padding-top: var(--raum-6) !important; align-items: end; }
.person-held__bild { grid-column: 1 / 6 !important; position: relative; justify-self: start; }
.bild--portraet { aspect-ratio: 3 / 4; height: min(calc(100svh - var(--kopf-hoehe) - 170px), 52vw); width: auto; max-width: 100%; view-transition-class: portraet; }
.unterschrift { position: absolute; left: calc(100% - 1.4em); bottom: -.38em; white-space: nowrap; z-index: 2; font: 400 clamp(3rem, 2rem + 3vw, 5.25rem) / 1 var(--schrift-akzent); rotate: -6deg; color: var(--vg); padding: .3em .2em 0; pointer-events: none; }
[data-bewegung="voll"].ist-da .unterschrift { animation: schreiben calc(var(--dauer-l) * 1.4) var(--ease) both; animation-delay: calc(var(--start, 60ms) + 360ms); }
@keyframes schreiben { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -10% 0 0); } }
.person-held__text { grid-column: 7 / -1 !important; display: grid; gap: var(--raum-5); justify-items: start; padding-bottom: var(--raum-3); }
.person-held__titel { font: 500 var(--titel-seite) / .9 var(--schrift-headline); font-stretch: var(--h1-breite); letter-spacing: -.032em; }
.person-held__haltung { font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem); line-height: 1.35; max-width: 26ch; }
.person__daten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raum-4); width: 100%; padding-block: var(--raum-4); border-block: 1px solid var(--linie); }
.person__daten dt { font-size: var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--vg-leise); }
.person__daten dd { font-size: var(--text-klein); }
.buehne--person { min-height: auto; padding-block: var(--raum-9) !important; }
.blaettern { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; max-width: calc(var(--raster-max) + 2 * var(--raster-rand)); margin-inline: auto; padding: var(--raum-8) var(--raster-rand) var(--raum-9); gap: var(--raster-spalt); }
.blaettern__link { display: grid; gap: var(--raum-2); padding-top: var(--raum-4); border-top: 1px solid var(--vg); text-decoration: none; }
.blaettern__link:not(.blaettern__link--zurueck) { text-align: right; }
.blaettern__wort { font-size: var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--vg-leise); }
.blaettern__name { overflow-wrap: anywhere; font: 500 var(--titel-text) / .95 var(--schrift-headline); font-stretch: var(--h1-breite); letter-spacing: -.025em; transition: translate var(--dauer-s-aus) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .blaettern__link:hover .blaettern__name { translate: .1em 0; transition-duration: var(--dauer-s); }
  .blaettern__link--zurueck:hover .blaettern__name { translate: -.1em 0; }
}

/* ======================================================= Looks-Seite: Filter (flip per View Transition) und versetztes Raster */
.seitenkopf--looks { row-gap: var(--raum-5); }
/* Filter als Bühne: die Namen sind die Knöpfe, der aktive bekommt den Strich in Lackrot (aktiver Zustand) */
.filter { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 clamp(var(--raum-5), 3vw, var(--raum-8)); padding-top: var(--raum-4); border-top: 1px solid var(--vg); }
.filter__name { position: relative; min-height: 44px; padding: .08em 0 .22em; border: 0; background: none; color: var(--vg-leise); font: 500 clamp(1.5rem, 1rem + 2.2vw, 3rem) / 1 var(--schrift-headline); font-stretch: var(--h1-breite); letter-spacing: -.02em; transition: color var(--dauer-xs) var(--ease); }
.filter__name sup { margin-left: .3em; font: 500 var(--label) / 1 var(--schrift-text); letter-spacing: .06em; vertical-align: 1.6em; font-variant-numeric: tabular-nums; }
.filter__name::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--farbe-signal); transform: scaleX(0); transform-origin: left; transition: transform calc(var(--dauer-s) * var(--aus-faktor)) var(--ease); }
.filter__name[aria-pressed="true"] { color: var(--vg); }
.filter__name[aria-pressed="true"]::after { transform: none; transition-duration: var(--dauer-s); }
@media (hover: hover) and (pointer: fine) { .filter__name[aria-pressed="false"]:hover { color: var(--vg); } }
.filter__satz { max-width: 46ch; font-size: var(--text-gross, 1.1875rem); color: var(--vg-leise); text-wrap: pretty; }
/* Wand: Hauptarbeit plus sechs Formen auf 12 Spalten */
.wand { padding-top: var(--raum-4) !important; padding-bottom: calc(var(--raum-sektion) + var(--raum-9)) !important; }
.wand__raster { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--raum-8) var(--raster-spalt); align-items: start; }
.wand__kachel { view-transition-class: kachel; grid-column: span 4; }
.wand__kachel[data-form="haupt"] { grid-column: 1 / -1; margin-bottom: var(--raum-6); }
.wand__kachel[data-form="a"] { grid-column: 1 / span 5; }
.wand__kachel[data-form="b"] { grid-column: 7 / span 3; margin-top: var(--raum-9); }
.wand__kachel[data-form="c"] { grid-column: 10 / span 3; }
.wand__kachel[data-form="d"] { grid-column: 2 / span 3; margin-top: var(--raum-8); }
.wand__kachel[data-form="e"] { grid-column: 6 / span 4; }
.wand__kachel[data-form="f"] { grid-column: 10 / span 3; margin-top: var(--raum-7); }
.wand__knopf { display: grid; gap: var(--raum-2); width: 100%; padding: 0; border: 0; background: none; text-align: left; color: inherit; }
.wand__text { display: grid; gap: var(--raum-1); }
.bild--wand { aspect-ratio: 4 / 5; }
.bild--wand > img, .bild--wand.bild--platz { transition: scale var(--dauer-m) var(--ease); }
@media (hover: hover) and (pointer: fine) { .wand__knopf:hover .bild--wand > img { scale: 1.04; } }
.wand__titel { font: 600 1.0625rem / 1.25 var(--schrift-text); margin-top: var(--raum-2); }
.wand__meta { font-size: var(--text-klein); color: var(--vg-leise); font-variant-numeric: tabular-nums; }
.wand__wer { color: var(--vg); font-weight: 500; }
/* Hauptarbeit: Bild über 7 Spalten, Titel groß in Kalnia unten daneben */
.wand__kachel[data-form="haupt"] .wand__knopf { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt); align-items: end; }
.wand__kachel[data-form="haupt"] .bild--wand { grid-column: 1 / span 7; }
.wand__kachel[data-form="haupt"] .wand__text { grid-column: 9 / -1; min-width: 0; gap: var(--raum-3); padding-bottom: var(--raum-4); }
.wand__kachel[data-form="haupt"] .wand__titel { font: 500 clamp(2rem, 1.1rem + 2.1vw, 3.25rem) / 1 var(--schrift-headline); hyphens: auto; overflow-wrap: break-word; font-stretch: var(--h1-breite); letter-spacing: -.025em; text-wrap: balance; }
.wand__kachel[data-form="haupt"] .wand__meta { font-size: 1rem; }
.wand__knopf:focus-visible { outline-offset: 6px; border-radius: var(--radius-gross); }
::view-transition-group(*.kachel) { animation-duration: var(--dauer-m); animation-timing-function: var(--ease); }
::view-transition-old(*.kachel), ::view-transition-new(*.kachel) { height: 100%; object-fit: cover; object-position: top; }

/* Leuchtkasten (galerie-shared-element-vollbild, basis): natives dialog, Bild wächst aus der Kachel */
.leuchte { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--farbe-grund-2); color: var(--farbe-auf-dunkel); }
.leuchte::backdrop { background: var(--farbe-grund-2); }
.leuchte :focus-visible { outline-color: var(--farbe-auf-dunkel); }
.leuchte__innen { height: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt); align-items: center; padding: var(--raum-7) var(--raster-rand); max-width: calc(var(--raster-max) + 2 * var(--raster-rand)); margin-inline: auto; }
.leuchte__bild { grid-column: 1 / 7; height: min(84svh, 100%); aspect-ratio: 4 / 5; max-width: 100%; justify-self: start; }
.leuchte__bild .bild { width: 100%; height: 100%; }
.leuchte__text { grid-column: 8 / -1; display: grid; gap: var(--raum-4); justify-items: start; }
.leuchte__wer { font-size: var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--farbe-auf-dunkel-leise); }
.leuchte__text h2 { font-size: clamp(2rem, 1rem + 2.6vw, 3.75rem); hyphens: auto; font-stretch: var(--h1-breite); letter-spacing: -.025em; line-height: .96; }
.leuchte__meta { color: var(--farbe-auf-dunkel-leise); font-variant-numeric: tabular-nums; }
.leuchte__steuer { display: flex; align-items: center; gap: var(--raum-3); margin-top: var(--raum-5); }
.leuchte__zaehler { min-width: 5ch; text-align: center; font-variant-numeric: tabular-nums; color: var(--farbe-auf-dunkel-leise); }
.leuchte__zu-form { position: absolute; top: var(--raum-4); right: var(--raster-rand); }
.rund--hell { color: var(--farbe-auf-dunkel); }
@media (hover: hover) and (pointer: fine) { .rund--hell:hover { background: var(--farbe-grund); color: var(--farbe-grund-2); } }
.leuchte .knopf--primaer { box-shadow: inset 0 0 0 2px var(--farbe-grund-2), inset 0 0 0 4px var(--farbe-auf-dunkel); --knopf-fuellung: var(--farbe-grund); --knopf-text-hover: var(--farbe-grund-2); }
::view-transition-group(leuchte-bild) { animation-duration: var(--dauer-l); animation-timing-function: var(--ease); }
::view-transition-old(leuchte-bild), ::view-transition-new(leuchte-bild) { height: 100%; object-fit: cover; }
.unterstrichen-knopf { border: 0; background: none; padding: 0; text-decoration: underline; min-height: 44px; }

/* ======================================================= Reiter (tabs-pfeiltasten-focusgroup, auto) */
.reiter { position: relative; display: flex; flex-wrap: wrap; gap: 0 var(--raum-5); border-bottom: 1px solid var(--linie); margin-bottom: var(--raum-6); }
.reiter [role="tab"] { position: relative; min-height: 48px; padding: var(--raum-2) 0 var(--raum-3); border: 0; background: none; color: var(--vg-leise); font: 500 1.125rem / 1.2 var(--schrift-text); transition: color var(--dauer-xs) var(--ease); }
.reiter [role="tab"][aria-selected="true"] { color: var(--farbe-signal); }
@media (hover: hover) and (pointer: fine) { .reiter [role="tab"]:hover { color: var(--vg); } .reiter [role="tab"][aria-selected="true"]:hover { color: var(--farbe-signal); } }
.reiter__strich { position: absolute; left: 0; bottom: -1px; height: 2px; width: 1px; background: var(--farbe-signal); transform-origin: left; transform: translateX(var(--x, 0)) scaleX(var(--b, 0)); transition: transform var(--dauer-s) var(--ease); }
.js [role="tabpanel"][hidden] { display: none !important; }
.js .tafel__titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ======================================================= Preise (speisekarte-editorial, preisliste) */
.preise { row-gap: 0; padding-top: 0 !important; }
.preise__kopf { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: end; gap: var(--raum-5); margin-bottom: var(--raum-6); }
.stufenwahl { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--raum-2); }
.stufenwahl legend { float: left; width: 100%; margin-bottom: var(--raum-2); font-size: var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--vg-leise); }
.stufenwahl label, .wahl label { position: relative; display: inline-flex; }
.stufenwahl input, .wahl input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.stufenwahl span, .wahl label > span { display: inline-flex; align-items: center; gap: var(--raum-2); min-height: 44px; padding: 0 var(--raum-4); border: 1px solid var(--farbe-feld-rand); border-radius: var(--radius-button); transition: background-color var(--dauer-xs) var(--ease), color var(--dauer-xs) var(--ease), border-color var(--dauer-xs) var(--ease); }
.stufenwahl small { font-size: var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--vg-leise); transition: color var(--dauer-xs) var(--ease); }
.stufenwahl input:checked + span, .wahl input:checked + span { background: var(--farbe-grund-2); border-color: var(--farbe-grund-2); color: var(--farbe-grund); }
.stufenwahl input:checked + span small { color: var(--farbe-auf-dunkel-leise); }
.stufenwahl input:focus-visible + span, .wahl input:focus-visible + span { outline: var(--fokus-ring); outline-offset: var(--fokus-abstand); }
@media (hover: hover) and (pointer: fine) { .stufenwahl input:not(:checked):hover + span, .wahl input:not(:checked):hover + span { border-color: var(--vg); } }
.preise__blatt { container: blatt / inline-size; background: var(--farbe-flaeche); color: var(--farbe-grund-2); border-radius: var(--radius-gross); padding: var(--raum-6) clamp(var(--raum-4), 3vw, var(--raum-7)) var(--raum-6); }
.tafel + .tafel { margin-top: var(--raum-6); }
.js .tafel + .tafel { margin-top: 0; }
.tafel__titel { font: 500 var(--h3) / 1.1 var(--schrift-headline); margin-bottom: var(--raum-3); }
.pl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.pl th, .pl td { padding: var(--raum-3) var(--raum-3); border-bottom: 1px solid var(--farbe-linie); text-align: left; vertical-align: baseline; }
.pl th:first-child { padding-left: 0; }
.pl thead th { font-weight: 500; font-size: var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--farbe-text); border-bottom-color: var(--farbe-grund-2); padding-top: 0; white-space: nowrap; }
.pl tbody th { font-weight: 500; font-size: 1rem; }
.pl__name { display: block; }
.pl__dauer { display: block; margin-top: 2px; color: var(--farbe-text); font-weight: 400; font-size: var(--text-klein); }
.pl [data-s], .pl .pl__alle { text-align: right; white-space: nowrap; width: 6.5em; transition: background-color var(--dauer-xs) var(--ease), color var(--dauer-xs) var(--ease); }
.pl td[data-s], .pl td.pl__alle { font-weight: 500; }
.pl td[data-s]:last-child, .pl th[data-s]:last-child, .pl .pl__alle { padding-right: var(--raum-3); }
.pl abbr { text-decoration: none; }
.pl__nein { color: var(--farbe-text); font-weight: 400 !important; }
.pl__text { font-weight: 400 !important; color: var(--farbe-text); white-space: normal !important; }
.pl a { text-decoration: underline; text-decoration-color: var(--farbe-feld-rand); transition: text-decoration-color var(--dauer-xs) var(--ease); }
@media (hover: hover) and (pointer: fine) { .pl a:hover { text-decoration-color: currentColor; } }
.preise:has(input[value="junior"]:checked) .pl [data-s="junior"], .preise:has(input[value="stylist"]:checked) .pl [data-s="stylist"], .preise:has(input[value="master"]:checked) .pl [data-s="master"] { background: var(--farbe-grund); }
.preise:has(input[value="junior"]:checked) .pl thead [data-s="junior"], .preise:has(input[value="stylist"]:checked) .pl thead [data-s="stylist"], .preise:has(input[value="master"]:checked) .pl thead [data-s="master"] { color: var(--farbe-grund-2); background: none; }
.tafel__zusatz, .preise__ab { margin-top: var(--raum-4); font-size: var(--text-klein); color: var(--farbe-text); max-width: var(--mass); }
.preise__ab b { color: var(--farbe-grund-2); font-weight: 500; }
@container blatt (max-width: 560px) {
  .preise:has(input[value="junior"]:checked) .pl [data-s]:not([data-s="junior"]), .preise:has(input[value="stylist"]:checked) .pl [data-s]:not([data-s="stylist"]), .preise:has(input[value="master"]:checked) .pl [data-s]:not([data-s="master"]) { display: none; }
  .pl [data-s] { background: none !important; }
  .pl th, .pl td { padding-inline: 0 var(--raum-2); }
  .pl td:last-child, .pl th:last-child { padding-right: 0 !important; }
}
.hinweise { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--raster-spalt); padding-top: 0 !important; }
.hinweise > * { grid-column: auto !important; }
.hinweis-karte { display: grid; gap: var(--raum-2); text-decoration: none; }
.hinweis-karte__bild { aspect-ratio: 4 / 3; margin-bottom: var(--raum-3); }
.hinweis-karte__bild > img { transition: scale var(--dauer-m) var(--ease); }
.hinweis-karte__titel { font: 500 var(--h2) / 1 var(--schrift-headline); font-stretch: var(--h1-breite); letter-spacing: -.02em; }
.hinweis-karte__text { color: var(--vg-leise); }
@media (hover: hover) and (pointer: fine) { .hinweis-karte:hover .hinweis-karte__bild > img { scale: 1.04; } .hinweis-karte:hover .hinweis-karte__titel { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; } }

/* ======================================================= Termin (termin-buchung-zwei-klick, platzhalter + vorauswahl) */
.termin { padding-top: 0 !important; }
.termin__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt); row-gap: var(--raum-6); align-items: start; }
.widget { --vg: var(--farbe-grund-2); --vg-leise: var(--farbe-text); color: var(--vg); grid-column: 1 / 9; position: relative; min-height: 460px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--raum-5); padding: clamp(var(--raum-5), 4vw, var(--raum-8)); background: var(--farbe-flaeche); border-radius: var(--radius-gross); overflow: hidden; }
.widget__wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raum-4); width: 100%; max-width: 640px; }
.widget__hinweis { font-size: var(--text-klein); color: var(--farbe-text); max-width: 46ch; }
.widget__status:empty { display: none; }
.widget__status { font-size: var(--text-klein); }
.widget iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.widget__geladen { position: absolute; inset: 0; display: grid; place-content: center; gap: var(--raum-3); padding: var(--raum-6); text-align: center; background: var(--farbe-flaeche); opacity: 0; transition: opacity var(--dauer-s) var(--ease); }
.widget__geladen.da { opacity: 1; }
.widget__geladen .platzhalter--block { max-width: 40ch; margin-inline: auto; }
.termin__neben { grid-column: 9 / -1; display: grid; gap: var(--raum-3); }
.termin__tel a { font: 500 clamp(1.5rem, 1.2rem + 1vw, 2.125rem) / 1.15 var(--schrift-text); text-decoration: none; font-variant-numeric: tabular-nums lining-nums; }
.termin__neben a { display: inline-flex; align-items: center; min-height: 44px; }

/* ======================================================= Felder (validierung-nach-interaktion) */
.feld { display: grid; gap: var(--raum-2); }
.feld > span:first-child { font-size: var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--vg-leise); }
.feld small { text-transform: none; letter-spacing: 0; font-size: var(--label); }
.feld input, .feld select, .feld textarea { width: 100%; min-height: var(--button-hoehe); padding: var(--raum-2) var(--raum-4); border: 1px solid var(--farbe-feld-rand); border-radius: var(--radius-klein); background: var(--farbe-grund); color: var(--farbe-grund-2); transition: border-color var(--dauer-xs) var(--ease), box-shadow var(--dauer-xs) var(--ease); }
.feld select { appearance: none; padding-right: var(--raum-7); background: var(--farbe-grund) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231E1412' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px; }
.feld textarea { resize: vertical; min-height: 6em; }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: none; border-color: var(--farbe-grund-2); box-shadow: 0 0 0 1px var(--farbe-grund-2), 0 0 0 4px color-mix(in oklab, var(--farbe-signal) 30%, transparent); }
.feld [aria-invalid="true"] { border-color: var(--farbe-signal); box-shadow: 0 0 0 1px var(--farbe-signal); }
.feld__fehler { font-size: var(--text-klein); color: var(--farbe-signal); }
.feld__fehler:empty { display: none; }
.feld__hinweis { font-size: var(--text-klein); color: var(--vg-leise); }

/* ======================================================= Gutschein (gutschein-konfigurator) auf Espresso: ganze Seite dunkel */
.gutschein { padding-top: 0 !important; }
.gutschein__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt); row-gap: var(--raum-7); align-items: start; }
.gutschein__form { grid-column: 1 / 7; display: grid; gap: var(--raum-5); }
.wahl { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--raum-2); }
.wahl legend { float: left; width: 100%; margin-bottom: var(--raum-2); font-size: var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--vg-leise); }
.gutschein .wahl label > span { border-color: var(--vg-leise); font-variant-numeric: tabular-nums; }
.gutschein .wahl input:checked + span { background: var(--farbe-grund); color: var(--farbe-grund-2); border-color: var(--farbe-grund); }
@media (hover: hover) and (pointer: fine) { .gutschein .wahl input:not(:checked):hover + span { border-color: var(--vg); } }
.gutschein__namen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raum-4); }
.gutschein .feld input { background: transparent; border-color: var(--vg-leise); color: var(--vg); }
.gutschein .feld input:focus-visible { border-color: var(--vg); box-shadow: 0 0 0 1px var(--vg); }
.gutschein .feld [aria-invalid="true"] { border-color: var(--vg); box-shadow: 0 0 0 2px var(--vg); }
.gutschein .feld__fehler { color: var(--vg); }
.gutschein .feld__fehler:not(:empty)::before { content: '! '; font-weight: 600; }
.gutschein__summe { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--raum-4); border-top: 1px solid var(--vg-leise); font-size: 1.125rem; }
.gutschein__summe data { font: 600 1.75rem / 1 var(--schrift-text); font-variant-numeric: tabular-nums lining-nums; }
/* clip-path-form-hover nur hier: einzeln stehender Knopf, nicht neben „Termin buchen“ (Rezept-Regel) */
.gutschein .knopf--primaer { --knopf-fuellung: var(--farbe-grund); --knopf-text-hover: var(--farbe-grund-2); border: 2px solid var(--farbe-grund); justify-self: start; }
.gutschein .knopf--primaer::before { clip-path: ellipse(70% 0% at 50% 100%) !important; }
@media (hover: hover) and (pointer: fine) { .gutschein .knopf--primaer:hover::before { clip-path: ellipse(120% 160% at 50% 100%) !important; } }
.gutschein__recht { font-size: var(--text-klein); }
.karte-gutschein { grid-column: 8 / -1; position: sticky; top: calc(var(--kopf-hoehe) + var(--raum-6)); container: gutschein / inline-size; }
.karte-gutschein__blatt { aspect-ratio: 1.414; display: grid; grid-template-rows: auto 1fr auto auto; padding: 7cqi 8cqi; background: var(--farbe-grund); color: var(--farbe-grund-2); border-radius: var(--radius-klein); rotate: -3deg; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .7); transition: rotate var(--dauer-l) var(--ease); }
@media (hover: hover) and (pointer: fine) { .karte-gutschein:hover .karte-gutschein__blatt { rotate: 0deg; } }
.karte-gutschein__marke { font: 500 5.4cqi / 1 var(--schrift-headline); font-stretch: var(--h1-breite); }
.karte-gutschein__wert { align-self: center; font: 500 21cqi / .9 var(--schrift-headline); font-stretch: var(--h1-breite); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.karte-gutschein__wert.lang { font-size: 11cqi; line-height: 1; }
.karte-gutschein__namen { display: flex; flex-wrap: wrap; gap: 0 3cqi; font-size: 4.2cqi; min-height: 1.5em; }
.karte-gutschein__adresse { margin-top: 2cqi; padding-top: 2.4cqi; border-top: 1px solid var(--farbe-linie); font-size: 3.2cqi; color: var(--farbe-text); letter-spacing: .06em; text-transform: uppercase; }

/* ======================================================= Salon: Bild (clip-path-bild-reveal per view()), Kontakt, Produkte, Karriere */
.salon-bild { max-width: none !important; padding: 0 !important; display: block !important; }
.bild--salon { aspect-ratio: 16 / 9; width: 100%; border-radius: 0; max-height: 88svh; }
@supports (animation-timeline: view()) {
  [data-bewegung="voll"] .bild--salon { animation: blende-auf linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  [data-bewegung="voll"] .bild--salon > img { animation: hand-zoom linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
}
@keyframes blende-auf { from { clip-path: inset(0 var(--raster-rand) 18% var(--raster-rand) round var(--radius-gross)); } to { clip-path: inset(0 0 0 0 round 0px); } }
.kontakt { row-gap: var(--raum-6); align-items: start; }
.kontakt__text { grid-column: 1 / 6 !important; min-width: 0; display: grid; gap: var(--raum-4); justify-items: start; }
.kontakt address { font-style: normal; display: grid; gap: var(--raum-2); }
.kontakt address p:first-child { font: 500 var(--h3) / 1.2 var(--schrift-headline); }
.kontakt__wege { display: flex; flex-wrap: wrap; gap: 0 var(--raum-5); font-variant-numeric: tabular-nums; }
.kontakt__wege a { display: inline-flex; align-items: center; min-height: 44px; }
.kopieren { display: inline-flex; align-items: center; gap: var(--raum-2); min-height: 44px; padding: 0; border: 0; background: none; color: var(--vg-leise); font-size: var(--text-klein); overflow: hidden; }
.kopieren::before { content: ''; width: 14px; height: 14px; flex: none; border: 1.5px solid currentColor; border-radius: 3px; box-shadow: 3px -3px 0 -1.5px var(--hg), 3px -3px 0 0 currentColor; transition: border-radius var(--dauer-xs) var(--ease); }
.kopieren.kopiert::before { border-width: 0 1.5px 1.5px 0; border-radius: 0; width: 6px; height: 11px; rotate: 45deg; box-shadow: none; margin: 0 4px 0 4px; translate: 0 -2px; }
@media (hover: hover) and (pointer: fine) { .kopieren:hover { color: var(--vg); } }
.kopieren.kopiert { color: var(--vg); }
.zeiten { border-collapse: collapse; width: 100%; max-width: 380px; font-variant-numeric: tabular-nums; margin-top: var(--raum-3); }
.zeiten th, .zeiten td { padding: var(--raum-2) 0; border-bottom: 1px solid var(--linie); text-align: left; font-weight: 400; }
.zeiten td { text-align: right; padding-left: var(--raum-7); }
.zeiten tr.heute th, .zeiten tr.heute td { font-weight: 600; }
.zeiten tr.heute th::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--farbe-signal); margin: 0 var(--raum-2) .15em 0; vertical-align: middle; }
.kontakt__sonder { font-size: var(--text-klein); color: var(--vg-leise); }
.karte { grid-column: 7 / -1 !important; display: grid; gap: var(--raum-3); }
.karte__platz { aspect-ratio: 4 / 3; display: grid; place-content: center; justify-items: center; gap: var(--raum-3); padding: var(--raum-5); text-align: center; color: var(--farbe-grund-2); }
.karte__hinweis { font-size: var(--text-klein); max-width: 30ch; }
.karte__platz .knopf--kontur { background: var(--farbe-grund); color: var(--farbe-grund-2); --knopf-fuellung: var(--farbe-grund-2); --knopf-text-hover: var(--farbe-grund); }
.karte iframe { width: 100%; height: 100%; border: 0; position: absolute; inset: 0; opacity: 0; transition: opacity var(--dauer-m) var(--ease); }
.karte iframe.da { opacity: 1; }
.produkte { row-gap: var(--raum-6); }
.produkte__kopf { display: flex; flex-wrap: wrap; align-items: end; gap: var(--raum-3) var(--raum-5); }
.produkte__kopf p { color: var(--vg-leise); padding-bottom: .2em; }
.produkte__knoepfe { margin-left: auto; display: flex; gap: var(--raum-2); }
.reihe { grid-column: 1 / -1; list-style: none; padding: 0 var(--raster-rand) var(--raum-4); margin: 0 calc(-1 * var(--raster-rand)); scroll-padding-inline: var(--raster-rand); display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 22vw, 300px); gap: var(--raster-spalt); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.reihe:focus-visible { outline-offset: 6px; border-radius: var(--radius-klein); }
.produkt { scroll-snap-align: start; display: grid; gap: var(--raum-2); align-content: start; }
.bild--produkt { aspect-ratio: 1; margin-bottom: var(--raum-2); }
.produkt h3 { font: 500 1.0625rem / 1.3 var(--schrift-text); }
.produkt p { font-size: var(--text-klein); font-variant-numeric: tabular-nums; }
.produkt small { color: var(--vg-leise); font-size: inherit; }
.karriere { row-gap: var(--raum-6); }
.karriere h2, .produkte h2 { font-size: var(--titel-text); font-stretch: var(--h1-breite); letter-spacing: -.025em; line-height: .96; }
.karriere__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raster-spalt); }
.stelle { display: grid; gap: var(--raum-3); align-content: start; justify-items: start; padding-top: var(--raum-5); border-top: 1px solid var(--vg); }
.stelle h3 { font: 500 var(--h3) / 1.15 var(--schrift-headline); font-stretch: 100%; }
.stelle__daten { font-size: var(--text-klein); color: var(--vg-leise); font-variant-numeric: tabular-nums; }
.stelle p:not(.stelle__daten) { max-width: 46ch; }
.stelle .knopf { margin-top: var(--raum-2); }
.karriere__initiativ { color: var(--vg-leise); }
.karriere__initiativ a { color: var(--vg); }

/* Dialog (dialog-modal-nativ) */
.dialog { width: min(560px, calc(100vw - 2 * var(--raster-rand))); max-height: calc(100svh - 2 * var(--raum-5)); margin: auto; padding: clamp(var(--raum-5), 4vw, var(--raum-7)); border: 0; border-radius: var(--radius-gross); background: var(--farbe-grund); color: var(--farbe-grund-2); overflow: auto;
  --vg: var(--farbe-grund-2); --vg-leise: var(--farbe-text); --hg: var(--farbe-grund);
  opacity: 0; translate: 0 8px; transition: opacity var(--dauer-s-aus) var(--ease), translate var(--dauer-s-aus) var(--ease), display var(--dauer-s-aus) allow-discrete, overlay var(--dauer-s-aus) allow-discrete; }
.dialog[open] { opacity: 1; translate: 0; transition-duration: var(--dauer-s); }
@starting-style { .dialog[open] { opacity: 0; translate: 0 8px; } }
.dialog::backdrop { background: rgb(30 20 18 / 0); transition: background-color var(--dauer-s-aus) var(--ease), display var(--dauer-s-aus) allow-discrete, overlay var(--dauer-s-aus) allow-discrete; }
.dialog[open]::backdrop { background: rgb(30 20 18 / .55); transition-duration: var(--dauer-s); }
@starting-style { .dialog[open]::backdrop { background: rgb(30 20 18 / 0); } }
.dialog h2 { font-size: var(--h3); margin-bottom: var(--raum-5); padding-right: var(--raum-8); }
.dialog__schliessen-form { position: absolute; top: var(--raum-4); right: var(--raum-4); }
.bewerbung { display: grid; gap: var(--raum-4); }
.bewerbung .knopf { justify-self: start; }
.bewerbung__status:empty { display: none; }
.bewerbung__status { font-size: var(--text-klein); }

/* ======================================================= Balayage (leistungsseite-antwort-zuerst, praxis) */
.leistung__held { row-gap: var(--raum-6); padding-top: var(--raum-6) !important; }
.leistung__held .seitenkopf__titel { grid-column: 1 / 8; }
.antwort-zuerst { grid-column: 1 / 9 !important; font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); line-height: 1.45; max-width: 44ch; }
.fakten { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--raum-4); padding: var(--raum-5) 0; border-block: 1px solid var(--linie); }
.fakten dt { font-size: var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--vg-leise); }
.fakten dd { font: 500 clamp(1.375rem, 1.1rem + 1vw, 2rem) / 1.15 var(--schrift-text); font-variant-numeric: tabular-nums lining-nums; }
.leistung__bild { width: 100%; }
.bild--weit { aspect-ratio: 16 / 9; border-radius: 0; max-height: 86svh; width: 100%; }
@supports (animation-timeline: view()) {
  [data-bewegung="voll"] .bild--weit { animation: blende-auf linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
}
.ablauf { row-gap: var(--raum-6); }
.ablauf h2, .fragen h2, .kurz--person h2 { font-size: var(--titel-text); font-stretch: var(--h1-breite); letter-spacing: -.025em; line-height: .96; }
.ablauf__liste { list-style: none; padding: 0; counter-reset: schritt; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--raster-spalt); }
.ablauf__liste li { counter-increment: schritt; display: grid; gap: var(--raum-2); align-content: start; padding-top: var(--raum-4); border-top: 1px solid var(--vg); color: var(--vg-leise); }
.ablauf__liste li::before { content: counter(schritt); font: 500 2.5rem/1 var(--schrift-headline); color: var(--vg); font-variant-numeric: lining-nums; }
.ablauf__liste b { color: var(--vg); font: 500 var(--h3) / 1.1 var(--schrift-headline); }
.fragen { row-gap: 0; }
.frage { border-bottom: 1px solid var(--linie); }
.frage:first-of-type { border-top: 1px solid var(--vg); }
.frage summary { display: flex; justify-content: space-between; align-items: center; gap: var(--raum-4); min-height: 72px; cursor: pointer; list-style: none; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary h3 { font: 500 var(--h3) / 1.2 var(--schrift-headline); }
.frage summary::after { content: ''; flex: none; width: 12px; height: 12px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; rotate: 45deg; translate: 0 -3px; transition: rotate var(--dauer-s) var(--ease), translate var(--dauer-s) var(--ease); }
.frage[open] summary::after { rotate: 225deg; translate: 0 3px; }
.frage p { padding-bottom: var(--raum-5); max-width: var(--mass); color: var(--vg-leise); }
.frage::details-content { block-size: 0; overflow: clip; transition: block-size var(--dauer-s-aus) var(--ease), content-visibility var(--dauer-s-aus) allow-discrete; }
.frage[open]::details-content { block-size: auto; transition-duration: var(--dauer-s); }
html { interpolate-size: allow-keywords; }
.leistung__buchen { display: flex !important; flex-wrap: wrap; gap: var(--raum-3); padding-top: 0 !important; }

/* ======================================================= Textseiten (Impressum, Datenschutz, Barrierefreiheit, Widerruf, 404) */
.text { max-width: calc(var(--raster-max) + 2 * var(--raster-rand)); margin-inline: auto; padding: 0 var(--raster-rand) var(--raum-9); }
.text > * { max-width: 46rem; }
.text > * + * { margin-top: var(--raum-4); }
.text h2 { hyphens: auto; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); margin-top: var(--raum-7); }
.text p, .text li { max-width: var(--mass); }
.text ul, .text ol { padding-left: 1.2em; display: grid; gap: var(--raum-2); }
.text form { display: grid; gap: var(--raum-4); margin-top: var(--raum-6); }
.text form .knopf { justify-self: start; }
.text .fakten { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.text .fakten dd { font-size: 1.25rem; }
.fehler-zeichen { font: 500 clamp(6rem, 3rem + 14vw, 14rem) / .8 var(--schrift-headline); font-stretch: var(--h1-breite); color: var(--vg-leise); }

/* ======================================================= Fuß (studio-visitenkarte-footer, praxis gekürzt) mit Riesen-Wortmarke und Schwung */
.fuss { container-type: inline-size; --hg: var(--farbe-grund-2); --vg: var(--farbe-auf-dunkel); --vg-leise: var(--farbe-auf-dunkel-leise); --linie: var(--farbe-linie-dunkel); --fokus-ring: 2px solid var(--farbe-auf-dunkel);
  position: relative; background: var(--farbe-grund-2); color: var(--vg); padding-block: var(--raum-9) var(--raum-7); overflow: hidden; }
.fuss ::selection { background: var(--farbe-grund); color: var(--farbe-grund-2); }
.fuss__innen { row-gap: var(--raum-5); align-items: end; }
.fuss__innen > * { grid-column: 1 / -1; }
.fuss__termin { display: flex; align-items: center; justify-content: space-between; gap: var(--raum-5); padding-bottom: var(--raum-6); border-bottom: 1px solid var(--linie); text-decoration: none; background: none !important; }
.fuss__frage { font: 500 var(--titel-text) / 1 var(--schrift-headline); font-stretch: var(--h1-breite); letter-spacing: -.025em; }
.fuss__pfeil svg { width: clamp(48px, 6vw, 96px); height: auto; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; transition: translate var(--dauer-s-aus) var(--ease); }
@media (hover: hover) and (pointer: fine) { .fuss__termin:hover .fuss__pfeil svg { translate: 12px 0; transition-duration: var(--dauer-s); } .fuss__termin:hover { animation: none !important; } }
[data-seite="index"] .fuss__termin, [data-seite="termin"] .fuss__termin { display: none; }
.fuss__marke { position: relative; margin: var(--raum-7) 0 var(--raum-4); font: 500 min(clamp(5rem, 1rem + 22vw, 22rem), 23.5cqi) / .78 var(--schrift-headline); font-stretch: var(--h1-breite); letter-spacing: -.045em; margin-left: -.05em; }
.fuss__marke .schwung { position: absolute; left: 4%; right: 6%; bottom: -.1em; width: 90%; color: var(--farbe-auf-dunkel-leise); }
@supports (animation-timeline: view()) {
  [data-bewegung="voll"] .fuss__marke .schwung path { animation: schwung-zieht linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
  [data-bewegung="voll"] .fuss__marke > span { display: inline-block; animation: marke-hoch linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
}
@keyframes marke-hoch { from { translate: 0 30%; } }
.fuss__adresse { grid-column: 1 / 7; padding-bottom: max(0px, calc((44px - 1lh) / 2)); color: var(--vg-leise); font-variant-numeric: tabular-nums; }
.fuss__adresse a { color: var(--vg); }
.fuss__nav { grid-column: 7 / 11; }
.fuss__nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--raum-5); }
.fuss__nav a { display: inline-flex; align-items: center; min-height: 44px; }
.schalter { grid-column: 11 / -1; justify-self: end; display: inline-flex; align-items: center; gap: var(--raum-3); min-height: 44px; position: relative; font-size: var(--text-klein); color: var(--vg-leise); cursor: pointer; white-space: nowrap; }
.schalter input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.schalter__spur { width: 36px; height: 20px; border-radius: 10px; border: 1.5px solid var(--vg-leise); position: relative; transition: background-color var(--dauer-xs) var(--ease), border-color var(--dauer-xs) var(--ease); }
.schalter__spur::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--vg-leise); transition: translate var(--dauer-s) var(--ease), background-color var(--dauer-xs) var(--ease); }
.schalter input:checked + .schalter__spur { background: var(--vg); border-color: var(--vg); }
.schalter input:checked + .schalter__spur::after { translate: 16px 0; background: var(--farbe-grund-2); }
.schalter input:focus-visible + .schalter__spur { outline: 2px solid var(--vg); outline-offset: 3px; }

/* ======================================================= Daumenleiste (mobile-bottom-navigation) */
.daumen { display: none; }

/* ======================================================= Seitenwechsel (vt-cross-document-mpa + seite-schiebt-ueber-alte, richtungsbewusst)
   tiefer: neues Blatt schiebt sich von unten über die alte Seite, die zurückweicht und dunkler wird.
   höher (auch Browser-Zurück): das obere Blatt fährt nach unten ab. Gleiche Ebene: seitlich.
   Kopf bleibt stehen. Porträt-Pille ↔ Porträt als geteiltes Element. Eine Kurve, 525 ms. */
@view-transition { navigation: auto; }
::view-transition-group(kopf) { z-index: 60; animation: none; }
::view-transition-old(kopf) { display: none; }
::view-transition-new(kopf) { animation: none; }
::view-transition-image-pair(root) { background: var(--farbe-grund-2); }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; animation-duration: var(--dauer-wechsel); animation-timing-function: var(--ease); animation-fill-mode: both; transform-origin: 50% 30%; }
::view-transition-group(*.portraet) { z-index: 55; animation-duration: var(--dauer-wechsel); animation-timing-function: var(--ease); }
::view-transition-old(*.portraet), ::view-transition-new(*.portraet) { height: 100%; object-fit: cover; }
/* Pille → Porträt: die alte Pille (rund, kleiner Ausschnitt) ist im Übergang unsichtbar, das Porträt steht ab dem ersten Frame deckend in der wachsenden Gruppe; sonst bleibt ein heller Kreis stehen. */
::view-transition-old(*.portraet) { animation: none; opacity: 0; }
::view-transition-new(*.portraet) { animation: none; opacity: 1; }
html:active-view-transition-type(tiefer)::view-transition-new(root) { animation-name: blatt-hoch; }
html:active-view-transition-type(tiefer)::view-transition-old(root) { animation-name: zurueck-weichen; }
html:active-view-transition-type(hoeher)::view-transition-old(root) { animation-name: blatt-runter; z-index: 1; }
html:active-view-transition-type(hoeher)::view-transition-new(root) { animation-name: vor-kommen; }
html:active-view-transition-type(seitlich-vor)::view-transition-new(root) { animation-name: blatt-von-rechts; }
html:active-view-transition-type(seitlich-vor)::view-transition-old(root) { animation-name: weg-nach-links; }
html:active-view-transition-type(seitlich-zurueck)::view-transition-new(root) { animation-name: blatt-von-links; }
html:active-view-transition-type(seitlich-zurueck)::view-transition-old(root) { animation-name: weg-nach-rechts; }
html:active-view-transition-type(ruhig)::view-transition-old(root) { animation: 1ms linear both vt-blende-aus; }
html:active-view-transition-type(ruhig)::view-transition-new(root) { animation: 200ms linear both vt-blende-ein; }
html:active-view-transition-type(ruhig)::view-transition-group(*) { animation-duration: 1ms; }
/* Wechsel innerhalb einer Seite: Filter ohne Blende des Grunds, Leuchtkasten mit kurzer Blende */
html:active-view-transition-type(filter)::view-transition-old(root), html:active-view-transition-type(filter)::view-transition-new(root) { animation: none; }
html:active-view-transition-type(leuchte)::view-transition-old(root) { animation: var(--dauer-xs) linear both vt-blende-aus; }
html:active-view-transition-type(leuchte)::view-transition-new(root) { animation: var(--dauer-xs) linear both vt-blende-ein; }
/* seitlich kein Porträt-Flug: jede Person bleibt auf ihrem Blatt */
html:active-view-transition-type(seitlich-vor) .bild--portraet, html:active-view-transition-type(seitlich-zurueck) .bild--portraet { view-transition-name: none !important; }
@keyframes blatt-hoch { from { transform: translateY(100%); clip-path: inset(0 0 0 0 round 28px 28px 0 0); } to { transform: none; clip-path: inset(0 0 0 0 round 0); } }
@keyframes zurueck-weichen { to { transform: scale(.94); filter: brightness(.55); clip-path: inset(0 0 0 0 round 18px); } }
@keyframes blatt-runter { from { transform: none; clip-path: inset(0 0 0 0 round 0); } to { transform: translateY(100%); clip-path: inset(0 0 0 0 round 28px 28px 0 0); } }
@keyframes vor-kommen { from { transform: scale(.94); filter: brightness(.55); clip-path: inset(0 0 0 0 round 18px); } }
@keyframes blatt-von-rechts { from { transform: translateX(100%); clip-path: inset(0 0 0 0 round 28px 0 0 28px); } to { transform: none; clip-path: inset(0 round 0); } }
@keyframes weg-nach-links { to { transform: translateX(-28%); filter: brightness(.55); } }
@keyframes blatt-von-links { from { transform: translateX(-100%); clip-path: inset(0 0 0 0 round 0 28px 28px 0); } to { transform: none; clip-path: inset(0 round 0); } }
@keyframes weg-nach-rechts { to { transform: translateX(28%); filter: brightness(.55); } }
@keyframes vt-blende-aus { to { opacity: 0; } }
@keyframes vt-blende-ein { from { opacity: 0; } }

/* ======================================================= Breiten */
@media (max-width: 1100px) {
  .band__profil { grid-column: 1 / -1 !important; grid-template-columns: auto 1fr; column-gap: var(--raum-6); align-items: end; }
  .band__schnitt { grid-row: span 2; }
  .band__echt, .band__links { grid-column: 1 / -1; }
  .band__stimmen { grid-column: 1 / -1 !important; }
  .buehne__text, .buehne .looks { grid-column: 1 / -1 !important; }
  .buehne__text { justify-items: start; }
  .leute__liste { grid-column: 1 / -1 !important; container-type: inline-size; }
  .leute__name { font-size: min(clamp(2.5rem, 1rem + 7.4vw, 8.5rem), 10cqi); }
  .leute__vorschau { display: none; }
  .leute__pille { display: block; }
  .ablauf__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--raum-6); }
  .wand__kachel[data-form]:not([data-form="haupt"]) { grid-column: span 6; }
  .wand__kachel[data-form="a"], .wand__kachel[data-form="c"], .wand__kachel[data-form="e"] { margin-top: 0; }
  .wand__kachel[data-form="b"], .wand__kachel[data-form="d"], .wand__kachel[data-form="f"] { margin-top: var(--raum-8); }
  .wand__kachel[data-form="haupt"] .bild--wand { grid-column: 1 / span 7; }
  .wand__kachel[data-form="haupt"] .wand__text { grid-column: 8 / -1; }
}
@media (max-width: 900px) {
  :root { --kopf-hoehe: 64px; }
  html { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .kopf__innen { gap: var(--raum-3); }
  .kopf__nav, .kopf__termin { display: none; }
  .status { margin-left: auto; min-width: 0; }
  .held { min-height: 0; }
  .held__text, .held__bild { grid-column: 1 / -1 !important; }
  .held__satz { padding-top: var(--raum-6); }
  .held__bild { margin-right: 0; }
  .bild--held { flex: none; min-height: 0; aspect-ratio: 4 / 5; max-height: 76svh; border-radius: var(--radius-gross); }
  .band__stimmen { grid-template-columns: 1fr; gap: var(--raum-5); }
  .band__profil { grid-template-columns: 1fr; }
  .band__schnitt { grid-row: auto; }
  .satz__text { grid-column: 1 / -1 !important; }
  .hand { height: 150svh; }
  .hand__titel { flex-direction: column; justify-content: space-between; align-items: center; height: 100%; padding-block: calc(var(--kopf-hoehe) + var(--raum-5)) var(--raum-6); gap: 0; }
  .hand__wort { width: auto; text-align: center !important; }
  @keyframes hand-auf { from { clip-path: inset(calc(50% - 26svh) 14vw round var(--radius-gross)); } to { clip-path: inset(0 0 0 0 round 0px); } }
  @keyframes weg-links { to { translate: 0 -40svh; } }
  @keyframes weg-rechts { to { translate: 0 40svh; } }
  .looks { --kb: min(70vw, 320px); }
  .person-held__bild, .person-held__text { grid-column: 1 / -1 !important; }
  .person-held__bild { max-width: 440px; width: 78%; }
  .bild--portraet { height: auto; width: 100%; }
  .person__daten { grid-template-columns: 1fr; gap: var(--raum-3); }
  .wand__raster { gap: var(--raum-7) var(--raster-spalt); }
  .wand__kachel[data-form="haupt"] .wand__knopf { grid-template-columns: 1fr; row-gap: var(--raum-3); }
  .wand__kachel[data-form="haupt"] .bild--wand, .wand__kachel[data-form="haupt"] .wand__text { grid-column: 1 / -1; }
  .wand__kachel[data-form="haupt"] { margin-bottom: 0; }
  .leuchte__innen { grid-template-columns: 1fr; align-content: center; row-gap: var(--raum-5); padding-top: var(--raum-9); overflow: auto; }
  .leuchte__bild, .leuchte__text { grid-column: 1 / -1; }
  .leuchte__bild { height: auto; width: min(100%, 52svh * .8); }
  .widget, .termin__neben { grid-column: 1 / -1; }
  .widget { min-height: 480px; }
  .gutschein__form, .karte-gutschein { grid-column: 1 / -1; }
  .karte-gutschein { position: static; order: -1; max-width: 420px; }
  .karriere__liste, .hinweise, .stufen__liste { grid-template-columns: 1fr !important; gap: var(--raum-7); }
  .kontakt__text, .karte { grid-column: 1 / -1 !important; }
  .leistung__held .seitenkopf__titel, .antwort-zuerst { grid-column: 1 / -1 !important; }
  .fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menue__nav, .menue__neben { grid-column: 1 / -1; }
  .menue__nav { align-self: start; padding-top: var(--raum-5); }
  .menue__vorschau { display: none; }
  .fuss__adresse, .fuss__nav, .schalter { grid-column: 1 / -1; justify-self: start; }
  .fuss { padding-bottom: calc(var(--raum-9) + 72px + env(safe-area-inset-bottom)); }
  .daumen {
    position: fixed; z-index: 30; left: var(--raster-rand); right: var(--raster-rand); bottom: calc(12px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--raum-1); padding: var(--raum-1);
    background: var(--farbe-grund-2); border-radius: var(--radius-button); box-shadow: 0 16px 32px -16px rgb(30 20 18 / .6);
    transition: translate var(--dauer-s) var(--ease), opacity var(--dauer-s) var(--ease);
  }
  .daumen a, .daumen button { display: grid; place-items: center; min-height: 52px; border: 0; background: none; border-radius: var(--radius-button); color: var(--farbe-auf-dunkel); text-decoration: none; font-weight: 500; transition: background-color var(--dauer-xs) var(--ease), scale var(--dauer-xs) var(--ease); }
  .daumen a:active, .daumen button:active { scale: .96; }
  .daumen :focus-visible { outline-color: var(--farbe-auf-dunkel); outline-offset: -4px; }
  .daumen .daumen__termin { background: var(--farbe-signal); box-shadow: inset 0 0 0 2px var(--farbe-grund-2), inset 0 0 0 4px var(--farbe-auf-dunkel); color: #fff; }
  .daumen.weg { translate: 0 calc(100% + 24px); opacity: 0; transition-duration: var(--dauer-s-aus); }
}
@media (max-width: 560px) {
  .kopf__menue-text { display: none; }
  .widget__wahl, .gutschein__namen { grid-template-columns: 1fr; }
  .held__knoepfe .knopf { flex: 1 1 auto; }
  .reiter { gap: 0 var(--raum-4); }
  .zeiten td { padding-left: var(--raum-4); }
  .kurz__liste li { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--raum-1); }
  .kurz__dauer { grid-row: 2; }
  .leute__link { grid-template-columns: auto minmax(0, 1fr) auto; }
  .leute__daten { display: none; }
  .ablauf__liste { grid-template-columns: 1fr; }
  .blaettern__name { font-size: clamp(2rem, 1rem + 6vw, 3rem); }
}
@media (max-width: 360px) { .marke { font-size: 1.375rem; } .status { font-size: .8125rem; } }

/* ======================================================= Bewegung reduziert: Wege und Würfe aus, Farbe und Deckkraft bleiben */
[data-bewegung="ruhig"] .reiter__strich { transition-duration: 1ms; }
[data-bewegung="ruhig"] .knopf::before { transition: none; }
[data-bewegung="ruhig"] .knopf:active, [data-bewegung="ruhig"] .rund:active, [data-bewegung="ruhig"] .daumen a:active { scale: 1; }
[data-bewegung="ruhig"] .dialog { translate: 0; }
[data-bewegung="ruhig"] .menue__flaeche { clip-path: none !important; opacity: 0; transition: opacity 150ms linear; }
[data-bewegung="ruhig"] .menue[open] .menue__flaeche { opacity: 1; }
@starting-style { [data-bewegung="ruhig"] .menue[open] .menue__flaeche { opacity: 0; } }
[data-bewegung="ruhig"] .menue__maske > span { transform: none !important; transition: none !important; }
[data-bewegung="ruhig"] .menue__bild, [data-bewegung="ruhig"] .leute__bild { clip-path: none !important; opacity: 0; transition: opacity 150ms linear; }
[data-bewegung="ruhig"] .menue__bild.ist, [data-bewegung="ruhig"] .leute__bild.ist { opacity: 1; }
[data-bewegung="ruhig"] .unterstrichen:hover, [data-bewegung="ruhig"] .fuss a:hover { animation: none; }
[data-bewegung="ruhig"] .leute__name, [data-bewegung="ruhig"] .blaettern__name, [data-bewegung="ruhig"] .pfeil-link__pfeil svg, [data-bewegung="ruhig"] .pfeil-link__text > span { transition: none; translate: none !important; transform: none !important; }
[data-bewegung="ruhig"] .wand__kachel { translate: none !important; }
[data-bewegung="ruhig"] .karte-gutschein__blatt { transition: none; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 1ms !important; } }

/* ======================================================= Kontrastmodus (kontrastmodus-forced-colors) */
@media (forced-colors: active) {
  .knopf, .rund, .stufenwahl span, .wahl label > span, .daumen a, .daumen button, .reiter [role="tab"], .kopieren, .filter__k, .pfeil-link__pfeil { border: 1px solid ButtonText; }
  .reiter [role="tab"], .kopieren { padding-inline: var(--raum-2); }
  .reiter [role="tab"][aria-selected="true"], .filter__k[aria-pressed="true"] { border-color: Highlight; }
  .knopf::before { display: none; }
  .bild, .look, .preise__blatt, .widget, .karte-gutschein__blatt { border: 1px solid CanvasText; }
  .stufenwahl input:checked + span, .wahl input:checked + span { background: Highlight; color: HighlightText; forced-color-adjust: none; }
  .reiter__strich, .status__punkt, .zeiten tr.heute th::before { background: Highlight; }
  .sterne { forced-color-adjust: none; background: CanvasText; }
  .schalter__spur { border-color: CanvasText; }
  .schalter input:checked + .schalter__spur::after { background: Highlight; }
  .menue__flaeche, .leuchte, .abschluss, .fuss { border: 1px solid CanvasText; }
  .schwung path { stroke: CanvasText; }
}

/* ======================================================= Druck */
@media print {
  .kopf, .daumen, .menue, .band__links, .widget, .gutschein, .karte, .produkte__knoepfe, .looks__steuer, .filter, .blaettern, .leuchte, [data-fundus-beispiel], .sprung, .kopieren, .schalter, dialog { display: none !important; }
  [role="tabpanel"][hidden] { display: block !important; }
  .hand { height: auto; } .hand__buehne { position: static; height: auto; display: block; } .hand__bild { position: relative; aspect-ratio: 16/9; }
  .ueberlapp .kurz { position: static; min-height: 0; }
  .abschluss, .buehne { min-height: 0; }
  html[data-thema] { --hg: #fff; --vg: #000; }
  .reihe { overflow: visible !important; grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; margin: 0; padding-inline: 0; }
  .js .looks:not(.alle) .looks__buehne { position: static; display: grid; height: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
  .js .looks:not(.alle) .look { position: static; width: auto; height: auto; margin: 0; transform: none !important; opacity: 1 !important; box-shadow: none; }
  .look, .stelle, tr, .wand__kachel { break-inside: avoid; }
  .wand__kachel { translate: none !important; }
  h2, h3 { break-after: avoid; }
}