/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 08 2026 | 20:15:44 */
/* ============================================================
   MV Neukenroth: Zentrales Design (Farben, Typo, Layout)

   Ersetzt die alten Code Snippets "Farben definieren" und
   "Seitenheader ausblenden". Alle Farben, Schriften, Radien und
   Schatten stehen als Variablen in Abschnitt 1. Eine Änderung
   dort wirkt auf die gesamte Website.

   ABSCHNITT AUSSCHALTEN:
   Einen ganzen Abschnitt in Kommentarzeichen einklammern.
   Vorher darauf achten, dass innen keine weiteren Kommentare
   stehen, sonst endet die Klammer zu früh.

   INHALT
   1. Variablen
   2. Seitenbausteine an die Variablen anbinden
   3. Grundtypografie
   4. Kopfbereich: Banner und Menüleiste (Desktop)
   5. Ausklappmenüs (Desktop)
   6. Kompakte Leiste mit Logo beim Scrollen (Desktop)
   7. Handy: Menüleiste, Menü und Scroll-Leiste
   8. WordPress-Seitentitel ausblenden
   9. Inhaltsbausteine: Kopfbereiche (Hero), Zahlen, Karten
   ============================================================ */


/* ------------------------------------------------------------
   1. VARIABLEN
   Nur hier Farben ändern. Die alten Namen (--mv-schwarz usw.)
   werden von den Seitenbausteinen genutzt und zeigen deshalb
   auf die neuen Werte.
   ------------------------------------------------------------ */
:root{
  /* Vereinsfarben */
  --mv-rot: #7d0102;
  --mv-rot-dunkel: #5a0001;
  --mv-rot-tief: #3f0001;
  --mv-rot-tint: #f7ecea;
  --mv-gold: #c9a227;
  --mv-gold-dunkel: #a8861d;
  --mv-gold-hell: #e8d38c;

  /* Text und Flächen */
  --mv-tinte: #221a1a;
  --mv-tinte-soft: #5b5050;
  --mv-papier: #ffffff;
  --mv-papier-soft: #faf7f3;
  --mv-linie: #ebe2da;

  /* Formen */
  --mv-radius-s: 8px;
  --mv-radius-m: 14px;
  --mv-radius-l: 22px;
  --mv-schatten-s: 0 1px 2px rgba(34,26,26,.04);
  --mv-schatten-m: 0 14px 36px rgba(34,26,26,.14);

  /* Schrift */
  --mv-schrift: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Alte Namen, auf die neuen Werte umgeleitet */
  --mv-schwarz: var(--mv-tinte);
  --mv-bg-warm: var(--mv-papier-soft);
  --mv-rand: var(--mv-linie);
  --mv-grau: var(--mv-tinte-soft);
  --mv-grau-hell: #857a7a;
  --mv-font: var(--mv-schrift);
  --mv-serif: var(--mv-schrift);
}


/* ------------------------------------------------------------
   2. SEITENBAUSTEINE AN DIE VARIABLEN ANBINDEN
   Jeder HTML-Baustein (Klassen mit "mv-") hat noch eigene
   Farbwerte im Code. Diese Regel ist stärker und holt immer die
   Werte aus Abschnitt 1. Neue Bausteine brauchen keinen Eintrag.
   ------------------------------------------------------------ */
html body [class^="mv-"],
html body [class*=" mv-"]{
  --mv-rot: inherit; --mv-gold: inherit; --mv-gold-dunkel: inherit;
  --mv-schwarz: inherit; --mv-bg-warm: inherit; --mv-rand: inherit;
  --mv-grau: inherit; --mv-grau-hell: inherit;
  --mv-font: inherit; --mv-serif: inherit;
}


/* ------------------------------------------------------------
   3. GRUNDTYPOGRAFIE
   Gilt für Kopfbereich und Inhalt. Der Footer bleibt bewusst
   unverändert.
   ------------------------------------------------------------ */
#content, #site-header, #mv-sticky-bar, #mv-sticky-menu{
  font-family: var(--mv-schrift);
  -webkit-font-smoothing: antialiased;
}
#content{ color: var(--mv-tinte); }
#content :is(h1,h2,h3,h4,h5,h6),
#content [class*="title"],
#content [class*="name"]{
  font-family: var(--mv-schrift) !important;
  letter-spacing: -.012em;
}
#content :is(p, li){ line-height: 1.65; }
#content a{ text-underline-offset: 3px; }

/* Leerraum über dem ersten Baustein verkleinern */
#content{ padding-top: 28px !important; }
#content article > .wp-block-spacer:first-child,
#content article > .wp-block-spacer:first-child + .wp-block-spacer{ display: none; }


/* ------------------------------------------------------------
   4. KOPFBEREICH: BANNER UND MENÜLEISTE (DESKTOP)
   ------------------------------------------------------------ */
.custom-header{
  background: #fff;
  padding: 14px 16px 10px;
}
.custom-header img{
  display: block;
  width: 100%;
  max-width: 1080px;
  height: auto;
  margin: 0 auto;
}
#header{ background: var(--mv-rot) !important; }
#header-links{ background: var(--mv-rot) !important; }

#header-links-inner{
  display: inline-flex !important;
  align-items: center;
}
#header-links-inner > ul > li > a{
  position: relative;
  font-family: var(--mv-schrift) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9) !important;
  padding: 21px 15px !important;
  transition: color .2s ease, padding .3s ease;
}
/* Goldene Linie unter dem Menüpunkt: beim Überfahren und auf der aktiven Seite */
#header-links-inner > ul > li > a::before{
  content: "";
  position: absolute;
  left: 15px; right: 15px; bottom: 13px;
  height: 2px;
  border-radius: 2px;
  background: var(--mv-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}
