/* Das gemeinsame Geruest der erzaehlenden Unterseiten — derzeit
   lage.html und wer.html.

   Vorgeschichte: dieses Geruest entstand am 21.08.2026 in lage.css. Als
   einen Tag spaeter die Wer-Seite dazukam, brauchte sie davon rund vier
   Fuenftel unveraendert — Auftakt, Textsektionen, Grundsatzliste,
   Weiterlesen-Karte, Abschluss, Auftritt beim Scrollen. Eine zweite
   Kopie in wer.css waere dasselbe Problem gewesen, das in der CLAUDE.md
   schon zweimal steht: die zwei nginx-Konfigurationen mit denselben
   Werten, und die Kopf-und-Fuss-Klassen, die der Lage-Entwurf mitbrachte
   und die deshalb herausgeflogen sind. Duplikate driften.

   Was hier steht, gilt fuer beide Seiten. Was nur eine braucht, steht in
   deren eigenem Stylesheet (lage.css, wer.css) und wird danach geladen —
   `.zwei--anschluss` etwa ueberschreibt `.zwei` von hier.

   Kopf, Fuss, Wortmarke, Skip-Link und die Grundfarben kommen weiterhin
   aus rechtstext.css und stehen deshalb NICHT hier.

   Farbsystem oberflaechengebunden wie auf der Geschichte-Seite:
   .s-dark und .s-light setzen --fg, --fg-muted, --accent, --rule —
   Inhalte greifen nur auf diese Variablen zu, nie direkt auf Toene.

   --gold-text: #7f6029 ist der Wert aus geschichte.css (4,68:1 auf
   Cream, WCAG-Formel nachgerechnet) — NICHT #c9a24b, das auf hellen
   Flaechen durchfaellt. */

:root {
  /* Eine Kante fuer alles. Kopf, jede Sektion und Fuss haengen an
     denselben zwei Werten, damit die drei erzaehlenden Unterseiten
     nicht drei verschiedene linke Kanten zeigen (gemessen am
     24.08.2026 bei 1265px: Kopf auf 51, Auftakt auf 189, Ideenraster
     auf 89, Fuss auf 77).

     --rand ist der Abstand zum Fensterrand, solange das Fenster
     schmaler als die Spur ist; --spur deckelt die Zeilenlaenge auf
     breiten Schirmen. Die Formel unten ist nichts anderes als das,
     was `max-width` + `margin:auto` + `padding` bei .wrap ergeben:
     ueber der Spur waechst die Polsterung um die halbe Differenz. */
  /* --rand und --spur stehen seit dem 24.08. beide in rechtstext.css:
     alle sechs Unterseiten teilen sich dasselbe Mass. */
  --gold-text: #7f6029;
  --line-solid-hell: #cfc7b5;
  --line-solid-dunkel: #3a382f;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Drei Oberflaechen. Neben Text- und Linienfarben tragen sie vier
   weitere Werte, damit Bauteile nicht doch wieder einen festen Ton
   hineinschreiben:

   --flaeche     der eigene Grund, fuer Elemente, die ihn selbst malen
                 muessen (die klebende Filterleiste zum Beispiel)
   --flaum       der kaum sichtbare Schleier auf Karten
   --feld        der Grund von Eingabefeldern
   --fg-leise    der dritte Textton unter --fg und --fg-muted, gedacht
                 fuer GROSSE, leise Schrift (Schwelle 3:1) — etwa die
                 Nummer einer Verzeichniskarte. Fuer Kleingedrucktes
                 reicht er nicht, dort --fg-muted nehmen. Er ist
                 noetig, weil `opacity` als Daempfer den Kontrast
                 mitnimmt und ihn dabei unsichtbar unterschreitet: die
                 Kartenfusszeile stand mit `opacity: .8` auf 3,9:1 und
                 die Filterzaehler mit `.65` auf 2,9:1, ohne dass eine
                 Farbpruefung das gezeigt haette. Daempfen ueber den
                 Ton, nie ueber die Deckkraft.
   --auf-akzent  der Ton, der AUF --accent lesbar ist. Der Akzent ist
                 je Oberflaeche ein anderer: helles Gold auf Dunkel,
                 dunkles Gold auf Cream, Anthrazit auf Gold. Ein fest
                 gesetztes Anthrazit auf dem Knopf faellt deshalb auf
                 Cream durch (2,6:1). */
.s-dark {
  background: var(--anthracite);
  --flaeche: var(--anthracite);
  --fg: var(--cream);
  --fg-muted: #b9b2a3;
  --accent: var(--gold);
  --accent-strong: var(--gold-light);
  --auf-akzent: var(--anthracite);
  --rule: var(--line-dunkel);
  --rule-solid: var(--line-solid-dunkel);
  --flaum: rgba(236, 230, 218, 0.025);
  --feld: rgba(236, 230, 218, 0.05);
  --fg-leise: #857f70;   /* 4,46:1 auf Anthrazit */
}
.s-light {
  background: var(--cream);
  --flaeche: var(--cream);
  --fg: var(--anthracite);
  --fg-muted: var(--grau);
  --accent: var(--gold-text);
  --accent-strong: var(--gold-text);
  --auf-akzent: var(--cream);
  --rule: var(--line-hell);
  --rule-solid: var(--line-solid-hell);
  --flaum: rgba(24, 24, 22, 0.022);
  --feld: rgba(255, 255, 255, 0.55);
  --fg-leise: #7b7567;   /* 3,69:1 auf Cream */
}
/* Die goldene Oberflaeche — dasselbe Feld wie der Salon der Startseite
   (`section-accent`), und wie dort steht alles darauf in Anthrazit.
   Sie ist der Taktgeber: eine je Seite, nicht mehr. */
.s-accent {
  background: var(--gold);
  --flaeche: var(--gold);
  --fg: var(--anthracite);
  --fg-muted: rgba(24, 24, 22, 0.72);
  --accent: var(--anthracite);
  --accent-strong: var(--anthracite);
  --auf-akzent: var(--gold-light);
  --rule: rgba(24, 24, 22, 0.22);
  --rule-solid: rgba(24, 24, 22, 0.4);
  --flaum: rgba(24, 24, 22, 0.03);
  --feld: rgba(255, 255, 255, 0.55);
  --fg-leise: #4e4429;   /* 4,01:1 auf Gold */
}

html {
  scroll-behavior: smooth;
}
body {
  background: var(--anthracite);
  color: var(--cream);
  font-size: 17px;
  line-height: 1.7;
}
:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}
.s-light :focus-visible {
  outline-color: var(--anthracite);
}

