/* Skiclub Aichtal e.V. — öffentliches Design, 2026 */

:root {
  --color-red: #cc2900;          /* Rot des Vereinslogos */
  --color-red-dark: #a32100;
  --color-green: #385379;        /* Blau der Skiclub-Seite */
  --color-green-light: #4a6b95;
  --color-cream: #f1f8f8;
  --color-surface: #ffffff;
  --color-text: #010b14;
  --color-text-muted: #6b7785;
  --color-border: #dbe6ee;
  --shadow-sm: 0 1px 2px rgba(16, 32, 55, 0.06), 0 1px 3px rgba(16, 32, 55, 0.08);
  --shadow-md: 0 4px 12px rgba(16, 32, 55, 0.10), 0 2px 4px rgba(16, 32, 55, 0.06);
  --radius: 14px;
  --max-width: 1180px;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--color-text);
  background: var(--color-cream);
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-red); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* --- Header / Nav --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 1rem 1.25rem 0;
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.65rem 0.85rem 0.65rem 1.4rem;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 22px;
  box-shadow: 0 10px 34px -10px rgba(16, 32, 55, 0.28), 0 2px 8px rgba(16, 32, 55, 0.05);
  transition: box-shadow 0.2s ease;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  min-width: 0;
}

.brand img { height: 38px; width: auto; }

.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong { color: var(--color-red); font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; }
.brand__text span { color: var(--color-green); font-size: 0.8rem; font-weight: 600; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--color-green);
  padding: 0.25rem 0.5rem;
}