#header-links-inner > ul > li:hover > a,
#header-links-inner > ul > li:is(.current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor) > a{
  color: #fff !important;
}
#header-links-inner > ul > li:hover > a::before,
#header-links-inner > ul > li:is(.current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor) > a::before{
  transform: scaleX(1);
}
/* Pfeil bei Menüpunkten mit Untermenü */
#header-links-inner > ul > li > a::after{
  color: var(--mv-gold-hell) !important;
  opacity: .85;
}


/* ------------------------------------------------------------
   5. AUSKLAPPMENÜS (DESKTOP)
   Weiße Karte mit goldener Oberkante, weicher Schatten,
   beim Überfahren zartroter Hintergrund.
   ------------------------------------------------------------ */
#header-links-inner ul ul{
  background: #fff !important;
  border: 0 !important;
  border-top: 3px solid var(--mv-gold) !important;
  border-radius: 0 0 var(--mv-radius-m) var(--mv-radius-m);
  box-shadow: var(--mv-schatten-m);
  padding: 8px !important;
  min-width: 240px;
  animation: mvAufklappen .18s ease-out;
}
@keyframes mvAufklappen{
  from{ opacity: 0; transform: translateY(6px); }
  to  { opacity: 1; transform: none; }
}
#header-links-inner ul ul li{
  border: 0 !important;
  background: none !important;
  float: none !important;
  display: block !important;
}
#header-links-inner ul ul a{
  display: block !important;
  font-family: var(--mv-schrift) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--mv-tinte) !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-radius: var(--mv-radius-s);
  transition: background .15s ease, color .15s ease, padding .15s ease;
}
#header-links-inner ul ul a:hover,
#header-links-inner ul ul li:is(.current-menu-item, .current_page_item) > a{
  background: var(--mv-rot-tint) !important;
  color: var(--mv-rot) !important;
  padding-left: 18px !important;
}
#header-links-inner ul ul li:is(.current-menu-item, .current_page_item) > a{
  font-weight: 600 !important;
}


/* ------------------------------------------------------------
   6. KOMPAKTE LEISTE MIT LOGO BEIM SCROLLEN (DESKTOP)
   Das Skript "Header und Menü" setzt die Klasse .mv-fixed,
   sobald das Banner aus dem Bild gescrollt ist. Dann gleitet
   links ein Ausschnitt des Vereinslogos in die Leiste.
   ------------------------------------------------------------ */
@media only screen and (min-width: 769px){
  #header.mv-fixed{
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    width: 100% !important;
    z-index: 99990 !important;
    box-shadow: 0 6px 22px rgba(0,0,0,.18) !important;
  }
  .admin-bar #header.mv-fixed{ top: 32px !important; }
  .mv-header-spacer-desktop{ display: none; }
  .mv-header-spacer-desktop.mv-active{ display: block; }
  /* Menüpunkte immer in einer Zeile halten */
  #header-links-inner > ul{ display: flex !important; flex-wrap: nowrap !important; }
  #header-links-inner > ul > li > a{ white-space: nowrap; }
  /* Kompakter Zustand: etwas engere Abstände, damit das Logo Platz hat */
  #header.mv-fixed #header-links-inner > ul > li > a{ padding: 18px 12px !important; }
  #header.mv-fixed #header-links-inner > ul > li > a::before{ left: 12px; right: 12px; bottom: 10px; }
  #mv-sticky-bar, #mv-sticky-menu{ display: none !important; }
}
.mv-bar-logo{
  display: block;
  flex: 0 0 auto;
  width: 0;
  height: 44px;
  margin-right: 0;
  opacity: 0;
  overflow: hidden;
  background: #fff;
  border-radius: 10px;
  transition: width .35s ease, opacity .3s ease, margin .35s ease;
}
.mv-bar-logo span{
  display: block;
  width: 146px;
  height: 40px;
  margin: 2px 10px;
  background-repeat: no-repeat;
  background-size: auto 40px;
  background-position: -24px 0;
}
#header.mv-fixed .mv-bar-logo{
  width: 166px;
  opacity: 1;
  margin-right: 20px;
}
/* Schmale Bildschirme: erst Abstände verkleinern, ganz schmal Logo weglassen */
@media only screen and (min-width: 769px) and (max-width: 1240px){
  #header-links-inner > ul > li > a{ padding-left: 10px !important; padding-right: 10px !important; font-size: 12.5px !important; letter-spacing: .05em; }
  #header-links-inner > ul > li > a::before{ left: 10px; right: 10px; }
  #header.mv-fixed .mv-bar-logo{ width: 142px; margin-right: 12px; }
  #header.mv-fixed .mv-bar-logo span{ width: 124px; height: 34px; margin: 5px 9px; background-size: auto 34px; background-position: -20px 0; }
}
@media only screen and (max-width: 1060px){
  #header.mv-fixed .mv-bar-logo{ display: none; }
}


/* ------------------------------------------------------------
   7. HANDY: MENÜLEISTE, MENÜ UND SCROLL-LEISTE
   ------------------------------------------------------------ */
