/* ============================================================
   BF MUSIC DINER – Theme Styles
   Aesthetic: retro American diner meets modern rock venue
   Farben sind Standardwerte – im Customizer überschreibbar
   (werden als :root-Variablen inline nach dieser Datei ausgegeben).
   ============================================================ */

:root {
  /* Farbschema 2026-10: Blau #0a2849 / Rot #bd060c / Sand #e4c4a7 */
  --bg-dark:        #0a2849;   /* Blau (vorher Schwarz #0d0d0f) */
  --bg-darker:      #061a31;   /* dunklere Blau-Stufe (vorher #07070a) */
  --bg-footer:      #04142a;   /* Footer (vorher #050507) */
  --bg-cream:       #e4c4a7;   /* heller Hintergrund (vorher #f4ede1) */
  --bg-red:         #bd060c;   /* Rot-Flächen (vorher #c8201e) */
  --bg-red-deep:    #7e0408;
  --accent:         #bd060c;   /* Akzentfarbe (vorher #e63946) */
  --accent-hover:   #9a0509;
  --accent-soft:    #ff6b70;
  --accent-text:    #f5474c;   /* hellere Rot-Stufe NUR für Schrift auf Blau (Lesbarkeit); Flächen bleiben #bd060c */
  --gold:           #f4b400;
  --text:           #ece7df;
  --text-muted:     #a9b6c6;   /* auf Blau abgestimmt (vorher #a39e95) */
  --text-dark:      #0a2849;   /* dunkle Schrift auf hellem Grund = Blau */

  /* RGB-Varianten für Transparenzen (vom Customizer mitgepflegt) */
  --bg-dark-rgb:    10,40,73;
  --bg-darker-rgb:  6,26,49;
  --accent-rgb:     189,6,12;

  --logo-w:         150px;
  --logo-footer-w:  150px;

  --font-display:   'Anton', 'Impact', sans-serif;
  --font-script:    'Caveat', cursive;
  --font-body:      'Manrope', system-ui, sans-serif;
}

/* ---------- Base ---------- */
* { -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-body);
  background: var(--bg-dark);
  color: var(--text);
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
}

a { color: var(--accent-text); text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent-soft); }

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

::selection { background: var(--accent); color: #fff; }

/* ---------- Typography helpers ---------- */
.display-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  line-height: 1;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 1rem;
  display: inline-block;
}
.eyebrow-light { color: rgba(255,255,255,.85); }
.eyebrow-dark  { color: var(--bg-red); }

.lead-text { font-size: 1.05rem; color: var(--text-muted); line-height: 1.75; }
.text-white-75 { color: rgba(255,255,255,.78) !important; }

.accent-red { color: var(--accent-text); font-style: italic; }
.section-cream .accent-red { color: var(--accent); }

/* ---------- Buttons ---------- */
.btn { font-weight: 600; letter-spacing: .3px; border-radius: 4px; padding: .65rem 1.4rem; transition: all .25s ease; }

.btn-accent {
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--accent);
}
.btn-accent:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px var(--accent);
}

.btn-ghost {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.4);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.06);
  border-color: #fff;
  color: #fff;
}

.btn-lg { padding: .85rem 1.8rem; font-size: 1rem; }

/* ============================================================
   NAVBAR
   ============================================================ */
#mainNav {
  background: transparent;
  padding: 1.25rem 0;
  transition: all .3s ease;
}
#mainNav.scrolled {
  background: rgba(var(--bg-dark-rgb),.92);
  backdrop-filter: blur(12px);
  padding: .65rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.navbar-brand { display: flex; align-items: center; gap: .55rem; }
