:root {
  color-scheme: light;
  --navy:#112b43; --blue:#195174; --red:#be2a38; --paper:#fff;
  --line:#d5e0e7; --muted:#4b6271; --wash:#f3f7fa;
  --soft-shadow:0 8px 28px #112b430c;
  color:#183040; background:var(--wash);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}
* { box-sizing:border-box }
body { margin:0; line-height:1.65; font-size:clamp(1rem,.96rem + .16vw,1.125rem) }
a { color:#144e78; text-underline-offset:.18em }
a:focus-visible,summary:focus-visible { outline:3px solid #b83722; outline-offset:4px }
.wrap { width:min(72rem,calc(100% - clamp(1.5rem,6vw,5rem))); margin-inline:auto }
.skip { position:absolute; left:1rem; top:-8rem; padding:.6rem 1rem; background:white; z-index:4 }
.skip:focus { top:.5rem }
header { background:var(--paper); border-top:3px solid var(--navy); border-bottom:1px solid var(--line) }
.identity { display:flex; align-items:center; gap:clamp(.6rem,2vw,1.25rem); min-height:5rem; padding-block:.4rem }
.mark { display:block; flex:none; line-height:0 }
.mark img { display:block; width:clamp(5.1rem,13vw,7.2rem); height:auto }
.club { min-width:0; color:var(--navy); font-size:clamp(1rem,.85rem + 1vw,1.65rem); font-weight:760; line-height:1.25; text-decoration:none }
nav { display:flex; gap:.2rem clamp(.25rem,1vw,.8rem); align-items:flex-start; flex-wrap:wrap; padding-block:.45rem .65rem; border-top:1px solid var(--line) }
nav > a,nav summary { color:var(--navy); font-weight:680; cursor:pointer; padding:.45rem .72rem; border-radius:.7rem }
nav > a { text-decoration:none }
nav summary { display:flex; align-items:center; gap:.52rem; list-style:none }
nav summary::-webkit-details-marker { display:none }
nav summary::after { content:""; width:.38rem; height:.38rem; margin-top:-.14rem; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:rotate(45deg) }
nav details[open] summary::after { margin-top:.14rem; transform:rotate(225deg) }
nav > a:hover,nav summary:hover,nav details[open] summary,nav [aria-current="page"] { background:#e9f1f7 }
nav details { position:relative }
nav ul { position:absolute; z-index:2; width:max-content; min-width:14rem; max-width:min(22rem,85vw); margin:.35rem 0 0; padding:.45rem; background:white; border:1px solid var(--line); border-radius:.65rem; list-style:none; box-shadow:0 12px 32px #112b4324 }
nav ul a { display:block; padding:.45rem .65rem; border-radius:.35rem }
nav ul a:hover { background:var(--wash) }
.banner {
  background:linear-gradient(94deg,#0b2439d9 0%,#10253985 51%,#10253914 100%),url("/bilder/vereinsbanner.jpg") center / cover #102539;
  color:white;
  padding:clamp(3rem,8vw,7rem) 0;
  text-shadow:0 1px 3px #071522e6,0 2px 12px #071522b3;
}
.banner-ort { display:inline-block; font-size:.86rem; font-weight:720; letter-spacing:.1em; padding-bottom:.42rem; border-bottom:3px solid #ff7881 }
h1,h2 { line-height:1.18; overflow-wrap:anywhere; color:var(--navy) }
h1 { font-size:clamp(1.95rem,1.48rem + 2.1vw,3.25rem); margin:.15rem 0 1.4rem; letter-spacing:-.028em }
h2 { font-size:clamp(1.3rem,1.1rem + .9vw,1.9rem); letter-spacing:-.018em }
.banner h1 { color:white; font-size:clamp(2.1rem,1.48rem + 4.3vw,4.9rem); line-height:1.08; margin:.7rem 0 0 }
.banner-jubilaeum { margin:clamp(.8rem,2vw,1.4rem) 0 0; max-width:39ch; color:#f2f9ff; font-size:clamp(1.32rem,.97rem + 1.65vw,2.35rem); font-weight:680; line-height:1.2; letter-spacing:-.02em; text-wrap:balance }
.banner-jubilaeum strong { color:white; font-weight:820; white-space:nowrap }
.termine { background:#e9f3fa; border-bottom:1px solid var(--line); color:var(--navy); padding:.6rem 0; font-weight:680 }
.termine .wrap { display:flex; align-items:center; flex-wrap:wrap; gap:.3rem .9rem }
.termine a,.mitgliedertreffen > a { display:inline-block; width:fit-content; padding:.37rem .72rem; border-radius:.58rem; background:#deedf7; color:var(--navy); font-weight:720; text-decoration:none }
.termine a:hover,.mitgliedertreffen > a:hover { background:#cfe5f3; text-decoration:underline }
.seekarten {
  --karten-schleier:rgba(251,253,255,.79);
  background-color:#f5fafc;
  background-image:linear-gradient(var(--karten-schleier),var(--karten-schleier)),url("/bilder/seekarten-puzzle.png");
  background-repeat:no-repeat,repeat;
  background-position:center,center top;
  background-size:auto,34rem auto;
}
.home-seekarten {
  --karten-schleier:rgba(251,253,255,.48);
  padding-top:clamp(.45rem,1.4vw,1rem);
}
.home-seekarten main { padding-top:clamp(.8rem,2vw,1.3rem) }
.seekarten:not(.home-seekarten) { --karten-schleier:rgba(251,253,255,.69); padding-block:clamp(.75rem,2.8vw,2.2rem) }
.seekarten:not(.home-seekarten) main { padding:clamp(1rem,3vw,2.7rem); background:#fff6; border:1px solid #cbdde8; border-radius:clamp(.85rem,2vw,1.4rem); box-shadow:var(--soft-shadow) }
.seekarten-spiel {
  display:grid;
  grid-template:repeat(2,minmax(0,1fr)) / repeat(5,minmax(0,1fr));
  max-width:46rem;
  aspect-ratio:800 / 224;
  background:
    linear-gradient(#fbfdff55,#fbfdff55),
    url("/bilder/seekarten-puzzle-wechsel.png") center / 100% 100% no-repeat;
}
.seekarten-luecke {
  overflow:hidden;
  display:grid;
  justify-items:center;
  align-items:end;
}
.seekarten-luecke.oben-links { grid-area:1 / 2 }
.seekarten-luecke.oben-rechts { grid-area:1 / 4 }
.seekarten-luecke.unten-links { grid-area:2 / 1 }
.seekarten-luecke.unten-rechts { grid-area:2 / 5 }
.seekarten-luecke img {
  display:block;
  width:min(70%,3.8rem);
  height:82%;
  object-fit:contain;
  object-position:bottom;
  opacity:0;
  transform:translateY(110%);
  animation:seekarten-auftauchen 56s ease-in-out var(--auftritt,0s) infinite both;
}
.seekarten-luecke:nth-child(2) { --auftritt:7s }
.seekarten-luecke:nth-child(3) { --auftritt:14s }
.seekarten-luecke:nth-child(4) { --auftritt:21s }
.seekarten-luecke:nth-child(5) { --auftritt:28s }
.seekarten-luecke:nth-child(6) { --auftritt:35s }
.seekarten-luecke:nth-child(7) { --auftritt:42s }
.seekarten-luecke:nth-child(8) { --auftritt:49s }
@keyframes seekarten-auftauchen {
  0%, 12.05%, 100% { transform:translateY(110%); opacity:0 }
  4.02%, 7.59% { transform:translateY(-9%); opacity:1 }
}
@media (prefers-reduced-motion:reduce) {
  .seekarten-luecke img { animation:none }
  .seekarten-luecke:nth-child(-n+2) img { opacity:1; transform:translateY(-9%) }
}
.seekarten .card { background:rgba(255,255,255,.94) }
main { min-height:46vh; padding-block:clamp(1.6rem,4vw,3.2rem) clamp(2.8rem,6vw,5rem) }
main > p { max-width:79ch; margin:0 0 1.15em; line-height:1.75; overflow-wrap:anywhere; hyphens:auto }
main > ul:not(.agenda) { max-width:79ch }
main p a, main li a { overflow-wrap:anywhere }
.willkommen { margin:clamp(1.4rem,4vw,2.6rem) 0 .95rem }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap:clamp(.8rem,2vw,1.25rem) }
.card { background:white; border:1px solid var(--line); border-radius:1rem; padding:clamp(1rem,2vw,1.45rem); box-shadow:var(--soft-shadow) }
.card h2 { font-size:1.28rem; margin:0 0 .75rem }
.cards .card h2 { padding-bottom:.62rem; border-bottom:1px solid var(--line) }
.card ul { list-style:none; padding:0; margin:0 }
.card li + li { margin-top:.45rem }
.mitgliedertreffen { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.85rem 1.5rem; border-inline-start:4px solid var(--red) }
.mitgliedertreffen h2 { margin-bottom:.35rem }
.mitgliedertreffen p { margin:0; color:var(--muted) }
.album { margin:clamp(1.6rem,4vw,3rem) 0; padding-top:1rem; border-top:1px solid var(--line) }
.album h2 { margin:.1rem 0 1rem }
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,10.2rem),1fr)); gap:clamp(.5rem,1.5vw,1rem); padding:0; list-style:none }
.gallery a { display:block; border-radius:.65rem; box-shadow:0 3px 10px #112b4320 }
.gallery a:hover { outline:2px solid var(--blue); outline-offset:2px }
.gallery img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:inherit; background:#e4edf3 }
footer { background:var(--navy); color:white; padding:1.45rem 0 }
footer .wrap { display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between }
footer a { color:white; margin-inline-end:.75rem }
footer .kartenquelle { flex-basis:100%; color:#d8e6ef; font-size:.75rem }
footer .kartenquelle a { color:inherit; margin-inline-end:0 }
@media(max-width:650px) {
  nav > a,nav summary { padding-inline:.48rem; font-size:.94rem }
  .banner { background-image:linear-gradient(90deg,#0b2439dc,#10253961),url("/bilder/vereinsbanner.jpg") }
  .banner-jubilaeum { max-width:29ch }
  nav ul { position:static; max-width:100%; min-width:0; box-shadow:none }
  nav details[open] { flex-basis:100% }
  .gallery { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media(max-width:310px) { .gallery { grid-template-columns:1fr } }
.documents { display:grid; gap:.5rem; margin:0; padding:0; list-style:none }
.documents li { display:flex; align-items:center; justify-content:space-between; gap:.5rem 1rem; padding:.7rem 1rem; background:white; border:1px solid var(--line); border-radius:.55rem }
.filetype { flex:none; border-radius:.35rem; padding:.1rem .42rem; color:var(--navy); background:#e8f1f7; font-size:.82em; font-weight:650 }
.doc-folders { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr)); gap:.75rem; margin:1.25rem 0; padding:0; list-style:none }
.doc-folders li { position:relative; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.15rem .7rem; padding:.95rem 1rem; border:1px solid var(--line); border-radius:.65rem; background:white }
.doc-folders a { font-weight:750 }
.doc-folders a::after { position:absolute; inset:0; content:"" }
.doc-folders li span,.doc-date { color:var(--muted); font-size:.92em }
.doc-folders li:hover { border-color:var(--blue) }
.documents li { display:block; padding:0 }
.documents a { display:block; padding:.7rem 1rem }
.documents a .filetype { display:inline-block; margin-inline-start:.55rem; text-decoration:none }