@media only screen and (max-width: 768px){
  .custom-header{ padding: 10px 12px 8px; }

  /* Rote Leiste mit Menü-Knopf statt weißer Fläche */
  #header{ background: var(--mv-rot) !important; }
  #header-core{ padding: 0 !important; }
  #header-nav .btn-navbar{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 16px !important;
    text-decoration: none !important;
  }
  #header-nav .btn-navbar .icon-bar{
    display: block !important;
    background: #fff !important;
    width: 22px !important; height: 2px !important;
    border-radius: 2px;
    margin: 0 !important;
    box-shadow: none !important;
  }

  /* Aufgeklapptes Theme-Menü: dunkelrot statt grau */
  #header-responsive{ background: var(--mv-rot-dunkel) !important; }
  #header-responsive a{
    font-family: var(--mv-schrift) !important;
    font-size: 15px !important;
    color: rgba(255,255,255,.9) !important;
    border-color: rgba(255,255,255,.1) !important;
  }
  #header-responsive .current-menu-item > a,
  #header-responsive .current_page_item > a{ color: var(--mv-gold-hell) !important; }
  #header-responsive .sub-menu{ border-left-color: rgba(232,211,140,.35) !important; }
}

/* Scroll-Leiste (erscheint auf dem Handy beim Herunterscrollen) */
#mv-sticky-bar{
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99999;
  height: 56px;
  padding: 0 10px 0 12px;
  align-items: center;
  justify-content: space-between;
  background: var(--mv-rot);
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
}
#mv-sticky-bar.mv-visible{ display: flex; }
#mv-sticky-bar .mv-bar-logo{
  width: auto; opacity: 1; height: 40px; margin: 0;
}
#mv-sticky-bar .mv-bar-logo span{
  width: 132px; height: 36px; margin: 2px 8px;
  background-size: auto 36px;
  background-position: -21px 0;
}
#mv-sticky-bar__btn{
  background: none; border: 0;
  color: #fff;
  font-size: 26px; line-height: 1;
  padding: 8px 10px;
  cursor: pointer;
}

/* Vollbild-Menü der Scroll-Leiste */
#mv-sticky-menu{
  display: none;
  position: fixed;
  top: 56px; left: 0; right: 0; bottom: 0;
  z-index: 99998;
  background: var(--mv-rot-dunkel);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#mv-sticky-menu.mv-open{ display: block; }
#mv-sticky-menu ul{ list-style: none; margin: 0; padding: 0; }
#mv-sticky-menu > ul > li{ border-bottom: 1px solid rgba(255,255,255,.08); }
#mv-sticky-menu a{
  display: block;
  padding: 15px 20px;
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
}
#mv-sticky-menu a:hover,
#mv-sticky-menu a:focus{ background: rgba(255,255,255,.06); color: #fff; }
#mv-sticky-menu .mv-sub{
  display: none;
  margin: 0 0 8px 20px;
  border-left: 2px solid rgba(232,211,140,.4);
}
#mv-sticky-menu .mv-sub.mv-open{ display: block; }
#mv-sticky-menu .mv-sub a{ padding: 10px 16px; font-size: 15px; color: rgba(255,255,255,.75); }
#mv-sticky-menu .mv-has-sub > a{ display: flex; align-items: center; justify-content: space-between; }
#mv-sticky-menu .mv-has-sub > a::after{ content: "+"; font-size: 1.3em; font-weight: 300; color: var(--mv-gold-hell); padding-left: 12px; }
#mv-sticky-menu .mv-has-sub.mv-expanded > a::after{ content: "\2212"; }
body.mv-menu-locked{ overflow: hidden !important; }


/* ------------------------------------------------------------
   8. WORDPRESS-SEITENTITEL AUSBLENDEN
   Ausnahme für einzelne Seiten: im Editor unter "Erweitert"
   die CSS-Klasse "mv-show-title" eintragen.
   ------------------------------------------------------------ */
h1.page-title, h1.entry-title, .page-title, .entry-title{ display: none !important; }
/* Graue Titelleiste des Theme unter dem Menü komplett ausblenden */
#intro{ display: none !important; }
.mv-show-title #intro{ display: block !important; }
.mv-show-title :is(h1.page-title, h1.entry-title, .page-title, .entry-title){ display: block !important; }


/* ------------------------------------------------------------
   9. INHALTSBAUSTEINE
   Diese Regeln geben allen Seiten ein einheitliches Bild,
   ohne dass jeder einzelne Baustein angefasst werden muss.
   ------------------------------------------------------------ */

/* 9a. Kopfbereich jeder Seite (Hero): Verlauf in Vereinsrot,
       dezente Notenlinien rechts, goldene Dachzeile */