.navbar-brand .bfm-logo { width: var(--logo-w); max-width: 50vw; height: auto; }
.bfm-logo-footer { width: var(--logo-footer-w); height: auto; }
.brand-mark {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 1px;
  color: #fff;
  background: var(--accent);
  padding: .15rem .55rem;
  line-height: 1;
  border: 2px solid #fff;
  box-shadow: 3px 3px 0 var(--bg-red-deep);
}
.brand-text {
  font-family: var(--font-display);
  letter-spacing: 2px;
  font-size: 1.25rem;
  color: #fff;
  text-transform: uppercase;
}

#mainNav .nav-link {
  color: rgba(255,255,255,.82);
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 .65rem;
  position: relative;
}
#mainNav .nav-link:hover, #mainNav .nav-link.active { color: #fff; }
#mainNav .nav-link::after {
  content: ""; position: absolute;
  left: 0; bottom: -4px; height: 2px; width: 0;
  background: var(--accent); transition: width .25s;
}
#mainNav .nav-link:hover::after, #mainNav .nav-link.active::after { width: 100%; }

/* Zwei Buttons in der Navigation (Reservieren + Gutschein) */
#mainNav .nav-buttons { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 8rem 0 6rem;
}

.hero-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(var(--bg-dark-rgb),.55) 0%, rgba(var(--bg-dark-rgb),.92) 100%),
    var(--hero-img, none);
  background-size: cover;
  background-position: center;
  filter: saturate(1.05);
}

.hero-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 50%, rgba(var(--accent-rgb),.18) 0%, transparent 55%);
}

.hero-grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: .25; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.hero-content { position: relative; z-index: 2; }

.hero-kicker {
  display: flex; align-items: center; gap: 1rem;
  color: rgba(255,255,255,.7);
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: .78rem;
  font-weight: 600;
}
.kicker-line { display: inline-block; width: 60px; height: 2px; background: var(--accent); }

.hero-script {
  font-family: var(--font-script);
  font-size: clamp(2rem, 3.5vw, 3rem);
  color: var(--accent-text);
  margin: .5rem 0 0;
  line-height: 1;
  transform: rotate(-2deg);
  display: inline-block;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8.5vw, 7.5rem);
  line-height: .92;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  margin: .8rem 0 1.5rem;
}
.hero-title .amp { color: var(--accent-text); font-style: italic; font-family: 'Caveat', cursive; font-size: .75em; }
.hero-title-accent {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 0 .3em;
  transform: skew(-5deg);
}

.hero-sub {
  font-size: 1.15rem;
  color: rgba(255,255,255,.82);
  max-width: 620px;
  margin-bottom: 2rem;
}

