/* ============================================================
   PRIOCASA Immobilien & Finanzservice
   Design-System "Grenzlicht"
   Eifel ↔ Luxemburg · Nacht, Gold, sechs Sprachen
   ============================================================ */

/* --- Schriften: lokal, kein externes CDN (DSGVO) --- */
@import url("../fonts/fonts.css");

/* ------------------------------------------------------------
   1 · Token
------------------------------------------------------------ */
:root {
  /* Farbwelt – warme Nacht, zwei Metalle */
  --nacht:      #0A0908;
  --nacht-2:    #12100D;
  --nacht-3:    #1A1611;
  --gold:       #C9A24E;
  --gold-hell:  #EBD49B;
  --gold-tief:  #7A5E24;
  --casa:       #FF7B00;
  --bein:       #EFE8DA;
  --leise:      #8F8878;
  --linie:      rgba(201, 162, 78, .22);
  --linie-zart: rgba(239, 232, 218, .10);

  /* Licht fuer die menschlichen Stellen (Joe 21.08.2026): dort, wo es um
     Personen geht - Team, Stimmen, Kontakt, Haltung - wird der Grund
     waermer und der leise Text heller. Die Nacht bleibt die Nacht;
     Hero, Objekte, Leistungen und Region ruehrt das nicht an. Genau
     dieser Kontrast macht die hellen Stellen erst warm. */
  --nacht-warm:  #17130E;
  --leise-hell:  #B7AE9A;
  --schein-gold: rgba(201, 162, 78, .085);

  /* Typo — EINE Familie, Helvetica-Linie (lokal: Arimo, Apache 2.0) */
  --helv:    "Helvetica Neue", Helvetica, "Arimo", Arial, sans-serif;
  --display: var(--helv);
  --text:    var(--helv);

  --t-riesig: clamp(2.5rem, 6.2vw, 5.4rem);
  --t-gross:  clamp(1.9rem, 4vw, 3.3rem);
  --t-mittel: clamp(1.3rem, 2.1vw, 1.8rem);
  --t-body:   clamp(1rem, 1.05vw, 1.09rem);
  --t-klein:  .875rem;
  --t-label:  .705rem;

  /* Raster & Rhythmus */
  --rand:     clamp(1.25rem, 5vw, 5.5rem);
  --max:      1440px;
  --luft:     clamp(5.5rem, 11vw, 10rem);

  --weich:    cubic-bezier(.22, .61, .36, 1);
  --tief:     cubic-bezier(.65, .05, .36, 1);
}

/* ------------------------------------------------------------
   2 · Grundlagen
------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--nacht);
  color: var(--bein);
  font-family: var(--text);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--gold-hell);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--gold); color: var(--nacht); }

/* Stark, aufrecht, versal — kraftvoll, aber bodenständig */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: .015em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
h3, h4 { letter-spacing: .04em; }

p { margin: 0; }

/* Für Screenreader */
.nur-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sprung {
  position: absolute; left: var(--rand); top: -100px; z-index: 200;
  background: var(--gold); color: var(--nacht);
  padding: .8rem 1.4rem; font-weight: 600; font-size: var(--t-klein);
  transition: top .2s var(--weich);
}
.sprung:focus { top: 1rem; }

/* ------------------------------------------------------------
   3 · Bausteine
------------------------------------------------------------ */
.huelle {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Kleines Gold-Label mit Rautenmarke – Anlehnung an die Wappenzier */
.marke {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--text);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}
.marke::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}
.marke--linie::after {
  content: "";
  width: clamp(2rem, 6vw, 5rem); height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.fliess {
  color: var(--leise);
  max-width: 60ch;
  font-size: var(--t-body);
}
.fliess strong { color: var(--bein); font-weight: 500; }

/* Schaltflächen ------------------------------------------------ */
.knopf {
  --k-bg: transparent;
  --k-fg: var(--bein);
  --k-li: var(--linie);
  position: relative;
  display: inline-flex; align-items: center; gap: .85rem;
  padding: 1.05rem 2rem;
  background: var(--k-bg);
  color: var(--k-fg);
  border: 1px solid var(--k-li);
  font-size: var(--t-klein);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition: color .45s var(--weich), border-color .45s var(--weich);
}
/* Gold-Wisch von unten – ein Lichtstreif, kein Farbklotz */
.knopf::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, var(--gold-tief), var(--gold) 45%, var(--gold-hell));
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .45s var(--tief);
}
.knopf:hover, .knopf:focus-visible { color: var(--nacht); border-color: var(--gold); }
.knopf:hover::after, .knopf:focus-visible::after { transform: scaleY(1); }
.knopf .pfeil { transition: transform .45s var(--weich); }
.knopf:hover .pfeil { transform: translateX(5px); }

.knopf--voll {
  --k-bg: var(--gold);
  --k-fg: var(--nacht);
  --k-li: var(--gold);
  font-weight: 700;
}
.knopf--voll::after { background: var(--bein); }
.knopf--voll:hover, .knopf--voll:focus-visible { color: var(--nacht); border-color: var(--bein); }

.knopf--schlicht {
  padding-inline: 0; border: 0;
  border-bottom: 1px solid var(--linie);
  padding-bottom: .6rem;
}
.knopf--schlicht::after { display: none; }
.knopf--schlicht:hover { color: var(--gold); border-color: var(--gold); }

/* ------------------------------------------------------------
   4 · Kopfzeile
------------------------------------------------------------ */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 100;
  padding-block: 1.15rem;
  transition: background .5s var(--weich), padding .5s var(--weich), border-color .5s;
  border-bottom: 1px solid transparent;
}
/* Kein backdrop-filter mehr (Ticket #61, 11.08.2026).
   Gemessen: der Balken ist zu 90 % deckend — die Weichzeichnung wirkte also nur auf
   die restlichen 10 % Resthelligkeit, musste dafuer aber WAEHREND DES SCROLLENS in
   jedem Bild ueber die volle Bildschirmbreite (9 % der Flaeche) neu berechnet werden.
   Ein fixierter, voll breiter Balken mit backdrop-filter ueber bewegtem Inhalt ist die
   teuerste Kombination, die eine Seite haben kann. Die Deckung geht dafuer auf 96 % —
   optisch derselbe dunkle Balken, nur ohne die Unschaerfe dahinter (und besser lesbar). */
.kopf.gescrollt {
  background: rgba(10, 9, 8, .96);
  border-bottom-color: var(--linie);
  padding-block: .7rem;
}
.kopf__reihe {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.kopf__logo {
  position: relative;
  display: flex; align-items: center; gap: .9rem;
}
.kopf__logo img {
  height: clamp(52px, 5vw, 68px); width: auto;
  transition: height .5s var(--weich), filter .6s var(--weich);
  filter: drop-shadow(0 4px 18px rgba(201, 162, 78, .35));
}
.kopf.gescrollt .kopf__logo img { height: 46px; }
.kopf__logo:hover img { filter: drop-shadow(0 4px 26px rgba(235, 212, 155, .55)); }
.kopf__wort {
  display: flex; flex-direction: column; gap: .18rem;
  font-weight: 700;
  font-size: clamp(.92rem, 1.05vw, 1.08rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bein);
  white-space: nowrap;
}
.kopf__wort em { font-style: normal; color: var(--casa); }
.kopf__wort small {
  font-size: .5rem;
  font-weight: 400;
  letter-spacing: .3em;
  color: var(--leise);
}
@media (max-width: 640px) { .kopf__wort { display: none; } }

.nav { display: flex; align-items: center; gap: clamp(1.3rem, 2.4vw, 2.5rem); }
.nav a {
  position: relative;
  font-size: var(--t-klein);
  font-weight: 500;
  letter-spacing: .055em;
  color: var(--bein);
  padding-block: .35rem;
  transition: color .3s var(--weich);
}
.nav a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--tief);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold-hell); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.kopf__rechts { display: flex; align-items: center; gap: 1.4rem; }
.kopf__tel {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--t-klein); font-weight: 500; letter-spacing: .04em;
  color: var(--leise);
  transition: color .3s;
}
.kopf__tel:hover { color: var(--gold-hell); }
.kopf__tel svg { flex: none; }

/* Menüknopf (mobil) */
.menue-knopf { display: none; width: 44px; height: 44px; position: relative; }
.menue-knopf span {
  position: absolute; left: 11px; width: 22px; height: 1.5px;
  background: var(--bein);
  transition: transform .4s var(--tief), opacity .3s;
}
.menue-knopf span:nth-child(1) { top: 17px; }
.menue-knopf span:nth-child(2) { top: 23px; }
.menue-knopf span:nth-child(3) { top: 29px; }
.menue-knopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menue-knopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------------------
   5 · Bühne (Hero)
------------------------------------------------------------ */
.buehne {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-top: 8rem;
  padding-bottom: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
}

.buehne__bild {
  position: absolute; inset: 0; z-index: 0;
}
.buehne__bild img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 26%;
  opacity: .92;
  filter: saturate(.78) contrast(1.05);
  animation: atem 26s ease-in-out infinite alternate;
}
@keyframes atem {
  from { transform: scale(1.02); }
  to   { transform: scale(1.11); }
}
/* Licht fällt von links nach rechts ab – Text steht auf echter Nacht */
.buehne__bild::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      var(--nacht) 14%,
      rgba(10, 9, 8, .93) 30%,
      rgba(10, 9, 8, .58) 52%,
      rgba(10, 9, 8, .12) 76%,
      transparent 100%),
    linear-gradient(to top, var(--nacht) 1%, rgba(10, 9, 8, .35) 18%, transparent 46%);
}

.buehne__inhalt { position: relative; z-index: 2; width: 100%; }
.buehne__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 980px) {
  .buehne__raster { grid-template-columns: 1fr; }
  .wappen-schau { justify-self: start; width: clamp(150px, 40vw, 230px); margin-inline: 0; }
}

.buehne__titel {
  margin-block: 1.3rem 1.5rem;
}

/* --- SIGNATURE: ein Wort, sechs Sprachen --- */
.wechsel {
  position: relative;
  display: inline-block;
  font-size: var(--t-riesig);
  line-height: 1;
  color: var(--bein);
  /* Breite folgt dem Wort – gesetzt per JS, damit keine Lücke entsteht */
  transition: width .55s var(--tief);
  white-space: nowrap;
}
.wechsel__wort {
  display: inline-block;
  transition: opacity .42s var(--weich), transform .42s var(--weich), filter .42s;
}
.wechsel__wort.geht {
  opacity: 0;
  transform: translateY(-.14em);
  filter: blur(4px);
}
/* Der Strich zeichnet sich unter dem Wort neu – Licht, das Halt gibt */
.wechsel__strich {
  position: absolute; left: 0; right: 0; bottom: -.1em;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-tief), var(--gold) 40%, var(--gold-hell));
  transform-origin: left;
  transition: transform .55s var(--tief);
}
/* Mess-Zwilling: unsichtbar, gibt die Zielbreite vor */
.wechsel__mass {
  position: absolute; visibility: hidden; pointer-events: none;
  white-space: nowrap; left: 0; top: 0;
}

.buehne__slogan {
  display: block;
  font-family: var(--text);
  font-size: clamp(.95rem, 1.5vw, 1.22rem);
  font-weight: 400;
  letter-spacing: .015em;
  color: var(--bein);
  margin-top: 1.5rem;
  line-height: 1.5;
}

/* Sprachwahl – anklickbar, nicht nur Dekoration */
.sprachen {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: 1.6rem;
  padding: 0; list-style: none;
}
.sprachen__knopf {
  padding: .4rem .8rem;
  border: 1px solid var(--linie);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--leise);
  transition: color .35s var(--weich), border-color .35s var(--weich), background .35s var(--weich);
}
.sprachen__knopf:hover { color: var(--gold-hell); border-color: var(--gold-tief); }
.sprachen__knopf[aria-pressed="true"] {
  color: var(--nacht);
  background: var(--gold);
  border-color: var(--gold);
}

.buehne__aktionen { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }

/* Vertrauensleiste unten */
.beleg {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--linie);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.beleg__zelle {
  background: var(--nacht);
  padding: 1.35rem clamp(.8rem, 1.6vw, 1.6rem);
  display: flex; flex-direction: column; gap: .3rem;
}
.beleg__wert {
  font-family: var(--display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.4rem, 2.1vw, 1.95rem);
  color: var(--gold-hell);
  line-height: 1;
  display: flex; align-items: center; gap: .4rem;
}
.beleg__wert .sterne { font-size: .55em; color: var(--gold); letter-spacing: .1em; }
.beleg__was {
  font-size: var(--t-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--leise);
}

/* ------------------------------------------------------------
   5b · Bewegtbild als Hintergrund
------------------------------------------------------------ */
.film { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.film video,
.film img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* War `saturate(.78)`: eine Notbremse gegen zu bunte Filme unter einem
     fast undurchsichtigen Schleier. Der Schleier ist offen, die Bremse
     kann lockerer. */
  filter: saturate(.9) contrast(1.04);
}
.film video { opacity: 0; transition: opacity 1.6s var(--weich); }
.film video.laeuft { opacity: 1; }
/* Standbild liegt darunter und trägt, bis das Video da ist */
.film img { position: absolute; inset: 0; }

/* Lesbarkeit: Licht fällt von rechts ab, Text steht auf echter Nacht */
.film__schleier {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      var(--nacht) 12%,
      rgba(10, 9, 8, .92) 30%,
      rgba(10, 9, 8, .55) 54%,
      rgba(10, 9, 8, .18) 80%,
      rgba(10, 9, 8, .05) 100%),
    linear-gradient(to top, var(--nacht) 1%, rgba(10, 9, 8, .3) 16%, transparent 44%);
}
/* Ruhige Fassung: gleichmäßig dunkel, damit Text überall trägt */
.film--ruhig .film__schleier {
  background:
    /* Dunkel, wo die Schrift steht — offen, wo der Film etwas zu zeigen hat.
       Die Werte sind GEMESSEN: der hellste Punkt hinter Fließtext muss unter
       rund RGB 100 bleiben, sonst reisst der Kontrast (WCAG 4,5:1). */
    linear-gradient(100deg,
      rgba(10, 9, 8, .95) 0%,
      rgba(10, 9, 8, .93) 34%,
      rgba(10, 9, 8, .86) 58%,
      rgba(10, 9, 8, .55) 80%,
      rgba(10, 9, 8, .22) 100%),
    /* Weiche Kanten oben und unten, damit der Abschnitt nicht abschneidet. */
    linear-gradient(to bottom,
      var(--nacht) 0%, rgba(10, 9, 8, .28) 12%,
      rgba(10, 9, 8, .28) 88%, var(--nacht) 100%);
}
/* Läuft der Text über beide Spalten (`duo`, Schritt-Listen), gibt es keine
   freie Seite — dann gleichmäßig, aber immer noch heller als die 95 %,
   unter denen der Film vorher unsichtbar war. */
.film--ruhig--breit .film__schleier {
  background:
    linear-gradient(to bottom,
      var(--nacht) 0%, rgba(10, 9, 8, .90) 14%,
      rgba(10, 9, 8, .88) 86%, var(--nacht) 100%);
}

/* Auf Filmabschnitten tritt die Schrift heller auf. `#9A937F` ist auf
   schwarzem Grund elegant und auf einem hellen Bild chancenlos — gemessen
   1,1:1. Der Schattenrand kostet nichts und trägt die Zeile auch über einer
   hellen Stelle. */
.film--ruhig ~ .huelle .fliess,
.film--ruhig ~ .huelle .schritt__text,
section:has(.film--ruhig) .huelle .fliess,
section:has(.film--ruhig) .huelle .schritt__text,
section:has(.film--ruhig) .huelle li,
section:has(.film--ruhig) .huelle p {
  color: var(--bein);
  text-shadow: 0 1px 12px rgba(10, 9, 8, .85), 0 0 2px rgba(10, 9, 8, .7);
}
section:has(.film--ruhig) .huelle h1,
section:has(.film--ruhig) .huelle h2,
section:has(.film--ruhig) .huelle h3 {
  text-shadow: 0 2px 18px rgba(10, 9, 8, .8);
}
/* Gedämpft war das Bild, WEIL es unter einem fast undurchsichtigen Schleier
   lag. Ohne den braucht es die Dämpfung nicht mehr. */
.film--ruhig video, .film--ruhig img { opacity: 1; }

/* Abschnitte mit Film: Inhalt muss darüber liegen */
.block > .huelle { position: relative; z-index: 1; }

/* Feines Korn – nimmt dem Video das Digitale */
.film__korn {
  position: absolute; inset: 0;
  opacity: .05;
  background-image: radial-gradient(rgba(255,255,255,.8) .5px, transparent .5px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}

/* ------------------------------------------------------------
   5c · Das Wappen – groß, ruhig, in Bewegung
------------------------------------------------------------ */
.wappen-schau {
  position: relative;
  width: clamp(240px, 30vw, 480px);
  aspect-ratio: 1;
  margin-inline: auto;
  perspective: 900px;
  justify-self: end;
}
.wappen-schau__koerper {
  position: absolute; inset: 0;
  transform: rotateX(var(--kipp-x, 0deg)) rotateY(var(--kipp-y, 0deg));
  transform-style: preserve-3d;
  transition: transform .9s var(--weich);
}

/* Lichtring, der langsam um das Wappen wandert */
.wappen-schau__ring {
  position: absolute; inset: -9%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0 48%,
    rgba(201, 162, 78, .32) 62%,
    rgba(235, 212, 155, .85) 72%,
    rgba(201, 162, 78, .32) 82%,
    transparent 94%);
  filter: blur(9px);
  animation: ring-wandert 16s linear infinite;
}
@keyframes ring-wandert { to { transform: rotate(360deg); } }

/* Atmender Lichthof */
.wappen-schau__hof {
  position: absolute; inset: -26%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(201, 162, 78, .42) 0%,
    rgba(201, 162, 78, .14) 44%,
    transparent 70%);
  animation: hof-atmet 9s ease-in-out infinite alternate;
}
@keyframes hof-atmet {
  from { opacity: .55; transform: scale(.96); }
  to   { opacity: 1;   transform: scale(1.06); }
}

.wappen-schau img {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 46px rgba(0, 0, 0, .75));
  animation: wappen-schwebt 11s ease-in-out infinite alternate;
}
@keyframes wappen-schwebt {
  from { transform: translateY(-.5%) scale(.995); }
  to   { transform: translateY(1.2%)  scale(1.012); }
}

/* Glanzstreif, der über die Münze zieht – auf die Kreisform beschnitten */
.wappen-schau__glanz {
  position: absolute; inset: 6%;
  z-index: 3;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.wappen-schau__glanz::after {
  content: "";
  position: absolute; top: -60%; left: -130%;
  width: 45%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 250, 235, .62), transparent);
  transform: rotate(16deg);
  animation: glanz-zieht 8.5s ease-in-out infinite;
}
@keyframes glanz-zieht {
  0%, 62%  { left: -130%; }
  88%, 100% { left: 165%; }
}

/* ------------------------------------------------------------
   5d · Schleier hinter dem Zeiger – in den Farben unserer Sprachen
------------------------------------------------------------ */
.schleier {
  position: fixed; inset: 0;
  z-index: 88;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .85;
}

/* ------------------------------------------------------------
   5e · Credo
------------------------------------------------------------ */
.credo { position: relative; overflow: hidden; text-align: center; }
.credo__wappen {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(52vw, 620px);
  opacity: .045;
  pointer-events: none;
}
.credo > .huelle { position: relative; z-index: 1; }
.credo__satz {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 5.2vw, 4.4rem);
  line-height: 1.06;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold-hell);
  margin-block: 1.6rem 1.8rem;
}
.credo__zusatz { margin-inline: auto; text-align: center; }
/* Zierlinie mit Raute – aus der Wappenzier abgeleitet */
.zier {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  color: var(--gold);
}
.zier::before, .zier::after {
  content: ""; height: 1px; width: clamp(2.5rem, 12vw, 9rem);
  background: linear-gradient(90deg, transparent, var(--gold));
}
.zier::after { background: linear-gradient(90deg, var(--gold), transparent); }
.zier span { font-size: .7rem; transform: rotate(45deg); display: inline-block; }