nav.main-nav { flex: 1; display: flex; justify-content: flex-end; }
nav.main-nav > ul {
  list-style: none;
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

nav.main-nav li { position: relative; }

nav.main-nav > ul > li > a,
nav.main-nav > ul > li > span.nav-label {
  display: block;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

nav.main-nav > ul > li > a:hover,
nav.main-nav > ul > li.is-open > span.nav-label {
  background: var(--color-green);
  color: #fff;
}
/* Aufklapp-Optik per Hover nur mit echter Maus. Auf Touch (iOS Safari)
   faengt Hover den ersten Tipp ab -- dann oeffnet das Untermenue nicht.
   Dort steuert allein der JS-Umschalter (.is-open). */
@media (hover: hover) {
  nav.main-nav > ul > li:hover > span.nav-label {
    background: var(--color-green);
    color: #fff;
  }
}

/* --- Header CTA-Gruppe (Instagram / Newsletter / Mitglied werden) --- */

.header-cta { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  color: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-icon:hover { transform: translateY(-1px); text-decoration: none; }
.btn-instagram {
  background: radial-gradient(circle at 30% 110%, #ffdb73 0%, #fdb32e 12%, #f2521f 35%, #d92d77 55%, #b6238e 70%, #6228d7 100%);
  box-shadow: 0 2px 8px rgba(217, 45, 119, 0.35);
}

/* --- Nav-Extras (Instagram/Newsletter), nur im mobilen Menü sichtbar --- */

.nav-extra {
  display: none;
}

nav.main-nav .submenu {
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  min-width: 240px;
  display: none;
  z-index: 60;
}

nav.main-nav li.is-open > .submenu { display: block; }
@media (hover: hover) {
  nav.main-nav li:hover > .submenu { display: block; }
}

nav.main-nav .submenu a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  color: var(--color-text);
  font-size: 0.92rem;
  font-weight: 500;
}
nav.main-nav .submenu a:hover { background: var(--color-cream); text-decoration: none; }

/* --- Hero --- */

.hero {
  position: relative;
  padding: 4.5rem 0 3.5rem;
  background: linear-gradient(160deg, var(--color-green) 0%, var(--color-green-light) 100%);
  color: #fff;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 20%, rgba(255,255,255,0.14), transparent 55%);
}
/* z-index ist hier entscheidend: .hero::after ist das letzte Kind und
   wuerde ohne diese Zeile UEBER dem Text liegen -- der abdunkelnde
   Verlauf legte sich dann auf die Schrift und liess das Weiss grau
   erscheinen. Der Verlauf gehoert ueber das Foto, nicht ueber den Text. */
.hero .container { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 0 0 0.9rem; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.hero p.lead { font-size: 1.15rem; max-width: 60ch; color: #fff; }

.hero--photo {
  padding: 4.5rem 0 3.5rem;
  background-size: cover;
  background-position: center 40%;
}
.hero--photo::after {
  /* Nur so viel Abdunklung, dass die Schrift links sicher lesbar bleibt –
     das Foto soll ein Foto bleiben und keine blaue Flaeche werden.
     Den Rest erledigt der Textschatten weiter unten. */
  background: linear-gradient(100deg, rgba(10, 24, 44, 0.42) 0%, rgba(10, 24, 44, 0.18) 42%, rgba(10, 24, 44, 0) 70%);
}
/* Der Schatten bleibt: er haelt die Schrift auch ueber hellen Stellen des
   Fotos lesbar, jetzt aber ohne das Weiss selbst abzudunkeln. */
.hero--photo h1, .hero--photo p.lead { text-shadow: 0 2px 18px rgba(6, 16, 30, 0.75), 0 1px 4px rgba(6, 16, 30, 0.6); }

/* Das Kopfbild nimmt Breite und Rundung der schwebenden Navigationsleiste
   auf: randlos wirkte es neben der eingerückten Leiste wie ein Fremdkörper. */
.hero--photo {
  max-width: var(--max-width);
  margin: 1rem auto 0;
  border-radius: 22px;
  overflow: hidden;
}

@media (max-width: 1240px) {
  .hero--photo { margin-left: 1.25rem; margin-right: 1.25rem; }
}

@media (max-width: 700px) {
  .hero--photo { margin-left: 0.75rem; margin-right: 0.75rem; border-radius: 16px; }
}

/* --- Seiten-Titelbild (Wandern, Familien, etc.) --- */

.page-banner { width: 100%; height: 320px; overflow: hidden; }
.page-banner img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .page-banner { height: 200px; } }

/* --- Themen-Galerie (Startseite) --- */

.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.9rem;
  margin-top: -2.4rem;
  position: relative;
  z-index: 2;
  margin-bottom: 1rem;
}
.topic-card {
  position: relative;
  display: block;
  aspect-ratio: 4/5;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.topic-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -10px rgba(38,36,32,0.32); text-decoration: none; }
.topic-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.topic-card:hover img { transform: scale(1.06); }
.topic-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,33,22,0) 45%, rgba(20,33,22,0.75) 100%);
}
.topic-card__label {
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.7rem;
  color: #fff;
  font-weight: 700;
  font-size: 0.94rem;
  z-index: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

@media (max-width: 600px) {
  .topic-grid { grid-template-columns: repeat(2, 1fr); margin-top: -1.6rem; }
}

/* --- Section layout --- */

/* Nur oben/unten: die Kurzschreibweise "3rem 0" setzte den seitlichen
   Innenabstand von .container auf null, auf dem Handy klebte der Text
   dadurch am Bildschirmrand. */
.section { padding-top: 3rem; padding-bottom: 3rem; }
.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.4rem;
  gap: 1rem;
}
.section-title h2 { font-size: 1.5rem; margin: 0; color: var(--color-red); }
.section-title a.more { font-weight: 600; font-size: 0.92rem; white-space: nowrap; }

.home-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 860px) { .home-grid { grid-template-columns: 1fr; } }

/* --- Cards --- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

.card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.card__body { padding: 1.1rem 1.25rem 1.4rem; flex: 1; display: flex; flex-direction: column; }
.card__date { color: var(--color-text-muted); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.card__title { font-size: 1.12rem; margin: 0.35rem 0 0.5rem; color: var(--color-text); font-weight: 700; }
.card__title a { color: inherit; }
.card__title a:hover { color: var(--color-red); text-decoration: none; }

/* Die ganze Kachel ist anklickbar: der Titel-Link legt eine unsichtbare
   Flaeche ueber die Karte. Ein zweiter echter Link waere doppelt in der
   Tastatur-Reihenfolge und im Screenreader, deshalb bleibt "Weiterlesen"
   reine Anzeige. Ohne CSS bleibt die Karte trotzdem bedienbar. */
.card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card:hover .card__title a { color: var(--color-red); }
.card:focus-within { box-shadow: var(--shadow-md); }
.card__title a:focus-visible { outline: 2px solid var(--color-red); outline-offset: 3px; }

