/* Estate Art: gemeinsame Grundlage für Seite und Partnerbereich. Tokens und Regeln in estateart/DESIGN.md. */
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-kursiv.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --papier: #F4F3EF;
  --papier-hell: #FAF9F6;
  --stein: #E8E6E0;
  --weiss: #FFFFFF;
  --tinte: #161B26;
  --grau: #5C616B;
  /* Akzent Nachtblau */
  --nacht: #0E1625;
  --anthrazit: #151F33;
  --anthrazit-hell: #1D2A44;
  /* Das Licht der dunklen Flächen, wie auf der Kachel im Rechner: von oben rechts, leicht und ohne Fleck */
  --dunkel-licht: linear-gradient(205deg, rgba(42, 61, 95, .75) 0%, rgba(42, 61, 95, 0) 55%);
  --tanne: #1B2A44;
  --tanne-hell: #2A3D5F;
  --tanne-blass: #E1E5EC;
  --auf-dunkel: #F1EFEA;
  --auf-dunkel-weich: #A9AFBA;
  --linie: #D3D1CA;
  --linie-dunkel: rgba(241, 239, 234, .14);
  --warnung: #8A3B2A;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --t-klein: 0.875rem;
  --t-text: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --t-lead: clamp(1.2rem, 1.06rem + 0.55vw, 1.45rem);
  --t-kopf: clamp(2.7rem, 1.2rem + 5vw, 6.2rem);
  --t-anzeige: clamp(3.4rem, 0.9rem + 8vw, 10rem);

  --rand: clamp(18px, 3.4vw, 56px);
  --abschnitt: clamp(110px, 13vw, 220px);
  --breite: 1520px;
  --r: 2px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-weich: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font: 400 var(--t-text)/1.6 var(--sans); font-kerning: normal;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -0.025em; line-height: .98; text-wrap: balance; }
h1 { font-size: var(--t-anzeige); line-height: .9; letter-spacing: -0.035em; }
h2 { font-size: var(--t-kopf); }
h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); line-height: 1.04; }
h1 em, h2 em, h3 em, .band-satz em { font-style: italic; letter-spacing: -0.02em; }
[hidden] { display: none !important; }
::selection { background: var(--tanne); color: var(--weiss); }
input, textarea { caret-color: var(--tanne); }
.zahl, table, .daten { font-variant-numeric: tabular-nums lining-nums; }
:focus-visible { outline: 2px solid var(--tanne); outline-offset: 3px; border-radius: var(--r); }
.dunkel :focus-visible { outline-color: var(--auf-dunkel); }
html { scrollbar-color: #A9AAA6 var(--papier); }
.klein { font-size: var(--t-klein); color: var(--grau); }
.lead { font-size: var(--t-lead); line-height: 1.45; max-width: 34ch; }
.dunkel { background-color: var(--anthrazit); background-image: var(--dunkel-licht); color: var(--auf-dunkel); }
.dunkel .klein, .dunkel .lead-weich { color: var(--auf-dunkel-weich); }

.sprung { position: fixed; left: 12px; top: 12px; z-index: 200; padding: 12px 18px; background: var(--tinte); color: var(--weiss); border-radius: var(--r); transform: translateY(-160%); transition: transform 200ms var(--ease-out); }
.sprung:focus { transform: none; }
.nur-lesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Seitenwechsel ohne Weißblitz */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: var(--ease-out); }

/* Feines Korn über allem, wie gedrucktes Papier */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 150; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}

/* ---------- Marke: Zeichen aus marke/logo-quer.svg als Maske, damit es jede Farbe annimmt ---------- */
.marke { display: inline-flex; align-items: center; min-height: 44px; }
.marke-zeichen { display: block; width: 168px; aspect-ratio: 2173 / 520; background: currentColor; -webkit-mask: url("../marke/logo-quer.svg") no-repeat left center / contain; mask: url("../marke/logo-quer.svg") no-repeat left center / contain; }

/* ---------- Knöpfe ---------- */
/* Nachtblau mit feinem Goldrand. Beim Überfahren legt sich ein leuchtender Goldring mit etwas Abstand um den Knopf,
   auf hellem wie auf dunklem Grund. Farbe und Schrift bleiben; der Ring liegt in ::before und öffnet sich sanft nach außen. */
