/* =========================================================
   A.G. designs — style.css
   Aufbau:
    1  Bild-Registry
    2  Design-Tokens (zwei Welten)
    3  Basis & Reset
    4  Typografie
    5  Kopfzeile & Navigation
    6  Signatur A: Zeiger
    7  Signatur B: Galerielinie
    8  Reveal
    9  Bausteine (Knopf, Augenbraue, Bild)
   10  Hero
   11  Sektionen
   12  Formular
   13  Fusszeile
   14  Rechtsseiten
   15  Breakpoints
   16  Reduced Motion
   ========================================================= */

/* ---------- 1  Bild-Registry -----------------------------
   Alle Bildpfade an genau EINER Stelle.
   Fehlt ein Bild: Zeile auskommentieren -> getoente Flaeche statt 404. */

.bild--leinwand      { --bild: url("../bilder/leinwand-gold.jpg"); }
.bild--hero          { --bild: url("../bilder/hero-standbild.jpg"); }
.bild--hell-gold     { --bild: url("../bilder/hell-gold.jpg"); }
.bild--hell-breit    { --bild: url("../bilder/hell-gold-breit.jpg"); }
.bild--schwarz-weiss { --bild: url("../bilder/schwarz-weiss.jpg"); }
.bild--sw-breit      { --bild: url("../bilder/schwarz-weiss-breit.jpg"); }


/* ---------- 2  Design-Tokens ----------------------------- */

:root {
  /* Palette */
  --papier:      #fbfaf8;   /* Grundfarbe: kein Reinweiss */
  --papier-2:    #f3f1ed;   /* abgesetzte Flaeche */
  --tinte:       #131210;   /* dunkle Welt: kein Reinschwarz */
  --tinte-2:     #1c1a17;
  --gold:        #8a6a1f;   /* Gold als TEXT auf hell   — 4,9:1 */
  --gold-deko:   #b08f3c;   /* Gold als Linie/Flaeche auf hell */
  --gold-hell:   #d6b25f;   /* Gold auf dunkel          — 9,3:1 */
  --off-weiss:   #f0ede7;
  --grau:        #a09a91;

  /* Welt-Tokens: Standard = helle Buehne */
  --flaeche:        var(--papier);
  --flaeche-2:      var(--papier-2);
  --auf-flaeche:    #2a2724;          /* 14,4:1 */
  --auf-leise:      #6c6660;          /*  5,5:1 */
  --akzent:         var(--gold);
  --akzent-deko:    var(--gold-deko);
  --linie:          rgba(19, 18, 16, .14);

  /* Schrift. Zwei Stimmen: eine ruhige Grotesk fuer alles, was gelesen
     wird, und eine Didone fuer die grossen Auftritte. Beide kommen vom
     System — die Seite laedt weiterhin keine einzige fremde Datei.
     Reihenfolge ist Absicht: Didot und Bodoni sind die feinsten, dann
     die breiter verfuegbaren Konkurrenten, zuletzt Georgia als Netz. */
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
             Helvetica, Arial, sans-serif;
  --schrift-anzeige: "Didot", "Bodoni 72", "Bodoni MT", "Hoefler Text",
                     "Big Caslon", Constantia, "Iowan Old Style",
                     "Palatino Linotype", Palatino, Georgia,
                     "Times New Roman", serif;

  /* Rhythmus — bewusst ungleiche Spruenge */
  --s-xs:  .5rem;
  --s-s:   1rem;
  --s-m:   2rem;
  --s-l:   3.5rem;
  --s-xl:  6.5rem;
  --s-2xl: 11rem;

  --rand:   clamp(1.25rem, 5vw, 4rem);
  --breite: 1240px;
  --schmal: 68ch;
}

/* Muster "ein Tokensatz, zwei Welten": dieselben Namen, dunkle Werte. */
.welt--dunkel {
  --flaeche:     var(--tinte);
  --flaeche-2:   var(--tinte-2);
  --auf-flaeche: var(--off-weiss);
  --auf-leise:   var(--grau);
  --akzent:      var(--gold-hell);
  --akzent-deko: var(--gold-hell);
  --linie:       rgba(240, 237, 231, .15);
}


/* ---------- 3  Basis & Reset ----------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--papier);   /* echte Farbe: Blend-Kontext fuer den Zeiger */
  color: var(--auf-flaeche);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Feine Koernung nimmt das digital Glatte raus. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--akzent-deko);
  outline-offset: 3px;
}

.nur-lesen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.spring {
  position: absolute;
  left: var(--rand);
  top: -100px;
  z-index: 200;
  padding: .6rem 1rem;
  background: var(--tinte);
  color: var(--off-weiss);
  text-decoration: none;
  transition: top 160ms;
}
.spring:focus { top: .75rem; }


