@import url("schriften.css");

/* ============================================================
   OVBS · Oldtimer Verein Boltigen Simmental
   Stylesheet nach DESIGN.md. Farben, Schriften, Radien und
   Abstaende stehen ausschliesslich hier im Token-Block.
   Eine Hex-Zahl weiter unten waere ein Fehler.
   ============================================================ */

:root{
  /* Farbe · Duotone Rot/Schwarz auf Papier */
  --papier:        #F7EAD0;
  --papier-hell:   #FDF7EA;
  --papier-tief:   #EFDDBE;
  --rot:           #A9201D;
  --rot-tief:      #8A1A17;
  --tinte:         #181618;
  --tinte-weich:   #4A4448;
  --linie:         rgba(24,22,24,.20);
  --linie-zart:    rgba(24,22,24,.10);
  --weiss:         #FFFFFF;

  /* Schrift · eine Familie, Unterschied ueber Gewicht und Groesse */
  --schrift: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Groessenskala */
  --t-xxl: clamp(2.4rem, 1.2rem + 4.4vw, 4.6rem);
  --t-xl:  clamp(1.9rem, 1.35rem + 2.4vw, 3.1rem);
  --t-l:   clamp(1.35rem, 1.15rem + .95vw, 1.85rem);
  --t-m:   clamp(1.05rem, 1rem + .3vw, 1.18rem);
  --t-s:   .95rem;
  --t-xs:  .78rem;

  /* Abstandsskala */
  --s1: .35rem; --s2: .7rem;  --s3: 1.1rem; --s4: 1.7rem;
  --s5: 2.6rem; --s6: 4rem;   --s7: 6rem;   --s8: 8.5rem;

  /* Kante · Bogen als wiederkehrendes Motiv */
  --r-flaeche: 14px;
  --r-pille:   999px;
  --r-klein:   8px;

  --schatten: 0 1px 2px rgba(24,22,24,.07), 0 8px 24px -12px rgba(24,22,24,.28);
  --schatten-tief: 0 2px 4px rgba(24,22,24,.10), 0 18px 46px -18px rgba(24,22,24,.40);
  --ease-out: cubic-bezier(.23,1,.32,1);

  --kopf-hoehe: 4.4rem;
  --breite: 1180px;
  --breite-schmal: 720px;
}

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

html{scroll-behavior:smooth;scroll-padding-top:5.2rem}

body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--schrift);
  font-size:var(--t-m);
  font-weight:400;
  line-height:1.65;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-weight:900;line-height:1.1;margin:0 0 var(--s3);hyphens:auto;letter-spacing:-.015em}
h1{font-size:var(--t-xxl)}
h2{font-size:var(--t-xl)}
h3{font-size:var(--t-l);letter-spacing:-.01em}
h4{font-size:var(--t-m);font-weight:700;letter-spacing:0}
p{margin:0 0 var(--s3)}
p:last-child{margin-bottom:0}
strong,b{font-weight:700}

a{color:var(--rot);text-underline-offset:.2em;text-decoration-thickness:.08em}
a:hover{color:var(--rot-tief)}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px;border-radius:var(--r-klein)}

img,svg{max-width:100%;height:auto}

.wrap{width:min(100% - 2.5rem, var(--breite));margin-inline:auto}
.schmal{width:min(100% - 2.5rem, var(--breite-schmal));margin-inline:auto}

.springen{position:absolute;left:-9999px;top:0;background:var(--tinte);color:var(--papier);padding:.8rem 1.2rem;z-index:100;border-radius:0 0 var(--r-klein) 0}
.springen:focus{left:0}

/* Kicker · die kursive Fettschrift vom Plakat */
.kicker{
  font-size:var(--t-xs);font-weight:900;font-style:italic;
  letter-spacing:.1em;text-transform:uppercase;color:var(--rot);
  margin:0 0 var(--s2);
}