/* ------------------------------------------------------------
   5e2 · Das Lichtband — der Schleier der Marke
   Elektroblau · Gold · warmes Rot, als fließender Schwung.
   Gezeichnet per Canvas (JS), hier nur Bühne und Lage.
------------------------------------------------------------ */
.lichtband {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}
.lichtband canvas { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------
   5f · Ouvertüre – der Empfang beim Eintreten
------------------------------------------------------------ */
.ouvertuere {
  position: fixed; inset: 0; z-index: 300;
  background: var(--nacht);
  display: grid; place-items: center;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.15s var(--tief);
}
.ouvertuere.hebt { clip-path: inset(0 0 100% 0); }
.ouvertuere.weg  { display: none; }

.ouv__mitte { display: grid; justify-items: center; gap: 1.4rem; text-align: center; padding-inline: 1.5rem; }

.ouv__wappen {
  width: clamp(110px, 15vw, 190px);
  opacity: 0; transform: scale(.78);
  filter: drop-shadow(0 0 0 rgba(201,162,78,0));
  animation: ouv-wappen 1.25s var(--weich) .15s forwards;
}
@keyframes ouv-wappen {
  to { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 42px rgba(201,162,78,.5)); }
}

.ouv__linie {
  width: min(340px, 62vw); height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
  animation: ouv-linie .85s var(--tief) .95s forwards;
}
@keyframes ouv-linie { to { transform: scaleX(1); } }

.ouv__wort, .ouv__satz {
  opacity: 0; transform: translateY(12px);
  animation: ouv-auf .9s var(--weich) forwards;
}
.ouv__wort {
  font-family: var(--text);
  font-size: var(--t-label); font-weight: 600;
  letter-spacing: .42em; text-transform: uppercase;
  color: var(--bein);
  animation-delay: 1.3s;
  padding-left: .42em;
}
.ouv__satz {
  font-family: var(--display); font-style: italic; font-weight: 300;
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  letter-spacing: .02em;
  color: var(--gold-hell);
  animation-delay: 1.85s;
}
@keyframes ouv-auf { to { opacity: 1; transform: none; } }

.ouv__weiter {
  position: absolute; bottom: 2rem; right: var(--rand);
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase;
  color: var(--leise);
  opacity: 0; animation: ouv-auf .7s var(--weich) 2.2s forwards;
  transition: color .3s;
}
.ouv__weiter:hover { color: var(--gold-hell); }

body.ouv-laeuft { overflow: hidden; }

/* ------------------------------------------------------------
   5g · Rundgang – von Ansicht zu Ansicht
------------------------------------------------------------ */
.rundgang {
  position: fixed; right: calc(var(--rand) * .5); top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  display: grid; gap: .1rem;
  padding: 0; margin: 0; list-style: none;
}
.rundgang__punkt {
  display: flex; align-items: center; justify-content: flex-end; gap: .8rem;
  padding: .48rem 0;
  color: rgba(201, 162, 78, .62);          /* Ticket #43: gold statt stumpfem Grau */
  font-size: var(--t-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: color .4s var(--weich);
}
.rundgang__punkt .wort {
  opacity: 0; transform: translateX(6px);
  transition: opacity .4s var(--weich), transform .4s var(--weich), text-shadow .4s;
  white-space: nowrap;
}
.rundgang__punkt .strich {
  width: 22px; height: 1px; background: currentColor;
  box-shadow: 0 0 5px rgba(201, 162, 78, .35);
  transition: width .45s var(--tief), background .4s, box-shadow .4s;
  flex: none;
}
/* Beschriftung erscheint nur beim Ansteuern – sonst überdeckt sie den Fließtext */
.rundgang:hover .rundgang__punkt .wort,
.rundgang:focus-within .rundgang__punkt .wort {
  opacity: .75; transform: none;
  text-shadow: 0 0 14px rgba(235, 212, 155, .5);
}
.rundgang__punkt:hover { color: var(--gold-hell); }
.rundgang__punkt:hover .strich { box-shadow: 0 0 12px rgba(235, 212, 155, .8); }
.rundgang__punkt[aria-current="true"] { color: var(--gold-hell); }
.rundgang__punkt[aria-current="true"] .strich {
  width: 42px; height: 2px;
  box-shadow: 0 0 10px rgba(235, 212, 155, .75);
}
.rundgang:hover .rundgang__punkt[aria-current="true"] .wort,
.rundgang:focus-within .rundgang__punkt[aria-current="true"] .wort {
  opacity: 1; text-shadow: 0 0 16px rgba(235, 212, 155, .85);
}

/* Ticket #43: die Striche leuchten der Reihe nach kurz auf – ein ruhiger Wink,
   dass hier ein Menü liegt. Läuft nur im Leerlauf: sobald die Maus da ist,
   hört das Blinken auf und die Namen übernehmen. */
@keyframes rundgangWelle {
  0%, 58%, 100% { box-shadow: 0 0 5px rgba(201, 162, 78, .35);  background: rgba(201, 162, 78, .62); }
  66%           { box-shadow: 0 0 13px rgba(235, 212, 155, .9); background: var(--gold-hell); }
}
@keyframes rundgangHerz {
  0%, 100% { box-shadow: 0 0 8px  rgba(235, 212, 155, .6); }
  50%      { box-shadow: 0 0 15px rgba(235, 212, 155, .95); }
}
.rundgang__punkt:not([aria-current="true"]) .strich {
  animation: rundgangWelle 7s var(--weich) infinite;
  animation-delay: calc(var(--i, 0) * .11s);
}
.rundgang__punkt[aria-current="true"] .strich {
  animation: rundgangHerz 3.2s ease-in-out infinite;
}
.rundgang:hover .strich,
.rundgang:focus-within .strich { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .rundgang .strich { animation: none !important; }
}
/* Hintergrund beim Aufklappen, damit die Namen immer lesbar sind */
.rundgang::before {
  content: "";
  position: absolute; inset: -1rem -1rem -1rem -1.5rem;
  background: linear-gradient(90deg, transparent, rgba(10, 9, 8, .82) 38%);
  opacity: 0; transition: opacity .4s var(--weich);
  pointer-events: none;
}
.rundgang:hover::before, .rundgang:focus-within::before { opacity: 1; }

@media (max-width: 1180px) { .rundgang { display: none; } }

/* ------------------------------------------------------------
   5h · Vorher / Nachher – zum Ziehen
------------------------------------------------------------ */
.vgl {
  --schnitt: 50%;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--linie);
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
}
.vgl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Das obere Bild (Vorher) steht links bis zum Regler */
.vgl__oben { clip-path: inset(0 calc(100% - var(--schnitt)) 0 0); }

.vgl__regler {
  position: absolute; top: 0; bottom: 0; left: var(--schnitt);
  width: 2px; margin-left: -1px;
  background: linear-gradient(to bottom, transparent, var(--gold) 12%, var(--gold-hell) 50%, var(--gold) 88%, transparent);
  cursor: ew-resize;
}
.vgl__griff {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: rgba(10, 9, 8, .72);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  color: var(--gold-hell);
  font-size: .8rem; letter-spacing: .05em;
  box-shadow: 0 0 30px rgba(201, 162, 78, .3);
}
.vgl__marke {
  position: absolute; top: 1rem;
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase;
  background: rgba(10, 9, 8, .7);
  border: 1px solid var(--linie);
  padding: .35rem .7rem;
  pointer-events: none;
}
.vgl__marke--links  { left: 1rem;  color: var(--leise); }
.vgl__marke--rechts { right: 1rem; color: var(--gold-hell); }

.ki-hinweis {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1rem;
  font-size: var(--t-label); letter-spacing: .1em;
  color: var(--leise);
}
.ki-hinweis::before { content: "◆"; color: var(--gold); font-size: .6em; }

/* ------------------------------------------------------------
   5i · Region
------------------------------------------------------------ */
.region {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
}
.region__feld {
  background: var(--nacht);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  transition: background .5s var(--weich);
}
.region__feld:hover { background: var(--nacht-3); }
.region__name { font-family: var(--display); font-size: 1.02rem; letter-spacing: .05em; margin-bottom: .5rem; }
.region__orte { font-size: var(--t-klein); color: var(--leise); line-height: 1.7; }

/* ------------------------------------------------------------
   6 · Laufband der Region
------------------------------------------------------------ */
.laufband {
  border-bottom: 1px solid var(--linie);
  padding-block: 1.1rem;
  overflow: hidden;
  background: var(--nacht-2);
}
.laufband__spur {
  display: flex; gap: 3.5rem;
  width: max-content;
  animation: schieben 46s linear infinite;
}
.laufband:hover .laufband__spur { animation-play-state: paused; }
@keyframes schieben { to { transform: translateX(-50%); } }
.laufband__ort {
  display: inline-flex; align-items: center; gap: 3.5rem;
  font-size: var(--t-label);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--leise);
  white-space: nowrap;
}
.laufband__ort::after {
  content: "◆";
  font-size: .55em;
  color: var(--gold);
  letter-spacing: 0;
}

/* ------------------------------------------------------------
   7 · Abschnitte
------------------------------------------------------------ */
.block { padding-block: var(--luft); position: relative; }
.block--dunkel { background: var(--nacht-2); }
.block--rand   { border-top: 1px solid var(--linie); }

.block__kopf { margin-bottom: clamp(2.8rem, 5vw, 4.5rem); }
.block__titel { font-size: var(--t-gross); margin-block: 1.1rem .9rem; max-width: 19ch; }

/* Zwei Spalten, bewusst ungleich (Editorial statt 50/50) */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.duo--kippen { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }

/* Bild mit Gold-Versatzrahmen – ruhig, aber nicht flach */
.rahmen { position: relative; }
.rahmen img { position: relative; z-index: 1; filter: saturate(.8) contrast(1.04); }
.rahmen::before {
  content: "";
  position: absolute;
  inset: clamp(.9rem, 2vw, 1.6rem) calc(-1 * clamp(.9rem, 2vw, 1.6rem)) calc(-1 * clamp(.9rem, 2vw, 1.6rem)) clamp(.9rem, 2vw, 1.6rem);
  border: 1px solid var(--linie);
  z-index: 0;
}

/* Zahlen ------------------------------------------------------ */
.zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(1.6rem, 3vw, 3rem);
  margin-top: clamp(2.2rem, 4vw, 3.4rem);
  padding-top: clamp(1.8rem, 3vw, 2.6rem);
  border-top: 1px solid var(--linie);
}
.zahl__wert {
  font-family: var(--display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.1rem, 3.6vw, 3.1rem);
  color: var(--gold-hell);
  line-height: 1;
}
.zahl__was {
  font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
  color: var(--leise); margin-top: .55rem;
}

/* ------------------------------------------------------------
   8 · Objekte
------------------------------------------------------------ */
.objekte {
  display: flex;
  gap: clamp(1.2rem, 2.2vw, 2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1.6rem;
  margin-inline: calc(-1 * var(--rand));
  padding-inline: var(--rand);
  scrollbar-width: thin;
  scrollbar-color: var(--gold-tief) transparent;
}
.objekte::-webkit-scrollbar { height: 3px; }
.objekte::-webkit-scrollbar-track { background: var(--linie-zart); }
.objekte::-webkit-scrollbar-thumb { background: var(--gold-tief); }

.objekt {
  flex: 0 0 clamp(268px, 30vw, 380px);
  scroll-snap-align: start;
  border: 1px solid var(--linie);
  background: var(--nacht);
  display: flex; flex-direction: column;
  transition: border-color .5s var(--weich), transform .5s var(--weich);
}
.objekt:hover { border-color: var(--gold); transform: translateY(-5px); }

.objekt__oben {
  padding: 1.5rem 1.5rem 1.1rem;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--linie-zart);
}
.objekt__nr {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.3rem; line-height: .85;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold-tief);
}
.objekt__marke {
  font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); text-align: right;
}
.objekt__mitte { padding: 1.5rem; flex: 1; }
.objekt__ort { font-family: var(--display); font-size: 1.25rem; letter-spacing: .05em; margin-bottom: .3rem; }
.objekt__land { font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; color: var(--leise); }
.objekt__fakten {
  display: flex; flex-wrap: wrap; gap: 1.3rem;
  margin-top: 1.4rem; padding-top: 1.1rem;
  border-top: 1px solid var(--linie-zart);
  font-size: var(--t-klein); color: var(--leise);
}
.objekt__fakten b { display: block; color: var(--bein); font-weight: 500; font-size: 1rem; }
.objekt__unten {
  padding: 1.15rem 1.5rem;
  border-top: 1px solid var(--linie-zart);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.objekt__preis { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.35rem; color: var(--gold-hell); }
.objekt__zusatz { font-size: var(--t-label); color: var(--leise); letter-spacing: .1em; }

.wisch-hinweis {
  display: flex; align-items: center; gap: .7rem;
  font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
  color: var(--leise); margin-top: .4rem;
}

/* ------------------------------------------------------------
   9 · Weg (echte Reihenfolge → Nummern sind hier berechtigt)
------------------------------------------------------------ */
.weg { display: grid; gap: 0; margin-top: 1rem; }
.schritt {
  display: grid;
  grid-template-columns: clamp(3.5rem, 7vw, 6.5rem) minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.2rem, 3vw, 3rem);
  align-items: start;
  padding-block: clamp(1.8rem, 3.4vw, 2.8rem);
  border-top: 1px solid var(--linie);
  transition: background .5s var(--weich);
}
.weg .schritt:last-child { border-bottom: 1px solid var(--linie); }
.schritt:hover { background: rgba(201, 162, 78, .035); }
.schritt__nr {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  color: transparent;
  -webkit-text-stroke: 1px var(--gold);
  line-height: 1;
  transition: color .5s var(--weich);
}
.schritt:hover .schritt__nr { color: var(--gold); }
.schritt__titel { font-family: var(--display); font-size: var(--t-mittel); }
.schritt__text { color: var(--leise); font-size: var(--t-klein); line-height: 1.8; }

/* ------------------------------------------------------------
   10 · Leistungen – Liste mit Bildvorschau am Zeiger
------------------------------------------------------------ */
.liste { border-top: 1px solid var(--linie); }
.liste__punkt {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between; gap: 2rem;
  padding-block: clamp(1.25rem, 2.6vw, 2rem);
  border-bottom: 1px solid var(--linie);
  transition: padding-left .55s var(--tief), color .4s;
}
.liste__punkt:hover { padding-left: clamp(.8rem, 2vw, 2rem); }
.liste__name {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(1.05rem, 2.1vw, 1.6rem);
  transition: color .4s var(--weich);
}
.liste__punkt:hover .liste__name { color: var(--gold-hell); }
.liste__hinweis {
  font-size: var(--t-klein); color: var(--leise);
  max-width: 34ch; text-align: right; flex: none;
}
.liste__partner {
  display: inline-block;
  font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--linie);
  padding: .18rem .55rem; margin-left: .8rem; vertical-align: middle;
}

.vorschau {
  position: fixed; top: 0; left: 0; z-index: 40;
  width: 260px; height: 320px;
  pointer-events: none;
  opacity: 0; transform: translate(-50%, -50%) scale(.94);
  transition: opacity .4s var(--weich), transform .4s var(--weich);
  border: 1px solid var(--linie);
  overflow: hidden;
}
.vorschau.an { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.vorschau img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); }

/* ------------------------------------------------------------
   11 · Team
------------------------------------------------------------ */
.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem);
}
.kopf-karte { text-align: center; }
.kopf-karte__bild {
  position: relative;
  width: 100%; aspect-ratio: 1;
  clip-path: circle(48%);
  overflow: hidden;
  margin-bottom: 1.25rem;
  transition: transform .6s var(--weich);
}
.kopf-karte__bild img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.55) contrast(1.05);
  transition: filter .6s var(--weich), transform .6s var(--weich);
}
.kopf-karte:hover .kopf-karte__bild img { filter: grayscale(0) contrast(1); transform: scale(1.05); }
.kopf-karte__name { font-family: var(--display); font-size: 1.02rem; letter-spacing: .05em; }
.kopf-karte__rolle {
  font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin-top: .45rem;
}
.kopf-karte__sprachen {
  font-size: var(--t-label); color: var(--leise); margin-top: .55rem; letter-spacing: .1em;
}

/* ------------------------------------------------------------
   12 · Stimmen
------------------------------------------------------------ */
.stimme { max-width: 46ch; }
.stimme__text {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.2rem, 2.2vw, 1.75rem);
  line-height: 1.5;
  font-style: italic;
  letter-spacing: .005em;
}
.stimme__text::before { content: "“"; color: var(--gold); margin-right: .1em; }
.stimme__text::after  { content: "”"; color: var(--gold); }
.stimme__wer {
  margin-top: 1.6rem;
  font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
  color: var(--leise);
}
.stimme__wer b { color: var(--gold); font-weight: 600; }

/* Quellenangabe über den Kundenstimmen (Google-Gesamtnote + Link aufs Profil) */
.stimmen-quelle {
  margin: 0 0 2.6rem;
  font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
  color: var(--leise);
}
.stimmen-quelle b { color: var(--gold); font-weight: 600; }
.stimmen-quelle a {
  color: var(--gold); text-decoration: underline; text-underline-offset: .22em;
}

.stimmen-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(2.2rem, 5vw, 4.5rem);
}

/* ------------------------------------------------------------
   13 · Abschluss / Kontakt
------------------------------------------------------------ */
.schluss { position: relative; overflow: hidden; }
.schluss__wappen {
  position: absolute; right: -8%; top: 50%;
  transform: translateY(-50%);
  width: min(46vw, 560px);
  opacity: .05;
  pointer-events: none;
  z-index: 0;
}
.schluss > .huelle { position: relative; z-index: 1; }

.kontakt-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
}
.kontakt-feld {
  background: var(--nacht);
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  transition: background .5s var(--weich);
}
.kontakt-feld:hover { background: var(--nacht-3); }
.kontakt-feld__was {
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .85rem;
}
.kontakt-feld__wert { font-size: 1.02rem; line-height: 1.65; }
.kontakt-feld a:hover { color: var(--gold-hell); }

/* ------------------------------------------------------------
   14 · Fußzeile
------------------------------------------------------------ */
.fuss {
  border-top: 1px solid var(--linie);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  background: var(--nacht);
}
.fuss__oben {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.4rem, 4vw, 3.2rem);
  border-bottom: 1px solid var(--linie);
}
.fuss__logo img { height: 62px; width: auto; margin-bottom: 1.3rem; }
.fuss__spalte h3 {
  font-family: var(--text);
  font-size: var(--t-label); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.1rem;
}
.fuss__spalte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.fuss__spalte a { font-size: var(--t-klein); color: var(--leise); transition: color .3s; }
.fuss__spalte a:hover { color: var(--bein); }

.fuss__unten {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: 1.8rem;
  font-size: var(--t-label); color: var(--leise); letter-spacing: .06em;
}
.fuss__recht { display: flex; flex-wrap: wrap; gap: 1.4rem; }

/* ------------------------------------------------------------
   14b · Die Lichtnaht — Abschnitte gehen ineinander über
   Die Fuge zwischen zwei Abschnitten ist ein eigenes Element:
   eine Goldlinie zeichnet sich, ein Lichtimpuls in den sechs
   Flaggenfarben zieht einmal hindurch. Flaggen als Licht.
------------------------------------------------------------ */
main > section { position: relative; }

.naht {
  position: absolute; top: 0; left: 0; right: 0;
  height: 0;
  z-index: 5;
  pointer-events: none;
}
.naht__linie {
  position: absolute; top: -1px; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--gold-tief) 18%,
    var(--gold) 50%,
    var(--gold-tief) 82%,
    transparent);
  transform: scaleX(0);
  transition: transform 1.3s var(--tief);
}
/* Der Flaggen-Impuls: ein schmales, weiches Lichtband,
   das beim Aufschließen einmal über die Naht zieht */
.naht__licht {
  position: absolute; top: -2px; left: 8%; right: 8%;
  height: 3px;
  overflow: hidden;
  opacity: 0;
}
/* Der Impuls trägt die Signatur: Elektroblau · Gold · warmes Rot */
.naht__licht::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  left: -30%; width: 26%;
  background: linear-gradient(90deg,
    transparent,
    rgba(63, 178, 255, .65),
    rgba(255, 217, 138, .95),
    rgba(255, 95, 82, .55),
    rgba(63, 178, 255, .5),
    transparent);
  filter: blur(2px);
  border-radius: 3px;
}
.naht.an .naht__linie { transform: scaleX(1); }
.naht.an .naht__licht { animation: naht-da .2s linear forwards; }
.naht.an .naht__licht::after { animation: naht-zieht 1.7s var(--weich) .25s forwards; }
@keyframes naht-da { to { opacity: 1; } }
@keyframes naht-zieht {
  0%   { left: -30%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 104%; opacity: 0; }
}