/* ---------- 4  Typografie -------------------------------- */

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.06;
  text-wrap: balance;
}

/* Die grossen Auftritte tragen die Didone: hoher Strichkontrast, feine
   Serifen, und je groesser sie steht, desto besser sieht sie aus. Sie
   braucht dabei weniger Normalgewicht und weniger enges Tracking als
   eine Grotesk — mit 600 und -.03em wuerde sie klumpen. Die kleinen
   Zwischenueberschriften (h3) bleiben in der Grotesk, sonst kippt die
   Seite ins Buchhafte und die Lesbarkeit leidet. */
h1, h2, .gross {
  font-family: var(--schrift-anzeige);
  font-weight: 400;
  letter-spacing: -.012em;
  font-feature-settings: "liga" 1, "kern" 1;
}

/* Nicht groesser als vorher, obwohl die Didone das vertruege: bei
   5,6rem rutschten die beiden Knoepfe im Hero unter die Falz. Der
   Aufruf zum Handeln wiegt schwerer als zwei Grad Schriftgroesse. */
h1 { font-size: clamp(2.3rem, 5.6vw, 4.9rem); line-height: 1.02; }
h2 { font-size: clamp(2.05rem, 4.6vw, 3.6rem); line-height: 1.08; }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.25; }

/* Ein einziges Wort kursiv und in Gold. Mehr braucht es nicht — der
   Bruch faellt auf, weil er die Ausnahme bleibt. */
h1 em, h2 em, .gross em {
  font-style: italic;
  color: var(--akzent);
  font-synthesis: none;
}

p { margin: 0 0 var(--s-s); }

.fuehrung {
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  line-height: 1.55;
  color: var(--auf-leise);
  max-width: 54ch;
}

.gross {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.3;
  max-width: 26ch;
}


/* ---------- 5  Kopfzeile & Navigation -------------------- */

/* Die Kopfzeile dreht sich mit der Welt darunter. Ganz oben steht sie auf
   der schwarzen Startbuehne — also schwarz und offen, ohne Balken. Sobald
   gescrollt wird, verdichtet sie sich zur Flaeche, damit die Schrift nicht
   auf dem durchlaufenden Inhalt klebt. */
.kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-m);
  padding: 1.1rem var(--rand);
  background-color: transparent;
  color: var(--auf-flaeche);
  border-bottom: 1px solid transparent;
  transition: background-color 380ms cubic-bezier(.22, .8, .3, 1),
              color 380ms cubic-bezier(.22, .8, .3, 1),
              border-color 380ms cubic-bezier(.22, .8, .3, 1);
}
.kopf[data-welt="dunkel"] { color: var(--off-weiss); }

.kopf[data-fest="ja"][data-welt="hell"] {
  background-color: rgba(251, 250, 248, .9);
  backdrop-filter: blur(10px);
  border-bottom-color: rgba(19, 18, 16, .1);
}
.kopf[data-fest="ja"][data-welt="dunkel"] {
  background-color: rgba(19, 18, 16, .93);
  backdrop-filter: blur(10px);
  border-bottom-color: rgba(240, 237, 231, .12);
}

/* Seitenanzeige. Liegt auf der Unterkante der Kopfzeile und waechst mit dem
   Scrollstand nach rechts — dieselbe Mechanik wie die Stromlinie bei
   Ahlbrecht & Jacobsen, nur waagerecht: links laeuft schon die Galerielinie,
   zwei senkrechte Striche nebeneinander waeren eine Doppelung. */
.kopf__fortschritt {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--fortschritt, 0));
  transform-origin: left;
  background: linear-gradient(90deg, rgba(176, 143, 60, .35), var(--gold-hell));
  box-shadow: 0 0 10px rgba(214, 178, 95, .45);
  pointer-events: none;
}

.marke {
  display: inline-flex;
  align-items: baseline;
  gap: .42rem;
  text-decoration: none;
  font-size: 1.02rem;
  letter-spacing: .01em;
}
.marke b { font-weight: 700; letter-spacing: .03em; }
.marke span {
  font-weight: 400;
  opacity: .72;
  letter-spacing: .06em;
  text-transform: lowercase;
}
.marke::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold-deko);
  align-self: center;
  margin-right: .1rem;
}
.kopf[data-welt="dunkel"] .marke::before { background: var(--gold-hell); }