.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Hero bottom strip */
.hero-strip {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(var(--bg-darker-rgb),.78);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1.25rem 0;
  z-index: 2;
}
.strip-item {
  display: flex; align-items: center; gap: .9rem;
  padding: .5rem 1.5rem;
  border-right: 1px solid rgba(255,255,255,.08);
}
.strip-item:last-child { border-right: 0; }
.strip-item i { font-size: 1.6rem; color: var(--accent-text); }
.strip-item small {
  display: block; color: var(--text-muted);
  font-size: .72rem; text-transform: uppercase; letter-spacing: 1.5px;
}
.strip-item strong { color: #fff; font-weight: 600; font-size: .98rem; }
.strip-item strong a { color: #fff; }

@media (max-width: 767px) {
  /* Hero als Spalte: Inhalt oben, Infoleiste darunter in voller Breite
     (vorher rutschte die Leiste als Flex-Spalte rechts neben den Inhalt). */
  .hero { flex-direction: column; align-items: stretch; justify-content: center; padding-bottom: 0; }
  .hero-content { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
  .hero-strip { position: relative; padding: 1rem 0; margin-top: 3rem; width: 100%; }
  .strip-item { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); justify-content: center; }
  .strip-item:last-child { border-bottom: 0; }
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: 7rem 0; position: relative; }
.section-dark   { background: var(--bg-dark); }
.section-darker { background: var(--bg-darker); }
.section-cream  { background: var(--bg-cream); color: var(--text-dark); }
.section-cream .lead-text { color: #4a4038; }
.section-cream .text-dark { color: var(--text-dark) !important; }

.section-red {
  background: var(--bg-red);
  position: relative;
  overflow: hidden;
}
.section-red::before {
  content: ""; position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 2px, transparent 2px 22px);
  pointer-events: none;
}
.section-red::after {
  content: "BF · BF · BF ·";
  position: absolute;
  bottom: -30px; right: -40px;
  font-family: var(--font-display);
  font-size: 12rem;
  color: rgba(0,0,0,.08);
  letter-spacing: 10px;
  line-height: 1;
  pointer-events: none;
}

.section-head { margin-bottom: 3rem; }

/* ---------- Image Stack (Welcome) ---------- */
.image-stack { position: relative; padding: 1rem; }
.image-stack-back {
  position: absolute;
  top: 0; left: 0;
  width: 85%; height: 85%;
  background: var(--accent);
  border: 2px solid var(--accent);
  z-index: 1;
}
.image-stack-front {
  position: relative;
  width: 100%;
  z-index: 2;
  transform: translate(20px, 20px);
  border: 4px solid var(--bg-dark);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.image-stack-badge {
  position: absolute;
  bottom: -10px; right: -10px;
  background: var(--gold);
  color: var(--text-dark);
  font-family: var(--font-display);
  text-align: center;
  width: 110px; height: 110px;
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 3;
  border: 4px solid var(--bg-dark);
  transform: rotate(-8deg);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.image-stack-badge span {
  font-size: .85rem; letter-spacing: 2px; text-transform: uppercase; font-family: var(--font-body); font-weight: 700;
}
.image-stack-badge strong { font-size: 2.2rem; line-height: 1; }

/* ---------- Willkommen-Slideshow ---------- */
#welcomeSlider { overflow: hidden; }
#welcomeSlider .carousel-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
#welcomeSlider .carousel-indicators { margin-bottom: .75rem; }
#welcomeSlider .carousel-indicators [data-bs-target] {
  width: 26px; height: 4px;
  border: 0; margin: 0 4px;
  background-color: #fff;
  opacity: .5;
}
#welcomeSlider .carousel-indicators .active { background-color: var(--accent); opacity: 1; }
#welcomeSlider .carousel-control-prev,
#welcomeSlider .carousel-control-next { width: 12%; opacity: 0; transition: opacity .25s; }
#welcomeSlider:hover .carousel-control-prev,
#welcomeSlider:hover .carousel-control-next { opacity: .85; }

/* ---------- Mini Stats ---------- */
.mini-stat {
  padding: 1.25rem;
  border-left: 3px solid var(--accent);
  background: rgba(255,255,255,.02);
}
.mini-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: #fff;
  line-height: 1;
  margin-bottom: .3rem;
}
.mini-stat span { color: var(--text-muted); font-size: .85rem; }

/* ---------- Special Card (red section) ---------- */
.special-card {
  background: var(--bg-darker);
  color: var(--text);
  padding: 2.5rem 2rem 2rem;
  border: 2px solid rgba(255,255,255,.1);
  box-shadow: 14px 14px 0 rgba(0,0,0,.18);
  position: relative;
  transform: rotate(1deg);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.specials-row { margin-top: 3.5rem; position: relative; z-index: 1; }
.specials-row > div:nth-child(odd) .special-card { transform: rotate(-1deg); }
.special-card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: 1.25rem;
  border: 2px solid rgba(255,255,255,.1);
}
.special-card-tag {
  position: absolute;
  top: -14px; left: 1.5rem;
  background: var(--gold);
  color: var(--text-dark);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: 2px;
  padding: .4rem .8rem;
  text-transform: uppercase;
}
.special-card h3 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  margin: .5rem 0 1rem;
  text-transform: uppercase;
  color: #fff;
}
.special-card p { color: var(--text-muted); margin-bottom: 1.5rem; }
.special-card-price { display: flex; align-items: baseline; gap: 1rem; margin-top: auto; }
.special-card-price .price {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--accent-text);
}
.special-card-price .note { color: var(--text-muted); font-size: .85rem; }

