/* ============================================================
   der flash verein — Gestaltungssystem
   Abgeleitet vom dasflash.at-System (arbeit/dasflash/assets/stil.css),
   gleiche Tokens, gleiche Schriften, gleiche Abstandsskala — damit die
   Wiedererkennung mit der Hauptseite gesichert ist. Die Rollen von
   Waldgrün und Cremeweiß sind bewusst VERTAUSCHT: dasflash.at ist
   cremeweiß-dominiert, diese Seite nimmt Waldgrün als Grundfläche.
   Eigenes Signaturelement: der handgezeichnete Unterstrich aus dem
   Vereinslogo (brand_assets/logo/verein_Strich_*.png), als
   Sektionsmarker und Wort-Unterstreichung.
   ============================================================ */

/* ---------- 1. Schriften ---------- */
@font-face{
  font-family:'Jaune';
  src:url('../brand_assets/fonts/NaNJaune-MidiBlack.woff2') format('woff2');
  font-weight:900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Haas';
  src:url('../brand_assets/fonts/AlteHaasGroteskRegular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Syne';
  src:url('../brand_assets/fonts/Syne-Italic.woff2') format('woff2');
  font-weight:normal; font-style:italic; font-display:swap;
}

/* ---------- 2. Gestaltungswerte ---------- */
:root{
  /* Identische Werte wie im dasflash-System (Brand Manual, Seite 08) */
  --creme:#FCFAEF;
  --gruen:#005849;
  --rot:#EA4F38;
  --schwarz:#000000;

  --linie:rgba(252,250,239,.18);
  --linie-dunkel:rgba(0,0,0,.14);
  --schatten:rgba(0,0,0,.18);

  --s1:4px;  --s2:8px;   --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px;  --s8:64px; --s9:96px; --s10:128px;

  --block:clamp(56px,9vw,112px);
  --block-eng:clamp(36px,5.5vw,64px);

  --breit:1280px;
  --mittel:1040px;
  --text:64ch;
  --rand:clamp(20px,5vw,64px);

  --r-klein:6px;
  --r-mittel:14px;
  --r-gross:24px;

  --weich:cubic-bezier(.23,1,.32,1);
  --feder:cubic-bezier(.34,1.4,.64,1);
}

/* ---------- 3. Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  font-family:'Haas',system-ui,-apple-system,sans-serif}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;
  /* Grundfläche Waldgrün statt Cremeweiß — das unterscheidet diese Seite
     auf den ersten Blick von dasflash.at, ohne die Markenwelt zu verlassen. */
  background:var(--gruen);
  color:var(--creme);
  font-family:'Haas',system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px;border-radius:2px}

.skip{
  position:absolute;left:var(--s4);top:var(--s4);z-index:200;
  background:var(--schwarz);color:var(--creme);
  padding:var(--s3) var(--s5);border-radius:var(--r-klein);
  font-size:15px;text-decoration:none;
  transform:translateY(-160%);
  transition:transform .18s var(--weich);
}
.skip:focus{transform:translateY(0)}

/* ---------- 4. Typografie ---------- */
h1,h2,h3,h4{
  font-family:'Jaune',Impact,sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.005em;
  line-height:.98;
  margin:0;
  text-wrap:balance;
  overflow-wrap:break-word;
  word-break:normal;
}
h1{font-size:clamp(38px,7.5vw,84px)}
h2{font-size:clamp(30px,4.8vw,56px)}
h3{font-size:clamp(21px,2.4vw,28px);line-height:1}
h4{font-size:clamp(16px,1.6vw,19px);line-height:1.1;letter-spacing:.01em}

p{margin:0 0 var(--s4);max-width:var(--text)}
p:last-child{margin-bottom:0}

.eyebrow{
  font-family:'Syne',Georgia,serif;
  font-style:italic;
  font-size:clamp(16px,1.9vw,22px);
  letter-spacing:.01em;
  line-height:1.25;
  margin:0 0 var(--s4);
  color:var(--rot);
}
/* Auf dem Hero-Foto (dunkler Grün-Verlauf) wäre Signalrot zu dunkel. */
.eyebrow--hell{color:var(--creme)}
.klein{font-size:13px;letter-spacing:.1em;text-transform:uppercase;line-height:1.4}
.lead{font-size:clamp(18px,1.9vw,21px);line-height:1.6}
.zentriert{text-align:center}
.zentriert p{margin-left:auto;margin-right:auto}

