/* Vespa-Club Freiburg e.V. – Design B „Lackfarben“
   Nach VCF-Design-Briefing.md: Vespa-Lackfarben als Flächen, Club-Rot nur für Aktionen. */

@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-latin-ext.woff2") format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree-latin.woff2") format("woff2"); font-weight: 300 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree-latin-ext.woff2") format("woff2"); font-weight: 300 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree-latin-italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }

:root {
  /* Aktionsfarbe */
  --rot: #a8262b;
  --rot-dunkel: #86191e;
  --rot-soft: oklch(0.95 0.03 25);
  /* Vespa-Lackfarben (Flächen) */
  --acqua: oklch(0.92 0.045 180);
  --acqua-tief: oklch(0.40 0.07 185);
  --azzurro: oklch(0.92 0.04 235);
  --azzurro-tief: oklch(0.40 0.08 240);
  /* Neutrale */
  --bg: oklch(0.985 0.005 180);
  --flaeche: oklch(1 0 0);
  --text: oklch(0.24 0.02 200);
  --text-leise: oklch(0.47 0.02 200);
  --linie: oklch(0.89 0.015 190);
  --fokus: var(--rot);
  /* Schrift */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-text: "Figtree", system-ui, sans-serif;
  --fs-sm: 0.875rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  --fs-hero: clamp(2.6rem, 1.4rem + 5vw, 5.2rem);
  /* Abstand (4er-Basis) */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem;
  --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem;
  /* Form */
  --r-klein: 12px;
  --r-gross: 28px;
  --r-pill: 999px;
  /* Bewegung */
  --dur-schnell: 150ms;
  --dur: 250ms;
  --dur-lang: 420ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-feder: cubic-bezier(0.34, 1.56, 0.64, 1);

  --wrap: 1240px;
  --measure: 65ch;
}

@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
body { margin: 0; font: 400 var(--fs-base)/1.6 var(--font-text); color: var(--text); background: var(--bg); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rot); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--rot-dunkel); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 6px; }
hr { border: 0; border-top: 1px solid var(--linie); margin: var(--sp-10) 0; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: 1.05; margin: 0 0 0.55em; color: var(--text);
  text-wrap: balance; hyphens: auto; -webkit-hyphens: auto; }
.nt { hyphens: manual; -webkit-hyphens: manual; }   /* „Vespa“ in Überschriften nie trennen */
h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.01em; }
h3 { font-size: var(--fs-lg); font-weight: 600; line-height: 1.2; }
h4 { font-size: 1.1rem; font-weight: 600; line-height: 1.25; }
h5, h6 { font-size: var(--fs-base); font-weight: 600; }
p, ul, ol { margin: 0 0 1em; }
.text-center { text-align: center; }
.lead { font-size: var(--fs-lg); }
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--text); color: #fff; padding: .7rem 1.1rem; border-radius: var(--r-pill); }
.skip:focus { top: 1rem; color: #fff; }

/* Flächen ---------------------------------------------------------------------- */
.flaeche { border-radius: var(--r-gross); padding: var(--sp-8); }
.acqua { background: var(--acqua); }
.azzurro { background: var(--azzurro); }
.rot-soft { background: var(--rot-soft); }
.weiss { background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); }
.etikett { display: inline-block; align-self: flex-start; background: var(--flaeche); color: var(--acqua-tief); font: 600 var(--fs-sm)/1 var(--font-text);
  padding: .45rem .8rem; border-radius: var(--r-pill); margin-bottom: var(--sp-4); }

/* Buttons ---------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .6em 1.5em;
  font: 700 1rem/1.2 var(--font-text); border-radius: var(--r-pill); border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--dur) var(--ease-feder), box-shadow var(--dur) var(--ease-out), background-color var(--dur-schnell), color var(--dur-schnell); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--rot); color: #fff; }
.btn-primary:hover { background: var(--rot-dunkel); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgb(168 38 43 / .6); }
.btn-primary:active { transform: scale(.97); box-shadow: none; }
.btn-rand, .btn-secondary { background: transparent; color: var(--text); border-color: var(--text); }
.btn-rand:hover, .btn-secondary:hover { background: var(--text); color: #fff; }
.btn-reihe { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0; }
.link-more { font-weight: 700; text-decoration: none; }
.link-more::after { content: " →"; }
.link-more:hover { text-decoration: underline; }

/* Chips ------------------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: var(--sp-6) 0 0; border: 0; }
.chip { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; padding: .4rem 1.1rem; border: 2px solid var(--text);
  border-radius: var(--r-pill); color: var(--text); background: var(--flaeche); text-decoration: none; font-weight: 600; cursor: pointer;
  transition: background-color var(--dur-schnell), color var(--dur-schnell); }
.chip:hover { background: var(--text); color: #fff; }
.chip.is-active, .chip:has(input:checked) { background: var(--text); color: #fff; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 3px; }

/* Kopf -------------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; transition: border-color var(--dur); }
/* Unschärfe auf einem Pseudo-Element: backdrop-filter direkt am Kopf würde das fixierte
   Menü-Panel an den Kopf binden statt an den Bildschirm. */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in oklch, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.site-header.scrolled { border-bottom-color: var(--linie); }
.header-inner { display: flex; align-items: center; gap: var(--sp-4); min-height: 76px; padding: .5rem 0; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--text); margin-right: auto; }
.brand img { height: 56px; width: auto; }
.brand-name { font: 800 1.1rem/1 var(--font-display); letter-spacing: -0.01em; }
.brand:hover { color: var(--text); }
.site-nav { display: flex; align-items: center; gap: var(--sp-4); }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-1); }
.nav-list > li { position: relative; }
.nav-list > li > a { display: block; padding: .6rem 1rem; border-radius: var(--r-pill); color: var(--text); text-decoration: none;
  font: 600 1rem/1.2 var(--font-text); transition: background-color var(--dur-schnell); }
.nav-list > li > a:hover { background: var(--acqua); }
.nav-list > li.is-active > a { background: var(--text); color: #fff; }
.sub { list-style: none; margin: 0; padding: var(--sp-2); position: absolute; top: calc(100% + 6px); left: 0; min-width: 15rem;
  background: var(--flaeche); border-radius: var(--r-klein); box-shadow: 0 18px 40px -12px rgb(20 34 35 / .28), 0 0 0 1px var(--linie);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--dur-schnell), transform var(--dur-schnell) var(--ease-out), visibility var(--dur-schnell); }
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.sub a { display: block; padding: .6rem .8rem; border-radius: 8px; color: var(--text); text-decoration: none; }
.sub a:hover, .sub a[aria-current="page"] { background: var(--acqua); }
.has-sub:hover > .sub, .has-sub:focus-within > .sub { opacity: 1; visibility: visible; transform: none; }
.nav-list > li:nth-last-child(-n+2) .sub { left: auto; right: 0; }
.nav-cta { white-space: nowrap; }
.nav-cta[aria-current="page"] { background: var(--rot-dunkel); }
.nav-extra { display: none; }
.nav-toggle { display: none; min-height: 44px; padding: 0 1.2rem; font: 700 1rem var(--font-text); color: var(--text); background: var(--flaeche);
  border: 2px solid var(--text); border-radius: var(--r-pill); cursor: pointer; }