/* Rauten-Schlussstein in der Mitte der Naht */
.naht__stein {
  position: absolute; top: -3.5px; left: 50%;
  width: 6px; height: 6px;
  margin-left: -3px;
  background: var(--gold);
  transform: rotate(45deg) scale(0);
  transition: transform .6s var(--weich) 1s;
  box-shadow: 0 0 12px rgba(201, 162, 78, .8);
}
.naht.an .naht__stein { transform: rotate(45deg) scale(1); }

/* ------------------------------------------------------------
   14c · Tiefenblende — der weichende Abschnitt tritt zurück
   Nur transform + opacity (Compositor), gesetzt per JS-Variable.
------------------------------------------------------------ */
.blendet {
  transform: scale(calc(1 - var(--weiche, 0) * .035))
             translateY(calc(var(--weiche, 0) * -1.6rem));
  opacity: calc(1 - var(--weiche, 0) * .5);
  transform-origin: 50% 15%;
}

/* ------------------------------------------------------------
   14d · Schnittblende beim Kapitelsprung
------------------------------------------------------------ */
.schnitt {
  position: fixed; inset: 0; z-index: 260;
  pointer-events: none;
  background:
    linear-gradient(to bottom, transparent 30%, rgba(201, 162, 78, .07) 50%, transparent 70%),
    var(--nacht);
  opacity: 0;
}
.schnitt.zu { animation: schnitt-blende .85s var(--weich); }
@keyframes schnitt-blende {
  0%   { opacity: 0; }
  38%  { opacity: .92; }
  100% { opacity: 0; }
}

/* ------------------------------------------------------------
   14e · Jede Sprache trägt ihre Flagge — als Lichtkante
------------------------------------------------------------ */
.sprachen__knopf { position: relative; }
.sprachen__knopf::after {
  content: "";
  position: absolute; left: 10%; right: 10%; bottom: -1px;
  height: 2px;
  background: var(--fahne, var(--gold));
  transform: scaleX(0);
  transition: transform .45s var(--tief);
}
.sprachen__knopf:hover::after,
.sprachen__knopf[aria-pressed="true"]::after { transform: scaleX(1); }
.sprachen__knopf[data-i="0"] { --fahne: linear-gradient(90deg, #262626, #DD0000, #FFCE00); }
.sprachen__knopf[data-i="1"] { --fahne: linear-gradient(90deg, #ED2939, #F5F5F5, #00A1DE); }
.sprachen__knopf[data-i="2"] { --fahne: linear-gradient(90deg, #002395, #F5F5F5, #ED2939); }
.sprachen__knopf[data-i="3"] { --fahne: linear-gradient(90deg, #012169, #F5F5F5, #C8102E); }
.sprachen__knopf[data-i="4"] { --fahne: linear-gradient(90deg, #F5F5F5, #DC143C); }
.sprachen__knopf[data-i="5"] { --fahne: linear-gradient(90deg, #F5F5F5, #0039A6, #D52B1E); }

/* Der Strich unterm Wort übernimmt die Flagge der gewählten Sprache (per JS) */
.wechsel__strich { transition: transform .55s var(--tief), background .6s var(--weich); }

/* ------------------------------------------------------------
   15 · Auftritt beim Scrollen
   Licht fällt auf den Inhalt: Blende statt Standard-Einblenden
------------------------------------------------------------ */
[data-auftritt] {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translateY(14px);
  transition:
    opacity .95s var(--weich),
    clip-path 1.15s var(--tief),
    transform .95s var(--weich);
  transition-delay: var(--verzug, 0ms);
}
[data-auftritt].da {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: none;
}

/* ------------------------------------------------------------
   16 · Schmale Schirme
------------------------------------------------------------ */
@media (max-width: 1080px) {
  .nav, .kopf__tel { display: none; }
  .menue-knopf { display: block; }

  .nav--offen {
    display: flex; flex-direction: column;
    position: fixed; inset: 0;
    background: var(--nacht);
    padding: 7rem var(--rand) 3rem;
    gap: 0;
    z-index: 90;
    overflow-y: auto;
  }
  .nav--offen a {
    font-family: var(--display);
    font-size: 2rem;
    padding-block: 1.15rem;
    border-bottom: 1px solid var(--linie);
    width: 100%;
  }
  .nav--offen a::after { display: none; }

  /* Knopf und Logo MÜSSEN über der Menü-Ebene liegen. Beide sind
     Geschwister der Navigation innerhalb von `.kopf`; ohne eigene Ebene
     malt die `z-index: 90` der offenen Navigation über sie hinweg — der
     Knopf war dann nicht mehr zu treffen und das Menü nicht zu schliessen. */
  .menue-knopf,
  .kopf__logo {
    position: relative;
    z-index: 95;
  }
  /* Bei offenem Menü ist der Schriftzug der einzige Anker auf dem Schirm. */
  body.menue-offen .kopf__logo { opacity: 1; }
}

/* Der Schriftzug glüht — ruhig, warm, ohne zu blinken. Er ist die Marke,
   nicht ein Hinweis. */
.kopf__logo .kopf__wort b {
  text-shadow: 0 0 18px rgba(235, 212, 155, .28);
  transition: text-shadow .6s var(--weich);
}
.kopf__logo:hover .kopf__wort b,
body.menue-offen .kopf__logo .kopf__wort b {
  text-shadow: 0 0 26px rgba(235, 212, 155, .55), 0 0 6px rgba(235, 212, 155, .3);
}

@media (max-width: 860px) {
  .duo, .duo--kippen { grid-template-columns: 1fr; }
  .beleg { grid-template-columns: repeat(2, 1fr); }
  .schritt { grid-template-columns: 2.6rem 1fr; }
  .schritt__text { grid-column: 2; }
  .liste__punkt { flex-direction: column; gap: .6rem; align-items: flex-start; }
  .liste__hinweis { text-align: left; max-width: none; }
  .vorschau { display: none; }
  .buehne__titel { max-width: 100%; }
  .schluss__wappen { display: none; }
  .fuss__oben { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .beleg { grid-template-columns: 1fr; }
  .beleg__zelle { flex-direction: row; align-items: baseline; gap: .9rem; }
  .fuss__oben { grid-template-columns: 1fr; }
  .buehne__aktionen .knopf { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------
   17 · Ruhe, wenn gewünscht
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-auftritt] { opacity: 1; clip-path: none; transform: none; }
  .buehne__bild img { animation: none; transform: scale(1.04); }
  .laufband__spur { animation: none; }
  .wechsel__strich { animation: none; transform: scaleX(1); }
}

/* Druck */
@media print {
  .kopf, .laufband, .vorschau, .buehne__bild { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --- Nachzügler Schleier-System --- */
.film video { position: absolute; inset: 0; }
.lichtband { z-index: 0; }
.buehne .lichtband { z-index: 1; }          /* über dem Film, unter dem Inhalt */
.ouv__mitte { position: relative; z-index: 2; }
.ouvertuere .lichtband { z-index: 1; }

/* ------------------------------------------------------------
   18 · Unterseiten
------------------------------------------------------------ */
.seite {
  position: relative;
  padding-top: clamp(9rem, 16vh, 12rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}
.seite__titel { font-size: var(--t-riesig); max-width: 16ch; margin-block: 1.2rem .4rem; }
.seite .fliess { margin-top: 1.2rem; }

/* Objekt-Raster (Karten wie auf der Startseite, aber im Gitter) */
.objekt-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.2rem, 2vw, 1.8rem);
}
.objekt-raster .objekt { flex: none; }

/* Portal-Verweise */
.portale { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* Tippgeber / Hinweiskarten */
.karte {
  border: 1px solid var(--linie);
  background: var(--nacht-2);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
.karte--gold { border-color: var(--gold); box-shadow: 0 0 40px rgba(201, 162, 78, .12); }
.karte h3 { margin-bottom: .8rem; }
.karten-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.2rem, 2.4vw, 2rem);
}

/* Formulare */
.formular { display: grid; gap: 1.1rem; max-width: 46rem; }
.feld { display: grid; gap: .45rem; }
.feld > span {
  font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
}
.feld input, .feld textarea, .feld select {
  font: inherit; color: var(--bein);
  background: var(--nacht-2);
  border: 1px solid var(--linie);
  padding: .95rem 1.1rem;
  border-radius: 0;
  transition: border-color .3s var(--weich);
  width: 100%;
}
.feld input:focus-visible, .feld textarea:focus-visible, .feld select:focus-visible {
  outline: none; border-color: var(--gold);
}
.feld textarea { min-height: 8.5rem; resize: vertical; }
.formular__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 640px) { .formular__reihe { grid-template-columns: 1fr; } }

/* Suchauftrag: das Formular ist lang, deshalb in Gruppen. Ein <fieldset> ist
   hier kein Schmuck — Bildschirmleser sagen die <legend> vor jedem Feld der
   Gruppe an, und aus "Ort" wird damit "Wo? — Ort". */
.formular__gruppe {
  border: 0; padding: 0; margin: 0;
  display: grid; gap: 1.1rem;
  border-top: 1px solid var(--linie, rgba(255,255,255,.12));
  padding-top: 1.4rem;
}
.formular__gruppe:first-of-type { border-top: 0; padding-top: 0; }
.formular__gruppe > legend {
  padding: 0; margin: 0 0 .2rem;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-hell, #d9a626);
}
.wahlfeld { display: grid; gap: .6rem; }
.wahlfeld__titel {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  opacity: .72;
}
.wahlfeld__reihe { display: flex; flex-wrap: wrap; gap: .55rem; }
/* Das ganze Feld ist die Schaltflaeche, nicht nur das Kaestchen — auf dem
   Telefon ist ein 13-Pixel-Kaestchen kein Ziel, sondern ein Geduldsspiel. */
.wahl {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .48rem .85rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linie, rgba(255,255,255,.16));
  font-size: .86rem; line-height: 1;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.wahl input { width: auto; margin: 0; accent-color: var(--gold, #d9a626); }
.wahl:hover { border-color: var(--gold, #d9a626); }
.wahl:has(input:checked) {
  border-color: var(--gold, #d9a626);
  background: color-mix(in srgb, var(--gold, #d9a626) 14%, transparent);
}
/* :has() kennen alle aktuellen Browser; wer es nicht kennt, sieht das
   Kaestchen selbst — die Auswahl bleibt also in jedem Fall erkennbar. */
.wahl:focus-within { outline: 2px solid var(--gold, #d9a626); outline-offset: 2px; }

/* Einwilligung: Fliesstext, kein Etikett. Siehe oben — `.feld > span` ist die
   Versalien-Beschriftung, und `.feld` ist ein Grid, in dem `flex-direction`
   wirkungslos bleibt. Beides muss hier ausdruecklich zurueckgenommen werden. */
.feld--zustimmung {
  display: flex; flex-direction: row; align-items: flex-start; gap: .7rem;
}
.feld--zustimmung > span {
  text-transform: none;
  letter-spacing: normal;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--bein);
  opacity: .82;
}
.feld--zustimmung > span a { color: var(--gold-hell); }
.feld--zustimmung > input[type="checkbox"] {
  flex: none;
  width: 1.15rem; height: 1.15rem;
  margin-top: .25rem;
  accent-color: var(--gold);
}



/* Rechner */
.rechner {
  border: 1px solid var(--linie);
  background: var(--nacht-2);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  max-width: 46rem;
}
.rechner__ergebnis {
  margin-top: 1.4rem; padding-top: 1.4rem;
  border-top: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; gap: 2.4rem;
}
.rechner__wert {
  font-family: var(--display); font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--gold-hell);
}
.rechner__was {
  font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase;
  color: var(--leise); margin-top: .3rem;
}

/* Team-Detailkarten */
.person {
  border: 1px solid var(--linie);
  background: var(--nacht-2);
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  display: grid; gap: .5rem;
}
.person img { width: 128px; aspect-ratio: 1; clip-path: circle(48%); margin-bottom: .8rem; }
.person__rolle { color: var(--gold); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; }
.person__daten { color: var(--leise); font-size: var(--t-klein); line-height: 1.9; }
.person__daten a:hover { color: var(--gold-hell); }

/* Rechtstexte */
.recht h2 { font-size: var(--t-mittel); margin: 2.6rem 0 .9rem; }
.recht h3 { font-size: 1.02rem; margin: 1.8rem 0 .6rem; }
.recht p, .recht li { color: var(--leise); font-size: var(--t-klein); line-height: 1.85; }
.recht ul { padding-left: 1.2rem; }
.recht strong { color: var(--bein); }
.kopf__wort b { font-weight: inherit; white-space: nowrap; }

/* ------------------------------------------------------------
   19 · Runde Formen & 3D-Tiefe
   Keine harten Kästen mehr: Pillen-Knöpfe mit Materialtiefe,
   Karten mit weichen Radien und echtem Licht von oben.
------------------------------------------------------------ */
:root {
  --r-knopf: 999px;
  --r-karte: 18px;
  --r-feld: 12px;
}

/* Knöpfe: Pille, Licht von oben, Sockel unten, Druckpunkt */
.knopf {
  border-radius: var(--r-knopf);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .25));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 -2px 6px rgba(0, 0, 0, .45),
    0 10px 24px rgba(0, 0, 0, .4);
  transition: color .45s var(--weich), border-color .45s var(--weich),
              transform .25s var(--weich), box-shadow .35s var(--weich);
}
.knopf::after { border-radius: var(--r-knopf); }
.knopf:hover, .knopf:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -2px 6px rgba(0, 0, 0, .45),
    0 16px 34px rgba(0, 0, 0, .5),
    0 0 26px rgba(201, 162, 78, .18);
}
.knopf:active { transform: translateY(1px) scale(.995); transition-duration: .08s; }

.knopf--voll {
  background: linear-gradient(180deg, var(--gold-hell) 0%, var(--gold) 48%, #8F6D2A 100%);
  border-color: rgba(255, 244, 214, .55);
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 240, .6),
    inset 0 -3px 8px rgba(90, 60, 10, .5),
    0 12px 26px rgba(0, 0, 0, .5),
    0 0 30px rgba(201, 162, 78, .28);
}
.knopf--voll:hover, .knopf--voll:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 240, .7),
    inset 0 -3px 8px rgba(90, 60, 10, .5),
    0 18px 40px rgba(0, 0, 0, .55),
    0 0 44px rgba(235, 212, 155, .4);
}
.knopf--schlicht {
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.knopf--schlicht:hover { transform: none; box-shadow: none; }

/* Sprachwahl: runde Chips mit Tiefe */
.sprachen__knopf {
  border-radius: 999px;
  padding: .45rem .95rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 4px 12px rgba(0, 0, 0, .35);
  transition: color .35s var(--weich), border-color .35s var(--weich),
              background .35s var(--weich), transform .25s var(--weich);
}
.sprachen__knopf:hover { transform: translateY(-1.5px); }
.sprachen__knopf[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--gold-hell), var(--gold) 60%, #9A7630);
  box-shadow: inset 0 1px 0 rgba(255, 252, 240, .6), 0 6px 16px rgba(0, 0, 0, .45);
}
.sprachen__knopf::after {
  left: 22%; right: 22%; bottom: 3px; border-radius: 2px;
}

/* Karten & Flächen */
.objekt, .karte, .person, .rechner, .stimme, .vgl {
  border-radius: var(--r-karte);
  overflow: hidden;
}
.objekt, .karte, .person, .rechner {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 40%),
    var(--nacht-2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 14px 34px rgba(0, 0, 0, .35);
}
.objekt:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 22px 48px rgba(0, 0, 0, .5),
    0 0 34px rgba(201, 162, 78, .12);
}
.karte--gold {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 14px 34px rgba(0, 0, 0, .4),
    0 0 44px rgba(201, 162, 78, .16);
}

/* Mosaike: außen rund, innen bündig */
.beleg, .kontakt-raster, .region { border-radius: var(--r-karte); overflow: hidden; }

/* Formularfelder */
.feld input, .feld textarea, .feld select {
  border-radius: var(--r-feld);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .3), transparent 30%),
    var(--nacht-2);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35);
}

/* Weiche Radien für Bühnenbilder */
.rahmen img { border-radius: var(--r-karte); }
.rahmen::before { border-radius: var(--r-karte); }
.laufband { border-radius: 0; }
.vgl__marke { border-radius: 999px; }
.liste__partner { border-radius: 999px; padding: .18rem .7rem; }
.ouv__weiter { border-radius: 999px; padding: .6rem 1.3rem; border: 1px solid var(--linie); }

/* ------------------------------------------------------------
   20 · REGIE — Scrollen steuert die Szene
   [data-szene] = hoher Rahmen, .szene__buehne klebt im Bild.
   Der Fortschritt liegt als --p (0..1) auf dem Rahmen.
   Ohne JS oder mit reduzierter Motion gilt --p: 1 = alles sichtbar.
------------------------------------------------------------ */
.szene { position: relative; }
.szene__buehne {
  position: sticky; top: 0;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
}
.szene__buehne .lichtband { z-index: 1; }

.szene--hero   { height: 300vh; }
.szene--credo  { height: 190vh; }
.szene--wandel { height: 240vh; }

/* --- Akt 1: Empfang ------------------------------------------------ */
.szene--hero .szene__buehne { background: var(--nacht); }
.szene--hero .film {
  opacity: clamp(0, (var(--p, 1) - .04) * 2.2, 1);
}
.szene--hero .film video,
.szene--hero .film > img {
  transform: scale(calc(1.16 - clamp(0, var(--p, 1), 1) * .16));
}
.film__schleier--akt {
  background:
    radial-gradient(ellipse 120% 95% at 50% 60%,
      rgba(10, 9, 8, .8) 0%, rgba(10, 9, 8, .48) 44%,
      rgba(10, 9, 8, .12) 74%, transparent 100%),
    linear-gradient(to top, var(--nacht) 2%, transparent 32%),
    linear-gradient(to bottom, rgba(10, 9, 8, .8), transparent 24%);
}

.hero-akt {
  position: relative; z-index: 2;
  text-align: center;
  display: grid; justify-items: center;
  gap: 1.05rem;
}
.wappen-schau--hero {
  width: clamp(130px, 14vw, 200px);
  margin: 0 0 .4rem;
  justify-self: center;
  opacity: clamp(0, (var(--p, 1) - .08) * 3.4, 1);
  transform: translateY(calc((1 - clamp(0, (var(--p, 1) - .08) * 3.4, 1)) * 26px));
}
.hero-akt__wortmarke {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding-left: .14em;      /* Sperrung optisch mittig */
  font-size: clamp(2.4rem, 6.4vw, 5.4rem);
  line-height: 1;
  color: var(--bein);
  text-shadow: 0 6px 40px rgba(0, 0, 0, .65);
  opacity: clamp(0, (var(--p, 1) - .26) * 3.4, 1);
  transform: translateY(calc((1 - clamp(0, (var(--p, 1) - .26) * 3.4, 1)) * 22px));
}
.hero-akt__wortmarke em { font-style: normal; color: var(--casa); }
.hero-akt__satz {
  font-family: var(--text);
  font-weight: 300;
  text-transform: none;
  letter-spacing: .01em;
  font-size: clamp(1.15rem, 2.3vw, 1.95rem);
  line-height: 1.4;
  color: var(--bein);
  opacity: clamp(0, (var(--p, 1) - .4) * 3.4, 1);
  transform: translateY(calc((1 - clamp(0, (var(--p, 1) - .4) * 3.4, 1)) * 20px));
}
.hero-akt .wechsel { font-size: inherit; line-height: inherit; }
.hero-akt .wechsel__wort { color: var(--gold-hell); font-weight: 600; }
.hero-akt__ort {
  font-size: var(--t-label);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--leise);
  opacity: clamp(0, (var(--p, 1) - .5) * 3.6, 1);
}
.hero-akt .sprachen {
  justify-content: center; margin-top: .3rem;
  opacity: clamp(0, (var(--p, 1) - .56) * 3.6, 1);
}
.hero-akt__aktionen {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
  margin-top: .9rem;
  opacity: clamp(0, (var(--p, 1) - .62) * 3.6, 1);
  transform: translateY(calc((1 - clamp(0, (var(--p, 1) - .62) * 3.6, 1)) * 16px));
}

.scroll-wink {
  position: absolute; bottom: 1.5rem; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: grid; justify-items: center; gap: .55rem;
  font-size: var(--t-label);
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--leise);
  opacity: calc(1 - clamp(0, (var(--p, 0) - .68) * 4, 1));
}
.scroll-wink__rad {
  width: 1px; height: 42px;
  background: linear-gradient(var(--gold), transparent);
  position: relative;
}
.scroll-wink__rad::after {
  content: "";
  position: absolute; top: 0; left: -2px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-hell);
  box-shadow: 0 0 8px rgba(235, 212, 155, .9);
  animation: wink-fallen 2.3s var(--weich) infinite;
}
@keyframes wink-fallen {
  0% { transform: translateY(0); opacity: 1; }
  75% { transform: translateY(36px); opacity: 0; }
  100% { transform: translateY(36px); opacity: 0; }
}

.beleg-streifen { padding-block: 1.6rem; background: var(--nacht); }

/* --- Akt: Leitsatz — Zeichnung aus der Dunkelheit ----------------- */
.szene--credo .szene__buehne { justify-content: center; }
.szene--credo .credo__satz {
  opacity: clamp(0, (var(--p, 1) - .22) * 2.6, 1);
  letter-spacing: calc(.3em - clamp(0, var(--p, 1), 1) * .26em);
}
.szene--credo .credo__zusatz {
  opacity: clamp(0, (var(--p, 1) - .45) * 3, 1);
}
.szene--credo .zier {
  opacity: clamp(0, (var(--p, 1) - .12) * 3, 1);
}

/* --- Akt: Verwandlung — der Scroll führt den Regler ---------------- */
.szene--wandel .szene__buehne { justify-content: center; }
.szene--wandel .vgl {
  width: min(100%, calc(58vh * 16 / 9));
  margin-inline: auto;
}
.szene--wandel .block__kopf { margin-bottom: 1.8rem; }

/* --- Motion-Stufen -------------------------------------------------- */
html[data-motion="leicht"] .szene,
html[data-motion="aus"] .szene { height: auto; }
html[data-motion="leicht"] .szene__buehne,
html[data-motion="aus"] .szene__buehne { position: relative; padding-block: 5rem; }
html[data-motion="leicht"] .scroll-wink,
html[data-motion="aus"] .scroll-wink { display: none; }
html[data-motion="aus"] .scroll-wink__rad::after { animation: none; }

/* ------------------------------------------------------------
   21 · Zeiger — Goldpunkt mit Kontextwort
------------------------------------------------------------ */
html.hat-zeiger, html.hat-zeiger body, html.hat-zeiger a,
html.hat-zeiger button, html.hat-zeiger .knopf { cursor: none; }
html.hat-zeiger input, html.hat-zeiger textarea, html.hat-zeiger select { cursor: auto; }

.zeiger {
  position: fixed; top: 0; left: 0;
  width: 10px; height: 10px;
  z-index: 400;
  pointer-events: none;
}
.zeiger::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--gold-hell);
  box-shadow: 0 0 14px rgba(235, 212, 155, .85);
  transition: transform .35s var(--weich), opacity .35s var(--weich), background .35s;
}
.zeiger--gross::before { transform: scale(2.4); opacity: .55; }
.zeiger--wort::before { transform: scale(8); opacity: .1; background: var(--gold); }
.zeiger__wort {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: .58rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-hell);
  text-shadow: 0 0 12px rgba(10, 9, 8, .9);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s var(--weich);
}
.zeiger--wort .zeiger__wort { opacity: 1; }

[data-magnet] { transition: transform .4s var(--weich); }

/* Feinschliff Akt 1 */
.hero-akt .wechsel__wort, .hero-akt .wechsel__mass { font-weight: 600; }
.hero-akt .wechsel { margin-inline: .12em; }
.zeiger { opacity: 0; transition: opacity .3s var(--weich); }
.zeiger.da { opacity: 1; }

/* ------------------------------------------------------------
   22 · Strahl-Video statt Canvas-Band + weiche Eröffnung
------------------------------------------------------------ */
.strahl-hg {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Der Strahl trägt den schwarzen Raum und weicht dem Film */
  opacity: calc(1 - clamp(0, (var(--p, 0) - .05) * 2, 1));
}
.strahl-hg img, .strahl-hg video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.strahl-hg video { z-index: 1; }
html[data-motion="leicht"] .strahl-hg video,
html[data-motion="aus"] .strahl-hg video { display: none; }
/* Auf Geräten ohne Regie liegt der Film sofort darüber – Strahl aus */
html[data-motion="leicht"] .strahl-hg,
html[data-motion="aus"] .strahl-hg { opacity: 0; }

/* Eröffnung: erst Licht, dann Kopfzeile, dann der Hinweis.
   Nur mit Skript aktiv – ohne JS ist alles sofort sichtbar. */
@media (scripting: enabled) {
  .kopf { opacity: 0; transform: translateY(-12px); }
  .strahl-hg img, .strahl-hg video { opacity: 0; }
  .scroll-wink { visibility: hidden; }
}
body.geladen .kopf {
  opacity: 1; transform: none;
  transition:
    opacity 1.3s var(--weich) .5s, transform 1.3s var(--weich) .5s,
    background .5s var(--weich), padding .5s var(--weich), border-color .5s;
}
body.geladen .strahl-hg img, body.geladen .strahl-hg video {
  opacity: 1;
  transition: opacity 2.6s var(--weich) .15s;
}
body.geladen .scroll-wink {
  visibility: visible;
  animation: wink-auf 1.4s var(--weich) 1.7s both;
}
@keyframes wink-auf { from { opacity: 0; transform: translateX(-50%) translateY(8px); } }

/* ------------------------------------------------------------
   23 · Lesbarkeit — jede Schrift klar, nichts liegt übereinander
------------------------------------------------------------ */
body { font-weight: 400; }
.hero-akt__satz { font-weight: 400; }
.hero-akt__satz, .hero-akt__ort {
  text-shadow: 0 2px 18px rgba(10, 9, 8, .85), 0 0 42px rgba(10, 9, 8, .6);
}
.fliess { color: #9A937F; }              /* eine Spur heller als vorher */
.schritt__text { color: #9A937F; }
.stimme__text { font-weight: 400; }

/* Knöpfe: kompakter im Verhältnis zur Schrift — Pille statt Balken */
.knopf {
  padding: .78rem 1.55rem;
  font-size: .8rem;
  letter-spacing: .09em;
  gap: .65rem;
}
.kopf .knopf { padding: .62rem 1.3rem; font-size: .74rem; }
.hero-akt__aktionen .knopf { padding: .88rem 1.8rem; font-size: .82rem; }

/* ------------------------------------------------------------
   24 · Das Siegel — Wappen, Flaggenband, Schriftzug als Ensemble
   Das Band wächst aus der Münze heraus, sobald das Licht steht.
------------------------------------------------------------ */
.siegel {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .3rem;
}
.siegel__band {
  position: absolute; top: 50%;
  width: clamp(150px, 23vw, 440px);
  pointer-events: none;
  filter: drop-shadow(0 5px 16px rgba(0, 0, 0, .55));
}
.siegel__band img { width: 100%; height: auto; display: block; }
.siegel__band--l {
  right: calc(100% - clamp(6px, .8vw, 12px));
  transform-origin: right center;
  transform: translateY(-50%) scaleX(clamp(0, (var(--p, 1) - .18) * 2.6, 1));
  opacity: clamp(0, (var(--p, 1) - .16) * 3, 1);
}
.siegel__band--r {
  left: calc(100% - clamp(6px, .8vw, 12px));
  transform-origin: left center;
  transform: translateY(-50%) scaleX(clamp(0, (var(--p, 1) - .18) * 2.6, 1));
  opacity: clamp(0, (var(--p, 1) - .16) * 3, 1);
}

/* ------------------------------------------------------------
   25 · Neu-Choreografie Akt 1 — die Marke steht auf Schwarz
   Reihenfolge: Strahl → Siegel & Schriftzug auf schwarzer Bühne
   → erst DANN kommt der Film hinter der stehenden Marke herein.
------------------------------------------------------------ */
/* Der Strahl bleibt lange die Bühne */
.strahl-hg { opacity: calc(1 - clamp(0, (var(--p, 0) - .48) * 3.2, 1)); }

/* Der Film wartet, bis die Marke steht */
.szene--hero .film { opacity: clamp(0, (var(--p, 1) - .42) * 3.4, 1); }

/* Spot hinter dem Ensemble: hält die Marke auch über hellem Film dunkel */
.hero-akt::before {
  content: "";
  position: absolute;
  inset: -10% -24%;
  z-index: -1;
  background: radial-gradient(ellipse 58% 54% at 50% 42%,
    rgba(10, 9, 8, .78) 0%,
    rgba(10, 9, 8, .5) 48%,
    rgba(10, 9, 8, .18) 68%,
    transparent 82%);
  opacity: clamp(0, (var(--p, 1) - .4) * 3, 1);
  pointer-events: none;
}
.hero-akt { position: relative; }

/* Marke früher und satter — auf der schwarzen Bühne */
.wappen-schau--hero {
  opacity: clamp(0, (var(--p, 1) - .1) * 4, 1);
  transform: translateY(calc((1 - clamp(0, (var(--p, 1) - .1) * 4, 1)) * 26px));
}
.wappen-schau--hero .wappen-schau__hof {
  inset: -32%;
  background: radial-gradient(circle,
    rgba(201, 162, 78, .55) 0%,
    rgba(201, 162, 78, .18) 46%,
    transparent 72%);
}
.wappen-schau--hero img {
  filter:
    drop-shadow(0 16px 40px rgba(0, 0, 0, .85))
    drop-shadow(0 0 26px rgba(201, 162, 78, .38));
}
.siegel__band--l, .siegel__band--r {
  filter:
    drop-shadow(0 6px 18px rgba(0, 0, 0, .8))
    drop-shadow(0 0 10px rgba(0, 0, 0, .55));
}
.hero-akt__wortmarke {
  opacity: clamp(0, (var(--p, 1) - .22) * 3.6, 1);
  transform: translateY(calc((1 - clamp(0, (var(--p, 1) - .22) * 3.6, 1)) * 20px));
  text-shadow:
    0 4px 26px rgba(0, 0, 0, .9),
    0 0 60px rgba(0, 0, 0, .65);
}
.hero-akt__satz {
  opacity: clamp(0, (var(--p, 1) - .32) * 3.6, 1);
  transform: translateY(calc((1 - clamp(0, (var(--p, 1) - .32) * 3.6, 1)) * 18px));
}
.hero-akt__ort { opacity: clamp(0, (var(--p, 1) - .4) * 3.8, 1); }
.hero-akt .sprachen { opacity: clamp(0, (var(--p, 1) - .46) * 3.8, 1); }
.hero-akt__aktionen {
  opacity: clamp(0, (var(--p, 1) - .54) * 3.8, 1);
  transform: translateY(calc((1 - clamp(0, (var(--p, 1) - .54) * 3.8, 1)) * 14px));
}

/* ------------------------------------------------------------
   26 · Ohne Strahl: die dunkle, edle Bühne
   Tiefes Schwarz, eine atmende Glut hinter der Marke — sonst nichts.
------------------------------------------------------------ */
.strahl-hg { display: none; }

.szene--hero .szene__buehne::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 46% 40% at 50% 44%,
    rgba(201, 162, 78, .16) 0%,
    rgba(201, 162, 78, .05) 52%,
    transparent 74%);
  animation: hof-atmet 9s ease-in-out infinite alternate;
  opacity: calc(1 - clamp(0, (var(--p, 0) - .34) * 2.6, 1));
  pointer-events: none;
}

/* Straffere, frühere Choreografie — die Marke steht schnell,
   der Film kommt hinter der stehenden Marke */
.szene--hero   { height: 260vh; }
.szene--credo  { height: 170vh; }
.szene--wandel { height: 210vh; }

.szene--hero .film { opacity: clamp(0, (var(--p, 1) - .36) * 3.2, 1); }
.wappen-schau--hero {
  opacity: clamp(0, (var(--p, 1) - .05) * 4.5, 1);
  transform: translateY(calc((1 - clamp(0, (var(--p, 1) - .05) * 4.5, 1)) * 22px));
}
.siegel__band--l, .siegel__band--r {
  transform: translateY(-50%) scaleX(clamp(0, (var(--p, 1) - .1) * 3, 1));
  opacity: clamp(0, (var(--p, 1) - .09) * 3.4, 1);
}
.hero-akt__wortmarke {
  opacity: clamp(0, (var(--p, 1) - .16) * 4, 1);
  transform: translateY(calc((1 - clamp(0, (var(--p, 1) - .16) * 4, 1)) * 18px));
}
.hero-akt__satz {
  opacity: clamp(0, (var(--p, 1) - .24) * 4, 1);
  transform: translateY(calc((1 - clamp(0, (var(--p, 1) - .24) * 4, 1)) * 16px));
}
.hero-akt__ort { opacity: clamp(0, (var(--p, 1) - .3) * 4.2, 1); }
.hero-akt .sprachen { opacity: clamp(0, (var(--p, 1) - .36) * 4.2, 1); }
.hero-akt__aktionen {
  opacity: clamp(0, (var(--p, 1) - .44) * 4.2, 1);
  transform: translateY(calc((1 - clamp(0, (var(--p, 1) - .44) * 4.2, 1)) * 12px));
}
.scroll-wink { opacity: calc(1 - clamp(0, (var(--p, 0) - .55) * 5, 1)); }

/* ------------------------------------------------------------
   27 · Smootheres Erscheinen in JEDEM Abschnitt
   Kein hartes Aufklappen mehr: früher, weicher, nur Licht
   und eine kleine Bewegung.
------------------------------------------------------------ */
[data-auftritt] {
  clip-path: none;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 1.05s var(--weich),
    transform 1.05s var(--weich);
  transition-delay: var(--verzug, 0ms);
}
[data-auftritt].da { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   28 · Das Original-Logo 1:1 — cinematisch inszeniert
------------------------------------------------------------ */
.hero-logo {
  position: relative;
  width: clamp(320px, 42vw, 700px);
  margin-inline: auto;
  perspective: 900px;
  opacity: clamp(0, (var(--p, 1) - .06) * 3.4, 1);
  transform: scale(calc(.94 + clamp(0, (var(--p, 1) - .06) * 3.4, 1) * .06));
}
.hero-logo .wappen-schau__koerper {
  position: relative;
  transform: rotateX(var(--kipp-x, 0deg)) rotateY(var(--kipp-y, 0deg));
  transform-style: preserve-3d;
  transition: transform .9s var(--weich);
}
.hero-logo img {
  width: 100%; height: auto;
  filter:
    drop-shadow(0 22px 60px rgba(0, 0, 0, .85))
    drop-shadow(0 0 34px rgba(201, 162, 78, .22));
  animation: wappen-schwebt 11s ease-in-out infinite alternate;
}
/* Glanz wandert über das Logo selbst — per Maske exakt auf seiner Form */
.hero-logo__glanz {
  position: absolute; inset: 0;
  pointer-events: none;
  /* Die Maske braucht nur die Form, nicht die Auflösung: das Original ist
     3806 px breit und 1,6 MB schwer und wurde hier bei höchstens 700 px
     gebraucht. Der Glanz wanderte damit über eine Datei, die die Seite
     sonst nirgends mehr lädt — gemessen 21.08.2026, allein dieser Verweis
     zog 1,6 MB. Die 960-px-Fassung trägt dieselbe Silhouette. */
  -webkit-mask: url("../img/_v/logo-hell@960.webp") center / contain no-repeat;
  mask: url("../img/_v/logo-hell@960.webp") center / contain no-repeat;
  background: linear-gradient(105deg,
    transparent 42%, rgba(255, 250, 235, .55) 50%, transparent 58%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  animation: logo-glanz 7.5s var(--weich) infinite;
  mix-blend-mode: overlay;
}
@keyframes logo-glanz {
  0%, 55%  { background-position: 130% 0; }
  85%, 100% { background-position: -130% 0; }
}
@media (max-width: 640px) { .hero-logo { width: min(86vw, 420px); } }

/* Auftritt: schneller und mit halbierter Staffelung — smooth, nie träge */
[data-auftritt] {
  transform: translateY(12px);
  transition: opacity .8s var(--weich), transform .8s var(--weich);
  transition-delay: calc(var(--verzug, 0ms) * .6);
}

/* Startseite: Kopfzeilen-Wortmarke wartet, bis der Hero vorbei ist */
body.hat-hero .kopf__wort {
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
  transition: opacity .7s var(--weich), transform .7s var(--weich);
}
body.hat-hero .kopf.marke-an .kopf__wort {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Startseite: die ganze Kopfzeile erscheint erst nach dem Empfang */
body.hat-hero .kopf {
  opacity: 0;
  transform: translateY(-14px);
  visibility: hidden;
  pointer-events: none;
}
body.hat-hero .kopf.kopf--da {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity .8s var(--weich), transform .8s var(--weich),
    background .5s var(--weich), padding .5s var(--weich), border-color .5s;
}

/* ------------------------------------------------------------
   29 · Die Nähte — Übergänge wie Schnitte im Film
   1) Goldfaden: zieht sich über jede Naht, wenn sie ins Bild kommt
   2) Kamera-Tiefe: Bilder gleiten langsamer als der Text
   3) Ausleitung: Abschnitte treten beim Verlassen zurück ins Dunkel
------------------------------------------------------------ */
main > section { position: relative; }
main > section:not([data-szene])::before {
  content: "";
  position: absolute; top: -1px; left: 10%; right: 10%; height: 1px;
  z-index: 3;
  background: linear-gradient(90deg,
    transparent, var(--gold) 22%, var(--gold-hell) 50%, var(--gold) 78%, transparent);
  transform: scaleX(0);
  opacity: 0;
  pointer-events: none;
}
main > section.in-sicht:not([data-szene])::before {
  animation: goldfaden 1.6s var(--tief) forwards;
}
@keyframes goldfaden {
  0%   { transform: scaleX(0); opacity: 0; }
  40%  { opacity: .95; }
  100% { transform: scaleX(1); opacity: .3; }
}

/* Kamera-Tiefe: --par kommt aus dem Scroll, Grundtransform bleibt.
   will-change hebt genau diese drei Bilder auf eine eigene Ebene — sie sind die
   einzigen, die WAEHREND des Scrollens dauernd verschoben werden. Ohne das malt
   der Browser sie in jedem Bild neu (Ticket #61). Bewusst nur diese drei und nicht
   die zwoelf Abschnitte: jede Ebene kostet Grafikspeicher. */
.rahmen img,
.credo__wappen,
.schluss__wappen { will-change: transform; }
.rahmen img { transform: translateY(var(--par, 0px)); }
.credo__wappen { transform: translate(-50%, -50%) translateY(var(--par, 0px)); }
.schluss__wappen { transform: translateY(-50%) translateY(var(--par, 0px)); }

/* Ausleitung: der Inhalt weicht zurück, das Dunkel nimmt ihn auf */
html[data-motion="hoch"] main > section:not([data-szene]) > .huelle,
html[data-motion="mittel"] main > section:not([data-szene]) > .huelle {
  opacity: calc(1 - var(--raus, 0) * .45);
  transform: translateY(calc(var(--raus, 0) * -14px));
}

/* Hintergrund-Filme atmen — kaum sichtbar, aber lebendig */
.film--ruhig video { animation: atem 34s ease-in-out infinite alternate; }

/* ------------------------------------------------------------
   30 · Objektkarten mit echtem Bild
------------------------------------------------------------ */
.objekt__bild {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--nacht-3);
}
.objekt__bild img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.92) contrast(1.03);
  transition: transform 1.1s var(--weich), filter .6s var(--weich);
}
.objekt:hover .objekt__bild img { transform: scale(1.055); filter: saturate(1) contrast(1.05); }
.objekt__bild::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,9,8,.92) 0%, rgba(10,9,8,.25) 34%, transparent 62%);
}
.objekt__fahne {
  position: absolute; top: .85rem; left: .85rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(10, 9, 8, .72);
  border: 1px solid var(--linie);
  backdrop-filter: blur(6px);
  font-size: var(--t-label);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-hell);
}
.objekt__fahne::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-hell); box-shadow: 0 0 8px var(--gold-hell);
}
.objekt__oben { position: relative; z-index: 2; margin-top: -3.1rem; border-bottom: 0; }
.objekt__nr { text-shadow: 0 2px 12px rgba(0,0,0,.9); }

