/* Wort & Weg — Gestaltung
   Ruhig, hell, gut lesbar. Serifenschrift für Bibel- und Gebetstexte,
   serifenlos für Bedienelemente. Dunkles Schema über prefers-color-scheme
   und über den Umschalter im Kopf. */

:root{
  --blau:#1e3a5f;
  --blau-hell:#2c5480;
  --gold:#b98529;
  --gold-hell:#d9a441;
  --bg:#faf7f2;
  --bg-2:#f2ede4;
  --karte:#ffffff;
  --linie:#e3dbcd;
  --text:#22262b;
  --text-2:#5c6570;
  --schatten:0 1px 2px rgba(30,58,95,.05), 0 8px 24px rgba(30,58,95,.06);
  --radius:14px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html[data-theme="dark"]{
  --blau:#8fb6e0;
  --blau-hell:#a9c9ee;
  --gold:#d9a441;
  --gold-hell:#e8bd63;
  --bg:#14181d;
  --bg-2:#1a1f26;
  --karte:#1e242c;
  --linie:#2e3742;
  --text:#e8eaed;
  --text-2:#a3adba;
  --schatten:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
}

@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --blau:#8fb6e0; --blau-hell:#a9c9ee; --gold:#d9a441; --gold-hell:#e8bd63;
    --bg:#14181d; --bg-2:#1a1f26; --karte:#1e242c; --linie:#2e3742;
    --text:#e8eaed; --text-2:#a3adba;
    --schatten:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
h1,h2,h3{line-height:1.25; margin:0 0 .5em; font-weight:650; letter-spacing:-.01em}
h1{font-size:clamp(1.7rem,1.2rem + 2vw,2.4rem)}
h2{font-size:1.3rem}
h3{font-size:1.05rem}
p{margin:0 0 1em}
a{color:var(--blau); text-underline-offset:3px}
.wrap{max-width:1140px; margin:0 auto; padding:0 20px}
.muted{color:var(--text-2)}
.muted-inline{color:var(--text-2); font-weight:400; font-size:.85em}
.klein{font-size:.85rem}
.lead{font-size:1.06rem; color:var(--text-2); max-width:62ch}

.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:99; background:var(--karte); padding:10px 16px; border-radius:8px}

