/* Der Kopf der fuenf erzaehlenden Seiten: Geschichte, Lage, Wer,
   Ideenbox, Flaechen.

   Bewusst NICHT in rechtstext.css — die traegt Impressum und
   Datenschutz mit, und die bleiben schlicht (Wortmarke plus "Zurueck
   zur Startseite"). Bewusst auch nicht in seite.css: geschichte.html
   laedt sie nicht. Die fuenf Seiten, die Navigation bekommen, haben
   keine gemeinsame Datei — daher diese.

   Die Startseite hat ihren Kopf weiterhin inline in index.html. Sie
   sieht am Schreibtisch anders aus (mittige Leiste statt Ortsangabe),
   traegt aber denselben Burger und dasselbe Blatt; die Regeln dafuer
   stehen dort im Style-Block.

   Kein Menuepunkt "Startseite": die Wortmarke ist der Heimweg.
   Impressum und Datenschutz stehen im Fuss, nicht im Menue.

   OFFEN: `.nav-cta` zeigt auf /#anfrage. Sobald kontakt.html im Baum
   ist, gehoert das Ziel dorthin — ebenso wie .header-cta auf der
   Startseite. Vorher wuerde paket-bauen.mjs einen Verweis ins Leere
   melden. */

/* Kopf und Blatt liegen auf Anthrazit, gehoeren aber keiner Sektion an —
   und die Werte von `.s-dark` stehen in seite.css, die geschichte.html
   nicht laedt. Deshalb dieselben Toene hier noch einmal. Aendert sich
   `.s-dark`, gehoert das nachgezogen.

   Der erste Anlauf am 24.08. setzte hier `--grau` (#56544e) fuer die
   Nummern: gemessen 2,35:1 auf Anthrazit. Der Ton ist fuer Cream
   gedacht — genau der Ad-hoc-Fehler, den das Farbsystem ausschliesst.
   `--fg-leise` (#857f70, 4,46:1) taugt ebenfalls nicht: der ist
   ausdruecklich fuer GROSSE leise Schrift, die Nummern sind 10px. */
.nav-kopf,
.nav-blatt,
/* Der Burger MUSS hier mitstehen. Auf den Unterseiten sitzt er in
   `.nav-kopf` und erbt die Toene; auf der Startseite sitzt er in
   `.site-header` und erbt nichts — dort loeste `var(--accent)` zu
   nichts auf und die beiden Striche standen durchsichtig da. Der Knopf
   war vorhanden und tastbar, nur unsichtbar (gemessen 24.08.:
   44x44 an 311,22, Strichfarbe rgba(0,0,0,0)). */
.nav-burger,
/* Und der Knopf im Inhalt. Auf geschichte.html gibt es die
   Oberflaechen-Klassen nicht — dort waren `--fg` und `--auf-akzent`
   undefiniert. Die Ruhefarbe stimmte nur zufaellig (sie erbt Cream vom
   Auftakt), aber beim Ueberfahren waere `color: var(--auf-akzent)`
   ungueltig gewesen: Cream auf goldgefuelltem Grund, gemessen 2:1
   statt der noetigen 4,5. Gefunden am 24.08. */
.cta-btn {
  /* Feste Werte, keine var()-Verweise mit Fallback: die Startseite laedt
     diese Datei ebenfalls, kennt aber weder `--cream` noch `--flaeche`
     noch `--rand` — ihr CSS steht inline und heisst anders. Ein
     `var(--flaeche, #181816)` griff dort NICHT auf den Fallback zurueck,
     das Blatt stand durchsichtig ueber der Seite (gemessen 24.08.). */
  --flaeche: #181816;
  --fg: #ece6da;
  --fg-muted: #b9b2a3; /* 8,4:1 auf Anthrazit */
  --accent: #c9a24b; /* 7,4:1 auf Anthrazit */
  --accent-strong: #f0d089;
  --auf-akzent: #181816;
  --rule: rgba(236, 230, 218, 0.24);
  /* Auf den Unterseiten kommt `--rand` aus rechtstext.css; die
     Startseite polstert mit 4vw, was demselben Wert entspricht. */
  --nav-rand: var(--rand, max(20px, 4vw));
}

