/* Generat aus baue_ratsrunde.py — nie von Hand ändern. */
:root {
  --ink: #123a42;
  --ink2: #14170f;
  --ink3: #0f3038;
  --paper: #f5fafa;
  --paper-dim: #a9c8cd;
  --tuerkis: #339baa;
  --tuerkis-soft: #7fcbd6;
  --moss: #c8dde0;
  --offen: #d9735c;
  --line: rgba(245, 250, 250, .14);
  --disp: 'Fraunces', serif;
  --body: 'Space Grotesk', system-ui, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scrollbar-color: #2a5a63 var(--ink); }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-weight: 340;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--tuerkis); color: var(--ink); }

/* ─── Rahmen ─────────────────────────────────────────────────── */
#kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem 1.6rem;
  mix-blend-mode: difference;
  pointer-events: none;
}
#kopf .marke {
  font-family: var(--disp); font-weight: 560; font-size: 1.05rem;
  letter-spacing: .02em; color: var(--paper); text-decoration: none;
  pointer-events: auto;
  display: inline-flex; align-items: center; min-height: 36px;
}
#kopf .kapitel {
  font-size: .68rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--paper); opacity: .75; font-variant-numeric: tabular-nums;
}
#fadenstand {
  position: fixed; left: 1.6rem; bottom: 1.2rem; z-index: 40;
  font-size: .66rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--paper-dim); mix-blend-mode: difference;
  font-variant-numeric: tabular-nums;
}

/* ─── Der Film ───────────────────────────────────────────────── */
#film {
  position: relative; height: 100vh; height: 100svh;
  overflow: hidden; background:
    radial-gradient(120% 90% at 50% 110%, #0b2228 0%, var(--ink) 55%),
    var(--ink);
  display: none;
}
html.js #film { display: block; }
.schicht { position: absolute; inset: 0; }

#murmurs span {
  position: absolute;
  font-family: var(--disp); font-weight: 380; font-style: italic;
  font-size: clamp(.8rem, 1.6vw, 1.15rem);
  color: var(--paper); opacity: .16; white-space: nowrap;
  animation: treiben 9s ease-in-out infinite alternate;
}
@keyframes treiben {
  from { transform: translate3d(0, 0, 0) rotate(-1.2deg); }
  to   { transform: translate3d(.7rem, -.9rem, 0) rotate(1.1deg); }
}

#held { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
#held .ueber {
  font-size: .7rem; letter-spacing: .42em; text-transform: uppercase;
  color: var(--tuerkis); margin-bottom: 1.4rem;
}
#held h1 {
  font-family: var(--disp); font-weight: 480;
  font-size: clamp(3.4rem, 11vw, 8.5rem);
  line-height: .95; letter-spacing: -.015em; color: var(--paper);
}
#held h1 .buchst { display: inline-block; will-change: transform, opacity; }
#held .unter {
  margin-top: 1.6rem; font-size: clamp(.95rem, 1.9vw, 1.3rem);
  color: var(--paper-dim); font-weight: 330;
}
#held .runter {
  position: absolute; bottom: 2.4rem; left: 50%; transform: translateX(-50%);
  font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: var(--paper-dim);
}
#held .runter::after {
  content: ""; display: block; width: 1px; height: 2.6rem; margin: .7rem auto 0;
  background: linear-gradient(var(--tuerkis), transparent);
}

#faden { width: 100%; height: 100%; display: block; }
#faden .pfad {
  fill: none; stroke: var(--tuerkis); stroke-width: 2.2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(51, 155, 170, .55));
}
#faden .punkt { fill: var(--tuerkis-soft); filter: drop-shadow(0 0 8px rgba(127, 203, 214, .9)); }

#register { display: flex; align-items: center; justify-content: center; gap: clamp(.6rem, 2vw, 1.4rem);
  padding: 0 clamp(.8rem, 3vw, 3rem); }
.reg {
  flex: 1 1 0; max-width: 21rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  display: flex; flex-direction: column; gap: .75rem;
}
.reg h2 {
  font-size: .72rem; letter-spacing: .34em; text-transform: uppercase;
  font-weight: 500; color: var(--paper);
  display: flex; align-items: center; gap: .6rem;
}
.reg h2::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--tuerkis); flex: none; }
.reg[data-welches="offen"] h2::before { background: var(--offen); }
.reg[data-welches="getragen"] h2::before { background: var(--moss); }
.karte {
  background: linear-gradient(160deg, #17454e, #0f3239);
  border: 1px solid var(--line);
  border-radius: .55rem;
  padding: .8rem 1rem;
  font-size: clamp(.78rem, 1.5vw, .95rem);
  color: var(--paper); line-height: 1.45;
  box-shadow: 0 10px 30px rgba(4, 20, 24, .5);
  will-change: transform, opacity;
}
.karte .meta { display: block; margin-top: .35rem; font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--paper-dim); }