/* ---------- 5. Raster ---------- */
.wrap{width:100%;max-width:var(--breit);margin:0 auto;padding-inline:var(--rand)}
.wrap--schmal{max-width:var(--mittel)}

/* Drittel-Raster (aus dem dasflash-System übernommen, in der ersten
   Fassung dieser Datei versehentlich nur als Klassenname verwendet,
   nie definiert — dadurch stand das Kultur&Kunst-Foto in voller statt
   halber Breite). */
.drittel{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--s5);
  align-items:start;
}
.d-1-6{grid-column:1/7}
.d-7-13{grid-column:7/13}
.d-8-13{grid-column:8/13}
.d-voll{grid-column:1/13}
.drittel > div{display:flex;flex-direction:column}
/* Unsichtbarer Eyebrow-Platzhalter als erstes Element der Textspalte:
   erzwingt exakt dieselbe Höhe wie der echte Eyebrow in der
   Überschriftenspalte, damit der Fließtext auf Höhe der H2 beginnt
   statt auf Höhe der kleinen Syne-Zeile. visibility (nicht display),
   damit er trotzdem Platz beansprucht. */
.eyebrow--platzhalter{visibility:hidden}
/* Wenn der Platzhalter direkt vor einem Foto steht (Kunst&Kultur-Bild
   auf Höhe der H2), übernimmt SEINE Höhe schon die Ausrichtung — der
   Basisabstand unten (.bild:last-child:not(:only-child)) darf hier
   nicht zusätzlich draufaddieren, sonst rutscht das Foto unter statt
   auf Höhe der Überschrift. Höhere Spezifität nötig, da beide Regeln
   sonst gleich stark wären und die Reihenfolge im Stylesheet entscheidet. */
.eyebrow--platzhalter + .bild{margin-top:0!important}
.cta-block{display:flex;flex-direction:column;gap:var(--s6)}
/* Basisabstand vor dem CTA — gilt immer (auch mobil gestapelt), damit
   der Knopf nicht direkt am Fließtext klebt. Auf Desktop unten
   überschrieben durch margin-top:auto (siehe Media Query). */
.drittel > div > .knopf:last-child,
.drittel > div > .hero__aktionen:last-child,
.drittel > div > .pfeil:last-child,
.drittel > div > .cta-block:last-child,
.drittel > div > .bild:last-child:not(:only-child){margin-top:var(--s6)}
@media (min-width:861px){
  /* Ohne diese Zeile landen die beiden Spalten NICHT zwangsläufig in
     derselben Reihe: Chromes Auto-Placement rückt den Platzierungscursor
     beim ersten Kind (z. B. d-7-13) über Spalte 7 hinaus vor, wodurch das
     zweite Kind (d-1-6, Spalten 1–6) nicht mehr rückwärts in Reihe 1
     passt und stattdessen in eine neue Reihe darunter fällt — betraf
     Wettkampftraining, wo die Spaltenreihenfolge zur Alternierung bewusst
     vertauscht wurde (Foto+Überschrift im HTML zuerst, aber rechts
     platziert). */
  .drittel{align-items:stretch}
  .drittel > *{grid-row:1}
  /* Spalten sind jetzt gleich hoch (align-items:stretch). Der
     abschließende Call-to-Action soll bündig mit der längeren
     Nachbarspalte (dem Foto) abschließen statt mittendrin hängen zu
     bleiben — gezielt nur echte CTAs, nicht per :last-child generell
     (das hätte in Kunst&Kultur das alleinstehende Foto nach unten statt
     oben ausgerichtet). .cta-block hält Fakten-Kachel und Knopf als
     Einheit zusammen, statt nur den Knopf allein nach unten zu drücken
     und eine Lücke zur Kachel zu reißen.
     Das Foto bekommt HIER bewusst KEIN margin-top:auto: in Reihen, wo
     die Überschriftenspalte (Text+Foto) selbst die höhere/bestimmende
     Spalte ist, hätte ein Auto-Rand am Foto keinen Leerraum zum
     Verteilen — er würde einfach zu 0 auflösen und das Foto direkt an
     die Überschrift kleben (genau das ist beim ersten Versuch passiert:
     "DER VEREIN" wurde vom Foto überlagert). Der feste Basisabstand
     (--s6, oben) bleibt daher IMMER erhalten; der CTA in der
     Nachbarspalte erreicht die Fotounterkante stattdessen von selbst,
     sobald die Überschriftenspalte die höhere ist. */
  .drittel > div > .knopf:last-child,
  .drittel > div > .hero__aktionen:last-child,
  .drittel > div > .pfeil:last-child,
  .drittel > div > .cta-block:last-child{margin-top:auto}
}
/* Der Platzhalter ist nur ein Desktop-Ausrichtungstrick (siehe oben).
   Gestapelt auf Mobil brauchen wir die Höhe nicht — sonst reißt er dort
   eine unnötige Lücke vor den Fließtext. */
