/* ===== basis.css ===== */
/* Inna Hair Studio – Grundlage (Tokens, Schriften, Kopf, Knöpfe, Formular, Fuß, Banner) aus IH1, Farben unverändert (IH2 Freigabe 2).
   Die Abschnitte von „Golden Reveal“ (IH2) stehen in auftakt.css, film.css, szenen.css, unterseiten.css. Platzhalter {{schrift:…}} ersetzt bauen.mjs durch
   gehashte Pfade. Bewegung nur über transform/opacity; ohne JavaScript und bei reduzierter Bewegung steht alles. */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin-500-normal.8197bf5361.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin-600-normal.ae062b6d5a.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 600; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin-600-italic.0b6719b252.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin-500-italic.4fb55a7a6d.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/jost-latin-400-normal.f94cffda16.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/jost-latin-500-normal.98dce4f076.woff2") format("woff2"); }
/* Ersatzschriften mit angepassten Maßen gegen Layoutsprünge beim Schriftwechsel (Werte gemessen, siehe bauen.mjs) */
@font-face { font-family: "Cormorant Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 88.68%; ascent-override: 104.19%; descent-override: 32.36%; line-gap-override: 0%; }
@font-face { font-family: "Jost Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 95.62%; ascent-override: 111.90%; descent-override: 39.22%; line-gap-override: 0%; }

:root {
  --ivory: #FBF7F1;
  --cream: #F3EADF;
  --champagne: #E7D3B4;
  --honey: #C49A63;
  --bronze: #7E5A34;
  --espresso: #2B211B;
  --root: #3A2A20;
  --line: rgba(43, 33, 27, .14);
  --ink-soft: rgba(43, 33, 27, .76);
  --balayage: linear-gradient(180deg, var(--root) 0%, var(--honey) 42%, var(--champagne) 72%, var(--ivory) 100%);
  --balayage-quer: linear-gradient(90deg, var(--root) 0%, var(--honey) 40%, var(--champagne) 72%, var(--ivory) 100%);
  --serif: "Cormorant Garamond", "Cormorant Fallback", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Jost Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --breite: 1200px;
  --rand: clamp(20px, 5vw, 48px);
  --abschnitt: clamp(72px, 12vw, 160px);
  --kopf-h: 76px;
  --leiste-h: 0px;
  --sanft: cubic-bezier(.22, .61, .36, 1);
  interpolate-size: allow-keywords;
}
@media (max-width: 767.98px) { :root { --kopf-h: 64px; --leiste-h: 64px; } }

/* ---------- Grundlage ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ivory); color: var(--espresso); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 16px); }
body { margin: 0; font: 400 17px/1.65 var(--sans); color: var(--espresso); background: var(--ivory); overflow-x: clip; }
p, li, figcaption, blockquote { text-wrap: pretty; }
::placeholder { color: var(--ink-soft); opacity: 1; }
@media (max-width: 767.98px) { body { font-size: 16px; } }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; color: var(--espresso); text-wrap: balance; }
h1 { font-size: clamp(2.9rem, 7.2vw, 6.6rem); line-height: 1.01; letter-spacing: -.01em; }
h2 { font-size: clamp(2.3rem, 4.8vw, 4rem); line-height: 1; letter-spacing: -.01em; }
h3 { font-size: clamp(1.45rem, 2.1vw, 1.85rem); line-height: 1.12; font-weight: 600; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 500; }
.ruhig { color: var(--ink-soft); }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: 2px; }
.dunkel :focus-visible { outline-color: var(--champagne); }
.nur-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.springe { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--espresso); color: var(--ivory); padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.springe:focus { top: 12px; }

.rahmen { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.abschnitt { padding-block: var(--abschnitt); position: relative; }
.abschnitt + .abschnitt { padding-top: 0; }
.abschnitt--creme, .abschnitt--dunkel, .abschnitt--creme + .abschnitt, .abschnitt--dunkel + .abschnitt { padding-top: var(--abschnitt) !important; }
.abschnitt--creme { background: var(--cream); }
.etikett { display: inline-flex; align-items: center; gap: 12px; font: 500 12px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--bronze); margin: 0 0 22px; }
.etikett::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.dunkel .etikett { color: var(--champagne); }
.einleitung { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--ink-soft); max-width: 46ch; }
.raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 32px); }
.spalte-links { grid-column: 1 / span 6; }
.spalte-rechts { grid-column: 8 / span 5; align-self: end; }
@media (max-width: 899.98px) { .spalte-links, .spalte-rechts { grid-column: 1 / -1; } .spalte-rechts { margin-top: 18px; } }

/* ---------- Knöpfe: füllen sich beim Überfahren mit Licht ---------- */
.knopf { --k-grund: var(--espresso); --k-schrift: var(--ivory); position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 13px 26px; border-radius: 999px; border: 1px solid var(--espresso); background: var(--k-grund); color: var(--k-schrift); font: 500 15px/1.2 var(--sans); letter-spacing: .04em; text-decoration: none; cursor: pointer; transition: color .45s var(--sanft); }
.knopf::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, var(--honey) 0%, var(--champagne) 55%, var(--ivory) 100%); transform: translateX(-101%); transition: transform .55s var(--sanft); }
.knopf:focus-visible { color: var(--espresso); }
.knopf:focus-visible::before { transform: translateX(0); }
/* IH2-Korrektur Befund 36: Hover-Füllung nur mit echter Maus – auf Touch bliebe :hover nach dem Tippen kleben */
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { color: var(--espresso); }
  .knopf:hover::before { transform: translateX(0); }
}
.knopf--hell { --k-grund: transparent; --k-schrift: var(--espresso); }
.knopf--klein { min-height: 40px; padding: 9px 18px; font-size: 14px; }
.dunkel .knopf { border-color: var(--ivory); --k-grund: var(--ivory); --k-schrift: var(--espresso); }
.dunkel .knopf--hell { --k-grund: transparent; --k-schrift: var(--ivory); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; }
.textlink { font-weight: 500; color: var(--bronze); text-decoration: underline; text-decoration-color: rgba(126, 90, 52, .35); }
.textlink:hover { text-decoration-color: currentColor; }
.textlink::after { content: " →"; }
.dunkel .textlink { color: var(--champagne); text-decoration-color: rgba(231, 211, 180, .4); }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 40; background: var(--ivory); border-bottom: 1px solid transparent; transition: border-color .3s; }
.kopf.ist-gescrollt { border-bottom-color: var(--line); }
/* IH2-Nachzug (Befund 32): Über der dunklen Auftakt-Bühne ist der Kopf dunkel, das Logo tritt zurück – der Name steht groß
   darunter. Das Kopfskript setzt html.kopf-dunkel nur auf der Startseite, seite.js nimmt es weg, sobald der helle Abschnitt 01
   unter dem Kopf steht. Ohne JavaScript bleibt der Kopf hell. Gewechselt wird über eine Fläche mit Deckkraft. */
.kopf { isolation: isolate; }
.kopf::before { content: ""; position: absolute; inset: 0 0 -1px; z-index: -1; background: var(--espresso); opacity: 0; transition: opacity .35s var(--sanft); pointer-events: none; }
.kopf .marke { transition: opacity .35s var(--sanft), visibility 0s linear 0s; }
.kopf-dunkel .kopf { color: var(--ivory); border-bottom-color: transparent; }
.kopf-dunkel .kopf::before { opacity: 1; }
.kopf-dunkel .kopf .marke { opacity: 0; visibility: hidden; transition: opacity .35s var(--sanft), visibility 0s linear .35s; }
.kopf-dunkel .kopf .nav > .knopf { --k-grund: var(--ivory); --k-schrift: var(--espresso); border-color: var(--ivory); }
.kopf-dunkel .kopf .menue__tafel { color: var(--espresso); }
.kopf-dunkel .kopf :focus-visible { outline-color: var(--champagne); }
.kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--kopf-h); }
.marke { display: inline-flex; color: var(--espresso); text-decoration: none; }
.marke svg { height: 26px; width: auto; }
@media (max-width: 767.98px) { .marke svg { height: 22px; } }
.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.nav__liste { display: flex; gap: clamp(18px, 2.2vw, 30px); list-style: none; margin: 0; padding: 0; }
.nav__liste a { text-decoration: none; font-size: 15px; letter-spacing: .03em; padding: 6px 0; background: linear-gradient(90deg, var(--honey), var(--champagne)) left bottom / 0 1px no-repeat; transition: background-size .35s var(--sanft); }
.nav__liste a:hover, .nav__liste a[aria-current="page"] { background-size: 100% 1px; }
.menue { display: none; position: relative; }
.menue > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; font: 500 14px var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.menue > summary::-webkit-details-marker { display: none; }
.menue__striche { width: 22px; height: 10px; border-block: 1px solid currentColor; }
.menue__tafel { position: absolute; right: 0; top: calc(100% + 8px); width: min(86vw, 320px); background: var(--ivory); border: 1px solid var(--line); border-radius: 18px; padding: 10px; box-shadow: 0 18px 48px rgba(43, 33, 27, .12); }
.menue__tafel a { display: block; padding: 12px 14px; text-decoration: none; font-size: 17px; border-radius: 10px; }
.menue__tafel a:hover { background: var(--cream); }
@media (max-width: 899.98px) { .nav__liste, .nav > .knopf { display: none; } .menue { display: block; } }

/* ---------- S2: „Root to Tip“-Strähne ---------- */
.straehne { position: fixed; z-index: 45; pointer-events: none; background: var(--balayage); left: 0; top: 0; width: 2px; height: 100vh; transform-origin: top; transform: scaleY(0); }
@media (max-width: 767.98px) { .straehne { width: 100vw; height: 2px; background: var(--balayage-quer); transform-origin: left; transform: scaleX(0); } }
@supports (animation-timeline: scroll()) {
  .straehne { animation: straehne-hoch linear both; animation-timeline: scroll(root block); }
  @media (max-width: 767.98px) { .straehne { animation-name: straehne-quer; } }
}
@keyframes straehne-hoch { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes straehne-quer { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.bewertung { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; text-decoration: none; }
.bewertung__sterne { display: inline-flex; gap: 2px; color: var(--honey); }
.bewertung__sterne svg { width: 15px; height: 15px; }
.bewertung__zeile { font-weight: 500; }
.bewertung__klein { display: block; font-size: 13px; color: var(--ink-soft); letter-spacing: .02em; }
.licht-schalter { position: absolute; right: var(--rand); bottom: 20px; z-index: 2; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(251, 247, 241, .86); color: var(--espresso); font: 500 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.licht-schalter[hidden] { display: none; }
/* ---------- S3: Glanzstrich über Fotos (liegt darüber, verändert das Foto nicht) ---------- */
.glanz { position: relative; overflow: hidden; }
.glanz::before { content: ""; position: absolute; inset: -20% auto -20% -80%; width: 75%; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, .07) 32%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .07) 68%, rgba(255, 255, 255, 0) 85%); transform: translateX(-120%) skewX(-12deg); opacity: 0; }
.js .glanz.ist-sichtbar::before { animation: glanz .9s var(--sanft) .15s 1 both; }
@media (hover: hover) and (pointer: fine) { .js .glanz:hover::before { animation: glanz-hover .9s var(--sanft) 1 both; } }
@keyframes glanz { 0% { opacity: 0; transform: translateX(-120%) skewX(-12deg); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(380%) skewX(-12deg); } }
@keyframes glanz-hover { 0% { opacity: 0; transform: translateX(-120%) skewX(-12deg); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(380%) skewX(-12deg); } }

/* ---------- S4: Einblenden (Startwerte nur für das, was beim Start unterhalb des Bildes liegt – seite.js setzt „wartet“
   je Element aus der ersten Meldung des Beobachters; ohne JavaScript bleibt alles sichtbar) ---------- */
[data-einblenden].wartet { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--sanft), transform .5s var(--sanft); transition-delay: calc(var(--n, 0) * 60ms); }
[data-einblenden].wartet.ist-sichtbar { opacity: 1; transform: none; }

.abschnitt__fuss { margin-top: 36px; }
/* Musterbuch (/services): aufklappbare Karten */
.musterbuch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(36px, 5vw, 64px); align-items: start; }
.muster { position: relative; background: var(--ivory); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.muster::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: linear-gradient(180deg, var(--v1), var(--v2) 55%, var(--v3)); }
.muster > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 24px 24px 24px 40px; }
.muster > summary::-webkit-details-marker { display: none; }
.muster__titel { font-family: var(--serif); font-weight: 600; font-size: clamp(1.45rem, 2.1vw, 1.85rem); line-height: 1.1; }
.muster__preis { font-weight: 500; color: var(--bronze); align-self: first baseline; white-space: nowrap; }
.muster__satz { grid-column: 1 / -1; color: var(--ink-soft); font-size: 15.5px; }
.muster__zeichen { grid-column: 1 / -1; margin-top: 8px; font: 500 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); }
.muster__zeichen::after { content: "Show prices +"; }
.muster[open] .muster__zeichen::after { content: "Hide prices −"; }
.muster::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--sanft), content-visibility .45s allow-discrete; }
.muster[open]::details-content { block-size: auto; }
.zeilen { list-style: none; margin: 0; padding: 0 24px 24px 40px; }
.zeile { display: grid; grid-template-columns: 1fr auto auto; gap: 8px 18px; align-items: first baseline; padding: 14px 0; border-top: 1px solid var(--line); }
.muster--einzeln .muster__kopf { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 24px 24px 24px 40px; }
.muster--einzeln .knopf { grid-column: 1 / -1; justify-self: start; margin-top: 12px; }
@media (max-width: 559.98px) { .muster--einzeln .muster__kopf { padding: 20px 18px 20px 34px; } }
.zeile__name { font-size: 15.5px; }
.zeile__preis { font-weight: 500; white-space: nowrap; }
.zeile .knopf { justify-self: end; }
@media (max-width: 899.98px) { .musterbuch { grid-template-columns: 1fr; } }
@media (max-width: 559.98px) { .zeile { grid-template-columns: 1fr auto; } .zeile__name { grid-column: 1 / -1; } .muster > summary { padding: 20px 18px 20px 34px; } .zeilen { padding: 0 18px 18px 34px; } }
.beratung { display: grid; grid-template-columns: auto 1fr auto; gap: 18px 32px; align-items: center; margin-top: 28px; padding: 26px 28px; border-radius: 20px; background: var(--cream); border: 1px solid var(--line); }
.beratung__preis { font-family: var(--serif); font-size: 2rem; font-style: italic; color: var(--bronze); }
@media (max-width: 699.98px) { .beratung { grid-template-columns: 1fr; } }
.hinweis { margin-top: 26px; font-size: 14.5px; color: var(--ink-soft); }