@media (max-width: 979px) {
  .nav-toggle { display: inline-flex; align-items: center; position: relative; z-index: 61; }
  .nav-toggle[aria-expanded="true"] { background: var(--text); color: #fff; }
  .site-nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(24rem, 90vw); z-index: 60; background: var(--acqua);
    flex-direction: column; align-items: stretch; gap: var(--sp-6); padding: 6rem var(--sp-8) var(--sp-8); overflow-y: auto;
    box-shadow: -24px 0 60px -20px rgb(20 34 35 / .35); transform: translateX(105%); visibility: hidden;
    transition: transform var(--dur-lang) var(--ease-out), visibility var(--dur-lang); }
  .site-nav.open { transform: none; visibility: visible; }
  .nav-list { flex-direction: column; gap: var(--sp-4); }
  .nav-list > li > a { font: 800 1.6rem/1.1 var(--font-display); padding: .3rem 0; border-radius: 0; }
  .nav-list > li > a:hover { background: none; color: var(--acqua-tief); }
  .nav-list > li.is-active > a { background: none; color: var(--text); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .2em; }
  .sub { position: static; opacity: 1; visibility: visible; transform: none; background: none; box-shadow: none; padding: .2rem 0 0; min-width: 0; }
  .sub::before { display: none; }
  .sub a { padding: .35rem 0; }
  .sub a:hover, .sub a[aria-current="page"] { background: none; text-decoration: underline; }
  .nav-cta { align-self: flex-start; }
  .nav-extra { display: block; list-style: none; padding: var(--sp-4) 0 0; margin: 0; border-top: 1px solid color-mix(in oklch, var(--acqua-tief) 30%, transparent); }
  .nav-extra a { display: block; padding: .45rem 0; color: var(--text); font-weight: 600; }
  body.menu-offen { overflow: hidden; }
  /* Abdunklung unter dem Kopf (z-index 50), in dem auch das Panel liegt */
  body.menu-offen::after { content: ""; position: fixed; inset: 0; background: rgb(20 34 35 / .3); z-index: 40; }
}
@media (max-width: 420px) { .brand-name { font-size: 1rem; } .brand img { height: 48px; } }

/* Seitenkopf -------------------------------------------------------------------- */
.page-head { padding: var(--sp-4) 0 0; }
.head-card { padding: var(--sp-10) var(--sp-8); }
.head-card h1 { margin: 0; max-width: 22ch; }
.page-sub { margin: var(--sp-4) 0 0; font-size: var(--fs-lg); color: var(--text-leise); max-width: 50ch; }
.acqua .page-sub, .azzurro .page-sub, .rot-soft .page-sub { color: var(--text); }
.breadcrumb ol { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: flex; flex-wrap: wrap; font-size: var(--fs-sm); }
.breadcrumb li:not(:last-child)::after, .breadcrumb li:last-child::after { content: "/"; margin: 0 .5em; color: var(--text-leise); }
.breadcrumb a { color: var(--text); font-weight: 500; }

/* Inhalt ------------------------------------------------------------------------ */
.content { padding: var(--sp-12) 0 var(--sp-16); }
.ce { margin-bottom: var(--sp-12); }
.ce:last-child { margin-bottom: 0; }
.ce-header h2, .ce-header h3, .ce-header h4 { margin-bottom: .35em; }
.subheader { color: var(--text-leise); font-size: var(--fs-lg); margin: 0 0 1em; }
.rte { max-width: var(--measure); overflow-wrap: break-word; }
.text-center .rte, .rte.text-center, .rte .text-center, .ce-header .text-center { margin-inline: auto; }
.rte > :last-child { margin-bottom: 0; }
.rte h2, .rte h3, .rte h4 { margin-top: 1.4em; }
.rte h2:first-child, .rte h3:first-child, .rte h4:first-child { margin-top: 0; }
.rte ul, .rte ol { padding-left: 1.3em; }
.rte li { margin-bottom: .3em; }
.rte li p { margin: 0; }
.bg-secondary, .bg-primary, .bg-light { padding: var(--sp-8); border-radius: var(--r-gross); background: var(--acqua); }

.media { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-6); }
.media figure { margin: 0; display: flex; flex-direction: column; }
.media img { width: 100%; border-radius: var(--r-klein); background: var(--linie); }
.media.cols-1 img { border-radius: var(--r-gross); }
.media figcaption { font-size: var(--fs-sm); color: var(--text-leise); margin-top: .5rem; }
.media.cols-1 { max-width: 900px; }
.media.cols-2 { grid-template-columns: repeat(2, 1fr); }
.media.cols-3 { grid-template-columns: repeat(3, 1fr); }
.media.cols-4 { grid-template-columns: repeat(4, 1fr); }
.media.cols-5 { grid-template-columns: repeat(5, 1fr); }
.media.cols-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 900px) { .media.cols-4, .media.cols-5, .media.cols-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .media.cols-3, .media.cols-4, .media.cols-5, .media.cols-6 { grid-template-columns: repeat(2, 1fr); } }
a.lb { display: block; cursor: zoom-in; border-radius: var(--r-klein); overflow: hidden; }
a.lb img { transition: transform var(--dur-lang) var(--ease-out); }
a.lb:hover img { transform: scale(1.03); }

.textpic { display: grid; gap: var(--sp-6) var(--sp-10); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.textpic-right { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.textpic-right .textpic-media { order: 2; }
.textpic-center { align-items: center; }
.textpic .media { margin: 0; }
.textpic .media.cols-1 { max-width: none; }
@media (max-width: 760px) { .textpic, .textpic-right { grid-template-columns: 1fr; } .textpic-right .textpic-media { order: 0; } }

/* Galerie als Masonry (CSS columns) */
.gallery { list-style: none; margin: 0 0 var(--sp-4); padding: 0; columns: var(--cols, 4) 180px; column-gap: var(--sp-3); }
.gallery li { break-inside: avoid; margin-bottom: var(--sp-3); }
.gallery.cols-2 { --cols: 2; } .gallery.cols-3 { --cols: 3; } .gallery.cols-4 { --cols: 4; } .gallery.cols-5 { --cols: 5; } .gallery.cols-6 { --cols: 5; }
.gallery li[hidden] { display: none; }
.gallery img { width: 100%; height: auto; border-radius: var(--r-klein); background: var(--linie); }
@media (max-width: 560px) { .gallery { columns: 2; } }
.gallery-more { text-align: center; }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-6); }
.grid-col { grid-column: span var(--span, 12); min-width: 0; }
.grid-col > .ce { margin-bottom: var(--sp-8); }
.grid-col > .ce:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .grid { grid-template-columns: minmax(0, 1fr); } .grid-col { grid-column: auto; } }

/* Akkordeon: weiße Karten, rotes Plus wird zum × */
.accordion { display: grid; gap: var(--sp-2); }
.acc-item { background: var(--flaeche); border-radius: var(--r-klein); box-shadow: 0 0 0 1px var(--linie); overflow: hidden; }
.acc-item summary { list-style: none; cursor: pointer; padding: 1.1rem 3.5rem 1.1rem 1.3rem; position: relative;
  font: 600 var(--fs-lg)/1.25 var(--font-display); color: var(--text); min-height: 48px; }
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary::after { content: "+"; position: absolute; right: 1.1rem; top: 50%; translate: 0 -50%; font: 400 2rem/1 var(--font-text);
  color: var(--rot); transition: rotate var(--dur) var(--ease-feder); }