/* Kopf und Fuss laufen ueber die volle Breite, wie auf der
   Geschichte-Seite; ihren Rand setzt rechtstext.css. Bis 1240px
   Fensterbreite deckelt die Spur nichts, Balken und Inhalt stehen
   also auf derselben Kante. Darueber bleiben die Balken aussen und
   der Inhalt zentriert sich — gewollt, siehe CLAUDE.md. */
.wrap {
  max-width: var(--spur);
  margin: 0 auto;
  padding-left: var(--rand);
  padding-right: var(--rand);
}
.kicker {
  margin: 0 0 18px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
h1,
h2 {
  font-family: 'Archivo Black', "Arial Black", sans-serif;
  font-weight: 400;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-size: clamp(32px, 3.9vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 16ch;
}
h1 em,
h2 em {
  font-style: normal;
  color: var(--accent);
}
h2 {
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
p {
  margin: 0 0 18px;
  color: var(--fg);
  text-wrap: pretty;
}
.lead {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.45;
  color: var(--fg-muted);
  max-width: 40ch;
  margin: 24px 0 0;
}

/* Auftakt */
.hero {
  padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 6vw, 72px);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .hero-text {
    order: 1;
  }
  .foto {
    order: 2;
  }
}
.hero-facts {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 24px 44px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
@media (max-width: 720px) {
  .hero-facts {
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
  }
}
.fact {
  font-size: 13px;
  color: var(--fg-muted);
  white-space: nowrap;
  line-height: 1.35;
}
.fact b {
  display: block;
  font-variant-numeric: tabular-nums;
  font-family: 'Archivo Black', "Arial Black", sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: var(--fg);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 2px;
}

/* Foto im Auftakt */
.foto {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #222119;
  border: 1px solid var(--rule-solid);
  margin: 0;
}
.foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
  filter: saturate(0.9) contrast(1.03);
}
.foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(24, 24, 22, 0.75) 100%);
  pointer-events: none;
}
.foto figcaption {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  z-index: 1;
}
@media (max-width: 860px) {
  .foto {
    aspect-ratio: 4 / 3;
    max-height: 60vh;
  }
}