/* ---------- Feature Cards ---------- */
.feature-card {
  display: block;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  padding: 2.25rem 1.75rem;
  height: 100%;
  color: var(--text);
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: ""; position: absolute;
  top: 0; left: 0; height: 3px; width: 0;
  background: var(--accent);
  transition: width .35s ease;
}
.feature-card:hover {
  background: rgba(var(--accent-rgb),.04);
  border-color: rgba(var(--accent-rgb),.3);
  transform: translateY(-6px);
  color: var(--text);
}
.feature-card:hover::before { width: 100%; }

.feature-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent);
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}
.feature-card h3 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: 1rem;
}
.feature-card p { color: var(--text-muted); font-size: .95rem; margin-bottom: 1.5rem; }
.feature-link {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--accent-text);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner {
  position: relative;
  padding: 6rem 0;
  background: var(--bg-darker);
  overflow: hidden;
}
.cta-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(110deg, rgba(var(--bg-darker-rgb),.92) 0%, rgba(var(--bg-darker-rgb),.65) 60%, rgba(var(--bg-darker-rgb),.92) 100%),
    var(--cta-img, none);
  background-size: cover;
  background-position: center;
}

.reserve-card {
  background: var(--bg-dark);
  border: 1px solid rgba(255,255,255,.08);
  padding: 2rem;
  border-top: 3px solid var(--accent);
}
.reserve-card h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.25rem;
}
.reserve-row {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 0;
  color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.reserve-row:hover { color: #fff; }
.reserve-row i { color: var(--accent-text); font-size: 1.2rem; }
.reserve-row small { display: block; color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: 1.5px; }
.reserve-row strong { color: #fff; font-weight: 600; }

/* ============================================================
   SERVICE CARDS (cream section)
   ============================================================ */
.service-card {
  background: #fff;
  height: 100%;
  overflow: hidden;
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.18);
  transition: all .3s ease;
  border-bottom: 4px solid transparent;
}
.service-card:hover {
  transform: translateY(-8px);
  border-bottom-color: var(--accent);
  box-shadow: 0 28px 50px -22px rgba(0,0,0,.28);
}
.service-img {
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: #ddd;
}
.service-body { padding: 1.75rem; }
.service-body h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  color: var(--text-dark);
  margin-bottom: .75rem;
}
.service-body p { color: #666; font-size: .95rem; margin-bottom: 1rem; }
.service-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  font-size: .82rem;
  letter-spacing: 1px;
}
.service-link:hover { gap: .7rem; }

/* ============================================================
   EVENT CARDS
   ============================================================ */
.event-card {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  padding: 2rem;
  height: 100%;
  position: relative;
  transition: all .3s;
}
.event-card:hover {
  background: rgba(var(--accent-rgb),.05);
  border-color: rgba(var(--accent-rgb),.35);
}
.event-date {
  display: inline-flex; flex-direction: column;
  background: var(--accent);
  color: #fff;
  padding: .5rem 1rem;
  text-align: center;
  margin-bottom: 1.25rem;
}
.event-day {
  font-family: var(--font-display);
  font-size: 1.8rem;
  line-height: 1;
}
.event-month {
  font-size: .7rem;
  letter-spacing: 2px;
  font-weight: 700;
  text-transform: uppercase;
}
.event-meta {
  color: var(--text-muted);
  font-size: .75rem;
  letter-spacing: 2px;
  font-weight: 600;
  margin-bottom: .5rem;
  text-transform: uppercase;
}
.event-card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.15;
  margin-bottom: .75rem;
}
.event-card p { color: var(--text-muted); font-size: .95rem; margin-bottom: 1rem; }
.event-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: .25rem .6rem;
}