.acc-item[open] summary::after { rotate: 45deg; }
.acc-item summary:hover { background: color-mix(in oklch, var(--acqua) 45%, transparent); }
.acc-body { padding: 0 1.3rem 1.4rem; }
.acc-body .textpic { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
@media (max-width: 760px) { .acc-body .textpic { grid-template-columns: 1fr; } }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .acc-item::details-content { height: 0; overflow: clip; transition: height var(--dur-lang) var(--ease-out), content-visibility var(--dur-lang) allow-discrete; }
  .acc-item[open]::details-content { height: auto; }
}

.table-wrap { overflow-x: auto; margin: 0 0 var(--sp-4); background: var(--flaeche); border-radius: var(--r-klein); box-shadow: 0 0 0 1px var(--linie); }
table { border-collapse: collapse; width: 100%; font-size: 1rem; }
caption { text-align: left; padding: .7rem .9rem; font-weight: 700; }
th, td { padding: .65rem .9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
thead th { background: var(--acqua); font-family: var(--font-display); font-weight: 600; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.card { background: var(--azzurro); border-radius: var(--r-gross); overflow: hidden; display: flex; flex-direction: column; }
.card-img { padding: var(--sp-4) var(--sp-4) 0; }
.card-img img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 6px solid var(--flaeche); }
.card-img a.lb { border-radius: 50%; }
/* Vorstand: Porträts im Hochformat – Ausschnitt oben ausrichten, damit der Kopf im Kreis bleibt */
.page-111 .card-img img { object-position: 50% 0%; }
.card-body { padding: var(--sp-5) var(--sp-6) var(--sp-6); text-align: center; }
.card-body h3 { margin-bottom: .2em; }
.card-sub { color: var(--azzurro-tief); font-weight: 600; margin-bottom: .6em; }
.card-body .rte { font-size: 1rem; margin-inline: auto; }

.downloads { list-style: none; padding: 0; margin: 0; max-width: var(--measure); display: grid; gap: var(--sp-2); }
.downloads a { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .9rem 1.2rem; min-height: 48px;
  background: var(--flaeche); box-shadow: 0 0 0 1px var(--linie); border-radius: var(--r-klein); text-decoration: none; color: var(--text); }
.downloads a:hover { box-shadow: 0 0 0 2px var(--rot); }
.dl-name { font-weight: 600; }
.dl-name::before { content: "↓ "; color: var(--rot); }
.dl-meta { color: var(--text-leise); font-size: var(--fs-sm); white-space: nowrap; }

.video { max-width: 900px; }
.video-consent { width: 100%; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; gap: 1.2rem; background: var(--text);
  color: #fff; border: 0; border-radius: var(--r-gross); cursor: pointer; font: inherit; text-align: left; padding: 1.5rem; }
.video-play { width: 68px; height: 68px; border-radius: 50%; background: var(--rot); flex: none; position: relative;
  transition: transform var(--dur) var(--ease-feder); }
.video-consent:hover .video-play { transform: scale(1.08); }
.video-play::after { content: ""; position: absolute; left: 27px; top: 22px; border-left: 18px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-gross); }
.video-alt { font-size: var(--fs-sm); margin-top: .5rem; }

.texticon { text-align: center; }
.texticon-icon { display: inline-flex; width: 72px; height: 72px; padding: 16px; border-radius: 50%; background: var(--acqua); color: var(--acqua-tief); margin-bottom: 1rem; }

.subpages { margin-top: var(--sp-16); }
.subpages ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.subpages a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; min-height: 56px; height: 100%;
  background: var(--flaeche); border-radius: var(--r-klein); box-shadow: 0 0 0 1px var(--linie); text-decoration: none; color: var(--text); font-weight: 600;
  transition: box-shadow var(--dur-schnell); }
.subpages a::after { content: "→"; color: var(--rot); }
.subpages a:hover { box-shadow: 0 0 0 2px var(--rot); }
.sitemap ul { padding-left: 1.2em; }
.sitemap > ul { padding-left: 0; list-style: none; columns: 2 260px; }
.sitemap > ul > li { break-inside: avoid; margin-bottom: .8rem; font-weight: 600; }
.sitemap > ul > li li { font-weight: 400; }

/* Alben */
.alben { margin-top: var(--sp-12); }
.album-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.album { display: block; text-decoration: none; color: var(--text); }
.album-bild { aspect-ratio: 4 / 3; border-radius: var(--r-klein); overflow: hidden; background: var(--azzurro);
  transition: border-radius var(--dur) var(--ease-out); }
.album-bild img { width: 100%; height: 100%; object-fit: cover; }
.album:hover .album-bild { border-radius: var(--r-gross) var(--r-gross) var(--r-klein) var(--r-klein); }
.album h3 { margin: var(--sp-3) 0 0; }
.album:hover h3 { color: var(--rot); }

/* Zeitleiste */
.zeitleiste ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); position: relative; }
.zeitleiste ol::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 6px; border-radius: 3px; background: var(--acqua); }
.zeitleiste li { position: relative; padding-top: 2.4rem; }
.zeitleiste li::before { content: ""; position: absolute; top: 4px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--rot); box-shadow: 0 0 0 5px var(--bg); }
.zl-jahr { display: block; font: 800 var(--fs-xl)/1 var(--font-display); margin-bottom: .4rem; }
.zeitleiste p { margin: 0; color: var(--text-leise); }
@media (max-width: 760px) {
  .zeitleiste ol { grid-template-columns: 1fr; gap: var(--sp-6); padding-left: 2.2rem; }
  .zeitleiste ol::before { left: 7px; right: auto; top: 0; bottom: 0; width: 6px; height: auto; }
  .zeitleiste li { padding-top: 0; }
  .zeitleiste li::before { left: -2.2rem; }
}

/* Mischrechner */
.mischrechner h2 { margin-bottom: var(--sp-6); }
.mr-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-8); align-items: center; }
.mr-label { display: block; font-weight: 700; margin-bottom: var(--sp-3); padding: 0; }
.mr-label output { color: var(--rot); }
.mischrechner input[type="range"] { width: 100%; accent-color: var(--rot); min-height: 44px; }
.mr-chips { margin-top: var(--sp-6); }
.mr-ergebnis { background: var(--flaeche); border-radius: var(--r-gross); padding: var(--sp-6); text-align: center; color: var(--acqua-tief); }
.kanister { width: 90px; height: auto; margin: 0 auto var(--sp-3); }
.kan-fuellung { fill: color-mix(in oklch, var(--rot) 75%, var(--acqua)); transform-box: fill-box; transform-origin: bottom;
  transform: scaleY(var(--fuell, .45)); transition: transform var(--dur-lang) var(--ease-feder); }
.mr-wert { font: 800 clamp(2.4rem, 1.8rem + 2vw, 3.4rem)/1 var(--font-display); color: var(--rot); margin: 0 0 var(--sp-2); }
.mr-formel { font-size: var(--fs-sm); color: var(--text-leise); margin: 0; }
@media (max-width: 700px) { .mr-grid { grid-template-columns: 1fr; } }

