/* ============================================================
   SCHMERZ VERSTEHEN – Lexikon / Wissen (gemeinsame Styles)
   Wird von lexikon.html und allen Artikel-Seiten geladen.
   Farben & Typografie identisch zur Startseite (index.html).
   ============================================================ */
:root{
  --gruen:#CBD1B7; --gruen-tief:#39442D; --creme:#F1EEE3; --creme-hell:#EDEBDD;
  --rose:#C58974; --rose-tief:#B3735E; --rose-hell:#E3B9AA; --ink:#2A2A20;
  --linie:rgba(42,42,32,.16); --linie-hell:rgba(237,235,221,.20);
  --f-display:"Hanken Grotesk", system-ui, sans-serif;
  --f-text:"Newsreader", Georgia, serif;
  --mw:1160px; --mw-text:46rem;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ font-family:var(--f-text); color:var(--ink); background:var(--creme);
  line-height:1.62; font-size:1.18rem; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection{ background:var(--ink); color:var(--gruen); }
h1,h2,h3,.eyebrow,.wordmark,.btn,nav a,.abk{ font-family:var(--f-display); }
h1,h2,h3{ font-weight:800; letter-spacing:-.02em; line-height:1.12; }
a{ color:inherit; }
img{ max-width:100%; display:block; }

.wrap{ width:100%; max-width:var(--mw); margin-inline:auto; padding-inline:clamp(1.25rem,5vw,3rem); }
.measure{ max-width:var(--mw-text); }
.eyebrow{ font-size:.82rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; display:inline-block; margin-bottom:1.4rem; opacity:.72; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.55rem; font-weight:700; font-size:1rem; letter-spacing:-.01em;
  white-space:nowrap; padding:.95rem 1.6rem; border-radius:999px; border:1.5px solid var(--ink);
  background:var(--rose); color:var(--ink); cursor:pointer; text-decoration:none;
  transition:transform .18s ease, background .18s ease, color .18s ease; }
.btn:hover{ transform:translateY(-2px); background:var(--rose-tief); }
.btn .arrow{ transition:transform .18s ease; }
.btn:hover .arrow{ transform:translateX(3px); }

/* ---------- Header (identisch zur Startseite) ---------- */
header#top{ position:sticky; top:0; z-index:50; background:var(--gruen); border-bottom:1px solid transparent; transition:box-shadow .25s ease, border-color .25s ease; }
header#top.scrolled{ box-shadow:0 6px 24px rgba(42,42,32,.12); border-color:var(--linie); }
.navbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.9rem; }
.wordmark{ font-weight:800; font-size:1.18rem; letter-spacing:-.02em; text-decoration:none; display:inline-flex; align-items:center; gap:.55rem; color:var(--ink); }
.wordmark .dot{ width:.62rem; height:.62rem; border-radius:50%; background:var(--rose); display:inline-block; }
nav.links{ display:flex; align-items:center; gap:2rem; }
nav.links a:not(.btn){ font-weight:600; font-size:.98rem; text-decoration:none; letter-spacing:-.01em; padding-bottom:2px; border-bottom:2px solid transparent; transition:border-color .18s; }
nav.links a:not(.btn):hover{ border-color:var(--ink); }
nav.links a[aria-current="page"]{ border-color:var(--ink); }
@media(max-width:820px){ nav.links .link-hide{ display:none; } }
@media(max-width:560px){ .navbar{ gap:.6rem; } .navbar .wordmark{ font-size:1.02rem; } header .btn{ padding:.6rem 1.05rem; font-size:.9rem; } }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ padding-top:clamp(1.4rem,3vw,2rem); font-family:var(--f-display); font-size:.9rem; opacity:.68; }
.breadcrumb a{ text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; text-underline-offset:3px; }
.breadcrumb .sep{ margin:0 .5rem; }

/* ---------- Artikel ---------- */
.article{ padding-block:clamp(1.4rem,3vw,2.2rem) clamp(3.5rem,8vw,6rem); }
.article-head{ max-width:var(--mw-text); }
.article-head h1{ font-size:clamp(2.1rem,5vw,3.4rem); }
.article-lead{ margin-top:1.5rem; font-size:clamp(1.2rem,2.3vw,1.42rem); opacity:.92; }
.article-body{ max-width:var(--mw-text); margin-top:clamp(2.4rem,5vw,3.4rem); }
.article-body h2{ font-size:clamp(1.5rem,3vw,2rem); margin-top:2.8rem; margin-bottom:1rem; }
.article-body h3{ font-size:1.28rem; margin-top:1.8rem; margin-bottom:.6rem; }
.article-body p{ margin-bottom:1.2rem; }
.article-body ul{ margin:0 0 1.4rem 1.2rem; }
.article-body li{ margin-bottom:.6rem; padding-left:.3rem; }
.article-body strong{ font-weight:600; }
.article-body a:not(.btn){ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; }
.article-body a:not(.btn):hover{ color:var(--rose-tief); }

