/* ==========================================================================
   MFG Concierge & Property Management — Designsystem
   --------------------------------------------------------------------------
   Eine Farbe fuehrt: Gold. Sie markiert Struktur und Zustaende, niemals
   Dekoration. Petrol ist Flaeche, nie Text. Alles andere ist Abstufung.
   ========================================================================== */

@import url("fonts.css");

/* --- Zeichen ------------------------------------------------------------ */
:root{
  /* Grund */
  --abyss:#061A23;          /* Seitengrund */
  --deep:#0A2A36;           /* Karten, erhoehte Flaechen */
  --petrol:#0F394A;         /* Markenfarbe, nur als Flaeche */
  --petrol-lift:#14506A;    /* Verlaufsspitze */

  /* Akzent */
  --gold:#C99E5A;
  --gold-hi:#E8C489;
  --gold-dim:rgba(201,158,90,.30);
  --gold-ghost:rgba(201,158,90,.12);

  /* Schrift */
  --pearl:#F3F0EA;
  --mist:rgba(243,240,234,.62);
  --label:rgba(243,240,234,.66);
  --line:rgba(243,240,234,.11);

  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost','Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;

  /* Raster */
  --gut:clamp(1.25rem,5vw,6rem);
  --max:1440px;
  --sec:clamp(6rem,13vh,11rem);

  /* Bewegung */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* --- Grundlagen --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--abyss);
  color:var(--pearl);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem,.94rem + .28vw,1.12rem);
  line-height:1.78;
  letter-spacing:.006em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

/* Filmkorn. Liegt ueber allem, faengt keine Klicks. */
body::after{
  content:"";position:fixed;inset:-120%;z-index:9000;pointer-events:none;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}    16%{transform:translate(-3%,-2%)}
  33%{transform:translate(2%,-4%)} 50%{transform:translate(-2%,3%)}
  66%{transform:translate(3%,2%)}  83%{transform:translate(-4%,-1%)}
  100%{transform:translate(0,0)}
}
@media (prefers-reduced-motion:reduce){body::after{animation:none}}

img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--gold);color:var(--abyss)}

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

.skip{
  position:absolute;left:var(--gut);top:0;z-index:2000;
  transform:translateY(-140%);
  background:var(--gold);color:var(--abyss);
  padding:.7rem 1.2rem;font:500 .8rem/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;transition:transform .3s var(--ease);
}
.skip:focus{transform:translateY(0)}

/* --- Typografie --------------------------------------------------------- */
.d1,.d2,.d3{font-family:var(--serif);font-weight:300;letter-spacing:-.012em;margin:0}
.d1{font-size:clamp(2.7rem,1.5rem + 5.2vw,6.1rem);line-height:1.0}
.d2{font-size:clamp(2.2rem,1.3rem + 3.4vw,4.4rem);line-height:1.06}
.d3{font-size:clamp(1.45rem,1.1rem + 1.3vw,2.1rem);line-height:1.2}
.d1 em,.d2 em,.d3 em{font-style:italic;color:var(--gold-hi);font-weight:300}

.lead{font-size:clamp(1.08rem,1rem + .5vw,1.34rem);line-height:1.68;color:var(--pearl);max-width:36ch}
p{margin:0 0 1.15em;max-width:64ch;color:var(--mist)}
p strong{color:var(--pearl);font-weight:400}
p:last-child{margin-bottom:0}

/* Kapitelmarke: Ziffer, Wort, Goldlinie. */
.mark{
  display:flex;align-items:center;gap:.9rem;
  font:400 .68rem/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;
  color:var(--label);margin:0 0 1.6rem;
}
.mark b{font-weight:500;color:var(--gold)}
.mark::after{content:"";flex:1;height:1px;background:var(--gold-dim);max-width:12rem}

/* --- Raster ------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec);position:relative}
.sec--tight{padding-block:calc(var(--sec) * .62)}

/* Petrol nur als Verlauf, nie als Kasten mit Kante: die Farbe schwillt zur
   Mitte an und laeuft an den Raendern ins Schwarz zurueck. */
.sec--tone{isolation:isolate}
.sec--tone::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(122% 80% at 50% 50%,
    rgba(15,57,74,.92) 0%,rgba(12,45,59,.60) 42%,rgba(6,26,35,0) 78%);
}

.split{display:grid;gap:clamp(2.4rem,5vw,5.5rem);align-items:start}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split--wide-l{grid-template-columns:1.35fr 1fr}
  .split--wide-r{grid-template-columns:1fr 1.35fr}
}

/* Spalte, die beim Scrollen stehen bleibt. Nie als Inline-Style: einspaltig
   muss das Kleben aus, sonst liegt der Block auf dem Folgetext. */
.side{position:static}
/* Einspaltig wuerde das Portrait ueber die volle Breite laufen und den
   Abschnitt erschlagen — hier begrenzt, nicht dort vergroessert. */
@media (max-width:899px){.side{max-width:min(440px,100%)}}

/* --- Ueber uns auf dem Handy --------------------------------------------
   Gestapelt stand der Knopf vor dem Portraet: Man wird gefragt, bevor man
   weiss, wen man fragt. Auf dem Handy deshalb Bild, Name, dann die
   Aufforderung.

   `display:contents` loest die Textspalte auf, damit ihre Teile zu
   Rasterfeldern werden — nur so lassen sie sich gegen die Bildspalte
   sortieren, die eine Ebene hoeher liegt. Der Zeilenabstand des Rasters
   faellt damit weg: Er war fuer zwei Spalten gedacht, nicht fuer fuenf
   Bloecke untereinander. Er wird gezielt zurueckgegeben, wo er gebraucht
   wird.

   Eingegrenzt auf `#ueber-uns`, weil `.split--wide-l` auch im
   Kontaktabschnitt steht und dort nichts umzusortieren ist. */
@media (max-width:899px){
  #ueber-uns .split--wide-l{row-gap:0}
  #ueber-uns .split--wide-l > div:first-child{display:contents}
  #ueber-uns .side{order:2;margin-top:clamp(2.2rem,6vw,3rem)}
  #ueber-uns .cta{order:3;flex-direction:column;align-items:flex-start;gap:1rem}
  #ueber-uns .cta__note{order:-1}   /* Beisatz ueber den Knopf */
}
@media (min-width:900px){.side{position:sticky;top:clamp(6rem,14vh,9rem)}}

/* --- Knoepfe ------------------------------------------------------------ */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.85rem;
  padding:1.05rem 1.9rem;overflow:hidden;isolation:isolate;
  font:400 .78rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--abyss);border:1px solid var(--gold);
  transition:color .45s var(--ease),border-color .45s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--gold);
  transform-origin:bottom;transition:transform .55s var(--ease-out);
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleY(0)}
.btn:hover,.btn:focus-visible{color:var(--gold-hi)}
.btn i{font-style:normal;transition:transform .45s var(--ease)}
.btn:hover i{transform:translateX(.35rem)}

.btn--ghost{color:var(--pearl);border-color:var(--line)}
.btn--ghost::before{background:var(--pearl);transform:scaleY(0)}
.btn--ghost:hover::before,.btn--ghost:focus-visible::before{transform:scaleY(1)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--abyss);border-color:var(--pearl)}

.btns{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem}

/* Knopf mit Beisatz. Der Beisatz ist Text, kein zweiter Knopf — ein
   umrandetes Feld ohne Ziel liest sich als abgeschalteter Schalter. */
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;margin-top:2.4rem}
.cta__note{margin:0;font:400 .72rem/1.5 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--label);max-width:22ch}