/* ---------- 03 Root to tip ---------- */
.ablauf { list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; position: relative; counter-reset: schritt; }
.ablauf::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--balayage-quer); }
.schritt { position: relative; padding-top: 38px; counter-increment: schritt; }
.schritt::before { content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--ivory); border: 2px solid var(--honey); }
.schritt__nr { font-family: var(--serif); font-style: italic; font-size: 2.2rem; line-height: 1; color: var(--bronze); display: block; margin-bottom: 8px; } /* IH2: bronze statt honey – Kontrast ≥ 3:1 auf Elfenbein */
.schritt h3 { margin-bottom: 8px; }
.schritt p { color: var(--ink-soft); font-size: 15.5px; }
@media (max-width: 899.98px) {
  .ablauf { grid-template-columns: 1fr; gap: 0; padding-left: 34px; }
  .ablauf::before { left: 7px; right: auto; top: 12px; bottom: 42px; width: 2px; height: auto; background: var(--balayage); }
  .schritt { padding: 0 0 30px; }
  .schritt::before { left: -34px; top: 4px; }
}

/* ---------- 04 Lookbook / Galerie ---------- */
.lookbook { list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: 0; }
.lookbook--alle { columns: 3 280px; column-gap: clamp(12px, 2vw, 24px); }
.lookbook--alle > li { break-inside: avoid; margin-bottom: clamp(12px, 2vw, 24px); }
@media (max-width: 559.98px) { .lookbook--alle { columns: 2; column-gap: 10px; } .lookbook--alle > li { margin-bottom: 10px; } }
.lookbook__link { display: block; border-radius: 14px; overflow: hidden; background: var(--cream); }
.lookbook__link img { width: 100%; transition: transform .8s var(--sanft); }
@media (hover: hover) and (pointer: fine) { .lookbook__link:hover img { transform: scale(1.025); } }

/* Lightbox */
.lightbox { position: fixed; inset: 0; margin: 0; padding: 0; border: 0; width: auto; height: auto; max-width: none; max-height: none; background: rgba(27, 21, 17, .97); color: var(--ivory); }
.lightbox__text { display: none; }
.lightbox::backdrop { background: rgba(27, 21, 17, .6); }
.lightbox__rahmen { position: relative; height: 100%; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; padding: 56px 12px 64px; }
.lightbox__figur { margin: 0; grid-column: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 0; }
.lightbox__figur picture { min-height: 0; display: flex; }
.lightbox__figur img { max-height: calc(100dvh - 170px); width: auto; max-width: 100%; object-fit: contain; border-radius: 0; }
.lightbox__text { font-size: 14px; color: var(--champagne); text-align: center; max-width: 60ch; }
.lightbox__zu { position: absolute; top: 12px; right: 12px; }
.lightbox__zu, .lightbox__pfeil { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(251, 247, 241, .35); background: transparent; color: var(--ivory); cursor: pointer; display: grid; place-items: center; }
.lightbox__zu:hover, .lightbox__pfeil:hover { background: rgba(251, 247, 241, .12); }
.lightbox__zu svg, .lightbox__pfeil svg { width: 20px; height: 20px; }
.lightbox__pfeil--zurueck { grid-column: 1; }
.lightbox__pfeil--weiter { grid-column: 3; }
.lightbox__zaehler { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: 13px; letter-spacing: .14em; color: var(--champagne); margin: 0; }
@media (max-width: 767.98px) { .lightbox__rahmen { grid-template-columns: 1fr; padding: 60px 8px 80px; } .lightbox__figur { grid-column: 1; } .lightbox__pfeil { position: absolute; bottom: 10px; } .lightbox__pfeil--zurueck { left: 16px; } .lightbox__pfeil--weiter { right: 16px; } }
.lightbox__pfeil[hidden], .lightbox__zu[hidden] { display: none; }
.lightbox-offen, .lightbox-offen body { overflow: hidden; }

/* ---------- 06 Bewertungen (einziger dunkler Abschnitt) ---------- */
.dunkel { background: var(--espresso); color: var(--ivory); }
.dunkel h2, .dunkel h3 { color: var(--ivory); }
.stimmen__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 40px; }
.stimmen__wert { color: var(--champagne); }
.stimmen { list-style: none; margin: clamp(40px, 6vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stimmen > li { display: flex; }
.stimme { flex: 1; margin: 0; border: 1px solid rgba(251, 247, 241, .16); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.stimme__kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 500 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--champagne); }
.stimme blockquote { margin: 0; font-variant-numeric: lining-nums; font-family: var(--serif); font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.35; flex: 1; }
/* IH2-Korrektur Befund 16/23: Name als kleines Etikett mit 24-px-Goldlinie statt führendem Gedankenstrich */
.stimme figcaption { display: flex; align-items: center; gap: 12px; font: 500 12px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--champagne); }
.stimme figcaption::before { content: ""; flex: none; width: 24px; height: 1px; background: var(--honey); }
.stimmen__fuss { margin-top: 32px; }
@media (max-width: 899.98px) { .stimmen { grid-template-columns: 1fr; } }

/* ---------- 07 Besuch ---------- */
.besuch { row-gap: 48px; }
.besuch__info { grid-column: 1 / span 5; }
.besuch__formular { grid-column: 7 / span 6; }
.ort { font-style: normal; margin: 26px 0 28px; }
.ort__zusatz { display: block; font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; margin-bottom: 6px; text-wrap: balance; }
.zeiten { width: 100%; max-width: 420px; border-collapse: collapse; margin: 14px 0 28px; font-size: 15.5px; }
.zeiten th, .zeiten td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.zeiten td { text-align: right; white-space: nowrap; }
.zeiten tr.ist-heute th, .zeiten tr.ist-heute td { font-weight: 500; }
.status { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--honey); }
.status[data-offen="true"]::before { background: #4F7A4A; box-shadow: 0 0 0 4px rgba(79, 122, 74, .16); }
.status[data-offen="false"]::before { background: var(--bronze); }
@media (max-width: 899.98px) { .besuch__info, .besuch__formular { grid-column: 1 / -1; } }

/* Formular */
.formular { background: var(--cream); border-radius: 22px; padding: clamp(22px, 3.4vw, 40px); }
.abschnitt--creme .formular { background: var(--ivory); border: 1px solid var(--line); }
.formular h3 { font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 500; margin-bottom: 8px; }
.formular__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld--breit { grid-column: 1 / -1; }
.feld label { font-size: 13px; font-weight: 500; letter-spacing: .04em; }
.feld input, .feld select, .feld textarea { font: 400 16px/1.4 var(--sans); color: var(--espresso); background: var(--ivory); border: 1px solid rgba(43, 33, 27, .28); border-radius: 12px; padding: 12px 14px; min-height: 48px; width: 100%; }
.feld textarea { min-height: 130px; resize: vertical; }
.feld select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--espresso) 50%), linear-gradient(135deg, var(--espresso) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 17px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 2px solid var(--bronze); outline-offset: 1px; border-color: var(--bronze); }
.feld--falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formular__fuss { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.formular__meldung { font-size: 15px; margin: 0; }
.formular__meldung[data-art="fehler"] { color: #8A2F1E; }
@media (max-width: 559.98px) { .formular__raster { grid-template-columns: 1fr; } }
.toast { position: fixed; z-index: 70; left: 50%; bottom: calc(var(--leiste-h) + 20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); max-width: min(92vw, 520px); background: var(--espresso); color: var(--ivory); padding: 14px 22px; border-radius: 14px; box-shadow: 0 16px 40px rgba(43, 33, 27, .25); font-size: 15px; }
/* Wege (/book) */
.wege { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.weg { border: 1px solid var(--line); border-radius: 20px; padding: clamp(22px, 3vw, 36px); background: var(--ivory); position: relative; overflow: hidden; display: flex; flex-direction: column; }
.weg .knopfreihe { margin-top: auto !important; padding-top: 20px; }
.weg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--balayage-quer); }
.weg h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 10px; }
.weg p { color: var(--ink-soft); }
.weg .knopfreihe { margin-top: 20px; }
@media (max-width: 767.98px) { .wege { grid-template-columns: 1fr; } }