@media (max-width:860px){
  .eyebrow--platzhalter{display:none}
}
@media (max-width:860px){
  .drittel>*{grid-column:1/13!important}
}

section{padding-block:var(--block);overflow:hidden}
section.eng{padding-block:var(--block-eng)}

/* Editorial-Zweispalter für Textabschnitte (Verein, Wettkampftraining,
   Athlet*innen, Beitritt): Eyebrow+Überschrift links, Fließtext/CTA
   rechts — verhindert, dass linksbündiger Text bei breiten Screens in
   einer schmalen zentrierten Spalte verschwindet und ringsum Leerraum
   lässt. Nutzt dieselbe 6/6-Aufteilung (d-1-6/d-7-13) wie das
   bestehende Kunst&Kultur-Textbild-Paar — eine schmalere linke Spalte
   (5/12) wurde getestet, war aber für die fetten Jaune-Überschriften
   zu eng: einzelne lange Wörter wie „Wettkampftraining" brachen
   mitten im Wort um, weil kein Leerzeichen zum Umbrechen da war. */

/* Farbflächen: Waldgrün ist die Grundfläche, Cremeweiß und Signalrot
   markieren einzelne Abschnitte — umgekehrte Logik zu dasflash.at. */
.flaeche-creme{background:var(--creme);color:var(--schwarz)}
.flaeche-rot{background:var(--rot);color:var(--schwarz)}
.flaeche-schwarz{background:var(--schwarz);color:var(--creme)}
/* :not(.knopf): Buttons haben ihre eigene, bewusste Farbwahl (Standard
   cremeweißer Text auf Signalrot) — ohne diesen Ausschluss übernahm diese
   Regel für gewöhnliche Textlinks auch Knöpfe in cremeweißen/roten
   Abschnitten und machte deren Schrift grün statt cremeweiß. Auf Rot
   ergab das grüne Knopfschrift auf rotem Grund — schlecht lesbar und für
   Rot-Grün-Farbenblinde besonders problematisch (Sebastian, 2026-08-23,
   betraf "Mitglied werden" und "Beitrittserklärung (PDF)"). */
.flaeche-creme a:not(.knopf),.flaeche-rot a:not(.knopf){color:var(--gruen)}

/* ---------- 6. Kopfzeile und Navigation ---------- */
.kopf{
  position:sticky;top:0;z-index:100;
  background:var(--gruen);
  border-bottom:1px solid var(--linie);
}
.kopf__inner{
  display:flex;align-items:center;gap:var(--s5);
  height:72px;
  max-width:var(--breit);margin:0 auto;
  padding-inline:var(--rand);
}
.kopf__logo{flex:0 0 auto;display:flex;align-items:center;text-decoration:none;gap:var(--s3)}
.kopf__logo img{height:36px;width:auto}
.kopf__zurueck{
  flex:0 0 auto;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--creme);opacity:.7;text-decoration:none;
  padding:var(--s2) var(--s3);border:1px solid var(--linie);border-radius:999px;
  transition:opacity .18s var(--weich);
  display:none;
}
.kopf__zurueck:hover{opacity:1}
@media (min-width:640px){.kopf__zurueck{display:inline-flex;align-items:center}}

.nav{display:flex;align-items:center;gap:var(--s5);margin-left:auto}
.nav__link{
  font-family:'Jaune',Impact,sans-serif;
  font-size:13px;text-transform:uppercase;letter-spacing:.02em;
  text-decoration:none;padding:var(--s2) 0;position:relative;
  color:var(--creme);transition:color .18s var(--weich);
}
.nav__link::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--rot);transform:scaleX(0);transform-origin:center;
  transition:transform .22s var(--weich);
}
.nav__link:hover::after,.nav__link:focus-visible::after{transform:scaleX(1)}

/* Zweites Vorkommen des Zurück-Links (.kopf__zurueck) im Menü selbst:
   die Pille im Kopf ist erst ab 640px sichtbar (Platzgründe daneben,
   siehe .kopf__zurueck), darunter gibt es sonst gar keinen Weg zurück
   zu dasflash.at auf der Vereinsseite. Exakt gegenläufige Breite zur
   Pille, damit nie beide gleichzeitig sichtbar sind. */
.nav__link--zurueck{display:none}
@media (max-width:639px){.nav__link--zurueck{display:block}}

.lang{display:flex;align-items:center;gap:var(--s1);font-size:13px;letter-spacing:.06em}
.lang__btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;
  background:none;border:none;padding:var(--s1) var(--s2);
  font:inherit;text-transform:uppercase;cursor:pointer;
  color:var(--creme);opacity:.5;border-radius:var(--r-klein);
  transition:opacity .18s var(--weich);
}
.lang__btn[aria-pressed="true"]{opacity:1;text-decoration:underline;text-underline-offset:3px}
.lang__btn:hover{opacity:1}
.lang__trenner{opacity:.35}

.burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  font:inherit;width:44px;height:44px;margin-left:auto;
  background:none;border:none;cursor:pointer;padding:0;
}
.burger span{
  display:block;width:24px;height:2px;background:var(--creme);
  margin-inline:auto;
  transition:transform .22s var(--weich),opacity .16s var(--weich);
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:900px){
  .burger{display:flex}
  .nav{
    position:fixed;inset:72px 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--gruen);
    border-bottom:1px solid var(--linie);
    padding:var(--s4) var(--rand) var(--s6);
    margin:0;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:transform .24s var(--weich),opacity .2s var(--weich);
    max-height:calc(100dvh - 72px);overflow-y:auto;
  }
  .nav[data-offen="true"]{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav__link{font-size:20px;padding:var(--s4) 0;border-bottom:1px solid var(--linie)}
  .nav__link::after{display:none}
  .lang{margin-top:var(--s5);justify-content:center}
}

/* ---------- 7. Knöpfe ---------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:48px;
  padding:var(--s3) var(--s5);
  font-family:'Jaune',Impact,sans-serif;
  font-size:14px;text-transform:uppercase;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;
  border:2px solid var(--schwarz);
  border-radius:999px;
  background:var(--rot);color:var(--creme);
  transition:transform .18s var(--feder),background-color .18s var(--weich),color .18s var(--weich),box-shadow .18s var(--weich);
  box-shadow:0 2px 0 var(--schwarz);
}
.knopf:active{transform:translateY(1px) scale(.97);box-shadow:0 1px 0 var(--schwarz)}
.knopf--creme{background:var(--creme);color:var(--schwarz)}
.knopf--offen{background:transparent;color:var(--creme);box-shadow:none;border-color:var(--creme)}
.knopf--offen:hover{background:var(--creme);color:var(--gruen);box-shadow:none}

@media (prefers-reduced-motion:reduce){
  .knopf:active{transform:none;filter:brightness(.9)}
}

.pfeil{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-family:'Jaune',Impact,sans-serif;font-size:14px;
  text-transform:uppercase;letter-spacing:.02em;
  text-decoration:none;color:var(--rot);min-height:44px;
}
.pfeil svg{transition:transform .2s var(--feder)}
.flaeche-creme .pfeil,.flaeche-rot .pfeil{color:var(--gruen)}

/* ---------- 8. Karten ---------- */
.karten{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--s5);
}
.karte{
  display:flex;flex-direction:column;
  background:var(--creme);color:var(--schwarz);
  border:2px solid var(--schwarz);
  border-radius:var(--r-gross);
  overflow:hidden;
  box-shadow:0 2px 0 var(--schwarz);
}
.karte__bild{aspect-ratio:4/3;overflow:hidden;background:var(--gruen)}
.karte__bild img{width:100%;height:100%;object-fit:cover}
.karte__body{display:flex;flex-direction:column;flex:1;padding:var(--s5)}
.karte__body h3{margin-bottom:var(--s3)}
.karte__body p{font-size:16px}
.karte__fuss{margin-top:auto;padding-top:var(--s5)}