.card__excerpt { color: var(--color-text-muted); font-size: 0.94rem; flex: 1; }
.card__link {
  margin-top: 0.8rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-red);
}
.card__link::after { content: ' \2192'; }

/* Bildbereich der Karte: eigener Link, damit auch das Bild zum Beitrag fuehrt */
.card__media { display: block; overflow: hidden; background: var(--color-cream); }
.card__media img { display: block; transition: transform 0.35s ease; }
.card:hover .card__media img { transform: scale(1.04); }

/* Karten ohne Bild bekommen einen schmalen Farbakzent, damit das Raster
   gleichmaessig wirkt und keine Luecke entsteht. */
.card--ohne-bild { border-top: 4px solid var(--color-red); }
.card--ohne-bild .card__body { padding-top: 1.25rem; }

/* --- Aktivitaeten-Seiten: Karten mit Navigation nach Jahren --- */

.jahr-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 2rem;
}
.jahr-nav a {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.jahr-nav a:hover {
  background: var(--color-red);
  border-color: var(--color-red);
  color: #fff;
  text-decoration: none;
}

.jahr-block { margin-bottom: 2.5rem; scroll-margin-top: 6.5rem; }
.jahr-block__titel {
  color: var(--color-green);
  font-size: 1.35rem;
  margin: 0 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--color-border);
}

.card--aktivitaet .card__body { padding: 1rem 1.15rem 1.15rem; }
.card--aktivitaet .card__title { font-size: 1.02rem; margin: 0.3rem 0 0; }
.card--aktivitaet .card__marke {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.14rem 0.5rem;
  border-radius: 4px;
  background: var(--color-cream);
  color: var(--color-text-muted);
}
.card--pdf .card__marke     { background: #fdece9; color: #b2371f; }
.card--beitrag .card__marke { background: #eef3ec; color: var(--color-green); }
.card--termin .card__marke  { background: #fdf3dd; color: #8a6414; }
/* Eintraege ohne Link sind reine Archiv-Notizen: ruhiger darstellen */
.card--text { background: transparent; box-shadow: none; border-style: dashed; }
.card--text:hover { transform: none; box-shadow: none; }
/* Aktivitaets-Karten richten sich oben aus, statt auf Nachbarhoehe zu wachsen */
.card--aktivitaet { align-self: start; }

/* --- Event list (sidebar + full page) --- */

.event-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.event-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
  overflow: hidden;
}
.event-item:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--color-green-light); }
.event-item__link {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  padding: 0.75rem 0.9rem;
  text-decoration: none;
  color: inherit;
}
.event-item__link:hover { text-decoration: none; }
.event-item__date {
  flex-shrink: 0;
  width: 56px;
  text-align: center;
  background: var(--color-red);
  color: #fff;
  border-radius: 10px;
  padding: 0.4rem 0.2rem;
  font-weight: 700;
}
.event-item__date .day { display: block; font-size: 1.25rem; line-height: 1; }
.event-item__date .month { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; }
.event-item__thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
}
.event-item__body { min-width: 0; }
.event-item__title { display: block; font-weight: 700; color: var(--color-text); }
.event-item__link:hover .event-item__title { color: var(--color-red); }
.event-item__meta { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.15rem; }

.sidebar-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}
.sidebar-box + .sidebar-box { margin-top: 1.5rem; }
.sidebar-box h3 { margin-top: 0; color: var(--color-green); font-size: 1.1rem; }

/* --- Content page --- */

.content-page h1 { color: var(--color-red); font-size: 2rem; margin-bottom: 1.2rem; }
.prose { font-size: 1.03rem; max-width: 72ch; }
.prose img { border-radius: 12px; margin: 1.2rem 0; box-shadow: var(--shadow-sm); }
/* Ausgeschriebene Webadressen in Meldungen (aus dem Mitteilungsblatt uebernommen)
   sind laenger als ein Handybildschirm breit ist. Ohne diese Regel schieben sie
   die ganze Seite nach rechts hinaus. */
.prose a, .card__text a { overflow-wrap: anywhere; }
.prose .anhang { font-weight: 600; }
/* Fotos im Beitragstext: <figure> hat im Browser ab Werk 40 Pixel Einzug
   links und rechts - der wirkt hier wie ein Versehen. */
.prose figure { margin: 1.4rem 0; }
.prose figure img { margin: 0; display: block; }
.prose figcaption { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.45rem; line-height: 1.4; }
.prose .bildnachweis { color: var(--color-text-muted); margin-top: 1.4rem; }
.prose h2 { color: var(--color-green); font-size: 1.35rem; margin-top: 2rem; }
.prose h3 { color: var(--color-green); font-size: 1.15rem; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  margin: 1.2rem 0;
  font-size: 0.92rem;
}
.prose table td, .prose table th {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  white-space: nowrap;
}
.prose blockquote {
  border-left: 4px solid var(--color-green-light);
  margin: 1.2rem 0;
  padding: 0.4rem 1rem;
  color: var(--color-text-muted);
  background: var(--color-cream);
  border-radius: 0 8px 8px 0;
}

.breadcrumb { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 1rem; }
.breadcrumb a { color: var(--color-text-muted); }

.document-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.document-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.7rem 1rem;
}
.document-list .doc-icon { color: var(--color-red); font-weight: 700; }
.document-list .doc-size { margin-left: auto; color: var(--color-text-muted); font-size: 0.85rem; }

/* --- Pagination --- */

/* Mit vielen Beitragsseiten passt die Blaetterleiste auf dem Handy nicht
   mehr in eine Zeile - sie muss umbrechen duerfen. */
