/* Schriften liegen lokal im Ordner fonts/ (keine Verbindung zu Google-Servern). Lizenz: SIL Open Font License. */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/barlow-400.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/barlow-500.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/barlow-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/barlow-condensed-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/barlow-condensed-700.woff2) format('woff2'); }
/* Falkenrott Blomberg
   Gestaltung: Schwarz-Weiß wie auf Vereins-Shirts und Stickern, dazu das Blau der Schärpe als einzige
   Akzentfarbe. Schmale, kräftige Überschriften (wie der Shirt-Schriftzug), kompakte Raster statt großer Kacheln.
   Diese Datei enthält nur, was die Website braucht. Alles für die Verwaltung steht in admin.css und wird erst
   geladen, wenn jemand die Verwaltung öffnet. */
:root {
  --ink: #14161a;
  --ink-soft: #23262d;
  --paper: #ffffff;
  --mist: #f1f3f6;
  --line: #dde1e7;
  --slate: #58606c;
  --sash: #1d4f9f;
  --on-sash: #ffffff;
  --sash-ink: color-mix(in srgb, var(--sash) 80%, #000);
  --sash-soft: color-mix(in srgb, var(--sash) 9%, #fff);
  --ok: #1b7a47;
  --warn: #8a5300;
  --danger: #b3261e;
  --font-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wrap: 1120px;
  --gutter: 20px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.has-modal { overflow: hidden; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--font-body); }
img, svg { max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--sash); text-underline-offset: 3px; }
a:hover { color: var(--sash-ink); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--sash); outline-offset: 2px; border-radius: 3px; }
[hidden] { display: none !important; }
main:focus { outline: none; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.wrap-narrow { max-width: 780px; }
.center { text-align: center; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.skip-link { position: absolute; left: 12px; top: -60px; background: var(--paper); color: var(--ink); padding: 8px 14px; border-radius: 6px; z-index: 200; }
.skip-link:focus { top: 12px; }
.linklike { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* ---------- Überschriften ---------- */
.h-page, .h-section, .adm-title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.012em; line-height: 1.02; text-wrap: balance; }
.h-page { font-size: clamp(2.3rem, 6vw, 3.3rem); }
.h-section { font-size: clamp(1.8rem, 4vw, 2.25rem); }
.h-post { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 5.4vw, 3rem); line-height: 1.06; text-wrap: balance; }
.h-sub { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.15; margin-bottom: 12px; }
.kicker { font-weight: 600; color: var(--sash); margin-bottom: 4px; }
/* ---------- Knöpfe ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border: 1.5px solid transparent; border-radius: 6px; font: 600 1rem/1.2 var(--font-body); text-decoration: none; cursor: pointer; background: transparent; color: var(--ink); }
.btn svg { flex: none; }
.btn-sm { padding: 6px 11px; font-size: 0.9rem; }
.btn-lg { padding: 13px 24px; font-size: 1.06rem; }
.btn-accent { background: var(--sash); color: var(--on-sash); }
.btn-accent:hover { background: var(--sash-ink); color: var(--on-sash); }
.btn-outline { border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-outline-light { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--ink); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--mist); color: var(--ink); }
.btn-ghost:hover { background: rgba(20, 22, 26, 0.07); color: var(--ink); }
.btn-ghost-light { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn[disabled] { opacity: 0.4; cursor: default; }
/* ---------- Kopfzeile ---------- */
.admin-bar { background: var(--sash); color: var(--on-sash); font-size: 0.9rem; }
.admin-bar-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-block: 6px; }
.admin-bar a { color: inherit; }
.admin-bar-links { display: flex; gap: 16px; }
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--ink); color: #fff; }
.header-row { display: flex; align-items: center; gap: 28px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; margin-right: auto; }
.brand:hover { color: inherit; }
.emblem { display: block; width: 46px; height: auto; flex: none; }
img.emblem { width: auto; height: 40px; max-width: 120px; object-fit: contain; }
.brand-text { display: grid; line-height: 1; }
.brand-name { font: 700 1.55rem/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; }
.main-nav { display: flex; gap: 4px; }
.main-nav a { color: rgba(255, 255, 255, 0.82); text-decoration: none; font-weight: 500; padding: 8px 12px; border-radius: 6px; }
.main-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.main-nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 #fff; border-radius: 0; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.nav-toggle { display: none; background: none; border: 0; color: inherit; padding: 8px; margin-right: -8px; cursor: pointer; }
.mobile-nav { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-block: 8px 20px; }
.mobile-nav nav a { display: block; color: #fff; text-decoration: none; font: 600 1.5rem/1.2 var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.mobile-nav-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.site-header.is-light { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); }
.is-light .main-nav a { color: var(--slate); }
.is-light .main-nav a:hover { color: var(--ink); background: var(--mist); }
.is-light .main-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.is-light .mobile-nav { border-top-color: var(--line); }
.is-light .mobile-nav nav a { color: var(--ink); border-bottom-color: var(--line); }
.site-header:not(.is-light) :focus-visible, .hero :focus-visible, .site-footer :focus-visible, .band-insta :focus-visible, .band-join :focus-visible, .admin-bar :focus-visible, .lightbox :focus-visible, .consent-bar :focus-visible, .adm-side :focus-visible, .login-back:focus-visible { outline-color: #fff; }
/* ---------- Startseite: Kopfbereich ---------- */
.hero { background: var(--ink); color: #fff; padding-block: 36px 44px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.lockup { display: block; width: 100%; max-width: var(--lk-w, 440px); height: auto; margin: -8px 0 6px -6px; }
.lockup text { fill: #fff; font-family: var(--font-display); text-transform: uppercase; }
.lockup-main { font-weight: 700; font-size: 112px; letter-spacing: 5px; }
.lockup-sub { font-weight: 600; font-size: 33px; letter-spacing: 6px; opacity: 0.85; }
.hero-text { font-size: 1.12rem; color: rgba(255, 255, 255, 0.82); max-width: 33em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hero-media img { display: block; width: 100%; border-radius: 6px; }
.hero-media figcaption { font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); margin-top: 8px; }
/* ---------- Bereiche ---------- */
.band { padding-block: 56px; }
.band-tight { padding-block: 26px 64px; }
.band-mist { background: var(--mist); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.more-link { font-weight: 600; white-space: nowrap; }
.page-head { padding-block: 40px 0; }
.page-lead { font-size: 1.12rem; color: var(--slate); max-width: 40em; margin-top: 8px; }
.empty { color: var(--slate); padding: 24px 0; }
.center-row { display: flex; justify-content: center; margin-top: 32px; }
.notice { background: #fff6e0; border: 1px solid #f0d998; color: #5c4200; padding: 10px 14px; border-radius: 6px; margin: 12px 0; font-size: 0.95rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip { border: 1.5px solid var(--line); background: var(--paper); border-radius: 999px; padding: 5px 15px; font-weight: 600; font-size: 0.94rem; cursor: pointer; font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
/* ---------- Beiträge ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 26px; }
.post-card { min-width: 0; }
.post-card-media { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 6px; background: var(--mist); color: var(--line); }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; }
.post-card-media.is-empty { display: grid; place-items: center; }
.emblem-ghost { width: 42%; color: #c9ced6; }
.post-card-count { position: absolute; left: 8px; bottom: 8px; background: rgba(20, 22, 26, 0.82); color: #fff; font-size: 0.78rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; }
.post-card-date { font-size: 0.86rem; color: var(--slate); margin-top: 12px; font-variant-numeric: tabular-nums; }
.post-card-title { font: 600 1.5rem/1.14 var(--font-display); margin: 2px 0 6px; text-wrap: balance; }
.post-card-title a { color: var(--ink); text-decoration: none; }
.post-card-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.post-card-text { font-size: 0.97rem; color: var(--slate); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post { padding-block: 28px 64px; }
.back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--slate); text-decoration: none; font-weight: 500; font-size: 0.96rem; margin-bottom: 18px; }
.back-link:hover { color: var(--ink); }
.back-link svg { width: 18px; height: 18px; }
.post-meta { color: var(--slate); font-size: 0.98rem; margin-bottom: 6px; }
.post-meta-sep::before { content: ''; display: inline-block; width: 1px; height: 0.9em; background: var(--line); margin: 0 10px; vertical-align: -1px; }
.edit-link { font-weight: 600; font-size: 0.95rem; }
.post-cover { display: block; width: 100%; padding: 0; border: 0; background: none; margin: 22px 0 26px; cursor: zoom-in; }
.post-cover img { display: block; max-width: 100%; height: auto; margin-inline: auto; border-radius: 6px; }
.prose { font-size: 1.08rem; line-height: 1.7; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font: 600 1.5rem/1.2 var(--font-display); margin-top: 1.7em; }
.prose h3 { font: 600 1.2rem/1.25 var(--font-display); margin-top: 1.4em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.35em; }
.prose ul { padding-left: 1.2em; list-style: disc; }
.prose li + li { margin-top: 0.3em; }
.prose-post { font-size: 1.14rem; }
.prose-legal { font-size: 1rem; }
.prose-legal h2:first-child { margin-top: 0; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.photo { display: block; padding: 0; border: 0; background: var(--mist); border-radius: 6px; overflow: hidden; aspect-ratio: 1; cursor: zoom-in; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post .h-sub { margin-top: 34px; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-top: 1px solid var(--line); margin-top: 44px; padding-top: 20px; }
.post-nav-link { display: grid; gap: 2px; text-decoration: none; color: var(--ink); min-width: 0; }
.post-nav-link span { font-size: 0.86rem; color: var(--slate); }
.post-nav-link strong { font: 600 1.2rem/1.2 var(--font-display); }
.post-nav-link:hover strong { text-decoration: underline; }
.post-nav-link.is-next { text-align: right; }
/* ---------- Termine ---------- */
.event-list-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.event-row { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.event-list > .event-row:last-child { border-bottom: 1px solid var(--line); }
.event-list-cols > .event-row:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line); }
.event-date { background: var(--ink); color: #fff; border-radius: 6px; text-align: center; padding: 6px 2px 5px; line-height: 1; }
.event-day { display: block; font: 700 1.55rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.event-day small { font-size: 0.6em; opacity: 0.8; margin-left: 1px; }
.event-month { display: block; font-size: 0.74rem; font-weight: 500; margin-top: 3px; opacity: 0.85; }
.event-title { font-size: inherit; font-weight: 600; line-height: 1.3; }
.event-row.is-past { opacity: 0.55; }
.month-h { font: 600 1.25rem/1.2 var(--font-display); color: var(--slate); margin: 26px 0 8px; }
.h-sub + .month-h { margin-top: 4px; }
.past-events { margin-top: 36px; border-top: 1px solid var(--line); padding-top: 16px; }
.past-events summary { cursor: pointer; font-weight: 600; color: var(--slate); }
/* ---------- Instagram ---------- */
.band-insta { background: var(--ink); color: #fff; }
.insta-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; margin-bottom: 22px; }
.insta-sub { color: rgba(255, 255, 255, 0.75); margin-top: 6px; }
.insta-sub strong { color: #fff; }
.insta-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.35) transparent; }
.insta-tile { position: relative; flex: 0 0 min(232px, 62vw); aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--ink-soft); scroll-snap-align: start; color: #fff; }
.insta-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.insta-tile-icon { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(20, 22, 26, 0.6); }
.insta-tile-icon svg { width: 17px; height: 17px; }
.insta-tile-cap { position: absolute; inset: auto 0 0 0; padding: 26px 10px 9px; font-size: 0.82rem; line-height: 1.3; background: linear-gradient(transparent, rgba(10, 12, 16, 0.86)); }
.insta-note, .insta-loading { font-size: 0.88rem; color: rgba(255, 255, 255, 0.6); margin-top: 6px; }
.insta-loading a, .insta-consent a { color: #fff; }
.insta-consent { border: 1.5px dashed rgba(255, 255, 255, 0.3); border-radius: 8px; padding: 24px; display: grid; gap: 14px; justify-items: start; }
.insta-consent p { max-width: 46em; color: rgba(255, 255, 255, 0.8); font-size: 0.96rem; }
.insta-row.is-embed { align-items: flex-start; }
.insta-embed { flex: 0 0 min(330px, 86vw); background: #fff; border-radius: 6px; overflow: hidden; min-height: 120px; }
.insta-embed blockquote { margin: 0; padding: 16px; }
/* ---------- Chronik, Mitglied werden ---------- */
.chronik { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 44px; align-items: center; }
.chronik-media img { display: block; width: 100%; border-radius: 6px; }
.chronik-copy .h-section { margin-bottom: 14px; }
.band-join { background: var(--sash); color: var(--on-sash); position: relative; overflow: hidden; padding-block: 44px; }
.band-join::before { content: ''; position: absolute; right: -90px; top: 50%; width: 460px; height: 460px; transform: translateY(-50%); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 22px, currentColor 22px 26px); opacity: 0.1; pointer-events: none; }
.join-row { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 40px; }
.join-text { max-width: 38em; margin-top: 8px; opacity: 0.92; }
.band-join .btn-accent { background: #fff; color: var(--ink); }
.band-join .btn-accent:hover { background: var(--mist); }
/* ---------- Galerie ---------- */
.gallery { columns: 3; column-gap: 12px; }
.gallery .photo { aspect-ratio: auto; width: 100%; }
.gallery .photo img { height: auto; }
/* ---------- Formulare ---------- */
.form { display: block; }
.field { display: grid; gap: 6px; margin-bottom: 16px; min-width: 0; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
label, .label { font-weight: 600; font-size: 0.95rem; }
.req { font-weight: 400; color: var(--slate); font-size: 0.82rem; margin-left: 6px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="date"], select, textarea, input[type="time"] { width: 100%; padding: 10px 12px; border: 1.5px solid #b9bfc9; border-radius: 6px; background: #fff; color: var(--ink); line-height: 1.4; }
textarea { resize: vertical; min-height: 84px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--sash); }
.hint { font-size: 0.88rem; color: var(--slate); font-weight: 400; }
.hint code { background: var(--mist); padding: 1px 5px; border-radius: 4px; font-size: 0.92em; }
.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 0.96rem; margin-bottom: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: var(--sash); }
.hp { position: absolute; left: -9999px; }
.form-error { background: #fdecea; color: #8c1d18; border-radius: 6px; padding: 10px 14px; margin-bottom: 14px; font-size: 0.96rem; }
.form-done { background: var(--sash-soft); border-radius: 8px; padding: 28px; }
.form-done-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ok); color: #fff; margin-bottom: 12px; }
.form-done-note { font-size: 0.88rem; color: var(--slate); margin-top: 10px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 44px; align-items: start; }
.contact-card { background: var(--mist); border-radius: 8px; padding: 24px; }
.contact-role { color: var(--slate); font-size: 0.95rem; }
.contact-name { font: 600 1.35rem/1.2 var(--font-display); margin-bottom: 12px; }
.contact-list li { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; }
.contact-list svg { flex: none; margin-top: 4px; color: var(--slate); }
.contact-list a { color: var(--ink); }
.contact-social { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.contact-social p { flex-basis: 100%; font-size: 0.95rem; color: var(--slate); }
/* ---------- Fußzeile ---------- */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, 0.78); padding-block: 48px 22px; font-size: 0.96rem; }
.site-footer a, .site-footer .linklike { color: rgba(255, 255, 255, 0.86); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 0.9fr 1.3fr 1.2fr; gap: 32px; }
.emblem-lg { width: 92px; color: #fff; }
.footer-name { font: 700 1.5rem/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; color: #fff; margin-top: 12px; }
.footer-sub { font-size: 0.9rem; margin-top: 5px; }
.footer-h { font: 600 1rem/1.3 var(--font-body); color: #fff; margin-bottom: 10px; }
.footer-list li { padding: 3px 0; }
.footer-list a { text-decoration: none; }
.footer-list a:hover { text-decoration: underline; }
.footer-social { display: grid; gap: 8px; justify-items: start; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; border-top: 1px solid rgba(255, 255, 255, 0.14); margin-top: 36px; padding-top: 18px; font-size: 0.9rem; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; }
.footer-login { display: inline-flex; align-items: center; gap: 5px; }
/* ---------- Hinweise, Dialoge, Bildbetrachter ---------- */
#toasts { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; gap: 8px; z-index: 300; width: max-content; max-width: calc(100vw - 32px); }
.toast { background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 500; font-size: 0.96rem; box-shadow: 0 6px 24px rgba(10, 12, 16, 0.28); transition: opacity 0.2s; }
.toast.is-leaving { opacity: 0; }
.modal-back { position: fixed; inset: 0; z-index: 120; background: rgba(10, 12, 16, 0.62); display: grid; place-items: center; padding: 16px; overflow: auto; }
.modal { background: #fff; color: var(--ink); width: min(520px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; border-radius: 10px; padding: 24px; }
.modal:focus { outline: none; }
.modal-wide { width: min(860px, 100%); }
.modal-title { font: 600 1.6rem/1.15 var(--font-display); margin-bottom: 10px; }
.modal-text { color: var(--slate); margin-bottom: 14px; }
.modal textarea[readonly] { font-size: 0.8rem; font-family: ui-monospace, Consolas, monospace; }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.choice { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; font-weight: 400; cursor: pointer; }
.choice.is-fixed { cursor: default; background: var(--mist); }
.choice p { font-size: 0.88rem; color: var(--slate); }
.choice-state { font-size: 0.84rem; font-weight: 600; color: var(--slate); white-space: nowrap; }
.switch { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 999px; background: #b9bfc9; position: relative; flex: none; cursor: pointer; margin: 0; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.switch:checked { background: var(--sash); }
.switch:checked::after { transform: translateX(18px); }
.consent-bar { position: fixed; inset: auto 0 0 0; z-index: 90; background: var(--ink); color: #fff; padding-block: 14px calc(14px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -6px 24px rgba(10, 12, 16, 0.25); }
.consent-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
.consent-row p { flex: 1 1 420px; font-size: 0.94rem; color: rgba(255, 255, 255, 0.86); }
.consent-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lightbox { position: fixed; inset: 0; z-index: 150; background: rgba(8, 9, 11, 0.95); display: grid; place-items: center; }
.lb-figure { display: grid; justify-items: center; gap: 10px; width: 100%; height: 100%; align-content: center; padding: 56px 12px 24px; }
.lb-img { max-width: min(94vw, 1500px); max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px); width: auto; height: auto; border-radius: 4px; }
.lb-cap { color: rgba(255, 255, 255, 0.75); font-size: 0.92rem; text-align: center; font-variant-numeric: tabular-nums; }
.lb-btn { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; z-index: 2; }
.lb-btn:hover { background: rgba(255, 255, 255, 0.26); }
.lb-close { top: calc(12px + env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); }
.lb-prev { left: max(12px, env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%); }
.lb-next { right: max(12px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); }
/* ---------- Social Media in Originalfarben, Mitglied-werden-Knopf ---------- */
:root { --insta-grad: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); --insta-line: linear-gradient(90deg, #f58529 0%, #dd2a7b 45%, #8134af 75%, #515bd4 100%); --fb-blue: #0866ff; }
.app-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: 11px; color: #fff; text-decoration: none; line-height: 0; transition: transform 0.12s, filter 0.12s; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.app-icon svg { display: block; width: 24px; height: 24px; }
.app-icon:hover { color: #fff; filter: brightness(1.1); transform: translateY(-1px); }
.app-insta { background: var(--insta-grad); }
.app-fb { background: var(--fb-blue); }
.app-fb svg { width: 27px; height: 27px; }
.header-actions { gap: 10px; }
.btn-insta, .btn-fb, .site-footer .btn-insta, .site-footer .btn-fb, .band-insta .btn-insta { border: 0; padding: 11.5px 18px; color: #fff; background-origin: border-box; }
.btn-insta, .site-footer .btn-insta, .band-insta .btn-insta { background: var(--insta-line); }
.btn-fb, .site-footer .btn-fb { background: var(--fb-blue); }
.btn-insta svg, .btn-fb svg { width: 20px; height: 20px; }
.btn-fb svg { width: 22px; height: 22px; margin: -1px 0; }
.btn-sm.btn-insta, .btn-sm.btn-fb { padding: 7.5px 12px; }
.footer-social { grid-template-columns: minmax(0, 190px); justify-items: stretch; }
.footer-social .btn { justify-content: center; }
.btn-insta:hover, .site-footer .btn-insta:hover, .band-insta .btn-insta:hover { color: #fff; filter: brightness(1.1); }
.btn-fb:hover, .site-footer .btn-fb:hover { background: #0656d6; color: #fff; }
.btn-cta { background: #fff; color: var(--ink); margin-left: 6px; }
.btn-cta:hover { background: #e9ecf1; color: var(--ink); }
.is-light .btn-cta { background: var(--ink); color: #fff; }
.is-light .btn-cta:hover { background: var(--ink-soft); color: #fff; }
.mobile-nav-foot .btn-cta { margin-left: 4px; }
/* =====================================================================
   Verwaltungsbereich
   ===================================================================== */
.login { min-height: 100vh; min-height: 100dvh; background: var(--ink); display: grid; place-items: center; padding: 64px 16px 32px; position: relative; }
.login-emblem { width: 96px; margin: 0 auto 10px; color: var(--ink); }
img.login-emblem { height: 72px; width: auto; }
.tile { display: grid; gap: 2px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; text-decoration: none; color: var(--ink); }
.tile:hover { border-color: var(--ink); color: var(--ink); }
.tile strong { font: 600 1.3rem/1.2 var(--font-display); }
.tile span { font-size: 0.92rem; color: var(--slate); }
.tag { display: inline-block; font-size: 0.78rem; font-weight: 600; line-height: 1.5; padding: 1px 9px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.rows { display: grid; gap: 8px; margin-bottom: 16px; }
.msg { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.perm { margin: 8px 0 0; }
.perm strong { display: block; font-weight: 600; line-height: 1.3; }
.perm small { display: block; font-size: 0.84rem; color: var(--slate); line-height: 1.35; }
.prose u { text-underline-offset: 3px; }
.prose ol { padding-left: 1.4em; list-style: decimal; }
.block-h { margin-bottom: 14px; }
.narrow { max-width: 780px; }
.chronik.is-flipped .chronik-media { order: 2; }
.chronik.no-media { grid-template-columns: minmax(0, 1fr); max-width: 780px; }
.band-join.is-dark { background: var(--ink); color: #fff; }
.band-join.is-dark .btn-accent { background: var(--sash); color: var(--on-sash); }
.band-join.is-dark .btn-accent:hover { background: var(--sash-ink); }
.bulk { width: 100%; min-width: 760px; border-collapse: collapse; }
.bulk th { text-align: left; font-size: 0.84rem; font-weight: 600; color: var(--slate); padding: 4px; }
.bulk td { padding: 3px 4px; vertical-align: middle; }
.bulk td:nth-child(1), .bulk td:nth-child(2) { width: 150px; }
.bulk td:last-child { width: 40px; }
.bulk input { padding: 7px 8px; }
.bulk .btn svg { width: 16px; height: 16px; }
/* =====================================================================
   Kleinere Bildschirme
   ===================================================================== */
@media (max-width: 1000px) {
.main-nav, .header-actions { display: none; }
.nav-toggle { display: block; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
.hero { padding-block: 0 34px; }
.hero-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.hero-media { order: -1; margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px))) calc(-1 * max(var(--gutter), env(safe-area-inset-right, 0px))); }
.hero-media img { border-radius: 0; }
.hero-media figcaption { padding-inline: var(--gutter); }
.hero-copy { text-align: center; }
.lockup { max-width: calc(var(--lk-w, 440px) * 0.82); margin: 0 auto 4px; }
.hero-text { margin-inline: auto; }
.hero-actions { justify-content: center; }
.post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chronik, .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
.chronik.is-flipped .chronik-media { order: 0; }
.gallery { columns: 2; }
}
@media (max-width: 640px) {
:root { --gutter: 16px; }
body { font-size: 16.5px; }
.band { padding-block: 40px; }
.band-tight { padding-block: 20px 48px; }
.page-head { padding-top: 28px; }
.post-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.event-list-cols { grid-template-columns: minmax(0, 1fr); }
.event-list-cols > .event-row:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.field-row { grid-template-columns: minmax(0, 1fr); }
.footer-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
.post-nav { grid-template-columns: minmax(0, 1fr); }
.post-nav-link.is-next { text-align: left; }
.modal { padding: 18px; }
.bulk { min-width: 0; }
.bulk thead { display: none; }
.bulk tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "date end del" "title title title" "loc note note"; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.bulk td { padding: 0; width: auto !important; }
.bulk td[data-label]::before { content: attr(data-label); display: block; font-size: 0.8rem; font-weight: 600; color: var(--slate); margin-bottom: 2px; }
.brand-name { font-size: 1.4rem; }
.emblem { width: 42px; }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; scroll-behavior: auto !important; }
}
.post-insta { margin-top: 22px; }
.band-custom { background: var(--band-bg); color: var(--band-fg); }
.band-custom.is-dark-bg .prose a, .band-custom.is-dark-bg .kicker { color: inherit; }
.band-join.is-custom { background: var(--band-bg); color: var(--band-fg); }
/* ABS-Ränge */
.rank { display: inline-flex; align-items: center; gap: 5px; font-size: 0.86rem; font-weight: 600; color: var(--slate); white-space: nowrap; vertical-align: middle; margin-left: 8px; }
.rank-icon { height: 16px; width: auto; display: block; }
.rank-post { margin-left: 6px; font-size: inherit; font-weight: inherit; }
.rank-post::before { content: ','; margin-left: -5px; margin-right: 1px; }
.preset { display: grid; gap: 1px; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 8px; cursor: pointer; background: #fff; min-width: 130px; }
.preset strong { font-size: 0.95rem; }
.preset small { font-size: 0.8rem; color: var(--slate); line-height: 1.3; max-width: 220px; }
.preset:has(input:checked) { border-color: var(--sash); box-shadow: inset 0 0 0 1px var(--sash); background: color-mix(in srgb, var(--sash) 6%, #fff); }
.preset:has(input:focus-visible) { outline: 2px solid var(--sash); outline-offset: 2px; }
.perm { margin: 6px 0 0; }
.perm small { font-size: 0.8rem; }
/* Mein Konto */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 20px; margin: 4px 0 6px; }
.facts dt { font-size: 0.85rem; color: var(--slate); font-weight: 500; }
.facts dd { margin: 2px 0 0; font-weight: 600; }
.facts .rank { margin-left: 0; color: var(--ink); }
.band-join.is-custom .btn-accent { background: var(--band-fg); color: var(--band-bg); }
.band-join.is-custom .btn-accent:hover { opacity: 0.9; background: var(--band-fg); }
.preset { min-width: 0; padding: 7px 14px; border-radius: 999px; }
.perm { margin: 5px 0 0; }
.perm strong { font-weight: 500; }
/* ---------- Version 1.9: Collage ---------- */
.masonry { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 10px; align-items: start; }
.m-tile { aspect-ratio: auto; width: 100%; border-radius: 8px; }
.m-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.m-tile:hover img { transform: scale(1.03); }
.m-tile:focus-visible { outline: 3px solid var(--sash); outline-offset: 2px; }
@media (max-width: 719px) {
.masonry, .masonry-col { gap: 6px; }
.m-tile { border-radius: 6px; }
}
@media (prefers-reduced-motion: reduce) {
.m-tile img { transition: none; }
.m-tile:hover img { transform: none; }
}
.year-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.gal-year { margin: 0 0 30px; }
.gal-year-h { position: sticky; top: var(--hdr, 64px); z-index: 5; display: flex; align-items: baseline; gap: 12px; padding: 12px 2px 10px; margin: 0 -2px 4px;
  background: color-mix(in srgb, var(--paper, #fff) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.gal-year-h h2 { font-family: var(--font-display, inherit); font-size: clamp(1.9rem, 4.5vw, 2.6rem); line-height: 1; margin: 0; letter-spacing: 0.01em; }
.gal-year-h span { color: var(--slate); font-size: 0.92rem; font-weight: 500; }
/* Titelbild im Beitrag wie die Kachel: Querformat 3:2 mit gewähltem Ausschnitt */
.post-cover.is-wide img { width: 100%; max-height: none; aspect-ratio: 3 / 2; object-fit: cover; height: auto; }
@media (max-width: 700px) {
.bulk tr { grid-template-areas: "date end del" "title title title" "loc note note" "fest fest fest"; }
}
.event-row.is-fest { position: relative; background: color-mix(in srgb, var(--sash) 7%, var(--paper)); border-radius: 10px; padding-inline: 12px; margin-inline: -12px; box-shadow: inset 4px 0 0 var(--sash); border-top-color: transparent; margin-block: 4px; }
.event-row.is-fest + .event-row { border-top-color: transparent; }
.event-row.is-fest .event-date { background: var(--sash); color: var(--on-sash); border-color: var(--sash); }
.event-row.is-fest .event-title { font-size: 1.12em; }
/* Titelbild im Beitrag auf Textbreite, mit Zoom-Ausschnitt */
.post-cover.is-wide { overflow: hidden; border-radius: 6px; margin: 18px 0 22px; aspect-ratio: 3 / 2; }
.post-cover.is-wide img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
/* Collage mit Spannen */
.mosaic-wrap { container-type: inline-size; }
.mosaic { position: relative; }
.mosaic .m-tile { position: absolute; margin: 0; }
.m-tile img { object-position: center 35%; }
/* Quadrate wie bei Instagram */
.sq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sq-grid .m-tile { aspect-ratio: 1; border-radius: 4px; }
@media (max-width: 719px) {
.sq-grid { gap: 3px; }
.sq-grid .m-tile { border-radius: 2px; }
}
.post-more { margin-top: 10px; }
/* ---------- Version 2.0: Kopfzeile, Social-Icons so hoch wie "Mitglied werden" ---------- */
.site-header { --hdr-btn: 34px; }
.site-header .btn-cta { height: var(--hdr-btn); padding: 0 14px; line-height: 1; }
.site-header .app-icon { width: var(--hdr-btn); height: var(--hdr-btn); border-radius: 8.5px; box-shadow: none; }
.site-header .app-insta { background: radial-gradient(circle at 28% 108%, #ffd600 0%, #ff9a00 18%, #ff4f2b 34%, #ff0f6f 52%, #e10fbf 70%, #9b00ff 100%); }
.site-header .app-insta svg { width: 100%; height: 100%; }
.site-header .app-fb svg { width: 25px; height: 25px; }
.seg { display: inline-flex; padding: 3px; background: var(--a-soft); border-radius: 10px; gap: 2px; }
.seg button { width: 36px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--a-muted); display: grid; place-items: center; cursor: pointer; }
.seg button svg { width: 18px; height: 18px; }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12); }
/* Kleiner Bildschirm: Menü und Vorschau als Ebene */
/* Website: Vorschau-Modus und Wartungsseite */
body.is-preview .edit-link { display: none !important; }
body.is-preview .footer-login, body.is-preview .mobile-nav-login { pointer-events: none; }
.maint-flag { display: inline-block; margin-left: 10px; padding: 1px 8px; border-radius: 999px; background: #ffc94a; color: #3d2c00; font-weight: 700; font-size: 0.8rem; }
body.is-maint { background: var(--ink); }
.maint { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(120% 80% at 50% 0%, #262a33 0%, var(--ink) 60%); color: #fff; }
.maint-card { width: min(520px, 100%); text-align: center; }
.maint-card .emblem { width: 96px; height: auto; color: #fff; margin: 0 auto 14px; display: block; }
.maint-site { font: 700 0.86rem/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); margin: 0 0 10px; }
.maint-title { font: 700 clamp(2rem, 6vw, 2.8rem)/1.05 var(--font-display); text-transform: uppercase; margin: 0 0 12px; }
.maint-text { color: rgba(255, 255, 255, 0.78); margin: 0 auto 22px; max-width: 34em; }
.maint-form { display: flex; gap: 8px; max-width: 380px; margin: 0 auto; }
.maint-form input { flex: 1; min-width: 0; height: 46px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); color: #fff; padding: 0 14px; }
.maint-form input::placeholder { color: rgba(255, 255, 255, 0.5); }
.maint-form .btn { height: 46px; border-radius: 10px; }
.maint-err { color: #ff9b95; margin: 10px 0 0; }
.maint-links { display: flex; justify-content: center; gap: 18px; margin-top: 30px; font-size: 0.9rem; }
.maint-links a { color: rgba(255, 255, 255, 0.7); }
.confirm-check { margin: 4px 0 6px; }
@keyframes imp-pulse { 50% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.08); } }
.admin-bar.is-imp { background: #c62828; color: #fff; }
.imp-stop { color: #fff; margin-left: 8px; }
@keyframes panelFlash { 0%, 30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sash) 40%, transparent); } 100% { box-shadow: 0 0 0 3px transparent; } }
/* v2.5: Datumskachel für mehrtägige Termine */
.event-date { display: flex; flex-direction: column; justify-content: center; min-height: 52px; }
.event-date.is-range .event-day { font-size: 1.12rem; letter-spacing: -0.01em; white-space: nowrap; }
.event-date.is-range .event-day i { font-style: normal; opacity: 0.7; margin: 0 1px; }
.event-date.is-range .event-month { margin-top: 5px; font-size: 0.68rem; white-space: nowrap; }
/* v2.5: Vorschau am Handy oben, Einstellungen darunter */
@media (max-width: 980px) {
:root { --pv-h: 44vh; }
@supports (height: 1dvh) {
:root { --pv-h: 44dvh; }
}
}
/* v2.6: Fußzeile kompakter */
.footer-pages-m { display: none; }
.footer-pages-m summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; margin: 0; padding: 12px 0; }
.footer-pages-m summary::-webkit-details-marker { display: none; }
.footer-pages-m summary svg { transition: transform 0.2s ease; opacity: 0.8; }
.footer-pages-m[open] summary svg { transform: rotate(180deg); }
.footer-pages-m .footer-list { padding-bottom: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.footer-bottom { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 24px; }
.footer-legal { justify-content: center; gap: 6px 36px; }
.footer-login { justify-self: end; color: rgba(255, 255, 255, 0.7) !important; text-decoration: none; }
.footer-login:hover { color: #fff !important; }
.footer-login svg { width: 14px; height: 14px; }
@media (max-width: 900px) {
.footer-grid { gap: 22px; }
.footer-pages { display: none; }
.footer-pages-m { display: block; border-top: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.footer-social { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
.footer-social .btn { padding-inline: 10px; }
.footer-bottom { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy login" "legal legal"; margin-top: 26px; }
.footer-copy { grid-area: copy; }
.footer-login { grid-area: login; }
.footer-legal { grid-area: legal; justify-content: space-between; gap: 6px 12px; flex-wrap: nowrap; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.footer-legal a, .footer-legal .linklike { white-space: nowrap; font-size: 0.86rem; }
}
/* v2.6: hervorgehobener Termin als ganze hellblaue Fläche */
.event-row.is-fest { box-shadow: none; background: color-mix(in srgb, var(--sash) 13%, var(--paper)); }
/* v2.6: Beitrag am Computer: Titel und Bild nebeneinander */
.post-head.has-cover .post-cover { margin: 18px 0 22px; }
@media (min-width: 901px) {
.post-head.has-cover { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 32px; align-items: center; margin: 4px 0 30px; }
.post-head.has-cover .post-cover { margin: 0; }
.post-head.has-cover .h-post { font-size: clamp(1.9rem, 3.2vw, 2.5rem); }
}
/* v2.7: Knöpfe im Kopfbereich mit Farbe und an/aus */
.btn-hero-white { background: #fff; color: var(--ink); border-color: #fff; }
.btn-hero-white:hover { background: #e9ecf1; color: var(--ink); border-color: #e9ecf1; }
.btn-hero-custom { background: var(--hb); color: var(--hb-fg); border-color: var(--hb); }
.btn-hero-custom:hover { background: var(--hb); color: var(--hb-fg); filter: brightness(1.08); }
/* v2.7: Handymenü - Mitglied werden links, Instagram und Facebook rechts */
.mobile-nav-foot { flex-wrap: nowrap; justify-content: space-between; }
.mobile-nav-foot .btn-cta { margin-left: 0; }
.mobile-nav-social { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
/* v2.7: Nächster Termin am Handy größer und luftiger */
@media (max-width: 900px) {
}
/* v2.7: Terminarten - besonderer Termin dezent, Schützenfest am stärksten */
.event-row.is-special { background: color-mix(in srgb, var(--sash) 7%, var(--paper)); border-radius: 10px; padding-inline: 12px; margin-inline: -12px; border-top-color: transparent; margin-block: 4px; }
.event-row.is-special + .event-row { border-top-color: transparent; }
.event-row.is-special .event-date { background: color-mix(in srgb, var(--sash) 78%, var(--ink)); color: #fff; }
.event-row.is-fest { background: color-mix(in srgb, var(--sash) 15%, var(--paper)); padding-block: 15px; }
.event-row.is-fest .event-date { min-height: 58px; }
.event-row.is-fest .event-title { font: 700 1.3rem/1.15 var(--font-display); letter-spacing: 0.01em; }
.gal-more { flex-direction: column; align-items: center; gap: 8px; }
.gal-more p { color: var(--slate); font-size: 0.88rem; margin: 0; }
/* v2.9: Termine aufklappbar, breitere Datumskacheln, Schützenfest wie besonderer Termin, nur kräftiger */
:root { --ev-tile: 76px; }
.event-row { display: block; padding: 0; }
.ev-line { display: grid; grid-template-columns: var(--ev-tile) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 0; color: inherit; text-decoration: none; }
a.ev-line:hover, a.ev-line:focus-visible { color: inherit; }
summary.ev-line { list-style: none; cursor: pointer; }
summary.ev-line::-webkit-details-marker { display: none; }
.ev-chev { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--slate); transition: transform 0.2s ease, background 0.15s; }
.ev-chev svg { width: 18px; height: 18px; }
.has-more .ev-line:hover .ev-chev { background: color-mix(in srgb, var(--sash) 12%, transparent); color: var(--sash); }
.has-more .ev-line:hover .event-title { color: var(--sash); }
.ev-det[open] .ev-chev { transform: rotate(180deg); }
.event-date { min-height: 56px; padding-inline: 4px; }
.event-date.is-range .event-day { font-size: 1.55rem; letter-spacing: -0.02em; }
.event-date.is-range .event-day i { margin: 0 1px; }
.event-date.is-range .event-month { font-size: 0.74rem; margin-top: 3px; }
.ev-more { padding: 0 0 16px calc(var(--ev-tile) + 14px); display: grid; gap: 12px; animation: evOpen 0.18s ease-out; }
@keyframes evOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.ev-more { animation: none; }
.ev-chev { transition: none; }
}
.ev-desc p { margin: 0 0 8px; line-height: 1.55; }
.ev-desc p:last-child { margin-bottom: 0; }
.ev-prog { display: grid; gap: 14px; }
.ev-day h4 { font: 600 1.05rem/1.2 var(--font-display); letter-spacing: 0.02em; margin: 0 0 6px; color: var(--ink); }
.ev-day ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid color-mix(in srgb, var(--sash) 30%, transparent); }
.ev-day li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 4px 12px; padding: 6px 0 6px 12px; position: relative; }
.ev-day li::before { content: ''; position: absolute; left: -5px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--sash); }
.ev-time { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 0.92rem; color: var(--ink); padding-top: 1px; white-space: nowrap; }
.ev-what-t { margin: 0; line-height: 1.35; }
.ev-what-n { margin: 2px 0 0; font-size: 0.9rem; color: var(--slate); line-height: 1.4; }
.ev-what-p { margin: 3px 0 0; font-size: 0.86rem; color: var(--slate); display: flex; align-items: center; gap: 4px; }
.ev-what-p svg { width: 14px; height: 14px; }
.ev-who { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--sash) 12%, transparent); color: var(--sash); font-size: 0.74rem; font-weight: 600; vertical-align: 1px; white-space: nowrap; }
.event-row.is-fest { background: color-mix(in srgb, var(--sash) 7%, var(--paper)); padding-block: 4px; }
.event-row.is-fest .event-date { background: color-mix(in srgb, var(--sash) 78%, var(--ink)); color: #fff; min-height: 62px; }
.event-row.is-fest .event-title { font: 700 1.32rem/1.15 var(--font-display); letter-spacing: 0.01em; }
.event-row.is-fest .ev-more { font-size: 1.02rem; }
@media (max-width: 640px) {
.ev-more { padding-left: 0; }
.ev-day li { grid-template-columns: 1fr; gap: 1px; }
.ev-time { font-size: 0.86rem; color: var(--sash); }
}
/* v2.9: Beitrag am Computer - Bild oben bündig mit Datum und Autor */
@media (min-width: 901px) {
.post-head.has-cover { align-items: start; }
.post-head.has-cover .post-head-text { padding-top: 0; }
.post-head.has-cover .post-meta { margin-top: 0; line-height: 1.3; }
}
/* v2.9: Fußzeile mit Symbolen */
.footer-h { display: flex; align-items: center; gap: 8px; }
.footer-h > svg, .fh-in > svg { width: 17px; height: 17px; opacity: 0.85; flex: none; }
.fh-in { display: inline-flex; align-items: center; gap: 8px; }
.footer-ico li, .footer-ico a { display: flex; align-items: center; gap: 9px; }
.footer-ico li { padding: 4px 0; }
.footer-ico svg { width: 16px; height: 16px; flex: none; opacity: 0.7; }
.footer-ico a:hover svg { opacity: 1; }
/* v3.0: Terminzeilen - quadratische Kachel, Ort rechts (Computer) bzw. eigene Zeile (Handy) */
:root { --ev-tile: 74px; }
.ev-line { align-items: stretch; padding: 12px 0; }
.ev-line > .event-body { align-self: center; }
.ev-line > .ev-chev { align-self: center; }
.event-date { width: var(--ev-tile); min-height: var(--ev-tile); align-self: stretch; box-sizing: border-box; }
.event-row.is-fest .event-date { min-height: var(--ev-tile); }
.map-link { color: var(--sash); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.map-link:hover { color: var(--sash-ink, var(--sash)); text-decoration-thickness: 2px; }
/* Ablauf: Wer-Etikett am Handy hinter der Uhrzeit, am Computer hinter dem Titel; Trennlinien wählbar */
.ev-time { display: flex; flex-direction: column; gap: 3px; }
.ev-who-m { display: none; }
.ev-who-d .ev-who { margin-left: 8px; }
.ev-day li { padding: 9px 0 9px 14px; }
.ev-day li::before { top: 16px; }
.ev-what-n { margin-top: 3px; }
.ev-what-p { margin-top: 4px; }
@media (max-width: 640px) {
.ev-time { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.ev-who-m { display: inline; }
.ev-who-m .ev-who { margin-left: 0; }
.ev-who-d { display: none; }
}
/* Vorschau: Vollbild nur am Handy */
/* ===== v3.1 ===== */
/* Kästchen und Auswahlkreise: weiß mit grauem Rand, ausgewählt in Blau (statt grau gefüllter Systemdarstellung) */
input[type="checkbox"]:not(.switch):not(.visually-hidden),
input[type="radio"]:not(.visually-hidden) {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; min-width: 18px; min-height: 0; flex: none; padding: 0;
  border: 1.5px solid #a3abb7; border-radius: 4px; background: #fff;
  cursor: pointer; vertical-align: -3px;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
input[type="radio"]:not(.visually-hidden) { border-radius: 50%; }
input[type="checkbox"]:not(.switch):not(.visually-hidden):hover,
input[type="radio"]:not(.visually-hidden):hover { border-color: var(--sash); }
input[type="checkbox"]:not(.switch):not(.visually-hidden):checked {
  border-color: var(--sash);
  background: var(--sash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3l2.4 2.4 4.8-5' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
}
input[type="radio"]:not(.visually-hidden):checked { border-color: var(--sash); background: var(--sash); box-shadow: inset 0 0 0 3px #fff; }
input[type="checkbox"]:not(.switch):not(.visually-hidden):focus-visible,
input[type="radio"]:not(.visually-hidden):focus-visible { outline: 2px solid var(--sash); outline-offset: 2px; }
input[type="checkbox"]:not(.switch):not(.visually-hidden):disabled,
input[type="radio"]:not(.visually-hidden):disabled { opacity: .55; cursor: default; }
/* Auswahl Apple Karten / Google Maps (iPhone) */
.map-choice { display: grid; gap: 10px; margin-top: 16px; }
.map-choice .btn { width: 100%; justify-content: center; min-height: 48px; }
.map-choice .btn svg { width: 18px; height: 18px; }
/* Trennlinien im Ablauf: beginnen beim Text (nicht bei Zeitleiste oder Uhrzeit) und enden vor dem rechten Rand; Computer und Handy getrennt einstellbar */
.ev-prog .ev-day li + li::after { content: ''; position: absolute; top: 0; left: calc(14px + 104px + 12px); right: 28%; border-top: 1px solid color-mix(in srgb, var(--sash) 18%, transparent); display: none; }
@media (min-width: 641px) {
.ev-prog.has-lines .ev-day li + li::after { display: block; }
}
@media (max-width: 640px) {
.ev-prog .ev-day li + li::after { left: 14px; right: 22%; }
.ev-prog.has-lines-m .ev-day li + li::after { display: block; }
}
/* v3.2: Datumskacheln wieder feste Quadrate, senkrecht mittig zur Terminzeile (beim Aufklappen bleibt die Kachel oben stehen) */
.ev-line > .event-date, .event-row.is-fest .ev-line > .event-date { width: var(--ev-tile); height: var(--ev-tile); min-height: 0; align-self: center; }
/* Ortslink auf iPhone als Knopf (öffnet die Auswahl Apple Karten / Google Maps) */
button.map-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; }
/* ===== v3.4 ===== */
/* Kopfzeile: "Falkenrott" etwas größer, seit die Unterzeile weg ist */
.brand-name { font-size: 2.1rem; letter-spacing: 0.055em; }
@media (max-width: 640px) {
.brand-name { font-size: 1.88rem; }
}
/* Fußzeile: Trennlinie nur so breit wie der Inhalt, Copyright und Login sauber auf einer Linie */
.footer-bottom { align-items: center; }
.footer-copy { margin: 0; line-height: 1.4; }
.footer-login { display: inline-flex; align-items: center; gap: 6px; line-height: 1.4; }
.footer-login svg { flex: none; display: block; }
/* v3.6: Größere Tippfläche für kleine Links auf dem Handy - unsichtbar, ändert nichts am Aussehen */
@media (pointer: coarse) {
  .footer-legal a, .footer-legal .linklike, .footer-login, .map-link, .read-more { position: relative; }
  .footer-legal a::after, .footer-legal .linklike::after, .footer-login::after, .map-link::after, .read-more::after { content: ''; position: absolute; inset: -9px -4px; }
}
@media (max-width: 900px) {
.footer-bottom { padding-bottom: 6px; }
}
/* Datum und Uhrzeit: nie breiter als die anderen Felder (iPhone gab ihnen eine Mindestbreite), Text links */
input[type="date"], input[type="time"] { min-width: 0; max-width: 100%; }
@supports (-webkit-touch-callout: none) {
input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; display: block; min-height: 44px; text-align: left; }
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; }
}
.modal { overflow-x: hidden; }
.modal .field, .modal .field-row > * { min-width: 0; }
.seg { display: inline-flex; border: 1px solid #cfd5de; border-radius: 10px; overflow: hidden; background: #fff; }
.seg label { padding: 9px 14px; font-size: 0.92rem; font-weight: 600; cursor: pointer; white-space: nowrap; border-left: 1px solid #cfd5de; }
.seg label:first-of-type { border-left: 0; }
.seg input:checked + label { background: var(--sash); color: #fff; }
.seg input:focus-visible + label { outline: 2px solid var(--sash); outline-offset: -2px; }
@media (max-width: 640px) {
.ev-kind, .seg { width: 100%; }
.seg { display: flex; }
.seg label { flex: 1 1 0; text-align: center; padding: 9px 4px; font-size: 0.86rem; }
}
/* Laden: erst das Gerüst (Skelett), dann der Inhalt */
.skel { display: block; border-radius: 8px; background: linear-gradient(90deg, #e6e9ee 0%, #f3f5f8 45%, #e6e9ee 90%) 0 0 / 300% 100%; animation: skel 1.4s ease-in-out infinite; }
.skel.sk-dark { background-image: linear-gradient(90deg, #23262c 0%, #30343b 45%, #23262c 90%); }
@keyframes skel { from { background-position: 100% 0; } to { background-position: 0 0; } }
#app main img:not(.is-loaded), #app .alayout img:not(.is-loaded) { background: linear-gradient(90deg, #e6e9ee 0%, #f3f5f8 45%, #e6e9ee 90%) 0 0 / 300% 100%; animation: skel 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.skel, #app main img:not(.is-loaded), #app .alayout img:not(.is-loaded) { animation: none; }
}
.boot { animation: boot-in 0.2s ease 0.12s both; }
@keyframes boot-in { from { opacity: 0; } to { opacity: 1; } }
.boot-adm { display: none; }
html.boot-admin .boot-pub { display: none; }
html.boot-admin .boot-adm { display: block; }
.boot-head { background: #14161a; }
.boot-head-row { display: flex; align-items: center; gap: 12px; height: 72px; }
.sk-emblem { width: 46px; height: 40px; border-radius: 10px; }
.sk-brand { width: 170px; height: 24px; }
.sk-nav { width: 360px; height: 18px; margin-left: auto; }
.boot-hero { background: #14161a; padding: 40px 0 56px; }
.boot-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
.sk-h1 { width: 75%; height: 64px; margin-bottom: 18px; }
.sk-line { width: 100%; height: 14px; margin-bottom: 10px; }
.sk-short { width: 60%; }
.sk-btn { width: 160px; height: 42px; margin-top: 18px; border-radius: 6px; }
.sk-img { width: 100%; aspect-ratio: 3 / 2; border-radius: 10px; }
.boot-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-top: 40px; padding-bottom: 40px; }
.sk-card { height: 240px; border-radius: 12px; }
@media (max-width: 900px) {
.sk-nav { width: 30px; height: 22px; }
.boot-head-row { height: 64px; }
.boot-hero { padding: 0 0 36px; }
.boot-hero .wrap { padding-left: 0; padding-right: 0; }
.boot-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.boot-hero-grid > div { order: 2; padding: 0 var(--gutter); }
.boot-hero-grid .sk-img { order: 1; border-radius: 0; }
.sk-h1 { width: 85%; height: 52px; margin-inline: auto; }
.boot-cards { grid-template-columns: minmax(0, 1fr); padding-top: 28px; }
.sk-card:nth-child(n+2) { display: none; }
}
.boot-adm-top { background: #14161a; height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 18px; }
.boot-adm-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: calc(100vh - 60px); }
.boot-adm-side { background: #17191e; padding: 22px 18px; display: grid; align-content: start; gap: 16px; }
.boot-adm-side .skel { height: 14px; }
.boot-adm-main { background: #f3f4f7; padding: 32px; display: grid; align-content: start; gap: 18px; }
.sk-title { width: 260px; height: 34px; }
.sk-panel { height: 150px; border-radius: 14px; background-color: #fff; }
@media (max-width: 900px) {
.boot-adm-body { grid-template-columns: minmax(0, 1fr); }
.boot-adm-side { display: none; }
.boot-adm-main { padding: 20px 16px; }
}
.seg label { margin: 0; display: block; line-height: 1.2; }
@media (max-width: 900px) {
.boot-hero-grid .sk-line, .boot-hero-grid .sk-btn { margin-inline: auto; }
}
.boot-adm-main { background: #f6f7f9; }
.boot-adm-main .skel { background-image: linear-gradient(90deg, #e2e6ec 0%, #edf0f4 45%, #e2e6ec 90%); }
.seg { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid #cfd5de; border-radius: 12px; background: #f3f5f8; overflow: visible; }
.seg label { margin: 0; padding: 8px 14px; border: 0; border-radius: 9px; font-size: 0.92rem; font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap; color: var(--ink); transition: background-color 0.15s, color 0.15s; }
.seg label:hover { background: #e7ebf1; }
.seg input:checked + label { background: var(--sash); color: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.18); }
.seg input:focus-visible + label { outline: 2px solid var(--sash); outline-offset: 1px; }
@media (max-width: 640px) {
.seg { display: flex; width: 100%; }
.seg label { flex: 1 1 0; text-align: center; padding: 9px 4px; font-size: 0.86rem; }
}
/* Termine: Titel, darunter Datum, Uhrzeit und Ort mit Symbolen, darunter der Hinweis mit Fähnchen */
.event-body { min-width: 0; }
.ev-facts { list-style: none; margin: 5px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px 18px; font-size: 0.92rem; color: var(--slate); font-variant-numeric: tabular-nums; }
.ev-facts li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ev-facts svg { width: 16px; height: 16px; flex: none; color: var(--sash); opacity: 0.85; }
.ev-facts li > span { min-width: 0; }
.ev-hint { display: flex; align-items: flex-start; gap: 6px; margin: 5px 0 0; font-size: 0.92rem; color: var(--ink); }
.ev-hint svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--sash); }
.event-list-cols .ev-f-place { flex-basis: 100%; }
@media (max-width: 640px) {
.ev-f-place { flex-basis: 100%; }
.ev-facts { gap: 3px 14px; }
}
.event-row.is-fest .ev-facts, .event-row.is-fest .ev-hint { font-size: 0.98rem; }
.event-row.is-fest .ev-facts { font-weight: 500; }
.event-row.is-past .ev-facts svg, .event-row.is-past .ev-hint svg { color: var(--slate); }
/* Ablauf: Kopf mit Symbol, von dem die Zeitleiste ausgeht */
.ev-prog { position: relative; gap: 10px; }
.ev-prog::before { content: ''; position: absolute; left: 10px; top: 14px; bottom: 6px; border-left: 2px solid color-mix(in srgb, var(--sash) 30%, transparent); }
.ev-prog-h { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; font: 600 1.05rem/1.2 var(--font-display); letter-spacing: 0.02em; color: var(--ink); }
.ev-prog-ic { width: 24px; height: 24px; margin-left: -1px; border-radius: 50%; background: var(--sash); color: #fff; display: grid; place-items: center; flex: none; }
.ev-prog-ic svg { width: 14px; height: 14px; }
.ev-day { margin-left: 12px; }
.ev-day ul { border-left: 0; }
.ev-day h4 { position: relative; padding-left: 14px; margin: 4px 0 2px; }
.ev-day h4::before { content: ''; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 2px solid var(--sash); transform: translateY(-50%); }
.ev-desc.prose { font-size: 0.98rem; }
.ev-desc.prose ul { margin: 4px 0 8px; padding-left: 20px; }
.ev-desc.prose li { margin: 2px 0; }
/* Beitragskarten: Weiterlesen */
.read-more { color: var(--sash); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.read-more:hover { text-decoration-thickness: 2px; }
.post-card-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card-text[data-full] { display: block; -webkit-line-clamp: unset; overflow: visible; }
/* v3.7: Startseite "Nächste Termine": gleich große Felder, Inhalt senkrecht mittig, Linien durchgehend auf einer Höhe.
   Hervorgehobene Termine behalten hier nur ihre blaue Datumskachel. Leicht getönt ist nur der nächste Termin. */
.event-list-cols > .event-row, .event-list-cols > .event-row.is-special, .event-list-cols > .event-row.is-fest {
  display: flex; position: relative; isolation: isolate; margin: 0; padding: 0; background: none; border-radius: 0; box-shadow: none;
  border-top: 1px solid var(--line); border-bottom: 0; }
.event-list-cols > .event-row:last-child { border-bottom: 1px solid var(--line); }
.event-list-cols > .event-row.is-special + .event-row, .event-list-cols > .event-row.is-fest + .event-row { border-top-color: var(--line); }
.event-list-cols .ev-line { flex: 1 1 auto; min-width: 0; padding: 14px 0; align-items: center; }
.event-list-cols .ev-line > .event-body, .event-list-cols .ev-line > .ev-chev { align-self: center; }
@media (min-width: 641px) {
.event-list-cols { grid-auto-rows: 1fr; }
.event-list-cols > .event-row:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}

/* ===== v3.7 ===== */
/* Kopfbereich der Startseite hell (umschaltbar unter Logo & Farben) */
.hero.is-light { background: var(--paper); color: var(--ink); }
.hero.is-light .lockup text { fill: var(--ink); }
.hero.is-light .lockup .lockup-sub { fill: var(--sash); opacity: 1; }
.hero.is-light .hero-text { color: #3b4250; }
.hero.is-light .hero-media img { box-shadow: 0 10px 30px rgba(20, 22, 26, 0.12); }
.hero.is-light .hero-media figcaption { color: var(--slate); }
.hero.is-light .btn-hero-white { background: var(--ink); color: #fff; border-color: var(--ink); }
.hero.is-light .btn-hero-white:hover { background: #2b2f37; border-color: #2b2f37; color: #fff; }
.hero.is-light .btn-outline-light { border-color: rgba(20, 22, 26, 0.35); color: var(--ink); }
.hero.is-light .btn-outline-light:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.boot-hero { background: #fff; }
@media (max-width: 900px) {
.hero.is-light .hero-media img { box-shadow: none; }
}
/* Startseite "Aus der Chronik": ein oder mehrere Chronik-Beiträge, bei mehreren zum Durchwischen */
.chr-text { margin: 0; }
.chr-slide .chronik-media img { aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.chr-car { position: relative; }
.chr-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.chr-track::-webkit-scrollbar { display: none; }
.chr-track > .chronik { flex: 0 0 100%; scroll-snap-align: start; padding-inline: 2px; }
.chr-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.chr-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; }
.chr-btn:hover { border-color: var(--sash); color: var(--sash); }
.chr-btn svg { width: 18px; height: 18px; }
.chr-dots { display: flex; gap: 8px; }
.chr-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: #c9ced6; cursor: pointer; position: relative; }
.chr-dot::after { content: ''; position: absolute; inset: -8px; }
.chr-dot[aria-current="true"] { background: var(--sash); }
/* Chronik-Etikett an Beitragskarten und Beiträgen */
.chr-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; line-height: 1.5; color: var(--sash); background: color-mix(in srgb, var(--sash) 10%, var(--paper)); vertical-align: 1px; }

/* ===== v3.8 ===== */
/* Startseite "Nächste Termine": kompakt. Titel, darunter Datum mit Uhrzeit, darunter der Ort. Jede Zeile bleibt einzeilig. */
.event-list-cols .event-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.event-list-cols .ev-t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.event-list-cols .ev-facts { flex-direction: column; flex-wrap: nowrap; gap: 3px; }
.event-list-cols .ev-facts li { display: flex; white-space: nowrap; overflow: hidden; }
.event-list-cols .ev-facts li > span { flex: none; }
.event-list-cols .ev-facts li > span:last-child { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
/* Datum und Uhrzeit: eine Zeile; passt sie am Handy nicht, rutscht die Uhrzeit darunter statt abgeschnitten zu werden */
.event-list-cols .ev-facts li.ev-f-when { flex-wrap: wrap; gap: 3px 14px; overflow: visible; white-space: normal; }
.ev-g { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* "Für wen" als Etikett hinter dem Titel */
.event-title .ev-who { flex: none; margin-left: 8px; vertical-align: 2px; font-family: var(--font-body); letter-spacing: 0; }
.event-list-cols .event-title .ev-who { margin-left: 0; }
/* Nächster Termin: Datumskachel mit blauem Ring und ruhigem Puls */
.event-row.is-next .event-date { position: relative; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--sash); }
.event-row.is-next .event-date::after { content: ''; position: absolute; inset: -5px; border-radius: 10px; border: 2px solid var(--sash); opacity: 0; animation: next-pulse 2.6s ease-out infinite; pointer-events: none; }
@keyframes next-pulse { 0% { transform: scale(1); opacity: 0.55; } 70%, 100% { transform: scale(1.16); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .event-row.is-next .event-date::after { animation: none; } }
/* Bereiche: Text breit oder mittig, Bilderreihe mit fester Spaltenzahl, eigener Code */
.text-wide { max-width: none; }
.narrow.is-center, .text-wide.is-center { margin-inline: auto; text-align: center; }
.photo-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photo-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.photo-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .photo-grid.cols-3, .photo-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.band-code .block-h { margin-bottom: 16px; }
.band > .wrap > .block-h + .code-host { margin-top: 4px; }

/* ===== v3.9 ===== */
/* Kopfbereich: Textgrößen und Ausrichtung der Knöpfe */
.hero-text.size-s { font-size: 1rem; }
.hero-text.size-l { font-size: 1.3rem; }
.hero-actions.align-center { justify-content: center; }
.hero-actions.align-right { justify-content: flex-end; }
.hero-actions.align-left { justify-content: flex-start; }

/* ===== v4.0 ===== */
.cal-all { margin-top: 14px; }
.page-head .cal-all svg { width: 16px; height: 16px; }

/* ===== v4.1 ===== */
/* Termine (v4.2): "In den Kalender" als Knopf. Computer mit Platz: rechts neben dem Termin, schmalere Bildschirme: rechts in der Zeile, Handy: unter der Datumskachel */
.ev-cal-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--sash); cursor: pointer; }
.ev-cal-btn svg { width: 20px; height: 20px; }
.ev-cal-btn:hover, .ev-cal-btn:focus-visible { border-color: var(--sash); background: color-mix(in srgb, var(--sash) 8%, var(--paper)); }
.event-row.is-special .ev-cal-btn, .event-row.is-fest .ev-cal-btn { background: var(--paper); }
@media (min-width: 1000px) {
  .event-list .event-row.has-cal .ev-line { position: relative; }
  .event-list .ev-line > .ev-cal-btn { position: absolute; left: calc(100% + 26px); top: 50%; transform: translateY(-50%); }
}
@media (min-width: 641px) and (max-width: 999px) {
  .event-list .event-row.has-cal .ev-line { grid-template-columns: var(--ev-tile) minmax(0, 1fr) auto 30px; }
  .event-list .ev-line > .ev-cal-btn { grid-column: 3; align-self: center; }
  .event-list .event-row.has-cal .ev-line > .ev-chev { grid-column: 4; }
}
@media (min-width: 641px) {
  .cal-row-d-off .ev-cal-btn, .cal-all-d-off .cal-all { display: none; }
}
@media (max-width: 640px) {
  /* Datum, Uhrzeit und Ort jeweils in eigener Zeile */
  .event-list .ev-facts { flex-direction: column; flex-wrap: nowrap; gap: 4px; }
  .event-list .event-row.has-cal .ev-line { grid-template-rows: auto 1fr; row-gap: 12px; }
  .event-list .event-row.has-cal .ev-line > .event-date { grid-column: 1; grid-row: 1; align-self: start; }
  .event-list .event-row.has-cal .ev-line > .event-body { grid-column: 2; grid-row: 1 / span 2; }
  .event-list .event-row.has-cal .ev-line > .ev-chev { grid-column: 3; grid-row: 1 / span 2; }
  .event-list .ev-line > .ev-cal-btn { grid-column: 1; grid-row: 2; justify-self: stretch; align-self: start; width: auto; height: 38px; }
  .cal-row-m-off .ev-cal-btn, .cal-all-m-off .cal-all { display: none; }
  .cal-row-m-off .event-list .event-row.has-cal .ev-line > .event-date { grid-row: 1 / span 2; align-self: center; }
}
/* Ort nur unterstrichen, ohne Farbe, wie die anderen Angaben */
.map-link, .map-link:hover { color: inherit; }
.ev-facts .is-tbd > span { font-style: italic; }

/* Auswahl im Kalender-Fenster */
.cal-choice .cal-opt { justify-content: flex-start; text-align: left; gap: 12px; padding-inline: 16px; }
.cal-opt-t { display: flex; flex-direction: column; line-height: 1.25; }
.cal-opt-t small { font-weight: 400; font-size: 0.82rem; opacity: 0.8; }
.cal-note { margin: 14px 0 0; font-size: 0.88rem; color: var(--slate); }

/* Passwortschutz */
.lock-card { max-width: 440px; margin: 10px auto 30px; padding: 30px 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); text-align: center; }
.lock-card .back-link { display: inline-flex; margin-bottom: 14px; }
.lock-ico { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--sash) 10%, var(--paper)); color: var(--sash); }
.lock-ico svg { width: 22px; height: 22px; }
.lock-title { font: 700 1.45rem/1.2 var(--font-display); margin: 14px 0 6px; }
.lock-text { color: var(--slate); margin: 0 0 18px; }
.lock-form { display: flex; gap: 8px; }
.lock-form input { flex: 1; min-width: 0; height: 46px; border-radius: 10px; border: 1px solid var(--line); padding: 0 14px; font: inherit; background: var(--paper); color: var(--ink); }
.lock-form input:focus { outline: 2px solid var(--sash); outline-offset: 1px; border-color: transparent; }
.lock-form .btn { height: 46px; border-radius: 10px; }
.lock-err { color: #b42318; margin: 10px 0 0; font-size: 0.92rem; }
.modal .lock-form { margin-top: 16px; }
.modal .lock-err { text-align: left; }
.lock-bar { margin-top: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 0.92rem; color: var(--slate); }
.lock-bar .btn svg { width: 15px; height: 15px; }
.lock-bar.is-open svg { width: 16px; height: 16px; color: var(--sash); }
.link-btn { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--sash); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.m-tile { position: relative; }
.tile-lock { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(20, 22, 26, 0.6); color: #fff; }
.tile-lock svg { width: 14px; height: 14px; }
.lock-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 0.78rem; font-weight: 600; color: var(--slate); vertical-align: 1px; }
.lock-tag svg { width: 12px; height: 12px; }
@media (max-width: 480px) {
  .lock-form { flex-direction: column; }
}

/* ===== v4.3 ===== */
/* Hover auf dem Kalender-Knopf markiert nicht zusätzlich den Pfeil zum Aufklappen */
.has-more .ev-line:has(.ev-cal-btn:hover) .ev-chev { background: none; color: var(--slate); }
/* Platzhalter im Beitrag: kein Klick zum Vergrößern */
.post-cover.is-ph { cursor: default; }
/* Handy: "Für wen" über dem Titel, bündig mit dem Titel */
@media (max-width: 640px) {
  .event-list .event-title { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 4px; }
  .event-list .event-title .ev-who { margin-left: 0; }
}
/* v4.5: Jahresüberschriften der Galerie so groß wie die übrigen Abschnittsüberschriften */
.gal-year-h h2 { font-size: clamp(1.8rem, 4vw, 2.25rem); }

/* v4.6: letzte Kachel im Instagram-Bereich führt zum Profil */
.insta-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center; text-decoration: none; background: var(--insta-grad); }
.insta-more svg { width: 38px; height: 38px; }
.insta-more-t { font: 700 1.25rem/1.15 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; }
.insta-more small { font-size: 0.86rem; opacity: 0.92; }
.insta-more:hover, .insta-more:focus-visible { filter: brightness(1.06); }

/* v4.8: am Handy nur das blaue Kalender-Symbol unter der Datumskachel, ohne Knopf drumherum */
@media (max-width: 640px) {
  .event-list .ev-line > .ev-cal-btn { justify-self: center; width: 46px; height: 46px; border: 0; border-radius: 8px; background: none; color: var(--sash); }
  .event-list .ev-line > .ev-cal-btn svg { width: 30px; height: 30px; }
  .event-list .ev-line > .ev-cal-btn:hover, .event-list .ev-line > .ev-cal-btn:focus-visible,
  .event-row.is-special .ev-cal-btn, .event-row.is-fest .ev-cal-btn { border: 0; background: none; }
}

/* v4.9: Termine am Handy - alles oben ausgerichtet, Kalender-Symbol etwas kleiner und dichter an der Datumskachel */
@media (max-width: 640px) {
  .event-list .event-row.has-cal .ev-line { row-gap: 6px; align-items: start; }
  .event-list .event-row.has-cal .ev-line > .event-body { align-self: start; }
  .event-list .event-row.has-cal .ev-line > .ev-chev { align-self: start; margin-top: calc((var(--tile-h, 74px) - 30px) / 2); }
  .event-list .ev-line > .ev-cal-btn { width: 36px; height: 36px; }
  .event-list .ev-line > .ev-cal-btn svg { width: 24px; height: 24px; }
}