/* Mitglied werden */
.erwartet ul { list-style: none; margin: 0 0 var(--sp-6); padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.erwartet li { background: var(--flaeche); border-radius: var(--r-klein); padding: var(--sp-5); }
.erwartet li a { display: block; font: 600 var(--fs-lg)/1.2 var(--font-display); margin-bottom: .3rem; text-decoration: none; }
.erwartet li span { color: var(--text-leise); }

/* Startseite -------------------------------------------------------------------- */
.b-hero { position: relative; padding-top: var(--sp-4); }
.hero-foto { position: relative; }
.hero-foto img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--r-gross); }
.hero-karte { position: relative; z-index: 2; width: min(100% - 2rem, 44rem); margin: -7rem 0 0 var(--sp-8); padding: var(--sp-10); }
.hero-karte h1 { font-size: var(--fs-hero); line-height: .95; margin-bottom: var(--sp-4); }
.hero-lead { font-size: var(--fs-lg); max-width: 34ch; margin-bottom: var(--sp-6); }
@media (max-width: 700px) {
  .hero-foto img { aspect-ratio: 4 / 3; }
  .hero-karte { width: auto; margin: -3rem var(--sp-3) 0; padding: var(--sp-8) var(--sp-6); }
}

.plakette { position: absolute; right: var(--sp-8); bottom: -3rem; z-index: 3; width: 190px; aspect-ratio: 1; border-radius: 50%;
  background: var(--flaeche); border: 10px solid var(--rot); box-shadow: 0 16px 40px -12px rgb(20 34 35 / .45);
  display: grid; place-items: center; text-decoration: none; color: var(--text); rotate: -8deg;
  transition: rotate var(--dur-lang) var(--ease-feder), scale var(--dur-lang) var(--ease-feder); }
.plakette::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 2px solid var(--rot); }
.plakette:hover { rotate: 4deg; scale: 1.05; color: var(--text); }
.pl-inner { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.1; padding: 0 1.2rem; }
.pl-label { font-size: .72rem; font-weight: 700; color: var(--rot); margin-bottom: .2rem; }
.pl-tag { font: 800 2.6rem/.95 var(--font-display); }
.pl-monat { font: 700 1rem/1.1 var(--font-display); }
.pl-titel { font-size: .78rem; margin-top: .3rem; max-width: 9rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pl-count { font-size: .75rem; font-weight: 700; color: var(--acqua-tief); margin-top: .2rem; }
@media (max-width: 700px) {
  .plakette { width: 132px; border-width: 7px; top: -.8rem; right: -.2rem; bottom: auto; }
  .pl-tag { font-size: 1.9rem; } .pl-titel { display: none; } .pl-label { font-size: .62rem; } .pl-monat { font-size: .85rem; }
}

.einstiege { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--sp-6); margin-top: var(--sp-16); }
.einstieg { display: flex; flex-direction: column; text-decoration: none; color: var(--text); min-height: 17rem;
  transition: transform var(--dur) var(--ease-feder); }
.einstieg:hover { color: var(--text); transform: translateY(-4px); }
.einstieg h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); }
.einstieg p { margin-bottom: var(--sp-6); }
.einstieg .mehr { margin-top: auto; font-weight: 700; color: var(--rot); }
.einstieg .mehr::after { content: " →"; }
.einstieg-wert strong { font: 800 var(--fs-lg)/1.2 var(--font-display); }
.rot-soft .etikett { color: var(--rot); }
.azzurro .etikett { color: var(--azzurro-tief); }
@media (max-width: 900px) { .einstiege { grid-template-columns: 1fr; } .einstieg { min-height: 0; } }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: var(--sp-6); }
.section-head h2 { margin: 0; }
.home-news { margin-top: var(--sp-16); }
.news-b { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: var(--sp-6); }
.news-b a { display: flex; gap: var(--sp-5); text-decoration: none; color: var(--text); height: 100%; }
.news-b a:hover h3 { color: var(--rot); }
.news-gross { grid-row: span 2; }
.news-gross a { flex-direction: column; background: var(--flaeche); border-radius: var(--r-gross); padding: var(--sp-4); box-shadow: 0 0 0 1px var(--linie); }
.news-gross .news-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--r-gross) - 10px); }
.news-gross .news-text { padding: 0 var(--sp-3) var(--sp-3); }
.news-klein a { align-items: center; }
.news-klein .news-bild { flex: none; width: 34%; max-width: 170px; }
.news-klein .news-bild img { aspect-ratio: 1; object-fit: cover; border-radius: var(--r-klein); width: 100%; }
.news-text { min-width: 0; overflow-wrap: break-word; }
.news-text p { color: var(--text-leise); margin: 0; }
.news-text h3 { margin-bottom: .35em; transition: color var(--dur-schnell); }
@media (max-width: 800px) { .news-b { grid-template-columns: 1fr; } .news-gross { grid-row: auto; } }

/* Teaser EVW 2027 (Startseite) – ganze Karte klickbar über den Link in der Überschrift */
.evw-teaser { margin-top: var(--sp-16); }
.evw-karte { position: relative; background: var(--flaeche); border-radius: var(--r-gross); padding: var(--sp-4); box-shadow: 0 0 0 1px var(--linie); }
.evw-karte:focus-within { outline: 3px solid var(--fokus); outline-offset: 3px; }
.evw-bild { width: 100%; height: auto; border-radius: calc(var(--r-gross) - 10px); }
.evw-text { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-6); padding: var(--sp-5) var(--sp-3) var(--sp-3); }
.evw-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.evw-text h2 { margin: 0; font-size: var(--fs-xl); }
.evw-link { color: var(--text); text-decoration: none; transition: color var(--dur-schnell); }
.evw-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-gross); }
.evw-link:focus-visible { outline: none; }
.evw-karte:hover .evw-link { color: var(--rot); }
.evw-hinweis { margin: 0; padding: .45rem .9rem; background: var(--rot-soft); color: var(--rot-dunkel); font-weight: 600; font-size: var(--fs-sm); border-radius: var(--r-pill); }
.evw-ziel { margin: 0; font-weight: 600; color: var(--rot); }
.evw-ziel::after { content: " ›"; }

.home-geschichte { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-12); align-items: center; margin-top: var(--sp-16); }
.polaroid { margin: 0; background: var(--flaeche); padding: var(--sp-4) var(--sp-4) var(--sp-3); border-radius: 6px; rotate: -3deg;
  box-shadow: 0 20px 40px -18px rgb(20 34 35 / .45), 0 0 0 1px var(--linie); max-width: 420px; justify-self: center; }
.polaroid img { width: 100%; filter: sepia(.25); border-radius: 2px; }
.polaroid figcaption { font-style: italic; text-align: center; margin-top: var(--sp-3); color: var(--text-leise); }
@media (max-width: 760px) { .home-geschichte { grid-template-columns: 1fr; gap: var(--sp-8); } }

.mitmach { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-10); align-items: center; margin-top: var(--sp-16); padding: var(--sp-10) var(--sp-12); }
.mitmach-wappen { height: clamp(140px, 18vw, 220px); width: auto; rotate: -4deg; }
.mitmach h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); }
.mitmach p { max-width: 48ch; font-size: var(--fs-lg); }
@media (max-width: 700px) { .mitmach { grid-template-columns: 1fr; padding: var(--sp-8) var(--sp-6); } }

.unterstuetzer { margin: var(--sp-16) auto; text-align: center; }
.unterstuetzer h2 { font-size: var(--fs-lg); font-weight: 600; }
.unterstuetzer .chips { justify-content: center; margin-top: var(--sp-4); }

/* Termine ---------------------------------------------------------------------- */
.kalender { flex: none; width: 84px; background: var(--flaeche); border-radius: var(--r-klein); overflow: hidden; text-align: center;
  box-shadow: 0 0 0 1px var(--linie), 0 8px 18px -12px rgb(20 34 35 / .4); }
