/* =========================================================
   SC 1919 Gladenbach e.V.
   Design-Tokens aus der Ursprungsseite und dem Vereinswappen
   extrahiert, nicht geschaetzt.
   ========================================================= */

:root{
  /* Farben. Aus dem Vereinswappen und der alten Seite gemessen,
     nicht geschaetzt. Die Variablennamen bleiben aus der Vorlage
     erhalten, damit das Stylesheet vergleichbar bleibt. */
  --gruen:        #ff191b;   /* Vereinsrot, exakt aus dem Wappen gemessen. Akzenttext auf Schwarz */
  --gruen-hell:   #d0141a;   /* Hover-Ton fuer Knoepfe */
  --gruen-tief:   #b30f14;   /* Knopfgrund und Akzenttext auf hellem Grund */
  --schwarz:      #0e0f0e;
  --schwarz-weich:#161816;
  --grau-linie:   #2a2d2a;
  --kreide:       #b7bdb8;
  --weiss:        #ffffff;
  --papier:       #f4f5f2;
  --papier-linie: #e0e3dd;

  /* Typografie */
  --schrift: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --t-xs:  clamp(.72rem, .70rem + .1vw, .78rem);
  --t-s:   clamp(.86rem, .82rem + .2vw, .95rem);
  --t-m:   clamp(1rem, .95rem + .25vw, 1.12rem);
  --t-l:   clamp(1.18rem, 1.05rem + .6vw, 1.5rem);
  --t-xl:  clamp(1.7rem, 1.3rem + 1.9vw, 2.9rem);
  --t-2xl: clamp(2.3rem, 1.5rem + 3.6vw, 5.2rem);

  /* Raster */
  --spur: min(1240px, 100% - 2.5rem);
  --luft-s: clamp(2.5rem, 5vw, 4rem);
  --luft-m: clamp(4rem, 8vw, 7rem);
  --luft-l: clamp(5.5rem, 11vw, 10rem);
  --kopf-hoch: 104px;
  --kopf-klein: 68px;
  --radius: 3px;
  --tempo: .55s cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--schwarz);
  color:var(--weiss);
  font-family:var(--schrift);
  font-size:var(--t-m);
  font-weight:400;
  line-height:1.68;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--gruen);
  outline-offset:3px;
  border-radius:2px;
}

.spur{ width:var(--spur); margin-inline:auto; }
.nur-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------------------------------------------------------
   Typografie
   --------------------------------------------------------- */

h1,h2,h3,h4{
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.025em;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:var(--t-2xl); text-transform:uppercase; }
h2{ font-size:var(--t-xl); text-transform:uppercase; }
h3{ font-size:var(--t-l); letter-spacing:-.01em; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

/* Eyebrow: Vereinssprache, nicht Dekoration */
.marke{
  display:flex; align-items:center; gap:.85rem;
  font-size:var(--t-xs); font-weight:800;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--gruen);
  margin:0 0 1.4rem;
}
.marke::after{
  content:''; flex:1; height:1px; max-width:180px;
  background:linear-gradient(90deg,var(--gruen),transparent);
}
.hell .marke{ color:var(--gruen-tief); }
.hell .marke::after{ background:linear-gradient(90deg,var(--gruen-tief),transparent); }

