/* SV Triangel · Designprobe «Hier spielt Triangel.» · Herzhaus Studios
   Leitmotiv: das Dreieck. Wappen-Dreieck = Triangel (Instrument) = Fenster. Wimpelkette vom Sommerfest = Navigation. Wochenplan als Partitur. */
:root{
  --rot:#e00d13; --rot-d:#a90a0f; --rot-dd:#6e070b;
  --weiss:#fffdf8; --leinen:#f4eee4; --leinen-d:#e8dfd0;
  --tinte:#1c1715; --tinte-2:#2a2421; --grau:#5c5450; --grau-h:#8a817c;
  --stahl-1:#f4f6f8; --stahl-2:#b9c0c7; --stahl-3:#6d757d;
  --gold:#e9b949;
  --kopf-h:68px;
  --rand:clamp(16px,4.4vw,56px);
  --max:1240px;
  --schrift:'Instrument Sans',system-ui,sans-serif;
  --titel:'Archivo',system-ui,sans-serif;
  --zitat:'Instrument Serif',Georgia,serif;
  --stoff:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 2px,transparent 2px 5px),repeating-linear-gradient(-45deg,rgba(0,0,0,.035) 0 2px,transparent 2px 5px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-h) + 16px)}
body{margin:0;background:var(--weiss);color:var(--tinte);font-family:var(--schrift);font-size:18px;line-height:1.58;font-stretch:100%;overflow-x:hidden}
button,input,select,textarea,optgroup{font-family:inherit;font-size:inherit}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3,h4{font-family:var(--titel);font-stretch:68%;font-weight:850;line-height:.98;margin:0 0 .4em;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:clamp(54px,13.5vw,148px)}
h2{font-size:clamp(40px,8.6vw,92px)}
h3{font-size:clamp(28px,5vw,40px);font-stretch:75%}
h4{font-size:22px;font-stretch:85%;font-weight:800}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--rand)}
.schmal{max-width:820px}
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--titel);font-stretch:100%;font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--rot);margin:0 0 14px}
.kicker::before{content:"";width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:12px solid currentColor;flex:none}
.dunkel .kicker,.rot .kicker,.fest .kicker{color:var(--gold)}
.lead{font-size:clamp(19px,2.3vw,23px);line-height:1.5;max-width:46ch}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--tinte);color:#fff;padding:10px 16px;z-index:200;font-weight:700}
.skip:focus{top:10px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
section{position:relative}
main{overflow-x:clip}
.ab{padding:clamp(64px,10vw,128px) 0}
.ab-k{padding:clamp(44px,7vw,84px) 0}
.dunkel{background:var(--tinte);color:var(--weiss)}
.rot{background:var(--stoff),var(--rot);color:#fff}
.leinen{background:var(--leinen)}
.zentriert{text-align:center}
.zentriert .lead{margin-left:auto;margin-right:auto}

/* Kerbe: das Wappen-Dreieck als Abschnittsübergang */
.kerbe::before{content:"";position:absolute;left:50%;top:-1px;transform:translateX(-50%);width:68px;height:30px;background:var(--kerbe,var(--weiss));clip-path:polygon(0 0,100% 0,50% 100%);z-index:2}
.kerbe-w{--kerbe:var(--weiss)} .kerbe-l{--kerbe:var(--leinen)} .kerbe-t{--kerbe:var(--tinte)} .kerbe-r{--kerbe:var(--rot)}

/* ---------- Wimpelband: Knöpfe aus Fahnenstoff mit Schwalbenschwanz und Steppnaht ---------- */
.wb{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 40px 12px 24px;background:var(--stoff),var(--rot);color:#fff;text-decoration:none;font-family:var(--titel);font-stretch:85%;font-weight:750;font-size:17px;letter-spacing:.06em;text-transform:uppercase;line-height:1.1;border:0;cursor:pointer;clip-path:polygon(0 0,100% 0,calc(100% - 18px) 50%,100% 100%,0 100%);transition:transform .25s cubic-bezier(.3,1.6,.5,1),background-color .2s;filter:drop-shadow(0 6px 0 rgba(0,0,0,.0))}
.wb::before{content:"";position:absolute;inset:5px 22px 5px 5px;border:1.5px dashed rgba(255,255,255,.6);pointer-events:none}
.wb::after{content:"";position:absolute;right:0;top:0;bottom:0;width:18px;background:inherit;filter:brightness(.82)}
.wb span{position:relative;z-index:1}
.wb:hover{transform:translateY(-3px) rotate(-.6deg);background-color:var(--rot-d)}
.wb.hell{background:var(--stoff),var(--leinen);color:var(--rot-d)}
.wb.hell::before{border-color:rgba(169,10,15,.55)}
.wb.weiss{background:var(--weiss);color:var(--rot-d)}
.wb.weiss::before{border-color:rgba(169,10,15,.5)}
.wb.dunkel-k{background:var(--tinte);color:#fff}
.knoepfe{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}

/* ---------- Kopf ---------- */
.kopf{position:fixed;inset:0 0 auto 0;height:var(--kopf-h);z-index:90;background:rgba(255,253,248,.97);border-bottom:4px solid var(--rot);display:flex;align-items:center}
.kopf-in{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1440px;margin:0 auto;padding:0 var(--rand);gap:16px}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:48px}
.marke img{width:42px;height:auto}
.marke b{white-space:nowrap;font-family:var(--titel);font-stretch:66%;font-weight:900;font-size:clamp(21px,6.2vw,25px);line-height:.9;display:block;letter-spacing:.01em}
.marke small{font-family:var(--titel);font-stretch:100%;font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--rot);display:block;margin-top:3px}
.kopf-r{display:flex;align-items:center;gap:6px}
.sprache{font-family:var(--titel);font-weight:800;font-stretch:90%;font-size:15px;letter-spacing:.08em;text-decoration:none;min-width:48px;min-height:48px;display:grid;place-items:center;color:var(--tinte)}
.menue-k{display:flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;min-height:48px;padding:0 4px 0 10px;font-family:var(--titel);font-weight:800;font-stretch:85%;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte)}
.menue-k svg{width:34px;height:40px;overflow:visible}
.menue-k .tri{transform-origin:17px 2px;animation:pendel 4.6s ease-in-out infinite}
@keyframes pendel{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}

/* Wimpelkette in der Kopfzeile (Desktop) */
.kette{display:none}
@media (min-width:1120px){
  :root{--kopf-h:78px}
  .kette{display:flex;position:relative;align-self:flex-start;height:var(--kopf-h);padding:0 6px;gap:0}
  .kette::before{content:"";position:absolute;left:0;right:0;top:12px;height:2px;background:var(--grau);border-radius:2px}
  .kette a{position:relative;display:flex;align-items:flex-start;justify-content:center;width:124px;height:84px;margin-top:12px;padding-top:13px;text-decoration:none;font-family:var(--titel);font-stretch:80%;font-weight:800;font-size:14.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--rot-d);background:var(--stoff),var(--leinen);clip-path:polygon(3% 0,97% 0,97% 50%,50% 100%,3% 50%);transform-origin:50% 0;transition:transform .5s cubic-bezier(.3,1.7,.5,1),background-color .2s;text-align:center;line-height:1.05}
  .kette a:nth-child(even){background-color:var(--weiss)}
  .kette a span{display:block;max-width:112px}
  .kette a:hover{transform:rotate(4deg)}
  .kette a:nth-child(even):hover{transform:rotate(-4deg)}
  .kette a[aria-current]{background-color:var(--rot);color:#fff}
  .kette a::before{content:"";position:absolute;left:4%;right:4%;top:0;height:7px;background:rgba(0,0,0,.12)}
}

/* ---------- Menü (Wimpelkette groß) ---------- */
.menue{position:fixed;inset:0;z-index:120;background:var(--stoff),var(--rot);color:#fff;overflow-y:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;transition:opacity .3s,visibility 0s .3s}
.menue.offen{visibility:visible;opacity:1;transition:opacity .3s}
.menue-kopf{display:flex;justify-content:space-between;align-items:center;height:var(--kopf-h);padding:0 var(--rand);max-width:1440px;margin:0 auto}
.menue-kopf .marke b,.menue-kopf .marke small{color:#fff}
.zu{background:none;border:0;color:#fff;cursor:pointer;min-width:48px;min-height:48px;font-family:var(--titel);font-weight:800;font-stretch:85%;font-size:16px;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.zu i{font-style:normal;font-size:34px;line-height:1;font-family:var(--schrift)}
.menue-in{max-width:1240px;margin:0 auto;padding:10px var(--rand) 60px}
.leine{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0 10px;padding-top:14px;margin-bottom:6px}
.leine::before{content:"";position:absolute;left:-10px;right:-10px;top:14px;height:30px;border-top:2px solid rgba(255,255,255,.75);border-radius:50% 50% 0 0/100% 100% 0 0;transform:scaleY(-1);transform-origin:top}
.leine a{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;height:150px;padding:20px 12px 0;text-decoration:none;color:var(--rot-d);background:var(--stoff),var(--weiss);clip-path:polygon(3% 0,97% 0,97% 46%,50% 100%,3% 46%);transform-origin:50% 0;animation:haengen .9s cubic-bezier(.3,1.6,.5,1) both}
.leine a:nth-child(2){background-color:var(--leinen);margin-top:10px}
.leine a b{font-family:var(--titel);font-stretch:70%;font-weight:900;font-size:clamp(25px,7vw,36px);line-height:.95;text-transform:uppercase}
.leine a small{font-size:14px;color:var(--grau);margin-top:5px;line-height:1.25;max-width:20ch}
.leine a[aria-current]{background-color:var(--tinte);color:#fff}
.leine a[aria-current] small{color:#d9cfc9}
@keyframes haengen{0%{transform:rotate(-14deg) translateY(-30px);opacity:0}100%{transform:none;opacity:1}}
.menue.offen .leine:nth-of-type(2) a{animation-delay:.08s}.menue.offen .leine:nth-of-type(3) a{animation-delay:.16s}
.sparten-m{margin-top:34px;border-top:2px solid rgba(255,255,255,.35);padding-top:22px}
.sparten-m h2{font-size:26px;font-stretch:80%;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px}
.etiketten{display:flex;flex-wrap:wrap;gap:10px}
.etiketten a{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:9px 16px 9px 12px;background:rgba(0,0,0,.18);color:#fff;text-decoration:none;font-weight:600;font-size:17px;border-left:4px solid #fff}
.etiketten a i{font-style:normal;font-family:var(--titel);font-weight:800;font-stretch:80%;font-size:14px;color:var(--gold)}
.menue-fuss{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px 24px;font-size:17px}
.menue-fuss a{color:#fff;min-height:44px;display:inline-flex;align-items:center}
@media (min-width:760px){.leine{grid-template-columns:repeat(3,1fr)}.leine a{height:170px}}

/* ---------- Startbild: Triangel-Fenster ---------- */
.held{padding-top:var(--kopf-h);background:var(--stoff),var(--rot);color:#fff;overflow:hidden;position:relative}
.held::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(transparent,rgba(110,7,11,.35));pointer-events:none}
.held-in{position:relative;z-index:1;max-width:1440px;margin:0 auto;padding:26px var(--rand) 40px;display:grid;gap:8px}
.held .ort{font-family:var(--titel);font-stretch:100%;font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;margin:0;opacity:.95}
.held h1{margin:4px 0 0;font-size:clamp(60px,16.5vw,168px);font-stretch:62%;line-height:.86}
.held h1 em{font-style:normal;display:block;color:var(--weiss);-webkit-text-stroke:0}
.held h1 .w{display:inline-block;animation:wort .9s cubic-bezier(.2,1.4,.4,1) both}
.held h1 .w:nth-child(2){animation-delay:.08s}.held h1 .w:nth-child(3){animation-delay:.16s}
@keyframes wort{0%{transform:translateY(40px) rotate(4deg);opacity:0}100%{transform:none;opacity:1}}
.held .lead{margin:16px 0 0;max-width:34ch}
.fenster{position:relative;margin:4px auto 0;width:min(92vw,560px)}
.fenster button{display:block;width:100%;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fenster svg{display:block;width:100%;height:auto;overflow:visible}
.fenster .schwinger{transform-origin:50% 0;transform-box:view-box}
.fenster.klingt .schwinger{animation:schlag 1.4s cubic-bezier(.2,.7,.3,1)}
.fenster .schwinger{animation:wach 1.8s cubic-bezier(.2,.7,.3,1) .9s}
@keyframes wach{0%{transform:rotate(0)}20%{transform:rotate(2deg)}45%{transform:rotate(-1.4deg)}70%{transform:rotate(.6deg)}100%{transform:rotate(0)}}
.tipp svg{display:inline-block;width:30px;height:22px;vertical-align:-5px;margin-right:6px}
.tipp .schl{transform-origin:4px 18px;animation:klopf 2.4s ease-in-out infinite}
@keyframes klopf{0%,70%,100%{transform:rotate(0)}80%{transform:rotate(-18deg)}88%{transform:rotate(4deg)}}
@keyframes schlag{0%{transform:rotate(0)}12%{transform:rotate(3.2deg)}30%{transform:rotate(-2.4deg)}48%{transform:rotate(1.4deg)}66%{transform:rotate(-.7deg)}84%{transform:rotate(.3deg)}100%{transform:rotate(0)}}
.fenster .welle{fill:none;stroke:#fff;stroke-width:3;opacity:0;transform-origin:50% 42%;transform-box:view-box}
.fenster.klingt .welle{animation:welle 1.6s ease-out}
.fenster.klingt .welle.w2{animation-delay:.18s}.fenster.klingt .welle.w3{animation-delay:.36s}
@keyframes welle{0%{opacity:.7;transform:scale(.7)}100%{opacity:0;transform:scale(1.35)}}
.fenster .bild{opacity:0;transition:opacity .7s}
.fenster .bild.an{opacity:1}
.schild{position:relative;display:flex;justify-content:center;margin-top:-6px}
.schild span{display:inline-flex;align-items:center;gap:10px;background:var(--weiss);color:var(--rot-d);font-family:var(--titel);font-stretch:80%;font-weight:800;font-size:17px;letter-spacing:.08em;text-transform:uppercase;padding:9px 34px 9px 16px;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 50%,100% 100%,0 100%);min-height:44px}
.schild i{font-style:normal;color:var(--grau);font-weight:700;font-size:14px}
.tipp{margin:12px 0 0;text-align:center;font-size:15px;letter-spacing:.04em;opacity:.95}
.tipp b{font-weight:700}
.held .knoepfe{justify-content:flex-start}
.held .wb.weiss{background:var(--weiss)}
@media (min-width:980px){
  .held-in{grid-template-columns:1.05fr .95fr;align-items:center;padding:40px var(--rand) 70px;min-height:calc(100vh - var(--kopf-h));min-height:calc(100svh - var(--kopf-h));max-height:980px}
  .held h1{font-size:clamp(96px,10.4vw,172px)}
  .fenster{grid-column:2;grid-row:1/span 6;width:100%;max-width:600px;margin:0 0 0 auto}
}

/* ---------- Zahlenleiste ---------- */
.zahlen{background:var(--tinte);color:#fff;padding:34px 0 30px}
.zahlen ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:24px 14px}
.zahlen li{position:relative;padding-left:24px}
.zahlen li::before{content:"";position:absolute;left:0;top:12px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:13px solid var(--rot)}
.zahlen b{display:block;font-family:var(--titel);font-stretch:62%;font-weight:900;font-size:clamp(48px,11vw,76px);line-height:.9}
.zahlen span{display:block;font-size:16px;color:#ddd3cd;margin-top:6px;line-height:1.3}
@media (min-width:860px){.zahlen ul{grid-template-columns:repeat(5,1fr)}}

/* ---------- Heute im Verein (Partitur-Ausschnitt) ---------- */
.heute{display:grid;gap:24px}
.heute-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.heute-kopf h2{margin:0}
.uhr{font-family:var(--titel);font-stretch:85%;font-weight:700;font-size:17px;letter-spacing:.06em;color:var(--grau)}
.notenzeile{position:relative;height:96px;padding-left:0;margin:6px 0 4px;background:repeating-linear-gradient(to bottom,transparent 0 17px,var(--grau-h) 17px 18px);background-size:100% 90px;background-repeat:no-repeat;background-position:0 4px}
.notenzeile .jetzt{position:absolute;top:-6px;bottom:-6px;width:3px;background:var(--rot);transform:translateX(-1px)}
.notenzeile .jetzt::before{content:"";position:absolute;left:50%;top:-10px;transform:translateX(-50%);border-left:8px solid transparent;border-right:8px solid transparent;border-top:12px solid var(--rot)}
.note{position:absolute;width:22px;height:20px;transform:translate(-11px,0);background:var(--tinte);clip-path:polygon(0 0,100% 0,50% 100%)}
.note::after{content:"";position:absolute}
.balken{position:absolute;height:7px;background:var(--tinte);opacity:.18;border-radius:4px}
.note b{position:absolute;left:24px;top:-2px;font:800 13px/1 var(--titel);font-stretch:85%;color:var(--tinte);white-space:nowrap;letter-spacing:.04em}
.note.vorbei{background:var(--grau-h)}
.note.laeuft{background:var(--rot)}
.skala{display:flex;justify-content:space-between;font-size:14px;color:var(--grau);font-family:var(--titel);font-stretch:90%;font-weight:600}
.takte{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:0;border-top:2px solid var(--tinte)}
.takte li{display:grid;grid-template-columns:96px 1fr;gap:4px 14px;padding:15px 0;border-bottom:1px solid var(--leinen-d);align-items:start}
.takte time{font-family:var(--titel);font-stretch:75%;font-weight:850;font-size:24px;line-height:1.05}
.takte time small{display:block;font-size:15px;font-weight:600;color:var(--grau);font-stretch:90%}
.takte b{display:block;font-weight:700;font-size:18.5px;line-height:1.3}
.takte span{display:block;font-size:16px;color:var(--grau);line-height:1.4}
.takte .marke-l{display:inline-block;font-family:var(--titel);font-stretch:85%;font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;background:var(--rot);color:#fff;padding:2px 8px;margin-left:6px;vertical-align:2px}
.takte li.vorbei{opacity:.55}
.takte li.leer{grid-template-columns:1fr}
.takte a{text-decoration-thickness:1px;text-underline-offset:3px}
@media (min-width:900px){.heute{grid-template-columns:.9fr 1.1fr;align-items:start;gap:40px 64px}}

/* ---------- Sportangebot als Wimpelkette ---------- */
.wimpelreihe{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:26px 0;margin-top:10px}
.wh{position:relative;padding:16px 7px 0}
.wh::before{content:"";position:absolute;left:-2px;right:-2px;top:13px;height:3px;background:var(--grau);border-radius:2px}
.wh:nth-child(odd)::before{left:-24px}.wh:nth-child(even)::before{right:-24px}
.dunkel .wh::before,.rot .wh::before{background:rgba(255,255,255,.6)}
.wimpel{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:var(--tinte);height:232px;padding:26px 12px 0;background:var(--stoff),var(--weiss);clip-path:polygon(2% 0,98% 0,98% 52%,50% 100%,2% 52%);transform-origin:50% 0;transition:transform .7s cubic-bezier(.25,1.8,.45,1)}
.wimpel::before{content:"";position:absolute;left:2%;right:2%;top:0;height:9px;background:rgba(0,0,0,.1)}
.wh:nth-child(4n+2) .wimpel,.wh:nth-child(4n+3) .wimpel{background-color:var(--rot);color:#fff}
.wh:nth-child(even) .wimpel{transform:rotate(-1.5deg)}.wh:nth-child(odd) .wimpel{transform:rotate(1.2deg)}
.wimpel i{font-style:normal;font-family:var(--titel);font-stretch:85%;font-weight:800;font-size:14px;letter-spacing:.14em;opacity:.8}
.wimpel b{font-family:var(--titel);font-stretch:66%;font-weight:900;font-size:clamp(25px,6.6vw,34px);line-height:.95;text-transform:uppercase;margin-top:6px;hyphens:manual}
.wimpel small{font-size:15px;line-height:1.3;margin-top:8px;max-width:17ch;opacity:.92}
.wh .wimpel:hover{transform:rotate(4deg)}
.wh:nth-child(even) .wimpel:hover{transform:rotate(-4deg)}
.wimpel.schwingt{animation:schwing 1.6s cubic-bezier(.3,1.5,.5,1)}
@keyframes schwing{0%{transform:rotate(-9deg)}40%{transform:rotate(5deg)}70%{transform:rotate(-2deg)}100%{transform:rotate(0)}}
@media (min-width:760px){.wimpelreihe{grid-template-columns:repeat(5,1fr)}.wh:nth-child(odd)::before,.wh:nth-child(even)::before{left:-1px;right:-1px}.wh:nth-child(5n+1)::before{left:-30px}.wh:nth-child(5n)::before{right:-30px}
.wh:nth-child(4n+2) .wimpel,.wh:nth-child(4n+3) .wimpel{background-color:var(--weiss);color:var(--tinte)}.wh:nth-child(odd) .wimpel{background-color:var(--rot);color:#fff}.wimpel{height:256px}}

/* ---------- Drei Seiten ---------- */
.drei{display:grid;gap:30px;align-items:center}
.drei-svg{width:min(100%,520px);margin:0 auto}
.drei-svg text{font-family:var(--titel);font-stretch:80%;font-weight:800;font-size:22px;letter-spacing:.1em;text-transform:uppercase;fill:var(--rot-d)}
.drei-svg .zahl{font-stretch:62%;font-weight:900;font-size:64px;fill:var(--rot)}
.drei-svg .linie{fill:none;stroke:url(#stahl2);stroke-width:20;stroke-linejoin:round;stroke-linecap:round}
.drei-btn{display:block;width:100%;background:none;border:0;padding:0;cursor:pointer}
.drei-btn .schw{transform-origin:50% 0;transform-box:view-box}
.drei-btn.klingt .schw{animation:schlag 1.4s cubic-bezier(.2,.7,.3,1)}
.drei-svg .ecke{font-stretch:62%;font-weight:900;font-size:40px;fill:#fff}
.drei-svg .eckf{fill:var(--rot)}
.seiten{list-style:none;margin:0;padding:0;display:grid;gap:20px;counter-reset:s}
.seiten li{position:relative;padding:4px 0 0 64px;counter-increment:s}
.seiten li::before{content:counter(s,upper-roman);position:absolute;left:0;top:0;width:46px;height:42px;background:var(--rot);color:#fff;clip-path:polygon(0 0,100% 0,50% 100%);font-family:var(--titel);font-weight:900;font-stretch:80%;font-size:17px;text-align:center;line-height:24px}
.seiten b{display:block;font-family:var(--titel);font-stretch:85%;font-weight:800;font-size:19px;letter-spacing:.08em;text-transform:uppercase}
@media (min-width:900px){.drei{grid-template-columns:1fr 1fr;gap:60px}}

/* ---------- Fest ---------- */
.fest{background:var(--rot-dd);color:#fff;overflow:hidden}
.fest::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% 0%,rgba(255,255,255,.12),transparent 60%),var(--stoff);pointer-events:none}
.girlande{position:relative;height:56px;margin:0 calc(var(--rand) * -1) 18px;overflow:hidden}
.girlande svg{position:absolute;left:0;top:0;width:100%;height:56px}
.fest-banner{box-shadow:0 22px 40px rgba(0,0,0,.35);margin:6px 0 26px}
.programm{display:grid;gap:16px;margin-top:10px}
.tag{background:rgba(0,0,0,.25);border-left:5px solid #fff;padding:18px 20px}
.tag h3{font-size:30px;margin-bottom:6px;text-transform:uppercase}
.tag ul{margin:0;padding:0;list-style:none}
.tag li{display:grid;grid-template-columns:82px 1fr;gap:10px;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.28);font-size:17.5px}
.tag li:last-child{border-bottom:0}
.tag li time{font-family:var(--titel);font-stretch:80%;font-weight:800;color:var(--gold)}
@media (min-width:900px){.programm{grid-template-columns:repeat(3,1fr)}.fest-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:start}}

/* ---------- Zitat ---------- */
.zitat{margin:0;font-family:var(--zitat);font-style:italic;font-size:clamp(32px,6vw,62px);line-height:1.08;max-width:22ch}
.zitat::before{content:"„";color:var(--rot)}
.zitat::after{content:"“";color:var(--rot)}
.zitat-q{display:block;margin-top:16px;font-family:var(--titel);font-style:normal;font-stretch:85%;font-weight:700;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--grau)}
.dunkel .zitat-q,.rot .zitat-q{color:#dcd2cc}
.dunkel .zitat::before,.dunkel .zitat::after{color:var(--gold)}

/* ---------- Schritte (Mitglied werden) ---------- */
.schritte{list-style:none;margin:30px 0 0;padding:16px 0 0;display:grid;gap:22px;position:relative}
.schritte::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grau)}
.schritte li{position:relative;padding:30px 44px 26px 86px;background:var(--stoff),var(--weiss);clip-path:polygon(0 0,100% 0,calc(100% - 26px) 50%,100% 100%,0 100%);min-height:110px}
.schritte li::after{content:"";position:absolute;inset:7px 32px 7px 7px;border:1.5px dashed rgba(169,10,15,.45);pointer-events:none}
.schritte li:nth-child(2){background-color:var(--rot);color:#fff}.schritte li:nth-child(2)::after{border-color:rgba(255,255,255,.55)}.schritte li:nth-child(2)::before{background:#fff;color:var(--rot-d)}
.schritte li::before{content:attr(data-n);position:absolute;left:16px;top:24px;width:52px;height:46px;background:var(--rot);color:#fff;clip-path:polygon(0 0,100% 0,50% 100%);font-family:var(--titel);font-weight:900;font-stretch:70%;font-size:22px;text-align:center;line-height:28px}
.schritte b{display:block;font-family:var(--titel);font-stretch:78%;font-weight:850;font-size:26px;line-height:1.05;margin-bottom:6px}
.schritte a{color:inherit}
@media (min-width:900px){.schritte{grid-template-columns:repeat(3,1fr)}.schritte li:nth-child(2){transform:rotate(-1deg)}}

/* ---------- Sponsoren: Fahnen an der Leine ---------- */
.fahnenleine{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:28px 14px;padding-top:24px}
.fahne{position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--tinte);transform-origin:50% 0;transition:transform .7s cubic-bezier(.25,1.8,.45,1)}
.fahne::before{content:"";position:absolute;left:-8px;right:-8px;top:-14px;height:2px;background:var(--grau)}
.fahne .klammer{position:absolute;top:-20px;width:9px;height:22px;background:#b98a52;border-radius:2px;z-index:2;box-shadow:inset -2px 0 rgba(0,0,0,.2)}
.fahne .klammer.l{left:18%}.fahne .klammer.r{right:18%}
.fahne .tuch{background:#fff;aspect-ratio:16/10;display:grid;place-items:center;padding:14px;clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.fahne .tuch img{max-height:100%;width:auto;max-width:100%;object-fit:contain}
.fahne .tuch.text{font-family:var(--titel);font-stretch:70%;font-weight:900;font-size:26px;text-align:center;line-height:1;color:var(--tinte);text-transform:uppercase}
.fahne .tuch.text small{display:block;font-size:14px;font-stretch:100%;font-weight:700;letter-spacing:.12em;color:var(--rot);margin-top:6px}
.fahne span{font-size:15.5px;margin-top:10px;text-align:center;font-weight:600}
.fahne:hover{transform:rotate(2.5deg)}
.leinen .fahne .tuch{box-shadow:0 10px 18px rgba(0,0,0,.08)}
@media (min-width:760px){.fahnenleine{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1100px){.fahnenleine.sechs{grid-template-columns:repeat(6,1fr)}}

/* ---------- Unterseiten-Kopf ---------- */
.seitenkopf{padding:calc(var(--kopf-h) + 36px) 0 54px;background:var(--stoff),var(--rot);color:#fff;position:relative;overflow:hidden}
.seitenkopf .kicker{color:#fff}
.seitenkopf h1{font-size:clamp(56px,14vw,140px);font-stretch:62%;line-height:.88;margin:0}
.seitenkopf .lead{margin-top:18px}
.seitenkopf .wappen-dreieck{position:absolute;right:-60px;bottom:-80px;width:min(70vw,520px);opacity:.14;pointer-events:none}
.seitenkopf.mit-bild{padding-bottom:0}
.kopfbild{margin-top:30px;position:relative}
.kopfbild img{width:100%;max-height:560px;object-fit:cover}
.kopfwimpel{position:absolute;right:var(--rand);top:calc(var(--kopf-h) - 4px);width:96px;height:132px;background:var(--stoff),var(--weiss);color:var(--rot-d);clip-path:polygon(0 0,100% 0,100% 52%,50% 100%,0 52%);display:flex;flex-direction:column;align-items:center;padding-top:16px;font-family:var(--titel);transform-origin:50% 0;animation:schwing 2.2s cubic-bezier(.3,1.5,.5,1) .3s both;z-index:3}
.kopfwimpel b{font-stretch:62%;font-weight:900;font-size:38px;line-height:1}
.kopfwimpel i{font-style:normal;font-stretch:90%;font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-top:2px}
.mit-wimpel .wrap>.pfad,.mit-wimpel .wrap>.kicker{padding-right:104px}
@media (min-width:900px){.kopfwimpel{width:150px;height:200px;padding-top:26px}.kopfwimpel b{font-size:64px}.kopfwimpel i{font-size:14px}}
.pfad{display:flex;flex-wrap:wrap;gap:6px;font-size:15px;margin:0 0 18px;opacity:.95}
.pfad a{color:#fff;min-height:32px;display:inline-flex;align-items:center}
.pfad span[aria-hidden]{opacity:.7}

/* Abschnittstitel mit Nummernwimpel */
.titel-w{display:flex;align-items:flex-start;gap:16px}
.titel-w .nr{flex:none;width:54px;height:52px;background:var(--rot);color:#fff;clip-path:polygon(0 0,100% 0,100% 50%,50% 100%,0 50%);font-family:var(--titel);font-weight:900;font-stretch:72%;font-size:21px;text-align:center;padding-top:8px;margin-top:4px}
.dunkel .titel-w .nr{background:#fff;color:var(--rot-d)}

/* ---------- Personen ---------- */
.leute{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 14px;margin-top:20px}
.person{margin:0}
.person .foto{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--leinen-d)}
.person .foto img{width:100%;height:100%;object-fit:cover}
.person .foto.ohne{display:grid;place-items:center;background:var(--stoff),var(--leinen)}
.person .foto.ohne svg{width:46%;opacity:.55}
.person figcaption{padding-top:10px;font-size:16px;line-height:1.35}
.person figcaption b{display:block;font-family:var(--titel);font-stretch:80%;font-weight:850;font-size:21px;line-height:1.05}
.person figcaption i{font-style:normal;display:block;font-family:var(--titel);font-stretch:90%;font-weight:700;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--rot);margin:6px 0 4px}
.person figcaption a{display:inline-flex;min-height:36px;align-items:center;word-break:break-word}
@media (min-width:760px){.leute{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.leute.vier{grid-template-columns:repeat(4,1fr)}}

/* Vorstand im Dreieck */
.vorstand-dreieck{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;margin-top:20px}
.vorstand-dreieck .spitze{grid-column:1/-1;width:min(62%,300px);justify-self:center}
.vorstand-dreieck::before{content:"";position:absolute;left:-12px;right:-12px;top:-20px;bottom:-14px;background:var(--stoff),var(--rot);clip-path:polygon(50% 0,100% 100%,0 100%);opacity:1;z-index:0}
.vorstand-dreieck::after{content:"";position:absolute;left:10px;right:10px;top:14px;bottom:0;background:var(--stoff),var(--weiss);clip-path:polygon(50% 0,100% 100%,0 100%);z-index:0}
.dreieck-linie{position:absolute;left:0;right:0;top:0;height:var(--dh,100%);pointer-events:none;z-index:0;width:100%;overflow:visible}
.daneben{margin-top:36px;padding-top:24px;border-top:2px dashed var(--grau-h)}
.daneben .leute{margin-top:10px}
.vorstand-dreieck figure{position:relative;z-index:1}
.vorstand-dreieck figcaption{background:var(--weiss);padding:10px 10px 8px}
@media (min-width:900px){.vorstand-dreieck{grid-template-columns:repeat(3,1fr);gap:0 60px;padding:0 6%}.vorstand-dreieck .spitze{grid-column:2;grid-row:1;width:100%}.vorstand-dreieck figure:nth-of-type(2){grid-column:1;grid-row:2;margin-top:-120px}.vorstand-dreieck figure:nth-of-type(3){grid-column:3;grid-row:2;margin-top:-120px}.vorstand-dreieck::before{left:-40px;right:-40px;top:-40px;bottom:-20px}.vorstand-dreieck::after{left:-16px;right:-16px;top:-8px;bottom:-6px}}

/* Zeitleiste */
.zeitleiste{list-style:none;margin:24px 0 0;padding:0 0 0 30px;border-left:3px solid var(--tinte)}
.zeitleiste li{position:relative;padding:0 0 26px 10px}
.zeitleiste li::before{content:"";position:absolute;left:-41px;top:4px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:16px solid var(--rot)}
.zeitleiste time{display:block;font-family:var(--titel);font-stretch:66%;font-weight:900;font-size:40px;line-height:1}
.zeitleiste p{margin:4px 0 0}

/* ---------- Partitur (Wochenplan) ---------- */
.partitur{display:grid;gap:10px;margin-top:20px}
.takt{position:relative;border-top:3px solid var(--tinte);padding:16px 0 10px}
.takt.heute-t{background:linear-gradient(90deg,rgba(224,13,19,.07),transparent)}
.takt-k{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.takt-k h3{margin:0;font-size:clamp(34px,7vw,48px);text-transform:uppercase}
.takt-k .heute-m{font-family:var(--titel);font-stretch:85%;font-weight:800;font-size:14px;letter-spacing:.12em;text-transform:uppercase;background:var(--rot);color:#fff;padding:4px 10px}
.takt .notenzeile{height:88px}
@media (min-width:1000px){.takt{display:grid;grid-template-columns:220px 1fr;gap:30px}.takt-k{flex-direction:column;align-items:flex-start}.takt .rechts{min-width:0}}

/* ---------- Tabelle als Aushang ---------- */
.aushang{background:#fff;border:2px solid var(--tinte);padding:20px;box-shadow:8px 8px 0 var(--rot);position:relative}
.aushang h3{font-size:30px}
.aushang table{width:100%;border-collapse:collapse;font-size:16.5px}
.aushang th{text-align:left;font-family:var(--titel);font-stretch:85%;font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--grau);border-bottom:2px solid var(--tinte);padding:8px 6px}
.aushang td small{display:block;color:var(--grau);font-size:14.5px}
.aushang td{padding:9px 6px;border-bottom:1px solid var(--leinen-d);vertical-align:top}
.aushang tr.wir td b{color:var(--rot-d)}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.hinweis{font-size:15.5px;color:var(--grau);margin-top:12px}

/* ---------- Spielfeld (Kader) ---------- */
.feld{position:relative;background:#2f7d39;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 44px,transparent 44px 88px);color:#fff;padding:26px 14px 30px;border:4px solid #fff;outline:4px solid #2f7d39;margin-top:24px}
.feld::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:2px solid rgba(255,255,255,.55)}
.feld::after{content:"";position:absolute;left:50%;top:50%;width:110px;height:110px;margin:-55px 0 0 -55px;border:2px solid rgba(255,255,255,.55);border-radius:50%}
.reihe{position:relative;z-index:1;margin-bottom:22px}
.reihe:last-child{margin-bottom:0}
.reihe h4{font-size:15px;font-stretch:100%;letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:.9;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.reihe h4 i{font-style:normal;background:#fff;color:#2f7d39;padding:1px 7px;font-size:13px}
.magnete{display:flex;flex-wrap:wrap;gap:8px}
.magnet{display:inline-flex;align-items:center;gap:8px;background:var(--weiss);color:var(--tinte);padding:7px 12px 7px 8px;font-weight:700;font-size:15.5px;box-shadow:0 3px 0 rgba(0,0,0,.25);border-radius:22px}
.magnet::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--rot);box-shadow:inset -2px -2px 0 rgba(0,0,0,.2)}
@media (min-width:1000px){.feld{display:grid;grid-template-columns:.7fr 1.1fr 1.3fr 1fr;gap:20px;padding:34px 24px}.reihe{margin:0}.feld::after{width:140px;height:140px;margin:-70px 0 0 -70px}}

/* ---------- Galerie ---------- */
.galerie{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:22px}
.galerie button{padding:0;border:0;background:var(--leinen-d);cursor:zoom-in;aspect-ratio:1;overflow:hidden;display:block}
.galerie button.hoch{grid-row:span 2;aspect-ratio:auto}
.galerie img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.galerie button:hover img{transform:scale(1.04)}
@media (min-width:760px){.galerie{grid-template-columns:repeat(4,1fr)}}
.lichtbox{position:fixed;inset:0;z-index:150;background:rgba(20,16,14,.96);display:grid;place-items:center;padding:60px 12px}
.lichtbox[hidden]{display:none}
.lichtbox figure{margin:0;max-width:100%;max-height:100%;display:grid;gap:12px;justify-items:center}
.lichtbox img{max-height:calc(100vh - 160px);max-height:calc(100svh - 160px);width:auto;max-width:100%;object-fit:contain}
.lichtbox figcaption{color:#fff;font-size:16px;text-align:center}
.lichtbox button{position:absolute;background:var(--rot);color:#fff;border:0;min-width:52px;min-height:52px;font-size:30px;line-height:1;cursor:pointer;font-family:var(--schrift)}
.lb-zu{top:10px;right:10px}
.lb-zur{left:8px;top:50%;transform:translateY(-50%)}
.lb-vor{right:8px;top:50%;transform:translateY(-50%)}

/* ---------- Startnummern (Tanzpaare) ---------- */
.paare{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 14px;margin-top:22px}
.paar{margin:0;position:relative}
.paar button{display:block;padding:0;border:0;background:var(--leinen-d);cursor:zoom-in;width:100%;aspect-ratio:3/4;overflow:hidden}
.paar img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.startnr{position:absolute;left:50%;top:-12px;transform:translateX(-50%) rotate(-2deg);background:#fff;border:2px solid var(--tinte);padding:4px 12px 3px;font-family:var(--titel);font-stretch:62%;font-weight:900;font-size:26px;line-height:1;white-space:nowrap;z-index:2;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.startnr::before,.startnr::after{content:"";position:absolute;top:5px;width:6px;height:6px;border-radius:50%;background:var(--grau)}
.startnr::before{left:4px}.startnr::after{right:4px}
.paar figcaption{padding-top:10px;font-weight:700;font-size:17px;line-height:1.3}
.paar figcaption small{display:block;font-weight:500;color:var(--grau);font-size:15px}
@media (min-width:760px){.paare{grid-template-columns:repeat(4,1fr)}}

/* Startliste */
.startliste{list-style:none;margin:10px 0 0;padding:0;font-size:16.5px}
.startliste li{display:grid;grid-template-columns:96px 1fr;border-bottom:1px dashed var(--leinen-d);padding:6px 0}
.startliste time{font-family:var(--titel);font-stretch:80%;font-weight:800}
.turniere{display:grid;gap:22px;margin-top:22px}
@media (min-width:1000px){.turniere{grid-template-columns:repeat(3,1fr)}}

/* Kreidetafel (Darts) */
.tafel{background:#20302a;background-image:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.07),transparent 60%);color:#f1efe8;padding:22px 20px;border:12px solid #6b4a2b;box-shadow:inset 0 0 40px rgba(0,0,0,.4);font-family:var(--titel);font-stretch:80%}
.tafel h3{color:#fff;font-size:28px;letter-spacing:.04em;text-transform:uppercase;border-bottom:2px solid rgba(255,255,255,.4);padding-bottom:8px}
.tafel ul{list-style:none;margin:0;padding:0;font-weight:700;font-size:21px}
.tafel li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dashed rgba(255,255,255,.18)}
.tafel li b{color:var(--gold);font-weight:800}
.anzeige{display:grid;gap:12px;margin-top:20px}
.spiel{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 14px;background:var(--tinte);color:#fff;padding:14px 16px;border-left:6px solid var(--rot)}
.spiel small{display:block;font-size:14px;color:#cfc5bf;font-family:var(--titel);font-stretch:90%;font-weight:600;letter-spacing:.06em}
.spiel b{font-size:17.5px}
.spiel .erg{font-family:var(--titel);font-stretch:62%;font-weight:900;font-size:42px;line-height:1;background:#000;padding:4px 12px;color:#ffdd57;letter-spacing:.04em}
@media (min-width:900px){.anzeige{grid-template-columns:1fr 1fr}}

/* Mannschaftsanzeige (Tischtennis) */
.klappen{display:grid;gap:12px;margin-top:20px}
.klappe{display:grid;grid-template-columns:64px 1fr;align-items:stretch;background:var(--tinte);color:#fff}
.klappe .nr{display:grid;place-items:center;background:var(--rot);font-family:var(--titel);font-stretch:62%;font-weight:900;font-size:44px;position:relative}
.klappe .nr::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(0,0,0,.35)}
.klappe div{padding:14px 16px}
.klappe small{display:block;font-family:var(--titel);font-stretch:90%;font-weight:700;font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;color:#cfc5bf}
.klappe b{font-family:var(--titel);font-stretch:72%;font-weight:850;font-size:28px;line-height:1.05}
@media (min-width:900px){.klappen{grid-template-columns:repeat(4,1fr)}}

/* Kursplan (Damensport) */
.kurse{display:grid;gap:18px;margin-top:22px}
.kurs{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:start;background:#fff;padding:14px;border-top:5px solid var(--rot);box-shadow:0 12px 26px rgba(0,0,0,.06)}
.kurs img{width:110px;height:132px;object-fit:cover}
.kurs .tagz{font-family:var(--titel);font-stretch:75%;font-weight:850;font-size:24px;line-height:1;color:var(--rot-d);text-transform:uppercase}
.kurs h3{font-size:26px;margin:4px 0 6px}
.kurs p{margin:0;font-size:16.5px;line-height:1.45}
@media (min-width:900px){.kurse{grid-template-columns:1fr 1fr}}

/* Jahreskreis (Herrenbewegung) */
.jahreskreis{display:grid;gap:16px;margin-top:22px}
.jahr{padding:22px;border:2px solid var(--tinte);position:relative}
.jahr h3{font-size:30px;text-transform:uppercase}
.jahr ul{margin:0;padding-left:20px}
.jahr li{margin:4px 0}
.jahr.sommer{background:#fff3d9}.jahr.winter{background:#e9eef3}.jahr.immer{background:#fff}
@media (min-width:900px){.jahreskreis{grid-template-columns:1.4fr 1fr 1fr}}

/* Medaillen (Kinderturnen) */
.medaillen{display:flex;gap:14px;justify-content:center;margin:10px 0 18px}
.medaille{width:64px;display:flex;flex-direction:column;align-items:center;animation:pendel 3.6s ease-in-out infinite;transform-origin:50% 0}
.medaille:nth-child(2){animation-delay:-.8s}.medaille:nth-child(3){animation-delay:-1.6s}
.medaille .band{width:28px;height:54px;background:linear-gradient(90deg,var(--rot) 0 33%,#fff 33% 66%,var(--rot) 66%);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}
.medaille .scheibe{width:58px;height:58px;border-radius:50%;margin-top:-8px;background:radial-gradient(circle at 35% 30%,#fff3c4,#e2b13c 45%,#9b6d14);display:grid;place-items:center;font-family:var(--titel);font-weight:900;font-stretch:70%;font-size:18px;color:#6b4708;box-shadow:0 6px 12px rgba(0,0,0,.2)}
.grosszahl{font-family:var(--titel);font-stretch:62%;font-weight:900;font-size:clamp(110px,26vw,220px);line-height:.82;color:var(--rot);margin:0}
.grosszahl small{display:block;font-size:22px;font-stretch:90%;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tinte);margin-top:10px;line-height:1.2}

/* Zeiten als Matten */
.matten{display:grid;gap:12px;margin-top:20px}
.matte{background:#2a62b8;color:#fff;padding:18px 20px;border-radius:14px;box-shadow:inset 0 -6px 0 rgba(0,0,0,.18);position:relative}
.matte::after{content:"";position:absolute;inset:8px;border:2px dashed rgba(255,255,255,.35);border-radius:9px;pointer-events:none}
.matte b{display:block;font-family:var(--titel);font-stretch:72%;font-weight:900;font-size:34px;line-height:1;text-transform:uppercase}
.matte span{display:block;font-size:17px;margin-top:4px}
.matte.gruen{background:#3c8a4a}.matte.rotm{background:var(--rot-d)}
@media (min-width:760px){.matten{grid-template-columns:repeat(2,1fr)}}

/* Zwei Vereine (JSG) */
.jsg{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin:26px 0}
.jsg div{background:#fff;border:2px solid var(--tinte);padding:18px 12px;text-align:center;font-family:var(--titel);font-stretch:72%;font-weight:850;font-size:clamp(22px,4.8vw,32px);line-height:1}
.jsg div small{display:block;font-size:14px;font-stretch:95%;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grau);margin-top:8px}
.jsg .plus{border:0;background:none;font-size:46px;color:var(--rot);padding:0}

/* Gästebuch */
.eintraege{display:grid;gap:22px;margin-top:20px}
.eintrag{background:#fff;padding:24px 22px 18px;position:relative;box-shadow:0 14px 28px rgba(0,0,0,.08);transform:rotate(-.6deg)}
.eintrag:nth-child(2){transform:rotate(.7deg)}
.eintrag::before{content:"";position:absolute;left:50%;top:-12px;width:90px;height:24px;margin-left:-45px;background:rgba(224,13,19,.75);clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%)}
.eintrag p{font-family:var(--zitat);font-style:italic;font-size:26px;line-height:1.2;margin-bottom:12px}
.eintrag footer{font-size:15px;color:var(--grau)}
.eintrag footer b{color:var(--tinte)}
@media (min-width:900px){.eintraege{grid-template-columns:repeat(3,1fr)}}

/* Formular */
.formular{display:grid;gap:16px;margin-top:20px;background:#fff;padding:22px;border-top:6px solid var(--rot);box-shadow:0 14px 30px rgba(0,0,0,.07)}
.formular label{display:grid;gap:6px;font-weight:700;font-size:16px}
.formular input,.formular textarea,.formular select{width:100%;min-height:50px;padding:12px 14px;border:2px solid var(--tinte);background:var(--weiss);color:var(--tinte);font-size:17px;border-radius:0}
.formular textarea{min-height:150px;resize:vertical}
.formular input:focus,.formular textarea:focus,.formular select:focus{outline:3px solid var(--gold);outline-offset:1px}
.themen{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0}
.themen legend{font-weight:700;font-size:16px;margin-bottom:8px;padding:0}
.themen label{display:inline-flex;align-items:center;gap:0;font-weight:600;cursor:pointer}
.themen input{position:absolute;opacity:0;width:1px;height:1px}
.themen span{display:inline-flex;align-items:center;min-height:46px;padding:8px 26px 8px 14px;background:var(--leinen);clip-path:polygon(0 0,100% 0,calc(100% - 12px) 50%,100% 100%,0 100%);font-size:16px}
.themen input:checked+span{background:var(--rot);color:#fff}
.themen input:focus-visible+span{outline:3px solid var(--gold)}
.formular .klein{font-size:14.5px;color:var(--grau);margin:0}

/* Dokumente als Anhänger */
.doks{display:grid;gap:14px;margin-top:20px}
.dok{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:14px;background:#fff;padding:14px 16px;text-decoration:none;color:var(--tinte);border-left:6px solid var(--rot);box-shadow:0 8px 20px rgba(0,0,0,.06);min-height:72px}
.dok svg{width:44px;height:52px}
.dok b{display:block;font-size:18px;line-height:1.25}
.dok small{display:block;color:var(--grau);font-size:15px}
.dok em{font-style:normal;font-family:var(--titel);font-stretch:85%;font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--rot-d)}
.dok:hover{background:var(--leinen)}
@media (min-width:900px){.doks{grid-template-columns:1fr 1fr}}

/* Satzung */
.satzung details{border-top:2px solid var(--tinte)}
.satzung details:last-child{border-bottom:2px solid var(--tinte)}
.satzung summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:10px 0;font-family:var(--titel);font-stretch:80%;font-weight:850;font-size:21px}
.satzung summary::-webkit-details-marker{display:none}
.satzung summary::after{content:"";flex:none;border-left:9px solid transparent;border-right:9px solid transparent;border-top:14px solid var(--rot);transition:transform .3s}
.satzung details[open] summary::after{transform:rotate(180deg)}
.satzung .inhalt{padding:0 0 18px;font-size:16.5px}

/* Karte/Adresse */
.adresskarte{background:var(--tinte);color:#fff;padding:26px 22px;position:relative;overflow:hidden}
.adresskarte h3{font-size:32px}
.adresskarte p{font-size:17.5px}
.adresskarte a{color:#fff}
.adresskarte>*{position:relative;z-index:1}
.adresskarte::after{content:"";position:absolute;right:-34px;bottom:-40px;width:128px;height:110px;background:var(--rot);clip-path:polygon(0 0,100% 0,50% 100%);opacity:.9}
.verzeichnis{list-style:none;margin:20px 0 0;padding:0;columns:1;column-gap:40px}
.verzeichnis li{break-inside:avoid;padding:12px 0;border-bottom:1px solid var(--leinen-d);font-size:16.5px;line-height:1.4}
.verzeichnis b{display:block;font-family:var(--titel);font-stretch:85%;font-weight:800;font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--rot)}
.verzeichnis a{display:inline-flex;min-height:34px;align-items:center}
@media (min-width:900px){.verzeichnis{columns:2}}

.zwei{display:grid;gap:34px}
.zwei>*{min-width:0}
@media (min-width:900px){.zwei{grid-template-columns:1fr 1fr;gap:64px}.zwei.breit-l{grid-template-columns:1.25fr .75fr}}
.foto-r{position:relative}
.foto-r img{width:100%}
.foto-r figcaption{font-size:15px;color:var(--grau);padding-top:8px}
.foto-dreieck{clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%)}
.link-pfeil{display:inline-flex;align-items:center;gap:10px;font-weight:700;min-height:44px;text-decoration:none;border-bottom:2px solid var(--rot);color:var(--rot-d)}
.dunkel .link-pfeil{color:#fff}
.link-pfeil::after{content:"";border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid currentColor}
.text h3{margin-top:1.1em}
.text ul{padding-left:22px}
.text li{margin:5px 0}

/* Rechtsseiten */
.recht h2{font-size:32px;font-stretch:80%;margin-top:1.4em}
.recht h2:first-child{margin-top:0}
.hh-karte{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:#fff;background:var(--tinte);padding:22px;border-top:6px solid var(--rot);box-shadow:0 10px 22px rgba(0,0,0,.08);margin-top:30px}
.digital-marke{display:inline-flex;align-items:flex-end;gap:6px}
.digital-marke img:first-child{height:34px;width:auto}
.digital-marke img:last-child{height:44px;width:auto}
.digital-text{font-size:16.5px;line-height:1.45}
.digital-text small{display:block;font-family:var(--titel);font-stretch:90%;font-weight:800;font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:2px}

/* Barrierefreiheit: Schalter als Wimpel */
.schalter{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
.schalter button{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;width:100%;text-align:left;background:#fff;border:2px solid var(--tinte);padding:16px 18px;cursor:pointer;min-height:80px;color:var(--tinte)}
.schalter b{display:block;font-family:var(--titel);font-stretch:78%;font-weight:850;font-size:24px}
.schalter small{display:block;color:var(--grau);font-size:15.5px}
.schalter .flagge{width:84px;height:44px;position:relative;background:var(--leinen-d);clip-path:polygon(0 0,100% 0,calc(100% - 14px) 50%,100% 100%,0 100%);font-family:var(--titel);font-weight:850;font-stretch:85%;font-size:15px;display:grid;place-items:center;padding-right:12px}
.schalter button[aria-pressed=true] .flagge{background:var(--rot);color:#fff}

/* ---------- Fuss ---------- */
.fuss{background:var(--tinte);color:#ece4de;padding:0 0 30px;position:relative}
.fuss .girlande{margin:0 0 30px}
.fuss-in{display:grid;gap:28px}
.fuss-a img{width:74px}
.fuss-s{font-family:var(--titel);font-stretch:62%;font-weight:900;font-size:46px;line-height:.9;color:#fff;margin:14px 0 10px}
.fuss p{font-size:16.5px;line-height:1.5}
.fuss h2{font-size:14px;font-stretch:100%;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.fuss a{color:#fff}
.fuss nav{display:grid;gap:2px}
.fuss nav a{min-height:40px;display:inline-flex;align-items:center;font-size:16.5px;text-decoration:none}
.fuss nav a:hover{text-decoration:underline}
.fuss-r{display:flex;flex-wrap:wrap;gap:4px 20px;border-top:1px solid rgba(255,255,255,.18);padding-top:16px;margin-top:6px;font-size:15.5px}
.fuss-r a{min-height:44px;display:inline-flex;align-items:center}
@media (max-width:899px){.fuss-in{grid-template-columns:1fr 1fr}.fuss-a,.fuss-in>div:nth-child(2){grid-column:1/-1}}
@media (min-width:900px){.fuss-in{grid-template-columns:1.3fr 1fr 1fr 1fr}}

/* Herzhaus-Band */
.hh-band{background:#0b0b0c;text-align:center;padding:12px 16px}
.hh-band a{display:inline-flex;align-items:baseline;gap:12px;color:#fff;text-decoration:none;min-height:44px;flex-wrap:wrap;justify-content:center}
.hh-satz{font-size:14.5px;letter-spacing:.02em;opacity:.92}
.hh-marke{display:inline-flex;align-items:flex-end;gap:5px;position:relative;top:calc(26px * 480 / 2050)}
.hh-wort{height:26px;width:auto}
.hh-figur{height:34px;width:auto;transform-origin:50% 100%;animation:hh-wipp 4.2s ease-in-out infinite,hh-hupf 7s ease-in-out infinite}
@keyframes hh-wipp{0%,100%{rotate:-3deg}50%{rotate:3deg}}
@keyframes hh-hupf{0%,86%,100%{translate:0 0}90%{translate:0 -6px}}
@media (min-width:900px){.hh-figur{height:30px}}

/* Leiste (Handy) */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:80;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(28,23,21,.96);transform:translateY(110%);transition:transform .35s}
.leiste.da{transform:none}
.leiste .wb{min-height:50px;font-size:15.5px;padding:10px 28px 10px 14px}
@media (min-width:900px){.leiste{display:none}}
@media (max-width:379px){.menue-k>span{display:none}.kopf-r{gap:0}}
@media (max-width:899px){.hh-band{padding-bottom:calc(84px + env(safe-area-inset-bottom))}}

/* Einblenden */
.auf{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.9,.3,1)}
.auf.sichtbar{opacity:1;transform:none}

/* Einstellungen */
html.kontrast{--grau:#3a3330;--grau-h:#4d4542;--leinen:#f1ebe0}
html.kontrast body{color:#000}
html.kontrast .takte span,html.kontrast .hinweis{color:#2a2421}
html.gross body{font-size:21.5px}
html.gross .takte b{font-size:21px}
html.ruhig *,html.ruhig *::before,html.ruhig *::after{animation:none!important;transition:none!important}
html.ruhig .auf{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.auf{opacity:1;transform:none}}

/* 404 */
.fehler{min-height:80vh;display:grid;align-content:center}