/* ============================================================
   Mitglied ohne Glied — Gestaltung

   Farben, Typografie und Aufbau sind unverändert aus dem Entwurf
   übernommen. Dazugekommen sind nur die Bauteile, die es im
   Entwurf noch nicht gab: Fehlermeldungen, Haken, Fußzeilen-Links,
   die beiden Rechtstexte.
   ============================================================ */

:root{
  --green-deep:#102f24;
  --green-mid:#1d5340;
  --green-soft:#2f6e57;
  --gold:#d4a537;
  --gold-soft:#e9c873;
  --cream:#f4ecd9;
  --cream-dim:#e4d8bd;
  --ink:#15211c;
  --rot:#9e3b26;           /* Fehler. Gebranntes Rot, das neben Gold besteht. */
  --rot-zart:#f7e3dd;
  --maxw:1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Newsreader",Georgia,serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- Typografie ---------- */
.display{
  font-family:"Big Shoulders Display",Impact,sans-serif;
  font-weight:900;
  line-height:0.92;
  letter-spacing:0.005em;
  text-transform:uppercase;
}
.eyebrow{
  font-family:"Big Shoulders Display",Impact,sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:0.82rem;
}

/* ---------- Kopf ---------- */
.hero{
  background:var(--green-deep);
  color:var(--cream);
  position:relative;
  overflow:hidden;
}
.hero::after{ /* angedeutete Fahnenbahn */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 0 62%,rgba(212,165,55,0.06) 62% 64%,transparent 64%);
}
.hero-inner{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:48px;
  align-items:center;
  padding:64px 24px 76px;
  max-width:var(--maxw);
  margin:0 auto;
  position:relative;
  z-index:1;
}
.hero .eyebrow{color:var(--gold-soft)}
.hero h1{
  font-size:clamp(3.4rem,11vw,7.4rem);
  margin:18px 0 0;
  color:var(--cream);
}
.hero h1 .line2{color:var(--gold)}
.lede{
  font-size:clamp(1.1rem,2.2vw,1.4rem);
  max-width:30ch;
  margin:22px 0 32px;
  color:var(--cream-dim);
}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---------- Knöpfe ---------- */
.btn{
  font-family:"Big Shoulders Display",Impact,sans-serif;
  font-weight:800;text-transform:uppercase;letter-spacing:0.06em;
  font-size:1.05rem;
  border:none;cursor:pointer;border-radius:2px;
  padding:15px 26px;
  transition:transform .15s ease,background .15s ease,color .15s ease,border-color .15s ease;
  text-decoration:none;display:inline-block;
  line-height:1.2;
}
.btn-primary{background:var(--gold);color:var(--ink)}
.btn-primary:hover{transform:translateY(-2px);background:var(--gold-soft)}
.btn-ghost{color:var(--cream);border:1.5px solid rgba(244,236,217,.35);background:transparent}
.btn-ghost:hover{border-color:var(--gold-soft);color:var(--gold-soft)}
/* Dieselbe Geste, aber auf hellem Grund — in der Dankeschön-Karte. */
.btn-dunkel{color:var(--green-mid);border-color:rgba(29,83,64,.4)}
.btn-dunkel:hover{border-color:var(--green-mid);color:var(--green-deep)}

/* ---------- Zielscheibe ---------- */
.target-stage{display:flex;flex-direction:column;align-items:center;justify-self:center}
.target{position:relative;width:min(360px,78vw);aspect-ratio:1}
.target svg{display:block;width:100%;height:100%;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.35));}
/* Der Ruhezustand ist die fertige Zielscheibe, nicht die leere Fläche.
   Vorher stand hier transform:scale(0) und die Animation machte die
   Ringe erst sichtbar — läuft sie dann einmal nicht, bleibt der ganze
   Kopfbereich leer. So herum ist der schlimmste Fall, dass die
   Scheibe ohne Schwung da ist. Aussehen und Ablauf sind dieselben:
   animation-fill-mode "both" legt den Anfangszustand auch während
   der Verzögerung an. */
