/*
Theme Name: KMF 2027 – Kreismusikfest (Editor-Version)
Theme URI: https://musikverein-zapfendorf.de/kmf/
Author: Musikverein Zapfendorf
Author URI: https://musikverein-zapfendorf.de/
Description: Editor-Variante des Kreismusikfest-2027-Themes. Die komplette Landingpage besteht aus normalen WordPress-Bloecken (Ueberschrift, Absatz, Bild, Button, Aufklapp-FAQ, Neueste Beitraege) und ist dadurch vollstaendig im Block-Editor bearbeitbar. Aufwaendige Deko-Grafiken des Original-Prototyps entfallen zugunsten der Bearbeitbarkeit. Als eigenstaendiges zweites Theme parallel installierbar.
Version: 4.3.0
Requires at least: 6.1
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kmf2027ed
Tags: event, landing-page, one-page, block-patterns, custom-colors, custom-menu, editor-style
*/

:root {
  --navy-950: #042a4b;
  --navy-900: #06365f;
  --navy-800: #0d4c79;
  --navy-700: #1c5f8c;
  --orange: #f6a019;
  --orange-deep: #ef7f20;
  --red-orange: #ed4f20;
  --ice: #f2f5f9;
  --ice-2: #e7edf4;
  --white: #ffffff;
  --ink: #082f51;
  --text: #203548;
  --muted: #607386;
  --line: #dbe3eb;
  --shadow: 0 22px 55px rgba(4, 42, 75, .13);
  --shadow-soft: 0 12px 32px rgba(4, 42, 75, .09);
  --radius-lg: 30px;
  --radius-md: 20px;
  --radius-sm: 12px;
  --container: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, "Lato", "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--orange-deep); }

.sr-only, .skip-link {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 12px; left: 12px; width: auto; height: auto;
  clip: auto; z-index: 999; padding: 10px 16px; background: var(--navy-950);
  color: #fff; border-radius: 10px;
}

/* ----- Container-Hilfsklasse (auf Gruppen-Bloecken) ----- */
.kmf-inner { width: min(var(--container), calc(100% - 44px)); margin-inline: auto; }

/* ----- Info-Leiste + Kopf ----- */
.notice-bar { background: var(--navy-950); color: #dfeaf5; font-size: .85rem; }
.notice-bar__inner { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; flex-wrap: wrap; }
.notice-bar__extra { color: #9fbdd8; }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: box-shadow .25s; }
.site-header.is-stuck { box-shadow: var(--shadow-soft); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy-950); }
.brand__badge { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--orange); color: var(--navy-950); font-weight: 950; letter-spacing: -.03em; }
.brand__copy { display: flex; flex-direction: column; line-height: 1.05; }
.brand__copy strong { font-size: 1.02rem; letter-spacing: -.02em; }
.brand__copy small { color: var(--muted); font-size: .74rem; }
.main-nav { display: flex; align-items: center; gap: 22px; }
.main-nav a { color: var(--navy-900); text-decoration: none; font-weight: 700; font-size: .95rem; }
.main-nav a:hover { color: var(--orange-deep); }
.main-nav .button, .main-nav a.button { padding: 9px 16px; border-radius: 12px; background: var(--orange); color: var(--navy-950); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.nav-toggle__line { width: 22px; height: 2px; background: var(--navy-900); border-radius: 2px; }

/* ----- Buttons (Core-Button-Block) ----- */
.wp-block-button__link,
.wp-block-button.is-style-fill .wp-block-button__link {
  border-radius: 14px; padding: 14px 26px; font-weight: 800; letter-spacing: .01em;
  text-decoration: none; line-height: 1; border: 0;
}
.wp-block-button.btn-orange .wp-block-button__link { background: var(--orange); color: var(--navy-950); }
.wp-block-button.btn-orange .wp-block-button__link:hover { background: var(--orange-deep); }
.wp-block-button.btn-navy .wp-block-button__link { background: var(--navy-950); color: #fff; }
.wp-block-button.btn-navy .wp-block-button__link:hover { background: var(--navy-800); }
.wp-block-button.btn-ghost .wp-block-button__link { background: transparent; color: var(--navy-950); box-shadow: inset 0 0 0 2px var(--navy-950); }
.wp-block-button.btn-ghost.on-dark .wp-block-button__link { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.wp-block-buttons { gap: 12px; }

/* ----- Abschnitts-Grundlagen ----- */
.kmf-section { padding: 74px 0; }
.kmf-section .kmf-inner > .wp-block-heading,
.kmf-section .kmf-inner > .eyebrow { margin-top: 0; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 900; color: var(--orange-deep); margin: 0 0 8px; }
.eyebrow--light { color: #9fbdd8; }
.wp-block-heading { color: var(--navy-950); letter-spacing: -.03em; line-height: 1.06; }
h1.wp-block-heading { font-size: clamp(2.6rem, 6vw, 4.6rem); text-transform: uppercase; font-weight: 950; }
h2.wp-block-heading { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3.wp-block-heading { font-size: 1.3rem; }
.lead { font-size: 1.12rem; color: var(--text); }

/* ----- Hero ----- */
.kmf-hero { background: linear-gradient(160deg, var(--navy-950), var(--navy-800)); color: #eaf2fa; padding: 70px 0 64px; }
.kmf-hero .eyebrow { color: var(--orange); }
.kmf-hero h1.wp-block-heading { color: #fff; }
.kmf-hero .lead { color: #cfe0ef; max-width: 40ch; }
.kmf-hero .wp-block-buttons { margin-top: 8px; }
.kmf-facts { display: flex; flex-wrap: wrap; gap: 26px; margin: 6px 0 4px; padding: 0; list-style: none; }
.kmf-facts li { font-size: .95rem; color: #dce9f5; }
.kmf-facts strong { display: block; color: #fff; font-size: 1.05rem; }
/* Countdown (einziger HTML-Block) */
.countdown { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 26px; padding: 18px 22px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-md); width: max-content; max-width: 100%; }
.countdown__label { align-self: center; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: #9fbdd8; font-weight: 800; }
.countdown > div { display: grid; justify-items: center; min-width: 58px; }
.countdown strong { font-size: 2.1rem; font-weight: 950; color: #fff; letter-spacing: -.03em; }
.countdown span { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #bcd2e6; }

/* ----- Quicklinks ----- */
.kmf-quicklinks { padding: 32px 0; background: var(--ice); }
.kmf-quicklinks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kmf-quicklinks-grid > .wp-block-group { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 20px; box-shadow: var(--shadow-soft); }
.kmf-quicklinks-grid h3.wp-block-heading { margin: 0 0 4px; }
.kmf-quicklinks-grid p { margin: 0; color: var(--muted); font-size: .9rem; }

/* ----- Generische Karten-Grids ----- */
.kmf-program-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 14px; }
.kmf-visitor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 14px; }
.kmf-clubs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 14px; }
.kmf-support-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; }
.kmf-jubilee-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; }
.kmf-faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 34px; align-items: start; }

.kmf-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px; box-shadow: var(--shadow-soft); }
.kmf-card h3.wp-block-heading { margin-top: 0; }
.kmf-card p { color: var(--muted); }
.kmf-card--navy { background: var(--navy-950); color: #dce9f5; border-color: transparent; }
.kmf-card--navy h3.wp-block-heading { color: #fff; }
.kmf-card--navy p { color: #cddcec; }
.kmf-card--orange { background: linear-gradient(160deg, var(--orange), var(--orange-deep)); border-color: transparent; color: var(--navy-950); }
.kmf-card--orange h3.wp-block-heading { color: var(--navy-950); }

.kmf-section--tint { background: var(--ice); }
.kmf-section--navy { background: var(--navy-950); color: #dce9f5; }
.kmf-section--navy h2.wp-block-heading { color: #fff; }
.kmf-section--navy .eyebrow { color: var(--orange); }

/* Link-Listen (Vereinsbereich) */
.kmf-linklist.wp-block-list { list-style: none; margin: 8px 0 0; padding: 0; }
.kmf-linklist.wp-block-list li { border-bottom: 1px solid var(--line); }
.kmf-linklist.wp-block-list li a { display: block; padding: 11px 2px; color: var(--navy-900); text-decoration: none; font-weight: 700; }
.kmf-linklist.wp-block-list li a:hover { color: var(--orange-deep); }

/* Meilensteine / Zahlen */
.kmf-milestones { display: flex; gap: 26px; flex-wrap: wrap; margin: 6px 0 4px; padding: 0; list-style: none; }
.kmf-milestones li { min-width: 90px; }
.kmf-milestones strong { display: block; font-size: 2.4rem; font-weight: 950; color: var(--orange-deep); letter-spacing: -.03em; }
.kmf-milestones span { color: var(--muted); font-size: .85rem; }

/* Sponsorenwand */
.kmf-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 10px; }
.kmf-logos > p { margin: 0; display: grid; place-items: center; height: 74px; background: #fff; border: 1px dashed var(--line); border-radius: var(--radius-sm); color: var(--muted); font-weight: 800; font-size: .85rem; }
.kmf-section--navy .kmf-logos > p { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: #cddcec; }

/* ----- FAQ (Core Details) ----- */
.kmf-faq .wp-block-details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 18px; margin-bottom: 12px; box-shadow: var(--shadow-soft); }
.kmf-faq .wp-block-details summary { cursor: pointer; padding: 14px 0; font-weight: 800; color: var(--navy-950); list-style: none; }
.kmf-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.kmf-faq .wp-block-details[open] summary { border-bottom: 1px solid var(--line); }
.kmf-faq .wp-block-details p { color: var(--text); }

/* ----- Aktuelles: Neueste-Beitraege-Block ----- */
.kmf-news .wp-block-latest-posts__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 14px 0 0; padding: 0; list-style: none; }
.kmf-news .wp-block-latest-posts__list > li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-soft); }
.kmf-news .wp-block-latest-posts__featured-image img { width: 100%; height: 170px; object-fit: cover; }
.kmf-news .wp-block-latest-posts__list > li > a { display: block; padding: 16px 18px 4px; color: var(--navy-950); font-weight: 800; font-size: 1.08rem; text-decoration: none; letter-spacing: -.01em; }
.kmf-news .wp-block-latest-posts__post-date { display: block; padding: 0 18px; color: var(--muted); font-size: .8rem; }
.kmf-news .wp-block-latest-posts__post-excerpt { padding: 6px 18px 20px; margin: 0; color: var(--text); font-size: .93rem; }

/* ----- CTA ----- */
.kmf-cta { background: linear-gradient(160deg, var(--orange), var(--red-orange)); color: var(--navy-950); padding: 60px 0; }
.kmf-cta h2.wp-block-heading { color: var(--navy-950); }
.kmf-cta p { color: #3a1e07; }

/* ----- Bilder (z. B. Flyer) ----- */
.wp-block-image.kmf-flyer img { border-radius: var(--radius-md); box-shadow: var(--shadow); }

/* ----- Footer ----- */
.footer { background: var(--navy-950); color: #b9cde0; padding: 54px 0 26px; }
.footer a { color: #cdddec; text-decoration: none; }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 26px; }
.footer h3 { color: #fff; font-size: .95rem; margin: 0 0 12px; }
.footer__grid > div a { display: block; padding: 3px 0; font-size: .9rem; }
.footer__brand p { font-size: .9rem; }
.brand--footer .brand__copy strong, .brand--footer .brand__copy small { color: #fff; }
.footer__bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: .82rem; color: #9fbdd8; }

/* ----- Standard-Inhalte (Blog, Seite, Einzelbeitrag) ----- */
.content-area { padding: 70px 0 90px; }
.content-area .kmf-inner { width: min(820px, calc(100% - 40px)); }
.entry-title { color: var(--navy-950); font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.03em; margin: 0 0 8px; }
.entry-meta { color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content a { color: var(--orange-deep); font-weight: 700; }
.pagination { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 40px; }
.pagination .page-numbers { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 12px; color: var(--navy-950); font-weight: 800; text-decoration: none; }
.pagination .current { background: var(--navy-950); color: #fff; }

/* ----- Responsive ----- */
@media (max-width: 980px) {
  .kmf-quicklinks-grid { grid-template-columns: 1fr 1fr; }
  .kmf-program-grid, .kmf-visitor-grid { grid-template-columns: 1fr 1fr; }
  .kmf-support-grid, .kmf-jubilee-grid, .kmf-faq-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .nav-toggle { display: inline-flex; }
  .main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 8px 22px 16px; }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .kmf-quicklinks-grid, .kmf-program-grid, .kmf-visitor-grid, .kmf-clubs-grid, .kmf-logos { grid-template-columns: 1fr; }
  .kmf-news .wp-block-latest-posts__list { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* ----- Bandlogos in den Programmkarten (weiße Logo-Platte) ----- */
.kmf-card .band-logo.wp-block-image { margin: 8px 0 12px; }
.kmf-card .band-logo.wp-block-image img { display: inline-block; background: #fff; padding: 12px 16px; border-radius: 12px; box-shadow: 0 8px 20px rgba(4,42,75,.14); height: 50px; width: auto; max-width: 100%; }
@media (max-width: 620px) { .kmf-card .band-logo.wp-block-image img { height: 44px; } }

/* =========================================================
   v2.0 – Marken-Grafiken, Hero und Umschalt-Modi
   ========================================================= */

/* ----- Kopfleiste: 50-Jahre-Logo ----- */
.brand { gap: 0; }
.brand__logo { display: block; height: 46px; width: auto; }
@media (max-width: 680px) { .brand__logo { height: 38px; } }

/* ----- Hero: Strahlen-Hintergrund + Note ----- */
.kmf-hero {
  position: relative;
  overflow: hidden;
  background: var(--navy-950);
  padding: 78px 0 72px;
}
/* Strahlen (Original-Grafik), dezent hinterlegt */
.kmf-hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 150%;
  background: url("assets/hero-rays.svg") center / cover no-repeat;
  opacity: .55;
  pointer-events: none;
}
/* Note als Ornament, wie im Flyer */
.kmf-hero::after {
  content: "";
  position: absolute;
  right: -4%;
  bottom: -18%;
  width: min(48vw, 620px);
  aspect-ratio: 453 / 439;
  background: url("assets/note.svg") center / contain no-repeat;
  opacity: .16;
  filter: brightness(0) invert(1);
  transform: rotate(-6deg);
  pointer-events: none;
}
.kmf-hero > * { position: relative; z-index: 1; }

.kmf-hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 46px; align-items: center; }
.kmf-hero-copy > * + * { margin-top: 18px; }
.kmf-hero-visual { display: flex; justify-content: center; }
.kmf-hero-logo.wp-block-image { margin: 0; }
.kmf-hero-logo.wp-block-image img {
  width: min(330px, 100%);
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .35));
}

@media (max-width: 900px) {
  .kmf-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .kmf-hero-visual { order: -1; justify-content: flex-start; }
  .kmf-hero-logo.wp-block-image img { width: min(230px, 60%); }
  .kmf-hero::after { width: 70vw; right: -18%; bottom: -10%; opacity: .12; }
}

/* ----- Fuß: KMF-Logo ----- */
.brand--footer .brand__logo { height: 118px; }

/* ----- Modusabhängige Links in Karten ----- */
.kmf-card-link { margin-top: auto; padding-top: 6px; }
.kmf-inline-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--orange-deep); font-weight: 800; text-decoration: none; font-size: .94rem;
}
.kmf-inline-link::after { content: "→"; transition: transform .18s; }
.kmf-inline-link:hover::after { transform: translateX(3px); }
.kmf-card--navy .kmf-inline-link, .kmf-section--navy .kmf-inline-link { color: var(--orange); }
.kmf-card--orange .kmf-inline-link { color: var(--navy-950); }
.kmf-inline-button {
  display: inline-block; padding: 12px 22px; border-radius: 14px;
  background: var(--orange); color: var(--navy-950); font-weight: 800; text-decoration: none;
}
.kmf-inline-button:hover { background: var(--orange-deep); }
.kmf-card { display: flex; flex-direction: column; }

/* ----- Eingebetteter Unterseiten-Inhalt (One-Pager-Modus) ----- */
.kmf-embedded-content { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); }
.kmf-section--navy .kmf-embedded-content,
.kmf-cta .kmf-embedded-content { border-top-color: rgba(255,255,255,.18); }
.kmf-embedded-content > * + * { margin-top: 1.05em; }
.kmf-embedded-content h2 { font-size: 1.6rem; }
.kmf-embedded-content h3 { font-size: 1.2rem; }
.kmf-embedded-content img { border-radius: var(--radius-sm); }

/* ----- Unterseiten (Modus "Unterseiten") ----- */
.page-hero { background: var(--navy-950); color: #cfe0ef; padding: 46px 0 42px; position: relative; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 200%;
  background: url("assets/hero-rays.svg") center / cover no-repeat; opacity: .35; pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero .entry-title { color: #fff; margin: 0; }
.page-hero .eyebrow { color: var(--orange); }
.kmf-breadcrumb { font-size: .84rem; color: #9fbdd8; margin: 0 0 10px; }
.kmf-breadcrumb a { color: #cfe0ef; text-decoration: none; }
.kmf-breadcrumb a:hover { color: #fff; }
.kmf-subpages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.kmf-subpages a {
  display: block; padding: 18px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--navy-950); font-weight: 800; text-decoration: none;
  box-shadow: var(--shadow-soft);
}
.kmf-subpages a:hover { border-color: var(--orange); }
@media (max-width: 780px) { .kmf-subpages { grid-template-columns: 1fr; } }

/* =========================================================
   v2.2 – Layout-Härtung
   WordPress gibt für Gruppen-Blöcke eigene Layout-Styles aus
   (is-layout-flow / is-layout-constrained). Damit die Raster
   sicher greifen, werden sie hier verbindlich gesetzt.
   ========================================================= */

.wp-block-group.kmf-hero-grid,
.wp-block-group.kmf-quicklinks-grid,
.wp-block-group.kmf-program-grid,
.wp-block-group.kmf-visitor-grid,
.wp-block-group.kmf-clubs-grid,
.wp-block-group.kmf-support-grid,
.wp-block-group.kmf-jubilee-grid,
.wp-block-group.kmf-faq-grid,
.wp-block-group.kmf-logos {
  display: grid !important;
}
/* Kinder dürfen nicht durch Core-Breiten eingeschränkt werden */
.wp-block-group.kmf-hero-grid > *,
.wp-block-group.kmf-quicklinks-grid > *,
.wp-block-group.kmf-program-grid > *,
.wp-block-group.kmf-visitor-grid > *,
.wp-block-group.kmf-clubs-grid > *,
.wp-block-group.kmf-support-grid > *,
.wp-block-group.kmf-jubilee-grid > *,
.wp-block-group.kmf-faq-grid > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.wp-block-group.kmf-hero-grid      { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr) !important; gap: 46px; align-items: center; }
.wp-block-group.kmf-quicklinks-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px; }
.wp-block-group.kmf-program-grid   { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 22px; }
.wp-block-group.kmf-visitor-grid   { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px; }
.wp-block-group.kmf-clubs-grid     { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px; }
.wp-block-group.kmf-support-grid   { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) !important; gap: 30px; align-items: center; }
.wp-block-group.kmf-jubilee-grid   { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important; gap: 40px; align-items: center; }
.wp-block-group.kmf-faq-grid       { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important; gap: 34px; align-items: start; }
.wp-block-group.kmf-logos          { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px; }

/* Innerer Container darf nicht von Core-Layout überschrieben werden */
.wp-block-group.kmf-inner { width: min(var(--container), calc(100% - 44px)) !important; margin-inline: auto !important; max-width: none !important; }

/* Aktuelles: Beitragsraster */
.kmf-news .wp-block-latest-posts__list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

/* --- Umbruchpunkte (müssen die Vorgaben oben ebenfalls überschreiben) --- */
@media (max-width: 980px) {
  .wp-block-group.kmf-quicklinks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .wp-block-group.kmf-program-grid,
  .wp-block-group.kmf-visitor-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .wp-block-group.kmf-support-grid,
  .wp-block-group.kmf-jubilee-grid,
  .wp-block-group.kmf-faq-grid        { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 900px) {
  .wp-block-group.kmf-hero-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 34px; }
}
@media (max-width: 680px) {
  .wp-block-group.kmf-quicklinks-grid,
  .wp-block-group.kmf-program-grid,
  .wp-block-group.kmf-visitor-grid,
  .wp-block-group.kmf-clubs-grid,
  .wp-block-group.kmf-logos { grid-template-columns: minmax(0, 1fr) !important; }
  .kmf-news .wp-block-latest-posts__list { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ----- Note im Hintergrund: vollständig sichtbar, dezenter ----- */
.kmf-hero::after {
  right: 4%;
  bottom: 6%;
  width: min(30vw, 300px);
  opacity: .13;
  transform: rotate(-8deg);
}
@media (max-width: 900px) {
  .kmf-hero::after { right: 3%; bottom: 3%; width: 40vw; opacity: .10; }
}

/* Bandlogos dürfen die Spaltenbreite nicht beeinflussen */
.kmf-card .band-logo.wp-block-image { max-width: 100%; }
.kmf-card .band-logo.wp-block-image img { max-width: 100%; height: 50px; width: auto; object-fit: contain; }
.kmf-card p, .kmf-card h3 { overflow-wrap: break-word; }

/* ---------------------------------------------------------
   Kernproblem: WordPress schnürt Kinder von Blöcken mit
   "is-layout-constrained" auf die Standard-Inhaltsbreite ein
   (max-width: 650px). Für die Landingpage-Abschnitte muss die
   volle Breite gelten.
--------------------------------------------------------- */
.kmf-hero .kmf-inner > *,
.kmf-quicklinks .kmf-inner > *,
.kmf-section .kmf-inner > *,
.kmf-cta .kmf-inner > *,
.wp-block-group.kmf-inner > *,
.kmf-hero-grid > *,
.kmf-hero-copy > *,
.kmf-card > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Fließtext im Hero darf trotzdem angenehm schmal bleiben */
.kmf-hero .lead { max-width: 44ch !important; }

/* ---------------------------------------------------------
   v2.3 – Eigenes Menü (Design → Menüs) korrekt darstellen
   Vorher wurden Listenpunkte ohne Liste ausgegeben -> Aufzählungspunkte.
--------------------------------------------------------- */
.main-nav .main-nav__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  gap: 22px;
}
.main-nav .main-nav__list li { list-style: none !important; margin: 0; padding: 0; }
.main-nav .main-nav__list li::marker { content: none; }
.main-nav .main-nav__list a { color: var(--navy-900); text-decoration: none; font-weight: 700; font-size: .95rem; }
.main-nav .main-nav__list a:hover { color: var(--orange-deep); }
.main-nav .main-nav__list li.button > a,
.main-nav .main-nav__list li.btn-orange > a {
  display: inline-block; padding: 9px 16px; border-radius: 12px;
  background: var(--orange); color: var(--navy-950);
}

@media (max-width: 680px) {
  .main-nav .main-nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .main-nav .main-nav__list a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
}

/* ---------------------------------------------------------
   Zusätzliche Absicherung der Inhaltsbreite
   (greift zusammen mit theme.json)
--------------------------------------------------------- */
.kmf-hero > .kmf-inner,
.kmf-quicklinks > .kmf-inner,
.kmf-section > .kmf-inner,
.kmf-cta > .kmf-inner {
  width: min(1200px, calc(100% - 44px)) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------------------------------------------------------
   v2.4 – Bandlogos in den Programmkarten wieder groß und
   auf großzügiger weißer Platte (wie in Version 1.2).
--------------------------------------------------------- */
.kmf-card .band-logo.wp-block-image {
  margin: 10px 0 16px !important;
  max-width: 100% !important;
}
.kmf-card .band-logo.wp-block-image img {
  display: block !important;
  background: #fff !important;
  padding: 16px 22px !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 26px rgba(4, 42, 75, .16) !important;
  height: 78px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  box-sizing: content-box !important;
}
@media (max-width: 1100px) {
  .kmf-card .band-logo.wp-block-image img { height: 64px !important; padding: 14px 18px !important; }
}
@media (max-width: 680px) {
  .kmf-card .band-logo.wp-block-image img { height: 58px !important; }
}

/* =========================================================
   v2.5 – Scrollverhalten, Startbereich und Abschnittsrhythmus
   ========================================================= */

:root {
  --kmf-bar: 40px;    /* Info-Leiste */
  --kmf-head: 71px;   /* klebende Kopfleiste */
  --kmf-offset: 80px; /* Versatz für Sprungmarken */
}

/* ----- 1) Sprungmarken: Überschrift rutscht nicht mehr unter den Kopf ----- */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: var(--kmf-offset); }
.kmf-section[id],
.kmf-hero[id],
.kmf-cta[id],
section[id] { scroll-margin-top: var(--kmf-offset) !important; }
/* Angemeldete Nutzer: WordPress-Adminleiste berücksichtigen */
.admin-bar [id] { scroll-margin-top: calc(var(--kmf-offset) + 32px); }
@media (max-width: 782px) {
  .admin-bar [id] { scroll-margin-top: calc(var(--kmf-offset) + 46px); }
}
/* Wer Bewegung reduziert haben möchte, bekommt kein sanftes Scrollen */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ----- 2) Startbereich auf volle Bildschirmhöhe ----- */
.kmf-hero-full .kmf-hero {
  min-height: max(560px, calc(100svh - var(--kmf-bar) - var(--kmf-head)));
  display: flex;
  align-items: center;
}
.kmf-hero-full.admin-bar .kmf-hero {
  min-height: max(560px, calc(100svh - var(--kmf-bar) - var(--kmf-head) - 32px));
}
.kmf-hero-full .kmf-hero > .kmf-inner { width: min(1200px, calc(100% - 44px)) !important; }
/* Sehr flache Fenster: lieber normal fließen lassen */
@media (max-height: 620px) {
  .kmf-hero-full .kmf-hero { min-height: 0; display: block; }
}

/* ----- 3) Gleichmäßiger Rhythmus der Abschnitte ----- */
.kmf-section { padding: 92px 0; }
.kmf-quicklinks { padding: 34px 0; }
.kmf-cta { padding: 84px 0; }
/* Erster Absatz nach einer Überschrift enger, Blöcke darunter luftiger */
.kmf-section .eyebrow { margin-bottom: 10px; }
.kmf-section h2.wp-block-heading { margin: 0 0 14px; }
.kmf-section .lead { margin: 0 0 34px; max-width: 68ch; }
.kmf-section .kmf-program-grid,
.kmf-section .kmf-visitor-grid,
.kmf-section .kmf-clubs-grid { margin-top: 6px; }
@media (max-width: 780px) {
  .kmf-section { padding: 64px 0; }
  .kmf-cta { padding: 60px 0; }
}

/* ----- 4) Einrasten (Scroll-Snap), per Customizer schaltbar ----- */
.kmf-snap-soft,
.kmf-snap-hard {
  scroll-padding-top: var(--kmf-offset);
}
.kmf-snap-soft .kmf-hero,
.kmf-snap-soft .kmf-section,
.kmf-snap-soft .kmf-cta,
.kmf-snap-hard .kmf-hero,
.kmf-snap-hard .kmf-section,
.kmf-snap-hard .kmf-cta {
  scroll-snap-align: start;
  scroll-snap-stop: normal; /* schnelles Scrollen darf Abschnitte überspringen */
}

@media (min-width: 1024px) and (min-height: 700px) {
  html:has(body.kmf-snap-soft) { scroll-snap-type: y proximity; }
  html:has(body.kmf-snap-hard) { scroll-snap-type: y mandatory; }
}
/* Sicherheitsnetz: Abschnitte, die höher als der Bildschirm sind, rasten nicht ein,
   damit nichts übersprungen wird. */
@media (min-width: 1024px) {
  .kmf-snap-hard .kmf-section:has(.kmf-visitor-grid),
  .kmf-snap-hard .kmf-section:has(.kmf-faq-grid),
  .kmf-snap-hard .kmf-section:has(.kmf-clubs-grid) {
    scroll-snap-align: none;
  }
}

/* ---------------------------------------------------------
   v2.6 – Schnellzugriff-Kacheln wieder anklickbar
   Die gesamte Kachel ist ein Klickziel; das Ziel richtet sich
   nach dem gewählten Modus (Sprungmarke oder Unterseite).
--------------------------------------------------------- */
.kmf-quicklinks-grid .quicklink {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 22px 22px 18px;
  box-shadow: var(--shadow-soft);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.kmf-quicklinks-grid .quicklink:hover {
  transform: translateY(-2px);
  border-color: var(--orange);
  box-shadow: 0 14px 32px rgba(4, 42, 75, .14);
}
.kmf-quicklinks-grid .quicklink h3.wp-block-heading { margin: 0 0 4px; font-size: 1.18rem; }
.kmf-quicklinks-grid .quicklink p { margin: 0; color: var(--muted); font-size: .92rem; }
.kmf-quicklinks-grid .quicklink .quicklink__go { margin-top: 12px !important; }
.kmf-quicklinks-grid .quicklink .quicklink__go a {
  color: var(--orange-deep); font-weight: 800; font-size: .9rem; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.kmf-quicklinks-grid .quicklink .quicklink__go a::after { content: "→"; transition: transform .16s; }
.kmf-quicklinks-grid .quicklink:hover .quicklink__go a::after { transform: translateX(3px); }
/* Die ganze Kachel klickbar machen */
.kmf-quicklinks-grid .quicklink .quicklink__go a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
}
/* Tastaturbedienung sichtbar machen */
.kmf-quicklinks-grid .quicklink:focus-within {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* =========================================================
   v2.7 – Schnellzugriff-Leiste überlappt den Startbereich
   (wie im ursprünglichen Entwurf): eine zusammenhängende
   weiße Karte, die über die Hero-Unterkante ragt.
   ========================================================= */

/* Platz schaffen, damit die Leiste nichts verdeckt */
.kmf-hero { padding-bottom: 130px; }
.kmf-hero-full .kmf-hero { padding-bottom: 140px; }

.kmf-quicklinks {
  background: transparent !important;
  padding: 0 0 46px !important;
  margin-top: -60px;
  position: relative;
  z-index: 5;
}

/* Aus vier Einzelkacheln wird eine durchgehende Karte */
.wp-block-group.kmf-quicklinks-grid {
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 26px 60px rgba(4, 42, 75, .22);
  overflow: hidden;
  gap: 0 !important;
}

.kmf-quicklinks-grid .quicklink {
  position: relative;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: 26px 58px 26px 92px;
  transition: background .16s ease;
  transform: none !important;
}
.kmf-quicklinks-grid .quicklink:last-child { border-right: 0; }
.kmf-quicklinks-grid .quicklink:hover { background: #fbfdff; border-color: var(--line); }

/* Icon-Kachel links */
.kmf-quicklinks-grid .quicklink::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background-color: #fdeeda;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}
/* Programm – Kalender */
.kmf-quicklinks-grid .quicklink:nth-child(1)::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef7f20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 2v3M17 2v3M3 9h18'/%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3C/svg%3E");
}
/* Für Musikvereine – Notenpult / Musik */
.kmf-quicklinks-grid .quicklink:nth-child(2)::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef7f20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 20v-8a4 4 0 0 1 8 0v8M5 20h14M12 4V2'/%3E%3C/svg%3E");
}
/* Besucherinfos – Ortsmarke */
.kmf-quicklinks-grid .quicklink:nth-child(3)::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef7f20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5 7-12a7 7 0 1 0-14 0c0 7 7 12 7 12Z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
}
/* Aktuelles – Meldung */
.kmf-quicklinks-grid .quicklink:nth-child(4)::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef7f20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cpath d='M8 9h8M8 13h8M8 17h5'/%3E%3C/svg%3E");
}

.kmf-quicklinks-grid .quicklink h3.wp-block-heading { margin: 0 0 2px; font-size: 1.12rem; }
.kmf-quicklinks-grid .quicklink > p { font-size: .88rem; }

/* Pfeil rechts statt Textlink */
.kmf-quicklinks-grid .quicklink .quicklink__go {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
}
.kmf-quicklinks-grid .quicklink .quicklink__go a { font-size: 0; }
.kmf-quicklinks-grid .quicklink .quicklink__go a::after {
  content: "→";
  font-size: 1.35rem;
  color: var(--orange-deep);
  line-height: 1;
}
.kmf-quicklinks-grid .quicklink:hover .quicklink__go a::after { transform: translateX(4px); }

/* Schmalere Fenster: Karte bleibt, Trennlinien wechseln auf waagerecht */
@media (max-width: 980px) {
  .kmf-quicklinks { margin-top: -50px; }
  .kmf-quicklinks-grid .quicklink { border-right: 0; border-bottom: 1px solid var(--line); }
  .kmf-quicklinks-grid .quicklink:nth-child(2) { border-right: 0; }
}
@media (max-width: 680px) {
  .kmf-hero, .kmf-hero-full .kmf-hero { padding-bottom: 96px; }
  .kmf-quicklinks { margin-top: -44px; padding-bottom: 34px !important; }
  .kmf-quicklinks-grid .quicklink { padding: 20px 52px 20px 82px; }
  .kmf-quicklinks-grid .quicklink .quicklink__go a { font-size: .88rem; }
  .kmf-quicklinks-grid .quicklink .quicklink__go a::after { font-size: 1.1rem; }
}

/* =========================================================
   v2.8 – Ganze Kachel klickbar (Text, Icon und Pfeil)
   Korrektur: Der Pfeil war absolut positioniert; dadurch
   richtete sich die unsichtbare Klickfläche an ihm aus statt
   an der Kachel. Jetzt Rasterlayout mit statischer Position.
   ========================================================= */
.kmf-quicklinks-grid .quicklink {
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "titel pfeil"
    "text  pfeil";
  align-items: center;
  column-gap: 16px;
}
.kmf-quicklinks-grid .quicklink h3.wp-block-heading { grid-area: titel; }
.kmf-quicklinks-grid .quicklink > p:not(.quicklink__go) { grid-area: text; }

/* Pfeil sitzt im Raster statt absolut -> Klickfläche bezieht sich
   wieder auf die gesamte Kachel */
.kmf-quicklinks-grid .quicklink .quicklink__go {
  grid-area: pfeil;
  position: static !important;
  transform: none !important;
  right: auto !important;
  top: auto !important;
  margin: 0 !important;
  justify-self: end;
}
/* Die unsichtbare Klickfläche deckt die ganze Kachel ab und liegt
   über Icon, Überschrift und Text */
.kmf-quicklinks-grid .quicklink .quicklink__go a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 0;
}
.kmf-quicklinks-grid .quicklink::before { z-index: 1; }
.kmf-quicklinks-grid .quicklink h3.wp-block-heading,
.kmf-quicklinks-grid .quicklink > p { position: relative; z-index: 2; }

/* =========================================================
   v2.9 – Größeres Kreismusikfest-Signet (Desktop) und
   mittig platzierte Note im Startbereich (wie im Flyer)
   ========================================================= */

/* ----- Kreismusikfest-Signet im Startbereich: auf großen
   Bildschirmen deutlich größer ----- */
@media (min-width: 1200px) {
  .kmf-hero-logo.wp-block-image img { width: min(440px, 100%); }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .kmf-hero-logo.wp-block-image img { width: min(380px, 100%); }
}
@media (min-width: 901px) and (max-width: 1023px) {
  .kmf-hero-logo.wp-block-image img { width: min(320px, 100%); }
}

/* ----- Note mittig hinter dem Startbereich ----- */
.kmf-hero::after {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  width: min(52vh, 470px);
  transform: translate(-50%, -52%) rotate(-5deg);
  opacity: .12;
}
@media (max-width: 900px) {
  .kmf-hero::after {
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    width: min(62vw, 360px);
    transform: translate(-50%, -50%) rotate(-5deg);
    opacity: .09;
  }
}

/* =========================================================
   v3.0 – Strahlen gehen vom Kreismusikfest-Signet aus
   Der Strahlenkranz liegt nicht mehr flächig über dem
   Startbereich, sondern ist auf das Logo zentriert. Dadurch
   wirkt es, als kämen die Strahlen aus dem Signet.
   Reihenfolge der Ebenen: Strahlen -> Note -> Inhalt.
   ========================================================= */
.kmf-hero::before {
  content: "";
  position: absolute;
  inset: auto;
  left: calc(50% + 384px);   /* Mitte des Signets bei 1200px Inhaltsbreite */
  top: 46.2%;
  width: max(230vw, 230vh);
  height: max(230vw, 230vh);
  transform: translate(-50%, -50%);
  background: url("assets/hero-rays.svg") center / cover no-repeat;
  opacity: .6;
  pointer-events: none;
}
/* Zum Rand hin laufen die Strahlen weich aus */
.kmf-hero .kmf-rays-fade,
.kmf-hero::before {
  -webkit-mask-image: radial-gradient(circle, #000 0 26%, rgba(0,0,0,.55) 58%, rgba(0,0,0,0) 82%);
          mask-image: radial-gradient(circle, #000 0 26%, rgba(0,0,0,.55) 58%, rgba(0,0,0,0) 82%);
}

/* Schmalere Bildschirme: Inhaltsbreite ist prozentual, Signet sitzt bei ca. 82 % */
@media (max-width: 1243px) {
  .kmf-hero::before { left: 82%; top: 46.2%; }
}
/* Gestapeltes Layout: Signet steht oben links */
@media (max-width: 900px) {
  .kmf-hero::before { left: 34%; top: 19.5%; opacity: .55; }
}

/* =========================================================
   v3.1 – Signet etwas größer, Note kleiner und tiefer
   ========================================================= */

/* Kreismusikfest-Signet noch eine Stufe größer */
@media (min-width: 1200px) {
  .kmf-hero-logo.wp-block-image img { width: min(500px, 100%); }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .kmf-hero-logo.wp-block-image img { width: min(420px, 100%); }
}
@media (min-width: 901px) and (max-width: 1023px) {
  .kmf-hero-logo.wp-block-image img { width: min(350px, 100%); }
}

/* Note: rund halb so groß und mittig weiter unten */
.kmf-hero::after {
  left: 50%;
  right: auto;
  top: 68%;
  bottom: auto;
  width: min(26vh, 235px);
  transform: translate(-50%, -50%) rotate(-5deg);
  opacity: .13;
}
@media (max-width: 900px) {
  .kmf-hero::after {
    left: 50%;
    top: 66%;
    width: min(31vw, 180px);
    transform: translate(-50%, -50%) rotate(-5deg);
    opacity: .10;
  }
}

/* Rechte Hero-Spalte verbreitern, damit das Signet wirklich größer werden kann */
@media (min-width: 1200px) {
  .wp-block-group.kmf-hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) !important;
  }
  /* Strahlenmitte an die neue Position des Signets anpassen */
  .kmf-hero::before { left: calc(50% + 340px); }
}

/* =========================================================
   v3.2 – Eckdaten im Startbereich als abgesetzte Kästchen
   mit Icon (Datum, Ort, Eintritt) – wie im ursprünglichen
   Entwurf, statt als freier Text.
   ========================================================= */
.kmf-hero .kmf-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 6px;
  padding: 0;
  list-style: none;
}
.kmf-hero .kmf-facts li {
  position: relative;
  display: block;
  min-height: 62px;
  padding: 12px 16px 12px 50px;
  border: 1px solid rgba(255, 255, 255, .20);
  background: rgba(255, 255, 255, .07);
  border-radius: 14px;
  color: #b9cfe4;
  font-size: .84rem;
  line-height: 1.35;
  backdrop-filter: blur(2px);
}
.kmf-hero .kmf-facts li strong {
  display: block;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: 1px;
}
/* Icon links im Kästchen */
.kmf-hero .kmf-facts li::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 23px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* Datum – Kalender */
.kmf-hero .kmf-facts li:nth-child(1)::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6a019' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 2v3M17 2v3M3 9h18'/%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3C/svg%3E");
}
/* Ort – Ortsmarke */
.kmf-hero .kmf-facts li:nth-child(2)::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6a019' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5 7-12a7 7 0 1 0-14 0c0 7 7 12 7 12Z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
}
/* Eintritt – Ticket */
.kmf-hero .kmf-facts li:nth-child(3)::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6a019' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M7 9h7M7 13h5'/%3E%3C/svg%3E");
}

@media (max-width: 680px) {
  .kmf-hero .kmf-facts { gap: 10px; }
  .kmf-hero .kmf-facts li { width: 100%; min-height: 56px; padding: 10px 16px 10px 52px; }
}

/* ---------------------------------------------------------
   v3.3 – Eckdaten ohne Untertitel: kompaktere Kästchen
--------------------------------------------------------- */
.kmf-hero .kmf-facts li {
  min-height: 0;
  padding: 13px 18px 13px 48px;
  display: flex;
  align-items: center;
}
.kmf-hero .kmf-facts li strong {
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.2;
}
@media (max-width: 680px) {
  .kmf-hero .kmf-facts li { width: auto; min-height: 0; padding: 11px 15px 11px 44px; }
  .kmf-hero .kmf-facts li strong { font-size: .94rem; }
}

/* Mittlere Breiten: Kästchen knapper, damit sie in eine Reihe passen */
@media (min-width: 681px) and (max-width: 1150px) {
  .kmf-hero .kmf-facts { gap: 8px; }
  .kmf-hero .kmf-facts li { padding: 12px 13px 12px 43px; }
  .kmf-hero .kmf-facts li strong { font-size: .94rem; }
  .kmf-hero .kmf-facts li::before { left: 13px; width: 21px; height: 21px; }
}

/* =========================================================
   v3.4 – Schmale/hohe Ansichten (Tablet, geteiltes Fenster)
   - Startbereich füllt nur auf großen Bildschirmen die volle
     Höhe. Sonst wuchs er beim Vergrößern des Fensters mit und
     die Kachelleiste blieb dauerhaft angeschnitten.
   - Signet mittig und größer, Strahlen wieder auf das Signet.
   ========================================================= */

/* Volle Höhe nur ab 1024px Breite */
@media (max-width: 1023px) {
  .kmf-hero-full .kmf-hero {
    min-height: 0;
    display: block;
  }
}

/* Gestapeltes Layout: Signet mittig und größer */
@media (max-width: 900px) {
  .kmf-hero-visual { justify-content: center !important; }
  .kmf-hero-logo.wp-block-image img { width: min(330px, 62%); }
  .kmf-hero-grid { gap: 26px; }
  /* Strahlen mittig auf dem Signet */
  .kmf-hero::before { left: 50%; top: 25.6%; opacity: .58; }
}
@media (max-width: 680px) {
  .kmf-hero-logo.wp-block-image img { width: min(260px, 68%); }
  .kmf-hero::before { left: 50%; top: 20.5%; }
}

/* Signet zuverlässig zentrieren (Core setzt die Flex-Ausrichtung außer Kraft) */
.kmf-hero-visual { display: flex !important; justify-content: center !important; }
.kmf-hero-visual .kmf-hero-logo.wp-block-image { width: 100%; }
.kmf-hero-visual .kmf-hero-logo.wp-block-image img {
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Schmale Ansichten: Startbereich kompakter, damit die Kachelleiste
   bei ausreichend hohem Fenster sichtbar wird */
@media (max-width: 1023px) {
  .kmf-hero { padding-top: 52px; padding-bottom: 104px; }
  .kmf-hero-full .kmf-hero { padding-bottom: 104px; }
  .kmf-hero-grid { gap: 22px !important; }
  .kmf-hero-copy > * + * { margin-top: 14px; }
  .kmf-hero .lead { margin-bottom: 4px; }
  .countdown { padding: 14px 18px; gap: 12px; }
  .countdown strong { font-size: 1.8rem; }
}

/* ---------------------------------------------------------
   v3.5 – Signet auf sehr großen Bildschirmen etwas kleiner
--------------------------------------------------------- */
@media (min-width: 1200px) {
  .kmf-hero-logo.wp-block-image img { width: min(440px, 100%); }
}

/* ---------------------------------------------------------
   v3.6 – Etwas mehr Luft im Startbereich zwischen Einleitung,
   Eckdaten und Buttons
--------------------------------------------------------- */
.kmf-hero .kmf-facts { margin-top: 30px !important; }
.kmf-hero .wp-block-buttons { margin-top: 28px !important; }

@media (max-width: 1023px) {
  .kmf-hero .kmf-facts { margin-top: 24px !important; }
  .kmf-hero .wp-block-buttons { margin-top: 22px !important; }
}

/* =========================================================
   v3.8 – Schriftzug statt Logo im Kopfband, größere
   Kleinüberschriften, etwas weitere Überschriften,
   Note im Startbereich entfällt
   ========================================================= */

/* ----- Kopfband: Schriftzug in Orange ----- */
.brand__text {
  display: block;
  color: var(--orange);
  font-weight: 900;
  font-size: 1.12rem;
  letter-spacing: .02em;
  line-height: 1.15;
  text-transform: none;
}
.brand:hover .brand__text { color: var(--orange-deep); }
@media (max-width: 1023px) {
  .brand__text { font-size: 1rem; }
}
@media (max-width: 680px) {
  .brand__text { font-size: .9rem; max-width: 190px; }
}

/* ----- Kleinüberschriften (z. B. „50 Jahre Musikverein Zapfendorf“,
   „Das Festprogramm“) deutlich größer ----- */
.eyebrow {
  font-size: 1rem;
  letter-spacing: .12em;
  margin-bottom: 12px;
}
.kmf-hero .eyebrow { font-size: 1.05rem; }
@media (max-width: 780px) {
  .eyebrow { font-size: .9rem; }
  .kmf-hero .eyebrow { font-size: .94rem; }
}

/* ----- Überschriften minimal weiter setzen ----- */
.wp-block-heading { letter-spacing: -.005em; }
h1.wp-block-heading { letter-spacing: 0; }
h2.wp-block-heading { letter-spacing: -.005em; }
.entry-title { letter-spacing: -.005em; }

/* ----- Note im Startbereich entfällt ----- */
.kmf-hero::after { content: none !important; }

/* =========================================================
   v3.9 – Kleinüberschriften nochmals größer, Programmkarten
   mit Zeitplan (deutlich höher als breit)
   ========================================================= */

/* ----- Kleinüberschriften ----- */
.eyebrow { font-size: 1.12rem; letter-spacing: .11em; }
.kmf-hero .eyebrow { font-size: 1.18rem; }
@media (max-width: 780px) {
  .eyebrow { font-size: .98rem; }
  .kmf-hero .eyebrow { font-size: 1.02rem; }
}

/* ----- Programmkarten ----- */
.kmf-program-grid .kmf-card {
  padding: 28px 26px 24px;
  min-height: 470px;
}
.kmf-program-grid .kmf-card h3.wp-block-heading {
  font-size: 1.42rem;
  margin: 2px 0 18px;
  letter-spacing: -.005em;
}

/* Zeitplan */
.kmf-timeline.wp-block-list {
  list-style: none !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}
.kmf-timeline.wp-block-list li {
  position: relative;
  list-style: none !important;
  margin: 0;
  padding: 13px 0 13px 18px;
  border-top: 1px solid var(--line);
}
.kmf-timeline.wp-block-list li:first-child { border-top: 0; padding-top: 4px; }
/* Punkt links als Zeitachse */
.kmf-timeline.wp-block-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 21px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}
.kmf-timeline.wp-block-list li:first-child::before { top: 12px; }
.kmf-time {
  display: block;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin-bottom: 3px;
}
.kmf-act {
  display: block;
  font-size: 1.04rem;
  font-weight: 800;
  color: var(--navy-950);
  line-height: 1.25;
}
.kmf-note {
  display: block;
  font-size: .88rem;
  color: var(--muted);
  margin-top: 2px;
}

/* Farbvarianten der Karten */
.kmf-card--navy .kmf-timeline.wp-block-list li { border-top-color: rgba(255,255,255,.16); }
.kmf-card--navy .kmf-time { color: var(--orange); }
.kmf-card--navy .kmf-act { color: #fff; }
.kmf-card--navy .kmf-note { color: #bcd2e6; }
.kmf-card--navy .kmf-timeline.wp-block-list li::before { background: var(--orange); }

.kmf-card--orange .kmf-timeline.wp-block-list li { border-top-color: rgba(4,42,75,.18); }
.kmf-card--orange .kmf-time { color: #7a3d00; }
.kmf-card--orange .kmf-act { color: var(--navy-950); }
.kmf-card--orange .kmf-note { color: #6b3a08; }
.kmf-card--orange .kmf-timeline.wp-block-list li::before { background: var(--navy-950); }

/* Logo unten, Fußzeile ganz unten */
.kmf-program-grid .kmf-card .band-logo.wp-block-image { margin: 4px 0 14px !important; }
.kmf-card-foot {
  margin-top: auto !important;
  padding-top: 12px;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.kmf-card--navy .kmf-card-foot { color: #9fbdd8; }
.kmf-card--orange .kmf-card-foot { color: #6b3a08; }

@media (max-width: 980px) {
  .kmf-program-grid .kmf-card { min-height: 0; }
}

/* =========================================================
   v4.0 – Bandlogos über die volle Kartenbreite, zentriert;
   Kleinüberschriften nochmals größer
   ========================================================= */

/* ----- Kleinüberschriften ----- */
.eyebrow { font-size: 1.26rem; letter-spacing: .10em; }
.kmf-hero .eyebrow { font-size: 1.32rem; }
@media (max-width: 780px) {
  .eyebrow { font-size: 1.06rem; }
  .kmf-hero .eyebrow { font-size: 1.1rem; }
}

/* ----- Bandlogos: volle Breite der Karte, Logo mittig ----- */
.kmf-program-grid .kmf-card .band-logo.wp-block-image {
  width: 100% !important;
  margin: 6px 0 16px !important;
}
.kmf-program-grid .kmf-card .band-logo.wp-block-image img {
  display: block !important;
  width: 100% !important;
  height: 108px !important;
  padding: 18px 22px !important;
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 26px rgba(4, 42, 75, .16) !important;
  object-fit: contain !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
@media (max-width: 1100px) {
  .kmf-program-grid .kmf-card .band-logo.wp-block-image img { height: 96px !important; padding: 15px 18px !important; }
}
@media (max-width: 680px) {
  .kmf-program-grid .kmf-card .band-logo.wp-block-image img { height: 88px !important; }
}

/* =========================================================
   v4.1 – Bandfotos in den Programmkarten
   ========================================================= */

/* Hohes Bandbild (Blech Street Boys) auf weißer Platte */
.kmf-program-grid .kmf-card .band-logo--tall.wp-block-image img {
  height: 230px !important;
  padding: 14px 16px !important;
}

/* Freigestelltes Bandfoto ohne Platte, direkt auf der Karte */
.kmf-program-grid .kmf-card .band-photo.wp-block-image {
  width: 100% !important;
  margin: 2px 0 14px !important;
}
.kmf-program-grid .kmf-card .band-photo.wp-block-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

@media (max-width: 1100px) {
  .kmf-program-grid .kmf-card .band-logo--tall.wp-block-image img { height: 200px !important; }
}
@media (max-width: 680px) {
  .kmf-program-grid .kmf-card .band-logo--tall.wp-block-image img { height: 210px !important; }
}

/* =========================================================
   v4.2 – Logo und Bandfoto gemeinsam auf einer weißen Platte
   ========================================================= */
.kmf-program-grid .kmf-card .band-stack {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(4, 42, 75, .16);
  padding: 14px 18px 10px;
  margin: 6px 0 16px;
  overflow: hidden;
}
.kmf-program-grid .kmf-card .band-stack .wp-block-image {
  margin: 0 !important;
  width: 100% !important;
}
.kmf-program-grid .kmf-card .band-stack img {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}
.kmf-program-grid .kmf-card .band-stack__logo img { height: 74px !important; }
.kmf-program-grid .kmf-card .band-stack__photo img { height: auto !important; margin-top: -2px !important; }

@media (max-width: 1100px) {
  .kmf-program-grid .kmf-card .band-stack__logo img { height: 64px !important; }
  .kmf-program-grid .kmf-card .band-stack { padding: 12px 14px 8px; }
}

/* =========================================================
   v4.3 – Breites Logo (Die Stadelhofner) nutzt die volle
   Plattenbreite statt auf feste Höhe begrenzt zu sein
   ========================================================= */
.kmf-program-grid .kmf-card .band-logo--wide.wp-block-image img {
  height: auto !important;
  width: 100% !important;
  padding: 16px 18px !important;
  object-fit: contain !important;
}
@media (max-width: 1100px) {
  .kmf-program-grid .kmf-card .band-logo--wide.wp-block-image img { padding: 14px 15px !important; }
}