/* ══════════════════════════════════════════════════
   site.css — Seiten-Shell nach dem Vorbild von bettermann.nrw
   (Sticky-Navy-Header, Hero-Band, Sektionsbänder, Navy-Footer).
   Wird als LETZTE Datei geladen und gewinnt daher gegen ältere Regeln.
   ══════════════════════════════════════════════════ */

body.site-shell {
  height: auto;                /* tw-local.css setzt body{height:100%} – das würde position:sticky begrenzen */
  min-height: 100%;
  padding-top: 0;
  overflow-x: clip;            /* Full-Bleed-Bänder ohne horizontales Scrollen */
  line-height: 1.6;
}

/* ── HEADER ─────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: #0f1d47;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: box-shadow .2s;
}
.site-header.scrolled { box-shadow: 0 2px 16px rgba(0,0,0,.35); }

.site-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; }
.site-logo img {
  height: 32px;
  width: auto;
  object-fit: contain;
  background: #fff;
  border-radius: 7px;
  padding: 3px 6px;
}
.site-logo span { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.9); white-space: nowrap; }

.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a {
  color: rgba(255,255,255,.75);
  font-size: 14px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.site-nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.site-nav a.nav-link-active { background: rgba(255,255,255,.12); color: #fff; }
.site-nav .nav-cta {
  background: #1a2f6a;
  color: #fff;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.2);
}
.site-nav .nav-cta:hover { background: #2a4a9a; }
.site-nav .nav-gold { color: #f5a623; }
.site-nav .nav-mobile-only { display: none; }

.site-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  width: 36px;
  height: 36px;
}
.site-burger span { display: block; height: 2px; background: rgba(255,255,255,.85); border-radius: 2px; transition: transform .2s, opacity .2s; }
.site-burger.lmd-burger-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-burger.lmd-burger-open span:nth-child(2) { opacity: 0; }
.site-burger.lmd-burger-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .site-logo span { display: none; }
  .site-burger { display: flex; }
  .site-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 60px; left: 0; right: 0;
    background: #0f1d47;
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 12px 20px 20px;
    gap: 4px;
  }
  .site-nav.lmd-menu-open { display: flex; }
  .site-nav a { padding: 12px 14px; font-size: 15px; }
  .site-nav .nav-mobile-only { display: block; }
}

/* ── HINWEIS-BALKEN / -BOX (amber) ───────────────── */
.site-notice,
.notice-box {
  background: #fdf1de;
  border: 1px solid rgba(245,166,35,.4);
  color: #8a5a00;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
}
.site-notice { border-width: 0 0 1px; text-align: center; padding: 10px 20px; }
.notice-box  { border-radius: 10px; padding: 12px 14px; margin: 4px 0 16px; text-align: left; }
.site-notice strong, .notice-box strong { color: #a4620e; }

/* ── HERO-BAND ───────────────────────────────────── */
.hero {
  background: linear-gradient(145deg, #0f1d47 0%, #1a2f6a 55%, #1e3a8a 100%);
  color: #fff;
  padding: 64px 20px 56px;
  text-align: center;
}
.hero-inner { max-width: 720px; margin: 0 auto; }
.hero-logo {
  width: 200px;
  max-width: 70%;
  height: auto;
  margin: 0 auto 26px;
  background: #fff;
  border-radius: 18px;
  padding: 16px 22px;
  box-shadow: 0 12px 36px rgba(0,0,0,.28);
}
.hero h1 { font-size: 2.3rem; font-weight: 800; margin-bottom: 18px; color: #fff; line-height: 1.2; }
.hero h1 em { font-style: normal; color: #f5a623; }
.hero p { font-size: 1.05rem; color: rgba(255,255,255,.82); max-width: 560px; margin: 0 auto 24px; }
.hero-punkte { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 4px auto 28px; max-width: 640px; }
.hero-punkt { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: #fff; }
.hero-punkt::before { content: '✓'; color: #f5a623; font-weight: 800; }
.hero-badges { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.badge-pill {
  display: inline-block;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 13px;
  color: rgba(255,255,255,.9);
}
.badge-pill.gold { background: rgba(245,166,35,.2); border-color: rgba(245,166,35,.4); color: #f5a623; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-hero-primary {
  background: #f5a623; color: #0f1d47; font-weight: 800;
  padding: 13px 28px; border-radius: 10px; font-size: 15px; text-decoration: none; transition: opacity .15s;
}
.btn-hero-primary:hover { opacity: .88; }
.btn-hero-outline {
  border: 2px solid rgba(255,255,255,.4); color: rgba(255,255,255,.9);
  padding: 11px 24px; border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none; transition: background .15s;
}
.btn-hero-outline:hover { background: rgba(255,255,255,.1); }

/* ── SEKTIONEN ───────────────────────────────────── */
.home-page { width: 100vw; margin-left: calc(50% - 50vw); }
.content-section { padding: 64px 20px; background: #fff; }
.content-section.bg-light { background: #f0f3fa; }
.section-inner { max-width: 1060px; margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 40px; }
.section-head h2 { font-size: 1.9rem; font-weight: 800; color: #1a2f6a; margin-bottom: 10px; line-height: 1.25; }
.section-head p { color: #5a6a8a; max-width: 600px; margin: 0 auto; font-size: 1.05rem; }
.section-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #f5a623; margin-bottom: 10px; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.feat-card {
  background: #fff;
  border-radius: 12px;
  padding: 26px 22px 24px;
  box-shadow: 0 3px 18px rgba(26,47,106,.1);
  border-top: 4px solid #1a2f6a;
  transition: transform .18s;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.feat-card:hover { transform: translateY(-4px); }
.feat-card.blue { border-top-color: #4db6e8; }
.feat-card.gold { border-top-color: #f5a623; }
.feat-icon { font-size: 2.2rem; margin-bottom: 12px; }
.feat-card h3 { font-size: 1.15rem; font-weight: 800; color: #1a2f6a; margin-bottom: 4px; }
.feat-tag { font-size: 12px; font-weight: 700; color: #8899bb; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px; }
.feat-card p.feat-desc { color: #5a6a8a; font-size: .94rem; margin-bottom: 16px; }
.feat-card .feat-slot { margin: 0 0 16px; min-height: 40px; }
.feat-card .feat-slot p { color: #5a6a8a; font-size: .94rem; }
.feat-card .feat-actions { margin: 0 0 16px; }
.feat-foot { margin-top: auto; padding-top: 14px; border-top: 1px dashed #dde3f0; font-size: 12.5px; color: #8899bb; }

.btn-cta-primary {
  display: inline-block; background: #1a2f6a; color: #fff; font-weight: 700;
  padding: 13px 26px; border-radius: 10px; font-size: 15px; text-decoration: none; transition: background .15s;
}
.btn-cta-primary:hover { background: #2a4a9a; }
.btn-cta-gold {
  display: inline-block; background: #f5a623; color: #0f1d47; font-weight: 800;
  padding: 13px 26px; border-radius: 10px; font-size: 15px; text-decoration: none; transition: opacity .15s;
}
.btn-cta-gold:hover { opacity: .88; }
.btn-cta-outline {
  display: inline-block; border: 2px solid #1a2f6a; color: #1a2f6a; font-weight: 700;
  padding: 11px 24px; border-radius: 10px; font-size: 15px; text-decoration: none; transition: background .15s, color .15s;
}
.btn-cta-outline:hover { background: #1a2f6a; color: #fff; }
.cta-actions { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }

.about-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 44px; margin-top: 8px; }
@media (max-width: 720px) { .about-grid { grid-template-columns: 1fr; } }
.about-item { display: flex; gap: 16px; text-align: left; }
.about-num {
  font-size: 15px; font-weight: 800; color: #1a2f6a; border: 1.5px solid #1a2f6a;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #fff;
}
.about-item h4 { font-size: 16.5px; font-weight: 700; color: #1a2f6a; margin-bottom: 6px; }
.about-item p { font-size: 14.5px; color: #5a6a8a; line-height: 1.55; }

.tag-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 36px; }
@media (max-width: 600px) { .tag-row { grid-template-columns: repeat(2, 1fr); } }
.tag-row span {
  text-align: center; padding: 12px 8px; background: #fff; border: 1px solid #dde3f0; border-radius: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #5a6a8a;
}

.cta-section { background: #f0f3fa; padding: 64px 20px; text-align: center; }
.cta-section h2 { font-size: 1.9rem; font-weight: 800; color: #1a2f6a; margin-bottom: 12px; line-height: 1.25; }
.cta-section > .section-inner > p { color: #5a6a8a; max-width: 560px; margin: 0 auto 28px; }

.contact-info-card {
  background: #1a2f6a; border-radius: 16px; padding: 36px 32px; max-width: 620px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 22px; box-shadow: 0 8px 40px rgba(26,47,106,.2); text-align: left;
}
.contact-info-item { display: flex; gap: 16px; align-items: flex-start; }
.contact-info-icon {
  width: 44px; height: 44px; border-radius: 10px; background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0;
}
.contact-info-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.45); font-weight: 700; margin-bottom: 4px; }
.contact-info-value { font-size: 15px; color: #fff; font-weight: 600; }
.contact-info-value a { color: #f5a623; }
.contact-info-divider { border: none; border-top: 1px solid rgba(255,255,255,.1); margin: 0; }

/* Kleine Bausteine der Startseite */
.play-tri {
  display: inline-block; width: 0; height: 0;
  border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  margin-right: 6px; vertical-align: -1px;
}
.slot-label { display: block; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: #8899bb; margin: 10px 0 4px; }
.slot-label:first-child { margin-top: 0; }
.player-frame { border-radius: 12px; overflow: hidden; }

/* ── FOOTER ──────────────────────────────────────── */
.site-footer { background: #0f1d47; color: rgba(255,255,255,.5); text-align: center; padding: 24px 20px; font-size: 13px; }
.site-footer p + p { margin-top: 6px; }
.site-footer a { color: rgba(255,255,255,.55); text-decoration: none; }
.site-footer a:hover { color: #fff; }

/* ── UNTERSEITEN: erstes <header> jeder Seite wird zum Hero-Band ── */
body.site-shell #lmd-content { max-width: none; margin: 0; padding: 0 16px; }
body.site-shell #lmd-content > main { margin-top: 0 !important; padding-bottom: 56px; }
body.site-shell #lmd-content > main > header:first-child {
  width: 100vw;
  margin: 0 0 36px calc(50% - 50vw);
  padding: 48px 20px 44px;
  background: linear-gradient(145deg, #0f1d47 0%, #1a2f6a 55%, #1e3a8a 100%);
  color: #fff;
}
body.site-shell .hero-title-block .kicker { color: #f5a623; opacity: 1; letter-spacing: .25em; }
body.site-shell .hero-title-block h1 {
  color: #fff; text-transform: none; letter-spacing: 0; font-weight: 800; line-height: 1.15;
  font-size: clamp(1.9rem, 5vw, 2.8rem);
}
body.site-shell .hero-title-block .subtitle { color: rgba(255,255,255,.85); font-style: normal; font-weight: 400; font-size: 1.1rem; }

/* Sprungmarken nicht unter dem Sticky-Header verstecken */
body.site-shell [id] { scroll-margin-top: 76px; }

@media (max-width: 680px) {
  .hero h1 { font-size: 1.7rem; }
  .hero-punkt { font-size: 13.5px; }
  .content-section, .cta-section { padding: 48px 18px; }
  .section-head h2, .cta-section h2 { font-size: 1.6rem; }
}

/* Überschriften ausbalancieren (kein einzelnes Wort in der letzten Zeile) */
.hero h1, .section-head h2, .cta-section h2 { text-wrap: balance; }

/* ══ Startseite v2: ruhiger, klarer strukturiert ═════════════════ */


/* Hero: Text links, Cover rechts */
.hero-split { text-align: left; padding: 72px 20px 68px; }
.hero-grid { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: 1.25fr .75fr; gap: 56px; align-items: center; }
.hero-split .section-eyebrow { color: #f5a623; }
.hero-split h1 { font-size: 2.6rem; line-height: 1.15; margin-bottom: 20px; }
.hero-lead { font-size: 1.05rem; line-height: 1.7; color: rgba(255,255,255,.82); max-width: 560px; margin: 0 0 30px; }
.hero-split .hero-actions { justify-content: flex-start; }
.hero-cover { display: flex; justify-content: center; }
.hero-cover img { width: 100%; max-width: 300px; height: auto; background: #fff; border-radius: 18px; padding: 22px 28px; box-shadow: 0 12px 36px rgba(0,0,0,.28); }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-cover { order: -1; }
  .hero-cover img { max-width: 190px; padding: 14px 18px; }
  .hero-split { padding: 44px 20px 48px; }
  .hero-split h1 { font-size: 1.9rem; }
}

/* Hinweis-Leiste im Podcast-Bereich */
.info-banner {
  display: flex; gap: 12px; align-items: flex-start;
  max-width: 820px; margin: 0 auto 28px; padding: 14px 18px;
  background: #fdf1de; border: 1px solid rgba(245,166,35,.45); border-radius: 10px;
  color: #6b4700; font-size: 14px; line-height: 1.5; text-align: left;
}
.info-ico { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; color: #c47f00; }
.info-banner strong { color: #4a3000; }

/* Icons in Karten */
.ico { width: 30px; height: 30px; margin-bottom: 14px; color: #1a2f6a; }
.feat-card.featured { border-top-color: #f5a623; }

/* Schmale Sektionen: Text links, Button rechts */
.content-section.band { padding: 48px 20px; }
.band-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.band-text { max-width: 700px; text-align: left; }
.band-text h2 { font-size: 1.6rem; font-weight: 800; color: #1a2f6a; margin-bottom: 8px; line-height: 1.25; }
.band-text p { color: #5a6a8a; }
.band-action { flex-shrink: 0; }

/* Kontakt: Text links, Angaben rechts */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; text-align: left; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } }
.contact-copy p { margin: 0 0 26px !important; max-width: 480px; }
.cta-actions.left { justify-content: flex-start; }
.contact-list { margin: 0; }
.contact-list > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid #dde3f0; }
.contact-list > div:first-child { border-top: 1px solid #dde3f0; }
.contact-list dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8899bb; }
.contact-list dd { margin: 0; color: #1a2f6a; font-weight: 600; word-break: break-word; }
.contact-list dd a { color: #1a2f6a; text-decoration: underline; text-underline-offset: 3px; }

/* Alte ID-Regeln aus style.css (#lmd-mobile-menu { display:none; position:fixed … }) würden die
   neue Navigation ausblenden – hier mit höherer Spezifität zurückgesetzt. */
#lmd-mobile-menu.site-nav {
  display: flex; position: static; top: auto; left: auto; right: auto;
  z-index: auto; padding: 0; animation: none;
}
@media (max-width: 860px) {
  #lmd-mobile-menu.site-nav {
    display: none; position: absolute; top: 60px; left: 0; right: 0; padding: 12px 20px 20px;
  }
  #lmd-mobile-menu.site-nav.lmd-menu-open { display: flex; }
}

/* Hero-Einleitung: nicht durch ".hero p" zentrieren */
.hero-split .hero-lead { margin: 0 0 30px; max-width: 560px; }

/* ══ Hell v3: heller, einladender ═══════════════════════════════ */
body.site-shell { background: #f7f9fc; }
.content-section.bg-light, .cta-section { background: #f0f4fb; }

/* Weißer Header */
.site-header { background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid #e3e8f2; }
.site-header.scrolled { box-shadow: 0 2px 16px rgba(26,47,106,.12); }
.site-logo img { background: #fff; border: 1px solid #e3e8f2; }
.site-logo span { color: #1a2f6a; }
.site-nav a { color: #3b4a6b; }
.site-nav a:hover { background: #eef2fb; color: #1a2f6a; }
.site-nav a.nav-link-active { background: #eef2fb; color: #1a2f6a; }
.site-nav .nav-gold { color: #3b4a6b; }
.site-nav .nav-cta { background: #f5a623; color: #0f1d47; border: none; }
.site-nav .nav-cta:hover { background: #e8940a; color: #0f1d47; }
.site-burger span { background: #1a2f6a; }
.nav-new {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: #f5a623; color: #0f1d47; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px;
}
@media (max-width: 860px) {
  .site-nav { background: #fff; border-top: 1px solid #e3e8f2; box-shadow: 0 14px 24px rgba(26,47,106,.12); }
}

/* Heller Hero */
.hero, .hero-split { background: linear-gradient(160deg, #eaf1ff 0%, #f7faff 55%, #ffffff 100%); color: #1a2f6a; border-bottom: 1px solid #e3e8f2; }
.hero h1 { color: #1a2f6a; }
.hero p, .hero .hero-lead, .hero-split .hero-lead { color: #4a5a7a; }
.hero-split .section-eyebrow { color: #b36b00; }
.btn-hero-outline { border: 2px solid #1a2f6a; color: #1a2f6a; }
.btn-hero-outline:hover { background: #1a2f6a; color: #fff; }
.hero-cover img { border: 1px solid #e3e8f2; box-shadow: 0 16px 40px rgba(26,47,106,.14); }

/* Unterseiten: heller Kopfbereich */
body.site-shell #lmd-content > main > header:first-child {
  background: linear-gradient(160deg, #eaf1ff 0%, #f7faff 100%);
  color: #1a2f6a; border-bottom: 1px solid #e3e8f2;
}
body.site-shell .hero-title-block .kicker { color: #b36b00; }
body.site-shell .hero-title-block h1 { color: #1a2f6a; }
body.site-shell .hero-title-block .subtitle { color: #5a6a8a; }

/* Hell v3.1: etwas gedeckter/dunkler */
body.site-shell { background: #e9eef6; }
.content-section.bg-light, .cta-section { background: #dde5f1; }
.site-header { background: rgba(240,244,250,.95); border-bottom-color: #cdd7e8; }
.site-nav a:hover, .site-nav a.nav-link-active { background: #dbe4f3; }
.hero, .hero-split { background: linear-gradient(160deg, #cfdcf2 0%, #dde7f6 55%, #e9eef6 100%); border-bottom-color: #cdd7e8; }
body.site-shell #lmd-content > main > header:first-child { background: linear-gradient(160deg, #cfdcf2 0%, #dde7f6 100%); border-bottom-color: #cdd7e8; }
.hero p, .hero .hero-lead, .hero-split .hero-lead { color: #3b4a6b; }
@media (max-width: 860px) { .site-nav { background: #f0f4fa; border-top-color: #cdd7e8; } }

/* Hell v3.2: Hellblau in die Inhaltsbereiche, Hero in kräftigem Blau */
body.site-shell { background: #dde7f6; }
.content-section.bg-light, .cta-section { background: #cfdcf2; }
.hero, .hero-split,
body.site-shell #lmd-content > main > header:first-child { background: #22539d; border-bottom: none; color: #fff; }
.hero h1, body.site-shell .hero-title-block h1 { color: #fff; }
.hero p, .hero .hero-lead, .hero-split .hero-lead { color: rgba(255,255,255,.88); }
.hero-split .section-eyebrow, body.site-shell .hero-title-block .kicker { color: #ffc766; }
body.site-shell .hero-title-block .subtitle { color: rgba(255,255,255,.85); }
.btn-hero-outline { border-color: #fff; color: #fff; }
.btn-hero-outline:hover { background: #fff; color: #22539d; }
.hero-cover img { border: none; box-shadow: 0 16px 40px rgba(8,25,60,.35); }

/* Themen-Karten & YouTube-Vorschau */
.topic-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
a.topic-card { display: block; text-decoration: none; color: inherit; }
a.topic-card .topic-more { display: block; margin-top: 12px; font-size: .82rem; font-weight: 700; color: #22539d; }
a.topic-card:hover .topic-more { color: #b36b00; }
.yt-preview { position: relative; aspect-ratio: 16 / 9; margin: 0 0 14px; border-radius: 10px; overflow: hidden; background: #0f1d47; }
.yt-preview iframe, .yt-preview .youtube-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }