:root { color-scheme: light; --ink:#25352d; --green:#385126; --orange:#ff7b00; --paper:#fffdf5; --line:#dedfce; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#f3f3eb; font-family:"Trebuchet MS",Arial,sans-serif; font-size:18px; line-height:1.6; }
a { color:var(--green); text-underline-offset:4px; }
a:hover { text-decoration-thickness:2px; }
a:focus-visible, summary:focus-visible { outline:3px solid #1f3a93; outline-offset:5px; }
img { display:block; max-width:100%; height:auto; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { line-height:1.2; text-wrap:balance; }
h1 { font-size:clamp(2rem,3.6vw,3.2rem); }
h2 { font-size:1.7rem; }
h3 { font-size:1.3rem; }
p { margin-top:1rem; }
.site-header { background:#333; border-bottom:5px solid var(--orange); padding:24px; }
.logo { display:block; max-width:620px; margin:0 auto 20px; }
nav ul { list-style:none; padding:0; margin:0; }
.desktop-nav { display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:center; }
.site-header nav a { color:#ffb36b; display:block; padding:6px 0; text-decoration:none; }
.site-header a:focus-visible,.site-header summary:focus-visible { outline-color:#fff; }
.mobile-nav { display:none; }
main { max-width:1200px; margin:auto; padding:32px 24px 56px; }
.hero { display:grid; grid-template-columns:1.1fr 1fr; background:#ffe86d; border-radius:16px; overflow:hidden; }
.hero-copy { padding:40px; align-self:center; }
.eyebrow { margin:0 0 18px; font-size:.85rem; font-weight:bold; letter-spacing:.04em; }
.hero>img { width:100%; height:auto; align-self:center; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:10px 16px; border:2px solid var(--green); border-radius:8px; background:var(--green); color:white; font-weight:bold; text-decoration:none; }
.button.secondary { color:var(--ink); background:transparent; }
.button:hover { background:#253b19; color:white; }
.training-section { padding:36px 0; scroll-margin-top:20px; }
.training-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:24px 0; }
.training-grid article { display:flex; flex-direction:column; padding:24px; background:var(--paper); border:1px solid var(--line); border-top:4px solid var(--orange); border-radius:10px; }
.subtitle { font-weight:bold; color:var(--green); font-size:1rem; }
.text-link { display:inline-block; font-weight:bold; padding:8px 0; }
.training-grid .text-link { margin-top:auto; padding-top:20px; }
.training-note { margin-bottom:8px; }
.topics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.topic { background:var(--paper); border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.topic>img { width:100%; height:220px; object-fit:cover; }
#tve>img, #berichte>img { object-fit:contain; padding:28px; background:#fff; }
.topic-copy { padding:24px; display:flex; flex-direction:column; flex:1; }
.topic-copy .text-link { margin-top:auto; padding-top:20px; }
footer { background:#333; color:#fff; padding:24px; text-align:center; }
footer p { margin:0 0 10px; }
footer ul { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 24px; }
footer a { display:inline-block; padding:8px 0; color:#ffb36b; }
.skip-link { position:absolute; left:16px; top:12px; padding:12px; background:white; z-index:10; transform:translateY(-200%); }
.skip-link:focus { transform:translateY(0); }
@media(max-width:900px) { .hero { grid-template-columns:1fr; }  .training-grid { grid-template-columns:1fr; } .training-grid article { padding:24px; } }
@media(max-width:640px) { body { font-size:17px; } main { padding:20px 16px 36px; } .site-header { padding:18px 20px; } .logo { margin-bottom:14px; } .desktop-nav { display:none; } .mobile-nav { display:block; color:#ffb36b; } summary { cursor:pointer; padding:10px 0; font-weight:bold; } .mobile-nav a { padding:10px 0; } .hero-copy { padding:26px 22px; }  .topics { grid-template-columns:1fr; } .topic>img { height:200px; } .actions { flex-direction:column; } h2 { font-size:1.5rem; } }
@media(prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }

/* Gruppenfoto vollständig und im ursprünglichen Seitenverhältnis anzeigen. */
#verein>img { width:100%; height:auto; }


.hero-copy { container-type:inline-size; }
.hero-tagline { display:block; margin-top:24px; font-size:clamp(1rem, 7cqi, 2rem); white-space:nowrap; }