/* Gründe (/about) */
.gruende { list-style: none; margin: clamp(36px, 5vw, 60px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.grund { border-top: 1px solid var(--line); padding-top: 22px; }
.grund h3 { margin-bottom: 10px; }
.grund p { color: var(--ink-soft); font-size: 15.5px; }
@media (max-width: 1099.98px) { .gruende { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559.98px) { .gruende { grid-template-columns: 1fr; } }

/* Aufruf am Seitenende */
.aufruf { text-align: center; }
.aufruf h2 { margin-bottom: 18px; }
.aufruf p { max-width: 52ch; margin: 0 auto 30px; color: var(--ink-soft); }
.aufruf .knopfreihe { justify-content: center; }

/* Rechtstexte */
.rechtstext { max-width: 760px; }
.rechtstext h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 44px 0 12px; }
.rechtstext h2, .rechtstext h3, .schritt__nr { font-variant-numeric: lining-nums; }
.rechtstext h3 { margin: 28px 0 10px; font-size: 1.3rem; }
.rechtstext p, .rechtstext li { color: var(--ink-soft); }
.rechtstext ul { padding-left: 1.2em; }
.rechtstext a { color: var(--bronze); }
.rechtstext__stand { font-size: 14px; letter-spacing: .04em; color: var(--bronze) !important; }
.rechtstext__kasten { margin: 28px 0; padding: 20px 24px; border-left: 3px solid var(--honey); background: var(--cream); border-radius: 0 14px 14px 0; }
.rechtstext__kasten p { color: var(--espresso); margin: 0; }

/* ---------- Fuß ---------- */
/* unten Platz für die Handy-Leiste – in Creme, damit kein fremder Streifen unter dem Fuß steht */
.fuss { background: var(--cream); border-top: 1px solid var(--line); padding-block: clamp(56px, 8vw, 96px) calc(28px + var(--leiste-h) + env(safe-area-inset-bottom, 0px)); font-size: 15.5px; }
.fuss__raster { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1fr; gap: 36px; }
.fuss__marke svg { height: 28px; width: auto; margin-bottom: 18px; }
.fuss__leitsatz { color: var(--ink-soft); max-width: 36ch; }
.fuss h2 { font: 500 12px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--bronze); margin: 0 0 16px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fuss a { text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss address { font-style: normal; color: var(--ink-soft); }
.fuss__unten { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px; font-size: 14px; color: var(--ink-soft); }
.fuss__recht { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.fuss__recht button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.fuss__recht button:hover { text-decoration: underline; }
@media (max-width: 899.98px) { .fuss__raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559.98px) { .fuss__raster { grid-template-columns: 1fr; } }

/* ---------- Handy-Leiste Call / Book ---------- */
.leiste { display: none; }
@media (max-width: 767.98px) {
  .leiste { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--ivory); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(43, 33, 27, .06); }
  .leiste .knopf { min-height: 46px; width: 100%; }
  .leiste .knopf--hell { --k-grund: var(--ivory); }
  .lightbox-offen .leiste { visibility: hidden; }
  /* Banner offen: Leiste weg, Banner unten bündig – sonst vier gleich gestaltete Knöpfe übereinander */
  body:has(#cookie-banner:not([hidden])) .leiste { visibility: hidden; }
  body:has(#cookie-banner:not([hidden])) .banner { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Cookie-Banner und Wiederöffnen-Knopf ---------- */
.banner { position: fixed; z-index: 60; left: 50%; bottom: calc(var(--leiste-h) + 16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(100% - 24px, 760px); background: var(--ivory); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 20px 56px rgba(43, 33, 27, .16); padding: 20px 22px; display: grid; grid-template-columns: 1fr auto; gap: 14px 22px; align-items: center; font-size: 14.5px; }
.banner[hidden] { display: none; }
.banner p { margin: 0; color: var(--ink-soft); }
.banner a { color: var(--bronze); font-style: italic; }
.banner .knopfreihe { flex-wrap: nowrap; }
@media (max-width: 699.98px) { .banner { grid-template-columns: 1fr; padding: 16px; } .banner .knopfreihe .knopf { flex: 1; } }
/* Wiederöffnen-Knopf: rundes Linien-Symbol in der Ecke, nur wo der Rand breit genug ist (Sichtprüfung: die Textpille
   verdeckte Inhalte); sonst öffnet „Cookie settings“ im Fuß den Banner wieder */
.cookie-knopf { position: fixed; z-index: 55; left: 16px; bottom: 16px; width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--ivory); color: var(--bronze); cursor: pointer; box-shadow: 0 6px 18px rgba(43, 33, 27, .08); }
.cookie-knopf svg { width: 20px; height: 20px; }
.cookie-knopf[hidden] { display: none; }
@media (max-width: 1359.98px) { .cookie-knopf { display: none !important; } }
.lightbox-offen .cookie-knopf { visibility: hidden; }
/* IH2-Korrektur Befund 13: solange die Leistungs-Reihe im Bild ist (film.js, seit 08.10. Karussell), tritt der Knopf
   zurück – am Ende der Reihe läge er sonst über dem angeschnittenen „Details“ der Karte am linken Rand */
.cookie-knopf { transition: opacity .3s var(--sanft), visibility 0s linear 0s; }
.film-laeuft .cookie-knopf { opacity: 0; visibility: hidden; transition: opacity .3s var(--sanft), visibility 0s linear .3s; }

/* ---------- reduzierte Bewegung / Datensparen ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-einblenden].wartet { opacity: 1; transform: none; }
  .straehne { display: none; }
}
.ohne-bewegung *, .ohne-bewegung *::before, .ohne-bewegung *::after { animation: none !important; transition: none !important; }
.ohne-bewegung [data-einblenden] { opacity: 1 !important; transform: none !important; }
.ohne-bewegung .straehne { display: none; }

/* ===== auftakt.css ===== */
/* IH2 B1 „Auftakt“ (Auftrag 3.2/3.3): dunkle Bühne (--espresso → --root), Licht, Fotowand, Name, Durchflug-Ebenen.
   Grundzustand = ruhiger Endzustand: ohne JavaScript, bei reduzierter Bewegung und bei einem Ladefehler der Bewegungsmodule
   ist alles sichtbar, nichts bewegt sich, und Foto 19 steht ruhig unter der Überschrift 01.
   Bewegung nur unter html.js:not(.ohne-bewegung) UND prefers-reduced-motion: no-preference. Animiert werden nur transform,
   opacity und background-position (Lichtstreif). Alle Zeiten kommen als Variablen vom <section> (quellen/js/drehbuch.js).
   Durchflug: Die Bühne steht per position: sticky (Platz ist ab dem ersten Bild reserviert – kein Sprung, wenn GSAP später
   startet); auftakt.js treibt nur die Zeitleiste mit scrub. */

.auftakt {
  --held-h: calc(100svh - var(--kopf-h));
  --flug-l: var(--flug, 170vh);
  position: relative;
  isolation: isolate;
  color: var(--ivory);
  background: linear-gradient(180deg, var(--espresso) 0%, var(--root) 100%);
}
@media (max-width: 767.98px) { .auftakt { --held-h: calc(100svh - var(--kopf-h) - var(--leiste-h)); } }
@media (max-width: 767.98px), (pointer: coarse) { .auftakt { --flug-l: var(--flug-handy, 120vh); } }

/* Bühne als Raster: Licht, Wand und Text liegen in derselben Zelle übereinander; darunter (nur im ruhigen Zustand) 01 und Foto */
.auftakt__buehne {
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: minmax(var(--held-h), auto) auto auto;
  overflow: hidden;
  /* Standbild des Lichts (inline als data:-URL, ab dem ersten Bild da – LCP); im ruhigen Zustand nur oben in der Bühne,
     genau so hoch wie die erste Zeile (--held-h) und unten weich in --root auslaufend (keine harte Kante, Befund 34) */
  --saum: linear-gradient(180deg, rgba(58, 42, 32, 0) 62%, var(--root));
  background: var(--saum) center top / 100% var(--held-h) no-repeat, var(--root) var(--standbild) center top / 100% var(--held-h) no-repeat;
}
@media (max-width: 767.98px) { .auftakt__buehne { background-image: var(--saum), var(--standbild-hoch); } }
.auftakt__buehne::before { content: ""; grid-area: 1 / 1; position: relative; z-index: 0; opacity: 0; pointer-events: none; background: linear-gradient(180deg, var(--espresso), var(--root)); }
.auftakt__text, .auftakt .licht-schalter { grid-area: 1 / 1; }

/* Licht: Leinwand bleibt durchsichtig, bis licht.js zeichnet (dasselbe Bild wie das Standbild darunter, t = 7 s) */
/* Licht und Wand liegen absolut oben in der Bühne (Höhe = erste Bildschirmhöhe) und bestimmen die Zeilenhöhe nicht mit */
.auftakt__licht { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: var(--held-h); }

/* Fotowand: neutrale Abdunklung (espresso, ≤ 55 %) und Deckkraft – keine Filter (GR23) */
.auftakt__wand {
  position: absolute; z-index: 1; top: -14px; left: -14px; right: -14px; height: calc(var(--held-h) + 28px); overflow: hidden;
  /* 14 px Reserve rundum für die Maus-Parallaxe (± 12 px), damit kein Rand sichtbar wird */
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-inline: 5vw;
  opacity: var(--wand-deckkraft);
  pointer-events: none;
  /* ruhiger Zustand: die Wand läuft mit dem Standbild unten aus und ragt nicht über die erste Zeile hinaus */
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent calc(100% - 14px));
  mask-image: linear-gradient(180deg, #000 62%, transparent calc(100% - 14px));
}
.auftakt__wand::after { content: ""; position: absolute; inset: 0; background: rgba(43, 33, 27, var(--wand-dunkel)); }
.wand__spalte { list-style: none; margin: 0; padding: 0; width: 15vw; flex: none; }
.wand__spalte--b { margin-top: -9vw; }
.wand__spalte--c { margin-top: -4vw; }
.wand__spalte--handy { display: none; }
.wand__foto { margin: 0 0 1.6vw; }
.wand__foto picture, .wand__foto img, .wand__foto video { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
@media (max-width: 767.98px) {
  .auftakt__wand { justify-content: center; padding-inline: 0; }
  .wand__spalte--a, .wand__spalte--b, .wand__spalte--c { display: none; }
  .wand__spalte--handy { display: block; width: 46vw; margin-top: -8vw; }
  .wand__foto { margin-bottom: 3vw; }
}

/* Text: zentrierte Wortmarke */
.auftakt__text {
  position: relative; z-index: 4; align-self: center;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-block: clamp(24px, 5svh, 64px);
}
.auftakt__titel { margin: 0; color: var(--ivory); font-size: 1rem; line-height: 1; display: flex; flex-direction: column; align-items: center; }
.auftakt .name { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .34em; font-size: clamp(2.5rem, 5.4vw, 5.4rem); }
.name__inna { flex-basis: 100%; display: block; font: italic 600 min(clamp(7rem, 17vw, 17rem), 30svh) / .86 var(--serif); letter-spacing: -.005em; margin-bottom: .02em; }
.name__zeichen { display: inline-block; white-space: nowrap; }
/* Maske je Buchstabe: unten bündig abgeschnitten (Aufstieg), seitlich und oben großzügig (kursive Überhänge) */
.z { display: inline-block; clip-path: inset(-.4em -.5em 0 -.5em); }
.z__innen {
  display: inline-block;
  padding: .06em .14em; margin: -.06em -.14em; /* Hintergrund deckt auch die kursiven Überhänge */
  color: transparent; -webkit-text-fill-color: transparent;
  background-image: linear-gradient(100deg, rgba(251, 247, 241, 0) 41%, rgba(255, 251, 243, .9) 50%, rgba(251, 247, 241, 0) 59%), var(--balayage);
  background-size: 320% 100%, 100% 150%;
  background-position: 100% 0, 0 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
}
.name__hair { display: inline-block; font: 500 1em/1 var(--serif); color: var(--champagne); }
.name__studio { display: inline-block; font: 500 .4em/1 var(--sans); letter-spacing: .02em; text-transform: uppercase; color: var(--ivory); }
.name__studio .s { display: inline-block; }
.auftakt__linie {
  display: block; width: clamp(120px, 16vw, 240px); height: 1px;
  margin: clamp(16px, 3svh, 30px) auto clamp(12px, 2.4svh, 22px);
  background: linear-gradient(90deg, rgba(196, 154, 99, 0), var(--honey) 28%, var(--champagne) 50%, var(--honey) 72%, rgba(196, 154, 99, 0));
}
/* .zeile heißt in basis.css auch die Preiszeile – hier zurücksetzen */
.auftakt .zeile {
  display: block; padding: 0; border: 0; grid-template-columns: none;
  max-width: 34ch; margin-inline: auto;
  font: 400 clamp(1rem, 1.3vw, 1.2rem) / 1.5 var(--sans); letter-spacing: .03em;
  color: rgba(251, 247, 241, .86); text-wrap: balance;
}
.auftakt__knoepfe { justify-content: center; margin-top: clamp(20px, 3.6svh, 36px); }
.auftakt .knopf { border-color: var(--ivory); --k-grund: var(--ivory); --k-schrift: var(--espresso); }
.auftakt .knopf--hell { border-color: rgba(251, 247, 241, .62); --k-grund: transparent; --k-schrift: var(--ivory); }
.auftakt .knopf--hell:hover, .auftakt .knopf--hell:focus-visible { color: var(--espresso); }
.auftakt :focus-visible { outline-color: var(--champagne); }
.auftakt__bewertung { margin-top: clamp(14px, 2.6svh, 26px); color: var(--ivory); text-align: left; }
.auftakt .bewertung__klein { color: rgba(251, 247, 241, .86); }
/* Handy: die Wandspalte liegt genau unter Zeile, Knöpfen und Bewertung – neutrale Abdunklung (espresso, höchstens 55 %)
   dahinter; der Durchflug blendet sie mit der Zeile aus (drehbuch.durchflug.schutzAus) */
.auftakt__schutz { display: none; }
@media (max-width: 767.98px) {
  .auftakt__schutz {
    display: block; position: absolute; z-index: -1; left: -14%; right: -14%; top: 30%; bottom: -4%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(43, 33, 27, .55) 60%, rgba(43, 33, 27, 0));
  }
}

/* Pause-Knopf (WCAG 2.2.2): sichtbar, solange Bewegung läuft (licht.js nimmt hidden weg) */
.auftakt .licht-schalter {
  position: relative; right: auto; bottom: auto; z-index: 6;
  align-self: end; justify-self: end; margin: 0 var(--rand) 18px 0;
  background: rgba(43, 33, 27, .62); color: var(--ivory); border-color: rgba(251, 247, 241, .34);
}
.auftakt .licht-schalter:hover { border-color: var(--champagne); }
/* Handy: runder Symbolknopf 44 × 44 px (Befund 28) – der Text bleibt als Name für Bildschirmleser im Knopf */
@media (max-width: 767.98px) {
  .auftakt .licht-schalter {
    display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; margin: 0 10px 12px 0;
    border-radius: 50%; font-size: 0; letter-spacing: 0; color: transparent;
  }
  .auftakt .licht-schalter[hidden] { display: none; }
  .auftakt .licht-schalter::before { content: ""; box-sizing: border-box; width: 12px; height: 14px; border-inline: 4px solid var(--ivory); }
  .auftakt .licht-schalter[aria-pressed="true"]::before { width: 0; height: 0; margin-left: 4px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--ivory); }
}

/* Ruhiger Zustand: 01 und Foto 19 unter dem Namen (Foto in Originalfarbe, Text darüber, nie auf dem Haar) */
.auftakt__ansatz { grid-row: 2; position: relative; z-index: 4; padding-top: var(--abschnitt); }
.auftakt__ansatz .etikett { color: var(--champagne); }
.auftakt__ansatz h2 { color: var(--ivory); }
.auftakt__foto { grid-row: 3; position: relative; z-index: 2; width: min(100% - 2 * var(--rand), var(--breite)); margin: clamp(28px, 4vw, 48px) auto var(--abschnitt); }
.auftakt__foto picture, .auftakt__foto img { display: block; width: 100%; height: auto; }
.auftakt__maske { display: none; }

/* ======================= Bewegung ======================= */
@keyframes a-ein { from { opacity: 0; } }
@keyframes a-schleier { from { opacity: 1; } to { opacity: 0; } }
@keyframes a-wand { from { opacity: 0; } to { opacity: var(--wand-deckkraft); } }
@keyframes a-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
@keyframes a-inna { from { transform: translate3d(0, var(--y-inna), 0); } to { transform: none; } }
@keyframes a-streif { 0% { background-position: 100% 0, 0 100%; } 24%, 100% { background-position: 0% 0, 0 100%; } }
@keyframes a-hair { from { opacity: 0; transform: translate3d(var(--x-hair), 0, 0); } to { opacity: 1; transform: none; } }
@keyframes a-studio { from { opacity: 0; transform: translate3d(calc(var(--d) * (var(--lw-studio-von) - var(--lw-studio-nach))), 0, 0); } to { opacity: 1; transform: none; } }
@keyframes a-linie { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes a-auf { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* Bühne steht, während der Durchflug läuft; danach schiebt sich der nächste Abschnitt darüber (negativer Rand) */
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .auftakt { height: calc(var(--held-h) * 2 + var(--flug-l)); margin-bottom: calc(-1 * var(--held-h)); }
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .auftakt + * { position: relative; z-index: 1; background: var(--ivory); box-shadow: 0 -28px 60px rgba(27, 21, 17, .28); }
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .auftakt__buehne { position: sticky; top: var(--kopf-h); height: var(--held-h); grid-template-rows: 100%; }
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .auftakt__foto,
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .auftakt__maske,
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .auftakt__ansatz { grid-area: 1 / 1; }
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .auftakt__foto { width: 100%; height: 100%; margin: 0; opacity: 0; visibility: hidden; overflow: hidden; }
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .auftakt__foto img { height: 100%; object-fit: cover; }
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .auftakt__maske { display: block; position: relative; z-index: 3; width: 100%; height: 100%; opacity: 0; visibility: hidden; pointer-events: none; overflow: visible; }
  /* nur Deckkraft 0, nicht visibility: hidden – die h2 bleibt für Bildschirmleser da (Lighthouse heading-order, IH2 C) */
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .auftakt__ansatz { padding: 0; align-self: center; opacity: 0; }
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .auftakt__ansatz > * { max-width: min(400px, 31vw); }
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .auftakt__ansatz h2 { font-size: clamp(2.3rem, 4.4vw, 4rem); }
  @media (max-width: 767.98px) {
    html.js:not(.ohne-bewegung):not(.bewegung-fehler) .auftakt__ansatz { align-self: start; padding-top: 26px; }
    html.js:not(.ohne-bewegung):not(.bewegung-fehler) .auftakt__ansatz > * { max-width: none; }
    html.js:not(.ohne-bewegung):not(.bewegung-fehler) .auftakt__ansatz .etikett { margin-bottom: 12px; }
    /* Shader-Licht rechts oben liegt unter „you.“ (Befund 27): neutrale Abdunklung ≤ 55 % hinter Etikett und h2,
       sie erscheint mit dem Text (Deckkraft der Gruppe) */
    html.js:not(.ohne-bewegung):not(.bewegung-fehler) .auftakt__ansatz::before {
      content: ""; position: absolute; z-index: -1; inset: -40px calc(-1 * var(--rand)) -70px; pointer-events: none;
      background: radial-gradient(closest-side, rgba(43, 33, 27, .55) 70%, rgba(43, 33, 27, 0));
    }
  }
  html.flug-aktiv .auftakt__foto { will-change: transform, opacity; } /* Maske bewusst ohne will-change: bleibt beim Flug scharf (wird je Bild neu gerastert) */

  /* Auftakt nach Drehbuch – läuft ab dem ersten Bild per CSS (kein Warten auf GSAP, LCP) */
  html.js:not(.ohne-bewegung) .auftakt__buehne { background-size: 0 0, cover; }
  html.js:not(.ohne-bewegung) .auftakt__wand { -webkit-mask-image: none; mask-image: none; }
  html.js:not(.ohne-bewegung) .auftakt__buehne::before { animation: a-schleier var(--d-licht) var(--sanft) var(--t-licht) both; }
  html.js:not(.ohne-bewegung) .auftakt__wand { animation: a-wand var(--d-wand) var(--sanft) var(--t-wand) both; }
  html.js:not(.ohne-bewegung) .wand__spalte { animation: a-drift var(--wand-a) linear infinite; }
  html.js:not(.ohne-bewegung) .wand__spalte--b { animation-duration: var(--wand-b); animation-direction: reverse; }
  html.js:not(.ohne-bewegung) .wand__spalte--c { animation-duration: var(--wand-c); }
  html.js:not(.ohne-bewegung) .z__innen {
    animation: a-inna var(--d-inna) cubic-bezier(.16, 1, .3, 1) calc(var(--t-inna) + var(--i) * var(--v-inna)) both,
      a-streif var(--streif) linear calc(var(--t-inna) + 1.4s + var(--i) * .12s) infinite both;
  }
  html.js:not(.ohne-bewegung) .name__hair { animation: a-hair var(--d-hair) cubic-bezier(.16, 1, .3, 1) var(--t-hair) both; }
  html.js:not(.ohne-bewegung) .name__studio .s { animation: a-studio var(--d-studio) cubic-bezier(.16, 1, .3, 1) var(--t-studio) both; }
  html.js:not(.ohne-bewegung) .auftakt__linie { animation: a-linie var(--d-linie) cubic-bezier(.65, 0, .35, 1) var(--t-linie) both; }
  html.js:not(.ohne-bewegung) .auftakt .zeile { animation: a-ein var(--d-zeile) var(--sanft) var(--t-zeile) both; }
  html.js:not(.ohne-bewegung) .auftakt__knoepfe > * { animation: a-auf var(--d-knoepfe) cubic-bezier(.16, 1, .3, 1) var(--t-knoepfe) both; }
  html.js:not(.ohne-bewegung) .auftakt__knoepfe > :nth-child(2) { animation-delay: calc(var(--t-knoepfe) + var(--v-knoepfe)); }
  html.js:not(.ohne-bewegung) .auftakt__bewertung > * { animation: a-auf var(--d-knoepfe) cubic-bezier(.16, 1, .3, 1) calc(var(--t-knoepfe) + 2 * var(--v-knoepfe)) both; }

  /* Wiederkehr in derselben Sitzung: kein Drehbuch, Endzustand in --d-wiederkehr */
  html.auftakt-wiederkehr:not(.ohne-bewegung) .auftakt__buehne::before,
  html.auftakt-wiederkehr:not(.ohne-bewegung) .name__hair,
  html.auftakt-wiederkehr:not(.ohne-bewegung) .name__studio .s,
  html.auftakt-wiederkehr:not(.ohne-bewegung) .auftakt__linie,
  html.auftakt-wiederkehr:not(.ohne-bewegung) .auftakt .zeile,
  html.auftakt-wiederkehr:not(.ohne-bewegung) .auftakt__knoepfe > *,
  html.auftakt-wiederkehr:not(.ohne-bewegung) .auftakt__bewertung > * { animation: none; }
  html.auftakt-wiederkehr:not(.ohne-bewegung) .auftakt__text { animation: a-ein var(--d-wiederkehr) ease-out both; }
  html.auftakt-wiederkehr:not(.ohne-bewegung) .auftakt__wand { animation: a-wand var(--d-wiederkehr) ease-out both; }
  html.auftakt-wiederkehr:not(.ohne-bewegung) .z__innen { animation: a-streif var(--streif) linear calc(.6s + var(--i) * .12s) infinite both; }

  /* Gescrollt während des Auftakts (seite.js): sofort Endzustand (GR26) – Licht, Wand-Drift und Lichtstreif laufen weiter */
  html.auftakt-fertig:not(.ohne-bewegung) .auftakt__buehne::before,
  html.auftakt-fertig:not(.ohne-bewegung) .auftakt__wand,
  html.auftakt-fertig:not(.ohne-bewegung) .auftakt__text,
  html.auftakt-fertig:not(.ohne-bewegung) .name__hair,
  html.auftakt-fertig:not(.ohne-bewegung) .name__studio .s,
  html.auftakt-fertig:not(.ohne-bewegung) .auftakt__linie,
  html.auftakt-fertig:not(.ohne-bewegung) .auftakt .zeile,
  html.auftakt-fertig:not(.ohne-bewegung) .auftakt__knoepfe > *,
  html.auftakt-fertig:not(.ohne-bewegung) .auftakt__bewertung > * { animation: none; }
  html.auftakt-fertig:not(.ohne-bewegung) .z__innen { animation: a-streif var(--streif) linear calc(var(--i) * .12s) infinite both; }

  /* Pause-Knopf und Bühne außer Sicht: Wand und Lichtstreif halten an (Licht hält licht.js an) */
  html.bewegung-pause:not(.ohne-bewegung) .wand__spalte, html.auftakt-aus:not(.ohne-bewegung) .wand__spalte, html.auftakt-still:not(.ohne-bewegung) .wand__spalte { animation-play-state: paused; }
  html.bewegung-pause:not(.ohne-bewegung) .z__innen, html.auftakt-aus:not(.ohne-bewegung) .z__innen { animation-play-state: running, paused; }
  html.bewegung-pause.auftakt-fertig:not(.ohne-bewegung) .z__innen, html.auftakt-aus.auftakt-fertig:not(.ohne-bewegung) .z__innen,
  html.bewegung-pause.auftakt-wiederkehr:not(.ohne-bewegung) .z__innen, html.auftakt-aus.auftakt-wiederkehr:not(.ohne-bewegung) .z__innen { animation-play-state: paused; }
}

/* ===== film.css ===== */
/* ===== 01 The approach und 02 Signature services – der Leistungs-Film (IH2 B2, Auftrag 3.4 und 3.6 Zeile 01) =====
   Der Leistungs-Film hat zwei Formen aus EINEM Markup:
   1. Raster (Grundform): ohne JavaScript. Rechner zwei Spalten, Handy eine Spalte, Karten liegend (Foto links, Text
      rechts), alle Karten sichtbar.
   2. Karussell (mit JavaScript, alle Formate – IH2-Korrektur 08.10., ersetzt angeheftete Spur und Wischreihe):
      waagerechte Reihe mit scroll-snap, Pfeile „zurück/weiter“, Wischen, Ziehen mit der Maus; Leiste und Zähler (film.js).
   Fotos in voller Originalfarbe (GR23): kein filter, kein Überzug; Text steht unter/neben dem Foto, nie darauf. */

/* ---------- 01 The approach ---------- */
.ansatz { background: var(--ivory); padding-top: clamp(64px, 9vw, 120px); }
/* Nachzug (Befund 21): bündig mit den drei Punkten darunter und breiter – kein leeres linkes Drittel mehr */
.ansatz__text { position: relative; margin: 0; padding-left: clamp(24px, 3vw, 44px); max-width: calc(44ch + 44px); font: 500 clamp(1.5rem, 2.55vw, 2.3rem)/1.3 var(--serif); letter-spacing: -.005em; color: var(--espresso); }
.ansatz__punkte { list-style: none; margin: clamp(48px, 7vw, 96px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4.4vw, 64px); }
.ansatz__punkt { display: grid; gap: 28px; align-content: start; }
/* Strähne als Akzent links neben dem Text (Balayage-Verlauf, 2 px) */
.ansatz__text::before { content: ""; position: absolute; left: 0; top: .35em; bottom: .35em; width: 2px; background: var(--balayage); }
/* schmales Rechteck ohne Rundung, feine versetzte Goldlinie (1 px --honey, 12 px Versatz) hinter dem Foto */
.ansatz__rahmen { position: relative; isolation: isolate; width: clamp(150px, 15vw, 216px); margin: 12px 0 0 12px; background: var(--cream); }
.ansatz__rahmen::before { content: ""; position: absolute; inset: -12px 12px 12px -12px; z-index: -1; border: 1px solid var(--honey); pointer-events: none; }
.ansatz__detail { margin: 0; aspect-ratio: 1; background: var(--cream); }
.ansatz__detail picture { display: block; height: 100%; }
.ansatz__detail img { width: 100%; height: 100%; object-fit: cover; }
.ansatz__wort { border-top: 1px solid var(--line); padding-top: 20px; }
.ansatz__wort h3 { margin-bottom: 10px; }
.ansatz__wort p { color: var(--ink-soft); font-size: 15.5px; max-width: 34ch; }
@media (max-width: 767.98px) {
  .ansatz__punkte { grid-template-columns: 1fr; gap: 34px; }
  .ansatz__punkt { grid-template-columns: 112px minmax(0, 1fr); gap: 0 20px; align-items: start; }
  .ansatz__rahmen { width: 100px; }
  .ansatz__wort { border-top: 0; padding-top: 6px; }
  .ansatz__wort p { font-size: 15px; }
}

/* ---------- 02 Leistungs-Film: Kopf ---------- */
.film { --film-gap: clamp(18px, 2.4vw, 36px); position: relative; z-index: 1; padding-block: var(--abschnitt); background: var(--ivory); }
.film__kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 20px 56px; align-items: end; }
.film__titel .etikett { margin-bottom: 16px; }
.film__titel h2 { font-size: clamp(2.5rem, 4.6vw, 4.1rem); }
.film__seite { display: grid; gap: 18px; }
.film__unter { margin: 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }
.film__unter .textlink { white-space: nowrap; }
.film__stand { display: none; align-items: center; gap: 18px; }
.film__fortschritt { position: relative; flex: 1; height: 2px; background: var(--line); overflow: hidden; }
.film__balken { position: absolute; inset: 0; background: var(--balayage-quer); transform-origin: 0 50%; transform: scaleX(calc(1 / var(--anzahl, 8))); }
.film__zaehler { display: inline-flex; align-items: baseline; gap: 8px; font: italic 600 1.45rem/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--espresso); white-space: nowrap; }
.film__nr { display: inline-block; overflow: hidden; padding-block: .08em; }
.film__nr > span { display: inline-block; }
.film__von { font-weight: 500; font-size: .82em; color: var(--bronze); }
@media (max-width: 1023.98px) { .film__kopf { grid-template-columns: 1fr; } .film__seite { max-width: 560px; } }

/* ---------- 02 Leistungs-Film: Karten (Grundform Raster) ---------- */
.film__fenster { width: min(100% - 2 * var(--rand), var(--breite)); margin: clamp(44px, 5vw, 64px) auto 0; }
.film__spur { list-style: none; margin: 0; padding: 12px 0 0 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 4.4vw, 56px) clamp(36px, 4vw, 56px); }
.filmkarte { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
/* feine versetzte Goldlinie: liegt hinter Foto und Textfläche, sichtbar nur oben und links (12 px) */
.filmkarte::before { content: ""; position: absolute; inset: -12px 12px 12px -12px; z-index: -1; border: 1px solid var(--honey); pointer-events: none; }
/* Raster: Foto 4:5 oben in der Spalte (kein Zuschnitt, der Gesichter abschneidet); ist der Text höher, steht Creme darunter */
.filmkarte__bild { position: relative; background: var(--cream); }
.filmkarte__bild::after { content: ""; display: block; padding-top: 125%; }
.filmkarte__foto { position: absolute; inset: 0 0 auto; aspect-ratio: 4 / 5; background: var(--cream); }
.filmkarte__foto picture { position: absolute; inset: 0; display: block; }
.filmkarte__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--sanft); }
.filmkarte__text { display: flex; flex-direction: column; gap: 10px; padding: 18px 22px 20px; background: var(--cream); }
.filmkarte__quelle { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 10.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); }
.filmkarte__farbe { flex: none; width: 22px; height: 4px; background: linear-gradient(90deg, var(--v1), var(--v2) 55%, var(--v3)); }
.filmkarte__kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 14px; }
.filmkarte__kopf h3 { font: 600 36px/1.04 var(--serif); letter-spacing: -.01em; color: var(--espresso); text-wrap: balance; }
.filmkarte__preis { margin: 0; font: 500 15px/1.2 var(--sans); letter-spacing: .02em; color: var(--bronze); white-space: nowrap; }
.filmkarte__satz { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.filmkarte__knoepfe { margin-top: auto; padding-top: 6px; gap: 10px; }
.filmkarte__buchen { padding-inline: 22px; }
.filmkarte__wort { display: inline-block; transition: transform .45s var(--sanft); }
.filmkarte__pfeil { position: absolute; right: 12px; top: 50%; margin-top: -.62em; line-height: 1.2; opacity: 0; transform: translateX(-6px); transition: opacity .35s var(--sanft), transform .45s var(--sanft); }
/* Überfahren: Foto 1.04, Glanzstrich, die „Book →“-Pille füllt sich golden und der Pfeil gleitet ein */
@media (hover: hover) and (pointer: fine) {
  .filmkarte:hover .filmkarte__foto img { transform: scale(var(--film-hover, 1.04)); }
  .js .filmkarte:hover .filmkarte__foto.glanz::before { animation: glanz-hover .9s var(--sanft) 1 both; }
  .filmkarte:hover .filmkarte__buchen { color: var(--espresso); }
  .filmkarte:hover .filmkarte__buchen::before { transform: translateX(0); }
  .filmkarte:hover .filmkarte__wort { transform: translateX(-8px); }
  .filmkarte:hover .filmkarte__pfeil { opacity: 1; transform: none; }
}
.filmkarte__buchen:focus-visible .filmkarte__wort { transform: translateX(-8px); }
.filmkarte__buchen:focus-visible .filmkarte__pfeil { opacity: 1; transform: none; }
@media (max-width: 899.98px) { .film__spur { grid-template-columns: 1fr; } }
@media (max-width: 767.98px) {
  .filmkarte { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
  .filmkarte__text { padding: 14px 16px 16px; gap: 8px; }
  .filmkarte__kopf { grid-template-columns: 1fr; }
  .filmkarte__kopf h3 { font-size: 26px; }
  .filmkarte__satz { font-size: 14px; }
}

/* ---------- 2. Karussell: mit JavaScript auf allen Formaten (IH2-Korrektur 08.10.) ----------
   Waagerechte Reihe mit scroll-snap. Pfeile, Ziehen mit der Maus und Pfeiltasten aus film.js, Wischen (Touch, Trackpad)
   ist natives Scrollen. Ersetzt die angeheftete Spur (Rechner) und die reine Wischreihe (Handy). Die erste Karte fluchtet
   mit der Satzkante (.rahmen), rechts laufen die Karten bis an den Fensterrand – die angeschnittene Karte zeigt, dass es
   weitergeht. Reduzierte Bewegung: dieselbe Reihe, film.js springt statt zu gleiten. Ohne JavaScript: Raster (oben).
   --film-links wird erst in der Reihe aufgelöst: 100 % = Breite des Fensters (wie .rahmen, ohne Bildlaufleiste). */
.js .film { --film-w: min(82vw, 440px); --film-links: max(var(--rand), calc((100% - var(--breite)) / 2)); }
.js .film__stand { display: flex; }
.film__pfeile { flex: none; display: flex; gap: 10px; }
.film__pfeil { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(43, 33, 27, .3); background: transparent; color: var(--espresso); display: grid; place-items: center; cursor: pointer; transition: background-color .3s var(--sanft), border-color .3s var(--sanft), color .3s var(--sanft), opacity .3s var(--sanft), transform .2s var(--sanft); }
.film__pfeil svg { width: 20px; height: 20px; }
.film__pfeil[aria-disabled="true"] { opacity: .3; cursor: default; }
.film__pfeil:not([aria-disabled="true"]):active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .film__pfeil:not([aria-disabled="true"]):hover { background: var(--espresso); border-color: var(--espresso); color: var(--ivory); }
}
@media (min-width: 768px) { .film__pfeil { width: 48px; height: 48px; } }

.js .film__fenster { position: relative; width: auto; margin: clamp(28px, 4vw, 52px) 0 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: calc(var(--film-links) + 12px) var(--film-links); overscroll-behavior-x: contain; scrollbar-width: none; }
.js .film__fenster::-webkit-scrollbar { display: none; }
/* während einer Fahrt per Pfeil oder beim Ziehen kein Schnappen – film.js setzt die Reihe danach genau auf eine Karte */
.js .film__fenster--frei { scroll-snap-type: none; }
.js .film__fenster--ziehen { cursor: grabbing; user-select: none; -webkit-user-select: none; }
@media (hover: hover) and (pointer: fine) { .js .film__fenster { cursor: grab; } }
.js .film__spur { display: flex; width: max-content; gap: var(--film-gap); padding: 12px var(--film-links) 4px calc(var(--film-links) + 12px); }
.js .filmkarte { flex: none; width: var(--film-w); display: flex; flex-direction: column; scroll-snap-align: start; }
.js .filmkarte__bild::after { display: none; }
.js .filmkarte__foto { position: relative; inset: auto; aspect-ratio: 4 / 5; overflow: hidden; }
/* Parallaxe (film.js, Rechner mit Maus): das Foto steht ±6 % über den Rahmen und wandert gegen die Fahrt */
.film--parallaxe .filmkarte__foto picture { inset: 0 -6%; }
.js .filmkarte__text { flex: 1; padding: 16px 18px 18px; }
.js .filmkarte__kopf { grid-template-columns: minmax(0, 1fr) auto; min-height: calc(2 * 1.04 * 30px); }
.js .filmkarte__kopf h3 { font-size: 30px; }
.js .filmkarte__satz { font-size: 14.5px; }
/* Rechner: Karten wie zuvor in der Spur (~345 px bei 1440), gut drei ganz sichtbar, die vierte angeschnitten */
@media (min-width: 1024px) {
  .js .film { --film-w: clamp(300px, 24vw, 380px); }
  .js .filmkarte__text { padding: 18px 22px 20px; }
  .js .filmkarte__kopf { min-height: calc(2 * 1.04 * clamp(28px, 2.2vw, 34px)); }
  .js .filmkarte__kopf h3 { font-size: clamp(28px, 2.2vw, 34px); }
  .js .filmkarte__satz { font-size: 15px; }
}

/* ===== szenen.css ===== */
/* ===== Pinsel – gebaut in B2, von allen Abschnitten genutzt =====
   Jedes Element mit [data-pinsel] deckt szenen.js beim Eintreten von unten nach oben auf: clip-path-Polygon mit welliger
   Oberkante wie ein Balayage-Strich (Dauer/Ease aus drehbuch.film.pinsel), danach läuft einmal der Glanzstrich
   (.glanz/.ist-sichtbar aus basis.css). Verdeckt wird nur, was beim Modulstart noch unterhalb (oder in einer waagerechten
   Spur rechts außerhalb) liegt – wer schon gescrollt hat, sieht keinen Sprung. Ohne JavaScript, bei reduzierter Bewegung
   und bei Save-Data steht alles sofort. Das Element braucht eine eigene Fläche dahinter (z. B. --cream), denn verdeckt
   ist es durchsichtig. */
[data-pinsel] picture { display: block; }
.pinsel-wartet { clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); }
/* Glanzstrich erst nach dem Pinsel (seite.js setzt .ist-sichtbar schon beim Erscheinen) */
.js [data-pinsel].glanz.pinsel-wartet::before, .js [data-pinsel].glanz.pinsel-laeuft::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .pinsel-wartet, .pinsel-laeuft { clip-path: none !important; } }
.ohne-bewegung .pinsel-wartet, .ohne-bewegung .pinsel-laeuft { clip-path: none !important; }
/* ===== Ende Pinsel ===== */