.nav { display: none; }
.nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.1rem);
  margin: 0; padding: 0;
  list-style: none;
}
.nav a {
  text-decoration: none;
  font-size: .935rem;
  letter-spacing: .01em;
  padding: .35rem 0;
  position: relative;
  opacity: .85;
}
/* Der Unterstrich ist gold, nicht grau: derselbe Akzent wie ueberall sonst.
   Er faehrt beim Verlassen nach rechts wieder aus, statt zurueckzuspringen. */
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--gold-deko);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 320ms cubic-bezier(.22, .8, .3, 1);
}
.kopf[data-welt="dunkel"] .nav a::after { background: var(--gold-hell); }
.nav a:hover { opacity: 1; color: var(--gold-deko); }
.kopf[data-welt="dunkel"] .nav a:hover { color: var(--gold-hell); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav a.knopf { opacity: 1; }
.nav a.knopf::after { display: none; }

/* Mobil-Umschalter */
.umschalter {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}
.umschalter span {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform 260ms, opacity 200ms;
}
.umschalter[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.umschalter[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.umschalter[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobilnav {
  position: fixed;
  inset: 0;
  z-index: 480;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-s);
  padding: var(--s-2xl) var(--rand) var(--s-xl);
  background: var(--tinte);
  color: var(--off-weiss);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms, visibility 300ms;
}
.mobilnav[data-offen="ja"] { opacity: 1; visibility: visible; }
.mobilnav a:not(.knopf) {
  color: var(--off-weiss);
  text-decoration: none;
  font-size: clamp(1.6rem, 7vw, 2.3rem);
  letter-spacing: -.02em;
  padding: .35rem 0;
  border-bottom: 1px solid rgba(240, 237, 231, .12);
}
.mobilnav .knopf { margin-top: var(--s-m); align-self: flex-start; }


/* ---------- 6  Signatur A: Zeiger ------------------------ */

/* Der Zeiger traegt genau eine Farbe — Schwarz auf hellem Grund, Gold auf
   dunklem. Kein mix-blend-mode: der hat die Farben je nach Untergrund
   umgerechnet, dadurch war weder Schwarz noch Gold verlaesslich zu sehen.
   Ueber einem Knopf laeuft die Scheibe aus der Mitte auf und fuellt den
   Ring; die Fuellung bleibt durchscheinend, damit die Knopfschrift
   darunter lesbar bleibt. */
#zeiger {
  --zeiger-strich: var(--tinte);
  --zeiger-fuell:  rgba(19, 18, 16, .22);
  --zeiger-voll:   rgba(19, 18, 16, .5);
  --zeiger-schein: rgba(19, 18, 16, .16);
  position: fixed;
  top: 0; left: 0;
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  border: 1.5px solid var(--zeiger-strich);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9500;
  will-change: transform;
  display: none;
  transition: width 420ms cubic-bezier(.22, .8, .3, 1),
              height 420ms cubic-bezier(.22, .8, .3, 1),
              margin 420ms cubic-bezier(.22, .8, .3, 1),
              border-width 420ms cubic-bezier(.22, .8, .3, 1),
              box-shadow 420ms cubic-bezier(.22, .8, .3, 1);
}
#zeiger[data-welt="dunkel"] {
  --zeiger-strich: var(--gold-hell);
  --zeiger-fuell:  rgba(214, 178, 95, .3);
  --zeiger-voll:   rgba(214, 178, 95, .58);
  --zeiger-schein: rgba(214, 178, 95, .28);
}

/* Die Fuellung ist ein eigener Kreis, damit sie skalieren kann, ohne den
   Ring mitzuziehen — Farbwechsel allein waere ein hartes Aufblitzen. */
#zeiger::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  background: var(--zeiger-fuell);
  transform: scale(0);
  transition: transform 420ms cubic-bezier(.22, .8, .3, 1),
              background-color 420ms;
}

#zeiger[data-nah="ja"] {
  width: 74px; height: 74px;
  margin: -37px 0 0 -37px;
  border-width: 2px;
  box-shadow: 0 0 0 6px var(--zeiger-schein);
}
#zeiger[data-nah="ja"]::after { transform: scale(1); }

/* Der Druck: der Ring geht noch einmal auf und die Scheibe wird kraeftig.
   Schnell hinein (180 ms), weich wieder heraus (die 420 ms von oben) —
   ein Klick dauert kuerzer als eine ruhige Animation, sonst sieht man
   die Bestaetigung gar nicht. Die Fuellung bleibt halb durchscheinend,
   damit die Knopfschrift im Moment des Klicks lesbar bleibt. */
#zeiger[data-druck="ja"] {
  width: 96px; height: 96px;
  margin: -48px 0 0 -48px;
  border-width: 1px;
  box-shadow: 0 0 0 10px var(--zeiger-schein);
  transition-duration: 180ms;
}
#zeiger[data-druck="ja"]::after {
  transform: scale(1);
  background: var(--zeiger-voll);
  transition-duration: 180ms;
}

@media (hover: hover) and (pointer: fine) {
  #zeiger { display: block; }
}


/* ---------- 7  Signatur B: Galerielinie ------------------ */