:root { --knopf-grund: linear-gradient(180deg, #25344F 0%, #151F33 100%); --knopf-gold: #C29A62; --knopf-gold-hell: #D9B97F; --knopf-schrift: #F5EFE4; }
.knopf {
  --glanz: 205, 160, 80;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 10px 28px;
  border: 1.5px solid var(--knopf-gold); border-radius: 999px;
  background: var(--knopf-grund); color: var(--knopf-schrift);
  font: 560 1rem/1 var(--sans); letter-spacing: .01em; white-space: nowrap; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 232, 196, .14), 0 1px 1px rgba(14, 22, 37, .2), 0 10px 22px -12px rgba(14, 22, 37, .55);
  transition: transform 160ms var(--ease-out), border-color 200ms ease, color 200ms ease;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.knopf::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 220ms ease, inset 280ms var(--ease-out);
  box-shadow: 0 0 0 1.5px rgba(var(--glanz), .95), 0 0 10px 1px rgba(var(--glanz), .45), 0 0 24px 2px rgba(var(--glanz), .16);
}
:is(.dunkel, .ueber-dunkel, .held, .leiste, .karte-b--dunkel, .visitenkarte, .paket--empfohlen, .kennzahl--dunkel, .kopf.voll) .knopf { --glanz: 226, 197, 151; }
.knopf > span { display: inline-block; }
.knopf .pfeil { width: 16px; height: 16px; flex: none; transition: transform 200ms var(--ease-out); }
.knopf:active { transform: scale(.97); }
.knopf:active::before, .knopf:focus-visible::before { opacity: 1; inset: -5px; }
.knopf:focus-visible { outline: none; }
/* Am Handy: kein Goldring beim Festhalten, nur ein kurzes Eindrücken */
@media (hover: none) { .knopf:active::before { opacity: 0; } .knopf:active { opacity: .88; } }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.knopf[disabled]::before, .knopf[aria-disabled="true"]::before { display: none; }
.knopf--hell { background: var(--papier); color: var(--tinte); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 22px -12px rgba(0, 0, 0, .5); }
.knopf--rand { background: transparent; color: inherit; box-shadow: none; }
:is(.dunkel, .ueber-dunkel, .held, .leiste, .karte-b--dunkel, .visitenkarte, .paket--empfohlen) .knopf--rand { border-color: var(--knopf-gold-hell); }
.knopf--klein { min-height: 44px; padding: 6px 20px; font-size: .9375rem; }
@media (hover: hover) and (pointer: fine) {
  .knopf:not([disabled]):not([aria-disabled="true"]):hover::before { opacity: 1; inset: -5px; }
  .knopf:hover .pfeil { transform: translateX(4px); }
}
.textlink { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 520; color: inherit; opacity: .86; transition: opacity 160ms ease; }
.textlink::after { content: "\2192"; transition: transform 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .textlink:hover { opacity: 1; } .textlink:hover::after { transform: translateX(4px); } }

/* ---------- Kopfzeile ----------
   Oben offen über dem Film, Inhalt über die ganze Breite. Sobald gescrollt ist, zieht sie sich zu einer schwebenden Pille aus
   dunklem Glas zusammen (Nachtblau, feine Goldkante), wie bei Floria und Glasfaserstand, und bleibt so stehen.
   Die Mitte der Zeile bleibt auf derselben Höhe: Die Pille ist niedriger und rückt per transform nach unten, unter ihr springt nichts. */
.kopf {
  --pille: min(100% - 2 * max(12px, var(--rand) - 24px), var(--breite) - 2 * var(--rand) + 48px);
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; width: 100%; height: 84px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px;
  padding: 0 var(--rand); color: var(--tinte);
  transition: width 520ms var(--ease-weich), height 520ms var(--ease-weich), padding 520ms var(--ease-weich), transform 520ms var(--ease-weich), color 300ms ease;
}
.kopf::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px;
  background: color-mix(in srgb, var(--anthrazit) 90%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(217, 185, 127, .3), inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 40px -18px rgba(5, 10, 20, .6);
  opacity: 0; transition: opacity 360ms ease; }
.kopf.voll { width: var(--pille); height: 60px; padding: 0 8px 0 24px; transform: translateY(12px); color: var(--auf-dunkel); }
.kopf.voll::before { opacity: 1; }
.kopf.ueber-dunkel { color: var(--auf-dunkel); }
.kopf nav { display: flex; gap: 34px; justify-self: center; }
.kopf nav a, .kopf .anmelden { position: relative; font-size: .9375rem; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; opacity: .8; transition: opacity 160ms ease; }
@media (hover: hover) and (pointer: fine) { .kopf nav a:hover, .kopf .anmelden:hover { opacity: 1; } }
.kopf-rechts { display: flex; align-items: center; justify-content: flex-end; gap: 26px; }
.kopf .knopf { min-height: 44px; padding: 6px 22px; font-size: .9375rem; }
.kopf:is(.ueber-dunkel, .voll) .knopf { background: var(--papier); color: var(--tinte); border-color: var(--knopf-gold-hell); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 22px -12px rgba(0, 0, 0, .5); }
/* Beim Neuladen mitten auf der Seite gilt der Zustand sofort, ohne Bewegung */
.kopf.still, .kopf.still::before { transition: none; }
.menue-knopf { display: none; width: 44px; height: 44px; border: 0; background: none; padding: 0; cursor: pointer; }
.menue-knopf span, .menue-knopf span::before { display: block; width: 24px; height: 1.5px; margin: 0 auto; background: currentColor; transition: transform 260ms var(--ease-out); }
.menue-knopf span::before { content: ""; transform: translateY(7px); }
.menue-knopf span { transform: translateY(-3.5px); }

@media (max-width: 900px) {
  .kopf { height: 72px; grid-template-columns: 1fr auto; gap: 12px; }
  .kopf.voll { width: calc(100% - 24px); height: 56px; padding: 0 6px 0 18px; transform: translateY(8px); }
  .kopf-rechts { gap: 6px; }
  .kopf nav, .kopf .anmelden { display: none; }
  .marke-zeichen { width: 140px; }
  .menue-knopf { display: block; }
  .kopf .knopf { min-height: 40px; padding: 6px 16px; font-size: .9375rem; }
  html.menue-offen .kopf { color: var(--auf-dunkel); }
  html.menue-offen .kopf::before { opacity: 1; background: var(--anthrazit); }
  html.menue-offen .kopf .knopf { background: var(--knopf-grund); color: var(--knopf-schrift); border-color: var(--knopf-gold); }
  html.menue-offen .menue-knopf span { transform: rotate(45deg); }
  html.menue-offen .menue-knopf span::before { transform: rotate(-90deg); }
}
.menue {
  position: fixed; inset: 0; z-index: 59; background: var(--anthrazit); color: var(--auf-dunkel);
  padding: 104px var(--rand) calc(32px + env(safe-area-inset-bottom)); display: grid; align-content: start; gap: 4px;
  clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path 600ms var(--ease-in-out), visibility 0s linear 600ms;
}
html.menue-offen .menue { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 600ms var(--ease-in-out); }
.menue a { font: 400 2.75rem/1.12 var(--serif); padding: 6px 0; letter-spacing: -0.02em; }
.menue .menue-klein { font: 500 1rem/1.4 var(--sans); color: var(--auf-dunkel-weich); margin-top: 26px; }
html.menue-offen { overflow: hidden; }

/* ---------- Felder ---------- */
.feld { display: grid; gap: 8px; }
.feld label { font-size: var(--t-klein); font-weight: 500; color: var(--grau); }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 56px; padding: 14px 18px; border: 1px solid var(--linie); border-radius: 12px;
  background: var(--weiss); color: var(--tinte); font-size: 1rem; transition: border-color 160ms ease, box-shadow 160ms ease;
}
.feld textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.feld input::placeholder, .feld textarea::placeholder { color: #8C8F95; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--tanne); box-shadow: 0 0 0 4px rgba(27, 42, 68, .12); }
.feld input[aria-invalid="true"] { border-color: var(--warnung); }
.feld .hinweis { font-size: var(--t-klein); color: var(--grau); }
.meldung { font-size: .9375rem; color: var(--warnung); min-height: 1.4em; }
.meldung:empty { min-height: 0; }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Rahmen und Passepartout wie das echte Bild ----------
   Das Aquarell liegt mit Multiplizieren auf dem Papier und ist eine Spur aufgehellt: Sein eigenes Papier verschwindet,
   die Farbe läuft weich ins Passepartout aus, nie ein Viereck. */
.rahmen {
  --rf: #C8A676; --rk: #A27F50;
  position: relative; margin: 0; padding: clamp(7px, 2.4%, 18px);
  background: linear-gradient(135deg, color-mix(in srgb, var(--rf) 82%, #fff) 0%, var(--rf) 46%, var(--rk) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), inset 2px 2px 0 rgba(255, 255, 255, .22), 0 2px 3px rgba(14, 22, 37, .08), 0 34px 70px -34px rgba(14, 22, 37, .6);
}
.rahmen--eiche { --rf: #C8A676; --rk: #A27F50; }
.rahmen--schwarz { --rf: #2B2E33; --rk: #121417; }
.rahmen--weiss { --rf: #F7F5F0; --rk: #D6D3CC; }
.rahmen, .rahmen .pp { transition: background 500ms ease; }
.pp {
  position: relative; isolation: isolate; container-type: inline-size;
  background: linear-gradient(180deg, #FFFEFB 0%, #FBF9F5 40%, #F3EFE7 100%);
  padding: 8.5% 7% 13.5%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05), inset 3px 3px 8px rgba(0, 0, 0, .11);
}
.aq { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: contain; mix-blend-mode: multiply; filter: brightness(1.05) saturate(1.04);
  -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent); mask-image: radial-gradient(closest-side, #000 82%, transparent);
  -webkit-mask-size: 112% 118%; mask-size: 112% 118%; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.pp .zeile { position: absolute; left: 0; right: 0; bottom: 4.4cqi; padding: 0 8%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: italic 400 clamp(11px, 3.3cqi, 19px)/1.2 var(--serif); color: #5A5F68; letter-spacing: .01em; }
/* Glanz auf dem Plexiglas, folgt dem Zeiger (bewegung.js setzt --gx, --gy) */
[data-kippen] { transform-style: preserve-3d; transition: transform 700ms var(--ease-weich); }
[data-kippen] .pp::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--glanz, 0); transition: opacity 500ms ease;
  background: linear-gradient(115deg, transparent calc(var(--gx, 50%) - 30%), rgba(255, 255, 255, .34) var(--gx, 50%), transparent calc(var(--gx, 50%) + 26%)); mix-blend-mode: soft-light; }

/* ---------- Fußzeile: Aufbau wie bei Aquarelier ---------- */
.fuss { position: relative; isolation: isolate; background: radial-gradient(120% 70% at 50% 0%, #1E2A40 0%, var(--nacht) 55%, #0A101C 100%); color: var(--auf-dunkel); padding: 80px var(--rand) 40px; }
/* Goldene Naht zwischen heller Seite und Fuß: feine Linie mit weichem Leuchten nach unten */
.fuss::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(200, 166, 118, 0) 0%, rgba(214, 182, 132, .85) 30%, #E2C595 50%, rgba(214, 182, 132, .85) 70%, rgba(200, 166, 118, 0) 100%); box-shadow: 0 0 14px 1px rgba(214, 178, 120, .45); pointer-events: none; }
.fuss::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: min(320px, 60%); background: radial-gradient(55% 100% at 50% 0%, rgba(200, 160, 100, .16) 0%, rgba(200, 160, 100, .055) 45%, rgba(200, 160, 100, 0) 100%); pointer-events: none; }
.fuss-innen { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.fuss .marke-zeichen { width: 228px; color: var(--auf-dunkel); }
.fuss p { color: var(--auf-dunkel-weich); margin-top: 16px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; align-content: start; }
.fuss li a { display: inline-flex; min-height: 44px; align-items: center; color: var(--auf-dunkel-weich); transition: color 160ms ease; }
.fuss-unten { max-width: 1240px; margin: 56px auto 0; padding-top: 20px; border-top: 1px solid var(--linie-dunkel); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: var(--t-klein); color: var(--auf-dunkel-weich); }
.fuss-links { display: flex; flex-wrap: wrap; column-gap: 22px; }
.fuss-links a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 6px; margin-inline: -6px; color: var(--auf-dunkel-weich); transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .fuss li a:hover, .fuss-links a:hover { color: var(--auf-dunkel); } }
@media (max-width: 760px) { .fuss-innen { grid-template-columns: 1fr 1fr; } .fuss-innen > :first-child { grid-column: 1 / -1; } }

/* ---------- Vorhang beim ersten Besuch ---------- */
.vorhang { display: none; }
.js .vorhang { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; background: var(--nacht); color: var(--auf-dunkel); clip-path: inset(0 0 0 0); transition: clip-path 1100ms var(--ease-in-out); }
.vorhang-zeichen { width: clamp(92px, 9vw, 132px); aspect-ratio: 553 / 520; background: currentColor; -webkit-mask: url("../marke/monogramm.svg") no-repeat center / contain; mask: url("../marke/monogramm.svg") no-repeat center / contain; clip-path: inset(calc(100% - var(--lv, 0) * 1%) 0 0 0); transition: clip-path 300ms var(--ease-out); }
.vorhang-zahl { position: absolute; right: var(--rand); bottom: calc(var(--rand) + env(safe-area-inset-bottom)); font: 400 clamp(3rem, 2rem + 4vw, 6rem)/1 var(--serif); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; color: var(--knopf-gold-hell); }
.vorhang-wort { position: absolute; left: var(--rand); bottom: calc(var(--rand) + env(safe-area-inset-bottom) + .6em); font-size: var(--t-klein); color: var(--auf-dunkel-weich); letter-spacing: .02em; }
.vorhang.weg { clip-path: inset(0 0 100% 0); pointer-events: none; }
html.ohne-vorhang .vorhang { display: none; }

/* ---------- Zeiger mit Wort (nur mit Maus) ---------- */
.zeiger { position: fixed; left: 0; top: 0; z-index: 170; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; pointer-events: none;
  display: grid; place-items: center; background: var(--tanne); color: var(--weiss); font: 560 .8125rem/1 var(--sans); letter-spacing: .02em;
  scale: 0; transition: scale 400ms var(--ease-weich); will-change: transform; }
.zeiger.an { scale: 1; }

/* ---------- Auftritte: einmal, gestaffelt, Inhalt bleibt ohne Skript sichtbar ---------- */
.js [data-auf] > * { opacity: 0; transform: translateY(28px); }
[data-auf] > span { display: block; }
.js [data-auf].da > * { opacity: 1; transform: none; transition: opacity 900ms var(--ease-out), transform 1100ms var(--ease-weich); transition-delay: calc(var(--n, 0) * 90ms); }
/* Überschriften Zeile für Zeile aus einer Maske */
.zeile-maske { display: block; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }
.zeile-innen { display: block; }
.js [data-zeilen]:not(.da) .zeile-innen { transform: translateY(108%); }
.js [data-zeilen].da .zeile-innen { transform: none; transition: transform 1250ms var(--ease-weich); transition-delay: calc(var(--z, 0) * 95ms + var(--zv, 0ms)); }
/* Bilder öffnen sich von unten, das Bild darin setzt sich */
.js [data-enthuellen] { clip-path: inset(100% 0 0 0); transition: clip-path 1400ms var(--ease-in-out); }
.js [data-enthuellen] > :is(img, picture, video, .szene) { scale: 1.18; transition: scale 1900ms var(--ease-weich); }
.js [data-enthuellen].da { clip-path: inset(0 0 0 0); }
.js [data-enthuellen].da > :is(img, picture, video, .szene) { scale: 1; }
[data-tiefe] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .js [data-auf] > *, .js [data-zeilen] .zeile-innen { opacity: 1 !important; transform: none !important; }
  .js [data-enthuellen] { clip-path: none !important; }
  .js [data-enthuellen] > * { scale: 1 !important; }
  .js .vorhang, .zeiger { display: none !important; }
  [data-tiefe] { transform: none !important; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}