#blaetter .blatt {
  position: absolute;
  background: rgba(15, 48, 56, .92);
  border: 1px solid var(--line); border-left: 2px solid var(--tuerkis);
  border-radius: .4rem; padding: .55rem .85rem;
  font-size: .72rem; letter-spacing: .06em; color: var(--paper-dim);
  will-change: transform, opacity;
}
#blaetter .blatt b { color: var(--paper); font-weight: 500; display: block; font-size: .8rem; }

#landung { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
#kreis {
  position: relative; width: min(46vw, 260px); height: min(46vw, 260px); margin-bottom: 2.4rem;
  border: 1px solid rgba(245, 250, 250, .12); border-radius: 50%;
}
#kreis .stuhl {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: var(--paper-dim); opacity: .6;
}
#kreis .stuhl.an { background: var(--tuerkis); opacity: 1; box-shadow: 0 0 12px rgba(51, 155, 170, .9); }
#kreis .glut {
  position: absolute; inset: 16%;
  background: radial-gradient(circle, rgba(51, 155, 170, .42) 0%, rgba(51, 155, 170, .10) 48%, transparent 72%);
  border-radius: 50%;
}
#landung h2 {
  font-family: var(--disp); font-weight: 480; font-size: clamp(2rem, 5.4vw, 3.6rem);
  line-height: 1.08; letter-spacing: -.01em; max-width: 18ch;
}
#landung h2 em { font-style: italic; color: var(--tuerkis-soft); }

/* ─── Der Inhalt nach dem Film ───────────────────────────────── */
#inhalt { position: relative; background: var(--ink); }
.abschnitt {
  max-width: 68rem; margin: 0 auto;
  padding: clamp(4.5rem, 12vh, 8rem) clamp(1.2rem, 4vw, 3rem);
}
.etikett {
  font-size: .68rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--tuerkis); margin-bottom: 1.3rem; display: block;
}
h3 {
  font-family: var(--disp); font-weight: 470; font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  line-height: 1.14; letter-spacing: -.01em; margin-bottom: 1.4rem; max-width: 26ch;
}
.abschnitt p { color: var(--paper-dim); max-width: 62ch; font-size: clamp(.95rem, 1.6vw, 1.08rem); }
.abschnitt p + p { margin-top: 1em; }
.abschnitt p b { color: var(--paper); font-weight: 500; }

#zahl { text-align: center; }
#zahl .gross {
  font-family: var(--disp); font-weight: 430;
  font-size: clamp(4.6rem, 15vw, 11rem); line-height: 1;
  color: var(--paper); font-variant-numeric: tabular-nums;
}
#zahl .gross i { font-style: normal; color: var(--tuerkis); }
#zahl p { margin: 1.4rem auto 0; }

.laufband {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  overflow: hidden; padding: .9rem 0; white-space: nowrap;
}
.laufband .zug {
  display: inline-block; animation: lauf 26s linear infinite;
  font-size: .78rem; letter-spacing: .3em; text-transform: uppercase; color: var(--paper-dim);
}
.laufband .zug em { color: var(--tuerkis); font-style: normal; margin: 0 1.2rem; }
@keyframes lauf { to { transform: translateX(-50%); } }

.drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.4rem; }
.drei .feld {
  border: 1px solid var(--line); border-radius: .8rem;
  background: linear-gradient(165deg, var(--ink3), var(--ink2));
  padding: 1.6rem 1.4rem;
}
.drei .feld h4 {
  font-family: var(--disp); font-weight: 500; font-size: 1.35rem;
  margin-bottom: .7rem; display: flex; align-items: baseline; gap: .6rem;
}
.drei .feld h4 .zeichen { color: var(--tuerkis); font-size: 1rem; }
.drei .feld p { font-size: .92rem; }

.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.4rem; }
.zwei .feld {
  border: 1px solid var(--line); border-radius: .8rem;
  background: linear-gradient(165deg, var(--ink3), var(--ink2));
  padding: 1.8rem 1.6rem;
}
.zwei .feld h4 { font-family: var(--disp); font-weight: 500; font-size: 1.5rem; margin-bottom: .8rem; }
.zwei .feld p { font-size: .95rem; }
.zwei .feld .preis { color: var(--tuerkis-soft); font-weight: 500; }

#stufen .stufe {
  border-top: 1px solid var(--line); padding: 1.4rem 0;
}
#stufen .stufe:last-of-type { border-bottom: 1px solid var(--line); }
#stufen .zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem 2rem; flex-wrap: wrap; }
#stufen .name { font-family: var(--disp); font-size: 1.6rem; font-weight: 500; }
#stufen .fuer { margin-top: .45rem; color: var(--paper-dim); font-size: .92rem; }
#stufen .preis { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#stufen .preis b { font-family: var(--disp); font-size: 1.4rem; font-weight: 500; color: var(--paper); }
#stufen .preis span { font-size: .85rem; color: var(--paper-dim); }
#stufen .fein { margin-top: 1.1rem; font-size: .8rem; color: var(--paper-dim); }