.linie {
  display: none;
  position: fixed;
  left: 1.35rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 400;
  flex-direction: column;
  gap: 5px;
  pointer-events: none;
}
.linie i {
  display: block;
  width: 2px;
  height: 26px;
  background: var(--linie);
  overflow: hidden;
  position: relative;
}
.linie i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--akzent-deko);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 520ms cubic-bezier(.22, .8, .3, 1);
}
.linie i[data-an="ja"]::after { transform: scaleY(1); }

.linie[data-welt="dunkel"] i          { background: rgba(240, 237, 231, .16); }
.linie[data-welt="dunkel"] i::after   { background: var(--gold-hell); }


/* ---------- 8  Reveal ------------------------------------ */

.zeig {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(5px);
  transition: opacity 780ms cubic-bezier(.2, .7, .3, 1),
              transform 780ms cubic-bezier(.2, .7, .3, 1),
              filter 780ms;
}
.zeig[data-da="ja"] {
  opacity: 1;
  transform: none;
  filter: none;
}
.zeig--1 { transition-delay:  90ms; }
.zeig--2 { transition-delay: 180ms; }
.zeig--3 { transition-delay: 270ms; }
.zeig--4 { transition-delay: 360ms; }


/* ---------- 9  Bausteine --------------------------------- */

.augenbraue {
  display: block;
  margin: 0 0 var(--s-m);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--akzent);
}