/* ===== Das Gold ====================================================

   Wortgleich aus index.html uebernommen, damit die 39 und der Knopf auf
   den Unterseiten dasselbe Blattgold tragen wie auf der Startseite:
   zwei wandernde Glanzbaender, ein Verlauf von oben, die Grundfarbe,
   ein Daempfer im `color`-Mischmodus und darueber das Korn.

   `--glanz` ist die Position der Lichtbahn und wird von der Maus
   gefuehrt — das uebernimmt kopf.js, wortgleich aus index.html. Ohne
   Maus driftet sie per Sinus weiter, bei "weniger Bewegung" bleibt sie
   bei 130% stehen und das Gold ist einfach ruhig.

   Die Werte stehen an `:root` und nicht am Kopf: die Startseite laedt
   diese Datei VOR ihrem Inline-CSS, ihre eigenen Definitionen
   ueberschreiben diese hier also. Dort bleibt alles, wie es war —
   samt der gebackenen Kachel, die `gold3d.js` nach dem ersten Bild
   einsetzt. */
:root {
  --gold-daempfer: rgba(201, 162, 75, 0.34);
  --gold-korn: url('/assets/gold-textur-kachel.jpg?v=3c9a8913') 0 0 / 360px repeat;
  --gold-flaeche:
    linear-gradient(115deg, rgba(240,208,137,0) 30%, rgba(240,208,137,.52) 47%,
      rgba(110,80,34,.34) 60%, rgba(240,208,137,0) 76%) var(--glanz,130%) 0 / 280% 100% no-repeat,
    linear-gradient(115deg, rgba(238,205,140,0) 35%, rgba(238,205,140,.22) 50%,
      rgba(110,80,34,.2) 62%, rgba(238,205,140,0) 74%) calc(260% - var(--glanz,130%)) 0 / 320% 100% no-repeat,
    linear-gradient(to bottom, rgba(252,232,186,.15), rgba(110,80,34,.2)) 0 0 / 100% 100% no-repeat,
    linear-gradient(var(--gold), var(--gold)) 0 0 / 100% 100% no-repeat,
    linear-gradient(var(--gold-daempfer), var(--gold-daempfer)) 0 0 / 100% 100% no-repeat,
    var(--gold-korn),
    var(--gold);
  --gold-mischung: normal, normal, normal, color, normal, normal;
  /* Fuer SCHRIFT statt Flaeche: haerter kontrastierend (Glanzband .7
     statt .52), sonst verliert das Gold gegen den Hintergrund. Ebenfalls
     wortgleich aus index.html. */
  --gold-schrift:
    linear-gradient(115deg, rgba(240,208,137,0) 30%, rgba(244,214,148,.7) 47%,
      rgba(110,80,34,.42) 60%, rgba(240,208,137,0) 76%) var(--glanz,130%) 0 / 280% 100% no-repeat,
    linear-gradient(115deg, rgba(238,205,140,0) 35%, rgba(238,205,140,.26) 50%,
      rgba(110,80,34,.24) 62%, rgba(238,205,140,0) 74%) calc(260% - var(--glanz,130%)) 0 / 320% 100% no-repeat,
    linear-gradient(to bottom, rgba(252,232,186,.13), rgba(110,80,34,.23)) 0 0 / 100% 100% no-repeat,
    linear-gradient(var(--gold), var(--gold)) 0 0 / 100% 100% no-repeat,
    linear-gradient(var(--gold-daempfer), var(--gold-daempfer)) 0 0 / 100% 100% no-repeat,
    var(--gold-korn),
    var(--gold);
}

/* Die 39 im Kopf. Auf der Startseite traegt sie dieselbe Flaeche —
   dort ueber den Selektor `.wordmark b, .section-accent, …`. */
.nav-kopf .wordmark b {
  background: var(--gold-flaeche);
  background-blend-mode: var(--gold-mischung);
}

/* ===== Der Kopf =====================================================

   Eine Gestalt, zwei Auspraegungen — und die Umschaltbreite ist
   dieselbe wie auf der Startseite (1020px, dort gemessen):

   Am Schreibtisch  Wortmarke links · die fuenf Punkte mittig · Knopf
                    rechts. Genau wie index.html, damit die Site an
                    jeder Stelle gleich aussieht. Die aktuelle Seite
                    steht in Gold, `aria-current` traegt sie ohnehin.

   Am Telefon       Wortmarke · Name der aktuellen Seite · Burger.
                    Die Leiste und der Knopf weichen, dafuer kommt die
                    Ortsangabe — am Schreibtisch waere sie Doppelung,
                    dort markiert die Leiste den Ort selbst.

   `1fr auto 1fr` haelt die Punkte rechnerisch mittig, unabhaengig von
   der Wortlaenge — uebernommen aus index.html. */