.kal-monat { display: block; background: var(--rot); color: #fff; font-weight: 700; font-size: var(--fs-sm); padding: .25rem 0; }
.kal-tag { display: block; font: 800 2.2rem/1.3 var(--font-display); padding: .15rem 0 .25rem; }
.termin-karten { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.termin-karte { display: flex; gap: var(--sp-6); align-items: flex-start; background: var(--flaeche); border-radius: var(--r-gross);
  padding: var(--sp-6); box-shadow: 0 0 0 1px var(--linie); }
.termin-info h3 { margin-bottom: .25em; }
.termin-meta { color: var(--text-leise); }
.countdown { font-weight: 700; color: var(--acqua-tief); }
.termin-info p:last-child { margin: 0; }
.termin-leer { background: var(--flaeche); border-radius: var(--r-klein); padding: var(--sp-5); box-shadow: 0 0 0 1px var(--linie); }
.b-stammtisch h2 { margin-bottom: var(--sp-5); }
.st-next { display: flex; gap: var(--sp-5); align-items: flex-start; margin-bottom: var(--sp-6); }
.st-datum { font: 700 var(--fs-lg)/1.2 var(--font-display); margin: 0 0 .3rem; }
.st-ort { margin: 0 0 .3rem; }
.st-links { margin: 0; }
.st-links a { font-weight: 600; }
.st-hinweis { font-size: var(--fs-sm); color: var(--text); }
.b-stammtisch h3 { font-size: 1.05rem; margin-top: var(--sp-6); }
.st-orte { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.st-orte span { display: inline-block; min-width: 9.5rem; color: var(--text-leise); }
@media (max-width: 520px) { .termin-karte { flex-direction: column; gap: var(--sp-4); } .kalender { width: 72px; } }

/* Formular ---------------------------------------------------------------------- */
.form { max-width: 640px; }
.field { margin-bottom: var(--sp-5); }
.field label { display: block; font-weight: 700; margin-bottom: .4rem; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="date"], .field textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--flaeche); border: 2px solid var(--linie); border-radius: var(--r-klein);
  padding: .7rem .9rem; min-height: 48px; transition: border-color var(--dur-schnell), box-shadow var(--dur-schnell); }
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--rot); outline: none; box-shadow: 0 0 0 4px color-mix(in oklch, var(--rot) 18%, transparent); }
.field [aria-invalid="true"] { border-color: var(--rot); background: var(--rot-soft); }
.field-error { color: var(--rot); font-size: .98rem; margin: .4rem 0 0; font-weight: 700; }
.field-check { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; }
.field-check input { width: 24px; height: 24px; margin-top: .15rem; accent-color: var(--rot); }
.field-check label { font-weight: 400; margin: 0; }
.field-check .field-error { grid-column: 2; }
.req { color: var(--rot); }
.opt { font-weight: 400; color: var(--text-leise); }
.form-hint { font-size: var(--fs-sm); color: var(--text-leise); }
.field-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { padding: 1.1rem 1.3rem; border-radius: var(--r-klein); margin-bottom: var(--sp-5); font-weight: 600; display: flex; gap: .8rem; align-items: center; }
.form-status.ok { background: var(--acqua); color: var(--text); }
.form-status.ok::before { content: ""; flex: none; width: 14px; height: 26px; margin: -6px .3rem 0 .3rem; border: solid var(--acqua-tief);
  border-width: 0 4px 4px 0; rotate: 45deg; animation: haekchen var(--dur-lang) var(--ease-out) both; transform-origin: bottom left; }
@keyframes haekchen { 0% { width: 0; height: 0; opacity: 0; } 40% { width: 14px; height: 0; opacity: 1; } 100% { width: 14px; height: 26px; } }
.form-status.err { background: var(--rot-soft); color: var(--rot-dunkel); }
.form button[disabled] { opacity: .6; cursor: progress; }