/* IH2 szenen.css – übrige Szenen werden in Block B gebaut */

/* ===== abschnitte.css ===== */
/* IH2 abschnitte.css – Startseiten-Abschnitte 03–07 (Auftrag 3.5/3.6): Root to tip, Lookbook-Wand, Meet Inna, Reviews, Visit.
   Grundzustand = ohne JavaScript und bei reduzierter Bewegung: alles sichtbar, nichts bewegt sich, Foto 14 in voller Höhe,
   alle drei Rezensionen nebeneinander. Die Bewegungs-Gestalt (angeheftetes Foto, Abstände, Karussell) gilt ab dem ersten Bild,
   sobald <html> „js“ trägt und nicht „ohne-bewegung“ – sie hängt also nicht am Nachladen von GSAP (kein Sprung beim Start).
   Animiert werden nur transform, opacity und clip-path; will-change setzt abschnitte.js nur während der Bewegung.
   Fotos: Originalfarbe, kein Filter, kein Verlauf, kein Text auf dem Haar (GR23); Rahmen eckig, höchstens eine versetzte Goldlinie. */

/* ---------- gemeinsam ---------- */
section.strang.abschnitt, section.lookwand.abschnitt, section.inna.abschnitt { padding-top: var(--abschnitt); }
.lookwand.abschnitt { background: var(--cream); }
.strang.abschnitt, .inna.abschnitt { background: var(--ivory); }
/* sanfter Übergang, wenn eine Scroll-Bewegung startet, während ihr Abschnitt schon im Bild ist (abschnitte.js, kurz) */
.b3-einlauf { transition: transform var(--b3-einlauf, .8s) var(--sanft) !important; }