/* ---------- Callout / Merksatz ---------- */
.callout{ background:var(--gruen); border:1.5px solid var(--ink); border-radius:16px;
  padding:clamp(1.3rem,3vw,1.8rem); margin:2.2rem 0; font-family:var(--f-display); font-weight:600;
  font-size:1.12rem; line-height:1.42; letter-spacing:-.01em; }
.callout .lbl{ display:block; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; opacity:.55; margin-bottom:.5rem; font-weight:700; }

/* ---------- CTA-Box ---------- */
.cta-box{ background:var(--gruen-tief); color:var(--creme-hell); border-radius:20px; padding:clamp(2rem,5vw,3rem); margin-top:clamp(3rem,6vw,4rem); }
.cta-box .eyebrow{ color:var(--rose-hell); opacity:.95; }
.cta-box h2{ font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:.8rem; }
.cta-box p{ max-width:34rem; opacity:.9; margin-bottom:1.6rem; }

/* ---------- Verwandte Begriffe ---------- */
.related{ max-width:var(--mw-text); margin-top:clamp(2.6rem,5vw,3.4rem); padding-top:2rem; border-top:1px solid var(--linie); }
.related h2{ font-size:1.1rem; margin-bottom:1rem; letter-spacing:-.01em; }
.related-list{ display:flex; flex-wrap:wrap; gap:.7rem; }
.related-list a{ font-family:var(--f-display); font-weight:600; font-size:.96rem; text-decoration:none;
  padding:.55rem 1rem; border:1.5px solid var(--ink); border-radius:999px; transition:background .18s, color .18s; }
.related-list a:hover{ background:var(--ink); color:var(--creme-hell); }

/* ---------- Hub / Übersicht ---------- */
.hub-hero{ padding-block:clamp(2.6rem,6vw,4.5rem) clamp(1rem,3vw,2rem); }
.hub-hero h1{ font-size:clamp(2.3rem,6vw,4rem); max-width:16ch; }
.hub-hero p{ margin-top:1.4rem; font-size:clamp(1.15rem,2.2vw,1.35rem); max-width:38rem; opacity:.9; }
.hub-grid{ padding-bottom:clamp(3rem,7vw,5rem); display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:1.2rem; }
.term-card{ background:var(--creme); border:1.5px solid var(--ink); border-radius:18px; padding:clamp(1.4rem,3vw,1.9rem);
  display:flex; flex-direction:column; box-shadow:6px 7px 0 var(--ink); transition:transform .18s ease; }
a.term-card{ text-decoration:none; color:var(--ink); }
a.term-card:hover{ transform:translate(-2px,-2px); }
.term-card .abk{ font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.55; }
.term-card h2{ font-size:1.4rem; margin:.5rem 0 .7rem; line-height:1.15; overflow-wrap:break-word; hyphens:auto; }
.term-card p{ font-size:1.05rem; opacity:.9; flex:1; }
.term-card .more{ margin-top:1.1rem; font-family:var(--f-display); font-weight:700; font-size:.95rem; display:inline-flex; align-items:center; gap:.4rem; }
.term-card .more .arrow{ transition:transform .18s ease; }
a.term-card:hover .more .arrow{ transform:translateX(3px); }
.term-card--soon{ opacity:.7; box-shadow:none; background:transparent; }
.term-card--soon .tag{ margin-top:1.1rem; font-family:var(--f-display); font-weight:700; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; opacity:.6; }

/* ---------- Footer (identisch zur Startseite) ---------- */
footer{ background:var(--gruen-tief); color:var(--creme-hell); padding-block:clamp(3rem,7vw,4.5rem); }
footer a{ color:var(--creme-hell); }
.foot-top{ display:flex; flex-wrap:wrap; gap:2rem 3rem; justify-content:space-between; align-items:flex-start; }
.foot-brand .wordmark{ color:var(--creme-hell); font-size:1.3rem; }
.foot-brand .dot{ background:var(--rose-hell); }
.foot-brand p{ margin-top:.8rem; font-size:1rem; max-width:26rem; opacity:.85; }
.foot-cols{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem 2.6rem; }
.foot-col{ display:grid; gap:.55rem; align-content:start; }
.foot-h{ font-family:var(--f-display); font-weight:700; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; opacity:.55; margin-bottom:.2rem; }
.foot-col a{ font-family:var(--f-display); font-weight:600; font-size:1rem; text-decoration:none; opacity:.9; }
.foot-col a:hover{ color:var(--rose-hell); }
.foot-social{ display:flex; gap:1.2rem; margin-top:1rem; }
.foot-social a{ font-family:var(--f-display); font-weight:600; font-size:.95rem; text-decoration:none; opacity:.85; }
.foot-social a:hover{ color:var(--rose-hell); }
.disclaimer{ margin-top:clamp(2.4rem,5vw,3.2rem); padding-top:1.6rem; border-top:1px solid var(--linie-hell); font-size:.92rem; line-height:1.5; opacity:.8; max-width:54rem; }
.copy{ margin-top:1.2rem; font-family:var(--f-display); font-size:.9rem; opacity:.65; }
.hub-outro{ padding-bottom:clamp(3.5rem,8vw,6rem); }