.tl{
  position:relative;color:var(--gold);display:inline-block;
  font:400 .76rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  padding-bottom:.35rem;
}
.tl::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease-out);
}
.tl:hover::after,.tl:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* --- Kopfzeile ---------------------------------------------------------- */
.hd{
  position:fixed;inset:0 0 auto;z-index:600;
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),
             border-color .5s var(--ease),transform .5s var(--ease);
}
.hd.is-stuck{
  background:rgba(6,26,35,.78);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
.hd.is-hidden{transform:translateY(-101%)}
.hd__in{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);padding-block:clamp(.9rem,1.6vw,1.35rem)}
.hd__logo{flex:0 0 auto;display:block;text-align:center}
/* Die Ortszeile ist breiter als die Wortmarke. Damit beide auf einer Achse
   sitzen, richtet sich die Marke nach der Zeile aus — nicht umgekehrt; sonst
   liefe die Zeile links aus dem Satzspiegel heraus. */
.hd__logo img{width:clamp(112px,11vw,158px);margin-inline:auto}
/* Die Ortszeile sitzt unter der Wortmarke statt im Helden. Sie waechst mit
   der Breite mit; auf schmalen Schirmen bricht sie um, statt zu ueberlaufen —
   46 Zeichen gesperrt passen unter 400 px nicht in eine Zeile. */
.hd__claim{
  display:block;margin-top:.4rem;max-width:22rem;
  font-family:var(--mono);font-weight:500;
  font-size:clamp(.62rem,.46rem + .38vw,.7rem);
  line-height:1.45;letter-spacing:clamp(.1em,.24vw,.18em);
  text-transform:uppercase;color:var(--label);white-space:nowrap;
}
@media (max-width:560px){.hd__claim{white-space:normal;max-width:15rem}}
.hd__nav{display:none;margin-left:auto;align-items:center;gap:clamp(1rem,1.9vw,1.9rem)}
@media (min-width:1040px){.hd__nav{display:flex}}
.hd__nav a{
  font:400 .72rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--label);position:relative;padding-block:.4rem;transition:color .4s var(--ease);
}
.hd__nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.hd__nav a:hover,.hd__nav a:focus-visible,.hd__nav a.is-current{color:var(--gold)}
.hd__nav a:hover::after,.hd__nav a:focus-visible::after,.hd__nav a.is-current::after{transform:scaleX(1);transform-origin:left}
.hd__sep{width:1px;height:1.1rem;background:var(--line)}

.lang{display:flex;align-items:center;gap:.5rem;font:400 .7rem/1 var(--mono);letter-spacing:.16em}
.lang a{color:var(--mist);transition:color .35s var(--ease)}
.lang a[aria-current]{color:var(--gold)}
.lang a:hover{color:var(--pearl)}
/* Der Schraegstrich lief auf var(--line) und kam damit auf 1,33:1 — der
   einzige echte Kontrastverstoss, den die Messung auf der Seite gefunden
   hat. Er darf leiser sein als die Buchstaben, aber nicht unsichtbar.
   Dieser Wert ist der dunkelste, der die Anforderung noch haelt. Im hellen
   Entwurf traegt dieselbe Deckkraft nicht — dort steht Dunkel auf Creme und
   es braeuchte deutlich mehr. */
.lang span{color:var(--trenn,rgba(243,240,234,.52))}   /* 4,9:1 */

.hd__tel{
  display:none;align-items:center;gap:.6rem;padding:.7rem 1.2rem;
  border:1px solid var(--gold-dim);color:var(--gold);
  font:400 .72rem/1 var(--mono);letter-spacing:.12em;
  transition:background .4s var(--ease),color .4s var(--ease);
}
@media (min-width:1040px){.hd__tel{display:inline-flex}}
.hd__tel:hover{background:var(--gold);color:var(--abyss)}

/* Der Sprachwechsel gehoert auf jeden Schirm nach oben. Unter 1040 px ist
   die Hauptnavigation eingeklappt — damit sass DE/EN nur noch im Menuefuss,
   also ganz unten. Diese zweite Fassung steht neben dem Menueknopf.
   Sichtbar ist immer genau eine von beiden, nie beide zugleich. */
.lang--mob{margin-left:auto;flex:0 0 auto}
.lang--mob a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:34px;
}
@media (min-width:1040px){.lang--mob{display:none}}

/* Die Wortmarke darf jetzt nachgeben: Sie steht neben dem Wechsel und dem
   Menueknopf, und die Ortszeile darunter ist breiter als sie. Ohne das
   Schrumpfen draengt die Zeile die beiden aus dem Satzspiegel. */
@media (max-width:1039px){.hd__logo{flex:0 1 auto;min-width:0}}

/* Auf sehr schmalen Schirmen wird es eng zu viert. Die Zeile bekommt hier
   etwas weniger Sperrung und einen Punkt weniger Groesse, der Satz einen
   engeren Zwischenraum — damit bleibt die Zeile bei zwei bis drei Zeilen
   statt auf vier zu brechen. Die Tippziele bleiben 44 px hoch. */
@media (max-width:400px){
  .hd__in{gap:.85rem}
  .hd__claim{font-size:.6rem;letter-spacing:.06em;max-width:13rem}
  .lang--mob a{min-width:30px}
}

/* Die Ausrichtung nach rechts uebernimmt jetzt der Wechsel. Zwei
   `auto`-Raender wuerden den freien Platz unter sich aufteilen und DE/EN
   in die Mitte schieben. */
/* `flex:0 0 auto`, sonst drueckt der Satz die 44 px zusammen — gemessen
   waren es 34, und damit faellt das Tippziel unter das Mindestmass. */
.burger{flex:0 0 auto;display:grid;gap:6px;width:44px;height:44px;place-content:center}
@media (min-width:1040px){.burger{display:none}}
.burger span{display:block;width:22px;height:1px;background:var(--pearl);transition:transform .45s var(--ease),opacity .3s}
body.is-menu .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.is-menu .burger span:nth-child(2){opacity:0}
body.is-menu .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Vollbildmenue */
.menu{
  position:fixed;inset:0;z-index:590;display:grid;align-content:center;
  padding:6rem var(--gut) 3rem;
  background:linear-gradient(180deg,#08222D 0%,var(--abyss) 100%);
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .8s var(--ease-out),visibility .8s;
}
body.is-menu .menu{clip-path:inset(0 0 0 0);visibility:visible}
.menu__item{
  display:flex;align-items:baseline;gap:1.2rem;
  padding-block:clamp(.5rem,1.6vh,1rem);border-bottom:1px solid var(--line);
  font-family:var(--serif);font-weight:300;font-size:clamp(2rem,8vw,3.4rem);line-height:1.15;
  opacity:0;transform:translateY(24px);
  transition:opacity .6s var(--ease),transform .6s var(--ease-out),color .3s;
}
body.is-menu .menu__item{opacity:1;transform:none;transition-delay:calc(.18s + var(--i) * .06s)}
.menu__item span{font:400 .7rem/1 var(--mono);color:var(--gold);letter-spacing:.12em}
.menu__item:hover{color:var(--gold-hi)}
.menu__foot{
  margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;
  font:400 .74rem/1 var(--mono);letter-spacing:.14em;color:var(--mist);
  opacity:0;transition:opacity .5s .5s var(--ease);
}
body.is-menu .menu__foot{opacity:1}

.prog{
  position:fixed;top:0;left:0;height:2px;z-index:700;width:100%;
  transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold),var(--gold-hi));
}

/* --- Held --------------------------------------------------------------- */
/* Der Held ist nicht mehr der erste Bildschirm — der Film steht darueber.
   Deshalb sitzt sein Inhalt oben statt unten und die Hoehe ist keine volle
   Schirmhoehe mehr: Vorher lag zwischen dem Video und der Vorzeile ein ganzer
   leerer Bildschirm, weil der Inhalt unten verankert war. Die Zahnraeder
   fuellen jetzt die Flaeche unter der Schrift — dort sitzt die Anordnung
   ohnehin.

   Kein overflow:hidden: Es war als Sicherung gedacht, konnte aber bei knappen
   Fenstern die Knoepfe abschneiden. Zu sichern gibt es nichts — Leinwand und
   Schleier liegen absolut auf inset:0, das Ersatz-SVG beschneidet sich selbst. */
.hero{
  position:relative;min-height:clamp(30rem,74svh,52rem);
  display:flex;align-items:flex-start;
  padding-block:clamp(1.6rem,3vh,2.6rem) clamp(3rem,7vh,4.5rem);
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
/* Ersatz, falls WebGL fehlt: dieselbe Mechanik als SVG. Sichtbar, bis JS
   uebernimmt — nichts verschwindet, weil ein Skript nicht laeuft. */
.hero__fallback{position:absolute;inset:0;z-index:0;opacity:.45;width:100%;height:100%}
.hero__fallback.is-off{display:none}
/* Konzentrische Kreise um den Gruppenursprung: mit fill-box liegt der
   Drehpunkt genau dort, wo er hingehoert. */
.fb-gear{transform-box:fill-box;transform-origin:center;animation:fbspin var(--dur,40s) linear infinite}
.fb-gear--rev{animation-direction:reverse}
@keyframes fbspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.fb-gear{animation:none}}
/* Der Schleier hat eine Aufgabe: Er macht die linke Haelfte lesbar, ohne das
   Werk auf der rechten auszuloeschen. Deshalb drei Lagen — von oben, von
   links und aus der Tiefe der Textecke. */
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(6,26,35,.80) 0%,rgba(6,26,35,.16) 30%,rgba(6,26,35,.62) 74%,var(--abyss) 100%),
    linear-gradient(96deg,rgba(6,26,35,.94) 0%,rgba(6,26,35,.74) 26%,rgba(6,26,35,.20) 56%,rgba(6,26,35,0) 78%),
    radial-gradient(64% 52% at 20% 66%,rgba(6,26,35,.62) 0%,rgba(6,26,35,0) 72%);
}
@media (max-width:899px){
  /* Einspaltig liegt die Schrift ueber dem ganzen Bild, nicht nur links. */
  .hero__veil{
    background:
      linear-gradient(180deg,rgba(6,26,35,.86) 0%,rgba(6,26,35,.52) 34%,rgba(6,26,35,.80) 72%,var(--abyss) 100%),
      radial-gradient(90% 60% at 40% 60%,rgba(6,26,35,.66) 0%,rgba(6,26,35,.1) 78%);
  }
}
.hero__in{position:relative;z-index:2;width:100%}
.hero__eyebrow{
  font:400 .7rem/1.6 var(--mono);letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);margin:0 0 clamp(1.4rem,3vh,2.2rem);
}
.hero .d1{max-width:19ch}
.hero__sub{margin-top:1.6rem;max-width:46ch;color:var(--mist);font-size:1.06rem}
/* Der Schriftzug steckt in einem Traeger, nicht direkt im Bild. Grund ist die
   helle Fassung: Dort wird die Datei als Maske benutzt, und eine Maske auf
   dem <img> selbst zeigt weiter dessen weisse Pixel. Der Traeger kann die
   Farbe tragen, das Bild darin wird dann ausgeblendet. */
.hero__sig{display:block;margin-top:1.9rem;width:clamp(140px,15vw,196px);opacity:.9}
.hero__sig img{width:100%;display:block}

/* Datenband. Steht bewusst unter dem Helden und nicht darin: sonst laeuft
   der erste Bildschirm auf niedrigen Fenstern unten ueber. */
.strip{border-block:1px solid var(--line);background:linear-gradient(180deg,rgba(15,57,74,.24),rgba(6,26,35,0))}
.facts{
  margin:0;display:grid;gap:1.4rem 2rem;
  padding-block:clamp(1.7rem,4vh,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.facts dt{font:400 .64rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--label)}
.facts dd{margin:.6rem 0 0;font-family:var(--serif);font-size:1.35rem;line-height:1.1;color:var(--pearl)}
.facts dd em{font-style:italic;color:var(--gold)}

.scroll-cue{
  position:absolute;right:var(--gut);bottom:clamp(2rem,5vh,3.5rem);z-index:2;
  display:none;align-items:center;gap:.8rem;
  font:400 .64rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--label);
}
@media (min-width:900px){.scroll-cue{display:flex}}
.scroll-cue u{position:relative;display:block;width:64px;height:1px;background:var(--gold-dim);overflow:hidden}
.scroll-cue i{
  position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--gold));
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.scroll-cue i{animation:none}}

/* --- Bildbehandlung -----------------------------------------------------
   Hier lag eine Nachtgradierung: `saturate(.74) contrast(1.05)
   brightness(.88)` auf dem Bild und darueber eine Multiply-Ebene, die von
   10 % oben auf 46 % unten zog und in den Ecken bis 52 % abdunkelte. Der
   Gedanke war, Aufnahmen aus verschiedenen Quellen wie eine Serie wirken zu
   lassen.

   Beides ist entfernt: Das Portraet soll in seinen eigenen Farben stehen.
   Der Gedanke traegt hier ohnehin nicht mehr — es ist das einzige Foto auf
   der Seite, es gibt keine Serie, an die es sich angleichen muesste. */
.fig{position:relative;overflow:hidden;background:var(--deep);isolation:isolate}
.fig img,.fig video{width:100%;display:block}
.fig--framed{border:1px solid var(--gold-dim);padding:.55rem;background:transparent}

/* --- Namenszeile am Portraet --------------------------------------------
   Sie stand vorher als Unterschrift an einem Zitat in der Textspalte. Mit
   dem Zitat ist sie dorthin gewandert, wo das Gesicht ist: mittig unter das
   Bild. Mittig zur Spalte heisst hier mittig zum Portraet — die gerahmte
   Aufnahme fuellt die Spalte vollstaendig aus. */
.portraet__name{
  margin:clamp(1.1rem,2.4vh,1.6rem) 0 0;text-align:center;
  /* Absaetze sind global auf 64 Zeichen begrenzt — als Lesebreite richtig,
     hier falsch: Der Kasten war 430 statt 514 Pixel breit und die Zeile
     sass damit 42 Pixel links neben der Bildmitte. Gemessen, nicht
     geschaetzt. */
  max-width:none;
  font:400 .7rem/1.6 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--label);
}
.portraet__name b{
  display:block;margin-bottom:.35rem;
  color:var(--gold);font-weight:500;letter-spacing:.16em;
}

/* --- Film ---------------------------------------------------------------
   Das Video laeuft stumm in Schleife, sobald es ins Bild kommt — man sieht
   sofort, dass es einen Film gibt, statt es hinter einem Knopf zu vermuten.

   Die schwarzen Balken sind im Video FEST eingebrannt, je rund 9 % der
   Hoehe; uebrig bleibt ein Bild im Verhaeltnis 2,17:1. Deshalb bekommt das
   Band genau dieses Verhaeltnis: `object-fit:cover` skaliert das Video dann
   auf die Breite, und der Beschnitt oben und unten trifft haargenau die
   Balken. Schmaler als 820 px waere ein 2,17-Streifen nur noch ein Schlitz —
   dort wird das Band hoeher und das Video stattdessen leicht vergroessert
   (1 / (1 − 2 × 0,09) ≈ 1,223), was die Balken ebenso hinausschiebt. */
.film__band{
  position:relative;overflow:hidden;aspect-ratio:2.17;
  border-block:1px solid var(--gold-dim);background:#000;
}
/* Vor dem ersten Bild ist ein <video> schwarz. Da der Film jetzt ganz oben
   steht, waere das der erste Eindruck der Seite. Deshalb blendet er sich ein,
   sobald er wirklich laeuft — bis dahin sieht man den gestalteten Grund des
   Bandes, nicht ein schwarzes Rechteck. */
.film__vid{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .8s var(--ease)}
.film__band.is-laeuft .film__vid{opacity:1}
@media (prefers-reduced-motion:reduce){.film__vid{transition:none}}
@media (max-width:820px){
  .film__band{aspect-ratio:4/3}
  .film__vid{transform:scale(1.223)}
}

/* Verlauf nach unten, damit die Bedienelemente auf Grund stehen. */
.film__band::after{
  content:"";position:absolute;inset:auto 0 0;height:45%;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,26,35,0),rgba(6,26,35,.78));
}

.film__ctrl{
  position:absolute;right:clamp(1rem,3vw,2.2rem);bottom:clamp(1rem,3vw,2.2rem);
  z-index:2;display:flex;gap:.7rem;
}
.film__btn{
  display:inline-flex;align-items:center;gap:.6rem;padding:.75rem 1.15rem;
  border:1px solid var(--gold-dim);color:var(--pearl);
  background:rgba(6,26,35,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font:400 .68rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease);
}
.film__btn:hover,.film__btn:focus-visible{border-color:var(--gold);color:var(--gold-hi);background:rgba(6,26,35,.75)}
.film__btn[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}

/* Startknopf. Erscheint nur, wenn der Browser das Selbststarten verweigert
   — Datensparmodus, Energiesparmodus, reduzierte Bewegung. Ohne ihn stuende
   dort eine schwarze Flaeche ohne jeden Hinweis. */
.film__start{
  position:absolute;inset:0;z-index:3;display:none;place-content:center;
  justify-items:center;gap:1rem;width:100%;
}
.film__band.is-manual .film__start{display:grid}
.film__ring{
  width:clamp(62px,7vw,84px);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--gold);display:grid;place-content:center;
  background:rgba(6,26,35,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .45s var(--ease),transform .45s var(--ease-out);
}
.film__ring::before{
  content:"";width:0;height:0;margin-left:4px;
  border-left:13px solid var(--gold);border-block:9px solid transparent;
  transition:border-color .45s var(--ease);
}
.film__start:hover .film__ring{background:var(--gold);transform:scale(1.06)}
.film__start:hover .film__ring::before{border-left-color:var(--abyss)}
.film__start span{
  font:400 .68rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:var(--pearl);text-shadow:0 1px 12px rgba(6,26,35,.9);
}

.film__cap{
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:1.2rem;
  font:400 .66rem/1.6 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--label);
}
.film__cap b{font-weight:500;color:var(--gold)}

/* Der kleine Film aus der Finca. Er steht in der Seitenspalte unter dem
   Portrait und bleibt bewusst schmal: Er illustriert, er fuehrt nicht.

   Die Skalierung des grossen Bandes wird hier zurueckgenommen — sie
   existiert nur, um die eingebrannten Balken des Agenturfilms hinauszu-
   schieben. Der Finca-Film ist ein Hochformat ohne Balken; ihn zu
   vergroessern wuerde nur beschneiden. */
/* Der Finca-Film ist ein Hochformat (720 x 1280). Ein 4:5-Ausschnitt hat davon
   rund 30 % der Hoehe abgeschnitten. Damit nichts verloren geht und der Block
   trotzdem breit steht, laeuft das Bild jetzt vollstaendig (`contain`) auf
   einer breiten Buehne — die uebliche Loesung fuer Hochkantvideo in einem
   Querformat-Layout. Die Seitenflaechen tragen einen weichen Verlauf, damit
   sie als gesetzt gelesen werden und nicht als Fehler.

   Die sichtbare Bildhoehe haengt an der Buehnenhoehe: Breiter machen und
   gleichzeitig groesser zeigen geht nicht. 3:2 bei 860 px ist der Punkt, an
   dem beides zusammen am besten aufgeht — das Bild wird groesser als vorher
   (322 x 573 statt 300 x 375 beschnitten) und der Block wirkt breit. */
.film__band--klein{
  aspect-ratio:3/2;width:100%;max-width:860px;margin-top:clamp(2rem,4vh,2.8rem);
  border:1px solid var(--gold-dim);
  background:radial-gradient(72% 92% at 50% 50%,rgba(15,57,74,.55) 0%,rgba(6,26,35,.94) 100%);
}
.film__band--klein::after{display:none}
.film__band--klein .film__vid{object-fit:contain;transform:none}
@media (max-width:820px){
  /* Schmal waere eine breite Buehne nur noch ein Schlitz: Bei 335 px Breite
     blieben dem Bild 223 px Hoehe. Deshalb steht der Film hier im eigenen
     Format und fuellt die Flaeche ganz. */
  .film__band--klein{aspect-ratio:9/16;width:min(86%,320px);max-width:320px}
  .film__band--klein .film__vid{object-fit:cover;transform:none}
}
.film__band--klein .film__ring{width:46px;height:46px}
.film__band--klein .film__ring::before{border-left-width:9px;border-block-width:6px;margin-left:2px}
.film__band--klein .film__start{gap:.6rem}
.film__band--klein .film__start span{font-size:.6rem;letter-spacing:.14em}
/* Der Finca-Film steht allein zwischen "Ueber uns" und den Leistungen. Mittig
   und klein: Er ist ein Atemzug zwischen dem persoenlichen Teil und der Liste,
   kein zweiter Hauptdarsteller. Die Zeile darunter ist deshalb auch keine
   Bildunterschrift, sondern ein Satz — gesetzt wie ein Zitat. */
.finca__in{display:grid;justify-items:center;text-align:center}
.finca__in .film__band--klein{margin-top:0}
.finca__satz{
  margin:clamp(1.3rem,3vh,2rem) 0 0;max-width:20ch;
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.35rem,1.1rem + 1.1vw,2.1rem);line-height:1.3;
  color:var(--gold-hi);
}

/* Der Film ist der erste Abschnitt der Seite: Kopfzeile, dann sofort das Band.
   Die Kopfzeile liegt fest darueber, deshalb braucht das Band genau so viel
   Polster, dass es darunter hervorkommt — mehr waere eine Luecke, weniger
   verschwaende die erste Sekunde. Die Ueberschrift steht hier unter dem Bild,
   nicht darueber; sonst stuende Text vor dem, was sofort zu sehen sein soll. */
/* Das Polster richtet sich nach der Breite, nicht nach der Hoehe: Die
   Kopfzeile waechst mit der Breite mit (Logo und Innenabstand haengen an vw)
   und misst zwischen rund 70 px auf dem Telefon und 102 px auf einem breiten
   Schirm. Mit vh gerechnet waere das Band bei 1280 px acht Pixel darunter
   verschwunden. */
.film--erst{padding-top:clamp(8rem,10.5vw,9.8rem);padding-bottom:clamp(1.2rem,2.2vh,1.8rem)}
/* Unter 420 px bricht die Ortszeile auf drei bis vier Zeilen um, weil die
   Wortmarke neben Sprachwechsel und Menueknopf schmaler wird. Gemessen:
   138 px Kopfzeile bei 320 px Breite gegen 128 px Polster — das Band waere
   zehn Pixel darunter verschwunden. */
@media (max-width:420px){.film--erst{padding-top:9.5rem}}
.film__unten{padding-top:clamp(1.6rem,3.5vh,2.5rem)}
.film__unten .mark{margin-bottom:1.2rem}

/* --- Nutzen -------------------------------------------------------------
   Die Linie sitzt auf den Eintraegen, nicht auf dem Raster: Sieben Punkte
   in zwei Spalten lassen eine Zelle frei — laege die Linie auf der Flaeche,
   zoege sie dort ins Leere. */