/* =====================================================================================================================
   03 · Root to tip – Foto 14 links, fünf Schritte rechts; der Bildausschnitt wandert vom Ansatz zu den Spitzen
   ===================================================================================================================== */
.strang__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(40px, 7vw, 104px); align-items: start; }
.strang__kopf { grid-column: 2; grid-row: 1; }
.strang__huelle { grid-column: 1; grid-row: 1 / span 2; display: grid; grid-template-columns: minmax(0, 1fr) 2px 52px; column-gap: 18px; }
.strang__bild { margin: 0; position: relative; overflow: hidden; background: var(--cream); }
.strang__bild picture { display: block; }
.strang__bild img { width: 100%; height: auto; }
.strang__faden { position: relative; background: var(--line); }
.strang__fuellung { position: absolute; inset: 0; background: var(--balayage); transform-origin: 50% 0; }
.strang__seite { display: flex; flex-direction: column; align-items: center; min-height: 0; }
.strang__nummer { display: none; font: italic 500 2.5rem/1 var(--serif); color: var(--bronze); font-variant-numeric: lining-nums; margin-bottom: 18px; }
.strang__nummer > span { grid-area: 1 / 1; }
.strang__marke { writing-mode: vertical-rl; font: 500 11px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--bronze); }
.strang__marke--tip { margin-top: auto; }

.strang .ablauf { grid-column: 2; grid-row: 2; display: block; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
.strang .ablauf::before { content: none; }
.strang .schritt { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 8px; padding: 22px 0 24px; border-top: 1px solid var(--line); }
.strang .schritt:last-child { border-bottom: 1px solid var(--line); }
.strang .schritt::before { content: none; }
.strang .schritt__nr { grid-row: 1 / span 2; font-size: 1.9rem; margin: 2px 0 0; }
.strang .schritt h3 { margin-bottom: 6px; }
.strang .schritt p { max-width: 44ch; }

@media (max-width: 767.98px) {
  .strang__raster { display: block; }
  .strang__huelle { max-width: 460px; margin-top: 32px; grid-template-columns: minmax(0, 1fr) 2px 40px; column-gap: 14px; }
  .strang__nummer { font-size: 1.9rem; margin-bottom: 12px; }
  .strang .schritt { grid-template-columns: 48px minmax(0, 1fr); }
  .strang .schritt__nr { font-size: 1.6rem; }
}

/* Bewegungs-Gestalt: Foto angeheftet (sticky = normales Scrollen, kein Abfangen), Rahmen schneidet, Bild höher als der Rahmen */
@media (prefers-reduced-motion: no-preference) {
  /* IH2-Korrektur Befund 29: abschnitte.js setzt --strang-oben so, dass das Foto unter dem Kopf mittig steht */
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .strang__huelle { position: sticky; top: var(--strang-oben, calc(var(--kopf-h) + 5vh)); }
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .strang__bild { aspect-ratio: 3 / 4; max-height: calc(100vh - var(--kopf-h) - 10vh); }
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .strang__bild picture { position: absolute; top: 0; left: -16%; width: 132%; }
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .strang__fuellung { transform: scaleY(0); }
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .strang__nummer { display: grid; }
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .strang__nummer > span { opacity: 0; transform: translateY(45%); transition: opacity var(--strang-blende, .35s) var(--sanft), transform var(--strang-blende, .35s) var(--sanft); }
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .strang__nummer > span.ist-aktiv { opacity: 1; transform: none; }
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .strang__nummer > span.ist-vorbei { transform: translateY(-45%); }
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .strang .ablauf { padding-bottom: 12vh; }
  /* inaktive Schritte nicht dimmen (Kontrast ≥ 4,5:1, Lighthouse color-contrast) – der aktive trägt einen Balayage-Strich */
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .strang .schritt { position: relative; min-height: 42vh; align-content: center; border-top-color: transparent; }
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .strang .schritt::after { content: ""; position: absolute; left: -16px; top: 30%; bottom: 30%; width: 2px; background: var(--balayage); transform: scaleY(0); transform-origin: 50% 0; transition: transform .5s var(--sanft); }
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .strang .schritt.ist-aktiv::after { transform: scaleY(1); }
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .strang .schritt:not(.ist-aktiv) h3 { color: var(--ink-soft); }
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .strang .schritt:last-child { border-bottom-color: transparent; }
  @media (max-width: 767.98px) {
    /* Handy: Foto oben angeheftet (45 vh), die Schritte laufen darunter durch */
    html.js:not(.ohne-bewegung):not(.bewegung-fehler) .strang__huelle { top: var(--kopf-h); z-index: 2; max-width: none; margin-top: 24px; padding: 10px 0 16px; background: var(--ivory); }
    /* weicher Rand unter dem angehefteten Foto: die Schritte tauchen darunter ab (liegt über Text, nie über dem Haar) */
    html.js:not(.ohne-bewegung):not(.bewegung-fehler) .strang__huelle::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 36px; background: linear-gradient(var(--ivory), rgba(251, 247, 241, 0)); pointer-events: none; }
    html.js:not(.ohne-bewegung):not(.bewegung-fehler) .strang__bild { aspect-ratio: auto; height: 45vh; max-height: none; }
    html.js:not(.ohne-bewegung):not(.bewegung-fehler) .strang__bild picture { left: -25%; width: 150%; }
    html.js:not(.ohne-bewegung):not(.bewegung-fehler) .strang .ablauf { margin-top: 8px; padding-bottom: 6vh; }
    /* IH2-Korrektur Befund 31: Schritte oben bündig und kürzer – der aktive Schritt rastet knapp unter dem Foto ein */
    html.js:not(.ohne-bewegung):not(.bewegung-fehler) .strang .schritt { min-height: 0; align-content: start; padding-block: 18px 22px; }
  }
}

/* =====================================================================================================================
   04 · Recent work – Lookbook-Wand: drei Spalten, am Rechner mit verschiedener Scroll-Geschwindigkeit; Handy zwei Spalten
   ===================================================================================================================== */
.lookwand__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 14px 48px; }
.lookwand__kopf > .ruhig { max-width: 32ch; margin: 0; }
.lookwand__spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(14px, 2.2vw, 28px); align-items: start; margin-top: clamp(40px, 6vw, 72px); }
.lookwand__spalte { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 2.2vw, 28px); }
.lookwand__spalte--2 { margin-top: clamp(48px, 9vw, 128px); }
.lookwand .lookbook__link { border-radius: 0; aspect-ratio: 2 / 3; background: var(--champagne); }
.lookwand__spalte--3 .lookbook__link { aspect-ratio: 4 / 5; }
.lookwand .lookbook__link picture { display: block; height: 100%; }
.lookwand .lookbook__link img { width: 100%; height: 100%; object-fit: cover; }
/* Befund 8: Nr. 13 ohne das Wandposter oben rechts – Ausschnitt wie hinweis_ih2 (rechte Kante bei x 0.82 = 1 / 1.22) */
.lookwand .lookbook__link--unten img { object-position: 0% 50%; scale: 1.22; transform-origin: 0% 35%; }
.lookwand .wand__video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.lookwand .abschnitt__fuss { margin-top: clamp(36px, 5vw, 56px); }
@media (max-width: 767.98px) {
  .lookwand__spalten { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lookwand__spalte { display: contents; }
  .lookwand__spalte--2 { margin-top: 0; }
  .lookwand .lookbook__link, .lookwand__spalte--3 .lookbook__link { aspect-ratio: 4 / 5; }
}
/* Rechner mit Bewegung: Platz für den Versatz der Spalten (± weg × Fensterhöhe, drehbuch.lookwand), damit nichts die
   Überschrift berührt */
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) and (pointer: fine) { /* ab 1024 px wie der Film (Befund 4) */
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .lookwand__spalten { margin-top: calc(clamp(40px, 6vw, 72px) + 72px); }
}

/* =====================================================================================================================
   05 · Meet Inna – Porträt 11 (höchstens 504 px Quelle) im schmalen Rechteck mit versetzter Goldlinie, Unterschrift
   ===================================================================================================================== */
.inna__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 32px); align-items: center; }
.inna__rahmen { grid-column: 2 / span 4; position: relative; isolation: isolate; max-width: 420px; }
.inna__rahmen::before { content: ""; position: absolute; inset: 12px -12px -12px 12px; border: 1px solid var(--honey); z-index: -1; pointer-events: none; }
.inna__bild { margin: 0; background: var(--cream); }
.inna__bild img { width: 100%; height: auto; }
.inna__text { grid-column: 7 / span 5; }
.inna__signatur { margin: 18px 0 26px; font: italic 500 clamp(3rem, 6vw, 5.2rem)/1.02 var(--serif); color: var(--bronze); letter-spacing: -.005em; }
.inna__name { display: inline-block; padding-right: .12em; }
.inna__schwung { display: block; width: min(300px, 72%); height: 1px; margin-top: 12px; background: linear-gradient(90deg, var(--honey), var(--champagne) 70%, rgba(231, 211, 180, 0)); transform-origin: 0 50%; }
.inna__absatz { max-width: 46ch; color: var(--ink-soft); }
.inna__text .knopf { margin-top: 10px; }
@media (max-width: 899.98px) {
  .inna__rahmen { grid-column: 1 / span 5; }
  .inna__text { grid-column: 7 / span 6; }
}
@media (max-width: 767.98px) {
  .inna__raster { display: block; }
  .inna__rahmen { width: min(300px, 74vw); margin-bottom: 44px; }
  .inna__signatur { margin: 12px 0 20px; }
}