html body [class*="__hero"]:not([class*="__hero-"]){
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 90% -10%, rgba(201,162,39,.20), transparent 55%),
    linear-gradient(135deg, var(--mv-rot) 0%, var(--mv-rot-dunkel) 100%) !important;
  border: 0 !important;
  border-radius: var(--mv-radius-l) !important;
  padding: clamp(22px, 3vw, 34px) clamp(20px, 4vw, 48px) !important;
  box-shadow: var(--mv-schatten-m);
}
html body [class*="__hero"]:not([class*="__hero-"])::after{
  content: "";
  position: absolute;
  right: -60px; top: 50%;
  width: 48%; height: 50px;
  transform: translateY(-50%) rotate(-7deg);
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.11) 0 1px, transparent 1px 12px);
  pointer-events: none;
}
html body [class*="__hero"]:not([class*="__hero-"]) > *{ position: relative; z-index: 1; }
html body [class*="__hero"]:not([class*="__hero-"]) [class*="eyebrow"]{
  color: var(--mv-gold-hell) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  margin-bottom: 6px !important;
}
html body [class*="__hero"]:not([class*="__hero-"]) [class*="title"]{
  color: #fff !important;
  font-size: clamp(26px, 3vw, 36px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
  margin-bottom: 8px !important;
}
html body [class*="__hero"]:not([class*="__hero-"]) [class*="sub"]{
  color: rgba(255,255,255,.84) !important;
  font-size: 15.5px !important;
  line-height: 1.55 !important;
  margin-bottom: 0 !important;
}

/* 9b. Zahlen-Kacheln auf der Startseite */
html body .mv-willkommen__stats{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px !important;
  margin-top: 18px !important;
}
html body .mv-willkommen__stat{
  background: #fff !important;
  border: 1px solid var(--mv-linie) !important;
  border-radius: var(--mv-radius-m) !important;
  box-shadow: var(--mv-schatten-s);
  padding: 20px 12px !important;
}
html body .mv-willkommen__stat > :first-child{
  font-size: 30px !important;
  font-weight: 800 !important;
  color: var(--mv-rot) !important;
  letter-spacing: -.02em;
}
@media only screen and (max-width: 600px){
  html body .mv-willkommen__stats{ grid-template-columns: repeat(2, 1fr); gap: 10px !important; }
  html body .mv-willkommen__stat{ padding: 16px 8px !important; }
}

/* 9c. Karten allgemein: weiche Kante, leichter Schatten */
html body :is([class*="__card"], [class*="-card"]):not([class*="__card-"]):not([class*="-card__"]){
  border-radius: var(--mv-radius-m) !important;
  border-color: var(--mv-linie) !important;
  box-shadow: var(--mv-schatten-s);
  transition: box-shadow .2s ease, transform .2s ease;
}
/* Ganze Karte ist ein Link: Texte darin nicht unterstreichen */
html body .mv-entdecken a,
html body .mv-entdecken a *,
html body a:is([class*="__card"], [class*="-card"]),
html body a:is([class*="__card"], [class*="-card"]) *{ text-decoration: none !important; }
html body a:is([class*="__card"], [class*="-card"]):hover{
  box-shadow: var(--mv-schatten-m);
  transform: translateY(-2px);
}


/* ------------------------------------------------------------
   7b. HANDY-SCROLL-LEISTE: FARBEN ERZWINGEN
   Wirkt auch mit dem alten Snippet "Sticky Header", das noch
   Grau setzt. Kann bleiben, wenn das neue Skript läuft.
   ------------------------------------------------------------ */
html body #mv-sticky-bar{ background: var(--mv-rot) !important; height: 56px; }
html body #mv-sticky-menu{ background: var(--mv-rot-dunkel) !important; top: 56px; }
html body #mv-sticky-menu a{ font-family: var(--mv-schrift) !important; font-size: 16px; color: rgba(255,255,255,.92); }
html body #mv-sticky-menu .mv-sub{ border-left-color: rgba(232,211,140,.4); }
html body #mv-sticky-bar #mv-sticky-bar__logo{ height: 36px; background: #fff; border-radius: 8px; padding: 3px 6px; }


/* 9d. Zwischenüberschriften auf allen Seiten einheitlich:
       goldener Balken links statt durchgehender roter Linie */
html body :is(.mv-section-title, [class*="__section-title"], .mv-aktuelles__title, .mv-entdecken__title){
  position: relative;
  border-bottom: 0 !important;
  padding: 0 0 0 16px !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--mv-tinte) !important;
}
html body :is(.mv-section-title, [class*="__section-title"], .mv-aktuelles__title, .mv-entdecken__title)::before{
  content: "";
  position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 4px; border-radius: 4px;
  background: var(--mv-gold);
}
html body :is(.mv-aktuelles__header, .mv-entdecken__header){ border-bottom: 0 !important; padding-bottom: 0 !important; }
@media only screen and (max-width: 600px){
  html body :is(.mv-section-title, [class*="__section-title"], .mv-aktuelles__title, .mv-entdecken__title){ font-size: 21px !important; }
}

/* ------------------------------------------------------------
   10. BAUSTEINE FÜR DIE NEU AUFGEBAUTEN SEITEN
   Alle Klassen beginnen mit "mv-seite", "mv-kachel" usw.
   Die Seiten selbst enthalten nur noch HTML, das Aussehen
   kommt komplett von hier.
   ------------------------------------------------------------ */

/* 10a. Seitenrahmen, Kopfbereich, Abschnitte */
.mv-seite{ max-width: 960px; margin: 0 auto; padding: 0 4px 24px; color: var(--mv-tinte); }
.mv-seite__hero{ text-align: center; margin: 0 0 36px; }
.mv-seite__hero-eyebrow{ text-transform: uppercase; margin: 0 0 12px; }
.mv-seite__hero-title{ margin: 0 0 14px !important; }
.mv-seite__hero-sub{ max-width: 620px; margin: 0 auto !important; }
.mv-seite__abschnitt{ margin: 0 0 44px; }
.mv-seite__titel{
  position: relative;
  font-size: 24px; font-weight: 700; line-height: 1.25;
  color: var(--mv-tinte);
  margin: 0 0 18px; padding-left: 16px;
}
.mv-seite__titel::before{
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 4px; border-radius: 4px; background: var(--mv-gold);
}
.mv-seite__text p{ font-size: 16.5px; color: var(--mv-tinte-soft); margin: 0 0 14px; }
.mv-seite__text p:last-child{ margin-bottom: 0; }
.mv-seite__lead{ font-size: 18.5px !important; color: var(--mv-tinte) !important; }