/* Der Kopf liegt ueber dem Blatt (50 gegen 40), nicht darunter. Das ist
   der ganze Trick am Schliessen: der Burger bleibt sichtbar und wird zum
   Kreuz — an derselben Stelle, an der der Daumen ihn gerade gedrueckt
   hat. Ein Bedienelement, zwei Zustaende, kein Suchen nach dem Ausgang.

   Bis zum 24.08. lag das Blatt darueber. Die Kreuz-Animation lief, sah
   sie aber niemand, und im Blatt stand stattdessen oben links eine
   Zeile "Startseite" — an der Stelle, die am Telefon am schwersten zu
   erreichen ist, und mit derselben Aufgabe wie die Wortmarke daneben. */
.nav-kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  /* 96 statt der 106 der Startseite: dort liegt der Kopf absolut ueber
     dem Hero und nimmt keinen Platz, hier steht er klebend im Fluss.
     Die Wortmarke ist dieselbe Groesse — das ist es, was man beim
     Seitenwechsel sieht. */
  min-height: 96px;
  padding: 0 var(--nav-rand);
  background: var(--flaeche);
  color: var(--fg);
  border-bottom: 1px solid var(--rule);
}

/* Die Wortmarke kommt aus rechtstext.css, dort steht sie auf 24px.
   Im Kopf traegt sie dieselben Masse wie auf der Startseite (32px,
   37er-Kachel) — sonst springt sie beim Seitenwechsel sichtbar. */
.nav-kopf .wordmark {
  grid-template-columns: auto 38px;
}
.nav-kopf .wordmark > span {
  font-size: 32px;
}
.nav-kopf .wordmark b {
  width: 37px;
  height: 37px;
  margin-left: 9px;
  font-size: 18px;
}

/* Die Leiste. Masse identisch mit index.html, damit Startseite und
   Unterseiten nicht auseinanderlaufen.

   Seit 24.08.2026 Gemischtschrift statt Versalien. Der Bestand trug
   12px/700/+0,08em/Versalien — vier Verstaerker gleichzeitig, und das
   ist die Rezeptur fuer ein ETIKETT, nicht fuer Navigation. Etiketten
   beschriften, Navigation laedt ein. Versalien nehmen dem Auge
   ausserdem die Silhouette aus Ober- und Unterlaengen, an der es
   Woerter erkennt; bei "Wer dahintersteht" ist das der Unterschied
   zwischen Erkennen und Lesen.

   Die -0,012em sind der Faden zum Haus: die Ueberschriften laufen auf
   -0,055em, die Wortmarke auf -0,085em. Damit ist die Leiste mit der
   Typografie VERWANDT, statt nur daneben zu stehen.

   Nebenbei ist sie schmaler geworden — gemessen 481 statt 525 Pixel.
   Versalien bauen breit, und die Sperrung addiert bei fuenf Punkten
   spuerbar dazu. Die groessere Schrift kostet hier also keinen Platz,
   sie gewinnt welchen. */