.bens{display:grid;gap:0 clamp(2.4rem,5vw,5rem);margin-top:clamp(2.4rem,6vh,3.6rem)}
@media (min-width:900px){.bens{grid-template-columns:1fr 1fr}}
.ben{
  display:grid;grid-template-columns:auto 1fr;gap:0 1.3rem;
  padding:1.45rem 0;border-top:1px solid var(--line);
}
.ben__no{grid-row:1 / span 2;font:400 .68rem/1.7 var(--mono);letter-spacing:.1em;color:var(--gold)}
.ben h3{margin:0;font-family:var(--sans);font-weight:400;font-size:1.02rem;line-height:1.5;color:var(--pearl)}
.ben p{margin:.35rem 0 0;font-size:.95rem;line-height:1.65;color:var(--mist);max-width:42ch}
.bens__sig{
  margin:clamp(2rem,5vh,3rem) 0 0;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.3rem,1.1rem + .9vw,1.9rem);line-height:1.3;color:var(--gold-hi);
}

/* --- Leistungen --------------------------------------------------------- */
.svc__col + .svc__col{margin-top:clamp(3rem,6vh,4.5rem)}
@media (min-width:900px){.svc__col + .svc__col{margin-top:0}}
.svc__title{
  display:flex;align-items:center;gap:1rem;margin:0 0 1.6rem;
  font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,1.1rem + .8vw,1.75rem);
  color:var(--gold-hi);
}
.svc__title svg{flex:0 0 auto;width:26px;height:26px;color:var(--gold)}
.svc__title svg .cog{transform-origin:50% 50%;transition:transform .9s var(--ease-out)}
.svc__claim{
  margin:-.9rem 0 1.6rem;padding-left:calc(26px + 1rem);
  font:400 .68rem/1.6 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--label);
}

/* Beide Spalten teilen sich dieselben Zeilen: Ueberschrift, Beizeile, Liste.
   Damit beginnen die Listen auf gleicher Hoehe, egal wie lang eine Beizeile
   umbricht. Eine geratene Mindesthoehe waere nur bei einer Breite richtig. */
@media (min-width:900px){
  .split--rows{grid-template-rows:auto auto auto}
  .split--rows > .svc__col{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}
}
/* Ohne subgrid bleibt es beim alten Verhalten — dann faengt die Beizeile den
   Unterschied wenigstens bis zwei Zeilen ab. */
@supports not (grid-template-rows:subgrid){
  @media (min-width:900px){ .svc__claim{min-height:3.5em} }
}

.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;display:flex;align-items:center;gap:1.1rem;
  padding:1.35rem 0;text-align:left;color:var(--pearl);
  font-family:var(--sans);font-weight:400;font-size:1.02rem;
  transition:color .4s var(--ease);
}
.acc__btn:hover,.acc__btn[aria-expanded="true"]{color:var(--gold-hi)}
.acc__no{font:400 .68rem/1 var(--mono);color:var(--gold);letter-spacing:.1em;flex:0 0 auto}
.acc__lbl{flex:1}
.acc__pm{position:relative;width:14px;height:14px;flex:0 0 auto}
.acc__pm::before,.acc__pm::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;
  transition:transform .5s var(--ease-out),opacity .3s;
}
.acc__pm::after{transform:rotate(90deg)}
.acc__btn[aria-expanded="true"] .acc__pm::after{transform:rotate(0);opacity:0}
.acc__pnl{height:0;overflow:hidden;transition:height .55s var(--ease-out)}
.acc__pnl > div{padding:0 0 1.6rem 2.4rem;color:var(--mist);max-width:56ch}
@media (prefers-reduced-motion:reduce){.acc__pnl{transition:none}}

/* --- Inselwissen --------------------------------------------------------
   Die Grafiken sind Bilder von Text. Schoen gesetzt, aber Google liest sie
   nicht, Screenreader auch nicht, und auf dem Telefon werden aus 1254 px
   Kantenlaenge etwa 350 — die Beschreibungszeilen landen bei vier Pixel.

   Deshalb steht das Wichtigste zusaetzlich als echter Text: die Notrufnummern.
   Bei einer Notfallliste ist "abtippen statt antippen" kein Schoenheitsfehler,
   sondern hebt den Zweck auf. */
.notfall{
  border:1px solid var(--gold-dim);background:var(--gold-ghost);
  padding:clamp(1.3rem,3vw,2rem) clamp(1.3rem,3vw,2.2rem);
}
.notfall > .mark{margin-bottom:1.1rem}
.notruf{list-style:none;margin:0;padding:0}
.notruf li + li{border-top:1px solid var(--line)}
.notruf a{
  display:grid;grid-template-columns:5.6ch 1fr;gap:.15rem 1.1rem;
  padding:.85rem 0;align-items:baseline;
  transition:color .35s var(--ease);
}
.notruf a:hover,.notruf a:focus-visible{color:var(--gold-hi)}
.notruf__nr{
  grid-row:1 / span 2;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,1.3rem + .5vw,1.9rem);line-height:1;color:var(--gold-hi);
  white-space:nowrap;
}
.notruf a:hover .notruf__nr{color:var(--gold)}
.notruf__was{font-size:1rem;line-height:1.4;color:var(--pearl)}
.notruf__zu{font-size:.9rem;line-height:1.5;color:var(--mist)}
/* Die lange Rufnummer der Pannenhilfe passt nicht in die schmale Spalte. */
.notruf li:last-child a{grid-template-columns:1fr}
.notruf li:last-child .notruf__nr{grid-row:auto;font-size:1.35rem;margin-bottom:.2rem}

/* Raster der Grafiken. Alle Karten sind quadratisch — eine der Vorlagen ist
   hochkant und wird oben angeschnitten; vollstaendig steht sie im Lichtkasten. */
.guides{
  display:grid;gap:clamp(.9rem,1.8vw,1.4rem);
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}
.guide{
  display:block;padding:0;text-align:left;overflow:hidden;
  border:1px solid var(--gold-dim);background:none;
  transition:border-color .45s var(--ease);
}
.guide:hover,.guide:focus-visible{border-color:var(--gold)}
.guide img{
  width:100%;aspect-ratio:1;object-fit:cover;object-position:top;display:block;
  filter:brightness(.94);
  transition:transform .9s var(--ease-out),filter .5s var(--ease);
}
.guide:hover img{transform:scale(1.035);filter:brightness(1)}
.guide__t{
  display:block;padding:.85rem 1rem;
  font:500 .72rem/1.45 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--label);transition:color .35s var(--ease);
}
.guide:hover .guide__t,.guide:focus-visible .guide__t{color:var(--gold-hi)}

