/* ============================================================================
   BBN-HILFE-OPFER v1.0 (Schicht 3 der Anlaufstellen-Seite
   /hilfe-fuer-opfer-von-narzissten/) | S535, A-2026-0242
   NUR der eigene Inhalt dieser Seite. Muster: bbn-ueber-anita.css (S471).
   Schriften und Grund liegen in Schicht 1, Kopf und Fuss in Schicht 2.
   ============================================================================ */
.bbn-hilfe{padding:64px 20px 40px}
.bbn-hilfe-inner{max-width:760px;margin:0 auto}
.bbn-hilfe-eyebrow{font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--bbn-gold-deep);margin:0 0 10px}
.bbn-hilfe-title{font-family:var(--bbn-edel);font-weight:500;font-size:46px;line-height:1.1;letter-spacing:-.02em;color:var(--bbn-midnight);margin:0 0 8px;text-wrap:balance}
.bbn-hilfe-rule{height:2px;width:64px;background:var(--bbn-gold);border:0;margin:0 0 34px}
.bbn-hilfe p{margin:0 0 16px;font-size:18px;line-height:1.65;text-wrap:pretty}
.bbn-hilfe-lead{font-size:20px;line-height:1.6}
.bbn-hilfe h2{font-weight:600;font-size:27px;line-height:1.3;margin:0 0 14px;color:var(--bbn-midnight)}
.bbn-hilfe h3{font-weight:600;font-size:21px;line-height:1.35;margin:26px 0 8px;color:var(--bbn-midnight)}
.bbn-hilfe section{margin:42px 0 0;scroll-margin-top:90px}
.bbn-hilfe a{text-decoration-thickness:1.5px;transition:color 180ms cubic-bezier(.22,.8,.36,1),text-decoration-color 180ms cubic-bezier(.22,.8,.36,1)}
.bbn-hilfe a:hover{color:var(--bbn-gold-deep);text-decoration-color:var(--bbn-gold-deep)}
.bbn-hilfe ul,.bbn-hilfe ol{margin:0 0 16px;padding-left:24px}
.bbn-hilfe li{margin:0 0 10px;font-size:18px;line-height:1.6}

/* Anitas Portrait im Einstieg */
.bbn-hilfe-portrait{margin:28px 0 26px;text-align:center}
.bbn-hilfe-portrait img{max-width:280px;width:100%;height:auto;border-radius:14px;box-shadow:0 10px 30px rgba(27,42,78,.16)}
.bbn-hilfe-portrait figcaption{margin:12px auto 0;max-width:520px;font-size:15px;line-height:1.5;color:var(--bbn-slate,#6C7480)}

/* Inhaltsverzeichnis */
.bbn-hilfe-toc{background:var(--bbn-cream);border:1px solid var(--bbn-gold-soft);border-radius:14px;padding:22px 26px 18px;margin:34px 0 0}
.bbn-hilfe-toc h2{font-size:20px;margin:0 0 12px}
.bbn-hilfe-toc ol{margin:0;padding-left:22px}
.bbn-hilfe-toc li{margin:0 0 7px;font-size:17px;line-height:1.5}

/* Krisen-Block, steht ganz oben und darf auffallen */
.bbn-hilfe-akut{background:#FFF6F3;border:1px solid #E8B9A8;border-left:4px solid #C25A38;border-radius:14px;padding:24px 26px 10px}
.bbn-hilfe-akut h2{margin:0 0 12px}
.bbn-hilfe-nummern{list-style:none;padding-left:0}
.bbn-hilfe-nummern li{padding-left:22px;position:relative}
.bbn-hilfe-nummern li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;border-radius:50%;background:#C25A38}

/* Die drei kostenlosen Angebote, je mit Bild davor.
   Das Bild sitzt in einem festen quadratischen Feld und passt sich darin ein
   (object-fit:contain), damit die drei sehr verschiedenen Seitenverhaeltnisse
   eine ruhige Reihe ergeben und kein Motiv beschnitten wird. */
.bbn-hilfe-angebote{list-style:none;padding-left:0}
.bbn-hilfe-angebote li{padding-left:0;position:relative;display:flex;gap:18px;align-items:flex-start;margin:0 0 24px}
.bbn-hilfe-angebote li::before{content:none}
.bbn-hilfe-marke{flex:0 0 150px;width:150px;height:150px;display:flex;align-items:center;justify-content:center;padding:8px;box-sizing:border-box;background:var(--bbn-cream);border:1px solid var(--bbn-gold-soft);border-radius:12px;text-decoration:none;transition:border-color 180ms cubic-bezier(.22,.8,.36,1)}
.bbn-hilfe-marke:hover{border-color:var(--bbn-gold)}
/* WICHTIG (S535 im Browser gemessen): width/height MUESSEN 100% sein, nicht auto.
   Mit "auto" hat ein noch nicht geladenes Bild die Groesse 0, und ein Bild der
   Groesse 0 kommt nie in den Sichtbereich, also loest das verzoegerte Laden nie
   aus. Zwei von drei Bildern blieben so dauerhaft unsichtbar. */
.bbn-hilfe-marke img{width:100%;height:100%;object-fit:contain;display:block;border-radius:6px}
/* S536: border-radius 6px, damit ein Foto (Erstgespraech, Volker-Bild 9.png) in den 12px-Goldrahmen passt. Bei freigestellten Bildern (Test, eBook) ohne sichtbare Wirkung. */
.bbn-hilfe-angebot-text{flex:1 1 auto;min-width:0}

/* Die Anlaufstellen als geordnete Liste */
.bbn-hilfe-stellen li{margin:0 0 14px}
.bbn-hilfe-stand{font-size:15px;color:var(--bbn-slate,#6C7480);margin-top:-4px}

.bbn-hilfe-hinweis{border-top:1px solid var(--bbn-gold-soft);padding-top:26px}
.bbn-hilfe-hinweis p{font-size:16px;line-height:1.6}
.bbn-hilfe-signatur{font-family:var(--bbn-edel);font-style:italic;font-size:22px;color:var(--bbn-midnight);margin-top:34px}

@media(max-width:600px){
  .bbn-hilfe{padding:44px 16px 32px}
  .bbn-hilfe-title{font-size:34px}
  .bbn-hilfe-lead{font-size:18px}
  .bbn-hilfe h2{font-size:23px}
  .bbn-hilfe h3{font-size:19px}
  .bbn-hilfe-toc{padding:18px 16px 14px}
  .bbn-hilfe-akut{padding:20px 16px 8px}
  .bbn-hilfe ul,.bbn-hilfe ol{padding-left:20px}
  .bbn-hilfe-angebote{padding-left:0}
  .bbn-hilfe-angebote li{gap:12px;margin:0 0 20px}
  .bbn-hilfe-marke{flex:0 0 104px;width:104px;height:104px;padding:6px}
  .bbn-hilfe-portrait img{max-width:230px}
}