/* ---------- Kopfzeile · erscheint erst beim Scrollen ---------- */
.kopf{
  position:sticky;top:0;z-index:50;
  background:var(--papier);
  border-bottom:1px solid var(--linie);
  transition:transform 260ms var(--ease-out),opacity 200ms var(--ease-out);
}
/* Nur mit JavaScript: Kopfzeile liegt fix ueber dem Hero und ist anfangs weg */
html.js .kopf{position:fixed;left:0;right:0;top:0}
html.js .kopf.verborgen{transform:translateY(-105%);opacity:0;pointer-events:none}
.kopf .wrap{display:flex;align-items:center;gap:var(--s3);min-height:var(--kopf-hoehe)}
.marke{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--tinte);flex-shrink:1;min-width:0}
.marke img{width:42px;height:50px;flex-shrink:0}
.marke span{font-weight:900;font-size:1rem;line-height:1.15;letter-spacing:-.01em}
.marke small{display:block;font-weight:400;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinte-weich)}

.nav{margin-left:auto;display:flex;align-items:center;gap:var(--s3)}
.nav ul{display:flex;gap:var(--s3);list-style:none;margin:0;padding:0}
.nav a{color:var(--tinte);text-decoration:none;font-weight:700;font-size:.92rem;padding:.3rem 0;border-bottom:2px solid transparent;transition:color 140ms var(--ease-out),border-color 140ms var(--ease-out)}
.nav a:hover{color:var(--rot);border-bottom-color:var(--rot)}

.burger{display:none;background:none;border:1px solid var(--linie);border-radius:var(--r-pille);width:2.9rem;height:2.9rem;cursor:pointer;align-items:center;justify-content:center;color:var(--tinte)}
.burger span{display:block;width:18px;height:2px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* ---------- Schaltflaechen ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:700;font-size:1rem;
  padding:.82rem 1.5rem;border-radius:var(--r-pille);
  text-decoration:none;cursor:pointer;border:2px solid transparent;
  transition:background-color 150ms var(--ease-out),color 150ms var(--ease-out),border-color 150ms var(--ease-out);
}
.btn:active{transform:scale(.98)}
.btn-rot{background:var(--rot);color:var(--papier-hell);border-color:var(--rot)}
.btn-rot:hover{background:var(--rot-tief);border-color:var(--rot-tief);color:var(--papier-hell)}
.btn-linie{background:transparent;color:var(--tinte);border-color:var(--tinte)}
.btn-linie:hover{background:var(--tinte);color:var(--papier)}
.btn-hell{background:var(--tinte);color:var(--papier);border-color:var(--tinte)}
.btn-hell:hover{background:var(--rot);border-color:var(--rot);color:var(--papier-hell)}

/* ---------- Hero · das Plakatmotiv in voller Breite ---------- */
.hero{position:relative;isolation:isolate;background:var(--papier);padding-block:0}
.hero-bild{position:absolute;inset:0;z-index:-2}
.hero-bild img{width:100%;height:100%;object-fit:cover;object-position:32% center;display:block}
.hero-schleier{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(247,234,208,0) 34%,rgba(247,234,208,.72) 56%,rgba(247,234,208,.95) 74%);
}
.hero .wrap{
  min-height:min(90svh,48rem);
  display:flex;align-items:center;justify-content:flex-end;
  padding-block:var(--s6);
}
.hero-text{max-width:30rem;text-align:left}
.hero h1{margin-bottom:var(--s3);line-height:1.04;font-size:clamp(2.1rem,1.05rem + 3.1vw,3.5rem)}
.hero h1 .zeile{display:block;text-transform:uppercase;letter-spacing:-.01em}
.hero h1 .jahr{color:var(--rot)}
.hero .lead{font-size:clamp(1.05rem,.98rem + .5vw,1.22rem);color:var(--tinte-weich)}
.hero-daten{display:flex;flex-direction:column;gap:var(--s2);margin:var(--s4) 0;padding:0;list-style:none;font-weight:700}
.hero-daten li{display:flex;align-items:center;gap:.6rem}
.rad{width:1.3rem;height:1.3rem;border:2px solid var(--rot);border-radius:var(--r-pille);flex-shrink:0;position:relative}
.rad::after{content:"";position:absolute;inset:.3rem;border-radius:var(--r-pille);background:var(--rot)}
.hero-knoepfe{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* ---------- Belegstreifen · dicht, auf Tinte ---------- */
.belege{background:var(--tinte);color:var(--papier)}
.belege .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.beleg{padding:var(--s4) var(--s4) var(--s4) 0;border-right:1px solid rgba(247,234,208,.18);margin:0}
.beleg:last-child{border-right:0}
.beleg:not(:first-child){padding-left:var(--s4)}
.beleg dt{font-size:var(--t-xs);font-weight:900;font-style:italic;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,234,208,.62);margin-bottom:.3rem}
.beleg dd{margin:0;font-weight:900;font-size:var(--t-l);line-height:1.2;letter-spacing:-.01em}
.beleg dd small{display:block;font-weight:400;font-size:var(--t-s);color:rgba(247,234,208,.75);line-height:1.45;margin-top:.25rem;letter-spacing:0}