.knopf {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 48px;
  padding: .85rem 1.9rem;
  border: 1px solid var(--auf-flaeche);
  border-radius: 999px;          /* volle Pille — die weichste Form, die es gibt */
  background: var(--auf-flaeche);
  color: var(--flaeche);
  font: inherit;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  /* Der Farbwechsel laeuft als Flaeche von links durch, statt hart
     umzuspringen: ein Verlaufsbild, dessen Breite animiert wird. Das
     braucht kein Pseudo-Element und legt sich nie ueber die Schrift,
     weil Hintergrundbilder immer unter dem Text liegen. */
  background-image: linear-gradient(90deg, var(--gold), #6f5518);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  box-shadow: 0 1px 2px rgba(19, 18, 16, .06), 0 6px 18px rgba(19, 18, 16, .07);
  transition:
    background-size 460ms cubic-bezier(.22, .8, .3, 1),
    background-color 320ms cubic-bezier(.22, .8, .3, 1),
    color 300ms cubic-bezier(.22, .8, .3, 1),
    border-color 320ms cubic-bezier(.22, .8, .3, 1),
    box-shadow 420ms cubic-bezier(.22, .8, .3, 1),
    transform 420ms cubic-bezier(.22, .8, .3, 1);
}
.knopf::after {
  content: "";
  width: 16px; height: 1px;
  background: currentColor;
  transition: width 460ms cubic-bezier(.22, .8, .3, 1),
              opacity 300ms;
}
/* Hover je Welt: auf Hell dunkles Gold mit Weiss (5,1:1 und besser),
   auf Dunkel helles Gold mit Tinte (9,3:1). --gold-deko waere als
   Textgrund zu schwach (3,1:1) und darf darum nur Linie sein. */
.knopf:hover,
.knopf:focus-visible {
  background-size: 100% 100%;
  border-color: var(--gold);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(19, 18, 16, .08), 0 14px 30px rgba(138, 106, 31, .22);
}
.knopf:hover::after,
.knopf:focus-visible::after { width: 28px; }
.knopf:active { transform: translateY(0) scale(.985); transition-duration: 90ms; }

/* Der CTA auf dunklem Grund: gefuellt in Gold, sonst verschwindet
   der dunkle Kasten auf dunklem Grund. */
.welt--dunkel .knopf,
.mobilnav .knopf,
.kopf[data-welt="dunkel"] .knopf {
  background-color: var(--gold-hell);
  background-image: linear-gradient(90deg, #f0d79a, #e6c67f);
  border-color: var(--gold-hell);
  color: var(--tinte);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 22px rgba(0, 0, 0, .3);
}
.welt--dunkel .knopf:hover,
.mobilnav .knopf:hover,
.kopf[data-welt="dunkel"] .knopf:hover {
  border-color: #f0d79a;
  color: var(--tinte);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 14px 34px rgba(214, 178, 95, .3);
}

/* Der stille Knopf traegt keinen Schatten — er soll flach bleiben,
   sonst konkurriert er mit dem Haupt-CTA daneben. Sein Verlauf ist
   nur ein Hauch Gold, kein Fuellen. */
.knopf--still {
  background-color: transparent;
  background-image: linear-gradient(90deg, rgba(176, 143, 60, .16), rgba(176, 143, 60, .05));
  color: var(--auf-flaeche);
  border-color: var(--linie);
  box-shadow: none;
}
.knopf--still:hover,
.knopf--still:focus-visible {
  color: var(--akzent);
  border-color: var(--akzent);
  box-shadow: none;
}

/* Auf dunklem Grund greift sonst die gefuellte Gold-Regel oben (zwei
   Klassen schlagen eine) — dann stuenden zwei goldene Knoepfe
   nebeneinander und der Zweitknopf waere kein Zweitknopf mehr. */
.welt--dunkel .knopf--still,
.mobilnav .knopf--still {
  background-color: transparent;
  background-image: linear-gradient(90deg, rgba(214, 178, 95, .22), rgba(214, 178, 95, .06));
  color: var(--off-weiss);
  border-color: rgba(240, 237, 231, .28);
  box-shadow: none;
}
.welt--dunkel .knopf--still:hover,
.mobilnav .knopf--still:hover {
  color: var(--gold-hell);
  border-color: var(--gold-hell);
  box-shadow: none;
}

.stiller-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  font-size: .95rem;
  color: var(--akzent);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 240ms;
}
.stiller-link:hover { border-bottom-color: currentColor; }

/* Bildflaechen: Registry-Variable + Fallback-Ton, nie ein 404 */
.bild {
  background-color: var(--flaeche-2);
  background-image: var(--bild, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* ---------- 10  Hero ------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Mobil knapp halten: der Hero muss auf einen Handyschirm passen,
     sonst liegt der CTA unter der Falz. Grosszuegig wird es erst ab 960 px. */
  padding: calc(var(--s-l) + 2.75rem) var(--rand) var(--s-l);
  background: var(--flaeche);
  color: var(--auf-flaeche);
  overflow: hidden;
}

.hero__inhalt { max-width: 20ch; }
.hero h1 { max-width: 15ch; }
.hero .fuehrung { margin-top: var(--s-s); }
.hero__aktion { margin-top: var(--s-m); display: flex; flex-wrap: wrap; gap: var(--s-s); }

/* Goldene Haarlinie unter der Ueberschrift */
.hero h1::after {
  content: "";
  display: block;
  width: min(220px, 40%);
  height: 2px;
  margin-top: var(--s-s);
  background: linear-gradient(90deg, var(--gold-hell), rgba(214, 178, 95, .15));
  transform-origin: left;
  animation: haarlinie 1400ms cubic-bezier(.2, .8, .25, 1) 380ms both;
}
@keyframes haarlinie { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero__tafel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 0;
  display: none;
}

/* Der Film liegt DECKUNGSGLEICH ueber dem Standbild derselben Tafel.
   Solange kein src gesetzt ist (siehe main.js), zeigt das <video> sein
   poster — also exakt denselben ersten Frame. Es gibt darum keinen
   sichtbaren Sprung, wenn der Film spaeter dazukommt oder ausbleibt. */
.hero__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero__fuss {
  margin-top: var(--s-l);
  padding-top: var(--s-s);
  border-top: 1px solid var(--linie);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem var(--s-m);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--auf-leise);
}


/* ---------- 11  Sektionen -------------------------------- */

main > section {
  background: var(--flaeche);
  color: var(--auf-flaeche);
}

.innen {
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.abschnitt   { padding-block: var(--s-xl); }
.abschnitt--weit { padding-block: var(--s-2xl); }
.abschnitt--abgesetzt { background: var(--flaeche-2); }

/* 11a  Breitband: eine Flaeche als Atempause */
.band {
  position: relative;
  height: clamp(230px, 42vw, 460px);
}
.band__bild { position: absolute; inset: 0; }

/* 11b  Asymmetrischer Split */
.split {
  display: grid;
  gap: var(--s-l);
}
.split__kopf h2 { margin-bottom: var(--s-m); }

.leistungen { list-style: none; margin: 0; padding: 0; }
.leistungen li {
  padding: var(--s-m) 0;
  border-top: 1px solid var(--linie);
  display: grid;
  gap: .5rem;
}
.leistungen li:last-child { border-bottom: 1px solid var(--linie); }
.leistungen .nr {
  font-size: .78rem;
  letter-spacing: .18em;
  color: var(--akzent);
  font-weight: 600;
}
.leistungen p { margin: 0; color: var(--auf-leise); max-width: 52ch; }

/* 11b2  Belege — die Zahlen zum ersten Eindruck.
   Die Zahl traegt den Absatz, deshalb steht sie gross und allein oben.
   Gezaehlt wird sie von main.js hoch; der Endwert steht im HTML, damit
   ohne Skript und ohne Bewegungswunsch trotzdem der richtige Wert
   dasteht. tabular-nums, sonst zappelt die Zeile beim Zaehlen. */
.belege { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-m); }
.belege li {
  padding: var(--s-m);
  border: 1px solid var(--linie);
  border-radius: 24px;
  background: var(--flaeche);
  display: grid;
  gap: .55rem;
  transition: transform 460ms cubic-bezier(.22, .8, .3, 1),
              border-color 460ms cubic-bezier(.22, .8, .3, 1),
              box-shadow 460ms cubic-bezier(.22, .8, .3, 1);
}
.belege li:hover {
  transform: translateY(-4px);
  border-color: var(--akzent-deko);
  box-shadow: 0 16px 38px rgba(19, 18, 16, .08);
}
/* Zwei Klassen, weil `.belege p` weiter unten (0-1-1) sonst die Farbe
   ueberschreibt und die Zahl grau statt golden dasteht. */
.belege .beleg__zahl {
  margin: 0;
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--akzent);
  font-variant-numeric: tabular-nums;
}
.belege .beleg__zahl small {
  display: block;
  margin-top: .5rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--auf-leise);
  font-variant-numeric: normal;
}
.belege p { margin: 0; color: var(--auf-leise); max-width: 52ch; }
.beleg__quelle {
  font-size: .8rem;
  line-height: 1.55;
  color: var(--auf-leise);
  opacity: .8;
}
.hinweis .beleg__quelle { display: block; margin-top: .4rem; }