.ring{transform-origin:center;animation:pop .6s cubic-bezier(.2,.8,.25,1) both}
.target .r1{animation-delay:.05s}
.target .r2{animation-delay:.13s}
.target .r3{animation-delay:.21s}
.target .r4{animation-delay:.29s}
.target .r5{animation-delay:.37s}
.shot{animation:fadein .4s ease both}
.shot.s1{animation-delay:.7s}.shot.s2{animation-delay:.85s}.shot.s3{animation-delay:1s}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.count-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  pointer-events:none;
}
.count-num{
  font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;
  font-size:clamp(3rem,12vw,4.8rem);line-height:1;color:var(--green-deep);
  /* Tabellenziffern: beim Hochzählen springt die Zahl sonst in der Breite. */
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.count-sub{
  font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:0.12em;font-size:0.72rem;
  color:var(--green-mid);margin-top:2px;
}
.target-cap{
  font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:0.18em;font-size:0.8rem;
  color:var(--gold-soft);margin-top:20px;text-align:center;
}

/* ---------- Manifest ---------- */
.about{padding:84px 0}
.about .eyebrow{color:var(--green-mid)}
.about h2{
  font-size:clamp(2rem,5vw,3.2rem);margin:14px 0 28px;max-width:18ch;
  color:var(--green-deep);
}
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.about-grid p{font-size:1.12rem}
.about-grid p .drop{
  font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;
  color:var(--gold);font-size:1.3em;
}
.rule{height:3px;width:64px;background:var(--gold);margin-bottom:18px}

/* ---------- Formular ---------- */
.signup{background:var(--green-deep);color:var(--cream);padding:84px 0}
.signup .eyebrow{color:var(--gold-soft)}
.signup h2{font-size:clamp(2rem,5vw,3.2rem);margin:12px 0 10px;color:var(--cream)}
.signup .note{color:var(--cream-dim);max-width:46ch;margin-bottom:38px}
.form-card{
  background:var(--cream);color:var(--ink);
  border-radius:6px;padding:36px;max-width:560px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
}
.field{margin-bottom:20px}
.field label{
  display:block;font-family:"Big Shoulders Display",Impact,sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:0.1em;
  font-size:0.78rem;color:var(--green-mid);margin-bottom:7px;
}
.field .opt,.haken .opt{color:var(--green-soft);font-weight:500;text-transform:none;letter-spacing:0}
.field input{
  width:100%;font-family:"Newsreader",Georgia,serif;font-size:1.05rem;
  padding:13px 14px;border:1.5px solid var(--cream-dim);border-radius:3px;
  background:#fff;color:var(--ink);transition:border-color .15s ease;
}
.field input:focus{outline:none;border-color:var(--gold)}
.field.hat-fehler input{border-color:var(--rot);background:var(--rot-zart)}

/* Vor- und Nachname nebeneinander, solange Platz ist. */
.feld-paar{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}

.feldfehler{
  font-size:0.92rem;color:var(--rot);margin-top:6px;
}
.feldfehler.am-haken{margin:-10px 0 18px 32px}

/* Die Sammelmeldung über dem Formular. */
.fehlerkasten{
  border-left:4px solid var(--rot);
  background:var(--rot-zart);
  padding:16px 18px;margin-bottom:26px;border-radius:3px;
}
.fehlerkasten:focus{outline:none}
.fehler-titel{
  font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:0.08em;font-size:1rem;
  color:var(--rot);margin-bottom:6px;
}
.fehlerkasten ul{margin:0;padding-left:18px}
.fehlerkasten li{font-size:0.97rem;margin-top:3px}
.fehlerkasten a{color:var(--rot)}

/* ---------- Haken ---------- */
.haken{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px}
.haken input[type=checkbox]{
  flex:0 0 auto;width:20px;height:20px;margin-top:3px;
  accent-color:var(--green-mid);cursor:pointer;
}
.haken label{
  font-size:0.98rem;line-height:1.45;color:var(--ink);cursor:pointer;
}
.haken.hat-fehler label{color:var(--rot)}

.form-card .btn-primary{width:100%;margin-top:10px;font-size:1.15rem;padding:16px}
.privacy{font-size:0.9rem;color:var(--green-soft);margin-top:16px;text-align:center}
.privacy a{color:var(--green-mid)}

/* Honigtopf: aus dem Blick, aber nicht display:none — manche Bots
   erkennen das und lassen das Feld dann absichtlich leer. */
.honigtopf{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------- Dankeschön ---------- */
.thanks{display:none;text-align:center;padding:24px 8px}
.thanks.show{display:block;animation:fadein .5s ease forwards}
.thanks .big{
  font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;
  text-transform:uppercase;font-size:2rem;color:var(--green-deep);line-height:1;
}
.thanks .num{color:var(--gold)}
.thanks p{margin-top:12px;color:var(--green-mid)}
.thanks .klein{font-size:0.92rem;color:var(--green-soft);margin-top:16px}
.teilen-frage{
  font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:0.1em;font-size:0.82rem;
  color:var(--green-mid);margin-top:26px;
}
.teilen{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.teilen .btn{font-size:0.95rem;padding:12px 20px}

/* ---------- Rechtstexte ---------- */
.hero-schmal::after{display:none}
.hero-inner-schmal{
  grid-template-columns:1fr;padding:44px 24px 48px;
}
.hero-inner-schmal h1{font-size:clamp(2.4rem,7vw,4.2rem)}
.zurueck{color:var(--gold-soft);text-decoration:none}
.zurueck:hover{text-decoration:underline}

.textseite{padding:64px 0 84px}
.textseite .wrap{max-width:760px}
.textseite h2{
  font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:0.04em;
  font-size:1.5rem;color:var(--green-deep);
  margin:42px 0 12px;
}
.textseite h2:first-of-type{margin-top:0}
.textseite h3{
  font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:0.08em;
  font-size:1.05rem;color:var(--green-mid);
  margin:26px 0 8px;
}
.textseite p,.textseite li{font-size:1.05rem;margin-bottom:10px}
.textseite ul{padding-left:22px;margin-bottom:14px}
.textseite a{color:var(--green-mid)}
.textseite .anschrift{
  border-left:3px solid var(--gold);padding-left:16px;margin:14px 0 22px;
}
.textseite .anschrift p{margin-bottom:2px}
.textseite .stand{
  font-size:0.9rem;color:var(--green-soft);margin-top:40px;
  border-top:1px solid var(--cream-dim);padding-top:14px;
}

/* Sichtbarer Hinweis, solange in der konfig.php Platzhalter stehen.
   Lieber hier auffallen als in einer Abmahnung. */
.warnkasten{
  border:2px dashed var(--rot);background:var(--rot-zart);
  padding:18px 20px;margin-bottom:32px;border-radius:4px;
}
.warnkasten p{margin-bottom:8px;font-size:1rem}
.warnkasten p:last-child{margin-bottom:0}
.warnkasten code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:0.92em;background:rgba(158,59,38,.12);padding:1px 5px;border-radius:2px;
}

/* ---------- Fuß ---------- */
footer{background:var(--ink);color:var(--cream-dim);padding:40px 0;text-align:center}
footer .display{font-size:1.4rem;color:var(--gold-soft);margin-bottom:6px}
footer small{display:block;margin-top:14px;opacity:.6}
.fuss-links{
  display:flex;gap:22px;justify-content:center;flex-wrap:wrap;
  margin-top:18px;
}
.fuss-links a{
  color:var(--cream-dim);text-decoration:none;font-size:0.9rem;opacity:.75;
}
.fuss-links a:hover{opacity:1;color:var(--gold-soft);text-decoration:underline}

:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ---------- Schmale Fenster ---------- */
@media(max-width:820px){
  .hero-inner{grid-template-columns:1fr;gap:36px;text-align:center;padding-top:48px}
  .lede{margin-left:auto;margin-right:auto}
  .cta-row{justify-content:center}
  .about-grid{grid-template-columns:1fr;gap:20px}
  .about h2{max-width:none}
  .hero-inner-schmal{text-align:left}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
  .hero-inner{padding-left:18px;padding-right:18px}
  .form-card{padding:26px 20px}
  .about{padding:60px 0}
  .signup{padding:60px 0}
  /* Nebeneinander wird es hier zu eng: zwei halbe Namensfelder
     sind auf dem Handy schlechter zu tippen als zwei volle. */
  .feld-paar{grid-template-columns:1fr}
  .teilen .btn{width:100%}
}

/* ---------- Weniger Bewegung ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .ring{transform:scale(1)}
  .shot{opacity:1}
  .thanks.show{display:block}
}

/* ---------- Druck ---------- */
@media print{
  .hero,.signup{background:#fff!important;color:#000!important}
  .hero h1,.signup h2{color:#000!important}
  .cta-row,.teilen,.form-card .btn-primary{display:none}
}