/* 10b. Kacheln für Übersichtsseiten */
.mv-kacheln{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.mv-kachel{
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--mv-linie);
  border-radius: var(--mv-radius-m);
  padding: 26px 22px 22px;
  color: var(--mv-tinte) !important; text-decoration: none !important;
  box-shadow: var(--mv-schatten-s);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mv-kachel::before{
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px;
  background: var(--mv-rot);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .3s ease;
}
a.mv-kachel:hover{ transform: translateY(-3px); box-shadow: var(--mv-schatten-m); border-color: transparent; }
a.mv-kachel:hover::before{ transform: scaleX(1); }
.mv-kachel__label{ font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mv-gold-dunkel); margin: 0 0 8px; }
.mv-kachel__titel{ font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--mv-tinte); margin: 0 0 8px; }
.mv-kachel__text{ flex: 1; font-size: 15px; line-height: 1.55; color: var(--mv-tinte-soft); margin: 0 0 16px; }
.mv-kachel__mehr{ font-size: 14px; font-weight: 600; color: var(--mv-rot); }
.mv-kachel__mehr::after{ content: " \2192"; }

/* 10c. Linkliste (Presseberichte, Downloads) */
.mv-linkliste{ display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }
.mv-linkliste li{ margin: 0; padding: 0; list-style: none; }
.mv-linkliste__item{
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid var(--mv-linie);
  border-radius: var(--mv-radius-m);
  padding: 16px 18px;
  color: var(--mv-tinte) !important; text-decoration: none !important;
  box-shadow: var(--mv-schatten-s);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mv-linkliste__item:hover{ border-color: var(--mv-rot); transform: translateX(3px); box-shadow: var(--mv-schatten-m); }
.mv-linkliste__badge{
  flex: 0 0 auto; min-width: 58px; text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mv-rot); background: var(--mv-rot-tint);
  border-radius: 8px; padding: 8px;
}
.mv-linkliste__inhalt{ flex: 1; min-width: 0; }
.mv-linkliste__titel{ display: block; font-size: 16px; font-weight: 600; line-height: 1.35; }
.mv-linkliste__quelle{ display: block; font-size: 13.5px; color: var(--mv-tinte-soft); margin-top: 2px; }
.mv-linkliste__pfeil{ flex: 0 0 auto; font-size: 18px; color: var(--mv-rot); }

/* 10d. Jahres-Raster (Presse-Übersicht) */
.mv-jahre{ display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.mv-jahr{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 10px;
  background: #fff; border: 1px solid var(--mv-linie);
  border-radius: var(--mv-radius-m);
  text-decoration: none !important;
  box-shadow: var(--mv-schatten-s);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.mv-jahr__zahl{ font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--mv-rot); }
.mv-jahr__text{ font-size: 13px; color: var(--mv-tinte-soft); margin-top: 6px; }
.mv-jahr:hover{ background: var(--mv-rot); border-color: var(--mv-rot); transform: translateY(-2px); }
.mv-jahr:hover .mv-jahr__zahl, .mv-jahr:hover .mv-jahr__text{ color: #fff; }

/* 10e. Personen (z. B. Ehrenmitglieder) */
.mv-personen{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.mv-person{
  background: #fff; border: 1px solid var(--mv-linie);
  border-radius: var(--mv-radius-m);
  padding: 30px 20px 26px; text-align: center;
  box-shadow: var(--mv-schatten-s);
}
.mv-person__initialen{
  width: 72px; height: 72px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mv-rot), var(--mv-rot-dunkel));
  color: var(--mv-gold-hell);
  font-size: 24px; font-weight: 700;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--mv-gold);
}
.mv-person__name{ font-size: 18px; font-weight: 700; color: var(--mv-tinte); margin: 0 0 4px; }
.mv-person__rolle{ font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mv-gold-dunkel); }

/* 10f. Faktenzeile (z. B. Unser Ort) */
.mv-fakten-zeile{ display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 0 0 26px; }
.mv-fakt-box{ background: var(--mv-papier-soft); border: 1px solid var(--mv-linie); border-radius: var(--mv-radius-m); padding: 18px 14px; text-align: center; }
.mv-fakt-box__wert{ font-size: 24px; font-weight: 800; line-height: 1.1; color: var(--mv-rot); }
.mv-fakt-box__text{ font-size: 13.5px; color: var(--mv-tinte-soft); margin-top: 4px; }