/* =====================================================================================================================
   06 · Reviews – dunkel; Karussell (abschnitte.js), Laufband mit vier Lookbook-Fotos als unterer Rand
   ===================================================================================================================== */
.stimmen-abschnitt.abschnitt { padding-bottom: 0; overflow: hidden; }
.stimmen__zeichen { width: clamp(72px, 8vw, 112px); height: auto; color: var(--honey); margin-bottom: 22px; overflow: visible; }
.stimmen__wert { margin: 0; }
.stimme { border-radius: 0; }
.stimmen__fuss { margin-top: 36px; }
.stimmen__steuerung { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px; max-width: 980px; margin-top: clamp(28px, 4vw, 44px); }
.stimmen__steuerung[hidden] { display: none; }
.stimmen__punkte { display: flex; gap: 8px; }
.stimmen__punkt { position: relative; width: 48px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; }
.stimmen__punkt::before, .stimmen__zeit { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
.stimmen__punkt::before { background: rgba(251, 247, 241, .22); }
.stimmen__zeit { background: var(--honey); transform: scaleX(0); transform-origin: 0 50%; }
.stimmen__punkt.ist-aktiv .stimmen__zeit { animation: stimmen-zeit var(--wechsel, 7s) linear forwards; }
.ist-pausiert .stimmen__punkt.ist-aktiv .stimmen__zeit { animation-play-state: paused; }
.ist-angehalten .stimmen__punkt.ist-aktiv .stimmen__zeit { animation: none; transform: scaleX(1); }
@keyframes stimmen-zeit { to { transform: scaleX(1); } }
.stimmen__knoepfe { display: flex; gap: 10px; }
.stimmen__knopf { min-width: 44px; height: 44px; padding: 0; border-radius: 999px; border: 1px solid rgba(251, 247, 241, .35); background: transparent; color: var(--ivory); display: inline-grid; place-items: center; cursor: pointer; font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; transition: background-color .3s var(--sanft), border-color .3s var(--sanft); }
.stimmen__knopf:hover { background: rgba(251, 247, 241, .1); border-color: rgba(251, 247, 241, .6); }
.stimmen__knopf svg { width: 18px; height: 18px; }
.stimmen__pause { min-width: 92px; padding: 0 18px; }

/* Karussell-Gestalt: alle Rezensionen in einer Rasterzelle (Höhe = längste, kein Springen), nur die aktive sichtbar */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .stimmen__karussell--sofort .stimmen,
  html.js:not(.ohne-bewegung) .stimmen__karussell.ist-karussell .stimmen { grid-template-columns: minmax(0, 1fr); max-width: 980px; touch-action: pan-y; }
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .stimmen__karussell--sofort .stimmen > li,
  html.js:not(.ohne-bewegung) .stimmen__karussell.ist-karussell .stimmen > li { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity calc(var(--blende, .6s) * .5) var(--sanft), transform calc(var(--blende, .6s) * .5) var(--sanft), visibility 0s linear calc(var(--blende, .6s) * .5); }
  /* nacheinander statt übereinander: die alte geht in der halben Blende, die neue kommt danach */
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .stimmen__karussell--sofort .stimmen > li.ist-aktiv,
  html.js:not(.ohne-bewegung) .stimmen__karussell.ist-karussell .stimmen > li.ist-aktiv { opacity: 1; visibility: visible; transform: none; transition: opacity var(--blende, .6s) var(--sanft) calc(var(--blende, .6s) * .5), transform var(--blende, .6s) var(--sanft) calc(var(--blende, .6s) * .5), visibility 0s linear calc(var(--blende, .6s) * .5); }
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .stimmen__karussell--sofort .stimmen > li:not(.ist-aktiv),
  html.js:not(.ohne-bewegung) .stimmen__karussell.ist-karussell .stimmen > li:not(.ist-aktiv) { pointer-events: none; }
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .stimmen__karussell--sofort .stimme,
  html.js:not(.ohne-bewegung) .stimmen__karussell.ist-karussell .stimme { border: 0; padding: 0; gap: 24px; }
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .stimmen__karussell--sofort .stimme blockquote,
  html.js:not(.ohne-bewegung) .stimmen__karussell.ist-karussell .stimme blockquote { flex: none; font-size: clamp(1.55rem, 3vw, 2.5rem); line-height: 1.25; }
  /* Platz der Steuerung schon vor dem Start freihalten */
  html.js:not(.ohne-bewegung):not(.bewegung-fehler) .stimmen__karussell--sofort .stimmen__steuerung[hidden] { display: flex; visibility: hidden; }
}

.laufband { margin-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(40px, 6vw, 72px); overflow: hidden; }
.laufband__spur { display: flex; width: max-content; list-style: none; margin: 0; padding: 0; }
/* Abstand als rechter Rand (nicht gap), damit −50 % genau eine Hälfte ist – sonst springt die Naht */
.laufband__spur > li { flex: none; width: 250px; aspect-ratio: 3 / 2; margin-right: 12px; overflow: hidden; opacity: .9; background: var(--root); }
.laufband__spur picture { display: block; height: 100%; }
.laufband__spur img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767.98px) { .laufband__spur > li { width: 150px; margin-right: 8px; } }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.ohne-bewegung) .laufband.ist-an .laufband__spur { animation: laufband var(--laufband-dauer, 70s) linear infinite; }
  html.js:not(.ohne-bewegung) .laufband.ist-an.ist-pausiert .laufband__spur { animation-play-state: paused; }
}
@keyframes laufband { to { transform: translateX(-50%); } }

/* =====================================================================================================================
   07 · Visit – Adresse, Zeiten mit Live-Status, Knöpfe; Foto-Duo versetzt mit Parallaxe; Formular „contact“ (nur Gestaltung)
   ===================================================================================================================== */
.besuch__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 32px); row-gap: clamp(56px, 8vw, 112px); align-items: center; }
.besuch__info { grid-column: 1 / span 5; }
.besuch__info .ort { margin-top: 22px; }
.besuch__duo { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.besuch__foto { margin: 0; position: relative; isolation: isolate; }
.besuch__foto img { width: 100%; height: auto; }
.besuch__foto--1 { grid-column: 1 / span 8; grid-row: 1; }
.besuch__foto--1::after { content: ""; position: absolute; inset: -12px 12px 12px -12px; border: 1px solid var(--honey); z-index: -1; pointer-events: none; }
.besuch__foto--2 { grid-column: 6 / span 7; grid-row: 1; margin-top: 58%; z-index: 1; outline: 10px solid var(--cream); }
.besuch__formular { grid-column: 2 / span 10; }
.besuch .formular { position: relative; border-radius: 0; }
.besuch .formular::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--balayage-quer); }
@media (max-width: 899.98px) {
  .besuch__info, .besuch__duo, .besuch__formular { grid-column: 1 / -1; }
  .besuch__duo { max-width: 560px; }
}
@media (max-width: 767.98px) {
  .besuch__raster { row-gap: 56px; }
  .besuch__foto--1 { grid-column: 2 / span 8; }
  .besuch__foto--2 { grid-column: 6 / span 7; margin-top: 52%; outline-width: 8px; }
}

/* ===== unterseiten.css ===== */
/* IH2 unterseiten.css – Unterseiten im Stil der Startseite (Auftrag 3.7, Block B4): /services, /gallery, /about, /book,
   /privacy, /terms, 404. Grundzustand = ohne JavaScript und bei reduzierter Bewegung: alles sichtbar, nichts bewegt sich.
   Der Kopf jeder Unterseite (.ukopf) läuft per CSS ab dem ersten Bild (Titel Wort für Wort aus der Maske, Fotostreifen
   nacheinander per Pinsel-Kante) – ohne Warten auf GSAP, ohne Sprung; Zeiten als Variablen aus drehbuch.kopf.
   Beim Scrollen: Pinsel (szenen.js, [data-pinsel]), Einblenden (seite.js) und unterseiten.js (Raster, Abschluss, Parallaxe).
   Animiert werden nur transform, opacity, clip-path und background-position. Fotos in Originalfarbe, kein Filter, kein
   Verlauf, kein Text auf dem Haar (GR23); Rahmen eckig, höchstens eine feine versetzte Goldlinie (1 px --honey, 12 px). */

/* =====================================================================================================================
   Kopf der Unterseiten
   ===================================================================================================================== */
.ukopf { position: relative; padding-block: clamp(36px, 6vw, 88px) clamp(64px, 9vw, 128px); background: var(--ivory); }
.ukopf__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 32px); row-gap: clamp(40px, 6vw, 64px); align-items: center; }
.ukopf__text { grid-column: 1 / span 7; min-width: 0; }
.ukopf__bild { grid-column: 8 / span 5; min-width: 0; }
.ukopf__titel { font-size: clamp(3rem, 7.2vw, 6.4rem); line-height: 1.02; margin-bottom: clamp(18px, 2.4vw, 28px); }
.ukopf__einleitung { max-width: 44ch; }
.ukopf__text > .knopfreihe, .ukopf__text > .sprungliste, .ukopf__text > .ukopf__zahl { margin-top: clamp(24px, 3vw, 36px); }
@media (max-width: 899.98px) { .ukopf__text, .ukopf__bild { grid-column: 1 / -1; } }

/* Wort für Wort: Maske je Wort (unten bündig, oben und seitlich großzügig für kursive Überhänge; Unterlängen im Polster) */
.wort { display: inline-block; padding: 0 .08em .2em; margin: 0 -.08em -.2em; }
.wort__innen { display: inline-block; }

/* Fotostreifen: drei Hochformate (3 : 4), versetzt; das mittlere trägt die feine versetzte Goldlinie */
.kopf-streifen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); align-items: start; max-width: 640px; margin-left: auto; padding-bottom: 56px; }
.kopf-streifen__foto { margin: 0; position: relative; isolation: isolate; }
.kopf-streifen__foto picture { display: block; overflow: hidden; background: var(--cream); }
.kopf-streifen__foto img { width: 100%; height: auto; }
.kopf-streifen__foto:nth-child(1) { margin-top: 40px; }
.kopf-streifen__foto:nth-child(3) { margin-top: 84px; }
.kopf-streifen__foto:nth-child(2)::before { content: ""; position: absolute; inset: 12px -12px -12px 12px; border: 1px solid var(--honey); z-index: -1; pointer-events: none; }
.kopf-streifen--schmal { max-width: 420px; padding-bottom: 36px; }
.kopf-streifen--schmal .kopf-streifen__foto:nth-child(1) { margin-top: 24px; }
.kopf-streifen--schmal .kopf-streifen__foto:nth-child(3) { margin-top: 48px; }
@media (max-width: 899.98px) { .kopf-streifen { margin-left: 0; max-width: 560px; padding-bottom: 40px; } }

/* Sprungliste (/services): Leistungsgruppen als feine Pillen */
.sprungliste ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 620px; }
.sprungliste a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; letter-spacing: .02em; text-decoration: none; background: linear-gradient(90deg, var(--honey), var(--champagne)) left bottom / 0 1px no-repeat; transition: border-color .3s var(--sanft), background-size .45s var(--sanft); }
.sprungliste a:hover, .sprungliste a:focus-visible { border-color: var(--honey); background-size: 100% 1px; }
.ukopf__zahl { margin: 0; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); }
.ukopf__zahl span { font: italic 500 2rem/1 var(--serif); letter-spacing: 0; text-transform: none; margin-right: 4px; vertical-align: -2px; font-variant-numeric: lining-nums; }

/* ---------- Bewegung des Kopfes (ab dem ersten Bild, nur mit JavaScript und ohne reduzierte Bewegung) ---------- */
@keyframes u-wort { from { transform: translate3d(0, 112%, 0); } to { transform: none; } }
@keyframes u-ein { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
/* Pinsel-Kante: wellige, links vorauseilende Oberkante wandert von unten nach oben (gleiche Punktzahl in jedem Schritt;
   Sinus wie szenen.js, erzeugt). Die Zeitpunkte folgen ease-out, daher läuft die Animation mit linearer Zeitfunktion. */
@keyframes u-pinsel {
  0% { clip-path: polygon(0% 100%, 100% 100%, 100% 114%, 93.75% 114%, 87.5% 114%, 81.25% 114%, 75% 114%, 68.75% 114%, 62.5% 114%, 56.25% 114%, 50% 114%, 43.75% 114%, 37.5% 114%, 31.25% 114%, 25% 114%, 18.75% 114%, 12.5% 114%, 6.25% 114%, 0% 114%); }
  9.1% { clip-path: polygon(0% 100%, 100% 100%, 100% 80.6%, 93.75% 81%, 87.5% 82.8%, 81.25% 85%, 75% 86.8%, 68.75% 87.3%, 62.5% 86.2%, 56.25% 83.7%, 50% 80.7%, 43.75% 78.2%, 37.5% 77.1%, 31.25% 77.5%, 25% 79.2%, 18.75% 81.5%, 12.5% 83.3%, 6.25% 83.8%, 0% 82.6%); }
  20.6% { clip-path: polygon(0% 100%, 100% 100%, 100% 48.4%, 93.75% 47.7%, 87.5% 49.3%, 81.25% 52.2%, 75% 55.3%, 68.75% 57.1%, 62.5% 56.8%, 56.25% 54.2%, 50% 50.3%, 43.75% 46.2%, 37.5% 43.4%, 31.25% 42.7%, 25% 44.3%, 18.75% 47.2%, 12.5% 50.3%, 6.25% 52.1%, 0% 51.8%); }
  37% { clip-path: polygon(0% 100%, 100% 100%, 100% 17.6%, 93.75% 16.2%, 87.5% 16.5%, 81.25% 18.1%, 75% 20.4%, 68.75% 22.3%, 62.5% 22.9%, 56.25% 22%, 50% 19.6%, 43.75% 16.7%, 37.5% 14.1%, 31.25% 12.7%, 25% 13%, 18.75% 14.6%, 12.5% 16.9%, 6.25% 18.7%, 0% 19.4%); }
  53.6% { clip-path: polygon(0% 100%, 100% 100%, 100% -1.1%, 93.75% -1.9%, 87.5% -2%, 81.25% -1.5%, 75% -0.5%, 68.75% 0.4%, 62.5% 0.9%, 56.25% 0.7%, 50% -0.1%, 43.75% -1.4%, 37.5% -2.6%, 31.25% -3.4%, 25% -3.6%, 18.75% -3%, 12.5% -2.1%, 6.25% -1.2%, 0% -0.7%); }
  100% { clip-path: polygon(0% 100%, 100% 100%, 100% -14%, 93.75% -14%, 87.5% -14%, 81.25% -14%, 75% -14%, 68.75% -14%, 62.5% -14%, 56.25% -14%, 50% -14%, 43.75% -14%, 37.5% -14%, 31.25% -14%, 25% -14%, 18.75% -14%, 12.5% -14%, 6.25% -14%, 0% -14%); }
}
@keyframes u-setzen { from { transform: scale(1.08); } to { transform: none; } }
@keyframes u-schrift { from { clip-path: inset(-30% 100% -30% -30%); } to { clip-path: inset(-30% -30% -30% -30%); } }
@keyframes u-linie { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.ohne-bewegung) .wort { clip-path: inset(-.6em -.5em 0 -.5em); }
  html.js:not(.ohne-bewegung) .wort__innen { animation: u-wort var(--k-wort-dauer, .9s) cubic-bezier(.16, 1, .3, 1) calc(var(--k-start, .1s) + var(--i, 0) * var(--k-wort-versatz, .08s)) both; }
  html.js:not(.ohne-bewegung) .ukopf__text > :not(.ukopf__titel):not(.ukopf__signatur) { animation: u-ein .8s var(--sanft) calc(var(--k-start, .1s) + .45s) both; }
  html.js:not(.ohne-bewegung) .kopf-streifen__foto picture,
  html.js:not(.ohne-bewegung) .ukopf__portraet-foto picture,
  html.js:not(.ohne-bewegung) .buchwand__foto picture { animation: u-pinsel calc(var(--k-aufdecken, .9s) * 1.4) linear calc(var(--k-streifen-start, .3s) + var(--i, 0) * var(--k-streifen-versatz, .15s)) both; }
  html.js:not(.ohne-bewegung) .kopf-streifen__foto img,
  html.js:not(.ohne-bewegung) .ukopf__portraet-foto img,
  html.js:not(.ohne-bewegung) .buchwand__foto img { animation: u-setzen 1.6s cubic-bezier(.22, .61, .36, 1) calc(var(--k-streifen-start, .3s) + var(--i, 0) * var(--k-streifen-versatz, .15s)) both; }
  html.js:not(.ohne-bewegung) .ukopf__signatur .inna__name { animation: u-schrift 1.2s cubic-bezier(.45, 0, .55, 1) calc(var(--k-start, .1s) + .55s) both; }
  html.js:not(.ohne-bewegung) .ukopf__signatur .inna__schwung { animation: u-linie .8s cubic-bezier(.22, .61, .36, 1) calc(var(--k-start, .1s) + 1.5s) both; }
}

