:root{
  --gruen-dunkel:#2F4A38;
  --gruen:#446750;
  --petrol:#4D9DAD;
  --salbei:#A9C8B3;
  --bg:#F7F9F7;
  --surface:#FFFFFF;
  --text:#1E2B22;
  --text-muted:#56665B;
  --line:#DCE6DE;
  --accent:#2F4A38;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#141C17;
    --surface:#1B251F;
    --text:#E9EFEA;
    --text-muted:#A5B5A9;
    --line:#2C3A31;
    --accent:#A9C8B3;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.topbar{height:6px;background:linear-gradient(90deg,var(--gruen-dunkel) 0 25%,var(--gruen) 25% 50%,var(--petrol) 50% 75%,var(--salbei) 75%)}
main{
  flex:1;width:100%;max-width:1080px;margin:0 auto;
  padding:48px 16px;
  display:grid;gap:40px;align-items:center;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:820px){
  main{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px;padding:64px 32px}
}
.grafik{display:flex;justify-content:center}
.grafik .stl-aufbau{height:min(42vh,360px);width:auto;max-width:100%}
@media (min-width:820px){.grafik .stl-aufbau{height:min(72vh,560px)}}

.eyebrow{
  margin:0 0 12px;font-size:.8125rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--petrol);
}
h1{
  margin:0 0 20px;font-size:clamp(2rem,1.3rem + 3vw,3.25rem);line-height:1.1;font-weight:700;letter-spacing:-.02em;
  color:var(--accent);
}
.lead{margin:0 0 32px;font-size:1.1875rem;color:var(--text);max-width:36em}
.fakten{
  display:inline-grid;grid-template-columns:auto;gap:1px;
  margin:0;padding:0;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;
}
.fakten div{background:var(--surface);padding:16px 20px}
.fakten dt{font-size:.8125rem;color:var(--text-muted);margin-bottom:2px}
.fakten dd{margin:0;font-size:clamp(1.0625rem,.9rem + .8vw,1.25rem);font-weight:600;font-variant-numeric:tabular-nums}
.kacheln{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:0 0 32px}
@media (min-width:1060px){.kacheln{grid-template-columns:auto minmax(0,1fr)}}
.kacheln .fakten{display:grid}
.social{
  display:flex;align-items:center;gap:12px;min-width:0;
  margin:0;padding:12px 16px 12px 14px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);
  color:var(--text);text-decoration:none;
  transition:border-color .15s ease;
}
.social:hover{border-color:var(--petrol)}
.social:focus-visible{outline:2px solid var(--petrol);outline-offset:3px}
.social-icon{width:40px;height:40px;flex:none;color:var(--petrol)}
.social-text{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.social-label{font-size:.8125rem;color:var(--text-muted)}
.social-handle{font-weight:600;white-space:nowrap}
.social-arrow{width:18px;height:18px;flex:none;margin-left:auto;color:var(--text-muted)}
.social:hover .social-arrow{color:var(--petrol)}
.hinweis{margin:0;color:var(--text-muted);max-width:36em}
.hinweis a{color:var(--accent);font-weight:600;text-underline-offset:3px;white-space:nowrap}

footer{border-top:1px solid var(--line);font-size:.875rem;color:var(--text-muted)}
footer .inner{
  max-width:1080px;margin:0 auto;padding:20px 16px;
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
}
@media (min-width:820px){footer .inner{padding:20px 32px}}
footer nav{display:flex;gap:20px}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--petrol);outline-offset:3px;border-radius:2px}

/* Infografik „Kirche baut sich auf“ */
.stl-aufbau{display:block}
.stl-aufbau path.p{stroke:var(--bg)}
@media (prefers-color-scheme:dark){.stl-aufbau path.k{stroke:var(--salbei)}}
.stl-aufbau .p,.stl-aufbau .k{animation-duration:8s;animation-iteration-count:1;animation-fill-mode:both}
@keyframes stl-p0{0%,6.25%{transform:translateY(-320px);opacity:0;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}13.75%,100%{transform:translateY(0);opacity:1}}
.stl-aufbau .p0{animation-name:stl-p0}
@keyframes stl-p1{0%,11.50%{transform:translateY(-320px);opacity:0;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}19.00%,100%{transform:translateY(0);opacity:1}}
.stl-aufbau .p1{animation-name:stl-p1}
@keyframes stl-p2{0%,16.75%{transform:translateY(-320px);opacity:0;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}24.25%,100%{transform:translateY(0);opacity:1}}
.stl-aufbau .p2{animation-name:stl-p2}
@keyframes stl-p3{0%,22.00%{transform:translateY(-320px);opacity:0;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}29.50%,100%{transform:translateY(0);opacity:1}}
.stl-aufbau .p3{animation-name:stl-p3}
@keyframes stl-p4{0%,27.25%{transform:translateY(-320px);opacity:0;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}34.75%,100%{transform:translateY(0);opacity:1}}
.stl-aufbau .p4{animation-name:stl-p4}
@keyframes stl-p5{0%,32.50%{transform:translateY(-320px);opacity:0;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}40.00%,100%{transform:translateY(0);opacity:1}}
.stl-aufbau .p5{animation-name:stl-p5}
@keyframes stl-p6{0%,37.75%{transform:translateY(-320px);opacity:0;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}45.25%,100%{transform:translateY(0);opacity:1}}
.stl-aufbau .p6{animation-name:stl-p6}
@keyframes stl-p7{0%,43.00%{transform:translateY(-320px);opacity:0;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}50.50%,100%{transform:translateY(0);opacity:1}}
.stl-aufbau .p7{animation-name:stl-p7}
@keyframes stl-k0{0%,50.75%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.33,1,.68,1)}56.38%,100%{stroke-dashoffset:0}}
.stl-aufbau .k0{animation-name:stl-k0}
@keyframes stl-k1{0%,55.12%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.33,1,.68,1)}60.75%,100%{stroke-dashoffset:0}}
.stl-aufbau .k1{animation-name:stl-k1}
@media (prefers-reduced-motion:reduce){.stl-aufbau .p,.stl-aufbau .k{animation:none}}

/* Unterseiten (Impressum, Datenschutz) */
.kopf{width:100%;max-width:760px;margin:0 auto;padding:20px 16px 0}
@media (min-width:820px){.kopf{padding:24px 32px 0}}
.kopf a{font-size:.9375rem;font-weight:600;color:var(--accent);text-decoration:none}
.kopf a:hover{text-decoration:underline;text-underline-offset:3px}
main.legal{display:block;max-width:760px;padding-top:32px}
.legal h1{font-size:clamp(1.75rem,1.4rem + 1.6vw,2.5rem);margin-bottom:24px}
.legal h2{margin:40px 0 8px;font-size:1.25rem;line-height:1.3;color:var(--accent)}
.legal h3{margin:24px 0 4px;font-size:1.0625rem}
.legal p,.legal ul{margin:0 0 12px}
.legal ul{padding-left:1.25em}
.legal a{color:var(--accent);text-underline-offset:3px;overflow-wrap:anywhere}
.legal address{font-style:normal;margin:0 0 12px}
.angaben{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 24px;margin:0 0 24px}
.angaben dt{color:var(--text-muted);font-size:.9375rem;margin-top:10px}
.angaben dd{margin:0}
@media (min-width:600px){.angaben{grid-template-columns:max-content minmax(0,1fr)}.angaben dt{margin-top:0}}
footer nav a[aria-current]{color:var(--text);font-weight:600}