/* ============================================================
   PVSR — Pfälzischer Verband für Soziale Rechtspflege e.V.
   Würdevoll · vertrauenswürdig · menschlich · justiznah
   Newsreader (Display) + Hanken Grotesk (Text) · Petrol / Sand / Messing
   ============================================================ */
:root{
  --sand:#f4f1ea;
  --sand-2:#eae4d8;
  --card:#fbf9f4;
  --ink:#20262a;
  --ink-soft:#4a5258;
  --ink-faint:#8b9197;
  --line:#dcd5c8;
  --petrol:#1d4e4f;       /* tiefes Petrol = Vertrauen/Justiz */
  --petrol-deep:#143a3c;
  --petrol-soft:#2f6a6a;
  --brass:#a8773a;        /* warmes Messing = Menschlichkeit */
  --brass-soft:#c1934d;
  --maxw:1200px;
  --measure:68ch;
  --sans:"Hanken Grotesk",system-ui,sans-serif;
  --display:"Newsreader",Georgia,serif;
  --shadow:0 1px 0 rgba(0,0,0,.02), 0 22px 48px -32px rgba(20,38,42,.5);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sand);color:var(--ink);
  font-family:var(--sans);font-size:18px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--petrol);text-decoration:none}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:var(--brass-soft)}
.prose a:hover{color:var(--brass)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,52px)}

.eyebrow{font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass);display:inline-block}

/* ---------- Header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(244,241,234,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-head__in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:76px;padding-block:10px}
.brand{display:flex;align-items:center;gap:14px;color:var(--ink)}
.brand__mark{font-family:var(--display);font-weight:500;font-size:1.1rem;letter-spacing:.02em;
  width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;color:var(--sand);
  background:var(--petrol);border-radius:50%}
.brand__txt{display:flex;flex-direction:column;line-height:1.16}
.brand__name{font-family:var(--sans);font-weight:700;font-size:.95rem;letter-spacing:.04em;color:var(--ink)}
.brand__sub{font-size:.74rem;color:var(--ink-faint)}
.nav{display:flex;align-items:center;gap:clamp(12px,2vw,28px);flex-wrap:wrap;justify-content:flex-end}
.nav__link,.nav__group{font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.04em;
  color:var(--ink-soft);position:relative;padding-block:6px;cursor:pointer;white-space:nowrap}
.nav__link:hover{color:var(--petrol)}
.nav__link.is-active{color:var(--ink)}
.nav__link.is-active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brass)}
.nav__group{position:relative}
.nav__sub{position:absolute;top:100%;right:0;background:var(--card);border:1px solid var(--line);
  box-shadow:var(--shadow);display:none;flex-direction:column;min-width:240px;padding:8px;z-index:60;border-radius:6px}
.nav__group:hover .nav__sub{display:flex}
.nav__sub a{font-size:.84rem;color:var(--ink-soft);padding:9px 12px;border-radius:4px}
.nav__sub a:hover{background:var(--sand-2);color:var(--petrol)}

/* ---------- Hero ---------- */
.hero{background:var(--petrol);color:var(--sand);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(80% 120% at 88% -10%,rgba(193,147,77,.35),transparent 55%),
  radial-gradient(70% 90% at 0% 100%,rgba(47,106,106,.6),transparent 60%)}
.hero::after{content:"";position:absolute;inset:0;opacity:.06;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 39h40M39 0v40' stroke='%23ffffff' stroke-width='.5' fill='none'/%3E%3C/svg%3E")}
.hero__in{position:relative;padding-block:clamp(64px,11vw,140px)}
.hero__eyebrow{font-family:var(--sans);font-weight:600;font-size:.8rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brass-soft);margin:0 0 22px}
.hero__title{font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,6.5vw,5.4rem);
  line-height:1.04;letter-spacing:-.01em;margin:0;max-width:18ch}
.hero__title em{font-style:italic;color:var(--brass-soft)}
.hero__lede{font-size:clamp(1.05rem,1.7vw,1.32rem);max-width:56ch;margin:26px 0 34px;
  color:rgba(244,241,234,.85);line-height:1.65}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--sans);font-weight:600;
  font-size:.86rem;letter-spacing:.02em;color:var(--petrol-deep);background:var(--brass-soft);
  padding:14px 26px;border:1.5px solid var(--brass-soft);border-radius:4px;transition:.22s}
.btn:hover{background:var(--sand);border-color:var(--sand)}
.btn--ghost{background:transparent;color:var(--sand);border-color:rgba(244,241,234,.4)}
.btn--ghost:hover{background:rgba(244,241,234,.1);border-color:var(--sand);color:var(--sand)}