/* Zweispaltige Sektion. Die Lage haengt den Radar hinein, die Wer-Seite
   die beiden Personen — gemeinsam ist nur der vertikale Abstand. */
.zwei {
  padding: clamp(48px, 7vw, 96px) 0;
}

/* Helle und dunkle Textsektionen: schmale Marginalspalte, breiter Lauftext */
.text {
  padding: clamp(52px, 7vw, 92px) 0;
}
.text .wrap {
  /* Dieselbe Spur wie alle anderen Sektionen, damit die linke Kante
     stimmt. Die Textspalte bleibt bei 640px stehen und laesst rechts
     Luft — das ist die Marginalspalten-Anmutung, keine Luecke. */
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 640px);
  gap: clamp(28px, 6vw, 96px);
  align-items: start;
}
.text .aside {
  position: sticky;
  top: 28px;
  padding-top: 18px;
}
.text .body p {
  max-width: 58ch;
  font-size: 18px;
  line-height: 1.65;
}
.text .body p:last-child {
  margin-bottom: 0;
}
@media (max-width: 720px) {
  .text .wrap {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .text .aside {
    position: static;
  }
}

/* Grundsatzliste: Stichwort links, Erlaeuterung rechts */
.gs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0 0 34px;
}
.gs div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}
.gs div:first-child {
  border-top: 2px solid var(--accent);
}
.gs b {
  display: block;
  font-family: 'Archivo Black', "Arial Black", sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.gs p a {
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.gs p {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--fg);
  margin: 0;
  max-width: 48ch;
}
@media (max-width: 560px) {
  .gs div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* CTA */
.cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  /* Damit die Form auch auf einem <button> sitzt und nicht nur auf
     einem <a>: der Browser bringt dort sonst eigenen Grund, eigene
     Schrift und keinen Zeigefinger mit. */
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--accent);
  color: var(--accent-strong);
  padding: 14px 22px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}
.s-dark .cta:hover {
  background: var(--gold);
  color: var(--anthracite);
  border-color: var(--gold);
}
.s-light .cta:hover,
.s-accent .cta:hover {
  background: var(--anthracite);
  color: var(--gold-light);
  border-color: var(--anthracite);
}
.cta .pfeil {
  transition: transform 220ms var(--ease);
}
.cta:hover .pfeil {
  transform: translate(3px, -3px);
}

/* Weiterlesen-Karte */
.weiter {
  padding: 0 0 clamp(40px, 6vw, 72px);
}
.weiter-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 26px 28px;
  border: 1px solid var(--rule-solid);
  text-decoration: none;
  color: var(--fg);
  transition: border-color 200ms ease, background 200ms ease;
}
.weiter-card:hover {
  border-color: var(--accent);
  background: rgba(24, 24, 22, 0.04);
}
.weiter-card .kicker {
  margin-bottom: 8px;
}
.weiter-t {
  font-family: 'Archivo Black', "Arial Black", sans-serif;
  font-size: clamp(19px, 2.4vw, 24px);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.weiter-s {
  font-size: 14.5px;
  color: var(--fg-muted);
  margin-top: 6px;
}
.weiter-pfeil {
  font-size: 26px;
  color: var(--accent);
  transition: transform 220ms var(--ease);
}
.weiter-card:hover .weiter-pfeil {
  transform: translateX(6px);
}

/* Klebende Anfrage-Leiste am Telefon */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: none;
  padding: 12px 5vw calc(12px + env(safe-area-inset-bottom));
  background: rgba(24, 24, 22, 0.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line-dunkel);
  transform: translateY(110%);
  transition: transform 300ms var(--ease);
}
.sticky-cta.on {
  transform: none;
}
.sticky-cta a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: var(--gold);
  color: var(--anthracite);
  padding: 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
@media (max-width: 720px) {
  .sticky-cta {
    display: block;
  }
  .schluss {
    padding-bottom: 120px;
  }
}

/* Abschluss */
.schluss {
  padding: clamp(56px, 8vw, 104px) 0;
}
.schluss .wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: end;
}
@media (max-width: 720px) {
  .schluss .wrap {
    grid-template-columns: 1fr;
  }
  .schluss .cta {
    width: 100%;
  }
}
.schluss h2 {
  max-width: 20ch;
}
.schluss .kontakt {
  font-size: 13px;
  color: var(--fg-muted);
}
.schluss .kontakt a {
  text-decoration: none;
  color: var(--fg);
}
.schluss .kontakt a:hover {
  color: var(--accent-strong);
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Auftritt beim Scrollen */
.rv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.rv.in {
  opacity: 1;
  transform: none;
}

/* Drucken: Bedienelemente weg, Text auf Weiss. Was nur eine Seite hat
   (die Karte der Lage etwa), blendet deren eigenes Stylesheet aus. */
@media print {
  .foto,
  .cta,
  .sticky-cta,
  .weiter {
    display: none;
  }
  body,
  .s-dark,
  .s-light {
    background: #fff !important;
    color: #000 !important;
    --fg: #000;
    --fg-muted: #333;
    --accent: var(--gold-text);
  }
  .text .aside {
    position: static;
  }
  .rv {
    opacity: 1;
    transform: none;
  }
}

/* Weniger Bewegung: alles steht sofort */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .rv {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .cta .pfeil,
  .weiter-pfeil,
  .sticky-cta {
    transition: none;
  }
}

/* ===== Goldschrift in den Ueberschriften =============================
   Die Pointe traegt denselben Blattgold-Verlauf wie die Startseite ihn
   fuer `.house-xray h2 em` benutzt: `--gold-schrift` (steht in
   kopf.css) wird per `background-clip: text` durch die Buchstaben
   gestanzt, die eigene Farbe faellt auf transparent. `--glanz` fuehrt
   die Lichtbahn, das erledigt kopf.js — die Schrift schimmert also mit
   der Maus mit.

   BEWUSST NUR CSS, kein WebGL. `gold3d.js` malt Ueberschriften auf ein
   Canvas, das die Zeilen exakt nachzeichnet — es teilt sie aber NUR an
   `<br>`. Ein Satz ohne harten Umbruch wird einzeilig gemalt, waehrend
   der Text darunter umbricht; auf der Lage-Seite stand daraufhin "Neun
   Minuten zum Ba" (24.08.). Der CSS-Verlauf hat das Problem nicht: er
   folgt dem Text, gleich wie oft er umbricht.

   Deshalb bleibt die Pointe auch `inline` — ein Block wuerde nur die
   Zeile brechen, ohne etwas zu gewinnen. */
.s-dark h1 em,
.s-dark h2 em {
  /* Block, damit `gold3d.js` die Pointe fassen darf: sein Filter
     laesst inline-Elemente aus. Der CSS-Verlauf darunter bleibt der
     Notfallpfad fuer Telefon, "weniger Bewegung" und fehlendes WebGL. */
  display: block;
  background: var(--gold-schrift);
  background-blend-mode: var(--gold-mischung);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Die Kursive haengt ueber ihre Zeilenbox hinaus. Weil die Schrift per
     background-clip gemalt wird, endet die Farbe an der Boxkante — das
     letzte Zeichen einer Zeile war sonst angeschnitten. Der Innenrand
     verbreitert die Malflaeche, der negative Aussenrand nimmt ihn fuers
     Layout zurueck, `clone` gibt ihn jeder Zeile einzeln. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.14em;
  margin: 0 -0.14em;
}
/* Sobald ein Canvas da ist, MUSS der CSS-Verlauf weichen — sonst
   malen zwei Schichten dieselben Buchstaben, versetzt um den
   Ueberhang des Canvas ("Mitsprachee", 24.08.). */
.s-dark h1 em:has(> canvas.gold3d-schicht):not(.gold-flach),
.s-dark h2 em:has(> canvas.gold3d-schicht):not(.gold-flach) {
  background: none;
}

/* `gold-flach` setzt kopf.js, wenn die Pointe mehr Textzeilen
   braucht als das Canvas gemalt hat. Dann verschwindet das Canvas
   und der CSS-Verlauf oben bleibt stehen — er bricht mit dem Text
   um, das Canvas kann das nicht. */
.s-dark h1 em.gold-flach > canvas.gold3d-schicht,
.s-dark h2 em.gold-flach > canvas.gold3d-schicht {
  display: none;
}


/* Auf Cream und auf Gold bleibt es beim gedeckten Textton: das
   Blattgold ist fuer dunkle Flaechen gemacht und faellt auf hellem
   Grund durch. Dort bleibt die Pointe ausserdem inline — kein Grund,
   die Zeile zu brechen, wo kein Canvas kommt. */
.s-light h1 em,
.s-light h2 em,
.s-accent h1 em,
.s-accent h2 em {
  display: inline;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--accent);
}