.pagination { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.2rem; height: 2.2rem; padding: 0 0.5rem;
  border-radius: 8px; border: 1px solid var(--color-border);
  background: var(--color-surface); font-weight: 600; font-size: 0.9rem;
}
.pagination a:hover { background: var(--color-cream); text-decoration: none; }
.pagination .current { background: var(--color-red); color: #fff; border-color: var(--color-red); }

/* --- Termine: Ansichts-Umschalter (Liste/Monat/Jahr) --- */

.view-tabs { display: flex; gap: 0.4rem; margin: -0.4rem 0 1.6rem; }
.view-tabs a {
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
}
.view-tabs a:hover { color: var(--color-text); text-decoration: none; }
.view-tabs a.is-active { background: var(--color-red); color: #fff; border-color: var(--color-red); }

/* --- Termine: Monats-/Jahresansicht --- */

.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.calendar-nav h3 { margin: 0; color: var(--color-red); font-size: 1.3rem; min-width: 12ch; text-align: center; }
.calendar-nav .btn { padding: 0.45rem 0.9rem; }

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.month-grid__weekday {
  text-align: center;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-bottom: 0.4rem;
}
.month-grid__day {
  min-height: 96px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}
.month-grid__day--empty { background: transparent; border-color: transparent; }
.month-grid__day.is-today { border-color: var(--color-red); box-shadow: inset 0 0 0 1px var(--color-red); }
.month-grid__daynum { font-weight: 700; font-size: 0.85rem; color: var(--color-text-muted); }
.is-today .month-grid__daynum { color: var(--color-red); }
.month-grid__event {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-green);
  background: #eef3ec;
  border-radius: 5px;
  padding: 2px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.month-grid__event:hover { background: var(--color-green); color: #fff; text-decoration: none; }

@media (max-width: 700px) {
  .month-grid__day { min-height: 64px; font-size: 0.85rem; }
  .month-grid__event { font-size: 0; padding: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--color-red); }
}

.year-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.2rem;
}
.mini-month {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease;
}
.mini-month:hover { box-shadow: var(--shadow-md); }
.mini-month__header { text-decoration: none; color: inherit; }
.mini-month__header:hover h4 { color: var(--color-red-dark); }
.mini-month h4 { margin: 0 0 0.6rem; color: var(--color-red); font-size: 0.98rem; text-align: center; }
.mini-month__grid-link { display: block; text-decoration: none; color: inherit; }
.mini-month__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* Feste Zeilenzahl: Kopfzeile + 6 Wochen. Manche Monate belegen nur 5
     Wochen; ohne feste Zeilen säße die Trennlinie darunter dann höher als
     bei den Nachbarmonaten. */
  grid-template-rows: auto repeat(6, 1.45em);
  gap: 2px;
}
.mini-month__weekday { text-align: center; font-size: 0.62rem; color: var(--color-text-muted); font-weight: 700; }
.mini-month__grid span:not(.mini-month__weekday) {
  text-align: center;
  font-size: 0.72rem;
  color: var(--color-text);
  border-radius: 4px;
  padding: 2px 0;
}
.mini-month__grid .has-event { background: #eef3ec; color: var(--color-green); font-weight: 700; }
.mini-month__grid .is-today { box-shadow: inset 0 0 0 1px var(--color-red); font-weight: 700; }

.mini-month__events {
  list-style: none;
  margin: 0.7rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}
.mini-month__events a {
  display: flex;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.3;
}
.mini-month__events a:hover { color: var(--color-red); }
.mini-month__event-date { flex-shrink: 0; font-weight: 700; color: var(--color-green); }
/* Lange Termintitel ("Jahreshauptversammlung") muessen innerhalb der Kachel
   umbrechen. Ohne min-width:0 weigert sich ein Flex-Element zu schrumpfen und
   der Text laeuft ueber den Rand hinaus. */
.mini-month, .year-grid > * { min-width: 0; }
.mini-month__events li { min-width: 0; }
.mini-month__events a {
  min-width: 0;
  overflow-wrap: break-word;   /* bricht nur, wenn es sonst überläuft */
  hyphens: auto;               /* trennt dabei nach deutschen Silben */
}
.mini-month__empty { font-size: 0.76rem; color: var(--color-text-muted); font-style: italic; }

/* --- Footer --- */

.site-footer { background: var(--color-surface); color: var(--color-text); margin-top: 3rem; border-top: 1px solid var(--color-border); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  padding-top: 3rem;
  padding-bottom: 2rem;
}
.footer-grid h4 { color: var(--color-green); font-size: 0.95rem; margin: 0 0 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.footer-grid a { color: var(--color-text); font-size: 0.92rem; }
.footer-grid a:hover { color: var(--color-red); }
.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}


/* --- Eingebettete Fremdinhalte (Vereinskalender, Buchungen) --- */

/* Der Fliesstext ist auf 72 Zeichen begrenzt, das ist gut zu lesen. Ein
   Kalender braucht dagegen die volle Breite – deshalb weitet sich der
   Textbereich, sobald eine Einbettung darin steckt. */
.prose:has(.einbettung) {
  max-width: none;
}

.einbettung {
  width: 100%;
  margin: 1.5rem 0;
  /* Kein eigener Kasten: die Vivlico-Karte bringt ihre eigene Optik mit,
     ein grauer Rahmen darum wirkt wie ein Fremdkoerper. */
}

.einbettung iframe {
  width: 100%;
  border: 0;
  display: block;
}

/* Sicherheitsnetz: Eine Vivlico-Einbettung darf nie winzig werden – auch
   dann nicht, wenn sie beim Bearbeiten im Editor ihren Rahmen und das
   Groessen-Skript verliert (der Editor macht daraus ein "ql-video" ohne
   Hoehe). Diese Regel gilt fuer jeden Vivlico-Rahmen, egal wie er verpackt
   ist; das Groessen-Skript (site.js) hebt die Hoehe danach bei Bedarf an. */
.prose:has(iframe[src*="vivlico.com"]) { max-width: none; }
iframe[src*="vivlico.com"] {
  width: 100%;
  min-height: 400px;      /* nur noch Notfall-Boden gegen "mini"; die Bridge
                             (site.js) setzt sonst die echte Hoehe */
  border: 0;
  display: block;
  margin: 1.5rem 0;
  background: transparent; /* durchsichtig - kein grauer Kasten hinter der Karte */
}

/* --- Bildergalerie --- */

.bildergalerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.bildergalerie a {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.bildergalerie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  transition: transform 0.35s ease;
}

.bildergalerie a:hover img {
  transform: scale(1.04);
}

.prose:has(.bildergalerie) {
  max-width: none;
}

/* --- Buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  border: none;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--color-red); color: #fff; }
.btn-primary:hover { background: var(--color-red-dark); }
.btn-outline { background: transparent; color: var(--color-green); border: 1.5px solid var(--color-green); }
.btn-outline:hover { background: var(--color-green); color: #fff; }

/* --- Responsive nav --- */

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  nav.main-nav {
    display: none;
    width: 100%;
    order: 3;
  }
  nav.main-nav.is-open { display: block; }
  .site-header__bar { flex-wrap: wrap; }
  nav.main-nav > ul { flex-direction: column; align-items: stretch; }
  nav.main-nav .submenu { position: static; box-shadow: none; border: none; display: none; padding-left: 1rem; }
  nav.main-nav li.is-open > .submenu { display: block; }

  .header-cta__instagram, .header-cta__newsletter { display: none; }

  .nav-extra {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--color-border);
  }
  .nav-extra a {
    flex: 1;
    text-align: center;
    padding: 0.55rem 0.7rem;
    border-radius: 999px;
    background: var(--color-cream);
    color: var(--color-text) !important;
    font-weight: 600;
    font-size: 0.88rem;
  }
  .nav-extra a:hover { background: var(--color-green); color: #fff !important; text-decoration: none; }
}