/* 11c  Haltung — dunkle, rein typografische Welt */
.haltung__liste {
  list-style: none;
  margin: var(--s-l) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-m);
  counter-reset: h;
}
.haltung__liste li {
  counter-increment: h;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: var(--s-s);
  padding-top: var(--s-m);
  border-top: 1px solid var(--linie);
}
.haltung__liste li::before {
  content: "0" counter(h);
  color: var(--akzent);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  padding-top: .35rem;
}
.haltung__liste h3 { margin-bottom: .5rem; }
.haltung__liste p { margin: 0; color: var(--auf-leise); max-width: 58ch; }

/* 11d  Werk-Buehnen */
.buehne { margin-top: var(--s-xl); }
.buehne:first-of-type { margin-top: var(--s-l); }

.buehne__flaeche {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  padding: var(--s-m);
  text-align: center;
}
.buehne__flaeche::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(251, 250, 248, .62);
}
.buehne__notiz {
  position: relative;
  z-index: 1;
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.buehne__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem var(--s-m);
  margin-top: var(--s-s);
  padding-top: var(--s-s);
  border-top: 1px solid var(--linie);
}
.buehne__gattung {
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--auf-leise);
}
.buehne h3 { flex: 1 1 14ch; }
.buehne__satz { flex: 1 1 26ch; margin: 0; color: var(--auf-leise); font-size: .98rem; }

/* 11e  Pakete — bewusst KEINE drei gleichen Karten.
   Hier darf die Seite am meisten Bewegung zeigen: es ist die Stelle, an der
   entschieden wird. Runde Kanten, ein Anheben beim Ueberfahren, eine goldene
   Kante, die von links einlaeuft, und Listenpunkte, die nacheinander
   nachruecken. */
.pakete { display: grid; gap: var(--s-m); margin-top: var(--s-l); }

.paket {
  position: relative;
  padding: var(--s-m);
  border: 1px solid var(--linie);
  border-radius: 28px;
  background: var(--flaeche);
  color: var(--auf-flaeche);
  display: grid;
  align-content: start;
  gap: .75rem;
  overflow: hidden;
  transition: transform 520ms cubic-bezier(.22, .8, .3, 1),
              box-shadow 520ms cubic-bezier(.22, .8, .3, 1),
              border-color 520ms cubic-bezier(.22, .8, .3, 1);
}

/* Goldene Oberkante, die beim Ueberfahren von links einlaeuft. Sie liegt
   absolut am oberen Rand und kann darum keinen Text verdecken. */
.paket::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--akzent-deko), rgba(176, 143, 60, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 620ms cubic-bezier(.22, .8, .3, 1);
}
.paket:hover {
  transform: translateY(-6px);
  border-color: var(--akzent-deko);
  box-shadow: 0 18px 44px rgba(19, 18, 16, .1);
}
.paket:hover::before { transform: scaleX(1); }

/* Die dunkle Karte: dieselben Regeln, nur andere Token-Werte. */
.paket--gross { box-shadow: 0 10px 30px rgba(19, 18, 16, .12); }
.paket--gross:hover { box-shadow: 0 22px 54px rgba(19, 18, 16, .26); }

.paket__fahne {
  position: absolute;
  top: var(--s-m);
  right: var(--s-m);
  padding: .3rem .8rem;
  border-radius: 999px;
  background: var(--gold-hell);
  color: var(--tinte);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.paket__name {
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--akzent);
  font-weight: 600;
}
.paket__preis {
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
  /* Ziffern gleich breit, sonst zappelt der Preis beim Hochzaehlen. */
  font-variant-numeric: tabular-nums;
}
.paket__preis small {
  display: block;
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--auf-leise);
  margin-top: .45rem;
  font-variant-numeric: normal;
}