/* =====================================================================================================================
   /services – je Leistungsgruppe ein Block: Foto angeheftet, daneben die komplette Preisliste; Seiten wechseln
   ===================================================================================================================== */
.gruppe { position: relative; padding-block: clamp(48px, 6vw, 88px); background: var(--ivory); }
.ukopf--services { padding-bottom: clamp(24px, 4vw, 56px); }
.gruppe + .gruppe::before { content: ""; position: absolute; top: 0; left: 50%; width: min(100% - 2 * var(--rand), var(--breite)); height: 1px; transform: translateX(-50%); background: var(--line); }
.gruppe__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 32px); align-items: start; }
.gruppe__bildseite { grid-column: 1 / span 5; grid-row: 1; min-width: 0; align-self: stretch; }
.gruppe__liste { grid-column: 7 / span 6; grid-row: 1; min-width: 0; align-self: center; padding-block: 24px; }
.gruppe--gespiegelt .gruppe__bildseite { grid-column: 8 / span 5; }
.gruppe--gespiegelt .gruppe__liste { grid-column: 1 / span 6; }
.gruppe__haft { position: sticky; top: calc(var(--kopf-h) + 32px); }
/* 4 : 5 – so schmal, dass das Foto samt Unterschrift auch auf niedrigen Fenstern ganz im Bild steht */
.gruppe__rahmen { position: relative; isolation: isolate; width: min(100%, calc((100svh - var(--kopf-h) - 120px) * .8)); }
.gruppe__rahmen::before { content: ""; position: absolute; inset: -12px 12px 12px -12px; z-index: -1; border: 1px solid var(--honey); pointer-events: none; }
.gruppe--gespiegelt .gruppe__rahmen { margin-left: auto; }
.gruppe--gespiegelt .gruppe__rahmen::before { inset: -12px -12px 12px 12px; }
.gruppe__foto { margin: 0; overflow: hidden; background: var(--cream); }
.gruppe__foto img { width: 100%; height: auto; }
.gruppe__quelle { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; font: 500 11px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--bronze); }
.gruppe--gespiegelt .gruppe__quelle { justify-content: flex-end; }
.gruppe__farbe { width: 22px; height: 3px; background: linear-gradient(90deg, var(--v1), var(--v2) 55%, var(--v3)); }
.gruppe__nr { font-variant-numeric: lining-nums; }
.gruppe__von { color: var(--ink-soft); margin-left: -4px; } /* IH2 C3: statt opacity .6 – Kontrast ≥ 4,5:1 bei 12 px */
.gruppe__titel { font-size: clamp(2.5rem, 4.8vw, 4.2rem); line-height: 1; margin-bottom: 18px; }
.gruppe__satz { font-size: clamp(1.05rem, 1.3vw, 1.15rem); color: var(--ink-soft); max-width: 44ch; }
.gruppe__ab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 22px 0 0; }
.gruppe__ab-preis { font: italic 500 clamp(1.9rem, 2.6vw, 2.4rem)/1 var(--serif); color: var(--bronze); font-variant-numeric: lining-nums; }
.gruppe__anzahl { font: 500 12px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.preise { list-style: none; margin: clamp(26px, 3vw, 36px) 0 0; padding: 0; border-bottom: 1px solid var(--line); }
.preise__zeile { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 22px; align-items: center; padding: 16px 0 16px 18px; border-top: 1px solid var(--line); }
.preise__zeile::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: var(--balayage); transform: scaleY(0); transform-origin: 50% 0; opacity: 0; transition: transform .5s var(--sanft), opacity .5s var(--sanft); }
.preise__zeile:hover::before, .preise__zeile:focus-within::before { transform: scaleY(1); opacity: 1; }
.preise .zeile__name { font-size: 16px; line-height: 1.45; }
.preise .zeile__preis { font: 600 1.45rem/1 var(--serif); font-variant-numeric: lining-nums; color: var(--espresso); white-space: nowrap; }
.preise__knopf { gap: 8px; }
.preise__pfeil { display: inline-block; transition: transform .4s var(--sanft); }
.preise__knopf:hover .preise__pfeil, .preise__knopf:focus-visible .preise__pfeil { transform: translateX(3px); }
@media (max-width: 899.98px) {
  .gruppe__bildseite, .gruppe--gespiegelt .gruppe__bildseite, .gruppe__liste, .gruppe--gespiegelt .gruppe__liste { grid-column: 1 / -1; grid-row: auto; }
  .gruppe__haft { position: static; }
  .gruppe__rahmen, .gruppe--gespiegelt .gruppe__rahmen { width: min(100% - 12px, 460px); margin: 0 0 0 12px; }
  .gruppe--gespiegelt .gruppe__rahmen::before { inset: -12px 12px 12px -12px; }
  .gruppe--gespiegelt .gruppe__quelle { justify-content: flex-start; }
  .gruppe__liste { padding-top: 0; margin-top: clamp(36px, 7vw, 56px); }
}
@media (max-width: 559.98px) {
  .preise__zeile { grid-template-columns: minmax(0, 1fr) auto; padding-left: 14px; }
  .preise .zeile__name { grid-column: 1 / -1; }
}

/* =====================================================================================================================
   Abschluss: Text auf dunkler Fläche, daneben ein Vollbild-Foto (Text nie auf dem Haar)
   ===================================================================================================================== */
.abschluss { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: clamp(520px, 78vh, 820px); background: linear-gradient(160deg, var(--espresso), var(--root)); overflow: hidden; }
.abschluss__text { display: flex; align-items: center; justify-content: flex-end; padding: clamp(56px, 7vw, 104px) clamp(28px, 4.4vw, 72px) clamp(56px, 7vw, 104px) var(--rand); }
.abschluss__innen { width: min(100%, 470px); }
.abschluss h2 { margin-bottom: 20px; }
.abschluss h2 em { color: var(--champagne); }
.abschluss__satz { color: rgba(251, 247, 241, .8); max-width: 40ch; margin-bottom: 30px; }
.abschluss__hinweis { margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(251, 247, 241, .16); font-size: 14px; color: rgba(251, 247, 241, .7); max-width: 46ch; }
.abschluss__foto { margin: 0; position: relative; overflow: hidden; background: var(--root); }
/* helle Fassung (z. B. /about nach den dunklen Reviews) */
.abschluss--hell { background: var(--ivory); }
.abschluss--hell .abschluss__satz { color: var(--ink-soft); }
.abschluss--hell h2 em { color: inherit; }
.abschluss--hell .abschluss__foto { background: var(--cream); }
.gruende__kopf .einleitung { margin-top: 16px; }
.abschluss__foto picture { display: block; height: 100%; }
.abschluss__foto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767.98px) {
  .abschluss { grid-template-columns: 1fr; min-height: 0; }
  .abschluss__foto { grid-row: 1; aspect-ratio: 4 / 5; }
  .abschluss__text { justify-content: flex-start; padding: 48px var(--rand) 56px; }
}

/* =====================================================================================================================
   /gallery – Lookbook-Raster: eckige Rechtecke, gestaffeltes Aufdecken (unterseiten.js)
   ===================================================================================================================== */
.lookbuch.abschnitt { padding-top: 0; }
.lookbuch .lookbook { margin-top: 0; }
.lookbuch .lookbook__link { border-radius: 0; }

/* =====================================================================================================================
   /about – Porträt-Kopf mit Unterschrift, vier Gründe mit Detail-Ausschnitt, Studio mit Foto-Duo
   ===================================================================================================================== */
.ukopf--about .ukopf__bild { grid-column: 1 / span 5; grid-row: 1; }
.ukopf--about .ukopf__text { grid-column: 7 / span 6; }
.ukopf__portraet { position: relative; isolation: isolate; width: min(100% - 12px, 380px); margin-inline: auto; }
.ukopf__portraet::before { content: ""; position: absolute; inset: 12px -12px -12px 12px; border: 1px solid var(--honey); z-index: -1; pointer-events: none; }
.ukopf__portraet-foto { margin: 0; }
.ukopf__portraet-foto picture { display: block; overflow: hidden; background: var(--cream); }
.ukopf__portraet-foto img { width: 100%; height: auto; }
.ukopf__signatur { margin: 0 0 26px; font-size: clamp(2.6rem, 5vw, 4.4rem); }
.ukopf__signatur .inna__schwung { margin-top: 8px; }
.ukopf--about .ukopf__einleitung { color: var(--espresso); font-size: clamp(1.1rem, 1.5vw, 1.3rem); max-width: 40ch; }
.ukopf__absaetze { color: var(--ink-soft); max-width: 52ch; }
.ukopf__absaetze p { margin-bottom: .9em; }
@media (max-width: 899.98px) {
  .ukopf--about .ukopf__bild, .ukopf--about .ukopf__text { grid-column: 1 / -1; grid-row: auto; }
  .ukopf__portraet { width: min(252px, 66vw); margin: 0; }
}

.gruende__kopf h2 { max-width: 16ch; }
.gruende--bilder { gap: clamp(28px, 3vw, 40px) clamp(20px, 2.4vw, 32px); margin-top: clamp(40px, 6vw, 72px); }
.gruende--bilder .grund { border-top: 0; padding-top: 0; }
.grund__rahmen { position: relative; isolation: isolate; margin: 0 12px 26px 0; }
.grund__rahmen::before { content: ""; position: absolute; inset: 12px -12px -12px 12px; border: 1px solid var(--honey); z-index: -1; pointer-events: none; }
.grund__detail { margin: 0; overflow: hidden; background: var(--ivory); }
.grund__detail img { width: 100%; height: auto; }
.grund__nr { display: block; font: italic 500 1.9rem/1 var(--serif); color: var(--bronze); font-variant-numeric: lining-nums; margin: 0 0 8px; } /* Nachzug: bronze statt honey – Honig auf Elfenbein 2,16 : 1 (Lighthouse /about) */
@media (max-width: 559.98px) { .gruende--bilder { grid-template-columns: 1fr 1fr; gap: 32px 18px; } .grund__rahmen { margin-bottom: 18px; } .grund p { font-size: 14.5px; } .grund h3 { font-size: 1.3rem; } }

.studio.abschnitt { padding-top: var(--abschnitt); }
.studio__absatz { color: var(--ink-soft); max-width: 44ch; margin-top: 22px; }
.studio .besuch__foto--2 { outline-color: var(--ivory); }

/* =====================================================================================================================
   /book – dunkler Kopf mit Fotowand-Ausschnitt, Wege mit Foto, Ort mit Duo, Ablauf neben der Strähne
   ===================================================================================================================== */
.ukopf--book { background: linear-gradient(160deg, var(--espresso) 0%, var(--root) 100%); overflow: clip; }
.ukopf--book .ukopf__text { grid-column: 1 / span 6; }
.ukopf--book .ukopf__bild { grid-column: 7 / span 6; }
.dunkel h1 { color: var(--ivory); }
.ukopf--book .ukopf__titel em, .fehlerseite__titel em { color: var(--champagne); }
.ukopf--book .ukopf__einleitung { color: rgba(251, 247, 241, .8); }
.ukopf--book .bewertung__klein { color: rgba(251, 247, 241, .7); }
.ukopf__bewertung { margin-top: 26px; }
.knopf--gross { min-height: 60px; padding: 17px 34px; font-size: 17px; }
.knopf__pfeil { display: inline-block; transition: transform .4s var(--sanft); }
.knopf:hover .knopf__pfeil, .knopf:focus-visible .knopf__pfeil { transform: translate(2px, -2px); }
.buchwand { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); max-width: 600px; margin-left: auto; padding-bottom: 24px; }
.buchwand__foto { margin: 0; position: relative; isolation: isolate; }
.buchwand__foto picture { display: block; overflow: hidden; background: var(--root); }
.buchwand__foto img { width: 100%; height: auto; }
.buchwand__foto--1 { margin-top: 36px; }
.buchwand__foto--2 { margin-top: 96px; }
.buchwand__foto--2::before { content: ""; position: absolute; inset: -12px 12px 12px -12px; border: 1px solid var(--honey); z-index: -1; pointer-events: none; }
@media (max-width: 899.98px) { .buchwand { margin-left: 0; max-width: 560px; } .buchwand__foto--1 { margin-top: 18px; } .buchwand__foto--2 { margin-top: 48px; } }

