/* Episodenseiten (/0XX-slug): Layout, Sidebar, Kapitel, Gast-Teaser.
   Geladen nur auf Episodenseiten (scripts/episode_builder.py), der Build haengt ?v=<hash> an.
   Vorher stand dieser Block in jeder der 36 Seiten einzeln (bis 25.09.2026). */
  /* Basis, Tokens, Karten, Breadcrumb, Plattform-Farben, Newsletter-Band: /site.css (mobile first) */
  main h1{ margin:0 0 10px; line-height:1.3; }
  main p.subtitle{ font-size:var(--fs-base); color:var(--muted); text-align:center; margin:0 auto; max-width:720px; line-height:1.55; }
  @media (min-width:640px){ main p.subtitle{ font-size:var(--fs-lg); } }
  .video-wrap{
    position:relative;
    width:100%;
    padding-top:56.25%;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(26,31,46,0.18);
    background:#000;
    grid-area:video;
  }
  .video-wrap iframe{
    position:absolute; top:0; left:0; width:100%; height:100%; border:0;
  }
  /* Grid-Bereiche statt fester DOM-Reihenfolge: Video, mobile "Folge
     hoeren"-Karte, Sidebar (Rang/Gast/Buchtipps) und der lange Content sind
     alle direkte Kinder von .layout, damit sie sich per Breakpoint frei neu
     anordnen lassen, ohne Markup zu duplizieren (Mario-Feedback 2026-09-22:
     Sidebar landete mobil ganz unten, sogar unter "Alle Folgen ansehen"). */
  .layout{
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
      "video"
      "mobilecard"
      "sidebar"
      "content";
    gap:24px;
  }
  .platform-mobile-card{ grid-area:mobilecard; }
  .sidebar{ grid-area:sidebar; }
  .content{ grid-area:content; }
  @media (min-width:900px){
    .layout{
      grid-template-columns:2fr 1fr;
      grid-template-areas:
        "video sidebar"
        "content sidebar";
      align-items:start;
    }
    .sidebar{ position:sticky; top:16px; }
  }
  .intro-card{ margin-bottom:24px; }
  .quote{
    border-left:3px solid var(--gold);
    padding:2px 0 2px 16px;
    font-style:italic;
    font-size:var(--fs-lg);
    line-height:1.65;
    margin:18px 0;
  }
  .quote-by{
    font-size:var(--fs-sm);
    color:var(--muted);
    font-style:normal;
    margin:6px 0 0 16px;
  }
  .insights{ list-style:none; margin:0; padding:0; }
  .insights li{
    font-size:var(--fs-base);
    line-height:1.65;
    padding:0 0 14px 26px;
    position:relative;
  }
  .insights li:last-child{ padding-bottom:0; }
  .insights li:before{
    content:"→";
    position:absolute;
    left:0; top:0;
    color:var(--accent);
    font-weight:700;
  }
  .insights li .ts{ color:var(--muted); font-size:var(--fs-sm); }
  .perf-note{ margin:14px 0 0; font-size:var(--fs-sm); line-height:1.5; color:var(--muted); font-style:italic; }
  .chapters{ list-style:none; margin:0; padding:0; }
  .chapters li{ border-bottom:1px solid var(--border); }
  .chapters li:last-child{ border-bottom:none; }
  .chapters a{
    display:flex;
    gap:12px;
    align-items:baseline;
    padding:10px 0;
    text-decoration:none;
    color:var(--text);
  }
  .chapters a:hover{ color:var(--accent); }
  .chapters .t{
    font-variant-numeric:tabular-nums;
    color:var(--accent);
    font-weight:700;
    font-size:var(--fs-sm);
    flex:none;
    min-width:56px;
  }
  .chapters .ttl{ font-size:var(--fs-base); line-height:1.4; }
  .inhalt-liste{ margin:0; padding-left:22px; }
  .inhalt-liste li{ padding:4px 0; line-height:1.4; }
  .inhalt-liste a{ display:block; padding:4px 0; }
  .platform-row{ display:flex; flex-direction:column; gap:8px; }
  a.platform-btn{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    font-weight:700;
    font-size:var(--fs-base);
    padding:12px 16px;
    border-radius:var(--btn-r);
    color:#fff !important; min-height:var(--btn-h); }
  a.linkcard{
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--gray);
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px 12px;
    text-decoration:none;
    color:var(--text);
    font-weight:600;
    font-size:var(--fs-sm);
    margin-bottom:6px;
  }
  a.linkcard:last-child{ margin-bottom:0; }
  a.dlcard{
    display:block;
    background:var(--gray);
    color:var(--text) !important;
    text-decoration:none !important;
    font-weight:600;
    font-size:var(--fs-sm);
    padding:9px 12px;
    border-radius:8px;
    margin-bottom:6px;
  }
  a.dlcard:last-child{ margin-bottom:6px; }
  a.dlcard:hover{ background:#e6e6e6; }
  a.amazon-btn{
    display:flex;
    text-align:center;
    background:var(--gold);
    color:var(--navy) !important;
    text-decoration:none !important;
    font-weight:700;
    font-size:var(--fs-sm);
    padding:10px 14px;
    border-radius:var(--btn-r-kauf);
    margin-top:12px;
    box-shadow:0 4px 14px rgba(253,189,0,0.35); min-height:var(--btn-h); align-items:center; justify-content:center; }
  a.amazon-btn:hover{ filter:brightness(0.96); }
  a.wikifolio-btn{
    display:flex;
    text-align:center;
    background:#78a600;
    color:#fff !important;
    text-decoration:none !important;
    font-weight:700;
    font-size:var(--fs-sm);
    padding:10px 14px;
    border-radius:var(--btn-r);
    box-shadow:0 4px 14px rgba(120,166,0,0.35); min-height:var(--btn-h); align-items:center; justify-content:center; }
  a.wikifolio-btn:hover{ background:#5f8e00; }
  a.wikifolio-btn-outline{
    display:flex;
    text-align:center;
    background:#fff;
    color:#5f8e00 !important;
    text-decoration:none !important;
    font-weight:700;
    font-size:var(--fs-sm);
    padding:10px 14px;
    border-radius:var(--btn-r);
    border:2px solid #95c11f;
    margin-top:10px; min-height:var(--btn-h); align-items:center; justify-content:center; }
  a.wikifolio-btn-outline:hover{ background:#f4f9e9; }
  .cta-box{
    background:var(--navy);
    border-radius:14px;
    padding:22px;
    text-align:center;
    margin:20px 0;
  }
  .cta-box h3{ color:#fff; font-size:var(--fs-base); margin:0 0 8px; }
  .cta-box p{ color:var(--on-dark); font-size:var(--fs-base); line-height:1.6; margin:0 0 14px; }
  .cta-box a.btn{
    display:inline-block;
    background:var(--gold);
    color:var(--navy) !important;
    text-decoration:none !important;
    font-weight:700;
    font-size:var(--fs-base);
    padding:11px 22px;
    border-radius:var(--btn-r);
  }
  .more-episodes{
    text-align:center;
    margin:32px 0 0;
  }
  .more-episodes a.btn{
    display:inline-block;
    background:var(--navy);
    color:#fff !important;
    text-decoration:none !important;
    font-weight:700;
    font-size:var(--fs-base);
    padding:12px 24px;
    border-radius:var(--btn-r);
  }
  .c-more{background:var(--navy);}
  h2.bl-mini-rank{ font-size:var(--fs-sm); font-weight:700; color:var(--text); margin:0 0 12px; text-transform:none; letter-spacing:normal; }
  .bl-mini-rank .bl-mini-rank-val{ font-size:var(--fs-sm); color:var(--accent); font-weight:800; margin-left:4px; }
  .bl-mini-stats{ display:flex; flex-direction:column; margin:0 0 12px; }
  .bl-mini-stat{ display:flex; justify-content:space-between; font-size:var(--fs-sm); padding:6px 0; border-bottom:1px solid var(--border); color:var(--muted); }
  .bl-mini-stat:last-child{ border-bottom:none; }
  .bl-mini-stat strong{ color:var(--text); font-weight:700; }
  a.bl-mini-link{ display:flex; text-align:center; background:var(--navy); color:#fff !important; text-decoration:none !important; font-weight:700; font-size:var(--fs-sm); padding:10px 14px; border-radius:20px; min-height:44px; align-items:center; justify-content:center; }
  a.bl-mini-link:hover{ filter:brightness(1.15); }
  a.bl-mini-info{ display:block; text-align:center; margin-top:8px; font-size:var(--fs-xs); color:var(--muted); }
  /* Mobil: Rang/Gast-Box/Buchtipps stehen als eigene Grid-Zeile "sidebar"
     direkt unter Video + "Folge hören"-Buttons, noch vor dem Fließtext (siehe
     .layout grid-template-areas oben) - nicht mehr ganz unten unter der Seite
     (Mario-Feedback 2026-09-22). Nur die "Folge hören"-Karte DORT blenden wir
     aus, weil sie oben schon dupliziert ist (siehe .platform-mobile-card). */
  /* Mobile first: "Folge hoeren"-Karte nur am Handy/Tablet, ab 900px in der Sidebar */
  .mobile-only-card{ display:block; }
  .sidebar .sidebar-listen-desktop{ display:none; }
  .platform-mobile-card{ padding:16px 18px; }
  .platform-mobile-card .platform-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .platform-mobile-card a.platform-btn{ padding:9px 8px; font-size:var(--fs-sm); justify-content:center; gap:5px; }
  @media (min-width:900px){
    .mobile-only-card{ display:none; }
    .sidebar .sidebar-listen-desktop{ display:block; }
  }
  /* Gast-Mini-Karte in der Sidebar: kompakt, Foto links (Zuschnitt wie die
     "Weitere Gäste"-Kacheln auf der Gast-Seite), Name + Rolle rechts daneben,
     darunter der Profil-Button ueber die volle Breite. */
  .guest-mini .gm-top{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
  .guest-mini .g-photo{ width:56px; height:56px; border-radius:50%; overflow:hidden; flex:none; background:var(--navy); border:2px solid var(--gold); }
  .guest-mini .g-photo img{ width:100%; height:100%; object-fit:cover; object-position:100% 30%; display:block; transform:scale(1.8); transform-origin:100% 30%; }
  .guest-mini .g-name{ font-weight:800; font-size:var(--fs-base); }
  .guest-mini .g-role{ font-size:var(--fs-xs); color:var(--muted); margin-top:2px; }
  a.g-profile-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%;
    background:var(--navy); color:#fff !important; text-decoration:none !important;
    font-weight:700; font-size:var(--fs-sm); padding:10px 16px; border-radius:var(--btn-r); min-height:var(--btn-h); }
  a.g-profile-btn:hover{ background:#2a3143; }
  /* Buchtipps-Mini-Liste in der Sidebar: gleiche Datenquelle wie die
     Gast-Seite (books.json/eigene_buecher.json), Cover + Einzel-Amazon-Link
     je Buch, Button zu allen Buchtipps des Gasts. */
  a.bm-all-btn{
    display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
    background:var(--gray); color:var(--text) !important; text-decoration:none !important;
    font-weight:700; font-size:var(--fs-sm); padding:10px 14px; border-radius:20px; margin:0 0 16px;
    border:1px solid var(--border); min-height:44px; }
  a.bm-all-btn:hover{ background:var(--border); }
  .bm-list{ display:flex; flex-direction:column; gap:16px; }
  .bm-item{ display:flex; gap:14px; align-items:flex-start; }
  a.bm-thumb{ flex:none; width:72px; height:108px; border-radius:6px; overflow:hidden; border:1px solid var(--border); box-shadow:0 2px 6px rgba(0,0,0,.1); display:block; background:#fff; }
  a.bm-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
  .bm-info{ min-width:0; padding-top:2px; }
  .bm-title{ font-size:var(--fs-sm); font-weight:700; line-height:1.3; }
  .bm-author{ font-size:var(--fs-xs); color:var(--muted); margin-top:2px; }
  a.bm-buy{ display:inline-block; margin-top:4px; font-size:var(--fs-xs); font-weight:700; color:var(--accent); text-decoration:none; padding:6px 0; }
  a.bm-buy:hover{ text-decoration:underline; }
  /* Gast-Teaser: ersetzt die frühere volle "Wer ist X?"-Bio-Card + separate
     "X im Netz"-Links-Card. Kurzer Teaser-Text, Link zum vollen Gast-Profil,
     Social-Icons. Volle Bio, alle Links, weitere Gäste leben auf der
     Gast-Seite (Konzept-Review 2026-09-22). */
  .gast-teaser{ background:linear-gradient(135deg,var(--navy),#232a3d); border-radius:14px; padding:24px 22px; margin-bottom:16px; }
  .gast-teaser .gt-top{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
  .gast-teaser .g-photo{ width:52px; height:52px; border-radius:50%; overflow:hidden; flex:none; border:2px solid var(--gold); }
  .gast-teaser .g-photo img{ width:100%; height:100%; object-fit:cover; object-position:100% 30%; display:block; transform:scale(1.8); transform-origin:100% 30%; }
  .gast-teaser h2{ color:#fff; font-size:var(--fs-base); text-transform:uppercase; letter-spacing:.6px; margin:0; }
  .gast-teaser .g-role{ color:var(--on-dark-muted); font-size:var(--fs-xs); margin-top:2px; }
  .gast-teaser p{ color:var(--on-dark); font-size:var(--fs-base); line-height:1.65; margin:0 0 16px; }
  .gast-teaser .gt-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
  a.gt-profile-btn{
    display:inline-flex; align-items:center; gap:6px; background:var(--gold); color:var(--navy) !important;
    text-decoration:none !important; font-weight:700; font-size:var(--fs-sm); padding:11px 20px; border-radius:var(--btn-r); min-height:var(--btn-h); }
  a.gt-profile-btn:hover{ filter:brightness(.96); }
  .gt-socials{ display:flex; flex-wrap:wrap; gap:8px; }
  a.gt-social{
    width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.08); color:#fff; text-decoration:none; font-size:var(--fs-sm); border:1px solid rgba(255,255,255,.15);
  }
  a.gt-social:hover{ background:rgba(255,255,255,.16); }
  .inhalt-mehr{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
  .inhalt-mehr span{ color:var(--muted); font-size:var(--fs-sm); font-weight:700; margin-right:4px; }