/* Lichtkasten fuer die Grafiken in voller Groesse. */
.lb{
  position:fixed;inset:0;z-index:800;display:grid;place-items:center;
  padding:clamp(1rem,4vw,2.5rem);
  background:rgba(4,17,23,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
.lb.is-open{opacity:1;visibility:visible}
.lb__img{
  max-width:min(96vw,860px);max-height:88vh;width:auto;height:auto;display:block;
  border:1px solid var(--gold-dim);transform:scale(.97);
  transition:transform .55s var(--ease-out);
}
.lb.is-open .lb__img{transform:scale(1)}
.lb__x{
  position:absolute;top:clamp(.8rem,3vw,1.8rem);right:clamp(.8rem,3vw,1.8rem);
  width:48px;height:48px;display:grid;place-content:center;
  border:1px solid rgba(243,240,234,.22);color:#F3F0EA;background:rgba(6,26,35,.5);
  transition:border-color .4s,color .4s,transform .4s var(--ease);
}
.lb__x:hover{border-color:var(--gold);color:var(--gold);transform:rotate(90deg)}

/* --- Kontakt ------------------------------------------------------------ */
.dl{margin:0;display:grid;gap:1.7rem}
.dl__row dt{font:400 .64rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--label)}
.dl__row dd{margin:.65rem 0 0;font-size:1.06rem;color:var(--pearl)}
.dl__row dd a{transition:color .35s var(--ease)}
.dl__row dd a:hover{color:var(--gold)}
.tel-big{
  font-family:var(--serif);font-size:clamp(1.9rem,1.3rem + 2vw,3rem);
  line-height:1.1;color:var(--gold-hi);display:inline-block;
}
.tel-big:hover{color:var(--gold)}

.form{display:grid;gap:1.4rem;margin-top:.4rem}
.f{position:relative}
.f input,.f textarea{
  width:100%;background:transparent;color:var(--pearl);
  border:0;border-bottom:1px solid var(--line);
  padding:1.5rem 0 .7rem;font:300 1.02rem/1.5 var(--sans);
  transition:border-color .4s var(--ease);
}
.f textarea{resize:vertical;min-height:7.5rem}
.f label{
  position:absolute;left:0;top:1.5rem;pointer-events:none;
  font:400 .74rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--label);transform-origin:left;
  transition:transform .42s var(--ease-out),color .42s var(--ease);
}
.f input:focus,.f textarea:focus{outline:0;border-bottom-color:var(--gold)}
.f input:focus + label,.f textarea:focus + label,
.f input:not(:placeholder-shown) + label,.f textarea:not(:placeholder-shown) + label{
  transform:translateY(-1.55rem) scale(.86);color:var(--gold);
}
.f input::placeholder,.f textarea::placeholder{color:transparent}

.check{display:flex;gap:.9rem;align-items:flex-start;cursor:pointer;font-size:.92rem;line-height:1.6;color:var(--mist)}
.check input{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:18px;height:18px;margin-top:.28rem;border:1px solid var(--line);
  background:transparent;display:grid;place-content:center;
  transition:border-color .35s,background .35s;
}
.check input::before{content:"";width:8px;height:8px;background:var(--gold);transform:scale(0);transition:transform .3s var(--ease-out)}
.check input:checked{border-color:var(--gold)}
.check input:checked::before{transform:scale(1)}
.check a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* Honigtopf: fuer Menschen unsichtbar, aber bewusst nicht display:none —
   das erkennen manche Skripte und lassen das Feld dann leer. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.note{margin-top:1rem;padding:1rem 1.2rem;border-left:2px solid var(--gold);background:var(--gold-ghost);font-size:.92rem;color:var(--pearl)}
.note--bad{border-left-color:#E2745F;background:rgba(226,116,95,.1)}

/* --- Fusszeile ---------------------------------------------------------- */
.ft{border-top:1px solid var(--line);padding-block:clamp(3rem,7vh,4.5rem) 2.5rem}
.ft__top{display:grid;gap:2.5rem;align-items:center}
@media (min-width:820px){.ft__top{grid-template-columns:auto 1fr auto}}
.ft__logo img{width:132px;opacity:.85}
.ft__nav{display:flex;flex-wrap:wrap;gap:1.4rem 2rem}
@media (min-width:820px){.ft__nav{justify-content:center}}
.ft__nav a{font:400 .72rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mist);transition:color .35s}
.ft__nav a:hover{color:var(--gold)}
.ft__bot{
  margin-top:clamp(2.5rem,5vh,3.5rem);padding-top:1.6rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;
  font:400 .68rem/1.7 var(--mono);letter-spacing:.12em;color:var(--label);
}

/* --- Rechtstexte -------------------------------------------------------- */
.legal{padding-block:clamp(8rem,16vh,11rem) var(--sec)}
.legal__body{max-width:76ch}
.legal__body h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,1.2rem + 1.1vw,2.1rem);line-height:1.2;
  margin:clamp(2.6rem,6vh,4rem) 0 1rem;color:var(--gold-hi);
}
.legal__body h3{font-family:var(--sans);font-weight:400;font-size:1.08rem;margin:2.2rem 0 .8rem;color:var(--pearl)}
.legal__body p{color:var(--mist);max-width:none}
.legal__body a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.legal__meta{
  margin:0 0 clamp(2.5rem,6vh,4rem);padding:1.6rem 0;border-block:1px solid var(--line);
  display:grid;gap:1.2rem 2.5rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.legal__meta dt{font:400 .64rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--label)}
.legal__meta dd{margin:.55rem 0 0;color:var(--pearl);font-size:1rem;line-height:1.6}

/* --- Bewegung ----------------------------------------------------------- */
/* Versteck-Regeln haengen an einer Klasse, die erst JS setzt. Ohne Skript
   ist alles sichtbar — das ist der garantierte Weg zurueck. */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .95s var(--ease),transform 1.05s var(--ease-out)}
.js .rv.is-in{opacity:1;transform:none}
.js .rv[data-cascade] > *{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .9s var(--ease-out)}
.js .rv[data-cascade].is-in > *{opacity:1;transform:none}
.js .rv[data-cascade].is-in > *:nth-child(1){transition-delay:.02s}
.js .rv[data-cascade].is-in > *:nth-child(2){transition-delay:.10s}
.js .rv[data-cascade].is-in > *:nth-child(3){transition-delay:.18s}
.js .rv[data-cascade].is-in > *:nth-child(4){transition-delay:.26s}
.js .rv[data-cascade].is-in > *:nth-child(5){transition-delay:.34s}
.js .rv[data-cascade].is-in > *:nth-child(6){transition-delay:.42s}
.js .rv[data-cascade].is-in > *:nth-child(n+7){transition-delay:.5s}

/* Aufsteigende Ueberschrift. Die Animation endet mit forwards — sonst faellt
   die Zeile am Ende in den Ausgangszustand zurueck und ist wieder weg. */