/* Vergleichs-Paar auf der Objektseite */
.objekt-wandel { margin-top: clamp(2.2rem, 4vw, 3.2rem); }
.objekt-wandel .vgl { aspect-ratio: 3 / 2; }
.objekt-kopf {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 1rem;
  margin-bottom: 1.1rem;
}
.objekt-kopf h3 { font-size: var(--t-mittel); }
.objekt-kopf .preis {
  font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--gold-hell); font-size: 1.25rem;
}
.objekt-block { padding-block: clamp(2.6rem, 5vw, 4rem); border-top: 1px solid var(--linie); }
.objekt-block:first-of-type { border-top: 0; }
.objekt-daten {
  display: flex; flex-wrap: wrap; gap: 1.6rem;
  margin-top: 1.2rem;
  font-size: var(--t-klein); color: var(--leise);
}
.objekt-daten b { display: block; color: var(--bein); font-weight: 600; font-size: 1.05rem; }

/* Karten-Fahne unter das eingebackene Logo legen — sie darf es nicht kreuzen */
.objekt__fahne { top: auto; bottom: 3.4rem; }

/* ------------------------------------------------------------
   31 · Der erste Blick trägt die Marke   (Joe 10.08.2026, Ticket #4)

   Vorher lag die Eröffnung komplett im Dunkeln — gemessen bei Scroll 0:
   Kopfzeile visibility:hidden (erst ab 72 % der Hero-Strecke, also nach
   gut einem ganzen Bildschirm Scrollen), Logo/Ortszeile/Schaltflächen
   und Film alle auf Deckkraft 0. Sichtbar war einzig der kleine
   Scroll-Hinweis. Wer die Seite öffnete, sah eine schwarze Fläche ohne
   Navigation und hielt sie für kaputt.

   Die Choreografie bleibt vollständig erhalten — sie beginnt nur nicht
   mehr im Nichts: die Elemente stehen ab dem ersten Bild sichtbar da und
   ziehen beim Scrollen wie gehabt auf volle Kraft an. Der ganze Kniff ist
   der Boden im clamp() (erster Wert statt 0).
------------------------------------------------------------ */

/* Die Navigation muss ab dem ersten Bild erreichbar sein.
   Die kleine Wortmarke IN der Leiste darf weiter warten (marke-an) —
   das bleibt bewusst unberührt, es ist der schöne Teil der Regie. */
body.hat-hero .kopf {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
}

/* Wappen: steht sofort, wächst dann auf volle Kraft */
.hero-logo {
  opacity: clamp(.82, (var(--p, 1) - .06) * 3.4, 1);
  transform: scale(calc(.94 + clamp(.82, (var(--p, 1) - .06) * 3.4, 1) * .06));
}

/* Ortszeile und die beiden Schaltflächen — sie sind der Weg des Besuchers
   in die Seite und dürfen nie erst nach dem Scrollen auftauchen. */
.hero-akt__ort { opacity: clamp(.75, (var(--p, 1) - .3) * 4.2, 1); }
.hero-akt__aktionen {
  opacity: clamp(.9, (var(--p, 1) - .44) * 4.2, 1);
  transform: translateY(calc((1 - clamp(.9, (var(--p, 1) - .44) * 4.2, 1)) * 12px));
}
.hero-akt .sprachen { opacity: clamp(.7, (var(--p, 1) - .36) * 4.2, 1); }

/* Siegel-Bänder ziehen mit dem Wappen mit statt bei Null zu starten */
.siegel__band--l, .siegel__band--r {
  transform: translateY(-50%) scaleX(clamp(.6, (var(--p, 1) - .1) * 3, 1));
  opacity: clamp(.65, (var(--p, 1) - .09) * 3.4, 1);
}

/* ------------------------------------------------------------
   32 · Menschen-Abschnitt   (Joe 10.08.2026, Ticket #18)

   Zwei Befunde: die Überschrift lief aus ihrem Kasten (gemessen
   scrollWidth 445 gegen clientWidth 426 — das lange Wort
   „Kontaktformular." passte nicht), und die Portraits waren mit
   200 x 200 px klein und wurden erst beim Überfahren farbig.
   Jetzt: größere Portraits und der Übergang von blass zu Farbe
   läuft beim Erscheinen, nicht erst bei der Maus.
------------------------------------------------------------ */

/* Sicherheitsnetz gegen Überlauf — gilt für JEDE Überschrift, nicht
   nur für diese eine Breite: lieber trennen als aus dem Kasten laufen. */
.block__titel {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Die Menschen dürfen groß sein — sie sind der Beleg für den Satz darüber */
.team { grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); }

/* Kino-Übergang: blass und leicht herangezoomt, dann ruhig in die Farbe.
   Ausgelöst vom vorhandenen Auftritt-Mechanismus (.da), also genau dann,
   wenn die Karte in den Blick kommt. */
.kopf-karte[data-auftritt] .kopf-karte__bild img {
  filter: grayscale(1) contrast(1.02) brightness(.9);
  transform: scale(1.07);
}
.kopf-karte[data-auftritt].da .kopf-karte__bild img {
  filter: grayscale(0) contrast(1.05);
  transform: none;
  transition:
    filter 1.7s var(--weich) var(--verzug, 0ms),
    transform 1.9s var(--weich) var(--verzug, 0ms);
}
/* Die Maus gibt noch einen letzten Hauch dazu */
.kopf-karte:hover .kopf-karte__bild img {
  filter: grayscale(0) contrast(1.08) saturate(1.06);
  transform: scale(1.04);
  transition: filter .5s var(--weich), transform .5s var(--weich);
}

/* ------------------------------------------------------------
   33 · Der Zeiger ist ein Schlüssel   (Joe 10.08.2026, Ticket #21)

   Der Mechanismus aus Abschnitt 21 bleibt vollständig — Verfolgen,
   Vergrößern über Klickbarem, Kontextwort. Nur das Bild wechselt:
   aus dem Goldpunkt wird ein Schlüssel in gebürstetem Gold.
   Die Spitze zeigt auf den echten Zeigerpunkt, nicht die Mitte.
------------------------------------------------------------ */
.zeiger::before {
  inset: -6px -38px -38px -6px;          /* Bild ragt nach unten rechts weg */
  border-radius: 0;
  background: url("../img/zeiger-schluessel.svg") 0 0 / contain no-repeat;
  box-shadow: none;
  transform-origin: 6px 6px;              /* dreht/skaliert um die Schlüsselspitze */
}
/* Über Klickbarem hebt sich der Schlüssel leicht an */
.zeiger--gross::before { transform: scale(1.18) rotate(-8deg); opacity: 1; }
/* Über beschrifteten Flächen tritt er zurück, damit das Wort trägt */
.zeiger--wort::before  { transform: scale(.82); opacity: .5; background-color: transparent; }

/* Das Kontextwort saß in der Mitte des Punktes — beim Schlüssel
   säße es auf dem Bild. Es rückt daneben und bekommt einen Rücken. */
.zeiger--wort .zeiger__wort {
  transform: translate(14px, 26px);
  padding: .28rem .6rem;
  border-radius: 999px;
  background: rgba(10, 9, 8, .82);
  border: 1px solid rgba(201, 162, 78, .45);
  white-space: nowrap;
}

/* Auf Zeigegeräten ohne feine Maus (Touch) bleibt alles wie gehabt —
   dort wird der Zeiger vom Skript ohnehin nicht gesetzt. */

/* ------------------------------------------------------------
   34 · Angebote, Objektseiten, Lightbox, Vorlesen
        (Joe 10.08.2026, Tickets #19 / #20 / #22)

   Die "Aktuelle Angebote"-Übersicht nutzt die vorhandenen
   .objekt-Karten im .objekt-raster — hier kommt nur dazu, was
   die Objekt-Unterseiten und das Vorlesen wirklich brauchen.
------------------------------------------------------------ */

/* Die ganze Karte ist EIN Link (wie auf der Startseite) */
.objekt-raster .objekt > a { display: flex; flex-direction: column; flex: 1; }

/* Großes Titelbild der Objektseite */
.expose-titel {
  margin: 0;
  border: 1px solid var(--linie);
  background: var(--nacht-3);
  overflow: hidden;
}
.expose-titel img {
  width: 100%;
  max-height: 68vh;
  object-fit: cover;
  filter: saturate(.95) contrast(1.03);
}

/* Bilder-Galerie: Kacheln, Klick öffnet die Lightbox */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: clamp(.6rem, 1.2vw, 1rem);
  margin-top: 2rem;
}
.galerie__bild {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--nacht-3);
  border: 1px solid var(--linie-zart);
  transition: border-color .4s var(--weich);
}
.galerie__bild:hover { border-color: var(--gold); }
.galerie__bild img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.92);
  transition: transform .9s var(--weich), filter .5s var(--weich);
}
.galerie__bild:hover img { transform: scale(1.06); filter: saturate(1); }

/* Daten & Fakten: ruhige Zeilen statt Tabellen-Look */
.daten-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem);
  align-items: start;
}
.datengruppe h3 {
  font-size: var(--t-label);
  letter-spacing: .2em;
  color: var(--gold);
  margin-bottom: .6rem;
}
.datenzeile {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding-block: .55rem;
  border-bottom: 1px solid var(--linie-zart);
  font-size: var(--t-klein);
}
.datenzeile__was { color: var(--leise); }
.datenzeile__wert { text-align: right; color: var(--bein); }

/* Lightbox — eigene, ohne Fremd-Bibliothek */
.lichtkasten {
  position: fixed; inset: 0; z-index: 260;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 9, 8, .95);
  padding: clamp(.8rem, 3vw, 2.5rem);
}
.lichtkasten img {
  max-width: min(94vw, 1400px);
  max-height: 86vh;
  width: auto; height: auto;
  border: 1px solid var(--linie);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.lichtkasten__zu, .lichtkasten__pfeil {
  position: absolute;
  display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: rgba(10, 9, 8, .8);
  color: var(--gold-hell);
  font-size: 1.2rem; line-height: 1;
  transition: border-color .3s var(--weich), color .3s var(--weich);
}
.lichtkasten__zu:hover, .lichtkasten__pfeil:hover { border-color: var(--gold); color: var(--bein); }
.lichtkasten__zu { top: 1rem; right: 1rem; }
.lichtkasten__pfeil--l { left: .9rem; }
.lichtkasten__pfeil--r { right: .9rem; }
.lichtkasten__zeile {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
  font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
  color: var(--leise); white-space: nowrap;
}

/* Vorlesen-Schalter: dezent unten links, gleiche Formensprache wie
   Fahne/Marke. Ohne Klick spielt nie etwas (Autoplay-Regel). */
.vorlesen-schalter {
  position: fixed; left: 1.1rem; bottom: 1.1rem; z-index: 140;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: rgba(10, 9, 8, .82);
  backdrop-filter: blur(6px);
  font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase;
  color: var(--leise);
  transition: color .35s var(--weich), border-color .35s var(--weich);
}
.vorlesen-schalter:hover { color: var(--bein); border-color: var(--gold); }
.vorlesen-schalter[aria-pressed="true"] { color: var(--gold-hell); border-color: var(--gold); }
.vorlesen-schalter__punkt {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--leise);
}
.vorlesen-schalter[aria-pressed="true"] .vorlesen-schalter__punkt {
  background: var(--gold-hell);
  box-shadow: 0 0 8px var(--gold-hell);
}
.vorlesen-schalter.spricht .vorlesen-schalter__punkt {
  animation: vorlesen-puls 1.1s ease-in-out infinite;
}
@keyframes vorlesen-puls {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.7); opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .vorlesen-schalter.spricht .vorlesen-schalter__punkt { animation: none; }
}

/* ------------------------------------------------------------
   35 · Der Film steht vom ersten Moment   (Joe 10.08.2026, Ticket #32)

   Bisher hing die Deckkraft des Hero-Films am Scroll-Fortschritt
   (--p) — beim Laden war hinter der Marke nur Schwarz, das Video
   erschien erst nach gut einem Drittel der Hero-Strecke. Jetzt
   blendet der Film ZEITGESTEUERT ein: kurz nach dem ersten Bild,
   ruhig über gut zweieinhalb Sekunden, hinter der stehenden Marke.
   Der Schutz-Spot hinter dem Ensemble kommt mit — sonst stünde die
   Marke ohne Rücken auf hellem Bewegtbild.
------------------------------------------------------------ */
.szene--hero .film {
  opacity: 1;
  animation: film-eroeffnung 2.6s var(--weich) .45s both;
}
@keyframes film-eroeffnung {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero-akt::before { opacity: 1; }
/* Ohne Bewegung: einfach da, ohne Fade */
html[data-motion="aus"] .szene--hero .film,
html[data-motion="leicht"] .szene--hero .film { animation: none; }

/* ------------------------------------------------------------
   36 · Luft zwischen Kopfzeile und Siegel   (Joe 10.08.2026, Ticket #30)

   Bei flachen Fenstern (Laptop, eingebettetes Modul) saß die
   Oberkante des großen Logos direkt unter dem Menü — gemessen
   ~4 px Abstand bei 662 px Fensterhöhe. Zwei Hebel: die Bühne
   bekommt oben ein Polster in Höhe der fixen Kopfzeile, und das
   Logo wird zusätzlich an der FENSTERHÖHE gedeckelt, damit der
   Stapel (Logo + Ort + Schaltflächen) nie an die Leiste stößt.
------------------------------------------------------------ */
.szene--hero .szene__buehne { padding-top: clamp(4.5rem, 12vh, 7.5rem); }
.hero-logo { width: clamp(300px, min(42vw, 60vh), 700px); }

/* ------------------------------------------------------------
   37 · Buttons & Schriftgrößen — der Profi-Feinschliff
        (Joe 10.08.2026, Ticket #31)

   Ruhigere, präzisere Knöpfe: eine Spur kompakter, gleichmäßige
   Sperrung, feine Kante statt wuchtiger Fläche. Die Label-Schrift
   war mit .705rem unter der Lesbarkeitsgrenze — minimal angehoben.
   Hierarchie: EIN goldener Primär-Knopf pro Bild, der Rest tritt
   als feine Linie zurück.
------------------------------------------------------------ */
:root { --t-label: .74rem; }

.knopf {
  padding: .95rem 1.8rem;
  font-size: .8rem;
  letter-spacing: .14em;
  gap: .7rem;
  /* WAR 2px — und das war der sichtbare Fehler (Joe, 22.08.2026):
     »vorher rechteckig und danach rund, aber das Rechteck wird noch
     angezeigt«. Der Knopf selbst hatte 2px, seine goldene Fuellung
     (`.knopf::after`) aber `var(--r-knopf)` = 999px. Beim Ueberfahren
     schob sich also eine Pille in ein Rechteck — und dessen vier Ecken
     blieben stehen. Zwei Radien fuer EIN Element sind immer ein Fehler;
     jetzt fuehrt beides dieselbe Variable. */
  border-radius: var(--r-knopf);
  white-space: nowrap;   /* ein Knopf bricht NIE um */
}
.knopf--voll { box-shadow: 0 10px 30px rgba(201, 162, 78, .18); }
.hero-akt__aktionen .knopf { padding: .95rem 2rem; font-size: .84rem; }
.kopf .knopf { padding: .64rem 1.35rem; font-size: .76rem; }

/* Ortszeile unter dem Siegel: lesbar statt hauchdünn */
.hero-akt__ort { font-size: .8rem; letter-spacing: .38em; }

/* ------------------------------------------------------------
   38 · Der Torfilm — der Schlüssel öffnet die Tür
        (Joe 10.08.2026, Ticket #30 — AUSSER BETRIEB seit 21.08.2026)

   AUSSER BETRIEB: Joe hat den Torfilm am 21.08.2026 abbestellt. Der
   neue Eingang (Abschnitt 39) ist die einzige Eroeffnung; zwei
   hintereinander waren eine zu viel. Markup und Aufruf sind raus,
   die Regeln bleiben stehen — so wie beim `schleier()` im Skript,
   damit ein Zurueck eine Zeile kostet und keine Rekonstruktion.

   Vollbild-Eröffnung: der Schlüssel dreht sich, die Tür geht auf,
   dann blendet die Ebene weich auf die Seite über (Licht statt
   Schwarzblende: kurz aufhellen, dann auflösen). Einmal je
   Sitzung; jederzeit überspringbar. Das Skript entfernt die Ebene
   sofort, wenn das Video fehlt oder nicht anspielen darf.
------------------------------------------------------------ */
.torfilm {
  position: fixed; inset: 0; z-index: 400;
  background: var(--nacht);
  display: none;                    /* das Skript schaltet sie an */
}
.torfilm.an { display: block; }
.torfilm video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* feiner Rand-Schleier, damit das Bewegtbild edel gefasst wirkt */
.torfilm__schleier {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(10, 9, 8, .55), transparent 18%),
    linear-gradient(to top,    rgba(10, 9, 8, .55), transparent 18%);
  pointer-events: none;
}
.torfilm__weiter {
  position: absolute; right: 1.4rem; bottom: 1.4rem;
  padding: .55rem 1.1rem;
  border: 1px solid rgba(239, 232, 218, .35);
  border-radius: 999px;
  background: rgba(10, 9, 8, .55);
  backdrop-filter: blur(6px);
  color: var(--bein);
  font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity .6s var(--weich), border-color .3s var(--weich);
}
.torfilm.an .torfilm__weiter { opacity: .85; transition-delay: 1.2s; }
.torfilm__weiter:hover { border-color: var(--gold); opacity: 1; }
/* Die Überblendung: erst ein Hauch goldenes Licht, dann löst sich alles auf */
.torfilm.zu {
  animation: torfilm-blende 1.5s var(--weich) both;
  pointer-events: none;
}
.torfilm.zu video { filter: brightness(1.6) saturate(.9); transition: filter 1.5s var(--weich); }
@keyframes torfilm-blende {
  0%   { opacity: 1; }
  28%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ============================================================
   34 · Kopfzeile: nur EIN Logo, keine Kollision, Telefon präsent
        (Joe 10.08.2026, Tickets #62 · #63 · #41)

   #63 „mehrere Logos sichtbar": oben links stand ein kleines Wappen OHNE
   Schriftzug, während im Hero das große Logo MIT Schriftzug steht. Das kleine
   entfällt — die Wortmarke daneben trägt die Marke und bleibt Link zur Startseite.

   #62 „Firmenschriftzug kollidiert mit dem Menü": gemessen. Der Kopf braucht
   Logo 294 + Navigation 445 + rechte Gruppe 333 + Abstände 64 + Innenrand 128
   = ~1264 px. Die Navigation klappte aber erst ab 1080 px in den Hamburger —
   dazwischen (Joes Fenster: 1209 px) fehlten ~66 px, und weil .kopf__wort
   `white-space: nowrap` ohne Schrumpf-Erlaubnis hat, überlappte es das Menü,
   statt sich anzupassen. Der Umbruchpunkt liegt jetzt bei 1200 px.

   #41 „Telefonnummer größer und gut sichtbar mit Klingelanimation": sie war
   14 px, grau und brach zweizeilig um.
   ============================================================ */

/* — #63 · #41: das kleine Wappen entfällt, der Schriftzug bleibt — */
.kopf__logo img { display: none; }
.kopf__logo { gap: 0; }

/* — #41: Telefonnummer als klarer Kontaktweg — */
.kopf__tel {
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  font-weight: 600;
  color: var(--bein);
  white-space: nowrap;              /* nie wieder zweizeilig */
  letter-spacing: .02em;
}
.kopf__tel svg {
  width: 18px; height: 18px;
  transform-origin: 50% 15%;        /* schwingt am Aufhängepunkt, wie ein Hörer */
  animation: kopf-klingeln 3.2s var(--weich) infinite;
}
@keyframes kopf-klingeln {
  0%, 62%, 100% { transform: rotate(0deg); }
  66%  { transform: rotate(-13deg); }
  70%  { transform: rotate(11deg); }
  74%  { transform: rotate(-9deg); }
  78%  { transform: rotate(7deg); }
  82%  { transform: rotate(-4deg); }
  86%  { transform: rotate(0deg); }
}

/* — #62: die Navigation weicht früh in den Hamburger aus — */
@media (max-width: 1200px) {
  .kopf__reihe > .nav:not(.nav--offen) { display: none; }
  .menue-knopf { display: block; }
}

/* Die Telefonnummer bleibt sichtbar, wo die Navigation schon geklappt ist —
   sie ist der wichtigste Kontaktweg und war bisher ab 1080 px mit ausgeblendet.
   Erst auf schmalen Handys weicht sie dem Platz. */
   Der Ausblendpunkt liegt bei 820 px und ist GEMESSEN, nicht geschätzt: darunter
   teilen sich Schriftzug, Nummer, der 192 px breite „Wert ermitteln"-Knopf und der
   Hamburger die Zeile — bei 700 px lief sie um 49 px über den rechten Rand hinaus.
   Bis 820 px ist die Nummer damit sichtbar (vorher verschwand sie schon ab 1080 px). */
@media (max-width: 1080px) { .kopf__tel { display: inline-flex; } }
@media (max-width: 820px)  { .kopf__tel { display: none; } }

/* Sicherheitsnetz: sollte es je wieder eng werden, schrumpft der Schriftzug,
   statt über den Nachbarn zu laufen. Überlappung darf nie der Ausweg sein. */
.kopf__wort { min-width: 0; }
.kopf__wort b, .kopf__wort small { overflow: hidden; text-overflow: ellipsis; }

@media (prefers-reduced-motion: reduce) {
  .kopf__tel svg { animation: none; }
}

/* ============================================================
   35 · Der Schlüssel schließt auf   (Joe 10.08.2026, Ticket #36)

   Der Lichtstreifen hinter dem Mauszeiger ist entfernt (siehe site.js) —
   er zeichnete bei jeder Bewegung ein bildschirmfüllendes Canvas neu.
   Statt Deko bekommt der Zeiger jetzt eine Bedeutung: beim Klick dreht
   der Schlüssel wie in einem Schloss und federt zurück.
   ============================================================ */
.zeiger.sperrt::before {
  animation: zeiger-aufschliessen .6s var(--weich);
}
@keyframes zeiger-aufschliessen {
  0%   { transform: rotate(0deg)   scale(1); }
  30%  { transform: rotate(-14deg) scale(1.06); }   /* ansetzen */
  65%  { transform: rotate(78deg)  scale(1.06); }   /* umdrehen  */
  100% { transform: rotate(0deg)   scale(1); }      /* zurückfedern */
}
@media (prefers-reduced-motion: reduce) {
  .zeiger.sperrt::before { animation: none; }
  /* Der Schlüssel bleibt sichtbar, bewegt sich aber nicht von selbst:
     kein Aufschließen, kein Größerwerden über Klickbarem. */
  .zeiger::before { transition: none; }
  .zeiger { transition: none; }
}


/* ============================================================
   Bilder — nichts ploppt mehr auf
   ------------------------------------------------------------
   Gemessen am 21.08.2026, vor diesem Abschnitt: das Wappen in
   der Kopfzeile war eine PNG-Datei von 1,7 MB, gezeigt bei
   46 px Höhe. Das Logo im Hero: 1,6 MB bei höchstens 700 px.
   Jede Seite zog mehrere Megabyte, nur um zwei Zeichen zu
   zeigen. Man sah es: der Rahmen stand, das Bild kam später.

   Drei Dinge zusammen lösen das:

   1. `bilder.py` legt zu jedem Bild AVIF/WebP-Fassungen in
      mehreren Breiten an, der Veredler schreibt sie als
      <picture> in die Seite. Aus 1,7 MB werden 12 KB.
   2. Jedes Bild trägt ein 24-px-Vorschaubildchen als
      Data-URI (`--vorschau`). Es steht sofort im Kasten —
      ab der ersten Zehntelsekunde ist da nie ein Loch.
   3. Das scharfe Bild löst sich aus dieser Vorschau heraus,
      sobald es dekodiert ist. Nacheinander, nicht alle auf
      einmal: `site.js` staffelt jeden Schwung.
   ============================================================ */

/* Der <picture>-Rahmen ist reine Technik und darf im Layout
   nicht mitreden — sonst rutschen Kacheln und Galerien. */
picture { display: contents; }

/* Bilder tragen jetzt width/height, damit der Kasten steht,
   bevor das Bild da ist. Ohne das hier würden sie sich
   verzerren, sobald `max-width` greift. */
img { height: auto; }

/* Das Vorschaubildchen. Bei Fotos füllt es den Kasten, bei
   Freigestelltem (Wappen, Logo) folgt es der Form. */
img[data-vorschau] {
  background-image: var(--vorschau);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
img[data-vorschau="frei"] { background-size: contain; }

@media (scripting: enabled) {
  /* Der Auftritt: aus der Unschärfe der Vorschau heraus, mit
     einem Hauch Zurückfahren. Kein Aufblitzen, kein Sprung. */
  img[data-bild="auftritt"] {
    filter: blur(18px) saturate(.88);
    transform: scale(1.04);
    transition:
      filter    1.25s var(--weich) var(--bild-verzug, 0ms),
      transform 1.6s  var(--tief)  var(--bild-verzug, 0ms),
      opacity    .9s  var(--weich) var(--bild-verzug, 0ms);
  }
  /* Sicherheitsnetz: solange sich `site.js` nicht gemeldet hat, wird
     jedes Bild nach sechs Sekunden von selbst scharf. Meldet es sich —
     der Normalfall, wenige Millisekunden nach dem Aufbau —, verschwindet
     dieses Netz wieder und der gestaffelte Auftritt bleibt auch für
     Abschnitte erhalten, die der Besuch erst später erreicht. */
  html:not([data-bilder]) img[data-bild="auftritt"] {
    animation: bild-notausgang 1ms linear 6s forwards;
  }
  /* Ohne Vorschaubildchen (freigestellte Logos) gäbe die Unschärfe
     nur einen Schatten — dort blendet das Bild sauber auf. */
  img[data-bild="auftritt"]:not([data-vorschau]) {
    filter: none;
    opacity: 0;
  }
  img[data-bild="auftritt"].bereit {
    filter: none;
    transform: none;
    opacity: 1;
  }
}

/* ------------------------------------------------------------
   DAS VORSCHAUBILDCHEN MUSS WEG, SOBALD DAS BILD DA IST.
   (Joe 22.08.2026: »die Bilder des Teams sind nicht transparent,
    dort sind innerhalb der Kreise kleine Kacheln zu sehen« —
    und kurz darauf: »das ist bei fast allen Bildern so«.)

   Der zweite Satz war der entscheidende Hinweis. Es lag NICHT am
   Alphakanal der Team-Fotos (nachgemessen: vorher wie nachher
   57 % voll durchsichtig). Es lag daran, dass JEDES Bild sein
   24-Pixel-Vorschaubildchen als CSS-Hintergrund behaelt — auch
   nachdem das scharfe Bild laengst darueberliegt.

   Bei einem undurchsichtigen Foto sieht das niemand. Bei einem
   FREIGESTELLTEN Portraet scheint das Bildchen durch alles
   Durchsichtige hindurch: ein 24 Pixel breites, auf 700 Pixel
   gezogenes Rechteck des alten Fotohintergrunds — genau die
   „kleinen Kacheln" im Kreis.

   Der Hintergrund hat seine Aufgabe erfuellt, sobald `.bereit`
   steht. Danach ist er nur noch Schmutz.
   ------------------------------------------------------------ */
img[data-vorschau].bereit { background-image: none; }

@keyframes bild-notausgang {
  /* Auch das Sicherheitsnetz raeumt das Vorschaubildchen weg — sonst
     bleibt es genau dort stehen, wo sich das Skript nicht gemeldet hat. */
  to { filter: none; transform: none; opacity: 1; background-image: none; }
}

/* Schwache Geräte und Datensparmodus: dasselbe Versprechen,
   nur ohne Weichzeichner — der kostet auf jedem Bild Rechenzeit. */
html[data-motion="leicht"] img[data-bild="auftritt"] {
  filter: none;
  opacity: 0;
  transform: none;
  transition: opacity .7s var(--weich) var(--bild-verzug, 0ms);
}
html[data-motion="leicht"] img[data-bild="auftritt"].bereit { opacity: 1; }

/* Wer keine Bewegung will, bekommt das Bild ohne jedes Vorspiel. */
html[data-motion="aus"] img[data-bild="auftritt"],
html[data-motion="aus"] img[data-bild="auftritt"].bereit {
  filter: none;
  transform: none;
  opacity: 1;
  transition: none;
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  img[data-bild="auftritt"],
  img[data-bild="auftritt"].bereit {
    filter: none;
    transform: none;
    opacity: 1;
    transition: none;
    animation: none;
  }
}

/* Das Hero-Standbild liegt hinter dem Film und wird von `.film`
   selbst inszeniert — der Weichzeichner hat dort nichts verloren. */
.szene--hero .film > picture > img { transform: scale(calc(1.16 - clamp(0, var(--p, 1), 1) * .16)); }

/* ------------------------------------------------------------
   39 - Der Eingang: "Wo Traeume ein Zuhause finden"
        (Joe 21.08.2026)

   Acht Sekunden aus dem Dunkel ins Licht, dann steht die Startseite -
   ohne Schnitt.

   Der Bauplan in einem Satz: Diese Ebene traegt nur den Film und
   liegt IN der Hero-Buehne, zwischen dem Hero-Film und dem Logo.
   Das Logo darueber ist das echte Hero-Logo. Es steht von Anfang an
   da und bewegt sich nie; es wechselt allein der Grund hinter ihm.
   Ein zweites Logo an derselben Stelle zu halten waere fragil - hier
   gibt es schlicht kein zweites.

   Das Aufleuchten laeuft als `animation`, nicht als `transition`:
   eine Transition startet nicht, wenn im selben Frame `display: none`
   aufgehoben wird - der Ausgangszustand wird nie gerendert, und der
   Film stuende sofort hell da. Gemessen am 21.08.2026.

   Der Torfilm mit dem Schluessel ist entfallen (Joes Wunsch): zwei
   Eroeffnungen hintereinander waren eine zu viel.
------------------------------------------------------------ */
.eingang {
  position: absolute; inset: 0;
  z-index: 1;                  /* ueber .film (0), unter .hero-akt (2) */
  background: #000;
  display: none;
  overflow: hidden;
}
.eingang.an { display: block; }

.eingang__film {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Duester herein, dann kommt das Licht - und die Kamera schiebt
   ueber die ganzen acht Sekunden ganz leicht nach vorn. */
.eingang.an .eingang__film {
  animation: eingang-aufleuchten 3.6s cubic-bezier(.4, 0, .2, 1) both,
             eingang-fahrt 9s linear both;
}
@keyframes eingang-aufleuchten {
  0%   { filter: brightness(.04) saturate(.35); }
  55%  { filter: brightness(.72) saturate(.85); }
  100% { filter: brightness(1)   saturate(1); }
}
@keyframes eingang-fahrt {
  from { transform: scale(1.13); }
  to   { transform: scale(1); }
}

.eingang__vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(115% 88% at 50% 50%, transparent 28%, rgba(0, 0, 0, .84) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent 20%, transparent 72%, rgba(0, 0, 0, .72));
}

/* Ein goldener Hauch, der mit der Marke kommt - er macht aus dem
   Aufleuchten eine Ankunft statt eines Einschaltens. */
.eingang__schein {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(56% 44% at 50% 42%, rgba(201, 162, 78, .32), transparent 66%);
  transition: opacity 2.4s var(--weich);
}
html.eingang-laeuft.eingang-marke .eingang__schein { opacity: 1; }

/* --- Was waehrend des Eingangs schweigt -------------------------
   Nur die Marke steht im Licht. Kopfzeile, Region, Knoepfe und der
   Scroll-Wink kommen erst, wenn die Welle gegangen ist. Sie werden
   ausgeblendet, nicht entfernt: so ist die Seite die ganze Zeit
   vollstaendig und die Tastatur findet alles wieder. */
html.eingang-laeuft .kopf,
html.eingang-laeuft .hero-akt__ort,
html.eingang-laeuft .hero-akt__aktionen,
html.eingang-laeuft .scroll-wink,
html.eingang-laeuft .rundgang,
html.eingang-laeuft .vorlesen-leiste,
html.eingang-laeuft [class*="vorlesen"] {
  opacity: 0 !important;
  transition: opacity 1.1s var(--weich);
  pointer-events: none;
}
/* Der Hero-Film wartet hinter der Welle. */
html.eingang-laeuft .szene--hero .film { opacity: 0 !important; }

/* Die Marke selbst: sie steigt aus dem Dunkel, spaeter als der Film,
   und traegt dabei einen goldenen Schein. */
html.eingang-laeuft .hero-logo {
  opacity: 0 !important;
  transform: translateY(16px) scale(.97);
  transition: opacity 2.2s var(--weich), transform 2.6s var(--weich),
              filter 2.4s var(--weich);
}
html.eingang-laeuft.eingang-marke .hero-logo {
  opacity: 1 !important;
  transform: none;
  filter: drop-shadow(0 0 44px rgba(201, 162, 78, .4));
}

/* --- Der Uebergang ---------------------------------------------
   Die Welle geht, der Hero-Film kommt, alles andere kehrt zurueck.
   Das Logo tut nichts - es stand schon da und bleibt stehen. */
.eingang.zu {
  animation: eingang-loesen 1.6s var(--weich) both;
  pointer-events: none;
}
.eingang.zu .eingang__film { filter: brightness(1.45) saturate(1.1); }
@keyframes eingang-loesen {
  0%   { opacity: 1; }
  32%  { opacity: 1; }
  100% { opacity: 0; }
}

.eingang__weiter {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 600;
  padding: .55rem 1.1rem;
  border: 1px solid rgba(239, 232, 218, .35);
  border-radius: 999px;
  background: rgba(10, 9, 8, .55);
  backdrop-filter: blur(6px);
  color: var(--bein);
  font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity .6s var(--weich), border-color .3s var(--weich);
}
.eingang__weiter[hidden] { display: none; }
html.eingang-laeuft .eingang__weiter { opacity: .8; transition-delay: 1.4s; }
.eingang__weiter:hover { border-color: var(--gold); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .eingang.an .eingang__film { animation: none; }
  html.eingang-laeuft .hero-logo { transition: none; }
  .eingang.zu { animation-duration: .01s; }
}

/* ------------------------------------------------------------
   40 · Heller, wo Menschen sind
        (Joe 21.08.2026)

   Vorgabe: Grunddesign behalten, nur heller an den menschlichen
   Stellen. Umgesetzt an vier Abschnitten - Haltung, Team, Stimmen,
   Kontakt. Alles andere bleibt Nacht, denn erst der Wechsel macht
   die hellen Stellen warm.

   Der Kniff steckt in einer Zeile: `--leise` wird INNERHALB des
   Blocks ueberschrieben. Damit werden alle Nebentexte dort heller,
   ohne dass ein einziger Selektor angefasst werden muss - und
   ausserhalb bleibt jeder Wert unveraendert.

   Gemessen: #B7AE9A auf #17130E ergibt 8,4:1, deutlich ueber den
   4,5:1, die WCAG AA verlangt.
------------------------------------------------------------ */
.block--menschlich {
  background:
    radial-gradient(120% 100% at 50% 0%, var(--schein-gold), transparent 62%),
    var(--nacht-warm);
  --leise: var(--leise-hell);
}
/* Steht NACH .block--dunkel, damit es bei Abschnitten gewinnt, die
   beide Klassen tragen (die Stimmen tun das). */
.block--dunkel.block--menschlich {
  background:
    radial-gradient(120% 100% at 50% 0%, var(--schein-gold), transparent 62%),
    var(--nacht-warm);
}

/* Portraits: ein warmer Schein um die Gesichter, damit sie nicht mehr
   im Nichts stehen. `drop-shadow` statt `box-shadow`, weil die Bilder
   mit `clip-path` rund geschnitten sind - ein box-shadow wuerde am
   Rechteck kleben und mitgeschnitten. */
.block--menschlich .kopf-karte__bild img,
.block--menschlich .kopf-karte__bild,
.block--menschlich .person img {
  filter: drop-shadow(0 0 26px rgba(201, 162, 78, .28));
}
/* Die Personenkarten auf der Team-Seite tragen den warmen Grund mit. */
.block--menschlich .person {
  background: #1C1712;
  border-color: rgba(201, 162, 78, .3);
}

/* Zitate: Elfenbein statt Grau - sie sind das Wort des Kunden und
   sollen so klingen. */
.block--menschlich .stimme__text,
.block--menschlich blockquote p,
.block--menschlich blockquote {
  color: var(--bein);
}

/* Der Schluss: das Licht geht an, wenn man unten ankommt. */
.schluss.block--menschlich {
  background:
    radial-gradient(140% 120% at 50% 108%, rgba(201, 162, 78, .13), transparent 58%),
    var(--nacht-warm);
}
.schluss.block--menschlich .schluss__wappen { opacity: .075; }

/* Die Trennlinie darf dort etwas praesenter sein, sonst franst der
   Uebergang von Nacht zu Waerme aus. */
.block--rand.block--menschlich { border-top-color: rgba(201, 162, 78, .3); }

/* ------------------------------------------------------------
   41 · Die lebendige Lichtwelle
        (Joe 21.08.2026)

   Der Eingang zeigt die Welle als Film. Im Hero laeuft sie weiter -
   diesmal gerechnet, damit sie auf Zeiger und Scroll antworten kann.
   Sie liegt UEBER dem Hero-Film, aber UNTER Logo und Knoepfen, und
   mischt sich mit `screen` hinein: sie hellt auf, verdeckt nie.

   Sie startet erst, wenn das Skript sie eingeblendet hat (`.an`).
   Ohne WebGL, bei gewuenschter Ruhe oder auf schwachen Geraeten
   nimmt das Skript die Leinwand ganz aus dem Dokument.
------------------------------------------------------------ */
.lichtwelle {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 1;                 /* ueber Film + Schleier, unter .hero-akt */
  pointer-events: none;       /* nie im Weg: Knoepfe bleiben klickbar */
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.8s var(--weich);
}
.lichtwelle.an { opacity: .62; }

/* Auf schmalen Geraeten zurueckhaltender - dort steht das Logo
   dichter an der Welle. */
@media (max-width: 760px) {
  .lichtwelle.an { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  .lichtwelle { display: none; }
}

/* ------------------------------------------------------------
   42 - Lange Woerter brechen
        (gesehen 21.08.2026 auf der Team-Seite)

   "Immobiliendarlehensvermittlerin" ist ein Wort ohne Trennstelle
   und lief ueber den Kartenrand hinaus. Deutsche Berufsbezeichnungen
   werden das oefter tun, also gilt die Regel fuer alle Rollen- und
   Datenzeilen statt fuer diesen einen Fall.
------------------------------------------------------------ */
.person__rolle,
.person__daten,
.kopf-karte__rolle,
.kopf-karte__name { overflow-wrap: anywhere; hyphens: auto; }

/* ------------------------------------------------------------
   43 - Die Karte der Region
        (Joe 21.08.2026)

   Keine Landkarte, die Genauigkeit vortaeuscht, und schon gar kein
   Kartendienst, der jeden Besucher meldet - diese Seite holt ihre
   Schriften nicht ohne Grund lokal. Stattdessen ein Lichtbild: die
   Orte sitzen an ihren echten Koordinaten, und von Masholder laufen
   feine Faeden zu jedem Objekt. Das sagt genau das, was stimmt -
   von hier aus arbeiten wir dort.
------------------------------------------------------------ */
.karte {
  /* Das Lichtnetz ist fast quadratisch. Ueber die volle Blockbreite
     gezogen stuende es verloren in einem leeren Rahmen - darum ein
     eigenes Mass, mittig gesetzt. Der Innenabstand haelt die
     Unterschrift von der geerbten figure-Kante weg. */
  max-width: 620px;
  margin: clamp(2.6rem, 5vw, 4.5rem) auto 0;
  padding: clamp(1rem, 2vw, 1.7rem);
  position: relative;
}
.karte[hidden] { display: none; }

.karte svg {
  /* Die Breite fuehrt - aber die Karte selbst ist auf 620 px begrenzt
     (s. oben). Ueber die volle Blockbreite ergaebe die 100x95er
     viewBox sonst ueber 1200 px Hoehe, die kein Bildschirm fasst. */
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* Die Faeden: fast unsichtbar, sie zeichnen sich beim Nahen selbst */
.karte__faden {
  fill: none;
  stroke: rgba(201, 162, 78, .3);
  stroke-width: .55;
  stroke-dasharray: var(--laenge) var(--laenge);
  stroke-dashoffset: var(--laenge);
}
.karte.da .karte__faden {
  animation: karte-faden 1.5s var(--weich) forwards;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes karte-faden { to { stroke-dashoffset: 0; } }

/* Ein Objekt: Lichtpunkt mit Hof */
.karte__ort { cursor: pointer; }
.karte__hof {
  fill: rgba(201, 162, 78, .16);
  opacity: 0;
  transition: opacity .45s var(--weich), r .45s var(--weich);
}
.karte__punkt {
  fill: var(--gold-hell);
  opacity: 0;
  transform-box: fill-box; transform-origin: center;
  transition: fill .3s var(--weich);
}
.karte.da .karte__punkt {
  animation: karte-an .9s var(--weich) forwards;
  animation-delay: calc(320ms + var(--i) * 55ms);
}
@keyframes karte-an { from { opacity: 0; } to { opacity: 1; } }

.karte__ort:hover .karte__hof,
.karte__ort:focus-visible .karte__hof { opacity: 1; }
.karte__ort:hover .karte__punkt,
.karte__ort:focus-visible .karte__punkt { fill: var(--casa); }
.karte__ort:focus-visible { outline: none; }
.karte__ort:focus-visible .karte__ring { opacity: 1; }
.karte__ring {
  fill: none; stroke: var(--gold-hell); stroke-width: .8;
  opacity: 0; transition: opacity .2s;
}

/* Miete bekommt einen anderen Ton - man sieht auf einen Blick, was was ist */
.karte__ort[data-miete="1"] .karte__punkt { fill: #7FB4D6; }
.karte__ort[data-miete="1"]:hover .karte__punkt { fill: var(--casa); }

/* Der Sitz: kein Punkt, ein kleines Wappenlicht */
.karte__sitz { fill: var(--casa); }
.karte__sitzhof { fill: rgba(255, 123, 0, .18); }
.karte__sitzwort {
  fill: var(--bein); font-family: var(--text);
  font-size: 1.9px; letter-spacing: .35px; text-transform: uppercase;
}

/* Ortsname: nur bei Hover, damit die Karte ruhig bleibt */
.karte__wort {
  fill: var(--bein);
  font-family: var(--text); font-size: 2.1px; letter-spacing: .2px;
  opacity: 0; transition: opacity .3s var(--weich);
  pointer-events: none;
}
.karte__ort:hover .karte__wort,
.karte__ort:focus-visible .karte__wort { opacity: 1; }

.karte__unterschrift {
  margin-top: 1.4rem;
  font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
  color: var(--leise);
}
.karte__zaehler { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .karte__faden { stroke-dashoffset: 0; animation: none; }
  .karte__punkt { opacity: 1; animation: none; }
}

/* ------------------------------------------------------------
   44 - Der Kosten- und Finanzierungsrechner
        (Joe 21.08.2026)

   Steht auf jeder Kauf-Objektseite, vorbelegt mit dem echten Preis.
   Links die Regler, rechts die Tafel - auf dem Handy untereinander.
   Rechnen tut allein der Browser; das steht auch auf der Seite,
   denn wer seinen Kaufpreis eintippt, will wissen wohin er geht.
------------------------------------------------------------ */
.rechner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 3.5vw, 3rem);
  align-items: start;
}
@media (max-width: 860px) { .rechner { grid-template-columns: 1fr; } }

.rechner__regler { display: grid; gap: .9rem; }

.rechner__zeile {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .8rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--linie-zart);
}
.rechner__was { font-size: var(--t-klein); color: var(--bein); }
.rechner__eh  { font-size: var(--t-label); color: var(--leise); min-width: 4.6em; }

.rechner__feld {
  width: 9.5ch;
  padding: .5rem .7rem;
  border: 1px solid var(--linie);
  border-radius: var(--r-feld, 12px);
  background: rgba(10, 9, 8, .6);
  color: var(--bein);
  font: inherit; font-size: var(--t-klein);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rechner__feld:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 2px; }
/* Die Drehpfeile weg - sie sind winzig, treffen schlecht und laden
   dazu ein, einen 400.000-Euro-Preis in Tausenderschritten zu klicken. */
.rechner__feld::-webkit-outer-spin-button,
.rechner__feld::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rechner__feld[type=number] { -moz-appearance: textfield; appearance: textfield; }

.rechner__haken { width: 1.1rem; height: 1.1rem; accent-color: var(--gold); }

.rechner__tafel {
  padding: clamp(1.2rem, 2.4vw, 1.9rem);
  border: 1px solid var(--linie);
  border-radius: var(--r-karte, 18px);
  background: linear-gradient(180deg, rgba(201, 162, 78, .05), transparent 60%), var(--nacht-2);
}
.rechner__posten {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .45rem 0;
  font-size: var(--t-klein);
  color: var(--leise);
}
.rechner__posten b {
  color: var(--bein); font-weight: 400;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rechner__posten--summe {
  margin-top: .5rem; padding-top: .8rem;
  border-top: 1px solid var(--linie);
  color: var(--bein);
}
.rechner__posten--summe b { color: var(--gold-hell); font-weight: 700; }
.rechner__posten[hidden] { display: none; }

.rechner__rate {
  margin-top: 1.4rem; padding-top: 1.2rem;
  border-top: 1px solid var(--linie);
  display: grid; gap: .2rem;
}
.rechner__ratewas {
  font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase;
  color: var(--leise);
}
.rechner__ratewert {
  font-family: var(--display); font-size: var(--t-gross); font-weight: 700;
  color: var(--gold-hell); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.rechner__ratehin, .rechner__rest {
  font-size: var(--t-label); color: var(--leise); margin: 0;
}
.rechner__rest { margin-top: .5rem; }

/* Wenn das Eigenkapital nicht reicht, sagt der Rechner das deutlich,
   statt eine Rate auszugeben, die es so nicht gibt. */
.rechner--knapp .rechner__ratewert { color: var(--casa); }

.rechner__fussnote {
  grid-column: 1 / -1;
  margin: .4rem 0 0;
  font-size: var(--t-label); line-height: 1.8; color: var(--leise);
}
.rechner__fussnote a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.rechner__fussnote a:hover { color: var(--gold-hell); }

/* ------------------------------------------------------------
   Kulisse — der Musik-Schalter   (Joe 21.08.2026)

   Dieselbe Pille wie das Vorlesen, eine Stufe darueber. Bewusst
   KEIN eigenes Aussehen: zwei verschiedene Knoepfe unten links
   waeren zwei Ideen, wo eine gemeint ist. Den genauen Abstand
   misst das Skript (`stapeln`) — hier steht nur der Rueckfall.
   ------------------------------------------------------------ */
.kulisse-schalter { bottom: 3.9rem; }

.kulisse-schalter.klingt .vorlesen-schalter__punkt {
  background: var(--gold-hell);
  box-shadow: 0 0 8px var(--gold-hell);
  animation: kulisse-atem 3.6s ease-in-out infinite;
}

/* Ruhiger als der Vorlese-Puls: die Stimme meldet sich, die Musik atmet nur. */
@keyframes kulisse-atem {
  0%, 100% { transform: scale(1);    opacity: .8; }
  50%      { transform: scale(1.4);  opacity: 1;  }
}

@media (prefers-reduced-motion: reduce) {
  .kulisse-schalter.klingt .vorlesen-schalter__punkt { animation: none; }
}

/* ------------------------------------------------------------
   Brotkrume auf den Objektseiten   (Joe 22.08.2026)

   "Man soll von den Unterseiten aus auch auf die Startseite
   kommen." Bisher fuehrte von dort nur das Logo zurueck — auf
   dem Handy steckt die Navigation hinter dem Menue-Knopf. Wer
   ueber einen weitergeleiteten Link auf einer Objektseite
   landet, sieht jetzt auf den ersten Blick, wo er ist.

   Bewusst leise: Schriftgrad wie die Marken-Zeile, Gold erst
   beim Darueberfahren. Der Weg zurueck soll da sein, nicht um
   Aufmerksamkeit mit dem Objekt konkurrieren.
   ------------------------------------------------------------ */
.brotkrume {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 1.4rem;
  font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase;
  color: var(--leise);
}
.brotkrume a {
  color: var(--leise); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--weich), border-color .3s var(--weich);
}
.brotkrume a:hover,
.brotkrume a:focus-visible { color: var(--gold-hell); border-bottom-color: var(--gold); }
.brotkrume span[aria-hidden] { opacity: .45; }
.brotkrume [aria-current="page"] { color: var(--bein); }

/* ------------------------------------------------------------
   Die Sprachfrage im Eingang   (Joe 22.08.2026)

   Liegt UEBER dem Eingangsfilm (der hat z-index 300) und bleibt
   stehen, wenn der Film sich weggeraeumt hat. Bewusst dunkel und
   ruhig: die Frage soll den Auftritt nicht zerschlagen, sondern
   in ihm stehen.
   ------------------------------------------------------------ */
.sprachwahl {
  position: fixed; inset: 0; z-index: 320;
  display: grid; place-items: center;
  padding: var(--rand);
  background: rgba(6, 5, 4, .62);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .6s var(--weich);
}
.sprachwahl.an { opacity: 1; }

.sprachwahl__kasten {
  max-width: 46rem; width: 100%;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border: 1px solid var(--linie);
  border-radius: 20px;
  background: rgba(10, 9, 8, .88);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  text-align: center;
  transform: translateY(12px);
  transition: transform .7s var(--weich);
}
.sprachwahl.an .sprachwahl__kasten { transform: none; }

.sprachwahl__frage {
  margin: 0 0 1.4rem;
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase;
  color: var(--leise);
}

/* --- Eintritt: Ton-Hinweis und Speicher-Hinweis -----------------------
   Steht in BEIDEN Eingaengen — unter den Fahnen (erster Besuch) und im
   Eintritt (Wiederkehrer). Der Ton-Satz ist die Warnung, das
   Kleingedruckte die Auskunft; deshalb sind sie verschieden laut. */
.eintritt__hinweis { margin-top: 1.5rem; text-align: left; }
.eintritt__ton {
  margin: 0;
  padding: .85rem 1.1rem;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  font-size: .92rem; line-height: 1.55;
  color: var(--bein);
}
.eintritt__ton span { color: var(--gold); margin-right: .15rem; }
.eintritt__klein {
  margin: .85rem 0 0;
  font-size: .8rem; line-height: 1.6;
  color: var(--leise);
}
.eintritt__klein a { color: var(--gold-hell); }

/* Der Tour-Verweis im Eingang — leiser als die Ton-Warnung, lauter als das
   Kleingedruckte: er ist eine Einladung, keine Auskunft. */
.eintritt__tour {
  margin: .8rem 0 0;
  font-size: .88rem; line-height: 1.55;
  color: var(--bein); opacity: .85;
}
.eintritt__tour span { color: var(--gold); margin-right: .3rem; }
.eintritt__tour strong { color: var(--gold-hell); font-weight: 600; }

/* ------------------------------------------------------------
   Der Wink beim Eintreten — dreimal, dann Ruhe
------------------------------------------------------------ */

/* 1 · Der Rundgang klappt auf: die Namen der Abschnitte werden lesbar,
       genau wie beim Zeigen mit der Maus. Nur eben von selbst, einmal. */
.rundgang--vorstellen .rundgang__punkt .wort {
  opacity: .85; transform: none;
  text-shadow: 0 0 14px rgba(235, 212, 155, .5);
}

@keyframes rundgangVorstellen {
  0%, 100% { box-shadow: 0 0 5px rgba(201, 162, 78, .35);
             background: rgba(201, 162, 78, .62); width: 22px; }
  45%      { box-shadow: 0 0 16px rgba(235, 212, 155, .95);
             background: var(--gold-hell); width: 34px; }
}
/* Laenger als die Dauerwelle oben — sonst gewinnt die und der Wink bliebe
   unsichtbar. `--i` steht schon an jedem Punkt (Ticket #43): die Striche
   leuchten dadurch NACHEINANDER auf, wie ein Blick, der die Liste hinunter
   wandert, statt alle auf einmal wie eine Alarmanlage. */
.rundgang.rundgang--vorstellen .rundgang__punkt:not([aria-current="true"]) .strich,
.rundgang.rundgang--vorstellen .rundgang__punkt[aria-current="true"] .strich {
  /* Endlos — aufgehoert wird ueber die Klasse, sobald der erste Abschnitt
     durchgescrollt ist (Joé, 22.08.2026). Eine feste Zahl waere hier falsch:
     wer langsam liest, saehe den Hinweis nicht mehr, wenn er ihn braucht. */
  animation: rundgangVorstellen 1.15s var(--weich) infinite;
  animation-delay: calc(var(--i, 0) * .07s);
}

/* 2 · Der Tour-Knopf atmet im selben Takt. */
@keyframes tourWinkt {
  0%, 100% { box-shadow: 0 0 0 rgba(235, 212, 155, 0),
                         0 0 0 0 rgba(235, 212, 155, 0);
             border-color: var(--linie);
             transform: translateY(0); }
  45%      { box-shadow: 0 0 26px rgba(235, 212, 155, .7),
                         0 0 0 6px rgba(235, 212, 155, .13),
                         0 0 0 1px rgba(235, 212, 155, .5) inset;
             border-color: var(--gold-hell);
             transform: translateY(-2px); }
}
/* Deutlicher als zuerst gebaut (Joé wollte es auffaelliger) und ENDLOS, bis
   der erste Abschnitt durch ist. Laenger und weiter statt greller: ein Knopf,
   der blitzt, wirkt wie ein Fehler — einer, der ruhig atmet, wie eine
   Einladung. */
.fuehrung-schalter.winkt {
  animation: tourWinkt 1.35s var(--weich) infinite;
  color: var(--gold-hell);
}

/* Die Sprechblase neben dem Knopf. RECHTS daneben, nicht darueber: oben
   liegen Musik- und Vorlese-Schalter, und ein Kasten, der sie verdeckt, nimmt
   dem Besucher genau die Bedienung weg, auf die er hingewiesen wird. */
.tourblase {
  position: fixed; left: calc(var(--rand) + 10.5rem); bottom: 5.9rem;
  z-index: 71;
  max-width: min(17rem, calc(100vw - 13rem));
  padding: .62rem .95rem;
  border: 1px solid rgba(235, 212, 155, .4);
  border-radius: 14px;
  background: rgba(10, 9, 8, .94);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .5);
  color: var(--bein);
  font-size: .84rem; line-height: 1.4;
  cursor: pointer;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .55s var(--weich), transform .55s var(--weich);
}
.tourblase.sichtbar { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   Cinematische Übergänge — scroll-gebunden, im Kompositor
   (Joé, 22.08.2026: „die abschnitte sollen cinematische
   übergänge kriegen")
------------------------------------------------------------ */
@keyframes abschnittKommt {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes abschnittGeht {
  from { opacity: 1; transform: none; }
  to   { opacity: .32; transform: translate3d(0, -22px, 0); }
}
@keyframes filmSetztSich {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}
@keyframes nahtGlueht {
  0%, 100% { border-top-color: var(--linie); }
  50%      { border-top-color: rgba(235, 212, 155, .5); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* 1 · Die Blende. `.szene` ist ausgenommen — dort klebt die Bühne. */
    .block:not(.szene) > .huelle {
      animation: abschnittKommt linear both, abschnittGeht linear both;
      animation-timeline: view(), view();
      animation-range: entry 2% entry 78%, exit 55% exit 100%;
      will-change: opacity, transform;
    }

    /* Der Einmal-Auftritt tritt zurück, sobald die Blende läuft: zwei
       Systeme auf demselben Element multiplizieren ihre Deckkraft, und der
       Inhalt bliebe im Übergang zu blass. */
    .block:not(.szene) > .huelle [data-auftritt] {
      opacity: 1; transform: none; clip-path: none;
    }

    /* 2 · Der Film setzt sich. `.film` hat `overflow: hidden` — die
       Vergrösserung schneidet also sauber ab. */
    .film--ruhig video,
    .film--ruhig img {
      animation: filmSetztSich linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    /* 3 · Die Naht glüht, wenn sie durch das Bild wandert. */
    .block--rand {
      animation: nahtGlueht linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
  }
}
.tourblase::before {          /* der Zipfel zum Knopf hin */
  content: ''; position: absolute; left: -5px; top: 50%;
  width: 9px; height: 9px; margin-top: -4.5px;
  background: rgba(10, 9, 8, .94);
  border-left: 1px solid rgba(235, 212, 155, .4);
  border-bottom: 1px solid rgba(235, 212, 155, .4);
  transform: rotate(45deg);
}
@media (max-width: 640px) {
  /* Auf dem Handy stehen die Schalter enger — die Blase legt sich darueber
     statt daneben, sonst haengt sie halb aus dem Bild. */
  .tourblase {
    left: var(--rand); right: var(--rand); bottom: 9.2rem;
    max-width: none;
  }
  .tourblase::before { display: none; }
}

/* 3 · Die Meldezeile. Unten mittig, ueber allem ausser den Eingaengen. */
.meldung {
  position: fixed; left: 50%; bottom: 2.2rem;
  transform: translate(-50%, 14px);
  z-index: 310;
  max-width: min(34rem, calc(100vw - 2rem));
  padding: .8rem 1.3rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: rgba(10, 9, 8, .93);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .5);
  color: var(--bein);
  font-size: .88rem; line-height: 1.4; text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--weich), transform .5s var(--weich);
}
.meldung.sichtbar { opacity: 1; transform: translate(-50%, 0); }

/* Wer Bewegung abbestellt hat, bekommt den HINWEIS trotzdem — nur ohne das
   Pulsieren. Weniger Zappeln heisst nicht weniger wissen. */
@media (prefers-reduced-motion: reduce) {
  .rundgang.rundgang--vorstellen .rundgang__punkt .strich,
  .fuehrung-schalter.winkt { animation: none; }
  /* Die Blase BLEIBT: wer Bewegung abbestellt hat, soll trotzdem erfahren,
     dass es eine Tour gibt. Sie erscheint nur ohne Gleiten, und der Knopf
     steht dauerhaft hell statt zu atmen. */
  .tourblase { transition: opacity .2s linear; transform: none; }
  .fuehrung-schalter.winkt {
    border-color: var(--gold-hell); color: var(--gold-hell);
    box-shadow: 0 0 18px rgba(235, 212, 155, .5);
  }
  .rundgang.rundgang--vorstellen .rundgang__punkt[aria-current="true"] .strich {
    box-shadow: 0 0 14px rgba(235, 212, 155, .8);
  }
  .meldung { transition: opacity .2s linear; }
}

.eintritt__aktionen {
  display: flex; flex-wrap: wrap; gap: .8rem;
  justify-content: center;
  margin-top: 1.6rem;
}
/* Der leise Weg bleibt sichtbar, aber er draengt sich nicht auf: wer ohne
   Ton eintreten will, findet ihn — wer nichts dagegen hat, uebersieht ihn. */
.eintritt__leise { opacity: .78; }
.eintritt__leise:hover { opacity: 1; }

/* Der Eintritt blendet auf wie die Flaggenfrage; ohne `sichtbar` bliebe er
   bei opacity 0 stehen (die Regel steht oben in `.sprachwahl`). */
.sprachwahl.sichtbar { opacity: 1; }
.sprachwahl.sichtbar .sprachwahl__kasten { transform: none; }

@media (max-width: 480px) {
  .eintritt__aktionen { flex-direction: column; }
  .eintritt__aktionen .knopf { width: 100%; text-align: center; }
}

/* Sechs in EINER Reihe. `auto-fit` liess die sechste allein in eine zweite
   Zeile fallen — eine Sprache, die anders steht als die anderen fuenf, sieht
   aus wie ein Nachtrag. Feste Spaltenzahl, in zwei Stufen nach unten. */
.sprachwahl__reihe {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .7rem;
}
@media (max-width: 900px) { .sprachwahl__reihe { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .sprachwahl__reihe { grid-template-columns: repeat(2, 1fr); } }

.sprachwahl__fahne {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  padding: .9rem .5rem;
  border: 1px solid var(--linie-zart);
  border-radius: 12px;
  text-decoration: none;
  color: var(--leise);
  font-size: var(--t-klein);
  transition: color .3s var(--weich), border-color .3s var(--weich),
              background .3s var(--weich), transform .3s var(--weich);
}
.sprachwahl__fahne img {
  width: 46px; height: auto; display: block;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.sprachwahl__fahne:hover,
.sprachwahl__fahne:focus-visible {
  color: var(--bein);
  border-color: var(--gold);
  background: rgba(201, 162, 78, .10);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .sprachwahl, .sprachwahl__kasten, .sprachwahl__fahne { transition: none; }
  .sprachwahl__kasten { transform: none; }
}

/* ------------------------------------------------------------
   Sprachumschalter in der Kopfzeile   (Joe 22.08.2026)

   "Man soll die Sprache auf der Webseite immer aendern koennen."
   Unten links bei Musik und Vorlesen war er zwar ueberall, aber
   dort sucht ihn niemand. Hier steht er, wo man ihn erwartet.

   Auf dem Handy bleibt nur Flagge und Kuerzel stehen — das passt
   neben den Menue-Knopf, ohne die Kopfzeile zu sprengen.
   ------------------------------------------------------------ */
.sprachkopf { position: relative; display: inline-flex; }

.sprachkopf__knopf {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .7rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: transparent;
  color: var(--leise);
  font-size: var(--t-label); letter-spacing: .12em;
  cursor: pointer;
  transition: color .3s var(--weich), border-color .3s var(--weich),
              background .3s var(--weich);
}
.sprachkopf__knopf img { border-radius: 2px; height: auto; display: block; }
.sprachkopf__knopf:hover,
.sprachkopf__knopf:focus-visible { color: var(--bein); border-color: var(--gold); }
.sprachkopf__knopf[aria-expanded="true"] {
  color: var(--gold-hell); border-color: var(--gold);
  background: rgba(201, 162, 78, .10);
}

.sprachkopf__liste {
  position: absolute; right: 0; top: calc(100% + .55rem); z-index: 200;
  margin: 0; padding: .35rem;
  list-style: none;
  min-width: 11.5rem;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: rgba(10, 9, 8, .96);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
}
.sprachkopf__liste a {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .6rem;
  border-radius: 9px;
  color: var(--leise);
  text-decoration: none;
  font-size: var(--t-klein);
  white-space: nowrap;
  transition: color .25s var(--weich), background .25s var(--weich);
}
.sprachkopf__liste img { border-radius: 2px; height: auto; display: block; }
.sprachkopf__liste a:hover,
.sprachkopf__liste a:focus-visible { color: var(--bein); background: rgba(201, 162, 78, .12); }
.sprachkopf__liste a[aria-current="true"] { color: var(--gold-hell); }

/* Rueckfall, falls eine Seite keine Kopfzeile mitbringt. */
.sprachkopf--frei { position: fixed; left: 1.1rem; bottom: 6.6rem; z-index: 140; }
.sprachkopf--frei .sprachkopf__liste { top: auto; bottom: calc(100% + .55rem); left: 0; right: auto; }

/* ------------------------------------------------------------
   Uebersetzte Beschriftungen auf schmalen Bildschirmen
   (Joe 22.08.2026: "auch die Ansicht optimieren")

   GEMESSEN bei 375 px Fensterbreite, nicht geschaetzt:
     de  .knopf--voll  "Wert ermitteln"                      190 px  passt, 45 px Luft
     fr  .knopf--voll  "Faire evaluer votre bien immobilier"  434 px  79 px DRAUSSEN
     fr  .hero-akt__ort "Eifel · Trier · Luxembourg"          307 px  16 px draussen

   Die Handy-Ansicht war gegen DEUTSCHE Textlaengen gemasst. Uebersetzungen
   sind 20-100 % laenger; Niederlaendisch und Griechisch verschaerfen das
   weiter. Und weil die Seite bewusst NICHT waagerecht scrollt
   (scrollWidth == clientWidth == 375, nachgemessen), war der ueberstehende
   Teil samt Pfeil schlicht unerreichbar - nicht bloss haesslich.

   HIER WIRD EINE BEWUSSTE REGEL AUFGEHOBEN: oben steht
   `white-space: nowrap` mit der Randbemerkung "ein Knopf bricht NIE um".
   Das gilt weiter -
   aber nur, solange der Knopf auch auf den Bildschirm passt. Ein Knopf, der
   halb draussen liegt, ist kein Knopf mehr. Deshalb nur unter 760 px.

   `max-width` allein haette NICHT gereicht: mit `nowrap` waere der Text dann
   innen abgeschnitten worden statt in die zweite Zeile zu gehen - dieselbe
   unerreichbare Beschriftung, nur mit sauberer Kante.
------------------------------------------------------------ */
@media (max-width: 760px) {
  .knopf {
    max-width: 100%;
    white-space: normal;
    line-height: 1.25;
    text-align: center;
  }
  /* Die Sperrung frisst bei langen Uebersetzungen eine ganze Zeile. */
  .hero-akt__aktionen .knopf { padding-inline: 1.15rem; letter-spacing: .1em; }

  .hero-akt__ort {
    max-width: 100%;
    letter-spacing: .2em;          /* .38em sprengt lange Ortsketten */
    overflow-wrap: break-word;
  }
}

/* ------------------------------------------------------------
   Der Tippgeber-Rechner   (Joe 22.08.2026)

   »10 % der Nettoprovision« ist eine Zahl, die niemand im Kopf
   hat. Zwei Balken nebeneinander sind eine, die jeder sofort
   sieht. Deshalb steht der Vergleich im Mittelpunkt und nicht
   die Formel — die steht darunter, sichtbar, nicht klein.

   Gold nur EINMAL: der eigene Betrag. Die Pauschale der anderen
   bleibt in der leisen Farbe. Zwei goldene Balken waeren zwei
   gleich gute Angebote.
   ------------------------------------------------------------ */
.tipprechner {
  margin-top: clamp(2.2rem, 5vw, 3.4rem);
  padding: clamp(1.4rem, 3.5vw, 2.4rem);
  border: 1px solid var(--linie);
  border-radius: var(--r-karte);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.22));
}

.tipprechner__frage {
  display: block;
  margin: .5rem 0 .2rem;
  font-size: var(--t-klein);
  color: var(--leise-hell);
}
.tipprechner__preis {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 4.4vw, 2.6rem);
  color: var(--bein);
  letter-spacing: .01em;
}

.tipprechner__regler {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 2px;
  margin: 1.1rem 0 0;
  background: var(--linie);
  border-radius: 2px;
  cursor: pointer;
}
.tipprechner__regler::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-hell), var(--gold));
  border: 1px solid var(--gold-tief);
  box-shadow: 0 2px 10px rgba(0,0,0,.5), 0 0 16px rgba(201,162,78,.35);
}
.tipprechner__regler::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--gold-tief);
  background: linear-gradient(180deg, var(--gold-hell), var(--gold));
}
.tipprechner__regler:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }

.tipprechner__vergleich {
  display: grid; gap: 1.4rem;
  margin: 2rem 0 1.4rem;
}
@media (min-width: 640px) {
  .tipprechner__vergleich { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

.tipprechner__wer {
  display: block;
  font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase;
  color: var(--leise);
}
.tipprechner__wert {
  display: block; margin: .3rem 0 .6rem;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.1rem);
  color: var(--leise-hell);
}
.tipprechner__saeule--wir .tipprechner__wert { color: var(--gold-hell); }

.tipprechner__balken {
  display: block; height: 8px;
  background: rgba(255,255,255,.05);
  border-radius: 999px; overflow: hidden;
}
.tipprechner__balken i {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: var(--leise);
  transition: width .5s var(--weich);
}
.tipprechner__saeule--wir .tipprechner__balken i {
  background: linear-gradient(90deg, var(--gold-tief), var(--gold) 45%, var(--gold-hell));
  box-shadow: 0 0 18px rgba(201,162,78,.35);
}

.tipprechner__grundlage {
  margin: 0;
  font-size: var(--t-klein);
  line-height: 1.6;
  color: var(--leise);
}
.tipprechner__grundlage strong { color: var(--bein); }

@media (prefers-reduced-motion: reduce) {
  .tipprechner__balken i { transition: none; }
}

/* ------------------------------------------------------------
   Credo: das Wappen tritt hinter die Schrift zurueck
   (Joe 22.08.2026: das Logo verdeckt beim Leitsatz die Schrift,
    und die Schrift ist nicht gut lesbar)

   Gemessen bei 375 px: das Wappen (195 x 195) liegt genau ueber
   dem Fliesstext. Es steht zwar hinter ihm (z-index) und nur mit
   4,5 % Deckkraft — aber ein Muster hinter einem 16-px-Text in
   der leisen Farbe nimmt dem Text genau die Ruhe, die er zum
   Lesen braucht.

   Zwei Eingriffe, beide klein: auf dem Handy rueckt das Wappen
   nach oben hinter den Leitsatz (der ist gross und vertraegt es)
   und wird kleiner. Und der Fliesstext bekommt die hellere der
   beiden leisen Farben plus etwas mehr Zeilenabstand.
   ------------------------------------------------------------ */
.credo__zusatz {
  color: var(--leise-hell);
  line-height: 1.75;
  max-width: 34rem;
  margin-inline: auto;
}

@media (max-width: 760px) {
  .credo__wappen {
    top: 30%;
    width: min(44vw, 240px);
    opacity: .035;
  }
  html[data-motion] .credo__wappen { transform: translate(-50%, -50%); }
  .credo__zusatz { font-size: 1.02rem; }
}

/* ------------------------------------------------------------
   Der Objektstapel   (Joe 22.08.2026)

   »Es soll aussehen wie Tinder fuer Immobilien.«

   Drei Karten uebereinander, leicht versetzt und leicht gedreht:
   die vorderste scharf und voll, die beiden dahinter kleiner und
   zurueckgenommen. Der Versatz ist das ganze Geheimnis — ohne ihn
   ist es ein Bild, mit ihm ist es ein Stapel, und man sieht auf
   den ersten Blick, dass es weitergeht.

   Edel heisst hier: keine bunten Herzen und Kreuze. Die Karte
   traegt Bild, Nummer, Art, Ort und Preis — mehr braucht eine
   Immobilie nicht, um zu wirken.
   ------------------------------------------------------------ */
.stapel { margin-top: clamp(1.6rem, 4vw, 2.6rem); }

.stapel__karten {
  position: relative;
  height: clamp(26rem, 62vw, 34rem);
  max-width: 34rem;
  margin: 0 auto;
  touch-action: pan-y;          /* senkrecht scrollen bleibt moeglich */
}

.stapel__karte {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: var(--bein);
  border: 1px solid var(--linie);
  border-radius: var(--r-karte);
  background: var(--nacht-2);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .55);
  transform-origin: 50% 90%;
  /* Der Versatz haengt an der Tiefe: 0 vorn, 1 und 2 dahinter. */
  transform: translateY(calc(var(--tiefe) * -14px)) scale(calc(1 - var(--tiefe) * .045));
  opacity: calc(1 - var(--tiefe) * .35);
  z-index: calc(10 - var(--tiefe));
  transition: transform .35s var(--weich), opacity .35s var(--weich),
              box-shadow .35s var(--weich);
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
}
.stapel__karte:active { cursor: grabbing; }
.stapel__karte:hover,
.stapel__karte:focus-visible { box-shadow: 0 36px 70px rgba(0, 0, 0, .62); }