/* Fuß ---------------------------------------------------------------------------- */
.site-footer { background: var(--text); color: oklch(0.9 0.02 190); margin-top: var(--sp-16); }
.site-footer a { color: #fff; text-decoration-color: color-mix(in oklch, #fff 40%, transparent); }
.site-footer a:hover { color: var(--acqua); }
.footer-grid { display: grid; gap: var(--sp-8); grid-template-columns: repeat(4, minmax(0, 1fr)); padding: var(--sp-16) 0 var(--sp-12); }
.footer-col h2 { font-size: var(--fs-lg); color: #fff; margin-bottom: var(--sp-4); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footer-col p { margin: 0 0 .6em; }
.footer-meta { border-top: 1px solid rgb(255 255 255 / .15); font-size: var(--fs-sm); }
.footer-meta-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; padding: 1.2rem 0; }
.footer-meta p { margin: 0; }
.footer-meta ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* Bildansicht --------------------------------------------------------------------- */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgb(12 22 23 / .94); display: flex; align-items: center; justify-content: center; padding: 3.5rem 4.5rem; }
.lightbox[hidden] { display: none; }
.lightbox:not([hidden]) { animation: lb-ein var(--dur) var(--ease-out); }
.lightbox:not([hidden]) figure { animation: lb-plopp var(--dur-lang) var(--ease-feder); }
@keyframes lb-ein { from { opacity: 0; } }
@keyframes lb-plopp { from { scale: .92; opacity: 0; } }
.lightbox figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 9rem); width: auto; height: auto; border-radius: var(--r-klein); }
.lightbox figcaption { color: #e6f0ef; margin-top: .9rem; text-align: center; max-width: 60ch; }
.lightbox button { position: absolute; background: rgb(255 255 255 / .12); color: #fff; border: 0; cursor: pointer; width: 52px; height: 52px;
  border-radius: 50%; font-size: 2rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background-color var(--dur-schnell); }
.lightbox button:hover { background: var(--rot); }
.lb-close { top: 1rem; right: 1rem; }
.lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; top: 1.4rem; left: 1.4rem; margin: 0; color: #bcd; font-size: .95rem; }
@media (max-width: 640px) { .lightbox { padding: 3.5rem .5rem 4.5rem; } .lb-prev, .lb-next { top: auto; bottom: 1rem; transform: none; } }
body.no-scroll { overflow: hidden; }

/* Vorschau-Hinweis (Design-Vorschau per Cookie) */
.design-hinweis { position: fixed; left: 50%; bottom: 1rem; translate: -50% 0; z-index: 150; background: var(--text); color: #fff;
  border-radius: var(--r-pill); padding: .55rem .6rem .55rem 1.1rem; display: flex; gap: .8rem; align-items: center; font-size: .95rem;
  box-shadow: 0 12px 30px -10px rgb(0 0 0 / .5); max-width: calc(100% - 2rem); }
.design-hinweis a { color: #fff; background: rgb(255 255 255 / .16); border-radius: var(--r-pill); padding: .35rem .8rem; text-decoration: none; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}
@media print {
  .site-header, .site-footer, .nav-toggle, .lightbox, .skip, .subpages, .plakette { display: none !important; }
  .flaeche { background: none; padding: 0; }
}

/* Mitgliederbereich ------------------------------------------------------------------- */
.nav-login { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; min-height: 44px; padding: 0 1rem;
  border: 2px solid var(--text); border-radius: var(--r-pill); color: var(--text); text-decoration: none; font-weight: 700; }
.nav-login:hover, .nav-login[aria-current="page"] { background: var(--text); color: #fff; }
@media (max-width: 979px) { .nav-login { align-self: flex-start; } }
.field input[type="password"], .field input[type="number"], .field input[inputmode] {
  width: 100%; font: inherit; color: var(--text); background: var(--flaeche); border: 2px solid var(--linie); border-radius: var(--r-klein);
  padding: .7rem .9rem; min-height: 48px; }
.field input[type="password"]:focus, .field input[type="number"]:focus { border-color: var(--rot); outline: none; box-shadow: 0 0 0 4px color-mix(in oklch, var(--rot) 18%, transparent); }
.mb-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.mb-box { background: var(--flaeche); border-radius: var(--r-klein); padding: var(--sp-5) 1.5rem; box-shadow: 0 0 0 1px var(--linie); }
.mb-box > h2:first-child, .mb-box > h3:first-child { margin-top: 0; }
.mb-daten { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.mb-daten dt { font-weight: 700; } .mb-daten dd { margin: 0; }
.mb-dateien { list-style: none; padding: 0; margin: 0; }
.mb-dateien li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--linie); }
.mb-dateien small { color: var(--text-leise); white-space: nowrap; }
.mb-leiste { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin: 0 0 var(--sp-5); }
.mb-leiste form { margin: 0; }
.mb-links { margin-top: var(--sp-5); }

/* Event-Teaser (mehrere möglich, gepflegt im Website-Assistenten) */
.teaser-slot > .evw-teaser + .evw-teaser { margin-top: var(--sp-8); }
.evw-text .evw-info { flex: 1 1 100%; order: 2; }
.evw-text .evw-ziel { order: 3; }
.evw-datum { margin: 0; font-weight: 700; color: var(--rot); }
.evw-beschreibung { margin: .3rem 0 0; max-width: 70ch; }
.teaser-slot .evw-bild { aspect-ratio: 8 / 3; object-fit: cover; }

/* Unterseiten-Box mitten auf der Seite (z. B. Technik-Tipps): Abstand zum folgenden Inhalt */
.content > .subpages:not(:last-child) { margin-bottom: var(--sp-16); }

/* News aus dem Club (Meldungen aus dem Website-Assistenten, site.js) */
.news-neu .ce-header h2 { margin-bottom: .1em; }
.news-neu .news-datum { color: var(--text-leise); font-size: .95rem; margin: 0 0 var(--sp-4); }
.news-neu .gallery { margin-top: var(--sp-6); }
.news-neu .news-link { margin-top: var(--sp-4); }
.news-bild.news-ohne-bild { background: var(--linie); border-radius: var(--r-klein); aspect-ratio: 1; }
.news-slot:empty { display: none; }
.home-news[hidden] { display: none; }
.news-bild.news-ohne-bild { background: var(--linie) url(../img/vcf-logo-gross.png) center / auto 55% no-repeat; }
.news-gross .news-bild.news-ohne-bild { aspect-ratio: 4 / 3; border-radius: calc(var(--r-gross) - 10px); }
.news-neu { padding-bottom: var(--sp-8); border-bottom: 1px solid var(--linie); }
/* Startseite: große Meldung etwas flacher; Logos/Plakate/Hochformate ganz zeigen */
.news-gross .news-bild img { aspect-ratio: 3 / 2; }
.news-bild.news-bild-ganz { background: #fff; border-radius: calc(var(--r-gross) - 10px); }
.news-klein .news-bild.news-bild-ganz { border-radius: var(--r-klein); }
.news-bild.news-bild-ganz img { object-fit: contain; }

/* Mitglied werden (Interessenten) */
.mitglied-werden { margin-top: var(--sp-12); }
.form-mw { max-width: 720px; }
.form-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4); }
.form-reihe-plz { grid-template-columns: 9rem 1fr; }
.field-kurz input { max-width: 14rem; }
@media (max-width: 560px) { .form-reihe { grid-template-columns: 1fr; } .form-reihe-plz { grid-template-columns: 7rem 1fr; } }
.form-mw [hidden] { display: none !important; }

/* Newsletter „Immer informiert bleiben!“ – runde Plakette (Startseite) und Anmelde-Pop-up */
.home-news .section-head { align-items: center; }
.nl-plakette { --nl-rot: var(--rot); position: relative; flex: none; margin: -2.6rem 0 -1.6rem auto; width: 168px; aspect-ratio: 1; border-radius: 50%;
  background: var(--flaeche); border: 10px solid var(--nl-rot); box-shadow: 0 16px 40px -12px rgb(20 34 35 / .45); color: var(--text);
  display: grid; place-items: center; padding: 0; cursor: pointer; font: inherit; rotate: 8deg;
  transition: rotate var(--dur-lang) var(--ease-feder), scale var(--dur-lang) var(--ease-feder); }
.nl-plakette[hidden] { display: none; }
.nl-plakette::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 2px solid var(--nl-rot); }
.nl-plakette:hover, .nl-plakette:focus-visible { rotate: -4deg; scale: 1.05; }
.nl-plakette:focus-visible { outline: 3px solid var(--fokus); outline-offset: 4px; }
.nlp-inner { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.1; padding: 0 1.1rem; }
.nlp-icon { width: 26px; height: 26px; fill: none; stroke: var(--nl-rot); stroke-width: 1.8; stroke-linejoin: round; margin-bottom: .15rem; }
.nlp-label { font-size: .7rem; font-weight: 700; color: var(--nl-rot); }
.nlp-titel { font: 800 1.06rem/1.05 var(--font-display); margin: .2rem 0 .35rem; }
.nlp-cta { font-size: .72rem; font-weight: 700; color: var(--acqua-tief); }
@media (max-width: 700px) { .nl-plakette { width: 128px; border-width: 7px; margin: -1rem 0 -.5rem auto; } .nlp-titel { font-size: .88rem; } .nlp-icon { width: 20px; height: 20px; } }
.nl-fusslink[hidden] { display: none; }
.nl-dialog { border: 0; padding: 0; width: min(500px, 94vw); border-radius: var(--r-gross); box-shadow: 0 30px 80px -20px rgb(20 34 35 / .55); color: var(--text); background: var(--flaeche); }
.nl-dialog::backdrop { background: rgb(20 34 35 / .5); backdrop-filter: blur(3px); }
.nl-dialog[open] { animation: nlAuf var(--dur-lang) var(--ease-out); }
@keyframes nlAuf { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.nl-kopf { background: var(--acqua); padding: var(--sp-8) var(--sp-8) var(--sp-6); position: relative; }
.nl-kopf h2 { margin: 0 0 .35rem; font-size: var(--fs-xl); }
.nl-kopf p { margin: 0; color: var(--text-leise); }
.nl-zu { position: absolute; top: .8rem; right: .8rem; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--flaeche); color: var(--text); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.nl-zu:hover { background: var(--rot); color: #fff; }
.nl-dialog form { padding: var(--sp-6) var(--sp-8) var(--sp-8); }
.nl-dialog .field input[type="email"], .nl-dialog .field input[type="text"] { width: 100%; }
.nl-dialog .form-hint { margin: .2rem 0 1rem; }
.nl-dialog [hidden] { display: none !important; }
.nl-fusslink { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }

/* Handy/Tablet: Knopf zum Mitgliederbereich neben „Menü“ */
.kopf-login { display: none; }
@media (max-width: 979px) {
  .kopf-login { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1.1rem; border-radius: var(--r-pill);
    background: var(--text); color: #fff; font: 700 1rem var(--font-text); text-decoration: none; position: relative; z-index: 61; }
  .kopf-login:hover { background: var(--rot); color: #fff; }
}
@media (max-width: 440px) { .kopf-login { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; flex: none; } .kopf-login span { display: none; } }

/* Web-App: Hinweis Mitteilungen */
.push-hinweis { position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 1000; max-width: 460px; margin: 0 auto;
  background: #1f1f1f; color: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.3); font-size: .95rem; line-height: 1.45; }
.push-hinweis p { margin: 0; }
.push-hinweis-knoepfe { display: flex; gap: 10px; justify-content: flex-end; margin-top: 10px; }
.push-hinweis button { font: inherit; font-weight: 600; border: 0; border-radius: 999px; padding: 8px 16px; background: #a8262b; color: #fff; cursor: pointer; }
.push-hinweis button.push-leise { background: transparent; color: #ddd; }

/* Roter Punkt neben der Überschrift (letzte Mitteilung) */
.neu-punkt { position: relative; display: inline-flex; align-items: center; vertical-align: super; margin-left: .25em; width: .42em; height: .42em;
  min-width: 14px; min-height: 14px; text-decoration: none; }
.neu-punkt-kern { position: absolute; inset: 0; border-radius: 50%; background: #e0262e; box-shadow: 0 0 0 2px #fff; }
.neu-punkt-kern::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #e0262e; animation: neu-puls 1.6s ease-out infinite; }
@keyframes neu-puls { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(2.8); opacity: 0; } }
.neu-punkt-text { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px); white-space: nowrap; max-width: min(70vw, 340px);
  overflow: hidden; text-overflow: ellipsis; background: #1f1f1f; color: #fff; font: 600 .95rem/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0; text-transform: none; padding: 6px 10px; border-radius: 8px; pointer-events: none; display: none; }
/* nur bei Maus/Tastatur einblenden – unsichtbar darf es die Seite nicht verbreitern (sonst rutscht am Handy alles) */
@media (hover: hover) { .neu-punkt:hover .neu-punkt-text { display: block; transform: translateX(-50%); } }
.neu-punkt:focus-visible .neu-punkt-text { display: block; transform: translateX(-50%); }
.neu-punkt:focus-visible { outline: 3px solid #9b6512; outline-offset: 4px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .neu-punkt-kern::after { animation: none; opacity: .3; transform: scale(1.8); } }

/* Web-App installieren: Anleitung für iPhone */
.app-hilfe { box-sizing: border-box; position: fixed; inset: 0; margin: auto; height: fit-content; width: min(460px, calc(100% - 24px)); border: 0; border-radius: 18px;
  padding: 22px 22px 18px; box-shadow: 0 24px 60px rgba(0,0,0,.3); color: #222; background: #fff; font-size: 1rem; line-height: 1.45; }
.app-hilfe::backdrop { background: rgba(20,20,20,.55); }
.app-hilfe h2 { margin: 0 0 14px; font-size: 1.3rem; }
.app-hilfe ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.app-hilfe li { display: flex; gap: 14px; align-items: center; }
.app-hilfe-symbol { flex: none; width: 46px; height: 46px; border-radius: 12px; background: #eef3f6; color: #0a7aff; display: grid; place-items: center;
  background-size: cover; background-position: center; }
.app-hilfe-knoepfe { margin: 18px 0 0; text-align: right; }
.app-hilfe-knoepfe button { font: inherit; font-weight: 700; border: 0; border-radius: 999px; padding: 10px 20px; background: #a8262b; color: #fff; cursor: pointer; }
[data-app-knopf][hidden] { display: none !important; }

/* Satzung: lesbarer Wortlaut mit Inhaltsverzeichnis */
.satzung { max-width: 860px; }
.satzung-pdf { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1.2rem 0 1.6rem; }
.satzung-pdf span { color: #666; font-size: .9rem; }
.satzung-inhalt { border-radius: 14px; padding: 1.1rem 1.3rem; margin: 0 0 2rem; background: rgba(168,38,43,.06); }
.satzung-inhalt h2 { font-size: 1.15rem; margin: 0 0 .6rem; }
.satzung-inhalt ol { list-style: none; margin: 0; padding: 0; columns: 2 280px; column-gap: 2rem; }
.satzung-inhalt li { break-inside: avoid; margin: 0 0 .35rem; }
.satzung-inhalt a { text-decoration: none; display: flex; gap: .3rem; }
.satzung-inhalt a:hover b, .satzung-inhalt a:hover { text-decoration: underline; }
.satzung-inhalt b { flex: none; min-width: 3.1em; color: #a8262b; }
.satzung-text-block > h2 { margin: 0 0 1rem; }
.satzung-par { scroll-margin-top: 110px; padding: 1.1rem 0 .4rem; border-top: 1px solid rgba(0,0,0,.1); }
.satzung-par h3 { display: flex; gap: .3rem; margin: 0 0 .7rem; font-size: 1.2rem; line-height: 1.3; }
.satzung-para { flex: none; min-width: 3.2em; color: #a8262b; }
.satzung-abs { list-style: none; margin: 0; padding: 0; }
.satzung-abs > li { display: flex; gap: .7rem; margin: 0 0 .7rem; line-height: 1.6; }
.satzung-abs > li > div { flex: 1; min-width: 0; }
.satzung-nr { flex: none; min-width: 1.6em; font-weight: 700; color: #a8262b; }
.satzung-liste { margin: .4rem 0 0; padding-left: 1.4rem; }
.satzung-liste li { margin: 0 0 .25rem; }
.satzung-hoch { margin: .2rem 0 .6rem; text-align: right; font-size: .85rem; }
.satzung-hoch a { color: inherit; opacity: .65; }
@media print { .satzung-pdf, .satzung-hoch, .satzung-inhalt { display: none; } .satzung-par { break-inside: avoid; } }

/* Bilder: Gruppenfoto oben */
.bilder-titel { margin: 0 0 2rem; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 40px -22px rgba(0,0,0,.45); }
.bilder-titel img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 62%; }
@media (max-width: 640px) { .bilder-titel { border-radius: 12px; margin-bottom: 1.4rem; } .bilder-titel img { aspect-ratio: 4 / 3; } }
/* Alben-Vorschau auf den Jahresseiten */
.album-vorschau { margin-top: 2.8rem; padding-top: 2.2rem; border-top: 1px solid rgba(0,0,0,.12); }
.alben-vorschau .album-vorschau:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.album-vorschau .gallery { margin-top: 1rem; }
.album-vorschau-mehr { text-align: center; margin: 1.3rem 0 0; }
.alben-schalter button[aria-pressed="true"] { color: var(--rot); }

/* Jahresseiten: Alben mit Schalter Kurzansicht / Mit Vorschau */
.alben-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; margin-bottom: 1.4rem; }
.alben-kopf h2 { margin: 0; }
.alben-schalter { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(0,0,0,.06); gap: 2px; }
.alben-schalter[hidden] { display: none; }
.alben-schalter button { font: inherit; font-size: .95rem; font-weight: 600; border: 0; background: transparent; color: inherit; padding: .45rem 1rem; border-radius: 999px; cursor: pointer; }
.alben-schalter button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.alben-schalter button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.alben-bereich [hidden] { display: none !important; }
.alben-vorschau { margin-top: 0; }
.album-vorschau h3 { font-size: 1.45rem; margin: 0 0 .6rem; }
.album-vorschau h3 a { color: inherit; text-decoration: none; }
.album-vorschau h3 a:hover, .album-vorschau h3 a:focus-visible { text-decoration: underline; text-underline-offset: .18em; }
@media (max-width: 520px) { .alben-schalter { width: 100%; } .alben-schalter button { flex: 1; } }

/* Club-Vespen: Teaser + Pop-up (Bilder nie beschnitten: ganzes Bild, Rand mit unscharfer Kopie gefüllt) */
.vespen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.vespe { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; margin: 0; text-align: left; font: inherit; color: inherit;
  cursor: pointer; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.vespe:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(0,0,0,.45); }
.vespe:focus-visible { outline: 3px solid #a8262b; outline-offset: 3px; }
.vespe-bild { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #e6e0d9; }
.vespe-bild::before { content: ""; position: absolute; inset: -24px; background: var(--hg) center / cover no-repeat; filter: blur(16px); opacity: .6; }
.vespe-bild img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; border: 0; border-radius: 0; aspect-ratio: auto; }
.vespe-text { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem .4rem; flex: 1; }
.vespe-name { font-size: 1.12rem; line-height: 1.25; }
.vespe-spitz { font-style: italic; }
.vespe-motto { font-size: .92rem; opacity: .85; }
.vespe-meta { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; font-size: .9rem; margin: .25rem 0 0; }
.vespe-nr { font-weight: 700; padding: .05rem .5rem; border-radius: 999px; background: rgba(0,0,0,.07); }
.vespe-mehr { padding: 0 1rem .9rem; font-size: .9rem; font-weight: 600; color: #a8262b; }
.vespe-mehr::after { content: " →"; }
.vespe-dlg { width: min(760px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0,0,0,.55); }
.vespe-dlg[open] { display: flex; flex-direction: column; }
.vespe-dlg::backdrop { background: rgba(20,14,10,.6); }
.vespe-dlg-kopf { display: flex; justify-content: flex-end; gap: .4rem; padding: .5rem; position: absolute; right: 0; top: 0; z-index: 2; }
.vespe-dlg-kopf button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #222; font-size: 1.4rem;
  line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.vespe-dlg-kopf button:focus-visible { outline: 3px solid #a8262b; }
.vespe-dlg-inhalt { overflow-y: auto; }
.vespe-detail-bild img { display: block; width: auto; max-width: 100%; height: auto; max-height: 58vh; object-fit: contain; border-radius: 0; aspect-ratio: auto; }
.vespe-detail-text { padding: 1.2rem 1.4rem 1.6rem; }
.vespe-detail-name { margin: 0 0 .2rem; font-size: 1.5rem; }
.vespe-detail-text .vespe-spitz { display: block; }
.vespe-detail-text .vespe-meta { margin-bottom: .8rem; }
.vespe-detail-text h4 { margin: 1.1rem 0 .3rem; }
.vespe-leer { opacity: .7; }
@media (max-width: 520px) { .vespe-dlg { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; } .vespe-detail-bild img { max-height: 45vh; } }
.vespe { background: var(--azzurro); border: 0; border-radius: var(--r-gross); }
.vespe-dlg { background: var(--flaeche); color: var(--text); }
.vespe-mehr { color: var(--rot); }

/* Club-Vespen Pop-up: Pastell statt Schwarz, Bild immer im gleichen Rahmen (Format egal) */
.vespe-dlg { --p1: #d6ecf8; --p2: #eef7fc; }
.vespe-dlg[data-pastell="1"] { --p1: #d3f0e3; --p2: #effaf4; }
.vespe-dlg[data-pastell="2"] { --p1: #f9dde5; --p2: #fdf1f4; }
.vespe-dlg[data-pastell="3"] { --p1: #fbefc8; --p2: #fdf9ec; }
.vespe-dlg[data-pastell="4"] { --p1: #e5def6; --p2: #f5f2fc; }
.vespe-dlg { background: linear-gradient(180deg, var(--p1) 0, var(--p2) 60%) !important; color: #23201d !important; }
.vespe-dlg .vespe-detail-bild { position: relative; aspect-ratio: 3 / 2; overflow: hidden; margin: 14px 14px 0; border-radius: 12px;
  background: var(--p1); box-shadow: 0 10px 30px -18px rgba(0,0,0,.4); }
.vespe-dlg .vespe-detail-bild::before { content: ""; position: absolute; inset: -30px; background: var(--hg) center / cover no-repeat;
  filter: blur(22px) saturate(1.1); opacity: .45; }
.vespe-dlg .vespe-detail-bild img { position: relative; width: 100%; height: 100%; max-height: none; object-fit: contain; }
.vespe-dlg .vespe-nr { background: rgba(255,255,255,.7); }
.vespe-dlg-kopf { padding: .9rem; }
.vespe-dlg-kopf button { background: rgba(255,255,255,.85); }
@media (max-width: 520px) { .vespe-dlg .vespe-detail-bild { margin: 10px 10px 0; } .vespe-dlg-kopf { padding: .6rem; } }
.vespe-dlg .vespe-detail-text h4 { font-size: 1.08rem; line-height: 1.3; margin: 1.1rem 0 .3rem; }

/* Club-Vespen Pop-up: Kopf mit Name/Nummer links, Bild rechts (klein genug, dass nichts hochskaliert wird), Text darunter */
.vespe-dlg { width: min(720px, 94vw); }
.vespe-dlg-kopf { position: static; padding: .7rem .8rem 0; }
.vespe-dlg-kopf button { width: 38px; height: 38px; font-size: 1.25rem; box-shadow: 0 1px 6px rgba(0,0,0,.18); }
.vespe-dlg .vespe-dlg-inhalt { padding: .4rem 1.5rem 1.6rem; }
.vespe-dlg-raster { display: grid; grid-template-columns: 1fr minmax(0, 320px); grid-template-areas: "kopf bild" "text text"; gap: 0 1.4rem; align-items: center; }
.vespe-dlg .vespe-detail-bild { grid-area: bild; margin: 0; aspect-ratio: 4 / 3; width: 100%; }
.vespe-detail-kopf { grid-area: kopf; align-self: center; }
.vespe-detail-kopf .vespe-detail-name { font-size: 1.7rem; line-height: 1.15; margin: 0 0 .3rem; }
.vespe-detail-kopf .vespe-spitz { display: block; font-size: 1.1rem; }
.vespe-detail-kopf .vespe-meta { margin: .6rem 0 0; }
.vespe-detail-kopf .vespe-nr { font-size: 1.05rem; padding: .15rem .65rem; }
.vespe-dlg .vespe-detail-text { grid-area: text; padding: 1.1rem 0 0; margin-top: 1.1rem; border-top: 1px solid rgba(0,0,0,.08); }
.vespe-dlg .vespe-detail-text > :first-child { margin-top: 0; }
@media (max-width: 560px) {
  .vespe-dlg-raster { grid-template-columns: 1fr; grid-template-areas: "bild" "kopf" "text"; }
  .vespe-dlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .vespe-dlg .vespe-dlg-inhalt { padding: .3rem 1rem 1.4rem; }
  .vespe-dlg .vespe-detail-bild { max-width: 340px; justify-self: center; margin-bottom: 1rem; }
  .vespe-detail-kopf .vespe-detail-name { font-size: 1.45rem; }
}