/* ---------- Kopf ---------- */
.top{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--linie);
}
.top-in{display:flex; align-items:center; gap:18px; min-height:66px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--text); margin-right:auto}
.brand-mark{color:var(--blau); display:flex}
html[data-theme="dark"] .brand-mark, html:not([data-theme="light"]) .brand-mark{color:#243447}
@media (prefers-color-scheme: dark){html:not([data-theme="light"]) .brand-mark{color:#243447}}
.brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand-text strong{font-family:var(--serif); font-size:1.22rem; letter-spacing:.01em}
.brand-text small{color:var(--text-2); font-size:.74rem}

.tabs{display:flex; gap:2px; background:var(--bg-2); padding:4px; border-radius:11px; border:1px solid var(--linie)}
.tab{
  border:0; background:transparent; color:var(--text-2); font:inherit; font-size:.93rem;
  padding:7px 15px; border-radius:8px; cursor:pointer; white-space:nowrap;
}
.tab:hover{color:var(--text)}
.tab.is-on{background:var(--karte); color:var(--blau); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.07)}
.theme-btn{
  border:1px solid var(--linie); background:var(--karte); color:var(--text-2);
  width:38px; height:38px; border-radius:10px; cursor:pointer; font-size:1.05rem;
}
.theme-btn:hover{color:var(--text)}

/* ---------- Ansichten ---------- */
.view{display:none; padding-bottom:70px}
.view.is-on{display:block; animation:auf .28s ease}
@keyframes auf{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .view.is-on{animation:none}
}
.section-head{padding:38px 20px 20px}

/* ---------- Tagesvers-Hero ---------- */
.hero{
  background:
    radial-gradient(1100px 380px at 80% -10%, color-mix(in srgb, var(--gold) 13%, transparent), transparent),
    linear-gradient(170deg, var(--bg-2), var(--bg));
  border-bottom:1px solid var(--linie);
  padding:52px 0 46px; text-align:center;
}
.date{color:var(--text-2); font-size:.85rem; letter-spacing:.09em; text-transform:uppercase; margin:0 0 6px}
.eyebrow{
  display:inline-block; color:var(--gold); font-size:.78rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; margin:0 0 22px;
  border:1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  padding:3px 13px; border-radius:99px;
}
.vers{
  font-family:var(--serif); font-size:clamp(1.35rem,1rem + 1.7vw,2.05rem);
  line-height:1.5; margin:0 auto 18px; max-width:26em; color:var(--text);
  quotes:"\201E" "\201C"; position:relative;
}
.vers::before{content:open-quote; color:var(--gold); opacity:.5}
.vers::after{content:close-quote; color:var(--gold); opacity:.5}
.vers-ref{font-weight:600; color:var(--blau); margin:0 0 26px; letter-spacing:.01em}
.hero-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:20px}
.hero-note{color:var(--text-2); font-size:.8rem; margin:0}

.btn{
  display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:.92rem;
  padding:9px 18px; border-radius:10px; border:1px solid var(--linie);
  background:var(--karte); color:var(--text); cursor:pointer; text-decoration:none;
  transition:border-color .15s, transform .08s;
}
.btn:hover{border-color:var(--blau)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blau); border-color:var(--blau); color:#fff; font-weight:600; padding:11px 22px}
html[data-theme="dark"] .btn-primary{color:#12181f}
@media (prefers-color-scheme: dark){html:not([data-theme="light"]) .btn-primary{color:#12181f}}
.btn-primary:hover{background:var(--blau-hell); border-color:var(--blau-hell)}
.btn-klein{padding:6px 13px; font-size:.85rem}

/* ---------- Karten & Raster ---------- */
.card{
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius);
  padding:26px 26px 22px; box-shadow:var(--schatten);
}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:22px; padding-top:38px; padding-bottom:22px}
.card-wide{margin-bottom:22px}
@media (max-width:860px){ .grid-2{grid-template-columns:1fr} }

.fragen{margin:0; padding-left:1.1em; color:var(--text-2)}
.fragen li{margin-bottom:.45em}
.woche{margin:0; padding-left:1.3em}
.woche li{margin-bottom:.7em; padding-left:.2em}
.woche .w-tag{font-weight:600; color:var(--blau); display:block; font-size:.86rem}
.woche .w-ref{font-family:var(--serif); font-size:1.02rem}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 18px}
.chip{
  border:1px solid var(--linie); background:var(--bg-2); color:var(--text-2);
  font:inherit; font-size:.85rem; padding:5px 13px; border-radius:99px; cursor:pointer;
}
.chip:hover{color:var(--text); border-color:var(--blau)}
.chip.is-on{background:var(--blau); border-color:var(--blau); color:#fff}
html[data-theme="dark"] .chip.is-on{color:#12181f}
@media (prefers-color-scheme: dark){html:not([data-theme="light"]) .chip.is-on{color:#12181f}}
.treffer{display:grid; gap:12px}
.treffer .t-item{border-left:3px solid var(--gold); padding:4px 0 4px 16px}
.treffer .t-text{font-family:var(--serif); font-size:1.04rem; margin:0 0 4px}
.treffer .t-ref{color:var(--blau); font-size:.87rem; font-weight:600; margin:0}

/* ---------- Filter-Pillen ---------- */
.filter{display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 6px}
.filter.klein{margin:12px 0}
.pill{
  border:1px solid var(--linie); background:var(--karte); color:var(--text-2);
  font:inherit; font-size:.88rem; padding:7px 16px; border-radius:99px; cursor:pointer;
}
.pill:hover{color:var(--text); border-color:var(--blau)}
.pill.is-on{background:var(--blau); border-color:var(--blau); color:#fff; font-weight:600}
html[data-theme="dark"] .pill.is-on{color:#12181f}
@media (prefers-color-scheme: dark){html:not([data-theme="light"]) .pill.is-on{color:#12181f}}
.hinweis{
  font-size:.84rem; color:var(--text-2); background:var(--bg-2);
  border:1px solid var(--linie); border-left:3px solid var(--gold);
  padding:11px 15px; border-radius:0 9px 9px 0; margin:16px 0 0; max-width:78ch;
}

/* ---------- Gebete ---------- */
.gebet-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:20px; padding-top:26px}
.gebet{
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius);
  padding:24px 26px; box-shadow:var(--schatten); display:flex; flex-direction:column;
}
.gebet h3{margin:0 0 3px; font-size:1.12rem; font-family:var(--serif); font-weight:600}
.gebet .q{color:var(--text-2); font-size:.78rem; margin:0 0 15px}
.gebet .g-text{
  font-family:var(--serif); font-size:1.03rem; line-height:1.72; white-space:pre-wrap;
  margin:0 0 16px; flex:1;
}
.gebet .g-zeit{
  align-self:flex-start; font-size:.7rem; letter-spacing:.11em; text-transform:uppercase;
  font-weight:700; color:var(--gold); margin-bottom:10px;
}
.gebet-fuss{display:flex; gap:8px; border-top:1px solid var(--linie); padding-top:14px}

/* ---------- Lieder ---------- */
.suchzeile{margin:16px 0 0; max-width:460px}
.suchzeile input{
  width:100%; font:inherit; padding:11px 15px; border-radius:10px;
  border:1px solid var(--linie); background:var(--karte); color:var(--text);
}
.suchzeile input:focus{outline:2px solid var(--blau); outline-offset:1px; border-color:var(--blau)}

.lied-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px; padding-top:26px}
.lied{
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius);
  padding:22px 24px; box-shadow:var(--schatten); display:flex; flex-direction:column;
}
.lied-kopf{display:flex; align-items:flex-start; gap:13px; margin-bottom:12px}
.eg-nr{
  flex:none; width:52px; height:52px; border-radius:11px; background:var(--bg-2);
  border:1px solid var(--linie); display:flex; flex-direction:column; align-items:center;
  justify-content:center; line-height:1;
}
.eg-nr b{font-size:1.12rem; color:var(--blau)}
.eg-nr span{font-size:.6rem; letter-spacing:.09em; color:var(--text-2); margin-top:2px}
.lied h3{margin:0 0 2px; font-size:1.05rem; font-family:var(--serif)}
.lied .dichter{color:var(--text-2); font-size:.81rem; margin:0}
.lied .strophe{
  font-family:var(--serif); font-size:.99rem; line-height:1.68; white-space:pre-wrap;
  margin:0 0 16px; padding-left:14px; border-left:2px solid var(--linie); flex:1;
}
.lied .kein-text{
  font-size:.86rem; color:var(--text-2); background:var(--bg-2); border-radius:9px;
  padding:12px 14px; margin:0 0 16px; flex:1;
}
.lied-fuss{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.kat-tag{font-size:.72rem; color:var(--text-2); margin-left:auto}

/* ---------- Begegnung ---------- */
.begegnung-layout{display:grid; grid-template-columns:1fr 400px; gap:26px; align-items:start; padding-top:10px}
@media (max-width:1000px){ .begegnung-layout{grid-template-columns:1fr} }
.listen-kopf{margin-bottom:8px}
.listen-kopf h2{margin-bottom:2px}

.modus-box{
  background:color-mix(in srgb, var(--gold) 12%, var(--karte));
  border:1px solid color-mix(in srgb, var(--gold) 42%, transparent);
  border-radius:var(--radius); padding:15px 20px; margin-bottom:20px; font-size:.9rem;
}
.modus-box strong{color:var(--gold)}

.profil-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px; margin-top:16px}
.profil{
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius);
  padding:20px 22px; box-shadow:var(--schatten); display:flex; flex-direction:column;
}
.profil-kopf{display:flex; align-items:center; gap:13px; margin-bottom:12px}
.avatar{
  flex:none; width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:1.25rem; font-weight:600; color:#fff;
}
.profil h3{margin:0; font-size:1.05rem}
.profil .meta{color:var(--text-2); font-size:.83rem; margin:0}
.badge{
  display:inline-block; font-size:.71rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 10px; border-radius:99px; margin-bottom:11px;
  align-self:flex-start;
  background:color-mix(in srgb, var(--blau) 13%, transparent); color:var(--blau);
  border:1px solid color-mix(in srgb, var(--blau) 26%, transparent);
}
.profil .ueber{font-size:.95rem; margin:0 0 13px; flex:1}
.profil .vers-zeile{
  font-family:var(--serif); font-size:.9rem; color:var(--text-2);
  border-left:2px solid var(--gold); padding-left:11px; margin:0 0 15px;
}
.profil-fuss{display:flex; gap:8px; border-top:1px solid var(--linie); padding-top:13px}
.leer{color:var(--text-2); padding:32px 0; text-align:center}

/* ---------- Formular ---------- */
.form-card{position:sticky; top:86px}
@media (max-width:1000px){ .form-card{position:static} }
.feld{margin-bottom:15px}
.feld-reihe{display:grid; grid-template-columns:1fr 1fr; gap:13px}
label{display:block; font-size:.87rem; font-weight:600; margin-bottom:5px}
input[type=text],input[type=email],input[type=number],input[type=search],select,textarea{
  width:100%; font:inherit; font-size:.95rem; padding:10px 13px; border-radius:9px;
  border:1px solid var(--linie); background:var(--bg); color:var(--text);
}
textarea{resize:vertical; line-height:1.6}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blau); outline-offset:1px; border-color:var(--blau)}
input:invalid:not(:placeholder-shown){border-color:#c0563f}
.zaehler{float:right; font-weight:400; color:var(--text-2); font-size:.78rem}
.check{display:flex; gap:10px; align-items:flex-start; font-weight:400; font-size:.85rem; color:var(--text-2); margin:18px 0}
.check input{flex:none; margin-top:3px; width:17px; height:17px; accent-color:var(--blau)}
.form-msg{margin:12px 0 0; font-size:.89rem; min-height:1.2em}
.form-msg.ok{color:#2f7d4f}
.form-msg.fehler{color:#c0563f}
.hinweis-card{margin-top:20px; background:var(--bg-2)}
.schritte{margin:0 0 12px; padding-left:1.2em; font-size:.9rem; color:var(--text-2)}
.schritte li{margin-bottom:.4em}

/* ---------- Dialog ---------- */
.dlg{
  border:1px solid var(--linie); border-radius:var(--radius); background:var(--karte);
  color:var(--text); padding:28px 30px; max-width:520px; width:calc(100% - 32px);
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.dlg::backdrop{background:rgba(12,18,26,.55); backdrop-filter:blur(2px)}
.dlg-x{position:absolute; top:10px; right:12px}
.dlg-x button{border:0; background:transparent; font-size:1.5rem; color:var(--text-2); cursor:pointer; line-height:1}
.dlg h2{margin-bottom:16px; padding-right:26px}

/* ---------- Fuß ---------- */
.fuss{border-top:1px solid var(--linie); background:var(--bg-2); padding:34px 0}
.fuss-in{display:grid; gap:14px}
.fuss-nav{display:flex; gap:20px; flex-wrap:wrap; font-size:.9rem}
.fuss p{margin:0}

/* ---------- Textseiten (Impressum, Datenschutz, Quellen) ---------- */
.textseite{max-width:760px; padding-top:44px; padding-bottom:70px}
.textseite h1{margin-bottom:26px}
.textseite h2{margin-top:34px; font-size:1.15rem; color:var(--blau)}
.textseite ul{padding-left:1.2em; color:var(--text-2)}
.textseite li{margin-bottom:.5em}
.textseite code{background:var(--bg-2); padding:2px 6px; border-radius:5px; font-size:.9em}
.platzhalter-box{
  background:color-mix(in srgb, var(--gold) 13%, var(--karte));
  border:1px solid color-mix(in srgb, var(--gold) 42%, transparent);
  border-radius:var(--radius); padding:15px 20px; font-size:.92rem;
}
.zurueck{margin-top:44px; padding-top:22px; border-top:1px solid var(--linie)}

/* ---------- Kirchenjahr & Andacht ---------- */
.kj-kopf{
  background:
    radial-gradient(900px 300px at 20% -20%, color-mix(in srgb, var(--blau) 12%, transparent), transparent),
    linear-gradient(170deg, var(--bg-2), var(--bg));
  border-bottom:1px solid var(--linie);
  padding:44px 0 34px;
}
.kj-zeit{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  color:var(--text-2); font-size:.82rem; letter-spacing:.06em;
  text-transform:uppercase; margin:0 0 10px;
}
.farbpunkt{
  display:inline-block; width:13px; height:13px; border-radius:50%;
  border:1px solid var(--linie); flex:none;
}
.kj-name{font-family:var(--serif); margin:0 0 6px}
.kj-thema{
  font-family:var(--serif); font-size:1.22rem; color:var(--blau);
  font-style:italic; margin:0 0 12px;
}
.kj-meta{color:var(--text-2); font-size:.9rem; margin:0}
.kj-zeile{
  display:flex; align-items:center; gap:8px; justify-content:center;
  font-size:.88rem; color:var(--text); margin:0 0 14px; flex-wrap:wrap;
}

.kj-erklaerung{
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius);
  padding:16px 22px; margin:26px 0 0; box-shadow:var(--schatten);
}
.kj-erklaerung summary{cursor:pointer; font-weight:600; color:var(--blau)}
.kj-erklaerung > div{padding-top:14px; font-size:.95rem}
.kj-erklaerung p{margin-bottom:.8em}

.andacht-intro{
  color:var(--text-2); font-size:.95rem; max-width:60ch; margin:24px 0 8px;
}
.andacht-fuss{
  color:var(--text-2); font-size:.9rem; max-width:60ch;
  border-top:1px solid var(--linie); padding-top:20px; margin-top:34px;
}

.liturgie{list-style:none; counter-reset:lit; margin:20px 0 0; padding:0}
.lit-teil{
  counter-increment:lit; position:relative;
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius);
  padding:24px 28px 20px 68px; margin-bottom:16px; box-shadow:var(--schatten);
}
.lit-teil::before{
  content:counter(lit); position:absolute; left:24px; top:24px;
  width:28px; height:28px; border-radius:50%; background:var(--bg-2);
  border:1px solid var(--linie); color:var(--blau);
  display:flex; align-items:center; justify-content:center;
  font-size:.83rem; font-weight:700;
}
.lit-teil h3{
  font-size:.76rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold); margin:0 0 12px; font-weight:700; display:inline;
}
.lit-teil details summary{cursor:pointer; list-style:none; margin-bottom:10px}
.lit-teil details summary::-webkit-details-marker{display:none}
.lit-teil details summary::after{content:" ▸"; color:var(--text-2)}
.lit-teil details[open] summary::after{content:" ▾"}
.lit-teil h4{
  font-size:.93rem; color:var(--blau); margin:18px 0 6px; font-weight:650;
}
.lit-teil h4:first-of-type{margin-top:10px}
.lit-bibel{
  font-family:var(--serif); font-size:1.18rem; line-height:1.6;
  margin:10px 0 6px; color:var(--text);
}
.lit-lesung{font-size:1rem; line-height:1.72; margin:10px 0 8px}
.lit-gebet, .lit-segen{
  font-family:var(--serif); font-size:1.04rem; line-height:1.72;
  white-space:pre-wrap; margin:10px 0 6px;
}
.lit-segen{color:var(--blau)}
.lit-ref{color:var(--blau); font-weight:600; font-size:.88rem; margin:0 0 4px}
.lit-hinweis{color:var(--text-2); font-size:.86rem; margin:8px 0 0}
.lit-kern{
  background:var(--bg-2); border-left:3px solid var(--gold);
  border-radius:0 9px 9px 0; padding:14px 18px; margin:18px 0 0;
  font-family:var(--serif); font-size:1.06rem; line-height:1.6;
}
.lit-kern span{
  display:block; font-family:var(--sans); font-size:.7rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--gold); margin-bottom:5px;
}
.lied-liste{list-style:none; margin:8px 0 0; padding:0}
.lied-liste li{margin-bottom:7px; font-size:.97rem}
.l-nr{
  display:inline-block; background:var(--bg-2); border:1px solid var(--linie);
  border-radius:6px; padding:1px 8px; font-size:.8rem; font-weight:700;
  color:var(--blau); margin-right:7px;
}
@media (max-width:600px){
  .lit-teil{padding:22px 20px 18px 20px}
  .lit-teil::before{position:static; margin-bottom:10px}
}

/* Wochenvorschau mit Verstext */
.woche li{margin-bottom:1.3em}
.w-thema{
  font-weight:400; color:var(--gold); font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase; margin-left:6px;
}
.w-text{
  font-family:var(--serif); font-size:1rem; line-height:1.6;
  margin:4px 0 3px; color:var(--text);
}
.w-ref{font-size:.85rem; font-weight:600}

/* ---------- Zuspruch ---------- */
.zuspruch-layout{display:grid; gap:22px; max-width:820px}
.feld-hilfe{color:var(--text-2); font-size:.82rem; margin:6px 0 0}
.zuspruch-karte{border-left:3px solid var(--gold)}
.zuspruch-karte h3{
  font-size:.76rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold); margin:22px 0 7px; font-weight:700;
}
.klein-vers{font-size:clamp(1.15rem,1rem + .8vw,1.5rem); text-align:left; margin-left:0}
.zuspruch-karte .vers-ref{text-align:left}
.zuspruch-karte .eyebrow{margin-bottom:16px}
.nothilfe{
  background:color-mix(in srgb, #c0563f 12%, var(--karte));
  border:2px solid color-mix(in srgb, #c0563f 55%, transparent);
  border-radius:var(--radius); padding:22px 26px; margin-bottom:20px;
}
.nothilfe h3{color:#a8412c; margin-bottom:10px; font-size:1.1rem}
.not-nummern{font-size:1.15rem; letter-spacing:.02em}
.nr-wwdl b{color:var(--gold)}
.nr-wwdl{background:color-mix(in srgb, var(--gold) 10%, var(--bg-2))}
.pill-akzent{border-color:var(--gold); color:var(--gold); font-weight:600}
.pill-akzent:hover{background:color-mix(in srgb, var(--gold) 12%, transparent); border-color:var(--gold)}

/* ---------- Liedblock in der Andacht ---------- */
.liedblock{
  background:var(--bg-2); border:1px solid var(--linie); border-radius:var(--radius);
  padding:18px 20px; margin-bottom:14px;
}
.lb-kopf{display:flex; align-items:flex-start; gap:12px; margin-bottom:14px}
.lb-titel{margin:0 0 2px; font-family:var(--serif); font-size:1.08rem; font-weight:600;
  color:var(--text); text-transform:none; letter-spacing:0; display:block}
.lb-dichter{color:var(--text-2); font-size:.82rem; margin:0}
.lb-suche{margin:0; font-size:.92rem}
.lb-geschuetzt{
  font-size:.87rem; color:var(--text-2); background:var(--karte);
  border-radius:9px; padding:11px 14px; margin:12px 0 0;
}
.lb-text{margin-top:14px}
.lb-text summary{
  cursor:pointer; font-size:.8rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--blau); margin-bottom:10px;
}
.lb-strophe{
  font-family:var(--serif); font-size:1rem; line-height:1.7; white-space:pre-wrap;
  margin:0 0 12px; padding-left:34px; position:relative;
}
.lb-zahl{position:absolute; left:0; color:var(--gold); font-weight:700; font-family:var(--sans); font-size:.9rem}

/* Zwei-Klick-Videoeinbettung */
.video-halter{margin:0}
.video-start{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:var(--karte); border:1px solid var(--linie); border-radius:11px;
  padding:14px 18px; cursor:pointer; font:inherit; color:var(--text);
  transition:border-color .15s, background .15s;
}
.video-start:hover{border-color:var(--blau); background:color-mix(in srgb, var(--blau) 5%, var(--karte))}
.video-play{
  flex:none; width:42px; height:42px; border-radius:50%; background:var(--blau); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1rem; padding-left:3px;
}
html[data-theme="dark"] .video-play{color:#12181f}
@media (prefers-color-scheme: dark){html:not([data-theme="light"]) .video-play{color:#12181f}}
.video-text{display:flex; flex-direction:column; line-height:1.35}
.video-text strong{font-size:.95rem}
.video-text small{color:var(--text-2); font-size:.8rem}
.video-rahmen{position:relative; padding-bottom:56.25%; height:0; border-radius:11px; overflow:hidden; background:#000}
.video-rahmen iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.video-quelle{font-size:.79rem; color:var(--text-2); margin:8px 0 0}
.lit-anleitung{
  font-size:.89rem; color:var(--text-2); background:var(--bg-2);
  border-radius:9px; padding:11px 15px; margin:0 0 15px;
}
.lit-nachwort{font-size:.95rem; color:var(--text); margin:14px 0 0; font-style:italic}
.lit-stille{
  text-align:center; color:var(--text-2); font-size:.85rem; font-style:italic;
  margin:18px 0 0; padding-top:14px; border-top:1px dashed var(--linie);
}

.lied-video-halter:not(:empty){margin-top:14px}
.lied-video{cursor:pointer}