/* =========================================================
   SV 1926 Eisemroth e.V.
   Design-Tokens aus dem Vereinswappen gemessen (#DA251C / #1F1A17),
   extrahiert, nicht geschaetzt.
   ========================================================= */

:root{
  /* Farben */
  --rot:        #DA251C;   /* Wappenrot, exakt aus dem Vereinslogo gemessen */
  --rot-hell:   #EE3A2F;   /* Hover-Ton, aufgehellt */
  --rot-tief:   #A81A13;
  --schwarz:      #121110;
  --schwarz-weich:#1F1A17;
  --grau-linie:   #332D29;
  --kreide:       #B9B2AD;
  --weiss:        #ffffff;
  --papier:       #F5F3F1;
  --papier-linie: #E3DED9;

  /* 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(--rot);
  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(--rot);
  margin:0 0 1.4rem;
}
.marke::after{
  content:''; flex:1; height:1px; max-width:180px;
  background:linear-gradient(90deg,var(--rot),transparent);
}
.hell .marke{ color:var(--rot-tief); }
.hell .marke::after{ background:linear-gradient(90deg,var(--rot-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 rote 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(--rot); 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(--rot); 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(--rot); background:var(--rot); 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(--rot-hell); border-color:var(--rot-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(218,37,28,.55) 0%,rgba(218,37,28,.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(--rot); 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(--rot); 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(--rot); 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(--rot); 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(--rot); 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(--rot-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(--rot-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(--rot-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(--rot-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(--rot); }
.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(--rot); 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(--rot); 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(--rot); color:var(--rot-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(218,37,28,.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(--rot); 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(--rot); 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(--rot); }
.haken a{ color:var(--rot); }

/* 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(--rot); }
.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(--rot); 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(--rot); }

/* 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(--rot); }
.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(--rot); 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(--rot-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. */
.karten{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:560px){ .karten{ grid-template-columns:minmax(0,1fr); } }
@media (min-width:1080px){ .karten{ grid-template-columns:repeat(4,minmax(0,1fr)); } }


/* ---------------------------------------------------------
   Bildbuehne
   Die Ursprungsseite hatte ein vollflaechiges Mannschaftsfoto
   hinter der Ueberschrift. Motivlage gemessen, nicht geschaetzt:
   Personen liegen vertikal zwischen 11 und 77 Prozent der
   Bildhoehe. Bei 1440 mal 700 bleiben 10 bis 90 Prozent sichtbar,
   das Motiv steht vollstaendig. Auf sehr breiten Schirmen wird die
   Buehne hoeher, sonst schneidet der Ausschnitt die Koepfe der
   hinteren Reihe ab.
   --------------------------------------------------------- */

.buehne--bild{ background:var(--schwarz-weich); }
.buehne__bild{ position:absolute; inset:0; z-index:0; }
.buehne__bild img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 40%;
}
.buehne__schleier{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, rgba(18,17,16,.96) 0%, rgba(18,17,16,.82) 32%, rgba(18,17,16,.42) 62%, rgba(18,17,16,.55) 100%),
    linear-gradient(to right, rgba(18,17,16,.78) 0%, rgba(18,17,16,.30) 55%, rgba(18,17,16,.10) 100%);
}
.buehne--bild .buehne__inhalt{ z-index:3; }
.buehne--bild .jahr{ z-index:3; }

@media (min-width:2000px){
  .buehne--bild{ min-height:min(38vw,1200px); }
}

/* Ausschnitt fuer das hochformatige Aktionsfoto im Band.
   Motiv liegt vertikal zwischen 10 und 79 Prozent, die Gesichter
   im oberen Viertel. Bei Bandhoehe 520 auf 1440 Breite bleiben
   rund 31 Prozent der Bildhoehe stehen, ab 22 Prozent gemessen. */
.band--hoch .band__bild img{ object-position:50% 22%; }