/* --- 404 --- */
.error-page { text-align: center; padding: 5rem 0; }
.error-page h1 { font-size: 3rem; color: var(--color-red); margin-bottom: 0.5rem; }

/* ------------------------------------------------------------------
   Kalender und Teilen bei Terminen
   ------------------------------------------------------------------ */
.termin-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
}
.btn-aktion {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.05rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn-aktion:hover { border-color: var(--color-green); text-decoration: none; }
.btn-aktion--stark {
  background: var(--color-green);
  border-color: var(--color-green);
  color: #fff;
}
.btn-aktion--stark:hover { background: var(--color-green-dark, #2a4463); color: #fff; }
.btn-aktion--whatsapp:hover { border-color: #25d366; color: #128c3e; }

.termin-abo-hinweis {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.kalender-abo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin: 1.5rem 0 0.5rem;
  padding: 1.1rem 1.35rem;
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.kalender-abo__text { flex: 1 1 18rem; min-width: 0; }
.kalender-abo__text strong { display: block; margin-bottom: 0.2rem; }
.kalender-abo__text p { margin: 0; font-size: 0.92rem; color: var(--color-text-muted); }
.kalender-abo__aktionen { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.kalender-abo__hilfe { flex-basis: 100%; font-size: 0.88rem; color: var(--color-text-muted); }
.kalender-abo__hilfe summary { cursor: pointer; font-weight: 600; }
.kalender-abo__hilfe p { margin: 0.6rem 0 0; line-height: 1.7; }
.kalender-abo__hilfe code {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  font-size: 0.85em;
  word-break: break-all;
}

/* ------------------------------------------------------------------
   Anmeldung zu Terminen
   ------------------------------------------------------------------ */
.termin-leitung {
  margin-top: 1.2rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}
.anmeldung {
  margin-top: 2.5rem;
  padding: 1.5rem;
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.anmeldung h2 { margin-top: 0; font-size: 1.35rem; }
.anmeldung__hinweis { font-weight: 600; }
.anmeldung__plaetze { color: var(--color-text-muted); font-size: 0.95rem; }
.anmeldung__fehler {
  background: #fbe7e7;
  border: 1px solid #f0c1c1;
  color: #8a1c2e;
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
}
.anmeldung__fehler p { margin: 0.2rem 0; font-weight: 600; }
.anmeldung__formular { margin-top: 1.2rem; }
.anmeldung__formular .feld { margin-bottom: 1.1rem; border: none; padding: 0; }
.anmeldung__formular label,
.anmeldung__formular legend { display: block; font-weight: 700; font-size: 0.92rem; margin-bottom: 0.3rem; }
.anmeldung__formular small { display: block; color: var(--color-text-muted); font-size: 0.85rem; margin-bottom: 0.4rem; }
.anmeldung__formular input[type=text],
.anmeldung__formular input[type=email],
.anmeldung__formular input[type=tel],
.anmeldung__formular textarea {
  width: 100%;
  max-width: 32rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
}
#weitere-personen input { margin-bottom: 0.5rem; }
.anmeldung__datenschutz { color: var(--color-text-muted); font-size: 0.85rem; margin-top: 1rem; }

/* Honigtopf gegen Formularroboter: fuer Menschen unsichtbar, aber nicht
   per display:none, damit auch einfache Roboter es ausfuellen. */
.anmeldung__falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.meldung { max-width: 44rem; }
.meldung--erfolg h1 { color: var(--color-green); }

/* ------------------------------------------------------------------
   Helferliste
   ------------------------------------------------------------------ */
.helfen-einleitung { max-width: 46rem; color: var(--color-text-muted); }

.dienste { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.dienst {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 1.1rem 1.25rem;
}
.dienst--voll { background: var(--color-cream); }
.dienst__kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: flex-start;
}
.dienst__kopf h3 { margin: 0; font-size: 1.1rem; }
.dienst__zeit { color: var(--color-green); font-weight: 600; font-size: 0.92rem; margin-top: 0.15rem; }
.dienst__hinweis { color: var(--color-text-muted); font-size: 0.9rem; margin-top: 0.25rem; }
.dienst__stand { text-align: right; white-space: nowrap; }
.dienst__stand strong { display: block; font-size: 1.05rem; }
.dienst__stand span { color: var(--color-text-muted); font-size: 0.85rem; }
.dienst--voll .dienst__stand strong { color: var(--color-text-muted); }

.dienst__helfer {
  list-style: none;
  padding: 0;
  margin: 0.9rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.dienst__helfer li {
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  font-size: 0.88rem;
}
.dienst--voll .dienst__helfer li { background: var(--color-surface); }

.dienst__eintragen { margin-top: 1rem; }
.dienst__eintragen summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--color-red);
  padding: 0.3rem 0;
}
.dienst__eintragen form { margin-top: 0.8rem; max-width: 32rem; }
.dienst__eintragen .feld { margin-bottom: 0.9rem; }
.dienst__eintragen label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.25rem; }
.dienst__eintragen small { display: block; color: var(--color-text-muted); font-size: 0.83rem; margin-top: 0.25rem; }
.dienst__eintragen input[type=text],
.dienst__eintragen input[type=email],
.dienst__eintragen input[type=tel] {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
}
.dienst__voll-hinweis { margin: 0.9rem 0 0; color: var(--color-text-muted); font-size: 0.9rem; }

/* ------------------------------------------------------------------
   Formulare: Mitglied werden, Mitgliederbereich, Newsletter
   ------------------------------------------------------------------ */
.einleitung { max-width: 46rem; font-size: 1.05rem; color: var(--color-text-muted); }
.formular { max-width: 44rem; margin-top: 1.5rem; }
.formular--eng { max-width: 32rem; }
.formular fieldset {
  /* Browser geben fieldset "min-width: min-content" -- ohne diese Zeile
     wird es nie schmaler als sein Inhalt und laeuft auf dem Handy seitlich
     ueber (gemessen: 433 statt 375 px). */
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem 0.4rem;
  margin: 0 0 1.4rem;
  background: var(--color-surface);
}
.formular legend { font-weight: 800; font-size: 1.05rem; padding: 0 0.4rem; color: var(--color-green); }
.formular .feld { margin-bottom: 1rem; }
.formular .feld label, .feld__name { display: block; font-weight: 700; font-size: 0.92rem; margin-bottom: 0.3rem; }
.formular label small { font-weight: 400; color: var(--color-text-muted); }
.feld__hinweis { color: var(--color-text-muted); font-size: 0.88rem; margin: 0 0 0.9rem; }
.formular input[type=text], .formular input[type=email], .formular input[type=tel],
.formular input[type=date], .formular input[type=password], .formular select, .formular textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 1rem;            /* 16 px: sonst zoomt das iPhone beim Antippen */
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
}
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.feld-reihe--plz { grid-template-columns: 7rem 1fr; }
.feld--schmal { max-width: 14rem; }
@media (max-width: 560px) {
  .feld-reihe { grid-template-columns: 1fr; }
  .feld-reihe--plz { grid-template-columns: 6rem 1fr; }
}

.wahl-liste { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.wahl {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.2rem 0.7rem;
  align-items: center;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
}
.wahl:has(input:checked) { border-color: var(--color-green); background: #f1f6f1; }
.wahl__text { font-weight: 600; }
.wahl__preis { color: var(--color-green); font-weight: 700; white-space: nowrap; }
@media (max-width: 560px) {
  .wahl { grid-template-columns: auto 1fr; }
  .wahl__preis { grid-column: 2; }
}
.wahl-zeile { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.wahl-zeile label { font-weight: 400; display: inline-flex; align-items: center; gap: 0.35rem; }

.haekchen { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0 0 1rem; line-height: 1.5; cursor: pointer; }
/* Der Text steckt in einem eigenen span: ohne ihn zerfaellt er rund um
   einen Link in mehrere schmale Flex-Spalten. */
.haekchen > span { flex: 1; min-width: 0; overflow-wrap: break-word; }
.haekchen input { margin-top: 0.3rem; flex-shrink: 0; width: 1.1rem; height: 1.1rem; }
.sepa-text { font-size: 0.88rem; color: var(--color-text-muted); line-height: 1.55; }
.btn-gross { font-size: 1.05rem; padding: 0.8rem 1.6rem; }

.mw-wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 1.5rem 0; max-width: 44rem; }
.mw-wege > div { background: var(--color-cream); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.9rem 1.1rem; }
.mw-wege strong { display: block; margin-bottom: 0.2rem; }
.mw-wege span { font-size: 0.92rem; color: var(--color-text-muted); }

.formular details summary { cursor: pointer; font-weight: 700; color: var(--color-red); margin-bottom: 0.8rem; }
.angehoerige-zeile { display: grid; grid-template-columns: 8rem 1fr 1fr 10rem 8rem; gap: 0.5rem; align-items: center; margin-bottom: 0.6rem; }
.angehoerige-zeile__art { font-weight: 600; font-size: 0.9rem; }
@media (max-width: 760px) {
  .angehoerige-zeile { grid-template-columns: 1fr 1fr; padding-bottom: 0.7rem; border-bottom: 1px solid var(--color-border); }
  .angehoerige-zeile__art { grid-column: 1 / -1; }
}
.anmeldung__fehler ul { margin: 0.3rem 0 0; padding-left: 1.2rem; }

.bereich-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.bereich-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.5rem; margin-top: 1rem; }
.bereich-karte { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.bereich-karte h2 { margin-top: 0; font-size: 1.2rem; }
.bereich-karte h3 { font-size: 1rem; margin: 1.4rem 0 0.4rem; }
.angaben { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0; }
.angaben dt { color: var(--color-text-muted); font-size: 0.9rem; }
.angaben dd { margin: 0; font-weight: 600; }
.angehoerige-liste { list-style: none; padding: 0; margin: 0; }
.angehoerige-liste li { padding: 0.3rem 0; border-bottom: 1px solid var(--color-border); }
.angehoerige-liste span { display: block; font-size: 0.85rem; color: var(--color-text-muted); }
.meldung-kasten { padding: 0.8rem 1rem; border-radius: 8px; margin: 1rem 0; font-weight: 600; }
.meldung-kasten--erfolg { background: #e5f3e6; color: #2b5d31; border: 1px solid #bfe0c2; }
.meldung-kasten--fehler { background: #fbe7e7; color: #8a1c2e; border: 1px solid #f0c1c1; }

/* Ansprechpartner: lange E-Mail-Adressen duerfen auf dem Handy umbrechen. */
.termin-leitung a { overflow-wrap: anywhere; }

/* Rasterfelder duerfen schmaler werden als ihr breitester Inhalt, sonst
   schiebt ein langes Wort die Spalte ueber den Bildschirmrand (Handy). */
.home-grid > * { min-width: 0; }

/* Startseite: die drei neuesten Beitraege nebeneinander, nie 2 + 1.
   Die Spalte neben den Terminen ist schmal, deshalb etwas knapper gesetzt. */
.card-grid--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.card-grid--drei .card__body { padding: 0.9rem 1rem 1.1rem; }
.card-grid--drei .card__title { font-size: 1rem; line-height: 1.3; overflow-wrap: break-word; }
.card-grid--drei .card__excerpt {
  font-size: 0.88rem;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 560px) { .card-grid--drei { grid-template-columns: 1fr; } }

/* Mitglied werden: angekuendigte Beitragsaenderung unter der Beitragsliste */
.beitrag-hinweis {
  margin: 0.8rem 0 0; padding: 0.6rem 0.85rem; border-radius: 8px;
  background: var(--color-cream); border: 1px solid var(--color-border);
  font-size: 0.92rem; line-height: 1.5;
}