/* ---------- Foto-Hero (KI-Illustration als Hintergrund) ---------- */
.hero--photo{position:relative;overflow:hidden}
.hero--photo::before,.hero--photo::after{content:none}
.hero--photo .hero__media{position:absolute;inset:0;z-index:0}
.hero--photo .hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero--photo .hero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(95deg,rgba(18,55,57,.96) 0%,rgba(29,78,79,.88) 44%,rgba(20,58,60,.58) 100%)}
.hero--photo .hero__in{position:relative;z-index:2}

/* ---------- Triptychon „Arbeit & Wiedereingliederung" ---------- */
.triptych{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.trip{margin:0}
.trip__frame{display:block;overflow:hidden;border-radius:8px;border:1px solid var(--line);
  aspect-ratio:16/10;background:var(--sand-2)}
.trip__frame img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.trip:hover .trip__frame img{transform:scale(1.05)}
.trip figcaption{font-family:var(--sans);font-weight:600;font-size:.95rem;color:var(--ink-soft);margin-top:13px}
.trip__note{margin-top:22px;color:var(--ink-faint);font-size:.92rem;max-width:var(--measure);line-height:1.6}
.trip__ill{display:inline-block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);border:1px solid var(--line);padding:2px 9px;border-radius:20px;margin-left:6px}
@media(max-width:760px){.triptych{grid-template-columns:1fr}}

/* ---------- Values / Stats ---------- */
.section--values{padding-top:clamp(40px,6vw,72px)}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
.value{padding:28px 30px;background:var(--card);border:1px solid var(--line);border-radius:8px;
  border-top:3px solid var(--brass)}
.value__n{display:block;font-family:var(--display);font-weight:500;font-size:clamp(2.4rem,4vw,3.4rem);
  line-height:1;color:var(--petrol);letter-spacing:-.01em}
.value__l{display:block;margin-top:12px;color:var(--ink-soft);font-size:.98rem;line-height:1.5}

/* ---------- Sections / Cards ---------- */
.section{padding-block:clamp(40px,6vw,76px)}
.section+.section{border-top:1px solid var(--line)}
.section__head{margin-bottom:clamp(26px,4vw,44px);max-width:var(--measure)}
.section__title{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,4vw,2.9rem);
  line-height:1.08;letter-spacing:-.01em;margin:.4rem 0 0;color:var(--ink)}
.cards{display:grid;gap:clamp(20px,3vw,34px)}
.cards--grid{grid-template-columns:repeat(3,1fr)}
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:8px;overflow:hidden;transition:.28s;box-shadow:var(--shadow)}
.card:hover{transform:translateY(-3px);border-color:var(--petrol-soft)}
.card__media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--sand-2)}
.card__media img{width:100%;height:100%;object-fit:cover;object-position:center 28%;transition:transform .5s}
.card:hover .card__media img{transform:scale(1.04)}
.card__media--empty{background:linear-gradient(135deg,var(--petrol) 0%,var(--petrol-deep) 100%);position:relative}
.card__media--empty::after{content:"PVSR";position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display);font-style:italic;font-size:2rem;color:rgba(244,241,234,.2)}
.card__body{padding:24px 26px 28px;display:flex;flex-direction:column;gap:9px;flex:1}
.card__kicker{font-family:var(--sans);font-weight:600;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass)}
.card__title{font-family:var(--display);font-weight:500;font-size:1.4rem;line-height:1.18;color:var(--ink)}
.card__ex{color:var(--ink-soft);font-size:.96rem;line-height:1.55;flex:1}
.card__more{font-family:var(--sans);font-weight:600;font-size:.78rem;color:var(--petrol);margin-top:4px}
.card:hover .card__more{color:var(--brass)}

.section__more{margin-top:clamp(22px,3vw,34px)}
.section__more a{font-family:var(--sans);font-weight:600;font-size:.92rem;color:var(--petrol)}
.section__more a:hover{color:var(--brass)}

/* Bezirksvereine */
.bvs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.bv{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;
  background:var(--card);border:1px solid var(--line);border-radius:8px;transition:.22s}
.bv:hover{background:var(--petrol);border-color:var(--petrol)}
.bv__name{font-family:var(--display);font-size:1.35rem;color:var(--ink)}
.bv:hover .bv__name{color:var(--sand)}
.bv__go{font-size:1.2rem;color:var(--brass)}
.bv:hover .bv__go{color:var(--brass-soft)}

.contact-card{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--brass);
  border-radius:8px;padding:30px 34px;max-width:var(--measure)}

/* ---------- Page hero (inner) ---------- */
.phero{background:var(--sand-2);border-bottom:1px solid var(--line)}
.phero__in{padding-block:clamp(40px,6vw,76px);max-width:var(--maxw)}
.phero .eyebrow{margin-bottom:16px}
.phero__title{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,5.5vw,4rem);
  line-height:1.06;letter-spacing:-.01em;margin:0;max-width:22ch;color:var(--ink)}