/* 10g. Medien: Karte, Videos */
.mv-medien{ background: #fff; border: 1px solid var(--mv-linie); border-radius: var(--mv-radius-m); padding: 8px; box-shadow: var(--mv-schatten-s); }
.mv-medien iframe{ display: block; width: 100% !important; border: 0; border-radius: 10px; }
.mv-videos{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.mv-video{ background: #fff; border: 1px solid var(--mv-linie); border-radius: var(--mv-radius-m); overflow: hidden; box-shadow: var(--mv-schatten-s); }
.mv-video__rahmen{ position: relative; aspect-ratio: 16 / 9; background: var(--mv-rot-tief); }
.mv-video__rahmen iframe{ position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }
.mv-video__text{ padding: 18px 20px 20px; }
.mv-video__text .mv-video__titel{ font-size: 18px; font-weight: 700; margin: 0 0 6px; color: var(--mv-tinte); }
.mv-video__text p{ font-size: 15px; color: var(--mv-tinte-soft); margin: 0; }

/* 10h. Aktionsbox und Knöpfe */
.mv-box{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  background: var(--mv-rot-tint); border-radius: var(--mv-radius-m);
  padding: 24px 26px;
}
.mv-box__text{ flex: 1 1 320px; }
.mv-box .mv-box__titel{ font-size: 19px; font-weight: 700; color: var(--mv-rot); margin: 0 0 4px; }
.mv-box p{ margin: 0; color: var(--mv-tinte-soft); }
.mv-knopf{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--mv-rot); color: #fff !important; text-decoration: none !important;
  font-size: 15px; font-weight: 600;
  padding: 12px 24px; border-radius: 999px;
  transition: background .2s ease, transform .2s ease;
}
.mv-knopf:hover{ background: var(--mv-rot-dunkel); transform: translateY(-1px); }
.mv-knopf--hell{ background: #fff; color: var(--mv-rot) !important; border: 1px solid var(--mv-linie); }
.mv-knopf--hell:hover{ background: var(--mv-papier-soft); }

/* 10i. Kontakt: Angaben links, Formular rechts */
.mv-zweispaltig{ display: grid; grid-template-columns: 1fr 1.4fr; gap: 22px; align-items: start; }
.mv-kontaktliste{ background: #fff; border: 1px solid var(--mv-linie); border-radius: var(--mv-radius-m); padding: 6px 22px; box-shadow: var(--mv-schatten-s); }
.mv-kontaktliste__zeile{ padding: 16px 0; border-bottom: 1px solid var(--mv-linie); }
.mv-kontaktliste__zeile:last-child{ border-bottom: 0; }
.mv-kontaktliste__label{ font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mv-gold-dunkel); margin: 0 0 4px; }
.mv-kontaktliste__wert{ font-size: 16px; line-height: 1.5; color: var(--mv-tinte); }
.mv-kontaktliste__wert a{ color: var(--mv-rot); font-weight: 600; }
.mv-formular{ background: #fff; border: 1px solid var(--mv-linie); border-radius: var(--mv-radius-m); padding: 26px; box-shadow: var(--mv-schatten-s); }
.mv-formular :is(input[type="text"], input[type="email"], input[type="tel"], textarea){
  width: 100% !important; box-sizing: border-box;
  font-family: var(--mv-schrift); font-size: 15px; color: var(--mv-tinte);
  background: var(--mv-papier-soft);
  border: 1px solid var(--mv-linie) !important; border-radius: 10px;
  padding: 12px 14px !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.mv-formular :is(input, textarea):focus{
  outline: none; background: #fff;
  border-color: var(--mv-rot) !important;
  box-shadow: 0 0 0 3px rgba(125,1,2,.12);
}
.mv-formular :is(input[type="submit"], button){
  background: var(--mv-rot) !important; color: #fff !important;
  border: 0 !important; border-radius: 999px !important;
  font-family: var(--mv-schrift); font-size: 15px; font-weight: 600;
  padding: 12px 28px !important; cursor: pointer;
  text-transform: none !important; letter-spacing: 0 !important;
}
.mv-formular :is(input[type="submit"], button):hover{ background: var(--mv-rot-dunkel) !important; }
.mv-formular label{ font-size: 14px; font-weight: 600; color: var(--mv-tinte); }

/* 10i-2. Kontaktformular-Plugin (Easy Contact Form) flach in die Karte einpassen */
.mv-formular .ecf-body{ padding: 0 !important; }
.mv-formular .ecf-form{ box-shadow: none !important; background: none !important; max-width: none !important; margin: 0 !important; }
.mv-formular .ecf-form > header{ display: none !important; }
.mv-formular .ecf-form fieldset,
.mv-formular .ecf-form footer{ padding: 0 !important; background: none !important; border: 0 !important; }
.mv-formular .ecf-form section{ margin: 0 0 16px !important; }
.mv-formular .ecf-form label.label{ font-family: var(--mv-schrift); font-size: 14px !important; font-weight: 600; color: var(--mv-tinte) !important; margin: 0 0 6px !important; }
.mv-formular .ecf-form footer{ margin-top: 6px !important; text-align: left !important; }
.mv-formular .ecf-form footer :is(button, input[type="submit"]){ float: none !important; margin: 0 !important; height: auto !important; }
html body .mv-formular .ecf-form :is(input[type="text"], input[type="email"], textarea){
  border-radius: 10px !important;
  background: var(--mv-papier-soft) !important;
  border: 1px solid var(--mv-linie) !important;
  font-family: var(--mv-schrift) !important;
  font-size: 15px !important;
  height: auto !important;
  padding: 12px 14px !important;
  box-shadow: none !important;
}
html body .mv-formular .ecf-form :is(input, textarea):focus{
  background: #fff !important;
  border-color: var(--mv-rot) !important;
  box-shadow: 0 0 0 3px rgba(125,1,2,.12) !important;
}

/* 10j. Bildergalerien (NextGEN) unter dem Kopfbereich */
#content .ngg-galleryoverview{ max-width: 960px; margin: 0 auto !important; }
#content .ngg-gallery-thumbnail{ border: 0 !important; background: none !important; }
#content .ngg-gallery-thumbnail img{
  border: 0 !important; border-radius: 10px;
  box-shadow: var(--mv-schatten-s);
  transition: transform .2s ease, box-shadow .2s ease;
}
#content .ngg-gallery-thumbnail a:hover img{ transform: scale(1.03); box-shadow: var(--mv-schatten-m); }

/* 10k. Handy */
@media only screen and (max-width: 768px){
  .mv-zweispaltig{ grid-template-columns: 1fr; }
  .mv-seite__hero{ margin-bottom: 32px; }
  .mv-seite__abschnitt{ margin-bottom: 36px; }
}
@media only screen and (max-width: 600px){
  .mv-seite__titel{ font-size: 21px; }
  .mv-linkliste__item{ padding: 14px; gap: 12px; }
  .mv-linkliste__badge{ min-width: 48px; padding: 6px; }
  .mv-box{ padding: 20px; }
  .mv-fakten-zeile{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mv-fakt-box__wert{ font-size: 20px; }
}



/* ------------------------------------------------------------
   11. RUHIGES GESAMTBILD
   Grundsatz: pro Seite nur EINE rote Fläche, der Kopfbereich.
   Alles andere bleibt hell: Karten ohne bunte Kanten, Zahlen
   ohne Kästen, Banner und Zitate ohne rote Flächen.
   Diesen Abschnitt einklammern = vorheriger, bunterer Zustand.
   ------------------------------------------------------------ */

/* 11a. Zahlenleisten: Zahlen in einer Reihe mit feinen Trennlinien */
html body :is(.mv-stats, .mv-willkommen__stats){
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 1fr !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  background: none !important;
  border-top: 1px solid var(--mv-linie) !important;
  border-bottom: 1px solid var(--mv-linie) !important;
  padding: 18px 0 !important;
  margin: 24px 0 36px !important;
}
html body :is(.mv-stat, .mv-willkommen__stat){
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 2px 10px !important;
  text-align: center;
}
html body :is(.mv-stat, .mv-willkommen__stat) + :is(.mv-stat, .mv-willkommen__stat){
  border-left: 1px solid var(--mv-linie) !important;
}
html body .mv-stat > :first-child{
  font-size: 30px !important;
  font-weight: 800 !important;
  color: var(--mv-rot) !important;
  letter-spacing: -.02em;
}
@media only screen and (max-width: 600px){
  html body :is(.mv-stats, .mv-willkommen__stats){
    grid-auto-flow: row !important;
    grid-template-columns: repeat(2, 1fr) !important;
    row-gap: 16px !important;
  }
  html body :is(.mv-stat, .mv-willkommen__stat):nth-child(odd){ border-left: 0 !important; }
}

/* 11b. Banner am Seitenende: hell statt rot, ein roter Knopf */
html body :is(.mv-cta, .mv-nachwuchs-teaser__banner){
  background: var(--mv-papier-soft) !important;
  background-image: none !important;
  border: 1px solid var(--mv-linie) !important;
  border-radius: var(--mv-radius-m) !important;
  box-shadow: none !important;
}
html body :is(.mv-cta, .mv-nachwuchs-teaser__banner) *{ color: var(--mv-tinte-soft) !important; }
html body :is(.mv-cta, .mv-nachwuchs-teaser__banner) :is(h2, h3, h4, strong, [class*="title"]){ color: var(--mv-tinte) !important; }
html body :is(.mv-cta, .mv-nachwuchs-teaser__banner) [class*="eyebrow"]{ color: var(--mv-gold-dunkel) !important; }
html body .mv-nachwuchs-teaser__img{ border: 1px solid var(--mv-linie) !important; box-shadow: none !important; }
html body :is(.mv-cta__btn, .mv-nachwuchs-teaser__btn){
  background: var(--mv-rot) !important;
  color: #fff !important;
  border: 1px solid var(--mv-rot) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 11px 22px !important;
}
html body :is(.mv-cta__btn, .mv-nachwuchs-teaser__btn) *{ color: inherit !important; }
html body :is(.mv-cta__btn, .mv-nachwuchs-teaser__btn):hover{ background: var(--mv-rot-dunkel) !important; border-color: var(--mv-rot-dunkel) !important; }
html body :is(.mv-cta__btn + .mv-cta__btn, .mv-nachwuchs-teaser__btn + .mv-nachwuchs-teaser__btn){
  background: #fff !important;
  color: var(--mv-rot) !important;
  border-color: var(--mv-linie) !important;
}

/* 11c. Karten: keine farbigen Oberkanten mehr */
html body :is(.mv-entdecken__card, .mv-erfolg, .mv-fuehrung-card, .mv-info-card)::before{ display: none !important; }
html body :is(.mv-entdecken__card, .mv-erfolg, .mv-fuehrung-card, .mv-info-card){ border-top: 1px solid var(--mv-linie) !important; }

/* 11d. Register auf "Die Musiker": helle Kopfzeile statt roter Balken */
html body .mv-register__head{
  background: var(--mv-papier-soft) !important;
  border-bottom: 1px solid var(--mv-linie) !important;
}
html body .mv-register__head *{ color: var(--mv-rot) !important; }
html body .mv-register__count{ background: var(--mv-rot-tint) !important; color: var(--mv-rot) !important; }

/* 11e. Zitate: großer Text mit goldener Linie statt roter Fläche */
html body .mv-zitat{
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-left: 3px solid var(--mv-gold) !important;
  border-radius: 0 !important;
  padding: 6px 0 6px 24px !important;
  text-align: left !important;
}
html body .mv-zitat *{ color: var(--mv-tinte) !important; }
html body .mv-zitat :is(p, blockquote, q){ font-size: 20px !important; font-style: italic; line-height: 1.5 !important; }
html body .mv-zitat :is(cite, footer, [class*="autor"], [class*="author"], [class*="quelle"]){
  font-size: 13px !important; font-style: normal; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--mv-gold-dunkel) !important;
}

/* 11f. Hinweisboxen: zarte Fläche mit goldener Linie, kein Rahmen */
html body .mv-hinweis{
  background: var(--mv-papier-soft) !important;
  border: 0 !important;
  border-left: 3px solid var(--mv-gold) !important;
  border-radius: 0 var(--mv-radius-s) var(--mv-radius-s) 0 !important;
  box-shadow: none !important;
}

/* 11g. Mehr Luft zwischen den Abschnitten */
html body :is(.mv-section-title, [class*="__section-title"], .mv-aktuelles__title, .mv-entdecken__title){
  margin-top: 40px !important;
  margin-bottom: 18px !important;
}


/* 11h. Startseite "Aktuelles": Datumsfeld, solange kein Plakat da ist */
html body .mv-news-card__datum{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 230px;
  background: var(--mv-papier-soft);
  border-bottom: 1px solid var(--mv-linie);
}
html body .mv-news-card__datum-tag{ font-size: 72px; font-weight: 800; line-height: 1; color: var(--mv-rot); letter-spacing: -.03em; }
html body .mv-news-card__datum-monat{ margin-top: 8px; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mv-gold-dunkel); }
@media only screen and (max-width: 600px){ html body .mv-news-card__datum{ min-height: 170px; } }


/* 11i. Register auf "Die Musiker": Spalten wie in einer Zeitung,
        kurze Register rücken lückenlos nach oben */
html body .mv-register-grid{
  display: block !important;
  columns: 3;
  column-gap: 14px;
}
html body .mv-register-grid > *{
  break-inside: avoid;
  display: inline-block !important;
  width: 100% !important;
  margin: 0 0 14px !important;
}
@media only screen and (max-width: 900px){ html body .mv-register-grid{ columns: 2; } }
@media only screen and (max-width: 600px){ html body .mv-register-grid{ columns: 1; } }


/* 11j. Einheitliche feine Rahmen statt roter Umrandungen
        (Downloads, Kontaktkarten, Mitgliedschafts-Optionen) */
html body :is(.mv-download, .mv-kontakt-card, .mv-option){
  border: 1px solid var(--mv-linie) !important;
  border-radius: var(--mv-radius-m) !important;
  box-shadow: none !important;
  background: #fff !important;
}
html body .mv-download:hover{ border-color: var(--mv-rot) !important; }


/* 11k. Häufige Fragen: schlichte Liste mit Trennlinien statt Kästen */
html body .mv-faq__item{
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--mv-linie) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 16px 0 !important;
  margin: 0 !important;
}
html body .mv-faq__item:first-child{ border-top: 1px solid var(--mv-linie) !important; }

/* 11l. Instrumente: leichte Kacheln ohne Rahmen */
html body .mv-instrument{
  background: var(--mv-papier-soft) !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: var(--mv-radius-s) !important;
}


/* ------------------------------------------------------------
   12. HANDY-MENÜS: KLARE HIERARCHIE
   Gilt für das Menü unter dem Banner und für das Menü der
   roten Scroll-Leiste. Hauptpunkte groß und weiß, Unterpunkte
   eingerückt, kleiner, mit goldener Linie und dunklerem Grund.
   ------------------------------------------------------------ */
@media only screen and (max-width: 768px){

  /* 12a. Menü unter dem Banner: Untermenü aufklappen */
  #header-responsive .sub-menu{ display: none !important; }
  #header-responsive .menu-item-has-children.mv-open > .sub-menu{ display: block !important; }

  /* Hauptpunkte */
  #header-responsive ul:not(.sub-menu) > li > a{
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #fff !important;
    padding: 14px 20px !important;
  }
  #header-responsive ul:not(.sub-menu) > li{ border-bottom: 1px solid rgba(255,255,255,.08) !important; }

  /* Aufgeklappte Gruppe dunkler hinterlegen */
  #header-responsive .menu-item-has-children.mv-open{ background: rgba(0,0,0,.18) !important; }

  /* Unterpunkte: eingerückt, kleiner, goldene Linie */
  #header-responsive .sub-menu{
    margin: 0 0 10px 22px !important;
    padding: 0 !important;
    border-left: 2px solid rgba(232,211,140,.5) !important;
    background: none !important;
  }
  #header-responsive .sub-menu li{ border: 0 !important; background: none !important; }
  #header-responsive .sub-menu a{
    font-size: 14.5px !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,.78) !important;
    padding: 9px 16px !important;
    border: 0 !important;
  }
  #header-responsive .sub-menu .current-menu-item > a,
  #header-responsive .sub-menu .current_page_item > a{ color: var(--mv-gold-hell) !important; font-weight: 600 !important; }

  /* Plus-Zeichen: Klick geht auf den Menüpunkt, offen wird es zum Kreuz */
  #header-responsive .sub-menu-toggle{ pointer-events: none !important; transition: transform .2s ease; }
  #header-responsive .menu-item-has-children > a::after{ display: inline-block; transition: transform .2s ease; color: var(--mv-gold-hell) !important; }
  #header-responsive .mv-open > a::after{ transform: rotate(45deg); }

  /* 12b. Menü der Scroll-Leiste: gleiche Logik */
  html body #mv-sticky-menu > ul > li > a{ font-size: 16px; font-weight: 600; color: #fff; }
  html body #mv-sticky-menu .mv-has-sub.mv-expanded{ background: rgba(0,0,0,.18); }
  html body #mv-sticky-menu .mv-sub{
    margin: 0 0 10px 22px;
    border-left: 2px solid rgba(232,211,140,.5);
  }
  html body #mv-sticky-menu .mv-sub a{
    font-size: 14.5px;
    font-weight: 400;
    color: rgba(255,255,255,.78);
    padding: 9px 16px;
  }
}