/* Template TSV Reiterswiesen 2026 – Konzept „Zurück zur Gemeinschaft“ (aus entwurf/index.html übernommen) */
/* Schriften: Barlow (Text) und Barlow Condensed (Überschriften), lokal in fonts/, Lizenz SIL OFL (fonts/OFL-Barlow.txt), Quelle Fontsource 5.3.0 */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/barlow-condensed-latin-800-normal.woff2) format("woff2")}

:root{
  --rot:#b3121b; --rot-dunkel:#8a0d14; --tinte:#1d1a17; --grau:#5c554e;
  --papier:#f7f3ec; --karte:#fffdf9; --linie:#e4ddd1; --gruen:#2f6b3a;
  --schrift:"Barlow","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --titel:"Barlow Condensed","Arial Narrow","Segoe UI",system-ui,sans-serif;
  --breite:1180px;
}
*{box-sizing:border-box}
html{color-scheme:light;scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--tinte);font:17px/1.6 var(--schrift);overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
[id]{scroll-margin-top:80px}
.huelle{width:min(var(--breite),100% - 32px);margin-inline:auto}
h1,h2,h3{line-height:1.05;margin:0;letter-spacing:0;font-family:var(--titel);font-weight:800}
h2{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:850}
.dachzeile{display:block;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rot);margin-bottom:.6rem}
.knopf{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.3rem;border-radius:999px;font-weight:700;text-decoration:none;transition:transform .15s ease,background .15s ease}
.knopf:active{transform:scale(.97)}
.knopf-rot{background:var(--rot);color:#fff}
.knopf-rot:hover{background:var(--rot-dunkel)}
.knopf-hell{background:#fff;color:var(--tinte)}
.knopf-rand{border:2px solid currentColor}
:focus-visible{outline:3px solid var(--tinte);outline-offset:3px}

/* Kopf */
.kopf{position:sticky;top:0;z-index:20;background:rgba(255,253,249,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
.kopf .huelle{display:flex;align-items:center;gap:1.5rem;min-height:72px}
.marke{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-weight:800;line-height:1.1}
.marke img{width:52px;height:auto}
.marke small{display:block;font-weight:500;color:var(--grau);font-size:.78rem}
.hauptnav{display:flex;align-items:center;margin-left:auto;font-weight:600;font-size:.95rem}
.hauptnav ul{display:flex;gap:1.3rem;list-style:none;margin:0;padding:0}
.hauptnav ul a{text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent}
.hauptnav ul a:hover,.hauptnav li.active>a{border-color:var(--rot)}
.nav-mitglied{display:none}
.kopf .knopf{padding:.6rem 1.1rem;font-size:.92rem}
.menue-knopf{display:none}

/* Bühne */
.buehne{position:relative;color:#fff;background:#2a1d17;min-height:min(82vh,720px);display:flex;align-items:flex-end;overflow:hidden}
.buehne img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%}
.buehne::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,10,8,.72) 0,rgba(20,10,8,.35) 55%,rgba(20,10,8,0) 85%),linear-gradient(180deg,rgba(20,10,8,0) 30%,rgba(20,10,8,.7) 100%)}
.buehne h1,.buehne p{text-shadow:0 2px 18px rgba(0,0,0,.35)}
.buehne .huelle{position:relative;z-index:1;padding:0 0 3.5rem}
.buehne h1{font-size:clamp(2.6rem,7.5vw,5.6rem);font-weight:900;max-width:12ch;text-wrap:balance}
.buehne p{font-size:clamp(1.05rem,1.8vw,1.3rem);max-width:40ch;margin:1rem 0 1.6rem;opacity:.95}
.buehne .knoepfe{display:flex;flex-wrap:wrap;gap:.75rem}
.bildzeile{position:absolute;right:16px;bottom:16px;z-index:1;font-size:.85rem;font-weight:600;text-decoration:none;background:rgba(20,10,8,.6);padding:.35rem .7rem;border-radius:4px}
.bildzeile:hover{background:rgba(20,10,8,.85)}
.seit{position:absolute;right:16px;top:20px;z-index:1;font-weight:800;font-size:.8rem;letter-spacing:.18em;background:var(--rot);padding:.4rem .8rem;border-radius:4px}

/* Woche */
.woche{background:var(--tinte);color:#fff;padding:3.5rem 0}
.woche-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1.8rem}
.woche-kopf p{margin:0;color:#cfc7bc;max-width:42ch}
.woche .dachzeile{color:#ff8a80}
.tage{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.tag{background:#2b2723;border-radius:10px;padding:1rem}
.tag h3{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#ff8a80;margin-bottom:.7rem}
.tag ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.tag li{line-height:1.3}
.tag time{display:block;font-weight:800;font-variant-numeric:tabular-nums}
.tag span{color:#cfc7bc;font-size:.88rem}
.woche-fuss{margin-top:1.2rem;font-size:.92rem;color:#cfc7bc}
.woche-fuss a{color:#fff}

/* Abschnitte */
.abschnitt{padding:5rem 0}
.abschnitt-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:2rem}
.abschnitt-kopf p{margin:0;color:var(--grau);max-width:46ch}

/* Herzstücke */
.herz{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.herzkarte{background:var(--karte);border-radius:16px;overflow:hidden;border:1px solid var(--linie);display:flex;flex-direction:column}
.herzkarte img{aspect-ratio:16/10;object-fit:cover;width:100%}
.herzkarte .inhalt{padding:1.6rem;display:flex;flex-direction:column;gap:.8rem;flex:1}
.herzkarte h3{font-size:1.8rem;font-weight:850}
.herzkarte p{margin:0;color:var(--grau)}
.fakten{display:flex;flex-wrap:wrap;gap:.5rem;margin:.2rem 0}
.fakten li{list-style:none;background:var(--papier);border-radius:999px;padding:.3rem .8rem;font-size:.88rem;font-weight:600}
.fakten{padding:0}
.herzkarte .verweise{margin-top:auto;display:flex;flex-wrap:wrap;gap:1rem;font-weight:700}
.herzkarte .verweise a{color:var(--rot);text-decoration:none}
.herzkarte .verweise a:hover{text-decoration:underline}
.namensidee{border-left:3px solid #f2b705;background:#fff8e1;padding:.6rem .9rem;font-size:.9rem;border-radius:0 8px 8px 0}

/* Vereinsleben */
.leben{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.beitrag{background:var(--karte);border:1px solid var(--linie);border-radius:16px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
a.beitrag:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(40,20,10,.12)}
.beitrag img{width:100%;aspect-ratio:4/3;object-fit:cover}
.beitrag .inhalt{padding:1.2rem 1.4rem 1.4rem}
.beitrag time{font-size:.82rem;color:var(--grau);font-weight:600}
.beitrag h3{font-size:1.25rem;font-weight:800;margin:.3rem 0 .4rem}
.beitrag p{margin:0;color:var(--grau);font-size:.95rem}
.beitrag.aufruf{background:#fff8e1;border:2px dashed #e0b13a;justify-content:center}
.beitrag.aufruf .inhalt{padding:1.8rem;display:flex;flex-direction:column;gap:.4rem;align-items:flex-start}
.beitrag.aufruf h3{font-size:1.5rem}
.beitrag.aufruf .knopf{margin-top:.8rem}

/* Mitmachen */
.mitmachen{background:var(--rot);color:#fff}
.mitmachen .dachzeile{color:#ffd2cc}
.mitmachen .abschnitt-kopf p{color:#ffe3df}
.wege{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.weg{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:1.4rem;display:flex;flex-direction:column;gap:.6rem}
.weg b{font-size:2rem;line-height:1}
.weg h3{font-size:1.3rem;font-weight:850}
.weg p{margin:0;color:#ffe3df;font-size:.95rem;flex:1}
.weg a{color:#fff;font-weight:700}

/* Gesicht */
.gesicht{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:center}
.gesicht img{border-radius:16px;aspect-ratio:4/5;object-fit:cover;width:100%}
.gesicht blockquote{margin:1rem 0;font-size:clamp(1.3rem,2.4vw,1.8rem);font-weight:700;line-height:1.3;text-wrap:balance}
.gesicht p{color:var(--grau)}
/* „Unser Sportangebot“: alle Sportarten nach Zielgruppen */
.angebot{background:#fff;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.angebot-gruppen{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.angebot-gruppe{background:var(--papier);border:1px solid var(--linie);border-radius:16px;padding:1.4rem 1.4rem .8rem}
.angebot-gruppe h3{font-size:1.35rem;font-weight:850;margin:0 0 .6rem;padding-bottom:.6rem;border-bottom:3px solid var(--rot)}
.angebot-gruppe ul{list-style:none;margin:0;padding:0}
.angebot-gruppe li+li{border-top:1px solid var(--linie)}
.angebot-gruppe a{display:block;padding:.7rem 1.6rem .7rem 0;text-decoration:none;color:var(--tinte);position:relative;min-height:44px}
.angebot-gruppe a::after{content:"→";position:absolute;right:0;top:50%;transform:translateY(-50%);color:var(--rot);font-weight:700;transition:transform .15s ease}
.angebot-gruppe a:hover b{color:var(--rot)}
.angebot-gruppe a:hover::after{transform:translate(4px,-50%)}
.angebot-gruppe b{display:block;font-weight:700}
.angebot-gruppe span{display:block;font-size:.9rem;color:var(--grau);line-height:1.4}
@media (max-width:760px){
  .angebot-gruppen{grid-template-columns:1fr;gap:14px}
  .angebot-gruppe{padding:1.1rem 1.1rem .6rem}
  /* am Handy kompakt: zwei Spalten, nur der Name */
  .angebot-gruppe ul{display:grid;grid-template-columns:1fr 1fr;column-gap:12px}
  .angebot-gruppe li+li{border-top:0}
  .angebot-gruppe li{border-bottom:1px solid var(--linie)}
  .angebot-gruppe span{display:none}
  .angebot-gruppe a{padding:.6rem 1.2rem .6rem 0;display:flex;align-items:center;line-height:1.3}
}
/* „Gesichter des Vereins“ im Vereinsgrün: Abwechslung zwischen den hellen Abschnitten */
.gesicht-band{background:#26532f;color:#fff}
.gesicht-band .dachzeile{color:#f2b705}
.gesicht-band .gesicht p{color:#d6e4d8}
.gesicht-band .knopf-rand{color:#fff}
.gesicht-band .knopf-rand:hover{background:#fff;color:#26532f}
.gesicht-band :focus-visible{outline-color:#f2b705}

/* Orte */
.orte{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:stretch}
.orte figure{margin:0;border-radius:16px;overflow:hidden}
.orte figure img{width:100%;height:100%;object-fit:cover}
.ortliste{display:grid;gap:16px}
.ort{background:var(--karte);border:1px solid var(--linie);border-radius:14px;padding:1.2rem 1.4rem}
.ort h3{font-size:1.15rem;font-weight:800;margin-bottom:.3rem}
.ort p{margin:0;color:var(--grau);font-size:.95rem}

/* Sponsoren */
/* Unterstützer als kompakte Logowand: gleich große Felder ohne Rahmen (Wunsch des Vereins), am Handy drei nebeneinander */
.sponsoren{background:#fff;border-top:1px solid var(--linie);padding:3.2rem 0 3rem;position:relative}
.sponsoren::before{content:"";position:absolute;left:50%;top:0;width:min(240px,40%);height:4px;transform:translateX(-50%);background:var(--rot);border-radius:0 0 4px 4px}
.sponsoren-kopf{text-align:center;max-width:44rem;margin:0 auto 1.8rem}
.sponsoren-kopf h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:850;text-wrap:balance}
.sponsoren-kopf p{margin:.5rem 0 0;color:var(--grau)}
/* fünf je Reihe, letzte Reihe zentriert; am Handy drei je Reihe */
.logos{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;list-style:none;margin:0 auto;padding:0;max-width:980px}
.logos li{flex:0 0 calc((100% - 40px) / 5);display:flex;background:#fff}
.logos a,.logos li>img{display:flex;align-items:center;justify-content:center;width:100%;padding:.7rem .9rem;min-height:96px}
.logos img{width:100%;max-height:64px;object-fit:contain}
.logos a img{padding:0}
.sponsoren-fuss{text-align:center;margin:1.6rem 0 0;color:var(--grau);font-size:.95rem}
.sponsoren-fuss a{color:var(--rot);font-weight:700}
@media (max-width:760px){
  .sponsoren{padding:2.4rem 0 2.2rem}
  .sponsoren-kopf{margin-bottom:1.3rem}
  .sponsoren-kopf p{font-size:.95rem}
  .logos{gap:8px}
  .logos li{flex-basis:calc((100% - 16px) / 3)}
  .logos a,.logos li>img{min-height:68px;padding:.5rem .55rem}
  .logos img{max-height:44px}
}

/* Fuß */
.fuss{background:var(--tinte);color:#cfc7bc;padding:3.5rem 0 2rem;font-size:.95rem}
.fuss-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.fuss h2{color:#fff;font-size:1rem;margin-bottom:.7rem}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.fuss a{text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss .marke{color:#fff;margin-bottom:.8rem}
.fuss .marke img{width:44px}
.fuss-unten{border-top:1px solid #3a342f;margin-top:2.5rem;padding-top:1.2rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.85rem}

@media (max-width:1000px){
  .kopf .huelle{flex-wrap:wrap}
  .menue-knopf{display:inline-flex;margin-left:auto;background:none;border:2px solid var(--tinte);border-radius:999px;padding:.5rem .9rem;font:inherit;font-weight:700;color:var(--tinte);cursor:pointer}
  .kopf-mitglied{display:none}
  .hauptnav{display:none;order:3;width:100%;flex-direction:column;align-items:stretch;margin:0;padding:.5rem 0 1.2rem}
  .kopf.offen .hauptnav{display:flex}
  .hauptnav ul{flex-direction:column;gap:0}
  .hauptnav ul a{display:block;padding:.8rem 0;border-bottom:1px solid var(--linie);font-size:1.05rem}
  .nav-mitglied{display:inline-flex;justify-content:center;margin-top:1rem}
  .tage{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .wege{grid-template-columns:1fr 1fr}
  .leben{grid-template-columns:1fr 1fr}
  .fuss-raster{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  .abschnitt{padding:3.5rem 0}
  .herz,.leben,.gesicht,.orte{grid-template-columns:1fr}
  .gesicht{gap:1.5rem}
  .gesicht img{aspect-ratio:4/3}
  .wege{grid-template-columns:1fr}
  .buehne{min-height:620px}
  .buehne .knopf{flex:1 1 100%;justify-content:center}
  .seit{top:14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---- Joomla: Startseiten-Module, Unterseiten, Beitragstexte ---- */
.mehr{color:var(--rot);font-weight:700;text-decoration:none}
.mehr:hover{text-decoration:underline}
.namensidee{color:var(--tinte)}

.seite{padding:3rem 0 4.5rem}
.blog h1{font-size:clamp(2.2rem,5vw,3.2rem);font-weight:900}
.blog .abschnitt-kopf p a{color:var(--rot);font-weight:700}
.leben .beitrag h2{font-size:1.25rem;font-weight:800;margin:.3rem 0 .4rem;line-height:1.15}
.seiten{margin-top:2.5rem}
.seiten ul{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0;justify-content:center}
.seiten a,.seiten span{display:inline-flex;min-width:2.6rem;justify-content:center;padding:.5rem .8rem;border-radius:999px;border:1px solid var(--linie);background:var(--karte);text-decoration:none;font-weight:600}
.seiten .active a,.seiten .active span,.seiten [aria-current] {background:var(--rot);border-color:var(--rot);color:#fff}
.seiten .disabled{opacity:.45}
.artikel{max-width:820px;margin:0 auto}
.artikel h1{font-size:clamp(2rem,5vw,3.1rem);font-weight:900;margin:.2rem 0 1.4rem;text-wrap:balance}
.zurueck{display:inline-block;color:var(--rot);font-weight:700;text-decoration:none;margin-bottom:1rem}
.datum{display:block;color:var(--grau);font-weight:600;font-size:.9rem}
.titelbild{margin:0 0 1.8rem}
.titelbild img{width:100%;border-radius:16px}
.text{font-size:1.05rem;overflow-wrap:anywhere}
.text::after{content:"";display:table;clear:both}
.text h1,.text h2,.text h3,.text h4,.text h5{margin:2rem 0 .7rem;font-weight:800;line-height:1.2;text-transform:none}
.text h1,.text h2{font-size:1.6rem}
.text h3{font-size:1.3rem}
.text h4,.text h5{font-size:1.1rem}
.text p,.text ul,.text ol,.text table{margin:0 0 1.1rem}
.text ul,.text ol{padding-left:1.3rem}
.text a{color:var(--rot);font-weight:600}
.text img{height:auto;border-radius:10px}
.text img[style*="float: left"],.text img[style*="float:left"]{margin:0 1.2rem 1rem 0}
.text img[style*="float: right"],.text img[style*="float:right"]{margin:0 0 1rem 1.2rem}
.text table{border-collapse:collapse;width:100%;display:block;overflow-x:auto}
.text td,.text th{padding:.5rem .7rem;border-bottom:1px solid var(--linie);text-align:left;vertical-align:top}
.text iframe,.text video{max-width:100%}
.text hr{border:0;border-top:1px solid var(--linie);margin:2rem 0}
.text .galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin:1.5rem 0}
.text .galerie img{width:100%;height:150px;object-fit:cover;border-radius:8px}
.text [id^="bfv"]{max-width:100%;overflow-x:auto}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:600px){
  .text img[style*="float"]{float:none!important;margin:0 0 1rem!important;width:100%!important}
}
.leben .beitrag img{object-position:50% 25%}

/* ---- Formular „Fotos schicken“ (Plugin tsveinsendung) ---- */
.einsendung{display:grid;gap:1.6rem;margin-top:1.5rem}
.einsendung fieldset{border:1px solid var(--linie);background:var(--karte);border-radius:16px;padding:1.4rem 1.4rem 1.6rem;margin:0;display:grid;gap:1rem;min-width:0}
.einsendung legend{font-weight:850;font-size:1.25rem;padding:0 .4rem;display:flex;align-items:center;gap:.6rem}
.einsendung legend span{display:inline-grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--rot);color:#fff;font-size:.95rem}
.einsendung label{display:grid;gap:.35rem;font-weight:700}
.einsendung label small{font-weight:500;color:var(--grau)}
.einsendung input[type=text],.einsendung input[type=date],.einsendung select,.einsendung textarea{font:inherit;font-weight:400;width:100%;padding:.75rem .9rem;border:1.5px solid #cfc6b8;border-radius:10px;background:#fff;color:var(--tinte)}
.einsendung input:focus,.einsendung select:focus,.einsendung textarea:focus{outline:3px solid var(--tinte);outline-offset:1px;border-color:var(--tinte)}
.einsendung textarea{resize:vertical}
.einsendung .zweispaltig{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.einsendung .fotofeld input{padding:1.2rem;border:2px dashed #cfc6b8;border-radius:12px;background:#fff;font-weight:400}
.einsendung .vorschau{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;list-style:none;margin:0;padding:0}
.einsendung .vorschau img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}
.einsendung .haken{display:flex;align-items:flex-start;gap:.7rem;font-weight:500}
.einsendung .haken input{width:1.3rem;height:1.3rem;margin-top:.15rem;flex:none;accent-color:var(--rot)}
.einsendung .hinweis{margin:0;color:var(--grau);font-size:.92rem}
.einsendung .unsichtbar{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.einsendung button{justify-self:start;font-size:1.05rem;padding:1rem 1.8rem;border:0;cursor:pointer}
.einsendung button:disabled{opacity:.7;cursor:wait}
@media (max-width:640px){.einsendung .zweispaltig{grid-template-columns:1fr}.einsendung button{justify-self:stretch;justify-content:center}}

/* Systemmeldungen (z. B. nach dem Absenden) */
joomla-alert,.alert{display:block;margin:0 0 1.5rem;padding:1rem 1.2rem;border-radius:12px;border:1px solid var(--linie);background:var(--karte)}
joomla-alert[type=success],.alert-success{background:#eaf6ec;border-color:#9fd1a7}
joomla-alert[type=danger],joomla-alert[type=error],.alert-danger,.alert-error{background:#fdeceb;border-color:#f0a8a3}
#system-message-container{max-width:820px;margin:0 auto}
joomla-alert .alert-heading{display:none}
joomla-alert .alert-wrapper,joomla-alert .alert-message{font-size:1rem;line-height:1.5}
.woche-kopf p a{color:#fff;font-weight:700}
.text img[height]:not([data-mass]){max-width:min(100%,560px)}
.text ul.emoji-liste{list-style:none;padding-left:0}
.text ul.emoji-liste li{margin:.25rem 0}
.text .infokasten{background:var(--karte);border:1px solid var(--linie);border-left:4px solid var(--rot);border-radius:12px;padding:1rem 1.2rem;line-height:1.8}
.text .ki-hinweis,.artikel .ki-hinweis{margin-top:2.5rem;padding-top:.9rem;border-top:1px solid var(--linie);font-size:.85rem;color:var(--grau)}

/* ---- Band „Folgt uns“ (Facebook, Instagram) ---- */
.folgen{padding:0 0 5rem}
.folgen-innen{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;background:var(--karte);border:1px solid var(--linie);border-radius:16px;padding:1.8rem 2rem}
.folgen h2{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:850}
.folgen p{margin:.4rem 0 0;color:var(--grau)}
.folgen-knoepfe{display:flex;flex-wrap:wrap;gap:.75rem}
.knopf-sozial{background:var(--tinte);color:#fff}
.knopf-sozial:hover{background:var(--rot)}
.knopf-sozial svg{flex:none}
@media (max-width:640px){.folgen-innen{padding:1.4rem}.folgen-knoepfe,.knopf-sozial{width:100%;justify-content:center}}

.text a.knopf{color:#fff}
.text a.knopf:hover{color:#fff}

/* ---- Vereinswirt Nostos (Startseite) ---- */
.wirt-raster{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;background:var(--karte);border:1px solid var(--linie);border-radius:20px;padding:2rem}
.wirt-bild{margin:0;border-radius:14px;overflow:hidden}
.wirt-bild img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 65%}
.wirt-text h2{margin-bottom:.8rem}
.wirt-text p{color:var(--grau);margin:0 0 1rem}
.wirt-fakten{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.4rem}
.wirt-fakten a{color:var(--rot);font-weight:700}
.wirt-knoepfe{display:flex;flex-wrap:wrap;gap:.75rem}
.wirt-knoepfe .knopf-rand{color:var(--rot)}
.ort p a{color:var(--rot);font-weight:600}
@media (max-width:760px){.wirt-raster{grid-template-columns:1fr;gap:1.5rem;padding:1.2rem}.wirt-knoepfe .knopf{flex:1 1 100%;justify-content:center}}

/* ---- Bereich „Zeiten melden“ (Plugin tsvwochenplan) ---- */
.zugang{max-width:520px}
.zugang input[type=password]{font:inherit;font-weight:400;width:100%;padding:.75rem .9rem;border:1.5px solid #cfc6b8;border-radius:10px;background:#fff}
.zeiten-kopf{background:#eaf6ec;border:1px solid #9fd1a7;border-radius:10px;padding:.6rem 1rem;font-size:.95rem}
.zeiten-kopf a{color:var(--rot);font-weight:700;margin-left:.4rem}
.zeiten-bereich h2{font-size:1.5rem;font-weight:850;margin:2rem 0 1rem}
.plan-liste{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:8px}
.plan-liste li{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:var(--karte);border:1px solid var(--linie);border-radius:12px;padding:.8rem 1rem}
.plan-liste span{color:var(--grau);font-size:.92rem}
.plan-knoepfe{display:flex;gap:.4rem;flex:none}
.plan-knoepfe button{font:inherit;font-size:.88rem;font-weight:700;border:1.5px solid var(--linie);background:#fff;border-radius:99px;padding:.35rem .8rem;cursor:pointer}
.plan-knoepfe button:hover{border-color:var(--rot);color:var(--rot)}
.zeitenform .arten{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem}
.zeitenform input[type=time]{font:inherit;width:100%;padding:.75rem .9rem;border:1.5px solid #cfc6b8;border-radius:10px;background:#fff}
.zeitenform [hidden]{display:none!important}
@media (max-width:640px){.plan-liste li{flex-direction:column;align-items:flex-start}}

/* Fuß: Aufruf „Fotos schicken“ */
.fuss-aufruf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;background:#2b2723;border-radius:14px;padding:1.3rem 1.6rem;margin-bottom:2.5rem}
.fuss-aufruf strong{display:block;color:#fff;font-size:1.2rem;font-weight:850}
.fuss-aufruf span{color:#cfc7bc}
.fuss .fuss-aufruf a.knopf{color:#fff;text-decoration:none}
.fuss .fuss-aufruf a.knopf:hover{color:#fff;text-decoration:none}
@media (max-width:640px){.fuss-aufruf a.knopf{width:100%;justify-content:center}}

/* Impressum: Vorstandsfoto */
.text .vorstand-foto{margin:1rem 0 1.8rem}
.text .vorstand-foto img{width:100%;max-width:100%;border-radius:14px}
.text .vorstand-foto figcaption{margin-top:.5rem;color:var(--grau);font-size:.92rem}
/* Über uns: historische Fotos (Beitrag 8) */
.text .historisch{margin:1.8rem 0 2.2rem}
.text .historisch img{width:100%;border-radius:10px;background:var(--linie)}
.text .historisch.hoch img{width:min(100%,420px)}
.text .historisch.paar{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.text .historisch.paar figcaption{grid-column:1/-1}
.text .historisch figcaption{margin-top:.5rem;color:var(--grau);font-size:.92rem;max-width:60ch}
@media (max-width:600px){.text .historisch.paar{grid-template-columns:1fr}.text .historisch.hoch img{width:100%}}

/* Überschriften-Schrift auch für Logo-Text, Kartentitel, Uhrzeiten, Nummern und Knöpfe */
.marke span,.tag time,.weg b,.beitrag h2,.beitrag h3,.einsendung legend,.fuss-aufruf strong,.fuss h2,.knopf,.hauptnav ul a{font-family:var(--titel)}
.marke span{font-size:1.15rem;font-weight:800;letter-spacing:.01em}
.marke small{font-family:var(--schrift);font-size:.78rem}
.knopf{font-weight:700;font-size:1.05rem;letter-spacing:.02em}
.hauptnav ul a{font-weight:700;font-size:1.08rem;letter-spacing:.02em}
.tag time{font-size:1.1rem}
.text h1,.text h2,.text h3,.text h4,.text h5{font-family:var(--titel);font-weight:800}
/* Barlow Condensed läuft schmaler: große Titel etwas größer */
.buehne h1{font-size:clamp(3rem,8.5vw,6.4rem)}
h2{font-size:clamp(2.1rem,4.4vw,3.1rem)}

/* Bestätigung der Zeiten im Bereich „Zeiten melden“ */
.bestaetiger{display:grid;gap:.35rem;font-weight:700;max-width:420px;margin:0 0 1rem}
.bestaetiger input{font:inherit;font-weight:400;padding:.65rem .9rem;border:1.5px solid #cfc6b8;border-radius:10px;background:#fff}
.plan-status{font-style:normal;font-size:.85rem;font-weight:600}
.plan-status.ok{color:var(--gruen)}
.plan-status.offen{color:var(--grau)}
.plan-status.ueberfaellig{color:var(--rot)}
.plan-knoepfe form{display:inline;margin:0}
.plan-knoepfe button.stimmt{background:var(--gruen);border-color:var(--gruen);color:#fff}
.plan-knoepfe button.stimmt:hover{background:#245430;color:#fff}

/* Persönlicher Link: Kasten mit den eigenen Angeboten */
.leitung-kasten{background:#fff;border:2px solid var(--gruen);border-radius:16px;padding:1.4rem 1.6rem;margin:0 0 1.5rem}
.leitung-kasten h2{margin:0 0 .6rem}
.leitung-kasten ul{list-style:none;padding:0;margin:0 0 1.2rem;display:grid;gap:.4rem}
.leitung-kasten .plan-status{margin-left:.4rem}

/* ---- Startseite nach der Kritik vom 08.11.2026 ---- */
/* Willkommen: ein Hauptknopf, daneben die Kontaktfrage als Text */
.buehne .knoepfe{align-items:center;gap:.75rem 1.25rem}
.buehne-frage{color:#fff;font-size:1rem}
.buehne-frage a{color:#fff;font-weight:700}
/* Wochenplan: heute markiert; am Handy nur die nächsten drei Trainingstage, „Ganze Woche zeigen“ klappt den Rest auf */
.tag.heute{background:#3a332d;box-shadow:inset 0 0 0 2px #ff8a80}
.tag h3 small{margin-left:.4rem;padding:.1rem .45rem;border-radius:999px;background:#ff8a80;color:var(--tinte);font-size:.75rem;letter-spacing:.06em}
.tage-alle{display:none}
@media (max-width:640px){
  .tage.kurz .tag.spaeter{display:none}
  .tage-alle{display:block;width:100%;margin-top:10px;min-height:44px;border:1px solid #5a514a;border-radius:10px;background:transparent;color:#fff;font:700 1rem var(--titel);cursor:pointer}
  .tage-alle:focus-visible{outline:2px solid #ff8a80;outline-offset:2px}
}
/* Was gerade los ist: Social-Links im Kopf statt eigenem Band */
.leben-verweise{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem}
.leben-verweise span{font-size:.92rem}
.leben-verweise span a{color:var(--rot);font-weight:700}
@media (max-width:760px){.leben-verweise{align-items:flex-start}}
/* Am Handy nur die drei neuesten Beiträge, der Rest über „Alle Neuigkeiten“ */
@media (max-width:640px){.leben .beitrag:nth-child(n+4){display:none}}

/* ---- P2 nach der Nachbewertung vom 08.11.2026 ---- */
/* Fotos schicken: Ausweg ohne Code */
.ohne-code{margin:1rem 0 0;color:var(--grau);font-size:.95rem}
.ohne-code a{color:var(--rot);font-weight:700}
/* Abschluss der Startseite nach den Sponsoren */
.abschluss{color:var(--tinte);padding:4.5rem 0;border-top:1px solid var(--linie)}
.abschluss-innen{text-align:center;max-width:44rem}
.abschluss h2{font-size:clamp(2rem,5vw,3.2rem);font-weight:850;text-wrap:balance}
.abschluss p{color:var(--grau);margin:.8rem auto 1.6rem;max-width:36rem}
.abschluss p a{color:var(--rot);font-weight:700}
.abschluss-knoepfe{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem 1.25rem}
.abschluss-knoepfe span{color:var(--grau)}
.abschluss-knoepfe span a{color:var(--rot);font-weight:700}
@media (max-width:640px){.abschluss{padding:3rem 0}.abschluss-knoepfe .knopf{width:100%;justify-content:center}}
/* Eigenständige Links mindestens 44 px hoch zum Antippen */
.weg a,.verweise a,.buehne .bildzeile,.buehne-frage a,.abschluss-knoepfe span a,.leben-verweise a{display:inline-flex;align-items:center;min-height:44px}

/* ---- Audit vom 08.11.2026 ---- */
/* Fokus: dunkel auf hellen Flächen (Kontrast über 3:1), gelb auf dunklen, weiß auf Rot */
.buehne :focus-visible,.woche :focus-visible,.fuss :focus-visible{outline-color:#f2b705}
.mitmachen :focus-visible{outline-color:#fff}
/* „Zum Inhalt springen“: erst sichtbar, wenn er per Tastatur den Fokus bekommt */
.sprung{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--tinte);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 10px 10px;font-weight:700;text-decoration:none}
.sprung:focus{top:0;outline:3px solid #f2b705;outline-offset:0}
/* Alte Beiträge haben feste Bildbreiten im style-Attribut; Bilder nie breiter als die Spalte */
.seite img{max-width:100%!important;height:auto!important}
/* Lesbare Zeilenlänge in Beiträgen */
.artikel p,.artikel li,.artikel h2,.artikel h3{max-width:60ch}
#inhalt:focus{outline:none}

/* ---------- Feste Seiten (Fußball, Ü32, Sportangebot, Über uns …): Seitenkopf, „Auf einen Blick“, Einladung ---------- */
/* Seitenkopf läuft über die ganze Fensterbreite (Schatten + clip-path, ohne waagerechtes Scrollen) */
.seitenkopf{--kopf:var(--tinte);background:var(--kopf);box-shadow:0 0 0 100vmax var(--kopf);clip-path:inset(0 -100vmax);color:#fff;
  margin:-3rem 0 3rem;padding:3.5rem 0 3.2rem;display:grid;gap:2.5rem;align-items:center}
/* mit Bild: Foto oben und unten bündig mit dem Band, ohne Rundung; der Text behält seinen Abstand */
.seitenkopf.mit-bild{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);padding:0;align-items:stretch}
.seitenkopf.mit-bild .seitenkopf-text{padding:3.5rem 0 3.2rem;align-self:center}
.seitenkopf h1{font-size:clamp(2.5rem,6.5vw,4.4rem);font-weight:900;line-height:1;text-wrap:balance;margin:0}
.seitenkopf .einleitung{font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:46ch;margin:1.1rem 0 0;opacity:.92}
.seitenkopf-bild{margin:0}
/* Foto bis an den rechten Fensterrand (Abstand Inhalt → Fensterrand wie bei .huelle); body clippt den Rest der Bildlaufleiste */
.seitenkopf-bild{min-height:320px;margin-right:calc((min(var(--breite), 100vw - 32px) - 100vw) / 2)}
.seite .seitenkopf-bild img{width:100%;height:100%!important;min-height:320px;object-fit:cover;display:block}
.seitenkopf-sprung{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.seitenkopf-sprung a{color:#fff;text-decoration:none;font-weight:700;font-size:.92rem;border:1.5px solid rgba(255,255,255,.45);border-radius:999px;padding:.55rem 1rem;min-height:44px;display:inline-flex;align-items:center}
.seitenkopf-sprung a:hover{background:#fff;color:var(--tinte)}
.seitenkopf-rot{--kopf:var(--rot)}.seitenkopf-rot .dachzeile{color:#ffd2cc}.seitenkopf-rot :focus-visible{outline-color:#fff}
.seitenkopf-gruen{--kopf:#26532f}.seitenkopf-gruen .dachzeile{color:#f2b705}.seitenkopf-gruen :focus-visible{outline-color:#f2b705}
.seitenkopf-dunkel .dachzeile{color:#ff8a80}.seitenkopf-dunkel :focus-visible{outline-color:#f2b705}
.seitenkopf-sand{--kopf:#eadfca;color:var(--tinte)}.seitenkopf-sand .einleitung{opacity:1;color:#4a433c}
.seitenkopf-sand .seitenkopf-bild img{filter:sepia(.25)}
@media (max-width:900px){.seitenkopf{padding:2.4rem 0 2.2rem;margin-bottom:2rem;gap:1.6rem}.seitenkopf.mit-bild{grid-template-columns:1fr;gap:0}
  .seitenkopf.mit-bild .seitenkopf-text{padding:2.4rem 0 1.8rem}.seitenkopf-bild{min-height:0;margin-inline:calc((min(var(--breite), 100vw - 32px) - 100vw) / 2)}
  .seite .seitenkopf-bild img{height:auto!important;min-height:0;aspect-ratio:16/9}}

/* „Auf einen Blick“ (Fußball, Ü32): rechts neben dem Text, am Handy darüber */
.artikel.mit-info{max-width:1180px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:3.5rem;align-items:start}
.artikel.mit-info .text{grid-column:1;grid-row:1}
.auf-einen-blick{grid-column:2;grid-row:1;position:sticky;top:96px;background:var(--karte);border:1px solid var(--linie);border-radius:16px;padding:1.3rem 1.4rem}
.seite-ah-abteilung .auf-einen-blick h2{border-bottom-color:#26532f}
.auf-einen-blick h2{font-size:1.5rem;margin:0 0 .4rem;padding-bottom:.5rem;border-bottom:3px solid var(--rot)}
.auf-einen-blick h3{font-size:.78rem;font-family:var(--schrift);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grau);margin:1.1rem 0 .35rem}
.auf-einen-blick p{margin:0;font-size:.95rem}
.auf-einen-blick ul{list-style:none;margin:0;padding:0}
.auf-einen-blick li{padding:.35rem 0;font-size:.95rem;line-height:1.4}
.auf-einen-blick li+li{border-top:1px solid var(--linie)}
.auf-einen-blick li b{display:block}
.auf-einen-blick li span{color:var(--grau)}
.blick-kontakte a{display:block;color:var(--rot);font-weight:700;text-decoration:none}
.blick-link{margin-top:1.1rem!important}
.blick-link a{color:var(--rot);font-weight:700;text-decoration:none}
@media (max-width:900px){.artikel.mit-info{grid-template-columns:1fr;gap:2rem}.auf-einen-blick{grid-column:1;grid-row:1;position:static}.artikel.mit-info .text{grid-row:2}}

/* Einladung am Ende fester Seiten */
.einladung{max-width:1180px;margin:4rem auto 0;background:var(--tinte);color:#fff;border-radius:20px;padding:2.2rem 2.4rem;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center}
.einladung .dachzeile{color:#ff8a80}
.einladung h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin:0}
.einladung p{margin:.7rem 0 0;color:#cfc7bc;max-width:52ch}
.einladung-knoepfe{display:flex;flex-wrap:wrap;gap:.7rem}
.einladung .knopf-rand{color:#fff}
.einladung .knopf-rand:hover{background:#fff;color:var(--tinte)}
.einladung :focus-visible{outline-color:#f2b705}
@media (max-width:760px){.einladung{grid-template-columns:1fr;padding:1.8rem 1.4rem}.einladung-knoepfe .knopf{flex:1 1 100%;justify-content:center}}

/* Sportangebot als Karten */
.artikel.seite-weitere-sportarten{max-width:1180px}
.artikel.seite-weitere-sportarten .text h2{font-size:clamp(1.7rem,3vw,2.2rem);margin:3rem 0 1.2rem;display:flex;align-items:center;gap:.8rem;max-width:none}
.seite-weitere-sportarten .text h2::after{content:"";flex:1;height:3px;background:var(--rot);border-radius:2px;max-width:none}
.seite-weitere-sportarten .text > h2:first-child{margin-top:0}
.angebot-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.angebot-karte{background:var(--karte);border:1px solid var(--linie);border-radius:16px;padding:1.3rem 1.4rem 1.1rem;display:flex;flex-direction:column}
.text .angebot-karte h3{margin:0;font-size:1.45rem}
.text .angebot-karte .fuer{color:var(--rot);font-weight:700;font-size:.92rem;margin:.25rem 0 .9rem}
.angebot-karte dl{display:grid;grid-template-columns:max-content 1fr;gap:.35rem .9rem;margin:0 0 .9rem;font-size:.95rem;padding:.8rem 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.angebot-karte dt{color:var(--grau);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;padding-top:.15rem}
.angebot-karte dd{margin:0}
.angebot-karte dd a{white-space:nowrap}
.text .angebot-karte p{font-size:.95rem;margin:0 0 .5rem}
.text .angebot-hinweis{margin:1.2rem 0 0;color:var(--grau);font-size:.95rem}
@media (max-width:760px){.angebot-karten{grid-template-columns:1fr}}

/* Footer am Handy: alles zentriert untereinander, Links als umbrechende Zeilen (Desktop unverändert) */
@media (max-width:760px){
  .fuss-raster{grid-template-columns:1fr;gap:1.4rem;text-align:center}
  .fuss .marke{flex-direction:column;justify-content:center;gap:.5rem;margin-bottom:.4rem}
  .fuss .marke img{width:52px}
  .fuss .marke span{font-size:1.25rem}
  .fuss-raster p{margin:0}
  .fuss h2{margin-bottom:.3rem}
  .fuss ul{display:flex;flex-wrap:wrap;justify-content:center;gap:0 1.2rem}
  .fuss ul a{display:inline-flex;align-items:center;min-height:44px}
  .fuss-unten{flex-direction:column;align-items:center;text-align:center;gap:.4rem;margin-top:1.6rem}
  .fuss-copy span{display:block}
  .fuss-copy .fuss-trenner{display:none}
  .fuss-recht a{display:inline-flex;align-items:center;min-height:44px}
}
.fuss-design,.fuss-design a{color:#fff;font-weight:700}
/* Abschnittsköpfe der Startseite: Einleitung bzw. Verweise direkt unter der Überschrift statt rechts daneben */
.abschnitt-kopf,.woche-kopf{flex-direction:column;align-items:flex-start;gap:.9rem}
.abschnitt-kopf p,.woche-kopf p{max-width:60ch}
.leben-verweise{align-items:flex-start}

/* ---------- Scrolleffekte (nur mit JS, Klasse html.bewegung; bei „Bewegung reduzieren“ nur sanftes Einblenden) ---------- */
:root{--ease-out:cubic-bezier(0.23,1,0.32,1)}
/* Einblenden beim Hereinscrollen, einmalig; Verzögerung für Staffelung setzt das Skript */
html.bewegung .einblenden{opacity:0;transform:translateY(48px) scale(.97);transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-out)}
html.bewegung .einblenden.sichtbar{opacity:1;transform:none}
/* Kopfzeile bekommt beim Scrollen einen Schatten */
.kopf{transition:box-shadow 200ms ease}
.kopf.gescrollt{box-shadow:0 6px 22px rgba(29,26,23,.09)}
/* Tiefenwirkung: Fotos wandern beim Herausscrollen langsamer als die Seite (läuft im Browser, ohne JS; nur wo unterstützt) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    /* Bild bleibt beim Scrollen zurück (wandert nach unten), Bühnentext gleitet nach oben weg; Strecke = erste 700 px */
    .buehne img,.seitenkopf-bild img{animation:tiefe linear both;animation-timeline:scroll(root);animation-range:0 700px}
    @keyframes tiefe{from{transform:translateY(0) scale(1.08)}to{transform:translateY(30%) scale(1.08)}}
    .buehne .huelle,.seitenkopf-text{animation:wegtext linear both;animation-timeline:scroll(root);animation-range:0 600px}
    @keyframes wegtext{to{transform:translateY(-70px);opacity:.15}}
    .seitenkopf-bild{overflow:hidden}
  }
}
@media (prefers-reduced-motion:reduce){
  html.bewegung .einblenden{transform:none}
}
/* Startseite: Vereinsname und Ort als kleine Zeile in der H1 (für Suchmaschinen und Leser) */
.buehne h1 .h1-verein{display:block;width:min(36rem,calc(100vw - 32px));font:700 .82rem/1.4 var(--schrift);letter-spacing:.14em;text-transform:uppercase;color:#ffd2cc;margin-bottom:.9rem}