/* ---------- 9. Signatur-Unterstrich ---------- */
/* Handgezeichneter Strich aus dem Vereinslogo, als wiederkehrendes
   Erkennungselement — markiert Sektionsanfänge und Schlüsselwörter. */
.strich{
  display:block;
  width:clamp(120px,18vw,220px);
  height:auto;
  margin:var(--s4) 0 var(--s6);
}
.strich--mitte{margin-inline:auto}
.wort-strich{position:relative;white-space:nowrap}
.wort-strich::after{
  content:'';position:absolute;left:-2%;right:-2%;bottom:-.12em;height:.28em;
  background-image:url('../brand_assets/logo/verein_Strich_Signalrot.png');
  background-size:100% 100%;background-repeat:no-repeat;
  z-index:-1;
}
.flaeche-creme .wort-strich::after,.flaeche-rot .wort-strich::after{
  background-image:url('../brand_assets/logo/verein_Strich_Schwarz.png');
}

/* ---------- 10. Fakten-Kacheln ---------- */
.fakten{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:0;
  border:2px solid var(--schwarz);
  border-radius:var(--r-gross);
  overflow:hidden;
  background:var(--creme);color:var(--schwarz);
}
.fakt{padding:var(--s5);border-right:2px solid var(--schwarz);display:flex;flex-direction:column;gap:var(--s2)}
.fakt:last-child{border-right:none}
.fakt__wert{font-family:'Jaune',Impact,sans-serif;font-size:clamp(24px,2.8vw,34px);line-height:.95;text-transform:uppercase}
.fakt__label{font-size:13px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
@media (max-width:760px){
  .fakten{grid-template-columns:1fr 1fr}
  .fakt{padding:var(--s4)}
  .fakt:nth-child(odd){border-right:2px solid var(--schwarz)}
  .fakt:nth-child(even){border-right:none}
  .fakt:nth-child(-n+2){border-bottom:2px solid var(--schwarz)}
}

/* ---------- 11. Hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:var(--s10) var(--s9)}
.hero__bild{position:absolute;inset:0;z-index:0}
.hero__bild img{width:100%;height:100%;object-fit:cover}
.hero__bild::after{
  content:'';position:absolute;inset:0;
  /* Deutlich weniger Grün als in der ersten Fassung (.55/.92) — das Foto
     der Halle soll erkennbar bleiben, nicht in der Markenfarbe ertrinken.
     Der Verlauf dient nur noch dem Kontrast fürs Logo/den Text unten. */
  background:linear-gradient(180deg,rgba(0,88,73,.15),rgba(0,88,73,.6) 78%);
}
/* KEIN max-width hier: .hero__inhalt trägt zugleich die Klasse .wrap
   (mit padding-inline). Ein zusätzliches max-width:44ch auf demselben
   Kasten hätte das Padding vom knappen ch-Budget abgezogen — für die
   große, fette Jaune-Überschrift blieben dann nur ~287px Innenbreite,
   zu wenig für das einzelne Wort „VEREIN" bei 84px. overflow-wrap
   brach die Wörter deshalb mitten durch („FLAS-H", „VERE-IN"). Die
   Lesebreite wird stattdessen gezielt auf den Fließtext gelegt
   (.hero__inhalt .lead unten), nicht auf den ganzen Block. */