/* ============================================================
   KONTAKT
   ============================================================ */
.info-block { margin-bottom: 2rem; }
.info-block h4 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: .75rem;
  display: flex; align-items: center; gap: .6rem;
}
.info-block h4 i { color: var(--accent-text); }
.info-block h5 {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 1px;
  color: var(--gold);
  text-transform: uppercase;
  display: flex; align-items: center; gap: .5rem;
}
.info-block p { color: var(--text-muted); margin: 0; }
.info-block a { color: var(--text); }
.info-block a:hover { color: var(--accent-text); }

.hours-table { width: 100%; }
.hours-table td {
  padding: .5rem 0;
  border-bottom: 1px dashed rgba(255,255,255,.08);
  color: var(--text-muted);
}
.hours-table td:last-child { text-align: right; color: #fff; font-weight: 500; }

.social-row { display: flex; gap: .75rem; margin-top: 1.5rem; }
.social-row a {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-size: 1.1rem;
  transition: all .25s;
}
.social-row a:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-3px);
}
.social-row-sm a { width: 38px; height: 38px; font-size: .95rem; }

.map-wrap {
  border: 1px solid rgba(255,255,255,.1);
  overflow: hidden;
  height: 100%;
  min-height: 480px;
  filter: grayscale(.4) contrast(1.05);
  transition: filter .3s;
}
.map-wrap:hover { filter: grayscale(0); }
.map-wrap iframe { width: 100%; height: 100%; min-height: 480px; border: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--bg-footer);
  padding: 4rem 0 2rem;
  border-top: 3px solid var(--accent);
}
.footer-brand { display: flex; align-items: center; gap: .55rem; margin-bottom: 1rem; }
.footer-tag { color: var(--text-muted); font-size: .92rem; }

.site-footer h5 {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: #fff;
  font-size: 1rem;
  letter-spacing: 2px;
  margin-bottom: 1rem;
}
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: .5rem; }
.footer-list a {
  color: var(--text-muted);
  font-size: .92rem;
  transition: color .2s;
}
.footer-list a:hover { color: var(--accent-text); }

.site-footer hr {
  border-color: rgba(255,255,255,.06);
  margin: 2.5rem 0 1.25rem;
}
.footer-small { color: var(--text-muted); font-size: .85rem; margin: 0; }

/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */
@media (max-width: 991px) {
  .section { padding: 5rem 0; }
  #mainNav .navbar-collapse {
    background: rgba(var(--bg-dark-rgb),.96);
    margin-top: 1rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(255,255,255,.08);
  }
  #mainNav .nav-link { margin: .25rem 0; }
}

@media (max-width: 575px) {
  .hero { padding: calc(var(--logo-w) * .68 + 3.5rem) 0 0; } /* Platz für das Logo (ca. 2:3) */
  /* Große Abstände (g-5) ragen sonst 12 px über den Bildschirmrand */
  .row.g-5 { --bs-gutter-x: 1.5rem; }
  .image-stack-badge { right: 0; bottom: -6px; }
  .hero-title { font-size: 3.2rem; }
  .display-title { font-size: 2.1rem; }
  .section { padding: 4rem 0; }
  .image-stack-front { transform: translate(10px, 10px); }
  .image-stack-badge { width: 85px; height: 85px; }
  .image-stack-badge strong { font-size: 1.6rem; }
  .image-stack-badge span { font-size: .7rem; }
  .section-red::after { font-size: 8rem; }
}

/* ============================================================
   WORDPRESS-ERGÄNZUNGEN
   ============================================================ */