/* ---------- Abschnitte · Flaechenwechsel statt Bildtrenner ---------- */
section{padding-block:var(--s7)}
section.dicht{padding-block:var(--s6)}
.flaeche-tief{background:var(--papier-tief);border-block:1px solid var(--linie)}
.abschnitt-kopf{max-width:44rem;margin-bottom:var(--s5)}
.abschnitt-kopf p{color:var(--tinte-weich)}

/* ---------- Karten ---------- */
.karten{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.karte{
  background:var(--papier-hell);
  border:1px solid var(--linie);
  border-radius:var(--r-flaeche);
  padding:var(--s4);
  box-shadow:var(--schatten);
  transition:border-color 160ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){.karte:hover{border-color:var(--rot)}}
.karte h3{margin-bottom:var(--s2)}
.karte p{color:var(--tinte-weich);font-size:var(--t-s);line-height:1.6}
.nummer{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;border-radius:var(--r-pille);
  background:var(--rot);color:var(--papier-hell);
  font-weight:900;font-size:1.1rem;
  margin-bottom:var(--s3);
}
.tag-marke{font-size:var(--t-xs);font-weight:900;font-style:italic;letter-spacing:.1em;text-transform:uppercase;color:var(--rot);display:block;margin-bottom:.35rem}

/* ---------- Programm ---------- */
.programm{border-top:1px solid var(--linie)}
.programm-zeile{
  display:grid;grid-template-columns:8.5rem 1fr;gap:var(--s3);
  padding:.85rem 0;border-bottom:1px solid var(--linie-zart);
  align-items:baseline;
}
.programm-zeile time{font-weight:900;color:var(--rot);font-size:1.02rem}
.programm-zeile p{margin:0;font-size:var(--t-s);color:var(--tinte-weich)}
.programm-zeile strong{font-size:var(--t-m);font-weight:700;color:var(--tinte);display:block}
.programm-tag{
  font-weight:900;font-size:var(--t-l);
  padding:var(--s4) 0 var(--s2);border-bottom:2px solid var(--tinte);margin-top:var(--s4);
}
.programm-tag:first-child{margin-top:0}

/* ---------- Anmeldung ---------- */
.anmeldung{
  background:var(--papier-hell);border:1px solid var(--linie);
  border-radius:var(--r-flaeche);margin-bottom:var(--s3);overflow:hidden;
  box-shadow:var(--schatten);
}
.anmeldung>summary{
  list-style:none;cursor:pointer;padding:var(--s4);
  display:flex;align-items:center;gap:var(--s3);
  font-weight:900;font-size:var(--t-l);letter-spacing:-.01em;
  transition:background-color 150ms var(--ease-out);
}
.anmeldung>summary::-webkit-details-marker{display:none}
.anmeldung>summary:hover{background:var(--papier)}
.anmeldung>summary .zeichen{
  margin-left:auto;flex-shrink:0;
  width:2.4rem;height:2.4rem;border-radius:var(--r-pille);
  border:2px solid var(--rot);color:var(--rot);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;font-weight:500;line-height:1;
}
.anmeldung[open]>summary .zeichen::after{content:"–"}
.anmeldung:not([open])>summary .zeichen::after{content:"+"}
.anmeldung>summary .unterzeile{display:block;font-weight:400;font-size:var(--t-s);color:var(--tinte-weich);line-height:1.45;margin-top:.15rem;letter-spacing:0}
.anmeldung .inhalt{padding:0 var(--s4) var(--s4);border-top:1px solid var(--linie-zart)}

form .feld{margin-top:var(--s3)}
form label{display:block;font-weight:700;font-size:var(--t-s);margin-bottom:.3rem}
form .hinweis{font-weight:400;color:var(--tinte-weich)}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--tinte);
  background:var(--papier-hell);
  border:1.5px solid var(--linie);border-radius:var(--r-klein);
  padding:.7rem .85rem;
  transition:border-color 150ms var(--ease-out),background-color 150ms var(--ease-out);
}
input:hover,select:hover,textarea:hover{border-color:var(--tinte-weich)}
input:focus,select:focus,textarea:focus{border-color:var(--rot);outline:2px solid rgba(169,32,29,.25);outline-offset:0;background:var(--weiss)}
textarea{min-height:7rem;resize:vertical}
.feld-paar{display:grid;gap:var(--s3);grid-template-columns:1fr 1fr}
fieldset{border:1px solid var(--linie);border-radius:var(--r-klein);padding:var(--s3);margin:var(--s3) 0 0}
legend{font-weight:700;font-size:var(--t-s);padding-inline:.4rem}
.wahl{display:flex;align-items:flex-start;gap:.6rem;margin:.35rem 0;font-size:var(--t-s)}
.wahl input{width:1.15rem;height:1.15rem;margin:.25rem 0 0;accent-color:var(--rot);flex-shrink:0}
.wahl label{margin:0;font-weight:400}
.topf{position:absolute;left:-9999px}
form .absenden{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
form .absenden small{color:var(--tinte-weich);font-size:var(--t-xs)}

/* ---------- Sponsoren ---------- */
.konto{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--linie)}
.konto dl{margin:0}
.konto dt{font-size:var(--t-xs);font-weight:700;color:var(--tinte-weich);margin-top:var(--s2)}
.konto dd{margin:0}
.konto-qr{margin:var(--s3) 0 0}
.konto-qr img{display:block;width:180px;height:180px}
.konto-qr figcaption{font-size:var(--t-xs);color:var(--tinte-weich);margin-top:.4rem}
.stufen{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.stufe{border:1px solid var(--linie);border-radius:var(--r-flaeche);padding:var(--s4);background:var(--papier-hell);box-shadow:var(--schatten)}
.stufe.hervor{border:2px solid var(--rot)}
.stufe-marke{display:block;font-size:var(--t-xs);font-weight:900;font-style:italic;letter-spacing:.1em;text-transform:uppercase;color:var(--rot);margin-bottom:.3rem}
.stufe h3{margin-bottom:.2rem}
.preis{font-weight:700;font-size:var(--t-m);color:var(--tinte-weich);display:block;margin-bottom:var(--s2)}
.stufe ul{margin:0;padding-left:1.1rem;font-size:var(--t-s);color:var(--tinte-weich);line-height:1.7}
.logowand{list-style:none;padding:0;display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));margin-top:var(--s5)}
.logoplatz{
  aspect-ratio:3/2;border:1.5px dashed var(--linie);border-radius:var(--r-klein);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:var(--t-xs);color:var(--tinte-weich);padding:var(--s2);background:var(--papier-hell);
}
.logoplatz.sponsor{border-style:solid;font-size:var(--t-s);font-weight:700;color:var(--tinte)}
.logoplatz.mit-logo{background:#fff;padding:var(--s3)}
.logoplatz.mit-logo img{max-width:100%;max-height:100%;object-fit:contain}
.logoplatz.mit-logo a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.logoplatz.bg-sabrina{background:#B52270;border-color:#B52270;padding:0}
.logoplatz.bg-schwarz{background:#000;border-color:#000}
.logoplatz.logo-mobiliar{background:#E2001A;border-color:#E2001A}
.liste{margin:0 0 var(--s3);padding-left:1.1rem}

/* ---------- Verein ---------- */
.strahl{list-style:none;margin:0;padding:0;border-left:2px solid var(--rot)}
.strahl li{padding:0 0 var(--s4) var(--s4);position:relative}
.strahl li:last-child{padding-bottom:0}
.strahl li::before{content:"";position:absolute;left:calc(-.5rem - 1px);top:.5rem;width:1rem;height:1rem;border-radius:var(--r-pille);background:var(--papier);border:3px solid var(--rot)}
.strahl b{display:block;font-weight:900;font-size:var(--t-m)}
.strahl p{font-size:var(--t-s);color:var(--tinte-weich);margin:.2rem 0 0}
.quelle{font-size:var(--t-xs);color:var(--tinte-weich);font-style:italic}

.vorstand{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));margin-top:var(--s5)}
.person{text-align:center;max-width:12rem;margin-inline:auto}
.person .bildplatz{
  aspect-ratio:1;border-radius:var(--r-pille);background:var(--papier-tief);
  border:1px solid var(--linie);display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--s2);font-size:var(--t-xs);color:var(--tinte-weich);padding:var(--s2);text-align:center;
}
.person .portrait{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--r-pille);border:1px solid var(--linie);margin-bottom:var(--s2)}
.person b{display:block;font-weight:900;font-size:var(--t-m)}
.person span{font-size:var(--t-s);color:var(--tinte-weich)}