.nav-leiste {
  display: flex;
  gap: 30px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.nav-leiste a {
  color: var(--fg);
  text-decoration: none;
  transition: opacity 180ms ease;
}
.nav-leiste a:hover {
  opacity: 0.58;
}
.nav-leiste a[aria-current] {
  color: var(--accent);
}

/* Der Knopf. Auf der Startseite heisst er `.header-cta` und steht
   inline; hier dieselbe Form, aber ohne die Gold-3D-Fuellung — die
   haengt an `--gold-flaeche`, das nur die Startseite kennt. Auf
   Anthrazit tut es der flache Goldton, gemessen 7,4:1. */
.nav-kopf-cta {
  position: relative;
  isolation: isolate;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  padding: 14px 20px;
  border: 1px solid rgba(201, 162, 75, 0.5);
  background: rgba(16, 16, 14, 0.4);
  /* Auf einfarbigem Anthrazit bewirkt der Filter nichts — er steht hier,
     damit die Fassung deckungsgleich mit `.header-cta` bleibt und der
     Knopf auch dann stimmt, wenn er einmal ueber einem Bild sitzt. */
  -webkit-backdrop-filter: blur(7px) saturate(1.15);
  backdrop-filter: blur(7px) saturate(1.15);
  color: var(--fg);
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  /* Ohne diese Zeile erbt der Knopf die Zeilenhoehe der Unterseite
     (18,7px statt 16,5) und wird 48 statt 46 Pixel hoch — zwei Pixel
     mehr als auf der Startseite, an derselben Stelle im Bild. */
  line-height: 1.5;
  transition: color 260ms ease, border-color 260ms ease;
}
.nav-kopf-cta::after {
  display: inline-block;
  margin-left: 12px;
  content: "→";
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Das Gold laeuft von unten hoch, wie auf der Startseite.

   BEIDE Schichten muessen geclippt werden: der CSS-Verlauf im ::before
   UND das Canvas, das `gold3d.js` in den Knopf legt. Die Startseite tut
   dasselbe (`.header-cta::before, .header-cta > .gold3d-schicht`). Ohne
   die zweite Zeile steht das Blattgold in voller Hoehe im Knopf — er
   ist dann gefuellt statt umrandet und schreit gegen den ruhigen Kopf
   an. Genau das war am 24.08. der Fall. */
.nav-kopf-cta > .gold3d-schicht {
  clip-path: inset(calc(100% - 2px) 0 0 0);
  transition: clip-path 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-kopf-cta:hover > .gold3d-schicht,
.nav-kopf-cta:focus-visible > .gold3d-schicht {
  clip-path: inset(0);
}

.nav-kopf-cta::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--gold-flaeche);
  background-blend-mode: var(--gold-mischung);
  content: "";
  clip-path: inset(calc(100% - 2px) 0 0 0);
  transition: clip-path 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-kopf-cta:hover,
.nav-kopf-cta:focus-visible {
  color: var(--auf-akzent);
  border-color: rgba(201, 162, 75, 0.92);
}
.nav-kopf-cta:hover::before,
.nav-kopf-cta:focus-visible::before {
  clip-path: inset(0);
}
.nav-kopf-cta:hover::after,
.nav-kopf-cta:focus-visible::after {
  transform: translateX(4px);
}

/* Der Name der aktuellen Seite — nur am Telefon. Er sagt dem Besucher,
   der ueber Instagram seitlich einsteigt, dass er in einem Raum eines
   Hauses steht und es weitere gibt. Am Schreibtisch macht das die
   Leiste, dort waere er Doppelung. */
.nav-ort {
  display: none;
  min-width: 0;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-ort i {
  font-style: normal;
  color: var(--fg-muted);
}
.nav-ort em {
  font-style: normal;
  color: var(--accent);
}

/* ---- Am Telefon: Leiste und Knopf weichen, Ort und Burger kommen ---- */
@media (max-width: 1020px) {
  .nav-kopf {
    display: flex;
    min-height: 68px;
    padding: 12px var(--nav-rand);
  }
  .nav-kopf .wordmark {
    flex: none;
    grid-template-columns: auto 28px;
  }
  .nav-kopf .wordmark > span {
    font-size: 24px;
  }
  .nav-kopf .wordmark b {
    width: 27px;
    height: 27px;
    margin-left: 7px;
    font-size: 14px;
  }
  .nav-leiste,
  .nav-kopf-cta {
    display: none;
  }
  .nav-ort {
    display: flex;
    flex: 1;
  }
  /* Soviel laesst das Blatt oben frei — der Kopf steht darueber. */
  .nav-blatt {
    --nav-kopf-hoehe: 69px;
  }
}

.nav-burger {
  margin-left: auto;
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-burger > span {
  display: grid;
  gap: 5px;
  width: 22px;
}
.nav-burger i {
  display: block;
  height: 2px;
  background: var(--accent);
  transition: transform 230ms ease;
}
/* Zwei Striche statt drei: sie werden beim Oeffnen zum Kreuz, und mit
   drei Strichen bliebe einer uebrig, den man ausblenden muesste. */
.nav-auf .nav-burger i:nth-child(1) {
  transform: translateY(3.5px) rotate(45deg);
}
.nav-auf .nav-burger i:nth-child(2) {
  transform: translateY(-3.5px) rotate(-45deg);
}

.nav-blatt {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  /* Oben bleibt die Hoehe des Kopfes frei — er steht darueber und
     traegt Wortmarke und Kreuz. Beide Flaechen sind Anthrazit, die
     Naht sieht man nicht; sichtbar bleibt nur die Trennlinie des
     Kopfes, und die trennt hier genau das Richtige. */
  padding: var(--nav-kopf-hoehe, 72px) var(--nav-rand) calc(20px + env(safe-area-inset-bottom));
  background: var(--flaeche, #181816);
  color: var(--fg);
  transform: translateY(-100%);
  transition: transform 330ms cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
  overflow-y: auto;
}
.nav-blatt.auf {
  transform: none;
  visibility: visible;
}
/* Das Blatt bekommt beim Oeffnen den Fokus (siehe kopf.js), zeigt aber
   keinen Ring: es ist ein Behaelter, kein Bedienelement, und niemand
   hat es angesteuert. Die Punkte darin behalten ihren Ring — dort ist
   er die Antwort auf eine Tastatureingabe und muss sichtbar sein. */
.nav-blatt:focus {
  outline: none;
}

/* `margin-top: auto` schiebt die Liste nach unten, in die Daumenzone.
   Oben bleibt Luft — dort stand im Entwurf ein Kernsatz, der auf
   Wunsch entfallen ist (24.08.2026). Das Menue ist ein Verzeichnis,
   sonst nichts. */
.nav-liste {
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}
.nav-liste li {
  border-top: 1px solid var(--rule);
}
.nav-liste li:last-child {
  border-bottom: 1px solid var(--rule);
}
.nav-liste a {
  display: flex;
  align-items: baseline;
  gap: 13px;
  min-height: 58px;
  padding: 13px 0;
  color: var(--fg);
  text-decoration: none;
}
.nav-liste i {
  flex: none;
  width: 21px;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--fg-muted);
}
.nav-liste b {
  font-family: var(--font-archivo), 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 6.4vw, 26px);
  line-height: 1;
  letter-spacing: -0.015em;
}
.nav-liste a[aria-current] b,
.nav-liste a[aria-current] i {
  color: var(--accent);
}

.nav-blatt-fuss {
  margin-top: 20px;
}
/* Hier gefuellt, nicht umrandet wie .header-cta auf der Startseite:
   der liegt ueber einem Foto und braucht die Glaswirkung, dieser liegt
   auf Anthrazit und ist im Blatt das einzige Ziel neben den fuenf
   Punkten. Anthrazit auf Gold misst 7,4:1. */
.nav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  background: var(--gold-flaeche);
  background-blend-mode: var(--gold-mischung);
  color: var(--auf-akzent);
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* Der Weg zurueck dorthin, wo die meisten Besucher herkommen. Das
   Polster macht aus 15px Zeilenhoehe ein 44px-Ziel. */
.nav-insta {
  display: block;
  margin-top: 13px;
  min-height: 44px;
  padding-top: 13px;
  text-align: center;
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 12px;
}
.nav-insta:hover {
  color: var(--accent-strong, #f0d089);
}

.nav-kopf a:focus-visible,
.nav-kopf button:focus-visible,
.nav-blatt a:focus-visible,
.nav-blatt button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Bei offenem Menue traegt der Kopf nur noch Wortmarke und Kreuz. Der
   Ort steht in der Liste darunter ohnehin in Gold, und "Platz anfragen"
   steht am Fuss des Blattes — beides zweimal auf einem Schirm waere
   Laerm. */
.nav-auf .nav-ort,
.nav-auf .nav-kopf-cta {
  display: none;
}

/* Der Burger erscheint nur unterhalb der Umschaltbreite — am
   Schreibtisch traegt die Leiste die fuenf Punkte selbst.

   Und nur, wenn JavaScript laeuft: kopf.js setzt `js-nav` als Erstes.
   Sonst staende dort ein Knopf, der nichts tut; der Fuss bleibt dann
   der Weg zu den anderen Seiten, wie vor dem 24.08. */
.nav-burger {
  display: none;
}
@media (max-width: 1020px) {
  .js-nav .nav-burger {
    display: grid;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-blatt,
  .nav-burger i {
    transition: none;
  }
}

/* ===== Der Knopf im Inhalt ===========================================

   "Gespraech beginnen", "Idee einwerfen", "Der Zeitstrahl" — `.cta-btn`.
   Die Grundfassung in rechtstext.css fuellt ihn flaechig mit Gold; hier
   bekommt er stattdessen die Form des Kopfknopfes.

   WARUM NICHT GEFUELLT: Der Goldsaum, der beim Ueberfahren nach oben
   laeuft, IST die Marke — "Aus Alt wird Gold" als Geste. Ein dauerhaft
   goldener Knopf hat sie schon aufgebraucht, bevor jemand hinfaehrt,
   und schreit auf einer Seite, die von Ruhe lebt. Mit Blattgold-Canvas
   darin (24.08., kurzzeitig) war es vollends zu viel.

   RANG UEBER GROESSE: Dieser Knopf steht an der Stelle, an der gehandelt
   werden soll, der im Kopf begleitet nur. Den Unterschied tragen 2px
   mehr Polster je Seite und ein Saum von 3 statt 2 Pixeln — dieselbe
   Form, mehr Gewicht. Farbe braucht es dafuer nicht.

   Bewusst NICHT in rechtstext.css: die traegt Impressum und Datenschutz
   mit, und die laden kopf.css nicht. Dort waeren die Gold-Werte
   undefiniert und der Knopf stuende durchsichtig da. */
.cta-btn {
  position: relative;
  isolation: isolate;
  /* 15/26 statt 16/26, dazu eine feste Zeilenhoehe: ohne sie erbt der
     Knopf die der Seite (rund 19px) und wird hoeher als beabsichtigt.
     Gemessen faellt er damit von 53 auf 48 Pixel — knapp ueber den 46
     des Kopfknopfes.

     Den Rang traegt jetzt vor allem die BREITE (26 gegen 20 Pixel
     Polster je Seite) und der Schriftgrad, den rechtstext.css mit 12
     gegen 11 vorgibt. In der Hoehe stehen beide fast gleich — das
     beruhigt die Seite, ohne die Stufe einzuebnen. */
  /* 12/24. Die Zeilenhoehe im Knopf bestimmt nicht diese Regel, sondern
     der Inhalts-Span, den gold3d.js einzieht (21,75px bei 14,5px
     Schrift) — deshalb wirkt `line-height` hier nicht und die Hoehe
     haengt allein am Polster. Gemessen: 12px ergeben 47, 15px ergaben
     53. Der Kopfknopf liegt bei 46. */
  padding: 12px 24px;
  border: 1px solid rgba(201, 162, 75, 0.5);
  background: rgba(16, 16, 14, 0.4);
  -webkit-backdrop-filter: blur(7px) saturate(1.15);
  backdrop-filter: blur(7px) saturate(1.15);
  color: var(--fg);
  transition: color 260ms ease, border-color 260ms ease;
}
/* Der Saum und seine Fahrt nach oben. Drei Pixel statt zwei: an dieser
   Stelle darf das Gold eine Spur mehr zeigen. */
.cta-btn::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--gold-flaeche);
  background-blend-mode: var(--gold-mischung);
  content: "";
  clip-path: inset(calc(100% - 3px) 0 0 0);
  transition: clip-path 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Das WebGL-Blattgold, das gold3d.js hineinlegt, faehrt mit — sonst
   staende es in voller Hoehe da und der Knopf waere wieder gefuellt. */
.cta-btn > .gold3d-schicht {
  clip-path: inset(calc(100% - 3px) 0 0 0);
  transition: clip-path 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-btn:hover,
.cta-btn:focus-visible {
  background: rgba(16, 16, 14, 0.4);
  border-color: rgba(201, 162, 75, 0.92);
  color: var(--auf-akzent);
}
.cta-btn:hover::before,
.cta-btn:focus-visible::before,
.cta-btn:hover > .gold3d-schicht,
.cta-btn:focus-visible > .gold3d-schicht {
  clip-path: inset(0);
}

/* Auf Cream und auf Gold traegt der Glasgrund nicht — ein dunkler
   Schleier auf hellem Grund sieht aus wie ein Fehler. Dort bleibt der
   Knopf gefuellt, wie ihn rechtstext.css anlegt, nur ohne Blattgold. */
.s-light .cta-btn,
.s-accent .cta-btn {
  background: var(--accent);
  color: var(--auf-akzent);
  border-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.s-light .cta-btn::before,
.s-accent .cta-btn::before,
.s-light .cta-btn > .gold3d-schicht,
.s-accent .cta-btn > .gold3d-schicht {
  display: none;
}
.s-light .cta-btn:hover,
.s-accent .cta-btn:hover {
  background: var(--accent-strong, #f0d089);
}

@media (prefers-reduced-motion: reduce) {
  .cta-btn::before,
  .cta-btn > .gold3d-schicht {
    transition: none;
  }
}