.wege-abschnitt.abschnitt { padding-top: clamp(64px, 9vw, 120px); }
.weg--bild { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(18px, 2.4vw, 32px); align-items: stretch; border-radius: 0; padding: clamp(18px, 2.4vw, 28px); }
.weg__rahmen { min-width: 0; }
.weg__foto { margin: 0; height: 100%; overflow: hidden; background: var(--cream); }
.weg__foto picture { display: block; height: 100%; }
.weg__foto img { width: 100%; height: 100%; object-fit: cover; }
.weg__text { display: flex; flex-direction: column; min-width: 0; padding-block: 6px; }
.weg__nr { font: italic 500 1.9rem/1 var(--serif); color: var(--honey); margin: 0 0 14px; font-variant-numeric: lining-nums; }
.weg__text .knopfreihe { margin-top: auto; padding-top: 22px; }
@media (max-width: 1099.98px) and (min-width: 768px) { .weg--bild { grid-template-columns: 1fr; } .weg__foto { aspect-ratio: 4 / 3; height: auto; } }

.buch-ort__bewertung { margin-top: 6px; }
.buch-ort .zeiten { margin-bottom: 22px; }

.buch-ablauf.abschnitt { padding-top: var(--abschnitt); }
.buch-ablauf__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 32px); row-gap: 48px; align-items: start; }
.buch-ablauf__bild { grid-column: 1 / span 5; position: sticky; top: calc(var(--kopf-h) + 32px); }
.buch-ablauf__rahmen { position: relative; isolation: isolate; width: min(100% - 12px, calc((100svh - var(--kopf-h) - 96px) * .6667)); }
.buch-ablauf__rahmen::before { content: ""; position: absolute; inset: 12px -12px -12px 12px; border: 1px solid var(--honey); z-index: -1; pointer-events: none; }
.buch-ablauf__foto { margin: 0; overflow: hidden; background: var(--cream); }
.buch-ablauf__foto img { width: 100%; height: auto; }
.buch-ablauf__text { grid-column: 7 / span 6; }
.buch-ablauf .ablauf { grid-template-columns: 1fr; gap: 0; padding-left: 34px; }
.buch-ablauf .ablauf::before { left: 7px; right: auto; top: 12px; bottom: 42px; width: 2px; height: auto; background: var(--balayage); }
.buch-ablauf .schritt { padding: 0 0 30px; }
.buch-ablauf .schritt::before { left: -34px; top: 4px; }
.buch-ablauf__knoepfe { margin-top: 8px; }
@media (max-width: 899.98px) {
  .buch-ablauf__bild { position: static; grid-column: 1 / -1; }
  .buch-ablauf__rahmen { width: min(100% - 12px, 380px); }
  .buch-ablauf__text { grid-column: 1 / -1; }
}

/* =====================================================================================================================
   /privacy, /terms – Kopf im neuen Stil, Rechtstext unverändert (nur Gestaltung)
   ===================================================================================================================== */
.ukopf--recht { padding-bottom: clamp(32px, 5vw, 64px); }
.ukopf--recht .ukopf__titel { font-size: clamp(2.8rem, 6.4vw, 5.6rem); margin-bottom: 0; }
.ukopf--recht .ukopf__text { grid-column: 1 / span 8; }
.ukopf--recht .ukopf__bild { grid-column: 9 / span 4; }
@media (max-width: 899.98px) { .ukopf--recht .ukopf__text, .ukopf--recht .ukopf__bild { grid-column: 1 / -1; } .ukopf--recht .kopf-streifen { max-width: 300px; } }
.rechtstext-abschnitt.abschnitt { padding-top: clamp(24px, 4vw, 48px); border-top: 1px solid var(--line); }
.rechtstext code { font-size: .9em; padding: 1px 6px; background: var(--cream); color: var(--espresso); }
.rechtstext__tabelle { margin: 18px 0 30px; overflow-x: auto; border-top: 2px solid var(--honey); }
.rechtstext__tabelle table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; }
.rechtstext__tabelle th { text-align: left; font: 500 11.5px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); padding: 12px 14px 10px 0; border-bottom: 1px solid var(--line); }
.rechtstext__tabelle td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-soft); }
.rechtstext__kasten { border-radius: 0; }

/* =====================================================================================================================
   404 – dunkle Bühne, großes „404“ im Balayage-Verlauf mit Lichtstreif, drei kleine Fotos treiben an den Rändern
   (nie unter dem Text: die Fotos stehen außerhalb der Textspalte, GR23)
   ===================================================================================================================== */
.fehlerseite { position: relative; overflow: clip; min-height: calc(100svh - var(--kopf-h)); display: grid; align-items: center; padding-block: clamp(56px, 9vw, 120px); background: linear-gradient(160deg, var(--espresso) 0%, var(--root) 100%); }
.fehlerseite__fotos { position: absolute; inset: 0; pointer-events: none; }
.fehlerseite__foto { position: absolute; margin: 0; width: clamp(96px, 11vw, 176px); isolation: isolate; }
.fehlerseite__foto picture { display: block; overflow: hidden; }
.fehlerseite__foto img { width: 100%; height: auto; }
.fehlerseite__foto--1 { left: 5%; top: 10%; }
.fehlerseite__foto--2 { right: 6%; top: 24%; }
.fehlerseite__foto--3 { left: 10%; bottom: 7%; }
.fehlerseite__foto--2::before { content: ""; position: absolute; inset: 12px -12px -12px 12px; border: 1px solid var(--honey); z-index: -1; pointer-events: none; }
.fehlerseite__text { position: relative; z-index: 1; text-align: center; max-width: 560px; }
.fehlerseite__zahl { margin: 0 0 6px; font: italic 600 clamp(7.5rem, 22vw, 17rem)/.86 var(--serif); letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.fehlerseite__ziffern {
  display: inline-block; padding: .04em .12em; margin: -.04em -.12em;
  color: transparent; -webkit-text-fill-color: transparent;
  background-image: linear-gradient(100deg, rgba(251, 247, 241, 0) 41%, rgba(255, 251, 243, .9) 50%, rgba(251, 247, 241, 0) 59%), var(--balayage);
  background-size: 320% 100%, 100% 150%; background-position: 100% 0, 0 100%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
}
.fehlerseite__titel { font-size: clamp(2.1rem, 4.4vw, 3.4rem); margin-bottom: 16px; }
.fehlerseite__satz { color: rgba(251, 247, 241, .8); margin: 0 auto 30px; }
.fehlerseite__knoepfe { justify-content: center; }
.fehlerseite__schalter { background: rgba(43, 33, 27, .6); color: var(--ivory); border-color: rgba(251, 247, 241, .3); }
@media (max-width: 767.98px) {
  .fehlerseite { align-items: start; grid-template-rows: auto 1fr; padding-top: 0; }
  .fehlerseite__fotos { position: relative; inset: auto; display: flex; justify-content: center; gap: 12px; padding: 28px var(--rand) 8px; }
  .fehlerseite__foto { position: relative; inset: auto; width: 26vw; }
  .fehlerseite__foto--2 { margin-top: 28px; }
}
@keyframes u-treiben-1 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(10px, -22px, 0); } }
@keyframes u-treiben-2 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-12px, 18px, 0); } }
@keyframes u-treiben-3 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(14px, -14px, 0); } }
@keyframes u-streif { 0% { background-position: 100% 0, 0 100%; } 24%, 100% { background-position: 0% 0, 0 100%; } }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.ohne-bewegung) .fehlerseite__foto--1 { animation: u-treiben-1 var(--k-treiben-1, 9s) ease-in-out infinite alternate; }
  html.js:not(.ohne-bewegung) .fehlerseite__foto--2 { animation: u-treiben-2 var(--k-treiben-2, 12s) ease-in-out infinite alternate; }
  html.js:not(.ohne-bewegung) .fehlerseite__foto--3 { animation: u-treiben-3 var(--k-treiben-3, 15s) ease-in-out infinite alternate; }
  html.js:not(.ohne-bewegung) .fehlerseite__foto picture { animation: u-pinsel 1.25s linear calc(.2s + var(--n, 0) * .15s) both; }
  html.js:not(.ohne-bewegung) .fehlerseite__foto--2 picture { --n: 1; }
  html.js:not(.ohne-bewegung) .fehlerseite__foto--3 picture { --n: 2; }
  html.js:not(.ohne-bewegung) .fehlerseite__ziffern { animation: u-ein 1s cubic-bezier(.16, 1, .3, 1) .1s both, u-streif 8s linear 1.4s infinite both; }
  html.js:not(.ohne-bewegung) .fehlerseite__satz, html.js:not(.ohne-bewegung) .fehlerseite__knoepfe { animation: u-ein .8s var(--sanft) .7s both; }
  html.js:not(.ohne-bewegung) .fehlerseite.ist-pausiert .fehlerseite__foto, html.js:not(.ohne-bewegung) .fehlerseite.ist-pausiert .fehlerseite__ziffern { animation-play-state: paused; }
}

/* ---------- schmale Fenster: Seitenköpfe einspaltig (nach den Sonderspalten von /book und /about) ---------- */
@media (max-width: 899.98px) {
  .ukopf--book .ukopf__text, .ukopf--book .ukopf__bild { grid-column: 1 / -1; }
  .ukopf--about .ukopf__bild { order: -1; }
}
@media (max-width: 767.98px) {
  .fehlerseite__fotos { padding-bottom: 36px; }
}

/* =====================================================================================================================
   IH2 Korrekturrunde (Sichtprüfung) – Nummern = Befunde
   ===================================================================================================================== */
/* 5 / 9: „Call or text (508) 498-7180“ bricht nie in der Nummer; in schmalen Spalten stehen die Knöpfe untereinander */
.abschluss .knopf, .weg .knopf, .ukopf__knoepfe .knopf { white-space: nowrap; }
@media (max-width: 1023.98px) {
  .abschluss .knopfreihe { flex-direction: column; align-items: stretch; max-width: 360px; }
  .abschluss .knopf { padding-inline: 18px; }
}
@media (min-width: 768px) and (max-width: 1023.98px) { .abschluss { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* /book Karten auf dem Handy: Foto neben Nummer, Titel und Satz; der Knopf darunter über die volle Kartenbreite */
@media (max-width: 767.98px) {
  .weg--bild { grid-template-rows: auto auto 1fr auto; column-gap: 16px; }
  .weg--bild .weg__rahmen { grid-row: 1 / 4; }
  .weg--bild .weg__text { display: contents; }
  .weg--bild .weg__text > * { grid-column: 2; }
  .weg--bild .weg__text .knopfreihe { grid-column: 1 / -1; margin-top: 18px !important; padding-top: 0; }
  .weg--bild .weg__text .knopf { width: 100%; }
}

/* 14: die Textspalte des Abschlusses fluchtet am Rechner auf die Satzkante der übrigen Abschnitte (.rahmen) */
.abschluss { container-type: inline-size; }
@media (min-width: 1024px) {
  .abschluss__text { justify-content: flex-start; padding-left: max(var(--rand), (100cqw - var(--breite)) / 2); }
}

/* 26: der Abschluss beginnt auf dem Handy bündig mit dem Foto (kein Vorhang von oben, unterseiten.js) */

/* 17: /book Karte „Call or text“ – Profil ganz im Rahmen */
.weg--bild:nth-of-type(2) .weg__foto img { object-position: 0% 50%; }

/* 6: Cookie-Tabelle unter 600 px als Blöcke mit Spaltennamen (Text unverändert; Spaltennamen wie im Tabellenkopf) */
@media (max-width: 599.98px) {
  .rechtstext__tabelle { overflow: visible; }
  .rechtstext__tabelle table, .rechtstext__tabelle tbody, .rechtstext__tabelle tr, .rechtstext__tabelle td { display: block; width: auto; min-width: 0; }
  .rechtstext__tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rechtstext__tabelle tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .rechtstext__tabelle td { position: relative; padding: 4px 0 4px 96px; border-bottom: 0; }
  .rechtstext__tabelle td::before { position: absolute; left: 0; top: 6px; font: 500 11px/1.6 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); }
  .rechtstext__tabelle td:nth-child(1)::before { content: "Name"; }
  .rechtstext__tabelle td:nth-child(2)::before { content: "Provider"; }
  .rechtstext__tabelle td:nth-child(3)::before { content: "Purpose"; }
  .rechtstext__tabelle td:nth-child(4)::before { content: "When"; }
}

/* 7 / 25: Tablet (640–899 px) – Bildgruppen über die Inhaltsbreite statt linksbündig mit leerer rechter Seite */
@media (min-width: 640px) and (max-width: 899.98px) {
  .kopf-streifen, .ukopf--recht .kopf-streifen, .buchwand { max-width: none; }
  .ukopf--recht .ukopf__text { grid-column: 1 / span 7; }
  .ukopf--recht .ukopf__bild { grid-column: 8 / span 5; }
  .ukopf--about .ukopf__bild { grid-column: 1 / span 5; grid-row: 1; order: 0; }
  .ukopf--about .ukopf__text { grid-column: 6 / span 7; grid-row: 1; }
  .ukopf__portraet { width: calc(100% - 12px); }
  .gruppe__bildseite { grid-column: 1 / span 5; grid-row: 1; }
  .gruppe__liste { grid-column: 6 / span 7; grid-row: 1; margin-top: 0; padding-top: 0; }
  .gruppe--gespiegelt .gruppe__bildseite { grid-column: 8 / span 5; grid-row: 1; }
  .gruppe--gespiegelt .gruppe__liste { grid-column: 1 / span 7; grid-row: 1; }
  .gruppe__haft { position: sticky; }
  .gruppe__rahmen, .gruppe--gespiegelt .gruppe__rahmen { width: calc(100% - 12px); }
  .studio .besuch__info, .buch-ort .besuch__info { grid-column: 1 / span 6; }
  .studio .besuch__duo, .buch-ort .besuch__duo { grid-column: 7 / span 6; max-width: none; }
  .buch-ablauf__bild { grid-column: 1 / span 5; position: sticky; }
  .buch-ablauf__rahmen { width: calc(100% - 12px); }
  .buch-ablauf__text { grid-column: 6 / span 7; }
}

/* 19: 404 auf dem Handy – der Pause-Knopf steht über der festen Call/Book-Leiste */
@media (max-width: 767.98px) {
  .fehlerseite { padding-bottom: calc(var(--leiste-h) + 72px); }
  .fehlerseite__schalter { bottom: calc(var(--leiste-h) + 16px + env(safe-area-inset-bottom, 0px)); }
}