/* ---------- Rueckblick ---------- */
.galerie{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.galerie figure{margin:0;background:var(--papier-hell);border:1px solid var(--linie);border-radius:var(--r-klein);padding:.7rem;box-shadow:var(--schatten)}
.galerie .bildplatz{aspect-ratio:4/3;background:var(--papier-tief);display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--t-xs);color:var(--tinte-weich);padding:var(--s3)}
.galerie img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.galerie figcaption{font-size:var(--t-xs);color:var(--tinte-weich);padding-top:.55rem;text-align:center}

/* ---------- Kontakt ---------- */
.kontakt{background:var(--tinte);color:var(--papier)}
.kontakt h2{color:var(--papier)}
.kontakt .kicker{color:var(--papier)}
.kontakt a{color:var(--papier)}
.kontakt-raster{display:grid;gap:var(--s5);grid-template-columns:1fr 1fr;align-items:start}
.kontakt dl{margin:0;display:grid;gap:var(--s3)}
.kontakt dt{font-size:var(--t-xs);font-weight:900;font-style:italic;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,234,208,.62)}
.kontakt dd{margin:.15rem 0 0;font-size:var(--t-m)}
/* Umschalter als Segmentleiste: die aktive Haelfte ist rot gefuellt */
.karte-schalter{
  display:inline-flex;gap:.25rem;margin-bottom:var(--s3);
  padding:.25rem;border-radius:var(--r-pille);
  background:rgba(247,234,208,.10);border:1px solid rgba(247,234,208,.22);
}
.karte-schalter button{
  font:inherit;font-weight:700;font-size:var(--t-s);cursor:pointer;
  background:none;color:rgba(247,234,208,.7);
  border:0;border-radius:var(--r-pille);
  padding:.45rem 1.1rem;
  transition:background-color 150ms var(--ease-out),color 150ms var(--ease-out);
}
.karte-schalter button:hover{color:var(--papier)}
.karte-schalter button:active{transform:scale(.98)}
.karte-schalter button.aktiv{background:var(--rot);color:var(--papier-hell)}