/* Admin-Leiste: fixe Navigation darunter */
.admin-bar #mainNav { top: 32px; }
@media (max-width: 782px) { .admin-bar #mainNav { top: 46px; } }
@media (max-width: 600px) { .admin-bar #mainNav { top: 0; } }

html { scroll-padding-top: 90px; }

.bfm-skip {
  position: absolute; z-index: 2000; left: 1rem; top: 1rem;
  background: var(--accent); color: #fff; padding: .5rem 1rem;
}
.bfm-hidden-section { display: none !important; }
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute !important; word-wrap: normal !important;
}

/* Dropdown im Hauptmenü */
#mainNav .dropdown-menu {
  background: var(--bg-darker);
  border: 1px solid rgba(255,255,255,.08);
  border-top: 3px solid var(--accent);
  border-radius: 0;
  padding: .5rem 0;
}
#mainNav .dropdown-item { color: rgba(255,255,255,.82); font-size: .9rem; padding: .5rem 1.25rem; }
#mainNav .dropdown-item:hover, #mainNav .dropdown-item:focus, #mainNav .dropdown-item.active {
  background: rgba(var(--accent-rgb),.18); color: #fff;
}
#mainNav .nav-link.dropdown-toggle::after { position: static; display: inline-block; width: auto; height: auto; background: none; margin-left: .35em; vertical-align: .15em; }

/* Event-Karten mit Link */
.event-card h3 a { color: inherit; }
.event-card h3 a:hover { color: var(--accent-text); }

/* ---------- Karte mit Zustimmung ---------- */
.map-consent {
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 18px),
    var(--bg-dark);
  filter: none;
  text-align: center;
}
.map-consent.is-loaded { display: block; filter: grayscale(.4) contrast(1.05); }
.map-consent-inner { max-width: 380px; padding: 2rem; }
.map-consent-inner > i { font-size: 2.6rem; color: var(--accent-text); display: block; margin-bottom: 1rem; }
.map-consent-inner p { color: var(--text-muted); font-size: .92rem; }
.map-consent-link { display: block; margin-top: 1rem; font-size: .85rem; }

/* ============================================================
   UNTERSEITEN
   ============================================================ */
.page-hero {
  position: relative;
  padding: 11rem 0 4.5rem;
  overflow: hidden;
  background: var(--bg-dark);
}
.page-hero-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(110deg, rgba(var(--bg-dark-rgb),.95) 0%, rgba(var(--bg-dark-rgb),.72) 100%),
    var(--page-img, none);
  background-size: cover;
  background-position: center;
}
.page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--accent);
}
.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: .95;
  text-transform: uppercase;
  color: #fff;
  margin: .5rem 0 0;
  max-width: 900px;
}

.page-content { background: var(--bg-dark); }
.bfm-content-light .page-content { background: var(--bg-cream); color: var(--text-dark); }

.page-full { padding-top: 90px; }