.js .rise{overflow:hidden;display:block}
.js .rise > span{display:block;transform:translateY(102%)}
.js .rise.is-in > span{animation:rise 1.15s var(--ease-out) forwards}
@keyframes rise{to{transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv[data-cascade] > *{opacity:1;transform:none;transition:none}
  .js .rise > span{transform:none;animation:none}
}

/* --- Telefon -------------------------------------------------------------
   Auf dem Telefon wird nicht gezeigt, sondern getroffen. Die Links in
   Fusszeile und Menuefuss waren zwoelf Pixel hoch und die Sprachwahl elf —
   mit dem Daumen praktisch nicht zu erwischen. Alles Antippbare bekommt hier
   mindestens 44 px Hoehe, und keine Beschriftung faellt unter elf Pixel.

   Die Flaeche waechst ueber `min-height`, nicht ueber Schriftgroesse: Das
   Schriftbild bleibt, nur der Griff wird groesser. */
@media (max-width:820px){
  .ft__nav a,.menu__foot > a,.dl__row dd a{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .lang a{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;min-width:36px;
  }
  .tel-big{padding-block:.5rem}
  .film__btn{padding-block:.85rem}
  .film__start span,.film__band--klein .film__start span{font-size:.68rem}
  .scroll-cue,.facts dt,.dl__row dt,.legal__meta dt{font-size:.68rem}
  /* Groessere Zeile braucht mehr Raum, sonst bricht sie um und die Kopfzeile
     waechst — dann stuende das Filmband wieder zu dicht darunter. */
  .hd__claim{font-size:.68rem;max-width:19rem}

  /* Einspaltig war das Inselwissen 4800 px hoch — sechs Bildschirme fuer einen
     Abschnitt. Zwei Spalten halbieren das. Die Vorschau ist ohnehin nur ein
     Wiedererkennungszeichen; gelesen wird die Grafik erst im Lichtkasten,
     und der Titel darunter sagt, worum es geht. */
  .guides{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
  .guide__t{padding:.7rem .75rem;letter-spacing:.1em;font-size:.68rem}
}

/* --- Zeiger ------------------------------------------------------------- */
.cur{
  position:fixed;top:0;left:0;z-index:8000;pointer-events:none;
  width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  border:1px solid var(--gold-dim);opacity:0;
  transition:width .35s var(--ease-out),height .35s var(--ease-out),
             margin .35s var(--ease-out),border-color .35s,opacity .3s,background .35s;
}
.cur.is-on{opacity:1}
.cur.is-mesh{width:52px;height:52px;margin:-26px 0 0 -26px;border-color:var(--gold);background:rgba(201,158,90,.09)}
@media (hover:none),(pointer:coarse){.cur{display:none}}

/* --- Seitenuebergang ---------------------------------------------------- */
@view-transition{navigation:auto}

/* --- Lichtkasten als Mappe ----------------------------------------------
   Neun Grafiken, die man einzeln oeffnen und schliessen muss, sind neun
   Grafiken, von denen man zwei anschaut. Deshalb blaettert der Kasten:
   Pfeile, Tasten, Wischen — und eine Zeile, die sagt, wo man steht.

   Feste Farbwerte statt Token: Der Kasten ist in beiden Entwuerfen dunkel,
   Auf diesem Grund wuerden helle Token
   das Gegenteil von dem bedeuten, was sie sollen. */

/* Die Buehne bleibt das eine mittige Kind — sonst schliesst der Klick
   daneben nicht mehr. */
.lb__buehne{
  margin:0;display:grid;justify-items:center;
  gap:clamp(.8rem,2vh,1.15rem);max-width:min(96vw,860px);
}
/* Die 88vh oben waren fuer ein Bild ohne Zeile gerechnet. */
.lb__img{max-height:74vh}

.lb__leiste{
  display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;
  gap:.5rem clamp(.9rem,3vw,1.6rem);text-align:center;
  font:500 .72rem/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;
}
.lb__titel{color:#F3F0EA}          /* 14,1:1 */
.lb__zaehler{
  color:rgba(243,240,234,.6);white-space:nowrap;  /* 5,6:1 */
  font-variant-numeric:tabular-nums;   /* sonst springt die Zeile bei 1 auf 2 */
}
.lb__zaehler s{text-decoration:none;margin:0 .4em;opacity:.55}
.lb__ist{color:#B08D57}             /* 5,6:1 */

/* Die Pfeile sitzen wie das Kreuz absolut im Kasten, nicht im Raster. */
.lb__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:56px;height:56px;display:grid;place-content:center;
  font:400 1.05rem/1 var(--mono);
  border:1px solid rgba(243,240,234,.22);color:#F3F0EA;background:rgba(6,26,35,.5);
  transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease);
}
.lb__nav:hover,.lb__nav:focus-visible{
  border-color:#B08D57;color:#B08D57;background:rgba(6,26,35,.78);
}
.lb__nav--zurueck{left:clamp(.6rem,2.5vw,1.6rem)}
.lb__nav--vor{right:clamp(.6rem,2.5vw,1.6rem)}

/* Am Handy unten in den Ecken: mit dem Daumen erreichbar, und dort liegen
   sie auf keinem Bildinhalt. */
/* --- Lesbarkeit auf dem Telefon -----------------------------------------
   Gemessen standen fast alle gesperrten Kapitaelchen bei 10,9 px: Marken,
   Ordnungszahlen, Feldnamen, Kartentitel, Fusszeile. Am Schreibtisch geht
   das durch, in Armlaenge und bei Sonne nicht.

   Sie gehen deshalb auf 12 px. Die Sperrung nimmt im selben Zug ab — 0,2 em
   auf 12 px braucht mehr Platz, als eine 335 Pixel breite Spalte hergibt,
   und die Zeilen begaennen umzubrechen. Weniger Sperrung, mehr Groesse:
   Der Charakter bleibt, die Zeile wird lesbar.

   Nicht angefasst: der Fliesstext. Er steht bei 15,2 px auf 36 bis 39
   Zeichen je Zeile und ist damit richtig. */
@media (max-width:820px){
  .mark,.svc__claim,.acc__no,.ben__no,.cta__note,.portraet__name,
  .facts dt,.dl__row dt,.legal__meta dt,.notfall dt,
  .guide__t,.ft__nav a,.ft__bot,.f label,.lang,.tl,.wl__bild,
  .film__btn,.film__start span,.menu__foot{
    font-size:.75rem;letter-spacing:.12em;
  }
  /* Die Ortszeile im Kopf darf nur wenig wachsen: Sie steht neben
     Sprachwechsel und Menueknopf, und jede zusaetzliche Zeile schiebt die
     Kopfzeile weiter ueber das Filmband. */
  /* Groesser ja, aber die Zeile muss in zwei Zeilen passen. Mit 0,1 em
     Sperrung brach sie bei 360 px auf drei um, und die feste Kopfzeile
     wuchs von 108 auf 144 px — ein Sechstel des Bildschirms, dauerhaft
     belegt. Weniger Sperrung kauft die Zeile zurueck. */
  .hd__claim{font-size:.72rem;letter-spacing:.04em}

  /* 90 x 40 gemessen — unter dem Mindestmass fuer einen Daumen. */
  .film__btn{min-height:44px;padding-block:.7rem}

  /* Das Kaestchen war 18 px. Antippbar ist ohnehin die ganze Zeile, weil
     das Label das Feld umschliesst — aber 18 px liest sich als Zierrat,
     nicht als Schalter. */
  .check input{width:22px;height:22px;margin-top:.15rem}
  .check input::before{width:10px;height:10px}
}

@media (max-width:820px){
  .lb__nav{top:auto;bottom:clamp(.7rem,3vw,1.4rem);transform:none;width:52px;height:52px}
  .lb__nav--zurueck{left:clamp(.7rem,4vw,1.4rem)}
  .lb__nav--vor{right:clamp(.7rem,4vw,1.4rem)}
  .lb__img{max-height:62vh}
}

/* --- Tiefe ---------------------------------------------------------------
   Das Fenster ist nur da, um zu beschneiden. Ohne es waechst das um 6 %
   vorgedehnte Portraet beim Mitlaufen in den Rahmenfalz. 21,6 px Ueberstand
   je Seite gegen 14 px Hoechstweg — es kann keine Kante frei werden. */
.fig__fenster{display:block;overflow:hidden;line-height:0}

/* Die Klasse setzt das Skript; ohne Maus bleibt alles flach. Kein
   `will-change` — neun Karten dauerhaft auf eigener Ebene kosten mehr, als
   die halbe Millisekunde beim Kippen einbringt. */
.guides.is-tief .guide{
  transition:border-color .45s var(--ease),transform .45s var(--ease-out);
}

/* --- Punkt 3: Inselwissen ---------------------------------------------
   Die Ziehharmonika kommt unveraendert aus site.css. Hier steht nur, was
   im aufgeklappten Feld liegt. */

/* Fuer Vorleseprogramme da, fuer das Auge nicht. Der Lichtkasten liest
   seinen Titel aus `.guide__t` — der Titel muss also im Text stehen, ohne
   den Knopf zu verdoppeln. */
.nur-sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.wl{
  margin:0;padding:0;list-style:none;
  display:grid;gap:.9rem;max-width:52rem;
}
.wl li{
  display:grid;gap:.2rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--line);
}
.wl li:last-child{border-bottom:0;padding-bottom:0}
.wl b{
  font-family:var(--sans);font-weight:400;font-size:1.02rem;line-height:1.4;
  color:var(--pearl);
}
.wl span{font-size:.95rem;line-height:1.65;color:var(--mist)}

/* Der Weg zur Grafik. Sie ist nicht verschwunden — sie ist nur nicht mehr
   der einzige Traeger des Inhalts. */
.wl__bild{
  margin-top:1.5rem;padding:.55rem 0;background:none;border:0;
  display:inline-flex;align-items:center;min-height:44px;
  font:500 .68rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--label);
  border-bottom:1px solid var(--gold-dim);
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.wl__bild::after{content:" ↗";letter-spacing:0}
.wl__bild:hover,.wl__bild:focus-visible{color:var(--gold-hi);border-color:var(--gold)}

@media (max-width:820px){
  .wl b{font-size:.98rem}
  .wl span{font-size:.92rem}
  /* Muss hier stehen, nicht im Lesbarkeitsblock weiter oben: Die
     Grundregel fuer `.wl__bild` folgt erst danach und wuerde eine
     fruehere Angabe gleicher Staerke schlagen. */
  .wl__bild{padding-block:.8rem;font-size:.75rem;letter-spacing:.12em}
  .menu__item span{font-size:.75rem}
  .lb__ist,.lb__von,.lb__zaehler{font-size:.75rem}
}

/* Hart bremsend, ohne Nachfedern. Ein Bauteil, das einrastet, schwingt
   nicht nach — es kommt an und steht. Genau das trennt die Bewegung von
   der Weichzeichner-Blende, die vorher auf jedem Block lag. */
:root{ --rast:cubic-bezier(.2,.86,.24,1); }

/* --- A: Einrasten statt Aufblenden --------------------------------------

   Der Kniff steckt in den Zeiten, nicht im Weg. Vorher liefen Deckkraft
   und Bewegung gleich lang (0,95 s / 1,05 s) — dadurch *war* die Bewegung
   die Blende. Jetzt ist die Deckkraft nach 0,22 s fertig und die Bewegung
   laeuft noch 0,4 s weiter: Man sieht das Bauteil ankommen und sich
   setzen, statt es erscheinen zu sehen.

   Der Weg ist von 28 auf 10 Pixel gekuerzt. Weite Wege lesen sich als
   Schweben; kurze als Fassung. */
.js .rv{
  opacity:0;transform:translateY(10px);
  transition:opacity .22s linear, transform .62s var(--rast);
}
.js .rv.is-in{opacity:1;transform:none}

/* Nacheinander, aber knapper. 0,08 s Abstand war eine Welle; 0,055 s ist
   ein Takt. */
.js .rv[data-cascade] > *{
  opacity:0;transform:translateY(8px);
  transition:opacity .2s linear, transform .5s var(--rast);
}
.js .rv[data-cascade].is-in > *{opacity:1;transform:none}
.js .rv[data-cascade].is-in > *:nth-child(1){transition-delay:0s}
.js .rv[data-cascade].is-in > *:nth-child(2){transition-delay:.055s}
.js .rv[data-cascade].is-in > *:nth-child(3){transition-delay:.11s}
.js .rv[data-cascade].is-in > *:nth-child(4){transition-delay:.165s}
.js .rv[data-cascade].is-in > *:nth-child(5){transition-delay:.22s}
.js .rv[data-cascade].is-in > *:nth-child(6){transition-delay:.275s}
.js .rv[data-cascade].is-in > *:nth-child(n+7){transition-delay:.33s}

/* Ueberschriften kommen weiter aus der Fassung heraus und brauchen
   deshalb laenger — aber mit derselben Kurve. Verschiedene Gewichte,
   dieselbe Mechanik. */
.js .rise.is-in > span{animation:rise .78s var(--rast) forwards}

/* Die Haarlinie neben den Abschnittsmarken zieht sich selbst, statt
   fertig dazustehen. Sie beginnt nach der Schrift — erst das Bauteil,
   dann die Linie, die es anschliesst. */
.js .mark::after{transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--rast) .18s}
.js .rv.is-in .mark::after,
.js .mark.rv.is-in::after,
.js .is-in > .mark::after{transform:scaleX(1)}

/* Bilder blenden nicht auf, sie werden aufgezogen. Eine Blende ist ein
   Weichzeichner; ein Schieber ist eine Bewegung. Deshalb hier kein
   Versatz, sondern ein Schnitt, der aufgeht. */
.js .fig.rv{transform:none;clip-path:inset(0 100% 0 0);
  transition:opacity .18s linear, clip-path .82s var(--rast)}
.js .fig.rv.is-in{clip-path:inset(0 0 0 0)}

/* --- B: Der Riementrieb -------------------------------------------------

   Eine Haarlinie im linken Rand, darauf sitzende Raeder. Der Trieb ist
   nicht dekorativ mitgedreht: Es ist ein offener Riemen, also drehen alle
   Raeder gleich herum, und die Winkelgeschwindigkeit ist umgekehrt
   proportional zum Radius. Ein grosses Rad geht langsam, ein kleines
   schnell — das ist der Grund, warum es als Antrieb liest und nicht als
   Effekt.

   Das Skript setzt Lage und Breite; es steht bewusst nicht hier, weil
   beides von der gemessenen Spalte abhaengt, nicht von einem Rasterwert. */
/* Lage und Hoehe setzt das Skript: Der Trieb beginnt erst beim Textteil,
   nicht ueber dem Film und nicht ueber dem Datenband. */
.welle{
  position:absolute;top:0;height:0;width:2px;
  pointer-events:none;z-index:1;
}
.welle__spur,.welle__fuell{
  position:absolute;left:0;top:0;width:1px;height:100%;
}
.welle__spur{background:var(--gold-dim);opacity:.5}
.welle__fuell{
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));
  transform:scaleY(0);transform-origin:top;
}
.welle__rad{
  position:absolute;left:50%;
  /* site.css setzt `max-width:100%` auf alle Grafiken. Der Traeger ist
     zwei Pixel breit — damit wurde das Rad auf zwei Pixel geklemmt,
     waehrend die Hoehe stehen blieb. Gemessen: 2 statt 40. */
  max-width:none;
  color:var(--gold);opacity:.62;
  transform-origin:50% 50%;
  will-change:transform;
}
.welle__rad path{fill:none;stroke:currentColor;stroke-width:1.1}
.welle__rad circle{fill:none;stroke:currentColor;stroke-width:1}