/* Eigene Aufzaehlung: ein goldener Strich statt eines grauen Punktes. */
.paket ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--auf-leise);
  font-size: .97rem;
}
.paket li {
  position: relative;
  margin-bottom: .55rem;
  padding-left: 1.6rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 520ms cubic-bezier(.22, .8, .3, 1),
              transform 520ms cubic-bezier(.22, .8, .3, 1);
}
.paket li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .78em;
  width: 11px; height: 1.5px;
  background: var(--akzent-deko);
}
/* Die Punkte ruecken nacheinander nach, sobald die Karte aufgedeckt ist. */
.paket[data-da="ja"] li { opacity: 1; transform: none; }
.paket[data-da="ja"] li:nth-child(1) { transition-delay: 120ms; }
.paket[data-da="ja"] li:nth-child(2) { transition-delay: 200ms; }
.paket[data-da="ja"] li:nth-child(3) { transition-delay: 280ms; }
.paket[data-da="ja"] li:nth-child(4) { transition-delay: 360ms; }
.paket[data-da="ja"] li:nth-child(5) { transition-delay: 440ms; }

.paket--zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-s) var(--s-m);
}
.paket--zeile .paket__preis { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.paket--zeile > div { flex: 1 1 30ch; }
.paket__satz {
  margin: .6rem 0 0;
  max-width: 52ch;
  color: var(--auf-leise);
  font-size: .95rem;
  line-height: 1.6;
}

/* Zusatzleistungen: bewusst leichter als die Pakete — sie sind Beiwerk
   und sollen den drei Karten nicht die Buehne nehmen. */
.zusatz {
  list-style: none;
  margin: var(--s-m) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-s);
}
.zusatz li {
  padding: var(--s-s) var(--s-m);
  border: 1px solid var(--linie);
  border-radius: 20px;
  background: var(--flaeche);
  color: var(--auf-leise);
  font-size: .97rem;
  line-height: 1.7;
  transition: transform 420ms cubic-bezier(.22, .8, .3, 1),
              border-color 420ms cubic-bezier(.22, .8, .3, 1);
}
.zusatz li:hover { transform: translateY(-3px); border-color: var(--akzent-deko); }
.zusatz b { display: block; color: var(--auf-flaeche); font-weight: 600; }

.hinweis {
  margin-top: var(--s-m);
  font-size: .88rem;
  color: var(--auf-leise);
  max-width: 62ch;
}

/* 11f  Abschluss-Band */
.abschluss { text-align: left; }
.abschluss .gross { margin-bottom: var(--s-l); }


/* ---------- 12  Formular --------------------------------- */

.form {
  display: grid;
  gap: var(--s-s);
  margin-top: var(--s-l);
  max-width: 40rem;
}
.feld { display: grid; gap: .4rem; }
.feld label { font-size: .86rem; letter-spacing: .04em; color: var(--auf-leise); }
.feld input,
.feld textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--auf-flaeche);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--linie);
  padding: .7rem 0;
  min-height: 46px;
  border-radius: 0;
  transition: border-color 220ms;
}
.feld textarea { min-height: 7rem; resize: vertical; }
.feld input:focus,
.feld textarea:focus { outline: 0; border-bottom-color: var(--akzent); }

.pflicht { color: var(--akzent); }

.zustimmung {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: .7rem;
  align-items: start;
  margin-top: var(--s-s);
  font-size: .88rem;
  color: var(--auf-leise);
}
.zustimmung input { margin-top: .3rem; accent-color: var(--akzent-deko); }
.zustimmung a { color: var(--akzent); }

.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form .knopf { justify-self: start; margin-top: var(--s-s); }


/* ---------- 13  Fusszeile -------------------------------- */

.fuss {
  background: var(--flaeche);
  color: var(--auf-flaeche);
  padding-block: var(--s-l) var(--s-m);
  border-top: 1px solid var(--linie);
}
.fuss__raster {
  display: grid;
  gap: var(--s-m);
  padding-bottom: var(--s-l);
}
/* Die Spaltenkoepfe im Fuss sind Beschriftung, kein Auftritt — sie bleiben
   in der Grotesk. Die Didone wuerde bei 1 rem und Halbfett synthetisch
   gefettet und damit schmierig. */
