/* =========================================================
   Energy Gym Siegen
   Design-Tokens aus dem Vereinslogo gemessen, nicht geschaetzt.
   Gold-Cluster: #dfb23f Hauptton, #f8cf51 Spitzlicht,
   #d1a238 Tiefe. Logogrund praktisch reines Schwarz.
   ========================================================= */

:root{
  /* Farben */
  --gold:         #dfb23f;   /* Hauptton, aus dem Logo gemessen */
  --gold-hell:    #f8cf51;   /* Spitzlicht im Logo, jetzt Hover-Ton */
  --gold-tief:    #a97d24;
  --schwarz:      #0b0b0c;
  --schwarz-weich:#141416;
  --grau-linie:   #2b2b2e;
  --kreide:       #b8b6b0;
  --weiss:        #ffffff;
  --papier:       #f5f4f1;
  --papier-linie: #e3e1db;

  /* 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(--gold);
  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(--gold);
  margin:0 0 1.4rem;
}
.marke::after{
  content:''; flex:1; height:1px; max-width:180px;
  background:linear-gradient(90deg,var(--gold),transparent);
}
.hell .marke{ color:var(--gold-tief); }
.hell .marke::after{ background:linear-gradient(90deg,var(--gold-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(--gold); 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(--gold); 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(--gold); background:var(--gold); 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(--gold-hell); border-color:var(--gold-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);
}
/* Buehnenbild.
   Hauttoene des Motivs zeilenweise ausgewertet: die beiden Kaempfer
   liegen zwischen 18 und 100 Prozent der Bildhoehe und zwischen 6 und
   80 Prozent der Breite, Schwerpunkt vertikal bei 52 Prozent. Weil das
   Motiv fast die ganze Flaeche fuellt, traegt der Ausschnitt allein
   nicht: der Text bleibt nur lesbar, weil der Schleier links deutlich
   dichter liegt als rechts. Ausschnitt auf 38 Prozent, damit bei
   breiten Fenstern die Koepfe im Bild bleiben.
   Beim Austausch gegen neues Material neu messen, nicht uebernehmen. */
.buehne__bild{ position:absolute; inset:0; z-index:0; }
.buehne__bild picture,
.buehne__bild picture img{ display:block; width:100%; height:100%; }
.buehne__bild img{ object-fit:cover; object-position:center 38%; }
.buehne__schleier{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg,rgba(11,11,12,.96) 0%,rgba(11,11,12,.88) 38%,rgba(11,11,12,.62) 70%,rgba(11,11,12,.58) 100%),
    linear-gradient(180deg,rgba(11,11,12,.86) 0%,rgba(11,11,12,.5) 34%,rgba(11,11,12,.92) 100%);
}

.buehne__wappen{
  position:absolute; z-index:2;
  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(223,178,63,.55) 0%,rgba(223,178,63,.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(--gold); 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(--gold); 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(--gold); 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(--gold); 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; } }
/* Zweites Bildband, Kindertraining. Personen ueber die volle Bildhoehe
   verteilt, Schwerpunkt bei 50 Prozent. Der Ausschnitt bleibt deshalb
   mittig, anders als beim ersten Band. */
.band__bild--kinder img{ object-position:center 50%; }

.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(--gold); 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(--gold-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(--gold-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(--gold-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(--gold-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(--gold); }
.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(--gold); 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(--gold); 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(--gold); color:var(--gold-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(223,178,63,.07); 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(--gold); 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(--gold); 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(--gold); }
.haken a{ color:var(--gold); }

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

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

/* Lange Fachwoerter in Rechtstexten duerfen umbrechen, sonst
   sprengen sie auf schmalen Geraeten die Spur. */
.recht h1,.recht h2,.recht h3,.recht p,.recht li,.recht address{ overflow-wrap:break-word; }

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