/* Unter 1040 px gibt es keinen Rand, in dem der Trieb laufen koennte —
   der Satzspiegel reicht dort bis fast an die Kante. Ein Zahnrad, das
   halb im Text steht, ist kein Schmuck, sondern ein Fehler. */
@media (max-width:1039px){ .welle{display:none} }

/* --- Rueckzug ------------------------------------------------------------
   Wer weniger Bewegung angefordert hat, bekommt hier gar keine. Der Trieb
   verschwindet nicht — er steht einfach still. */
@media (prefers-reduced-motion: reduce){
  .js .rv,.js .rv[data-cascade] > *{opacity:1;transform:none;transition:none}
  .js .fig.rv{clip-path:none;transition:none}
  .js .mark::after{transform:none;transition:none}
  .js .rise > span{transform:none;animation:none}
  .welle__fuell{display:none}
}

/* Redaktionshinweise in den Rechtstexten: Stellen, die vor der
   Veroeffentlichung noch von einem Menschen ausgefuellt oder geprueft werden
   muessen. Bewusst sichtbar und nicht als Kommentar — ein Kommentar im
   Quelltext wird uebersehen. */
.hinweis-lektor{
  margin-top:1.6rem;padding:1rem 1.2rem;
  border-left:2px solid var(--gold);background:var(--gold-ghost);
  font-size:.92rem;line-height:1.7;color:var(--pearl);
}