/* ---------- Editor-Inhalte ---------- */
.entry-content { font-size: 1.05rem; line-height: 1.75; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content h2, .entry-content h3, .entry-content h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .5px;
  line-height: 1.05;
  margin: 2.5rem 0 1rem;
  color: #fff;
}
.entry-content h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.entry-content h3 { font-size: 1.6rem; }
.entry-content h4 { font-size: 1.25rem; }
.entry-content p, .entry-content li { color: var(--text-muted); }
.entry-content a:not(.wp-block-button__link):not(.btn) { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.entry-content img { height: auto; }
.entry-content blockquote, .entry-content .wp-block-quote {
  border-left: 4px solid var(--accent);
  padding: .5rem 0 .5rem 1.5rem;
  margin: 2rem 0;
  font-family: var(--font-script);
  font-size: 1.7rem;
  line-height: 1.3;
  color: #fff;
}
.entry-content table { width: 100%; margin: 1.5rem 0; }
.entry-content th, .entry-content td { padding: .6rem .5rem; border-bottom: 1px dashed rgba(255,255,255,.15); }
.entry-content hr { border-color: rgba(255,255,255,.15); opacity: 1; margin: 3rem 0; }
.entry-content .wp-block-button__link {
  background: var(--accent); color: #fff; border-radius: 4px; font-weight: 600;
  padding: .75rem 1.6rem; text-decoration: none;
}
.entry-content .wp-block-button__link:hover { background: var(--accent-hover); color: #fff; }
.entry-content .is-style-outline .wp-block-button__link { background: transparent; border: 2px solid currentColor; color: var(--accent-text); }
.entry-content figcaption { color: var(--text-muted); font-size: .85rem; text-align: center; }
.entry-content .wp-block-image, .entry-content figure { margin: 2rem 0; }
.entry-content .wp-block-separator { border-top: 3px solid var(--accent); width: 80px; margin-left: 0; }

/* Heller Inhaltsbereich */
.bfm-content-light .entry-content h2,
.bfm-content-light .entry-content h3,
.bfm-content-light .entry-content h4,
.bfm-content-light .entry-content blockquote { color: var(--text-dark); }
.bfm-content-light .entry-content p,
.bfm-content-light .entry-content li,
.bfm-content-light .entry-content td { color: #3b342d; }
.bfm-content-light .entry-content a:not(.wp-block-button__link):not(.btn) { color: var(--accent); }
.bfm-content-light .entry-content th,
.bfm-content-light .entry-content td { border-bottom-color: rgba(var(--bg-dark-rgb),.18); }
.bfm-content-light .entry-content hr { border-color: rgba(var(--bg-dark-rgb),.2); }
.bfm-content-light .entry-content figcaption { color: #5b5047; }
.bfm-content-light .entry-content .is-style-outline .wp-block-button__link { color: var(--accent); }
.bfm-content-light .post-card { background: #fff; border-color: transparent; box-shadow: 0 18px 40px -20px rgba(0,0,0,.18); }
.bfm-content-light .post-card h2 a { color: var(--text-dark); }
.bfm-content-light .post-card p { color: #5b5047; }
.bfm-content-light .post-card .feature-link { color: var(--accent); }
.bfm-content-light .post-nav a { color: var(--accent); }

/* WordPress-Ausrichtungen */
.alignleft { float: left; margin: .3rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .3rem 0 1rem 1.5rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.entry-content .alignwide { margin-left: calc(-1 * min(6vw, 80px)); margin-right: calc(-1 * min(6vw, 80px)); max-width: none; }
.entry-content .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.entry-full > .alignfull { margin-left: 0; margin-right: 0; width: 100%; }
.entry-full > *:not(.alignfull) { max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
.wp-caption-text { font-size: .85rem; color: var(--text-muted); }

/* Beitragskarten (Blog/Archiv) */
.post-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  height: 100%;
  transition: transform .3s ease;
}
.post-card:hover { transform: translateY(-6px); }
.post-card-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.post-card-body { padding: 1.75rem; }
.post-card h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.5rem; line-height: 1.1; }
.post-card h2 a { color: #fff; }
.post-card p { color: var(--text-muted); font-size: .95rem; }

.post-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(128,128,128,.25); }
.bfm-pagination { margin-top: 3rem; text-align: center; }
.bfm-pagination .page-numbers {
  display: inline-block; min-width: 42px; padding: .5rem .8rem; margin: 0 .2rem;
  border: 1px solid rgba(128,128,128,.35); color: inherit;
}
.bfm-pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Suche & Kommentare (schlicht) */
.search-form { display: flex; gap: .5rem; max-width: 420px; margin: 1.5rem auto 0; }
.search-form label { flex: 1; }
.search-form .search-field, .comment-form input:not([type=submit]):not([type=checkbox]), .comment-form textarea {
  width: 100%; padding: .65rem .9rem; border: 1px solid rgba(128,128,128,.4); background: rgba(255,255,255,.9); color: #1a1a1a;
}
.search-form .search-submit, .comment-form .submit {
  background: var(--accent); color: #fff; border: 0; padding: .65rem 1.2rem; font-weight: 600;
}
.comments-area { margin-top: 4rem; }