.fuss h2 {
  font-family: var(--schrift);
  font-size: 1.02rem;
  letter-spacing: .01em;
  font-weight: 600;
  margin-bottom: .75rem;
}
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.fuss a:not(.knopf) { color: var(--auf-leise); text-decoration: none; font-size: .95rem; }
.fuss a:not(.knopf):hover { color: var(--akzent); }
.fuss__ende {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem var(--s-m);
  justify-content: space-between;
  padding-top: var(--s-m);
  border-top: 1px solid var(--linie);
  font-size: .84rem;
  color: var(--auf-leise);
}


/* ---------- 14  Rechtsseiten ----------------------------- */

.seitenkopf {
  padding: calc(var(--s-2xl) + 1rem) var(--rand) var(--s-l);
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
}
.seitenkopf .innen { padding-inline: 0; }

.text-seite { max-width: var(--schmal); }
.text-seite h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: var(--s-l) 0 var(--s-s); }
.text-seite h2:first-child { margin-top: 0; }
.text-seite ul { padding-left: 1.15rem; color: var(--auf-leise); }
.text-seite address { font-style: normal; }
.text-seite__aktion { margin-top: var(--s-m); }
.luecke {
  background: rgba(176, 143, 60, .16);
  padding: .1rem .35rem;
  border-bottom: 1px dashed var(--gold-deko);
}


/* ---------- 15  Breakpoints ------------------------------ */

@media (min-width: 640px) {
  .pakete { grid-template-columns: 1fr; }
  .buehne__zeile { flex-wrap: nowrap; }
}

@media (min-width: 960px) {
  .umschalter { display: none; }
  .mobilnav   { display: none; }
  .nav        { display: block; }

  .linie { display: flex; }

  .hero {
    padding: calc(var(--s-2xl) + 2rem) calc(38% + var(--rand)) var(--s-xl) var(--rand);
  }
  .hero__fuss { margin-top: var(--s-xl); }
  .hero h1::after { margin-top: var(--s-m); }
  .hero .fuehrung { margin-top: var(--s-m); }
  .hero__aktion { margin-top: var(--s-l); }
  .hero__inhalt { max-width: none; }
  .hero__tafel {
    display: block;
    width: 34%;
    top: 0; bottom: 0; right: 0;
  }
  /* Zwei Schleier aus Schwarz, weil die Startbuehne dunkel ist:
     nach links blendet die Tafel in die Textzone, nach oben gibt sie der
     Navigation Grund. Ohne den oberen Verlauf steht "Arbeiten" auf einem
     weissen Farbklecks des Films — die Kopfzeile ist jetzt durchsichtig
     und deckt nichts mehr ab. */
  .hero__tafel::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(19, 18, 16, .92) 0%, rgba(19, 18, 16, .55) 8%, rgba(19, 18, 16, 0) 16%),
      linear-gradient(90deg, var(--tinte) 0%, rgba(19, 18, 16, 0) 26%);
  }

  .split {
    grid-template-columns: 5fr 7fr;
    gap: var(--s-xl);
    align-items: start;
  }
  .split--gedreht { grid-template-columns: 7fr 5fr; }
  .split__kopf { position: sticky; top: calc(var(--s-l) + 2rem); }

  .haltung__liste { grid-template-columns: 1fr 1fr; gap: var(--s-l) var(--s-xl); }
  .zusatz { grid-template-columns: 1fr 1fr; gap: var(--s-m); margin-top: var(--s-l); }
  /* Nebeneinander waeren die Karten nur rund 28 Zeichen breit — zu schmal
     zum Lesen. Sie bleiben deshalb untereinander, und stattdessen ruecken
     Zahl und Text innerhalb der Karte nebeneinander. */
  .belege li { grid-template-columns: 10rem 1fr; column-gap: var(--s-m); }
  .belege .beleg__zahl { grid-row: 1 / span 2; align-self: start; }
  /* Der Nachsatz gehoert zu den Karten, nicht unter die klebende
     Ueberschrift links — sonst rutscht er in die leere erste Spalte. */
  .split > .hinweis { grid-column: 2; }

  .pakete { grid-template-columns: 4fr 6fr; align-items: stretch; }
  .paket--zeile { grid-column: 1 / -1; }
  .paket { padding: var(--s-l) var(--s-m); }

  .buehne__flaeche { aspect-ratio: 21 / 9; }

  .fuss__raster { grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: var(--s-l); }
}


/* ---------- 16  Reduced Motion --------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  #zeiger { display: none !important; }

  .zeig { opacity: 1 !important; transform: none !important; filter: none !important; }

  /* Ohne Bewegung stehen die Listenpunkte sofort da, statt unsichtbar zu
     bleiben — die Einblendung ist Zierde, der Inhalt ist es nicht. */
  .paket li { opacity: 1 !important; transform: none !important; }
  .paket:hover, .zusatz li:hover, .belege li:hover { transform: none; }

  .hero h1::after { animation: none; }

  .linie i::after { transition: none; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}