#ruf { text-align: center; }
#ruf h3 { margin-left: auto; margin-right: auto; }
#ruf .knopf {
  display: inline-block; margin-top: 2rem; padding: 1rem 2.4rem;
  border: 1px solid var(--tuerkis); border-radius: 3rem;
  color: var(--tuerkis-soft); text-decoration: none; font-size: .9rem;
  letter-spacing: .14em; text-transform: uppercase;
  transition: background .3s, color .3s;
}
#ruf .knopf:hover { background: var(--tuerkis); color: var(--ink); }
#ruf .hinweis { margin-top: 1.2rem; font-size: .8rem; color: var(--paper-dim); }

#fuss {
  border-top: 1px solid var(--line);
  padding: 2.4rem clamp(1.2rem, 4vw, 3rem);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .76rem; color: var(--paper-dim);
}
#fuss .luecke { color: #6f9198; }
#fuss .leitstern { flex-basis: 100%; color: var(--paper-dim); }
#fuss .leitstern a { color: var(--paper); text-decoration: none; display: inline-block; min-height: 44px; line-height: 44px; }
#fuss .leitstern a:hover { color: var(--tuerkis-soft); text-decoration: underline; }
#fuss .fussnav a { color: var(--paper); text-decoration: none; display: inline-block; min-height: 44px; line-height: 44px; padding: 0 .2rem; }
#fuss .fussnav a:hover { color: var(--tuerkis-soft); text-decoration: underline; text-underline-offset: .18em; }
.fragen { max-width: 62ch; }
.fragen dt { font-family: var(--disp); font-weight: 520; font-size: 1.15rem; color: var(--paper); margin-top: 1.4rem; }
.fragen dd { color: var(--paper-dim); margin-top: .4rem; font-size: clamp(.95rem, 1.6vw, 1.08rem); }
.fragen dd b { color: var(--paper); font-weight: 500; }
.rechtsseite { max-width: 68rem; margin: 0 auto; padding: clamp(3rem, 8vh, 6rem) clamp(1.2rem, 4vw, 3rem); }
.rechtsseite h1 { font-family: var(--disp); font-weight: 470; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.1; margin-bottom: 1.6rem; }
.rechtsseite h2 { font-family: var(--disp); font-weight: 500; font-size: 1.35rem; margin: 2.2rem 0 .6rem; }
.rechtsseite p, .rechtsseite li { color: var(--paper-dim); max-width: 68ch; }
.rechtsseite ul { padding-left: 1.2rem; }
.rechtsseite a { color: var(--tuerkis-soft); }

/* ─── Mobil ──────────────────────────────────────────────────── */
@media (max-width: 760px) {
  #register { flex-direction: column; align-items: center; gap: 1.6rem; padding-top: 4.6rem; }
  .reg { width: min(100%, 24rem); }
  .karte { font-size: .85rem; padding: .65rem .9rem; }
  .drei, .zwei { grid-template-columns: 1fr; }
  #stufen .zeile { flex-direction: column; align-items: flex-start; gap: .2rem; }
  #stufen .preis { text-align: left; white-space: normal; }
  #blaetter .blatt { font-size: .62rem; padding: .4rem .6rem; }
}

/* ─── Ruhig, wenn gewünscht ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #murmurs span, .laufband .zug { animation: none; }
}
html.ruhig #film { display: none; }
html.ruhig #fadenstand { display: none; }
/* ─── Anfrage-Formular und Rückfall-Kasten — Haus-Zugabe des Bauers, keine Quell-Gestalt ─── */
#ruf .rr-kasten { margin-top: 2rem; display: inline-block; text-align: left; border: 1px solid var(--tuerkis); border-radius: 1rem; padding: 1.4rem 1.8rem; }
#ruf .rr-kasten a { color: var(--tuerkis-soft); text-decoration: none; }
#ruf .rr-kasten a:hover { text-decoration: underline; }
.rr-form { margin: 2.2rem auto 0; max-width: 32rem; text-align: left; display: grid; gap: 1rem; }
.rr-form label { display: grid; gap: .35rem; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--paper-dim); }
.rr-form input, .rr-form select, .rr-form textarea { width: 100%; min-height: 48px; padding: .7rem .9rem; background: var(--ink2); color: var(--paper); border: 1px solid var(--line); border-radius: .6rem; font-family: inherit; font-size: 1rem; letter-spacing: normal; text-transform: none; }
.rr-form textarea { min-height: 7rem; resize: vertical; }
.rr-form input:focus, .rr-form select:focus, .rr-form textarea:focus { outline: 2px solid var(--tuerkis); outline-offset: 2px; }
.rr-form .hp { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
.rr-form .knopf { justify-self: center; background: transparent; font-family: inherit; cursor: pointer; }