/* artikel.css — Lese-Experience "Heilsame Beziehungen"
 * Mobil: normaler Seiten-Scroll (Pull-to-Refresh) + untere Steuer-Leiste.
 * Desktop: App-Layout, das Papier scrollt intern (runde Ecken bleiben).
 * Farbmodi Hell/Dunkel (S/W nur fürs PDF). dev-only Branch feature/artikel-heilsame-beziehungen. */

@font-face { font-family:'Lora'; src:url('fonts/Lora-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Lora'; src:url('fonts/Lora-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Lora'; src:url('fonts/Lora-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Lora'; src:url('fonts/Lora-BoldItalic.ttf') format('truetype'); font-weight:700; font-style:italic; font-display:swap; }

.artikel-view-note { text-align:center; font-size:0.78rem; color:#6b7280; font-style:italic; margin:0.5rem 0 0; line-height:1.4; }

/* === Farb-Modi === */
.artikel-paper {
  --paper:#fffdf8; --ink:#243743; --head:#112736; --accent:#4b879a; --accent2:#3a6e80;
  --rule:rgba(75,135,154,0.25); --muted:#3a5562; --strong:#1c2f3a;
  --th-bg:#4b879a; --th-ink:#fff8ef; --td-bg:#fffdf8; --td-alt:#fbf5ec;
}
body.theme-dunkel .artikel-paper {
  --paper:#24282c; --ink:#d8d3c8; --head:#f1ede4; --accent:#7fb6c8; --accent2:#9ec7d4;
  --rule:rgba(216,211,200,0.20); --muted:#a9a497; --strong:#f1ede4;
  --th-bg:#3a4248; --th-ink:#eef0f0; --td-bg:#24282c; --td-alt:#2b3034;
}
body.theme-sw .artikel-paper {
  --paper:#ffffff; --ink:#1a1a1a; --head:#000000; --accent:#000000; --accent2:#2a2a2a;
  --rule:#999999; --muted:#333333; --strong:#000000;
  --th-bg:#222222; --th-ink:#ffffff; --td-bg:#ffffff; --td-alt:#f0f0f0;
}

/* === Basis (mobil-first: normaler Seiten-Scroll) === */
body.artikel-seite-page {
  background: linear-gradient(165deg,#152c3a 0%,#234a5b 55%,#2d5d70 100%);
  background-attachment: fixed;
  height: 100vh; height: 100dvh; overflow: hidden;
}
.artikel-seite-page #swup { height:100%; overflow:hidden; }
body.artikel-seite-page.theme-dunkel { background:#121417; }
body.artikel-seite-page.theme-sw { background:#3f4a52; }

/* Hamburger heller auf dunklem Hintergrund (weißgelb) */
body.artikel-seite-page .hamburger-line { background-color:#fff8ef !important; }

.artikel-progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:1500; background:rgba(255,248,239,0.10); }
.artikel-progress span { display:block; height:100%; width:0; background:#7fb6c8; transition:width 0.12s linear; }

.artikel-page-main { max-width:1180px; margin:0 auto; height:100vh; height:100dvh; display:flex; flex-direction:column; min-height:0; padding: 2.9rem clamp(0.5rem,3vw,2rem) 4.7rem; }

.artikel-topbar { display:none; }

.artikel-shell { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr); }
.artikel-toc { display:none; }

/* Papier */
.artikel-paper {
  width:100%; max-width:780px; margin:0 auto; justify-self:center;
  min-height:0; height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; position:relative;
  background:var(--paper); border-radius:18px; box-shadow:0 24px 60px rgba(8,20,28,0.4);
  padding:clamp(1.4rem,4vw,3.4rem) clamp(1.1rem,4vw,3.2rem); transition:background 0.3s ease;
}
/* Pull-to-Refresh-Indikator (mobil, eigener Gesture-Handler) */
.artikel-ptr { position:absolute; top:0; left:50%; transform:translate(-50%,-40px); width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--accent); color:var(--paper); font-size:1.2rem; opacity:0; pointer-events:none; z-index:5; }
.artikel-ptr.ready { background:#2a8060; }
.artikel-doc-footer { margin-top:2.6rem; padding-top:1.2rem; border-top:1px solid var(--rule); text-align:center; font-family:'Montserrat',sans-serif; font-size:0.78rem; color:var(--muted); }
.artikel-doc-footer a { color:var(--muted); text-decoration:underline; text-underline-offset:2px; }

/* Weißes Lesezeichen-Icon (vertikal, Umriss) */
.ic-bm { width:1.15em; height:1.15em; display:inline-block; vertical-align:-0.2em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }

/* === Untere Steuer-Leiste (mobil) === */
.artikel-bottombar {
  display:flex; align-items:center; justify-content:space-around;
  position:fixed; left:0.6rem; right:0.6rem; bottom:0.6rem; z-index:900;
  padding:0.35rem 0.4rem;
  background:rgba(17,39,54,0.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,248,239,0.14); border-radius:18px; box-shadow:0 8px 28px rgba(0,0,0,0.4);
}
.bb-pct { color:rgba(255,248,239,0.85); font-family:'Montserrat',sans-serif; font-size:0.74rem; min-width:3em; text-align:center; }
.bb-btn { display:flex; flex-direction:column; align-items:center; gap:2px; border:none; background:none; color:#fff8ef; cursor:pointer; padding:0.3rem 0.5rem; border-radius:12px; }
.bb-btn:active { background:rgba(255,248,239,0.12); }
.bb-ic { font-size:1.2rem; line-height:1; display:flex; align-items:center; }
.bb-lb { font-family:'Montserrat',sans-serif; font-size:0.64rem; opacity:0.85; }

/* === Dokument-Typografie === */
.artikel-doc { max-width:680px; margin:0 auto; font-family:'Lora',Georgia,serif; font-size:1.0rem; line-height:1.7; color:var(--ink); text-rendering:optimizeLegibility; overflow-wrap:break-word; }
.artikel-doc p { margin:0 0 1.05rem; text-align:left; }
.artikel-doc :is(h1,h2,h3,h4) { scroll-margin-top:3.6rem; }
.artikel-doc h1.artikel-title { font-size:clamp(2.1rem,7vw,3.3rem); margin:0.4rem 0 0.45rem; padding-bottom:0; }
.artikel-doc h1.artikel-title::after { display:none; }
.artikel-doc p.artikel-lead { font-size:1.12rem; line-height:1.65; color:var(--head); text-align:center; margin-bottom:1.5rem; }
.artikel-doc .artikel-byline { text-align:center; font-family:'Montserrat',sans-serif; font-size:0.96rem; letter-spacing:0.3px; color:var(--muted); margin:0 0 0; }
/* Kleine Namens-Zeile unter Kapitel-Überschriften (aus "(von …)" gelöst) */
.artikel-doc .hbyline { text-align:left; font-size:0.9rem; color:var(--muted); margin:-0.6rem 0 1.7rem; }
.artikel-doc .artikel-byline .artikel-by-sep { display:inline-block; color:var(--accent); font-weight:700; margin:0 0.55em; transform:translateY(-0.05em); }
.artikel-doc .artikel-byline .artikel-stand { white-space:nowrap; }
.artikel-doc .artikel-byline::after { content:""; display:block; width:90px; height:3px; background:var(--accent); margin:1.15rem auto 2rem; }
.artikel-doc h1 { font-family:'Alice',serif; font-weight:400; font-size:clamp(1.8rem,5.5vw,2.6rem); color:var(--head); text-align:center; line-height:1.18; margin:3rem 0 1.3rem; padding-bottom:0.8rem; }
.artikel-doc h1::after { content:""; display:block; width:64px; height:2px; background:var(--accent); margin:0.9rem auto 0; }
.artikel-doc h2 { font-family:'Alice',serif; font-weight:400; font-size:clamp(1.35rem,4vw,1.75rem); color:var(--head); line-height:1.25; margin:2.3rem 0 0.9rem; padding-bottom:0.35rem; border-bottom:1px solid var(--rule); }
.artikel-doc h3 { font-family:'Alice',serif; font-weight:400; font-size:1.24rem; color:var(--accent); margin:1.8rem 0 0.6rem; }
.artikel-doc h4 { font-family:'Montserrat',sans-serif; font-weight:600; font-size:0.9rem; letter-spacing:0.6px; text-transform:uppercase; color:var(--accent2); margin:1.4rem 0 0.5rem; }
.artikel-doc .hnum { color:var(--accent); font-weight:700; }
.artikel-doc strong { font-weight:700; color:var(--strong); }
.artikel-doc em { font-style:italic; }
.artikel-doc a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.artikel-doc ul, .artikel-doc ol { margin:0 0 1.1rem; padding-left:1.5rem; }
.artikel-doc li { margin-bottom:0.5rem; }
.artikel-doc blockquote { margin:1.4rem 0; padding:0.4rem 0 0.4rem 1.2rem; border-left:3px solid var(--accent); color:var(--muted); font-style:italic; }
.artikel-doc hr { border:none; height:1px; background:var(--rule); margin:2.2rem 0; }
.artikel-doc table { width:100%; table-layout:fixed; border-collapse:collapse; margin:1.4rem 0; font-size:0.9rem; line-height:1.6; font-family:'Montserrat',sans-serif; }
.artikel-doc th { background:var(--th-bg); color:var(--th-ink); font-family:'Alice',serif; font-weight:400; font-size:0.98rem; letter-spacing:0.5px; padding:0.7rem 0.85rem; text-align:left; vertical-align:top; }
.artikel-doc td { border:1px solid var(--rule); padding:0.7rem 0.85rem; vertical-align:top; text-align:left; background:var(--td-bg); }
.artikel-doc tr:nth-child(even) td { background:var(--td-alt); }
.artikel-doc code { font-family:'Montserrat',monospace; font-size:0.9em; background:var(--rule); padding:0.1em 0.35em; border-radius:4px; }
.artikel-loading { text-align:center; color:var(--accent); font-family:'Alice',serif; font-size:1.1rem; padding:3rem 0; }

/* === Lesezeichen-Panel === */
.artikel-bm { position:fixed; inset:0; z-index:1450; display:flex; align-items:center; justify-content:center; padding:1.2rem; background:rgba(17,39,54,0.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); opacity:0; transition:opacity 0.22s ease; }
.artikel-bm.open { opacity:1; }
.artikel-bm[hidden] { display:none; }
.artikel-bm-panel { background:#fffdf8; color:#243743; border-radius:18px; width:100%; max-width:420px; max-height:80vh; display:flex; flex-direction:column; padding:1.4rem; box-shadow:0 24px 60px rgba(8,20,28,0.45); }
.artikel-bm-head { display:flex; align-items:center; justify-content:space-between; font-family:'Alice',serif; font-size:1.4rem; color:#112736; margin-bottom:1rem; }
.artikel-bm-head button { background:none; border:none; font-size:1.6rem; line-height:1; color:#4b879a; cursor:pointer; }
.artikel-bm-add { border:none; background:#4b879a; color:#fff8ef; font-family:'Montserrat',sans-serif; font-size:0.9rem; font-weight:600; padding:0.65rem 1rem; border-radius:50px; cursor:pointer; margin-bottom:1rem; }
.artikel-bm-add:hover { background:#3a6e80; }
.artikel-bm-list { overflow-y:auto; display:flex; flex-direction:column; gap:0.4rem; }
.artikel-bm-empty { color:#6b7280; font-family:'Montserrat',sans-serif; font-size:0.85rem; font-style:italic; text-align:center; padding:1rem 0; }
.artikel-bm-row { display:flex; align-items:stretch; gap:0.5rem; }
.artikel-bm-go { flex:1; text-align:left; border:1px solid rgba(75,135,154,0.25); background:#fff; color:#243743; font-family:'Montserrat',sans-serif; font-size:0.86rem; padding:0.55rem 0.75rem; border-radius:10px; cursor:pointer; transition:background 0.15s ease; }
.artikel-bm-go:hover { background:#f4ece0; }
.artikel-bm-del { border:none; background:rgba(160,90,58,0.12); color:#a05a3a; font-size:1.1rem; line-height:1; width:38px; border-radius:10px; cursor:pointer; }
.artikel-bm-del:hover { background:rgba(160,90,58,0.22); }

/* === Kapitel-Schublade (Menü) === */
.artikel-toc-drawer { position:fixed; inset:0; z-index:1400; display:flex; background:rgba(17,39,54,0.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; transition:opacity 0.25s ease; }
.artikel-toc-drawer.open { opacity:1; }
.artikel-toc-drawer[hidden] { display:none; }
.artikel-toc-drawer-panel { background:#16303e; width:min(82vw,340px); height:100%; overflow-y:auto; padding:1rem 1rem 2rem; box-shadow:4px 0 30px rgba(0,0,0,0.4); transform:translateX(-100%); transition:transform 0.28s cubic-bezier(0.2,0.8,0.2,1); display:flex; flex-direction:column; }
.artikel-toc-drawer.open .artikel-toc-drawer-panel { transform:none; }
.artikel-toc-drawer-head { display:flex; align-items:center; justify-content:space-between; color:#fff8ef; font-family:'Alice',serif; font-size:1.2rem; margin-bottom:0.8rem; }
.artikel-toc-drawer-close { background:none; border:none; color:#fff8ef; font-size:1.6rem; line-height:1; cursor:pointer; }
.artikel-toc-drawer nav { display:flex; flex-direction:column; gap:1px; }
.drawer-feedback { margin-top:auto; border:1px solid rgba(255,248,239,0.25); background:rgba(255,248,239,0.06); color:#fff8ef; font-family:'Montserrat',sans-serif; font-size:0.85rem; padding:0.6rem 0.9rem; border-radius:10px; cursor:pointer; }
.drawer-feedback:hover { background:rgba(255,248,239,0.14); }

.toc-link { color:rgba(255,248,239,0.72); text-decoration:none; font-family:'Montserrat',sans-serif; font-size:0.84rem; line-height:1.35; padding:0.34rem 0.6rem; border-left:2px solid transparent; border-radius:0 6px 6px 0; transition:color 0.15s ease,background 0.15s ease,border-color 0.15s ease; }
.toc-link:hover { color:#fff8ef; background:rgba(255,248,239,0.08); }
.toc-h1 { font-family:'Alice',serif; font-size:0.96rem; color:rgba(255,248,239,0.92); }
.toc-h3 { font-size:0.8rem; color:rgba(255,248,239,0.58); }
.toc-link.active { color:#fff8ef; border-left-color:#7fb6c8; background:rgba(255,248,239,0.10); font-weight:600; }

/* Aufklappbarer Inhaltsverzeichnis-Baum (Word-artige Navigation) */
.toc-tree, .toc-children { list-style:none; margin:0; padding:0; }
.toc-children { padding-left:0.8rem; }
.toc-node.collapsed > .toc-children { display:none; }
.toc-node-h1 { margin-top:0.5rem; }
.toc-row { display:flex; align-items:flex-start; gap:0.05rem; }
.toc-row > .toc-link { display:block; flex:1 1 auto; min-width:0; }
.toc-toggle { flex:0 0 1.05rem; align-self:flex-start; height:1.5rem; background:none; border:none; padding:0; cursor:pointer; color:rgba(255,248,239,0.42); font-size:0.62rem; line-height:1.5rem; text-align:center; }
.toc-toggle::before { content:'\25B8'; display:inline-block; transition:transform 0.18s ease; }
.toc-node:not(.collapsed):not(.toc-leaf) > .toc-row > .toc-toggle::before { transform:rotate(90deg); }
.toc-toggle:hover { color:#fff8ef; }
.toc-leaf > .toc-row > .toc-toggle { visibility:hidden; }

/* mobil: globalen Feedback-FAB ausblenden (kommt ins Menü) */
@media (max-width:979px) { body.artikel-seite-page .feedback-button { display:none !important; } }

/* ============================================================
   DESKTOP (≥980px): App-Layout — Papier scrollt intern, runde Ecken bleiben
   ============================================================ */
@media (min-width:980px) {
  body.artikel-seite-page { height:100vh; height:100dvh; overflow:hidden; }
  .artikel-seite-page #swup { height:100%; overflow:hidden; }
  .artikel-page-main { height:100vh; height:100dvh; display:flex; flex-direction:column; min-height:0; padding: clamp(0.7rem,2.5vw,1.4rem) clamp(0.5rem,3vw,2rem); }
  .artikel-topbar { display:flex; align-items:center; justify-content:space-between; gap:0.8rem; flex-wrap:wrap; flex:none; margin-bottom:clamp(0.6rem,1.6vw,1.1rem); }
  .artikel-shell { flex:1; min-height:0; display:grid; grid-template-columns:250px minmax(0,1fr); gap:2rem; }
  .artikel-toc { display:block; min-height:0; overflow-y:auto; padding-right:0.3rem; }
  .artikel-toc nav { display:flex; flex-direction:column; gap:1px; }
  .artikel-paper { min-height:0; height:100%; justify-self:center; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:clamp(1.6rem,3.5vw,3.4rem) clamp(1.2rem,3.5vw,3.2rem); }
  .artikel-doc { font-size:1.04rem; line-height:1.75; }
  .artikel-doc p { text-align:justify; hyphens:auto; -webkit-hyphens:auto; }
  .artikel-doc li { text-align:left; }
  .artikel-doc :is(h1,h2,h3,h4) { scroll-margin-top:1.4rem; }
  .artikel-bottombar { display:none; }

  .artikel-back { color:#fff8ef; text-decoration:none; font-family:'Alice',serif; font-size:1rem; opacity:0.9; white-space:nowrap; }
  .artikel-back:hover { opacity:1; }
  .artikel-tools { display:flex; align-items:center; gap:0.7rem; flex-wrap:wrap; }
  .artikel-pct { color:rgba(255,248,239,0.82); font-family:'Montserrat',sans-serif; font-size:0.8rem; white-space:nowrap; }
  .artikel-iconbtn { border:none; background:rgba(255,248,239,0.12); color:#fff8ef; line-height:1; padding:0.42rem 0.6rem; border-radius:50px; cursor:pointer; transition:background 0.2s ease; }
  .artikel-iconbtn:hover { background:rgba(255,248,239,0.22); }
  .artikel-themetoggle { display:inline-flex; background:rgba(255,248,239,0.12); border-radius:50px; padding:3px; gap:2px; }
  .artikel-themetoggle button { border:none; background:transparent; color:#fff8ef; font-family:'Montserrat',sans-serif; font-size:0.8rem; padding:0.4rem 0.9rem; border-radius:50px; cursor:pointer; white-space:nowrap; transition:background 0.2s ease,color 0.2s ease; }
  .artikel-themetoggle button.active { background:#fff8ef; color:#1c3a48; font-weight:600; }
  .artikel-download { border:none; background:#4b879a; color:#fff8ef; font-family:'Montserrat',sans-serif; font-size:0.85rem; font-weight:600; padding:0.5rem 1.1rem; border-radius:50px; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.25); transition:background 0.2s ease,transform 0.2s ease; white-space:nowrap; }
  .artikel-download:hover { background:#5a9aad; transform:translateY(-1px); }
}

/* ============================================================
   DRUCK / PDF (S/W kommt automatisch über die Theme-Klasse)
   ============================================================ */
@media print {
  * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  body.artikel-seite-page { background:#fff !important; height:auto !important; overflow:visible !important; }
  .artikel-seite-page #swup { height:auto !important; overflow:visible !important; }
  .artikel-progress, .artikel-topbar, .artikel-toc, .artikel-bottombar, .artikel-toc-drawer, .artikel-bm,
  .noscript-nav, .site-logo, .hamburger-menu, .nav-overlay, .nav-menu, [class*="feedback"] { display:none !important; }
  .artikel-page-main { height:auto !important; max-width:none; padding:0; margin:0; display:block; }
  .artikel-shell { display:block; }
  .artikel-paper { height:auto !important; overflow:visible !important; box-shadow:none; border-radius:0; margin:0; max-width:none; padding:0; }
  .artikel-doc { max-width:none; font-size:11pt; }
  .artikel-doc h1, .artikel-doc h2, .artikel-doc h3, .artikel-doc h4 { break-after:avoid; }
  .artikel-doc table, .artikel-doc tr { break-inside:avoid; }
  .artikel-doc-footer { display:none; }
  @page { margin:1.8cm 1.6cm; }
}