.karte-rahmen{
  margin:0;border-radius:var(--r-flaeche);overflow:hidden;
  border:1px solid rgba(247,234,208,.28);background:var(--papier-tief);
}
.karte-titel{
  display:flex;align-items:center;gap:.55rem;
  background:var(--rot);color:var(--papier-hell);
  font-size:var(--t-xs);font-weight:900;font-style:italic;
  letter-spacing:.08em;text-transform:uppercase;
  padding:.6rem var(--s3);
}
.karte-punkt{
  width:.85rem;height:.85rem;border-radius:var(--r-pille);flex-shrink:0;
  border:2px solid var(--papier-hell);
}
.karte-rahmen iframe{display:block;width:100%;aspect-ratio:4/3;border:0}
.karte-quelle{font-size:var(--t-xs);color:rgba(247,234,208,.6);margin-top:var(--s2)}
.karte-quelle a{color:rgba(247,234,208,.8)}

/* ---------- Fusszeile ---------- */
.fuss{background:var(--tinte);color:rgba(247,234,208,.75);border-top:1px solid rgba(247,234,208,.18);padding-block:var(--s5);font-size:var(--t-s)}
.fuss .wrap{display:grid;gap:var(--s4);grid-template-columns:1.4fr 1fr 1fr}
.fuss a{color:rgba(247,234,208,.85);text-decoration:none}
.fuss a:hover{color:var(--papier);text-decoration:underline}
.fuss img.wappen{width:50px;height:60px;margin-bottom:var(--s2)}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.fuss h4{color:var(--papier);font-size:var(--t-xs);font-weight:900;font-style:italic;letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--s2)}
.sozial{display:flex;gap:var(--s3);margin-top:var(--s2)}
.sozial a{
  display:block;color:rgba(247,234,208,.85);line-height:0;
  transition:color 150ms var(--ease-out),transform 150ms var(--ease-out);
}
.sozial a:hover{color:var(--papier)}
.sozial a:active{transform:scale(.94)}
.sozial svg{width:auto;height:2rem;fill:currentColor;display:block}
.fuss-unten{border-top:1px solid rgba(247,234,208,.15);margin-top:var(--s5);padding-top:var(--s3);display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;font-size:var(--t-xs)}