/* Wegwischen: die Karte faehrt aus dem Bild und verblasst. */
.stapel__karte--weg-rechts {
  transform: translateX(120%) rotate(14deg) !important;
  opacity: 0 !important;
  transition: transform .26s var(--tief), opacity .26s var(--tief);
}
.stapel__karte--weg-links {
  transform: translateX(-120%) rotate(-14deg) !important;
  opacity: 0 !important;
  transition: transform .26s var(--tief), opacity .26s var(--tief);
}

.stapel__bild { position: relative; margin: 0; flex: 1 1 auto; overflow: hidden; }
.stapel__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stapel__bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,9,8,0) 45%, rgba(10,9,8,.92));
}

.stapel__text {
  position: relative; z-index: 1;
  margin-top: -6.5rem;
  padding: 0 clamp(1.1rem, 3.5vw, 1.7rem) clamp(1.1rem, 3.5vw, 1.5rem);
}
.stapel__kopf {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 .35rem;
  font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase;
  color: var(--leise-hell);
}
.stapel__nr {
  padding: .12rem .5rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  color: var(--gold-hell);
}
.stapel__ort {
  margin: 0;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 4.4vw, 2.1rem);
  line-height: 1.1;
}
.stapel__preis {
  margin: .3rem 0 .2rem;
  color: var(--gold-hell);
  font-weight: 600;
}
.stapel__eck { margin: 0; font-size: var(--t-klein); color: var(--leise-hell); }

.stapel__leiste {
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
  margin: 1.4rem auto 0;
}
.stapel__knopf {
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border: 1px solid var(--linie);
  border-radius: 50%;
  background: transparent;
  color: var(--leise);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color .3s var(--weich), border-color .3s var(--weich),
              background .3s var(--weich), transform .3s var(--weich);
}
.stapel__knopf:hover, .stapel__knopf:focus-visible {
  color: var(--gold-hell); border-color: var(--gold);
  background: rgba(201, 162, 78, .1);
  transform: translateY(-2px);
}
.stapel__zaehler {
  margin: 0; min-width: 6.5rem; text-align: center;
  font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase;
  color: var(--leise);
}

@media (prefers-reduced-motion: reduce) {
  .stapel__karte,
  .stapel__karte--weg-rechts,
  .stapel__karte--weg-links { transition: none; }
}

/* ------------------------------------------------------------
   Match und kein Match   (Joe 22.08.2026)

   »Wenn nach rechts gewischt: Match in Gruen, nach links eben
   das Gegenteil.«

   Zwei Stempel, schraeg auf der Karte, wie bei Tinder — aber in
   gedeckten Toenen. Ein grelles Signalgruen auf einer Seite in
   Nacht und Gold sieht nach fremdem Bauteil aus; ein tiefes,
   satteres Gruen sagt dasselbe und bleibt im Haus.

   Sie erscheinen erst beim Ziehen und werden mit dem Weg
   staerker (das Skript setzt die Deckkraft) — man sieht, was
   passiert, BEVOR man loslaesst.
   ------------------------------------------------------------ */
.stapel__marke {
  position: absolute; top: 1.6rem; z-index: 3;
  padding: .45rem 1.1rem;
  border: 2px solid currentColor;
  border-radius: 8px;
  font-size: clamp(1rem, 3.4vw, 1.35rem);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s linear;
}
.stapel__marke--ja {
  left: 1.4rem;
  transform: rotate(-11deg);
  color: #3FB27A;
  text-shadow: 0 0 18px rgba(63, 178, 122, .5);
  box-shadow: 0 0 26px rgba(63, 178, 122, .28);
}
.stapel__marke--nein {
  right: 1.4rem;
  transform: rotate(11deg);
  color: #D2564F;
  text-shadow: 0 0 18px rgba(210, 86, 79, .45);
  box-shadow: 0 0 26px rgba(210, 86, 79, .25);
}

/* Die beiden Entscheidungsknoepfe nehmen dieselben Farben auf —
   sonst sagt der Stempel etwas anderes als der Knopf daneben. */
.stapel__knopf--ja:hover, .stapel__knopf--ja:focus-visible {
  color: #3FB27A; border-color: #3FB27A; background: rgba(63, 178, 122, .12);
}
.stapel__knopf--nein:hover, .stapel__knopf--nein:focus-visible {
  color: #D2564F; border-color: #D2564F; background: rgba(210, 86, 79, .12);
}

/* Die Merkliste unter dem Stapel */
.stapel__merkleiste {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: .6rem 1rem;
  margin: 1.2rem auto 0;
  max-width: 34rem;
  font-size: var(--t-klein);
  color: var(--leise-hell);
  text-align: center;
}
.stapel__merkleiste b { color: var(--gold-hell); font-weight: 600; }
.stapel__merkleiste .knopf { padding-bottom: .35rem; }
.stapel__leeren {
  border: 0; background: none; padding: 0;
  color: var(--leise); font-size: var(--t-klein);
  text-decoration: underline; cursor: pointer;
}
.stapel__leeren:hover { color: var(--bein); }

@media (prefers-reduced-motion: reduce) {
  .stapel__marke { transition: none; }
}

/* ------------------------------------------------------------
   Die Entscheidungsknoepfe leuchten   (Joe 22.08.2026:
   »die Schaltflaechen fuer die Tinder-Immobilien sollen farbig
   sein und aufleuchten«)

   Vorher nahmen sie ihre Farbe erst beim Darueberfahren an —
   auf einem Telefon faehrt niemand darueber. Jetzt tragen sie
   ihre Farbe von Anfang an und atmen leise; beim Beruehren
   leuchten sie richtig auf.

   Die Farben sind dieselben wie die Stempel auf der Karte:
   Knopf und Stempel duerfen nie Verschiedenes sagen.
   ------------------------------------------------------------ */
.stapel__knopf--ja,
.stapel__knopf--nein {
  width: 3.4rem; height: 3.4rem;
  font-size: 1.25rem;
  border-width: 2px;
}
.stapel__knopf--ja {
  color: #3FB27A;
  border-color: rgba(63, 178, 122, .55);
  background: rgba(63, 178, 122, .10);
  box-shadow: 0 0 18px rgba(63, 178, 122, .22);
  animation: stapel-atem-ja 3.2s ease-in-out infinite;
}
.stapel__knopf--nein {
  color: #D2564F;
  border-color: rgba(210, 86, 79, .5);
  background: rgba(210, 86, 79, .09);
  box-shadow: 0 0 16px rgba(210, 86, 79, .18);
  animation: stapel-atem-nein 3.2s ease-in-out infinite .4s;
}
.stapel__knopf--ja:hover, .stapel__knopf--ja:focus-visible {
  color: #0A0908; background: #3FB27A; border-color: #3FB27A;
  box-shadow: 0 0 34px rgba(63, 178, 122, .6);
  transform: translateY(-3px) scale(1.06);
}
.stapel__knopf--nein:hover, .stapel__knopf--nein:focus-visible {
  color: #0A0908; background: #D2564F; border-color: #D2564F;
  box-shadow: 0 0 30px rgba(210, 86, 79, .5);
  transform: translateY(-3px) scale(1.06);
}

@keyframes stapel-atem-ja {
  0%, 100% { box-shadow: 0 0 14px rgba(63, 178, 122, .18); }
  50%      { box-shadow: 0 0 26px rgba(63, 178, 122, .42); }
}
@keyframes stapel-atem-nein {
  0%, 100% { box-shadow: 0 0 12px rgba(210, 86, 79, .14); }
  50%      { box-shadow: 0 0 22px rgba(210, 86, 79, .34); }
}

/* Die Zeile, die zum Wischen einlaedt */
.stapel__wisch {
  display: flex; justify-content: space-between; gap: 1rem;
  max-width: 34rem; margin: .9rem auto 0;
  font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase;
  color: var(--leise);
}
.stapel__wisch--links  { color: rgba(210, 86, 79, .8); }
.stapel__wisch--rechts { color: rgba(63, 178, 122, .85); }

/* Der Stups: die vorderste Karte schiebt sich kurz an und kommt zurueck. */
.stapel__karte--stups { animation: stapel-stups .9s var(--weich); }
@keyframes stapel-stups {
  0%   { transform: translateY(0) scale(1) rotate(0); }
  30%  { transform: translateX(26px) rotate(3.5deg); }
  60%  { transform: translateX(-14px) rotate(-2deg); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .stapel__knopf--ja, .stapel__knopf--nein { animation: none; }
  .stapel__karte--stups { animation: none; }
}

/* Der Hinweis, dass die Kundenstimmen uebersetzt sind. Klein, aber
   nicht versteckt: eine ausgewiesene Uebersetzung ist ueblich, eine
   unausgewiesene waere eine Aussage, die der Kunde nie getroffen hat. */
.stimmen-uebersetzt {
  display: inline-block;
  margin-top: .35rem;
  font-size: var(--t-label);
  letter-spacing: .06em;
  color: var(--leise);
  font-style: italic;
}

/* ------------------------------------------------------------
   Die Führung — der dritte Schalter   (Joe 22.08.2026)

   Dieselbe Pille wie Vorlesen und Musik, eine Stufe darueber.
   Den genauen Abstand misst das Skript; hier steht der Rueckfall.

   Waehrend sie laeuft, traegt der Punkt Gold und pulst langsam —
   dasselbe Zeichen wie beim Sprechen, nur ruhiger: die Fuehrung
   dauert Minuten, nicht Sekunden.
   ------------------------------------------------------------ */
.fuehrung-schalter { bottom: 6.7rem; }
.fuehrung-schalter.laeuft {
  color: var(--gold-hell);
  border-color: var(--gold);
  background: rgba(201, 162, 78, .12);
}
.fuehrung-schalter.laeuft .vorlesen-schalter__punkt {
  background: var(--gold-hell);
  box-shadow: 0 0 10px var(--gold-hell);
  animation: fuehrung-puls 2.6s ease-in-out infinite;
}
@keyframes fuehrung-puls {
  0%, 100% { transform: scale(1);   opacity: .85; }
  50%      { transform: scale(1.5); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fuehrung-schalter.laeuft .vorlesen-schalter__punkt { animation: none; }
}