.phero__media{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,52px)}
.phero__media img{width:100%;max-height:460px;object-fit:cover;margin-top:6px;border:1px solid var(--line);border-radius:6px}

/* ---------- Article ---------- */
.article{display:grid;grid-template-columns:1fr;gap:48px;padding-block:clamp(40px,6vw,76px)}
.article:has(.toc){grid-template-columns:240px 1fr}
.article__body{max-width:var(--measure);min-width:0}
.toc{position:sticky;top:100px;align-self:start;font-family:var(--sans);font-size:.86rem;
  border-top:2px solid var(--petrol);padding-top:14px}
.toc__h{font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-size:.7rem;margin-bottom:12px}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:t;display:flex;flex-direction:column;gap:9px}
.toc li{counter-increment:t}
.toc li a{color:var(--ink-soft);display:block;line-height:1.35}
.toc li a::before{content:counter(t,decimal-leading-zero);color:var(--brass);font-weight:700;margin-right:10px}
.toc li a:hover{color:var(--petrol)}

.sec-h{font-family:var(--display);color:var(--ink);line-height:1.14;letter-spacing:-.005em}
.sec-h--2{font-weight:500;font-size:clamp(1.7rem,3.2vw,2.4rem);margin:2.2em 0 .5em;padding-top:.5em;border-top:1px solid var(--line)}
.sec-h--2 .eyebrow{color:var(--brass);margin-right:.5em}
.sec-h--3{font-weight:600;font-size:1.35rem;margin:1.7em 0 .45em}
.sec-h--4{font-weight:600;font-size:1.12rem;margin:1.4em 0 .35em;color:var(--ink-soft)}

.prose{font-size:1.05rem;line-height:1.78;color:var(--ink)}
.prose--lead{font-size:1.2rem;line-height:1.7;color:var(--ink-soft);max-width:var(--measure)}
.prose--lead p:first-child{font-family:var(--display);font-size:1.35rem;line-height:1.5;color:var(--ink)}
.prose>:first-child{margin-top:0}
.prose p{margin:0 0 1.3em}
.prose h5,.prose h6{font-family:var(--display);font-weight:600;font-size:1.18rem;margin:1.6em 0 .4em}
.prose strong,.prose b{font-weight:700}
.prose em,.prose i{font-style:italic}
.prose ul,.prose ol{margin:0 0 1.3em;padding-left:1.3em}
.prose li{margin:.4em 0}
.prose blockquote{margin:1.6em 0;padding:6px 0 6px 26px;border-left:3px solid var(--brass);
  font-family:var(--display);font-style:italic;font-size:1.28rem;line-height:1.45;color:var(--petrol-deep)}
.prose table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:.95rem}
.prose td,.prose th{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.prose th{background:var(--sand-2);font-weight:600}
.prose img{margin:1.5em 0;border:1px solid var(--line);border-radius:4px}

.fig{margin:2em 0}
.fig__frame{display:block;overflow:hidden;background:var(--sand-2);border:1px solid var(--line);border-radius:6px}
.fig img{width:100%;display:block;transition:transform .6s}
.fig:hover img{transform:scale(1.02)}
.fig--wide{margin-inline:clamp(-20px,-5vw,-100px)}
.fig figcaption{font-family:var(--sans);font-size:.82rem;line-height:1.5;color:var(--ink-faint);margin-top:10px}
.btn-row{margin:1.8em 0}
.btn-row .btn{color:var(--sand);background:var(--petrol);border-color:var(--petrol)}
.btn-row .btn:hover{background:var(--petrol-deep);border-color:var(--petrol-deep)}

/* ---------- Footer ---------- */
.site-foot{background:var(--petrol-deep);color:var(--sand);margin-top:60px;padding-block:54px 28px}
.site-foot__in{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;
  padding-bottom:32px;border-bottom:1px solid rgba(244,241,234,.16)}
.site-foot .brand__name{font-family:var(--display);font-weight:400;font-size:1.45rem;color:var(--sand)}
.site-foot__tag{color:rgba(244,241,234,.6);margin-top:6px}
.site-foot__meta{text-align:right;font-size:.86rem}
.site-foot__meta a{color:var(--brass-soft)}
.site-foot__legal{margin-top:12px}
.site-foot__legal a{color:rgba(244,241,234,.7);font-size:.78rem;font-weight:600;letter-spacing:.04em}
.site-foot__legal a:hover{color:var(--sand)}
.site-foot__fine{font-size:.74rem;color:rgba(244,241,234,.42);margin-top:22px;line-height:1.6;max-width:84ch}

@media(max-width:860px){
  body{font-size:17px}
  .article:has(.toc){grid-template-columns:1fr}
  .toc{position:static}
  .values,.cards--grid,.bvs{grid-template-columns:1fr}
  .nav{display:none}
  .fig--wide{margin-inline:0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}