.hero__inhalt{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero__inhalt .lead{max-width:44ch}
.hero__logo{width:clamp(180px,26vw,320px);height:auto;margin:0 auto var(--s6)}
.hero__aktionen{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s4);margin-top:var(--s6)}

/* ---------- 11b. Drehende Illustrationen zwischen Sektionen ---------- */
/* Nach muroclimbing.com: Grifffiguren, die schräg stehen, bis sie beim
   Scrollen in den Blick kommen, dann in Position drehen — und beim
   Verlassen des Blickfelds wieder zurückkippen (nicht nur einmalig,
   siehe seite.js). Muro setzt dafür `transition:transform` plus
   IntersectionObserver, kein scrollgekoppeltes Rechnen — dieselbe
   Technik, nur mit unseren eigenen Grifffiguren statt fremder Assets. */
.illu-dreht{
  display:flex;
  /* Kein eigenes overflow:hidden mehr: die Box sitzt exakt an der
     unrotierten Bildgröße, eine rotierte Ecke ragt bei 40-70° locker
     50-100px darüber hinaus — das wurde hier abgeschnitten. Der Schutz
     vor Seiten-Overflow läuft jetzt eine Ebene höher, auf der ganzen
     section (die viel Rand-Puffer durch padding-block hat). */
  pointer-events:none;user-select:none;
  margin-block:var(--s8);
}
.illu-dreht--links{justify-content:flex-start}
.illu-dreht--rechts{justify-content:flex-end}
.illu-dreht--mitte{justify-content:center}
.illu-dreht img{
  width:clamp(90px,12vw,160px);height:auto;
  opacity:.9;
  transform:rotate(var(--illu-start,-55deg));
  transition:transform 1.3s var(--feder);
}
.illu-dreht.gedreht img{transform:rotate(var(--illu-ziel,0deg))}
/* Läuft bewusst auch auf dem Handy (Vorbild muroclimbing.com macht das
   genauso) — die clamp()-Breite oben hält die Figur klein genug, dass
   sie auf schmalen Screens nicht mit dem Fließtext kollidiert. */
@media (prefers-reduced-motion:reduce){
  .illu-dreht img{transition:none;transform:rotate(var(--illu-ziel,0deg))}
}

/* ---------- 12. Bildkacheln ---------- */
.bild{position:relative;overflow:hidden;border-radius:var(--r-mittel);aspect-ratio:4/3;background:var(--creme)}
.bild img{width:100%;height:100%;object-fit:cover}

/* ---------- 13. Fußzeile ---------- */
.fuss{background:var(--schwarz);color:var(--creme);padding-block:var(--block-eng) var(--s6)}
.fuss a{color:var(--creme);text-decoration:underline;text-underline-offset:3px;opacity:.9;transition:opacity .18s var(--weich)}
.fuss a:hover{opacity:1}
.fuss__raster{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--s7);
  padding-bottom:var(--s7);
  border-bottom:1px solid var(--linie);
}
.fuss__titel{font-family:'Jaune',Impact,sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--s4);opacity:.75}
.fuss__liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.fuss__unten{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);justify-content:space-between;align-items:center;padding-top:var(--s5);font-size:13px}

/* ---------- 14. Einblenden beim Scrollen ---------- */
.js .auf{opacity:0;transform:translateY(18px)}
.js .auf.sichtbar{opacity:1;transform:none;transition:opacity .42s var(--weich),transform .42s var(--weich)}
@media (prefers-reduced-motion:reduce){.js .auf{opacity:1;transform:none}}

/* ---------- 15. Kleinteile ---------- */
.trenner{height:2px;background:var(--linie);border:none;margin:0}
.trenner--dunkel{background:var(--linie-dunkel)}
.nur-screenreader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.marke{color:var(--rot)}
.liste-punkte{margin:0;padding-left:1.2em}
.liste-punkte li{margin-bottom:var(--s2)}

@media (hover:hover) and (pointer:fine){
  .nav__link:hover{color:var(--rot)}
  .knopf:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--schwarz)}
  .karte:hover{transform:translateY(-4px);box-shadow:0 8px 0 rgba(0,0,0,.25),0 2px 0 var(--schwarz)}
  .pfeil:hover svg{transform:translateX(4px)}
}