/* ---------- Rechtstexte und Danke ---------- */
.rechtstext{padding-block:var(--s6)}
.rechtstext h2{font-size:var(--t-l);margin-top:var(--s5)}
.rechtstext h2:first-of-type{margin-top:var(--s4)}
.rechtstext p,.rechtstext li{font-size:var(--t-s);color:var(--tinte-weich);line-height:1.7}
.rechtstext ul{padding-left:1.2rem}
.danke{min-height:60vh;display:flex;align-items:center;text-align:center}
.danke .rad-gross{width:5rem;height:5rem;border:4px solid var(--rot);border-radius:var(--r-pille);margin:0 auto var(--s4);position:relative}
.danke .rad-gross::after{content:"";position:absolute;inset:1.1rem;border-radius:var(--r-pille);background:var(--rot)}
.unterseite .kopf{position:sticky}

/* ============================================================
   Umbruchpunkte
   ============================================================ */

@media (max-width:1024px){
  .nav ul{display:none}
  .burger{display:flex}
  .nav.offen ul{
    display:grid;position:absolute;left:0;right:0;top:100%;
    background:var(--papier-hell);border-bottom:1px solid var(--linie);
    padding:var(--s3) 1.25rem var(--s4);gap:0;box-shadow:var(--schatten);
  }
  .nav.offen ul li{border-bottom:1px solid var(--linie-zart)}
  .nav.offen ul li:last-child{border-bottom:0}
  .nav.offen a{display:block;padding:.75rem 0;border-bottom:0;font-size:1.05rem}
  .kopf .wrap{position:relative}
  .kontakt-raster{grid-template-columns:1fr}
  .hero-schleier{background:linear-gradient(110deg,rgba(247,234,208,0) 18%,rgba(247,234,208,.78) 46%,rgba(247,234,208,.96) 66%)}
}

@media (max-width:900px){
  .belege .wrap{grid-template-columns:1fr}
  .beleg{border-right:0;border-bottom:1px solid rgba(247,234,208,.18);padding:var(--s3) 0}
  .beleg:not(:first-child){padding-left:0}
  .beleg:last-child{border-bottom:0}
  .fuss .wrap{grid-template-columns:1fr 1fr}
  section{padding-block:var(--s6)}
}

/* Schmal: Bild oben, Text darunter — kein Text auf dem Bild */
@media (max-width:760px){
  .hero{display:flex;flex-direction:column}
  .hero-bild{position:relative;inset:auto;z-index:auto;order:-1}
  .hero-bild img{height:auto;aspect-ratio:4/5;object-position:center}
  .hero-schleier{display:none}
  .hero .wrap{min-height:0;padding-block:var(--s5) var(--s6);justify-content:flex-start}
  .hero-text{max-width:none}
}

@media (max-width:640px){
  :root{--s7:3.4rem;--s6:2.8rem;--s5:2rem}
  .wrap,.schmal{width:calc(100% - 2rem)}
  .marke img{width:36px;height:43px}
  .marke small{display:none}
  .marke span{font-size:.92rem}
  .feld-paar{grid-template-columns:1fr}
  .programm-zeile{grid-template-columns:1fr;gap:.15rem}
  .fuss .wrap{grid-template-columns:1fr}
  .hero-knoepfe .btn{flex:1 1 100%}
  .anmeldung>summary{font-size:var(--t-m);padding:var(--s3)}
  .anmeldung .inhalt{padding:0 var(--s3) var(--s3)}
}

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

@media print{
  .kopf,.hero-knoepfe,.burger{display:none}
  body{background:var(--weiss)}
}