.vorspann{
  font-size:var(--t-l); font-weight:600; line-height:1.42;
  letter-spacing:-.012em; max-width:44ch;
}
.leise{ color:var(--kreide); }
.hell .leise{ color:#5c635c; }

/* ---------------------------------------------------------
   Seitenlinie: das wiederkehrende Element der Seite.
   Duenne gruene Linie am linken Rand mit Markierung je Abschnitt,
   Zitat der Spielfeldbegrenzung.
   --------------------------------------------------------- */

/* Die frueheren Randmarkierungen sind bewusst entfernt. */

/* ---------------------------------------------------------
   Kopf
   --------------------------------------------------------- */

.kopf{
  position:fixed; inset:0 0 auto 0; z-index:70;
  height:var(--kopf-hoch);
  display:flex; align-items:center;
  background:rgba(14,15,14,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:height var(--tempo), background var(--tempo), border-color var(--tempo);
}
.kopf.eng{
  height:var(--kopf-klein);
  background:rgba(14,15,14,.94);
  border-bottom-color:var(--grau-linie);
}
.kopf .spur{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

.wappen{ display:flex; align-items:center; gap:.8rem; text-decoration:none; }
.wappen img{
  width:auto; height:64px;
  transition:height var(--tempo);
}
.kopf.eng .wappen img{ height:40px; }
.wappen-text{
  display:flex; flex-direction:column; line-height:1.1;
  font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
}
.wappen-text span:last-child{ color:var(--gruen); letter-spacing:.3em; }

.nav-haupt{ display:flex; align-items:center; gap:2rem; }
.kopf .knopf{ padding:.95rem 2.9rem; min-height:50px; white-space:nowrap; font-size:var(--t-xs); }
.nav-haupt a{
  text-decoration:none; font-size:var(--t-s); font-weight:600;
  letter-spacing:.06em; position:relative; padding:.35rem 0;
}
.nav-haupt a:not(.knopf)::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--gruen); transition:right .35s ease;
}
.nav-haupt a:not(.knopf):hover::after,
.nav-haupt a:not(.knopf)[aria-current="page"]::after{ right:0; }

.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.9rem 2rem; border-radius:999px;
  font-size:var(--t-s); font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; border:1px solid var(--gruen-tief); background:var(--gruen-tief); color:var(--weiss);
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
  cursor:pointer; min-height:48px;
}
.knopf:hover{ background:var(--gruen-hell); border-color:var(--gruen-hell); transform:translateY(-2px); }
.knopf--linie{ background:transparent; color:var(--weiss); border-color:#3a3f3a; }
.knopf--linie:hover{ background:var(--weiss); color:var(--schwarz); border-color:var(--weiss); }
.hell .knopf--linie{ color:var(--schwarz); border-color:#c9cfc7; }
.hell .knopf--linie:hover{ background:var(--schwarz); color:var(--weiss); border-color:var(--schwarz); }

.menue-schalter{
  display:none; width:48px; height:48px; align-items:center; justify-content:center;
  background:none; border:1px solid var(--grau-linie); border-radius:var(--radius);
  cursor:pointer; padding:0;
}
.menue-schalter span{
  display:block; width:20px; height:2px; background:var(--weiss); position:relative;
  transition:background .2s ease;
}
.menue-schalter span::before,
.menue-schalter span::after{
  content:''; position:absolute; left:0; width:20px; height:2px; background:var(--weiss);
  transition:transform .3s ease;
}
.menue-schalter span::before{ top:-6px; }
.menue-schalter span::after{ top:6px; }
.menue-schalter[aria-expanded="true"] span{ background:transparent; }
.menue-schalter[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.menue-schalter[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

/* ---------------------------------------------------------
   Abschnitte
   --------------------------------------------------------- */

main{ padding-top:var(--kopf-hoch); }

.abschnitt{ padding-block:var(--luft-l); }
.abschnitt--eng{ padding-block:var(--luft-m); }
.hell{ background:var(--papier); color:var(--schwarz); }
.hell h1,.hell h2,.hell h3{ color:var(--schwarz); }

.duo{
  display:grid; gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:900px){
  .duo{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
  .duo--schmal{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}

/* ---------------------------------------------------------
   Kopfbereich der Startseite
   --------------------------------------------------------- */

.buehne{
  position:relative; overflow:hidden;
  min-height:max(clamp(600px,92vh,900px), min(32vw,960px));
  display:flex; align-items:flex-end;
  padding-block:calc(var(--kopf-hoch) + 3rem) var(--luft-m);
  background:var(--schwarz);
}
.buehne__wappen{
  position:absolute; z-index:1;
  right:clamp(1.5rem,6vw,7rem); top:50%;
  width:clamp(240px,31vw,470px); aspect-ratio:1;
  translate:0 -50%;
  text-decoration:none; display:block;
  filter:saturate(.9);
  opacity:.5;
  transition:opacity .55s ease, filter .55s ease, scale .55s cubic-bezier(.22,.61,.36,1);
}
.buehne__wappen img{ width:100%; height:100%; object-fit:contain; display:block; }
.buehne__wappen::before{
  content:''; position:absolute; inset:-14%; border-radius:50%; z-index:-1;
  background:radial-gradient(circle,rgba(228,20,26,.55) 0%,rgba(228,20,26,.22) 45%,transparent 70%);
  opacity:0; transition:opacity .55s ease; filter:blur(26px);
}
.buehne__wappen:hover,
.buehne__wappen:focus-visible{ opacity:1; filter:saturate(1); scale:1.09; }
.buehne__wappen:hover::before,
.buehne__wappen:focus-visible::before{ opacity:1; }
.buehne__wappen::after{
  content:attr(data-hinweis);
  position:absolute; left:50%; bottom:-2.2rem; translate:-50% 0;
  font-size:var(--t-xs); font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gruen); white-space:nowrap; opacity:0; transition:opacity .4s ease;
}
.buehne__wappen:hover::after,
.buehne__wappen:focus-visible::after{ opacity:1; }
@media (max-width:880px){
  .buehne__wappen{ top:auto; bottom:clamp(1rem,5vw,3rem); right:1.25rem; translate:0; width:120px; opacity:.2; }
  .buehne__wappen::after{ display:none; }
}
.buehne__inhalt{ position:relative; z-index:2; width:var(--spur); margin-inline:auto; max-width:100%; }
.buehne__inhalt > *{ max-width:min(46rem,100%); }
.buehne h1{ max-width:16ch; }
.buehne h1 em{ font-style:normal; color:var(--gruen); display:block; }
.buehne .vorspann{ margin-top:1.8rem; }
.buehne__knoepfe{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.6rem; }

/* Jahreszahl vertikal an der Seitenlinie */
.jahr{
  position:absolute; left:calc((100% - var(--spur))/2 - 2.6rem); bottom:var(--luft-m);
  writing-mode:vertical-rl; font-size:var(--t-xs); font-weight:800;
  letter-spacing:.5em; color:var(--gruen); z-index:2;
}
@media (max-width:1100px){ .jahr{ display:none; } }

/* ---------------------------------------------------------
   Zahlenband
   --------------------------------------------------------- */

.zahlen{
  display:grid; gap:clamp(.9rem,1.6vw,1.3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
}
.zahl{
  background:var(--schwarz-weich); border:1px solid var(--grau-linie);
  border-radius:14px; padding:clamp(1.8rem,3.4vw,2.4rem) 1.4rem;
  min-width:0; text-align:center;
  transition:border-color .35s ease, transform .35s ease;
}
.zahl:hover{ border-color:var(--gruen); transform:translateY(-3px); }
.zahl b{
  display:block; font-size:clamp(2rem,4.5vw,3.2rem); font-weight:800;
  letter-spacing:-.03em; line-height:1; color:var(--weiss); overflow-wrap:break-word;
}
.zahl span{
  display:block; margin-top:.6rem; font-size:var(--t-xs); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--kreide);
}

/* ---------------------------------------------------------
   Bildband
   --------------------------------------------------------- */

.band{ position:relative; overflow:hidden; }
.band picture,
.band picture img{ display:block; width:100%; height:100%; }
.band__bild{
  position:absolute; inset:0; z-index:0;
}
/* Der Personenblock im Mannschaftsfoto liegt zwischen 15 und 69 Prozent
   der Bildhoehe, zeilenweise ausgemessen. Der Ausschnitt ist darauf
   gerechnet, nicht geschaetzt. */
/* Hauttoene zeilenweise ausgewertet: die Gesichter liegen zwischen 33 und
   72 Prozent der Bildhoehe. Die Hoehe steht deshalb fest und waechst nicht
   mit der Fensterbreite. Damit breite Monitore nicht weiter hineinzoomen,
   ist die Bildbreite bei 1600 Pixeln gedeckelt und rechtsbuendig gesetzt.
   Bei 1440 Fenster liegt das Fenster auf 7 bis 92 Prozent, bei 3440 auf
   11 bis 88 Prozent. Die Mannschaft ist in beiden Faellen vollstaendig
   im Bild. */
.band{ min-height:860px; display:flex; align-items:center; background:var(--schwarz); }
.band__bild img{ object-fit:cover; object-position:center 44%; }
@media (min-width:2200px){ .band{ min-height:1000px; } }
.band__schleier{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg,rgba(12,13,12,.93) 0%,rgba(12,13,12,.8) 30%,rgba(12,13,12,.16) 64%,rgba(12,13,12,.1) 100%),
    linear-gradient(180deg,rgba(12,13,12,.45) 0%,rgba(12,13,12,0) 26%,rgba(12,13,12,.5) 100%);
}
.band__inhalt{
  position:relative; z-index:2; width:var(--spur); margin-inline:auto;
  padding-block:var(--luft-m);
}
.band__inhalt p{ color:var(--weiss); }
.band__inhalt .vorspann{ color:#e8ebe8; }

/* Querformat laesst sich nicht hochkant zuschneiden. Auf schmalen
   Geraeten deshalb nicht croppen, sondern das Bild ungeschnitten unter
   den Text setzen und nach oben auslaufen lassen. */
@media (max-width:760px){
  .band{ display:block; min-height:0; }
  .band__bild{ position:static; }
  .band__bild img{ object-fit:contain; height:auto; }
  .band__schleier{
    inset:auto 0 0 0; height:55%;
    background:linear-gradient(180deg,rgba(12,13,12,0) 0%,rgba(12,13,12,.75) 55%,rgba(12,13,12,.96) 100%);
  }
  .band__inhalt{ padding-block:var(--luft-m) 2rem; }
}

/* ---------------------------------------------------------
   Karten
   --------------------------------------------------------- */

.karten{
  display:grid; gap:clamp(1.2rem,2.5vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
}
.karte{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--schwarz-weich); border:1px solid var(--grau-linie);
  border-radius:var(--radius); overflow:hidden;
  transition:border-color .35s ease, transform .35s ease;
}
.hell .karte{ background:var(--weiss); border-color:var(--papier-linie); }
.karte:hover{ border-color:var(--gruen); transform:translateY(-4px); }
.karte{ border-radius:14px; }
.karte--text{ padding:clamp(1.8rem,3vw,2.4rem); gap:.9rem; }
.karte--text .nummer{
  font-size:var(--t-xs); font-weight:800; letter-spacing:.24em;
  color:var(--gruen-tief); margin:0 0 .4rem;
}
.karte--text h3{ font-size:var(--t-l); text-transform:uppercase; letter-spacing:-.02em; margin:0; }
.karte--text p{ font-size:var(--t-s); margin:0; }
.karte--text .pfeil{
  margin-top:auto; padding-top:1.4rem; font-size:var(--t-xs); font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gruen-tief);
  display:inline-flex; align-items:center; gap:.5rem;
}
.karte--text .pfeil::after{ content:'\2192'; transition:transform .35s ease; }
.karte:hover .pfeil::after{ transform:translateX(5px); }

/* Quadrat statt 4:3. Die Vorlagen sind 3:2, ein 4:3-Ausschnitt haette die
   Kleidungsstuecke zu klein gemacht. Motive liegen zwischen 23 und 72
   Prozent der Bildbreite, im Quadratausschnitt (16,7 bis 83,3 Prozent)
   also vollstaendig drin. Ausgemessen, nicht geschaetzt. */
.karte__bild{
  position:relative; aspect-ratio:1; overflow:hidden;
  background:#eceeea;
}
.karte__bild picture{ display:block; width:100%; height:100%; }
.karte__bild img{ width:100%; height:100%; object-fit:cover; object-position:center;
  transition:transform .7s cubic-bezier(.22,.61,.36,1); }
.karte:hover .karte__bild img{ transform:scale(1.06); }
.karte__text .pfeil{
  margin-top:auto; padding-top:1.1rem; font-size:var(--t-xs); font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gruen-tief);
  display:inline-flex; align-items:center; gap:.5rem;
}
.karte__text .pfeil::after{ content:'\2192'; transition:transform .35s ease; }
.karte:hover .karte__text .pfeil::after{ transform:translateX(5px); }
.karte__text .nummer{
  font-size:var(--t-xs); font-weight:800; letter-spacing:.24em;
  color:var(--gruen-tief); margin:0;
}
.karte__text{ padding:1.5rem 1.5rem 1.7rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.karte__text h3{ margin:0; }
.karte__text p{ font-size:var(--t-s); margin:0; }

/* ---------------------------------------------------------
   Reiter
   --------------------------------------------------------- */

.reiter{ display:flex; flex-wrap:wrap; gap:.5rem; border-bottom:1px solid var(--papier-linie); margin-bottom:2.2rem; }
.reiter button{
  appearance:none; background:none; border:0; cursor:pointer;
  padding:.9rem 1.2rem; min-height:48px;
  font-family:inherit; font-size:var(--t-s); font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:#6b726b;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .25s ease, border-color .25s ease;
}
.reiter button[aria-selected="true"]{ color:var(--schwarz); border-bottom-color:var(--gruen); }
.reiter button:hover{ color:var(--schwarz); }
.blatt[hidden]{ display:none; }

/* Pruefliste */
.pruefliste{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.pruefliste li{
  display:flex; align-items:flex-start; gap:.9rem;
  padding:.85rem 1rem; background:var(--weiss);
  border:1px solid var(--papier-linie); border-radius:var(--radius);
  font-size:var(--t-s);
}
.pruefliste li::before{
  content:''; flex:0 0 auto; width:14px; height:14px; margin-top:.35rem;
  border:2px solid var(--gruen); border-radius:50%;
}

/* ---------------------------------------------------------
   Downloads
   --------------------------------------------------------- */

.downloads{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.download{
  display:flex; align-items:center; gap:1.1rem;
  padding:1.1rem 1.3rem; text-decoration:none; min-height:48px;
  background:var(--weiss); border:1px solid var(--papier-linie); border-radius:var(--radius);
  transition:border-color .3s ease, transform .3s ease;
}
.download:hover{ border-color:var(--gruen); transform:translateX(4px); }
.download__typ{
  flex:0 0 auto; font-size:.62rem; font-weight:800; letter-spacing:.1em;
  padding:.35rem .5rem; border:1px solid var(--gruen); color:var(--gruen-tief);
  border-radius:2px;
}
.download__name{ font-weight:600; font-size:var(--t-s); flex:1; }
.download__groesse{ font-size:var(--t-xs); color:#6b726b; white-space:nowrap; }

/* ---------------------------------------------------------
   Ansprechpartner
   --------------------------------------------------------- */

/* Zeilenliste statt Raster: funktioniert mit jeder Anzahl an Eintraegen
   und laesst keine leeren Plaetze stehen. */
.personen{ border-top:1px solid var(--grau-linie); }
.person{
  display:grid; gap:.35rem 2rem; align-items:baseline;
  grid-template-columns:1fr;
  padding:1.35rem .25rem;
  border-bottom:1px solid var(--grau-linie);
  transition:background .3s ease, padding-left .3s ease;
}
.person:hover{ background:rgba(228,20,26,.06); padding-left:1rem; }
@media (min-width:720px){
  .person{ grid-template-columns:minmax(180px,.9fr) minmax(0,1fr) minmax(0,1.3fr); }
}
.person__rolle{
  font-size:var(--t-xs); font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gruen); margin:0;
}
.person__name{ font-weight:600; margin:0; }
.person a{ font-size:var(--t-s); color:var(--kreide); text-decoration:none; word-break:break-word; }
.person a:hover{ color:var(--weiss); text-decoration:underline; }

/* ---------------------------------------------------------
   Formular
   --------------------------------------------------------- */

.formular{ display:grid; gap:1.2rem; max-width:620px; }
.feld{ display:grid; gap:.5rem; }
.feld label{
  font-size:var(--t-xs); font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--kreide);
}
.feld input,
.feld textarea{
  width:100%; padding:.95rem 1rem; min-height:48px;
  font-family:inherit; font-size:var(--t-m); color:var(--weiss);
  background:var(--schwarz-weich); border:1px solid var(--grau-linie); border-radius:var(--radius);
  transition:border-color .25s ease;
}
.feld textarea{ min-height:170px; resize:vertical; }
.feld input:focus,
.feld textarea:focus{ border-color:var(--gruen); outline:none; }
.feld input::placeholder,
.feld textarea::placeholder{ color:#5c635c; }

.haken{ display:flex; align-items:flex-start; gap:.8rem; font-size:var(--t-s); }
.haken input{ flex:0 0 auto; width:20px; height:20px; margin-top:.28rem; accent-color:var(--gruen); }
.haken a{ color:var(--gruen); }

/* Honigtopf, fuer Menschen unsichtbar */
.topf{
  position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden; opacity:0;
}

.hinweis{
  padding:1rem 1.2rem; border-radius:var(--radius); font-size:var(--t-s);
  border:1px solid var(--grau-linie); background:var(--schwarz-weich);
}
.hinweis[data-art="gut"]{ border-color:var(--gruen); }
.hinweis[data-art="fehler"]{ border-color:#d05252; }
.knopf[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }

/* ---------------------------------------------------------
   Fuss
   --------------------------------------------------------- */

.fuss{ border-top:1px solid var(--grau-linie); padding-block:var(--luft-m) 2.5rem; }
.fuss__oben{
  display:grid; gap:2.5rem; align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  padding-bottom:3rem; border-bottom:1px solid var(--grau-linie);
}
.fuss-titel{
  font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase;
  color:var(--gruen); margin-bottom:1.1rem;
}
.fuss ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.fuss a{ text-decoration:none; font-size:var(--t-s); color:var(--kreide); }
.fuss a:hover{ color:var(--weiss); }
.fuss__unten{
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  padding-top:2rem; font-size:var(--t-xs); color:#6b726b;
}
.fuss__unten button{
  background:none; border:0; padding:.4rem 0; cursor:pointer; min-height:44px;
  font-family:inherit; font-size:var(--t-xs); color:#6b726b; text-decoration:underline;
}
.fuss__unten button:hover{ color:var(--weiss); }

/* ---------------------------------------------------------
   Einwilligung. Alle Schaltflaechen bewusst identisch:
   gleiche Farbe, Groesse, Rahmen, Schriftgewicht. Kein Nudging.
   --------------------------------------------------------- */

.consent{
  position:fixed; z-index:90; inset:auto 1rem 1rem; max-width:520px;
  background:var(--schwarz-weich); border:1px solid var(--grau-linie);
  border-radius:var(--radius); padding:1.6rem;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.consent[hidden]{ display:none; }
.consent h2{ font-size:var(--t-m); text-transform:none; letter-spacing:-.01em; margin-bottom:.7rem; }
.consent p{ font-size:var(--t-s); color:var(--kreide); }
.consent__knoepfe{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.3rem; }
.consent__knoepfe button{
  flex:1 1 160px; min-height:48px; padding:.85rem 1.2rem; cursor:pointer;
  font-family:inherit; font-size:var(--t-s); font-weight:600; letter-spacing:.06em;
  color:var(--weiss); background:var(--schwarz); border:1px solid var(--grau-linie);
  border-radius:var(--radius); transition:border-color .25s ease;
}
.consent__knoepfe button:hover{ border-color:var(--gruen); }

/* Externe Medien */
.medien-platz{
  display:grid; place-items:center; gap:1rem; text-align:center;
  padding:clamp(2rem,6vw,4rem); border:1px dashed var(--grau-linie);
  border-radius:var(--radius); background:var(--schwarz-weich);
}

/* ---------------------------------------------------------
   Rechtstexte
   --------------------------------------------------------- */

.recht{ max-width:74ch; }
.recht h2{ font-size:var(--t-l); margin:2.8rem 0 1rem; text-transform:none; letter-spacing:-.01em; }
.recht h3{ font-size:var(--t-m); margin:2rem 0 .7rem; }
.recht h2:first-of-type{ margin-top:0; }
.recht p,.recht li{ font-size:var(--t-s); color:var(--kreide); }
.recht ul{ padding-left:1.2rem; display:grid; gap:.4rem; margin:0 0 1.1em; }
.recht a{ color:var(--gruen); }
.recht address{ font-style:normal; color:var(--weiss); margin-bottom:1.1em; }
.offen{
  display:block; padding:1rem 1.2rem; margin:1rem 0;
  border-left:3px solid var(--gruen); background:var(--schwarz-weich);
  font-size:var(--t-s); color:var(--weiss);
}

/* ---------------------------------------------------------
   Einblenden beim Scrollen. Gestaffelt ueber --i.
   --------------------------------------------------------- */

.auf{ opacity:0; transform:translateY(22px); }
.auf.sichtbar{
  opacity:1; transform:none;
  transition:opacity .7s ease calc(var(--i,0) * 90ms),
             transform .7s cubic-bezier(.22,.61,.36,1) calc(var(--i,0) * 90ms);
}

/* ---------------------------------------------------------
   Mobil
   --------------------------------------------------------- */

@media (max-width:880px){
  :root{ --kopf-hoch:76px; --kopf-klein:62px; }
  .menue-schalter{ display:flex; }
  .nav-haupt{
    position:fixed; inset:var(--kopf-hoch) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--schwarz); border-bottom:1px solid var(--grau-linie);
    padding:1rem 1.25rem 2rem;
    transform:translateY(-130%); transition:transform .4s cubic-bezier(.22,.61,.36,1);
    max-height:calc(100dvh - var(--kopf-hoch)); overflow-y:auto;
  }
  .nav-haupt.offen{ transform:translateY(0); }
  .nav-haupt a:not(.knopf){ padding:1rem 0; border-bottom:1px solid var(--grau-linie); min-height:48px; display:flex; align-items:center; }
  .nav-haupt .knopf{ margin-top:1.4rem; }
  .wappen img{ height:44px; }
  .kopf.eng .wappen img{ height:36px; }
  .wappen-text{ font-size:.62rem; }
  .consent{ inset:auto .75rem .75rem; max-width:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .auf{ opacity:1; transform:none; }
}

/* ---------------------------------------------------------
   Hilfsklassen.
   Bewusst als Klassen statt als style-Attribut, damit die
   Content-Security-Policy ohne 'unsafe-inline' auskommt.
   --------------------------------------------------------- */

.i1{ --i:1; } .i2{ --i:2; } .i3{ --i:3; }

.mt-s{ margin-top:1rem; }
.mt-m{ margin-top:1.4rem; }
.mt-l{ margin-top:1.8rem; }
.mt-xl{ margin-top:2.2rem; }
.mt-2xl{ margin-top:2.4rem; }
.mt-3xl{ margin-top:2.6rem; }
.mt-4xl{ margin-top:3rem; }
.mt-raum{ margin-top:clamp(2.2rem,4vw,3.2rem); }
.mt-raum-l{ margin-top:clamp(3rem,6vw,4.5rem); }
.mt-block{ margin-top:clamp(2.5rem,5vw,3.5rem); }
.mb-block{ margin-bottom:clamp(2.5rem,5vw,4rem); }
.mb-m{ margin-bottom:1.4rem; }

.t-xs{ font-size:var(--t-xs); }
.t-s{ font-size:var(--t-s); }
.t-l{ font-size:var(--t-l); }
.normal{ text-transform:none; letter-spacing:-.01em; }
.weiss{ color:var(--weiss); }
.mail{ color:var(--gruen-tief); font-weight:600; text-decoration:none; }
.mail:hover{ text-decoration:underline; }

.b-13{ max-width:13ch; } .b-14{ max-width:14ch; } .b-15{ max-width:15ch; }
.b-26{ max-width:26ch; } .b-34{ max-width:34ch; } .b-52{ max-width:52ch; }
.b-58{ max-width:58ch; } .b-60{ max-width:60ch; } .b-64{ max-width:64ch; }
.b-band{ max-width:44rem; } .b-liste{ max-width:760px; }

.kopfluft{ padding-top:calc(var(--luft-m) + 1rem); }
.anschrift{ font-style:normal; margin-top:1rem; line-height:1.8; }
.haken label{
  font-size:var(--t-s); letter-spacing:0; text-transform:none;
  font-weight:400; color:var(--kreide);
}
.stand{ display:inline; padding:.2rem .5rem; border-left-width:2px; }
.fuss__unten--blank{ padding-top:0; border:0; }
.buehne--klein{ min-height:min(78vh,760px); }

/* Die ganze Karte ist der Link. Darunter steht deshalb nur ein
   Texthinweis mit Pfeil, kein zweiter Knopf. */
.karte__text{ padding:1.6rem 1.6rem 1.8rem; gap:.55rem; }

@media (max-width:900px){
  .band{ min-height:560px; }
}

/* Kollektionskarten: nur Titel und Aufruf, ohne Nummer und Beschreibung */
.karte__text{ padding:1.5rem 1.5rem 1.7rem; gap:1.1rem; }
.karte__text h3{ font-size:var(--t-l); text-transform:uppercase; letter-spacing:-.015em; }

/* Hinweis auf den Shopbetreiber soll auf einer Zeile stehen */
.shop-hinweis{
  font-size:var(--t-xs); margin-top:clamp(1.6rem,3vw,2.4rem);
  max-width:none; text-wrap:nowrap;
}
@media (max-width:1100px){ .shop-hinweis{ text-wrap:wrap; } }

/* Vier Kollektionskarten: feste Spaltenzahl statt auto-fit, damit bei
   keiner Fensterbreite ein leerer Platz stehen bleibt. */
/* Drei Karten je Raster in diesem Projekt. Deshalb entweder eine oder
   drei Spalten, niemals zwei. Zwei Spalten wuerden 2+1 ergeben und einen
   leeren Platz hinterlassen. */
.karten{ grid-template-columns:minmax(0,1fr); }
@media (min-width:900px){ .karten{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* Nachwuchs: Textkarten mit Neu-Kennzeichnung */
.karte--text{ padding:clamp(1.7rem,3vw,2.3rem); gap:.7rem; }
.karte--text h3{ font-size:var(--t-l); text-transform:uppercase; letter-spacing:-.015em; margin:0; }
.karte--text p{ margin:0; }
.neu{
  display:inline-flex; align-self:flex-start; align-items:center;
  padding:.3rem .7rem; border-radius:999px;
  background:var(--gruen-tief); color:var(--weiss);
  font-size:.64rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
}

/* Logo der Jugendabteilung. Eigenes Wappen, eigener Rotton (#911535),
   deshalb bewusst ohne Farbfilter. */
.jugend-logo{ display:block; width:clamp(120px,15vw,180px); margin-bottom:1.6rem; }
.jugend-logo img{ width:100%; height:auto; display:block; }