/* BIBELHELD Web Design System — button & 8px-grid tokens.
   Loaded LAST (after bh-base.css, styles.css) so its rules win the cascade
   without !important. See assets/bh-base.css and styles.css for what this
   overrides. */
:root{
  /* Marke (aus App-DS) */
  --bh-brand:#2259BE; --bh-brand-700:#1B4AA0;
  --bh-cape:#9C2222;  --bh-gold:#FFC145; --bh-leaf:#2EB67D;
  /* Flächen */
  --bh-paper:#FBF2E5; --bh-paper-2:#F3F0E8;
  --bh-ink:#1E1E2A;   --bh-muted:#5E6472;
  --bh-line:#E3E7EF;  --bh-line-warm:#ECE3D4;
  /* 8-px-Raster */
  --bh-2:8px; --bh-3:12px; --bh-4:16px; --bh-5:24px;
  --bh-h-sm:36px; --bh-h-md:44px; --bh-h-lg:52px;
  --bh-r-btn:12px; --bh-r-card:16px; --bh-r-input:12px;
  --bh-shadow-btn:0 4px 12px rgba(34,89,190,.28);
  /* Bootstrap-Variablen überschreiben */
  --bs-border-radius:12px;
  --bs-border-radius-lg:12px;
  --bs-border-radius-pill:999px;
}
.btn{ height:var(--bh-h-md); padding:0 20px;
  gap:var(--bh-2); font-size:15px; font-weight:800;
  line-height:1; border-radius:var(--bh-r-btn);
  justify-content:center; }
.btn-sm{ height:var(--bh-h-sm); padding:0 14px; font-size:13px; }
.btn-lg{ height:var(--bh-h-lg); padding:0 26px; font-size:16px; }

/* Primär = Blau */
.btn-primary{ background:var(--bh-brand); color:#fff;
  border-color:var(--bh-brand); box-shadow:var(--bh-shadow-btn); }
.btn-primary:hover{ background:var(--bh-brand-700); border-color:var(--bh-brand-700); }
/* Sekundär = Outline-Blau */
.btn-outline-primary{ color:var(--bh-brand); background:#fff;
  border:1.5px solid var(--bh-brand); }
.btn-outline-primary:hover{ background:var(--bh-brand); color:#fff; }
/* Ruhig = warmes Papier (statt grau/rot) */
.btn-secondary{ background:var(--bh-paper-2);
  color:var(--bh-muted); border:1px solid var(--bh-line-warm); }
.btn-secondary:hover{ background:var(--bh-line-warm); color:var(--bh-ink); }
/* Cape-Rot NUR Player & Löschen — sonst nicht */
.btn-danger{ background:var(--bh-cape); color:#fff; border-color:var(--bh-cape); }
.btn-danger:hover{ background:#7e1c1c; border-color:#7e1c1c; }

.btn-icon{ width:var(--bh-h-md); padding:0; flex:none; }

/* ============ Story header pattern (mobile-first) ============ */
.story-bar{ display:flex; align-items:center;
  gap:var(--bh-3); padding:8px 12px;
  background:rgba(251,242,229,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--bh-line-warm);
  position:sticky; top:0; z-index:40; }
.story-bar__title{ flex:1; min-width:0; font-size:15px;
  font-weight:900; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; margin:0; }
/* Mobile-only action split: Lied/Hören stay inline and flex-fill, centered
   under the title. Zurück/Weiter live in the bottom .story-nav bar instead. */
@media (max-width:767.98px){
  #bhInlineActions[data-bh-split="1"]{ flex-wrap:nowrap; justify-content:center; margin:.75rem 16px 0; }
  #bhInlineActions[data-bh-split="1"] > .btn{ flex:1 1 0; min-width:0; }
  body:has(#bhStoryNav){ padding-bottom:70px; }
  /* Consistent 16px side inset for everything sitting outside `.main`
     (header/tags, action buttons, hero gallery) — these previously ran edge-to-edge.
     .bh-header-row's own `.container` gutters are for desktop only — cancel them
     here so `.header`'s 16px margin is the only inset in play on mobile. */
  .bh-header-row{ padding-left:0; padding-right:0; max-width:none; margin-left:0; margin-right:0; }
  .header{ margin-left:16px; margin-right:16px; margin-top:12px; }
  .story-hero-gallery{ margin-left:16px !important; margin-right:16px !important; }
  /* Keep the tag row on one line: only hero, age and reading-time stay —
     topic tags (#Wahrheit, #Liebe, ...) would otherwise wrap to a 2nd row. */
  .bh-detail-tags .bh-tag--topic{ display:none; }
  /* Secondary story tools (Lesemodus/Drucken/A±) collapse behind the in-page "⋯" toggle.
     Zurück/Weiter already live in .story-nav, Lied/Hören inline — see #bhStoryBar above. */
  body.is-story #storyToolbar{ display:none; }
  body.is-story #storyToolbar.bh-mobile-open{ display:block; }
  /* "Zur Übersicht" is redundant with the sticky bar's own back chevron once
     open here — hide it and spread the remaining 3 tools: Lesemodus far left,
     A±  in the middle, Drucken far right. */
  #storyToolbar.bh-mobile-open #btnBack{ display:none; }
  #storyToolbar.bh-mobile-open .container{ justify-content:space-between; }
  #storyToolbar.bh-mobile-open #btnExport{ margin-left:0 !important; }
  #storyToolbar.bh-mobile-open #bhCenterControls{ margin:0 12px; }
}
@media (min-width:768px){
  .story-bar{ display:none; }
  .story-nav{ display:none !important; }
}

.story-nav{ position:fixed; left:0; right:0; bottom:0; z-index:39;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--bh-3); padding:9px 16px calc(9px + env(safe-area-inset-bottom,0px));
  background:rgba(251,242,229,.92); backdrop-filter:blur(8px);
  border-top:1px solid var(--bh-line-warm); }
.story-nav .btn{ background:transparent; border:none; height:auto; padding:6px 4px;
  font-size:13px; font-weight:800; color:var(--bh-muted); }
.story-nav .btn--next{ color:var(--bh-brand); }

/* Desktop: schlanke Titelzeile — title+subtitle+tags stay left, Lied/Hören
   sit right on the same line, so the gallery right below is the first thing
   that reads as "the hero" of the page. */
@media (min-width:768px){
  .bh-header-row{ display:flex; align-items:center; flex-wrap:wrap;
    justify-content:space-between; gap:24px; }
  .bh-header-row > .header{ flex:1 1 auto; min-width:0; text-align:left !important; }
  .bh-header-row > .header .bh-detail-tags{ justify-content:flex-start; }
  #bhInlineActions[data-bh-split="1"]{ flex:0 0 auto; justify-content:flex-end; margin:0; }
  #bhInlineActions[data-bh-split="1"] > .btn{ flex:0 0 auto; }
}