/* wf-start.css: Gestaltung der Startseite (index.html und en/index.html).
   Entstanden am 7. November 2026 aus dem Entwurf «Blickfang». Die uebrigen
   Seiten laden weiterhin wf.css; dieses Stylesheet steht fuer sich. */
/* ----------
   Ein Bild, ein Satz, dann die vier Zeichnungen in Grösse, dann die Anfrage.
   Schriften kommen vom laufenden Auftritt, die Zeichnungen und die beiden
   gerechneten Felder (Erdkugel, Brillant) aus auftritt/. Die Kopien der zwei
   Skripte in entwuerfe/blickfang/ unterscheiden sich vom Original nur in der
   Linienfarbe: Tinte statt Dunkelgrün. */

@font-face { font-family: 'EB Garamond'; src: url('/assets/fonts/eb-garamond-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url('/assets/fonts/eb-garamond-400i.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter var'; src: url('/assets/fonts/inter-var.woff2') format('woff2'); font-weight: 200 700; font-style: normal; font-display: swap; }

:root {
  --paper: #ffffff;
  --surface: #fbfaf7;
  --ink: #1F1C16;
  --ink-mid: #474542;
  --ink-mute: #7A746A;
  --border: #E4DFD4;
  --gold: #B5965A;
  --dunkel: #141311;
  --dunkel-linie: rgba(255,255,255,.18);
  --serif: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: 'Inter var', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --wide: 72rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }

.shell { max-width: var(--wide); margin: 0 auto; padding: 0 2rem; }

/* Rubrikzeile: 10 px, Versalien, Laufweite 0.24 em, Gold. */
.rubrik {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}

/* Gold kursiv: höchstens ein Begriff je Überschrift. */
.wf-em { font-style: italic; color: var(--gold); }

/* ---------- Kopf ----------
   Ganz oben liegt die Kopfzeile ohne Grund auf dem Papier des ersten
   Bildschirms. Sobald die Seite rollt, bekommt sie Papier mit Haarlinie und
   wird etwas schmaler, damit nichts durch Logo und Menü hindurchläuft. Den
   Wechsel setzt das Skript (Klasse papier). */
.kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  color: var(--ink);
  background: rgba(255,255,255,0);
  transition: background .35s ease, color .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.kopf.papier {
  background: rgba(255,255,255,.96);
  color: var(--ink);
  border-bottom-color: var(--border);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
}
.kopf-in {
  max-width: var(--wide);
  margin: 0 auto;
  padding: .95rem 2rem;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 2rem;
  transition: padding .35s ease;
}
.kopf.papier .kopf-in { padding: .6rem 2rem; }
.logo { display: block; line-height: 0; }
.logo img { width: 11rem; height: auto; display: block; transition: width .35s ease; }
.kopf.papier .logo img { width: 9.5rem; }
.kopf-nav { display: flex; gap: 2rem; margin-left: auto; font-family: var(--sans); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; }
.kopf-nav a, .sprache { text-decoration: none; opacity: .8; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: opacity .25s ease, border-color .25s ease; white-space: nowrap; }
.kopf-nav a:hover, .sprache:hover { opacity: 1; border-bottom-color: var(--gold); }
.sprache { font-family: var(--sans); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; margin-left: 1.4rem; opacity: .6; }
.feld, .anfrage-teil { scroll-margin-top: 6rem; }
@media (max-width: 900px) {
  .kopf-in { flex-wrap: wrap; row-gap: .7rem; }
  .kopf-nav { order: 3; width: 100%; margin-left: 0; justify-content: space-between; gap: .6rem 1rem; font-size: .6rem; letter-spacing: .13em; }
  .sprache { margin-left: auto; }
  .feld { scroll-margin-top: 7.5rem; }
}
@media (max-width: 700px) { .logo img { width: 8.5rem; } .kopf.papier .logo img { width: 7.5rem; } .kopf-nav { font-size: .56rem; letter-spacing: .1em; } }

/* ---------- Erster Bildschirm: heller Schleier ----------
   Drei kurze Videos, je ein natuerlicher pinker Diamant auf weissem Grund,
   gehen in weichen Ueberblendungen ineinander ueber. Der Grund des Videos
   ist das Papier der Seite; die Raender der Buehne loesen sich in einer
   weichen Maske auf. Darueber zieht ein langsamer Nebel aus zwei grossen,
   weichen Lichtflecken, und ein Vignettenrand fuehrt zum Papier zurueck.
   Der Satz erscheint, waehrend das Video ueber das Standbild blendet. */
.bild {
  position: relative;
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.buehne {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 64%;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 60% 74% at 56% 50%, #000 34%, rgba(0,0,0,.55) 58%, transparent 76%);
  mask-image: radial-gradient(ellipse 60% 74% at 56% 50%, #000 34%, rgba(0,0,0,.55) 58%, transparent 76%);
}
/* Die Buehne steht vom ersten Bild an scharf; nur das Video blendet weich
   ueber das Standbild. Die Unschaerfe beim Laden ist seit dem 7. November
   abgeschafft. */
.buehne .stand, .buehne .film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.buehne .film { opacity: 0; transition: opacity 1.8s ease; }
.buehne .film.an { opacity: 1; }
.nebel { position: absolute; inset: -20%; pointer-events: none; }
.wolke {
  position: absolute;
  width: 70%;
  height: 70%;
  background: radial-gradient(closest-side, rgba(255,255,255,.92), rgba(255,255,255,.5) 45%, rgba(255,255,255,0) 100%);
  will-change: transform;
}
.wolke.w1 { left: -10%; top: -5%; animation: wolke-1 34s ease-in-out infinite alternate; }
.wolke.w2 { right: -15%; bottom: -10%; animation: wolke-2 27s ease-in-out infinite alternate; }
@keyframes wolke-1 { from { transform: translate(0, 0); } to { transform: translate(28%, 16%); } }
@keyframes wolke-2 { from { transform: translate(0, 0); } to { transform: translate(-24%, -18%); } }
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 58% 72% at 56% 50%, rgba(255,255,255,0) 40%, rgba(255,255,255,.55) 70%, var(--paper) 100%);
}
.bild-in {
  position: relative;
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 8rem 2rem 4.5rem;
  display: grid;
  grid-template-columns: minmax(0, 36rem) 1fr;
  align-items: end;
  gap: 2rem;
}
.bild .rubrik { opacity: 0; animation: text-auf 1.2s ease .9s forwards; }
.bild h1 {
  margin-top: 1.4rem;
  font-weight: 400;
  font-size: clamp(2.3rem, 5.2vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: -.012em;
  text-wrap: balance;
  opacity: 0;
  animation: text-auf 1.4s ease 1.1s forwards;
}
.bild .satz {
  margin-top: 1.8rem;
  max-width: 30rem;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink-mid);
  opacity: 0;
  animation: text-auf 1.4s ease 1.5s forwards;
}
.bild .wege { margin-top: 2.4rem; display: flex; gap: 1rem; flex-wrap: wrap; opacity: 0; animation: text-auf 1.4s ease 1.8s forwards; }
@keyframes text-auf { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.legende {
  justify-self: end;
  align-self: end;
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: right;
  line-height: 1.8;
  opacity: 0;
  animation: text-auf 1.4s ease 2.2s forwards;
}

/* Schaltflächen: rechtwinklig, keine Schatten. Hauptschalter Tinte mit
   weisser Schrift, Hover Gold. Auf dunklem Grund spiegelbildlich. */
.schalter {
  display: inline-block;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .95rem 1.8rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
  cursor: pointer;
}
.schalter:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.schalter.zweit { background: transparent; color: var(--ink); border-color: var(--border); }
.schalter.zweit:hover { border-color: var(--gold); color: var(--gold); background: transparent; }
.dunkel .schalter { background: #fff; border-color: #fff; color: var(--ink); }
.dunkel .schalter:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.dunkel .schalter.zweit { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.dunkel .schalter.zweit:hover { border-color: var(--gold); color: var(--gold); background: transparent; }

/* ---------- Die vier Felder ----------
   Je ein Bildschirm: die Zeichnung in halber Bildschirmhöhe, der Satz daneben.
   Die Seiten wechseln von Feld zu Feld. */
.felder { border-top: 1px solid var(--border); }
.feld { border-bottom: 1px solid var(--border); }
.feld-in {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 6.5rem 2rem;
  min-height: 92vh;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 4rem;
  align-items: center;
}
.feld:nth-child(even) .feld-in > .text { order: -1; }
.feld .zeichnung {
  position: relative;
  display: block;
  width: 100%;
  max-width: 38rem;
  margin: 0 auto;
  color: var(--ink);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 2.2s cubic-bezier(.45,.05,.55,.95), transform 2.2s cubic-bezier(.45,.05,.55,.95);
}
.feld.da .zeichnung { opacity: 1; transform: none; }
.zeichnung svg { width: 100%; height: auto; display: block; }
.zeichnung .ufer, .zeichnung .beiwerk, .zeichnung .hilfslinie, .zeichnung .relief path { vector-effect: non-scaling-stroke; fill: none; stroke: currentColor; }
.zeichnung .ufer { stroke-width: 1.25px; }
.zeichnung .beiwerk { stroke-width: .8px; stroke-opacity: .9; }
.zeichnung .hilfslinie { stroke-width: .6px; stroke-opacity: .6; }
.zeichnung .lavur { opacity: 0; }
.zeichnung .linien { opacity: 1; }

/* Die gerechneten Felder liegen über ihrer Zeichnung, genau auf der Scheibe. */
.zeichnung .kugel-bild { position: absolute; left: 20.844%; top: 18%; width: 58.311%; height: 64%; pointer-events: none; }
.zeichnung .brillant-bild { position: absolute; left: 22.667%; top: 20%; width: 54.667%; height: 60%; pointer-events: none; }

/* Die Bewegung der fertigen Zeichnungen, wie auf dem laufenden Auftritt. */
.zeichnung svg {
  transform-origin: 50% 52%;
  animation-timing-function: cubic-bezier(.37, 0, .63, 1);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
}
.feld-1 .zeichnung svg { animation-name: wappen-atem; animation-duration: 3.2s; animation-delay: -0.9s; }
.feld-2 .zeichnung svg { animation-name: ringe-atem; animation-duration: 5.2s; animation-delay: -2.1s; }
.feld-3 .zeichnung svg { animation-name: ringe-atem; animation-duration: 4.4s; animation-delay: -1.4s; }
.feld-4 .zeichnung svg { animation-name: waage-wiegen; animation-duration: 2.4s; animation-delay: -0.5s; }
@keyframes wappen-atem { from { transform: perspective(1100px) rotateY(-15deg) translateY(1.1%) scale(1); } to { transform: perspective(1100px) rotateY(15deg) translateY(-1.1%) scale(1.035); } }
@keyframes ringe-atem { from { transform: scale(1); } to { transform: scale(1.03); } }
@keyframes waage-wiegen { from { transform: perspective(1100px) rotateY(-16deg) rotate(-2.4deg) translateY(.8%); } to { transform: perspective(1100px) rotateY(16deg) rotate(2.4deg) translateY(-.8%); } }

.feld .text { max-width: 30rem; }
.feld .zahl { font-family: var(--serif); color: var(--gold); font-size: 1rem; margin-right: .9rem; }
.feld h2 {
  margin-top: 1.3rem;
  font-weight: 400;
  font-size: clamp(1.7rem, 2.6vw, 2.35rem);
  line-height: 1.2;
  letter-spacing: -.008em;
  text-wrap: balance;
}
.feld .lauf { margin-top: 1.5rem; color: var(--ink-mid); font-size: 1.08rem; }
.feld .mehr {
  display: inline-block;
  margin-top: 2rem;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border);
  transition: border-color .25s ease, color .25s ease;
}
.feld .mehr:hover { border-bottom-color: var(--gold); color: var(--gold); }

/* ---------- Anfrage ---------- */
.anfrage-teil { background: var(--surface); border-bottom: 1px solid var(--border); }
.anfrage-in { max-width: var(--wide); margin: 0 auto; padding: 6.5rem 2rem; display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; }
.anfrage-in h2 { margin-top: 1.3rem; font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.35rem); line-height: 1.2; }
.anfrage-in .lauf { margin-top: 1.5rem; color: var(--ink-mid); font-size: 1.08rem; max-width: 24rem; }
.anfrage-in .direkt { margin-top: 2.2rem; font-family: var(--sans); font-size: .8rem; line-height: 2; color: var(--ink-mid); }
.anfrage-in .direkt a { text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--border); }
.anfrage-in .direkt a:hover { border-bottom-color: var(--gold); }

.anfrage { font-family: var(--sans); }
.anfrage .falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nur-vorlesen { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.anfrage .wahl { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.anfrage .wahl input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahl-marke {
  display: inline-block;
  padding: .6rem 1rem;
  border: 1px solid var(--border);
  background: var(--paper);
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--ink-mid);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.wahl-marke:hover { border-color: var(--gold); color: var(--ink); }
.anfrage .wahl input:checked + .wahl-marke { background: var(--ink); border-color: var(--ink); color: #fff; }
.anfrage .wahl input:focus-visible + .wahl-marke { outline: 1px solid var(--gold); outline-offset: 3px; }
.anfrage .wahl-hinweis { margin: .8rem 0 0; font-size: .78rem; color: #a4553f; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.4rem; }
.anfrage .feld { margin: 2rem 0 0; display: block; }
.anfrage .feld > label { display: block; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); }
.anfrage .feld .opt { text-transform: none; letter-spacing: .02em; font-style: italic; margin-left: .4rem; }
.anfrage input[type="text"], .anfrage input[type="email"], .anfrage input[type="tel"], .anfrage select, .anfrage textarea {
  width: 100%;
  margin-top: .5rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  padding: .55rem 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink);
  border-radius: 0;
  outline: none;
  transition: border-color .25s ease;
}
.anfrage input:focus, .anfrage select:focus, .anfrage textarea:focus { border-bottom-color: var(--gold); }
.anfrage textarea { resize: vertical; min-height: 6rem; }
.anfrage .feld-haken label { display: flex; gap: .8rem; align-items: flex-start; font-size: .76rem; line-height: 1.6; color: var(--ink-mid); letter-spacing: 0; text-transform: none; }
.anfrage .feld-haken input { margin: .3rem 0 0; accent-color: var(--ink); }
.anfrage .feld-haken a { color: var(--ink); }
.anfrage .feld-act { margin: 2.2rem 0 0; display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.anfrage .button {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .95rem 1.8rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}
.anfrage .button:hover { background: var(--gold); border-color: var(--gold); }
.anfrage .hinweis { font-size: .78rem; color: var(--ink-mute); }
.anfrage .hinweis a { text-decoration: none; color: var(--ink); }
.anfrage .fehlt, .anfrage label.fehlt { border-color: #a4553f; }
.anfrage select.fehlt, .anfrage input.fehlt { box-shadow: inset 0 -1px 0 #a4553f; }

/* ---------- Fuss, dunkel ---------- */
.fuss { background: var(--dunkel); color: #fff; }
.fuss-in { max-width: var(--wide); margin: 0 auto; padding: 4.5rem 2rem 3rem; }
.uhrzeile { font-family: var(--sans); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.uhrzeile .tag { margin-bottom: 1rem; }
.uhrzeile ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 2.2rem; }
.uhrzeile .zeit { color: #fff; margin-left: .6rem; font-variant-numeric: tabular-nums; }
.fuss-zeile { margin-top: 3.5rem; padding-top: 2.4rem; border-top: 1px solid var(--dunkel-linie); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; align-items: start; }
.fuss .haus { font-size: 1.25rem; display: block; }
.fuss address { font-style: normal; font-family: var(--sans); font-size: .82rem; line-height: 1.9; color: rgba(255,255,255,.78); }
.fuss address a { text-decoration: none; color: #fff; border-bottom: 1px solid transparent; transition: border-color .25s ease, color .25s ease; }
.fuss address a:hover { border-bottom-color: var(--gold); color: var(--gold); }
.fuss .recht { font-family: var(--sans); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; line-height: 2.4; justify-self: end; text-align: right; }
.fuss .recht a { text-decoration: none; color: rgba(255,255,255,.7); }
.fuss .recht a:hover { color: var(--gold); }
.fuss .recht .wf-cookie-manage-bar { position: static; transform: none; padding: 0; margin: 0; }
.fuss .recht .wf-cookie-manage-bar button {
  border: 0; background: transparent; padding: 0; margin: 0; cursor: pointer;
  font-family: var(--sans) !important; font-size: .68rem !important; letter-spacing: .14em !important;
  text-transform: uppercase !important; line-height: 2.4 !important; color: rgba(255,255,255,.7) !important;
  text-decoration: none !important;
}
.fuss .recht .wf-cookie-manage-bar button:hover { color: var(--gold) !important; }

/* ---------- Schmalere Fenster ---------- */
@media (max-width: 1000px) {
  /* Bis 1000 Pixel steht die Buehne ueber dem Satz; nebeneinander liefe der Satz in den Diamanten. */
  .bild { display: block; min-height: 0; }
  .buehne { position: relative; width: 100%; height: 56svh; min-height: 20rem; margin-top: 7.5rem; -webkit-mask-image: radial-gradient(ellipse 66% 70% at 50% 52%, #000 36%, rgba(0,0,0,.55) 60%, transparent 80%); mask-image: radial-gradient(ellipse 66% 70% at 50% 52%, #000 36%, rgba(0,0,0,.55) 60%, transparent 80%); }
  .vignette { background: radial-gradient(ellipse 60% 66% at 50% 52%, rgba(255,255,255,0) 40%, rgba(255,255,255,.55) 70%, var(--paper) 100%); }
  .bild-in { grid-template-columns: 1fr; padding: .5rem 2rem 3rem; }
  .legende { justify-self: start; text-align: left; margin-top: 1.4rem; }
  .feld-in { grid-template-columns: 1fr; gap: 2.4rem; min-height: 0; padding: 4.5rem 1.4rem; }
  .feld:nth-child(even) .feld-in > .text { order: 0; }
  .feld .zeichnung { max-width: 24rem; order: -1; }
  .zeichnung .ufer { stroke-width: 1.05px; }
  .anfrage-in { grid-template-columns: 1fr; gap: 2.6rem; padding: 4.5rem 1.4rem; }
  .fuss-zeile { grid-template-columns: 1fr; }
  .fuss .recht { justify-self: start; text-align: left; }
}
@media (max-width: 700px) {
  body { font-size: 17px; }
  .bild-in { padding: .5rem 1rem 3rem; }
  .buehne { height: 54svh; margin-top: 6.5rem; }
  .kopf-in { padding: .9rem 1rem; }
  .kopf.papier .kopf-in { padding: .55rem 1rem; }
  .feld-paar { grid-template-columns: 1fr; }
  .shell, .fuss-in { padding-left: 1rem; padding-right: 1rem; }
  .feld .zeichnung { max-width: 18rem; }
  /* Anfrage auf dem Telefon mittig: Einleitung, Anliegen, Beschriftungen,
     einzeilige Felder und Schalter zentriert; die Nachricht bleibt
     linksbündig, weil man dort mehrere Zeilen schreibt. */
  .anfrage-in > div { text-align: center; }
  .anfrage-in .lauf { margin-left: auto; margin-right: auto; }
  .anfrage .wahl { justify-content: center; }
  .anfrage .wahl-hinweis { text-align: center; }
  .anfrage .feld > label, .anfrage input[type="text"], .anfrage input[type="email"], .anfrage input[type="tel"], .anfrage select { text-align: center; }
  .anfrage .feld-haken label { justify-content: center; text-align: left; max-width: 24rem; margin: 0 auto; }
  .anfrage .feld-act { flex-direction: column; align-items: center; gap: 1.1rem; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .bild .rubrik, .bild h1, .bild .satz, .bild .wege, .legende { animation: none; opacity: 1; transform: none; }
  .wolke { animation: none; }
  .feld .zeichnung { opacity: 1; transform: none; transition: none; }
  .zeichnung svg { animation: none !important; }
}

/* ---------- Die Steckbriefe ----------
   Vier Fenster, je eines zu einem Feld. Zeichnung und Verweis unter dem
   Feld oeffnen es. Gestaltung wie auf der laufenden Startseite, nur ohne
   Schatten und ohne Rundung: Haarlinie in --border, Gold statt Dunkelgruen. */
.rechtfenster {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(20, 19, 17, .46);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2.5rem 1.2rem 3rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.rechtfenster[hidden] { display: none; }
.rechtfenster-in {
  position: relative;
  width: 100%;
  max-width: 46rem;
  background: var(--paper);
  border: 1px solid var(--border);
  padding: 3.2rem 2.6rem 2.6rem;
  text-align: left;
}
.rechtfenster-zu {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 0 2px;
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-mute);
  cursor: pointer;
}
.rechtfenster-zu:hover { color: var(--ink); border-bottom-color: var(--gold); }
.rechtfenster h2 { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; margin: 0 0 1rem; }
html.fenster-offen, html.fenster-offen body { overflow: hidden; }
@keyframes fenster-grund { from { opacity: 0; } to { opacity: 1; } }
@keyframes fenster-blatt { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.rechtfenster { animation: fenster-grund .28s ease both; }
.rechtfenster-in { animation: fenster-blatt .44s cubic-bezier(.2, .7, .2, 1) both; }
.steckbrief-marke { font-family: var(--sans); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin: 0 0 .5rem; }
.steckbrief-leitsatz { font-family: var(--serif); font-size: 1.24rem; line-height: 1.7; color: var(--ink-mid); margin: 0; }
.steckbrief-feld { border-top: 1px solid var(--border); margin-top: 1.7rem; padding-top: 1.4rem; }
.steckbrief-feld h3 { font-family: var(--sans); font-size: .62rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 .9rem; }
.steckbrief-feld ul { list-style: none; margin: 0; padding: 0; }
.steckbrief-feld li { font-family: var(--sans); font-size: .9rem; line-height: 1.75; color: var(--ink-mid); padding-left: 1.1rem; position: relative; }
.steckbrief-feld li::before { content: ""; position: absolute; left: 0; top: .82em; width: .5rem; height: 1px; background: var(--gold); }
.steckbrief-feld li + li { margin-top: .4rem; }
.steckbrief-feld p { font-family: var(--sans); font-size: .9rem; line-height: 1.75; color: var(--ink-mid); margin: 0; }
.steckbrief-feld a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.steckbrief-person figure { margin: 0; display: flex; align-items: center; gap: 1.2rem; }
.steckbrief-person img { width: 13rem; height: auto; display: block; flex: none; border: 1px solid var(--border); background: var(--paper); }
.steckbrief-person figcaption { display: block; }
.person-name { display: block; font-family: var(--serif); font-size: 1.08rem; line-height: 1.4; color: var(--ink); }
.person-rolle { display: block; margin-top: .35rem; font-family: var(--sans); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.steckbrief-bild figure { margin: 0; }
.steckbrief-bild img { width: 13rem; max-width: 100%; height: auto; display: block; border: 1px solid var(--border); background: var(--paper); }
.feld .zeichnung { cursor: pointer; }
.feld .zeichnung:focus-visible { outline: 1px solid var(--gold); outline-offset: 8px; }
@media (max-width: 700px) {
  .rechtfenster { padding: 1rem .6rem 2rem; }
  .rechtfenster-in { animation-name: fenster-grund; animation-duration: .3s; padding: 2.8rem 1.2rem 1.8rem; }
  .rechtfenster-zu {
    position: fixed;
    top: calc(.8rem + env(safe-area-inset-top, 0px));
    right: calc(.8rem + env(safe-area-inset-right, 0px));
    z-index: 320;
    background: var(--paper);
    border: 1px solid var(--border);
    padding: .72rem 1.05rem;
    font-size: .6rem;
  }
}
@media (max-width: 560px) {
  .steckbrief-person figure { flex-direction: column; align-items: flex-start; gap: .85rem; }
  .steckbrief-person img, .steckbrief-bild img { width: 11rem; }
  .person-name { font-size: 1rem; }
  .steckbrief-leitsatz { font-size: 1.1rem; }
  .steckbrief-feld { margin-top: 1.4rem; padding-top: 1.1rem; }
  .steckbrief-feld li, .steckbrief-feld p { font-size: .86rem; }
}
@media (prefers-reduced-motion: reduce) { .rechtfenster, .rechtfenster-in { animation: none; } }

/* ---------- Rechtliche Fenster und Antwort auf die Anfrage ---------- */
.rechtfenster .opener { padding: 0 0 1.6rem; }
.rechtfenster-warten { font-family: var(--sans); font-size: .8rem; color: var(--ink-mute); }
.rechtfenster .shell { padding: 0; max-width: none; }
.rechtfenster .opener p, .rechtfenster [data-inhalt] p, .rechtfenster [data-inhalt] li { font-size: 1rem; line-height: 1.7; color: var(--ink-mid); }
.rechtfenster [data-inhalt] h2 { font-size: 1.7rem; margin: 0 0 1rem; }
.rechtfenster [data-inhalt] h3 { font-family: var(--sans); font-size: .62rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); margin: 1.8rem 0 .6rem; }
.rechtfenster [data-inhalt] p + p { margin-top: .9rem; }
.rechtfenster [data-inhalt] a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 3px; }

/* ---------- Zustimmungsabfrage in der Farbgebung des Hauses ----------
   Die Abfrage bringt ihre eigene Gestaltung mit. Diese Regeln setzen sie auf
   Papier, Tinte und Gold um, rechtwinklig und ohne Schatten. */
body .wf-cookie.wf-cookie--blocking { background: rgba(20, 19, 17, .62) !important; }
body .wf-cookie.wf-cookie--blocking .wf-cookie__panel {
  background: var(--paper) !important;
  border-radius: 0 !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  font-family: var(--serif);
  color: var(--ink);
}
body .wf-cookie.wf-cookie--blocking h2 { font-family: var(--serif) !important; font-weight: 400 !important; font-size: 1.5rem !important; letter-spacing: .01em !important; color: var(--ink) !important; }
body .wf-cookie.wf-cookie--blocking .wf-cookie__eyebrow { font-family: var(--sans) !important; font-size: 10px !important; letter-spacing: .24em !important; text-transform: uppercase !important; color: var(--gold) !important; }
body .wf-cookie.wf-cookie--blocking .wf-cookie__body { color: var(--ink-mid) !important; }
body .wf-cookie.wf-cookie--blocking .wf-cookie__btn { font-family: var(--sans) !important; font-size: .72rem !important; font-weight: 400 !important; letter-spacing: .16em !important; text-transform: uppercase !important; border-radius: 0 !important; }
body .wf-cookie.wf-cookie--blocking .wf-cookie__btn[data-cookie-action="reject"] { background: var(--paper) !important; color: var(--ink) !important; border: 1px solid var(--border) !important; }
body .wf-cookie.wf-cookie--blocking .wf-cookie__btn[data-cookie-action="accept"],
body .wf-cookie.wf-cookie--blocking .wf-cookie__btn[data-cookie-action="save"] { background: var(--ink) !important; color: var(--paper) !important; border: 1px solid var(--ink) !important; }
body .wf-cookie.wf-cookie--blocking .wf-cookie__btn[data-cookie-action="reject"]:hover { border-color: var(--gold) !important; color: var(--gold) !important; }
body .wf-cookie.wf-cookie--blocking .wf-cookie__btn[data-cookie-action="accept"]:hover,
body .wf-cookie.wf-cookie--blocking .wf-cookie__btn[data-cookie-action="save"]:hover { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--paper) !important; }
body .wf-cookie.wf-cookie--blocking .wf-cookie__btn[data-cookie-action="settings"] { border: 1px solid var(--border) !important; color: var(--ink-mute) !important; }
body .wf-cookie.wf-cookie--blocking .wf-cookie__btn:focus-visible { outline: 2px solid var(--gold) !important; outline-offset: 2px; }
.wf-cookie__options label { display: block; font-family: var(--sans); font-size: .84rem; color: var(--ink-mid); }
.wf-cookie__options label + label { margin-top: .6rem; }
.wf-cookie__panel a { color: var(--ink); }
/* Bis die Zeile in den Fuss gewandert ist, steht sie still am unteren Rand. */
.wf-cookie-manage-bar { position: fixed; left: 50%; bottom: .7rem; transform: translateX(-50%); z-index: 205; padding: 0; }
.wf-cookie-manage-bar button { font-family: var(--sans); font-size: .58rem !important; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute) !important; text-decoration: none !important; border: 0; background: transparent; border-bottom: 1px solid var(--border); padding: 0 0 2px !important; cursor: pointer; }