
:root{
  --navy:#16242f; --navy2:#203544; --gold:#c9a35d; --cream:#f7f2e8;
  --paper:#fffdfa; --ink:#17232d; --muted:#65717a; --line:#e6dfd2;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.55}
a{color:inherit}
img{max-width:100%;display:block}

header{
  min-height:76px;
  padding:10px max(20px,calc((100% - 1160px)/2));
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:rgba(255,253,250,.98); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;white-space:nowrap}
.brand img{width:54px;height:54px;object-fit:contain}
.brand span{font-size:18px;letter-spacing:.01em}
.menu{display:none;border:1px solid var(--line);background:white;border-radius:10px;width:44px;height:44px;font-size:24px}
header nav{display:flex;align-items:center;gap:24px}
header nav a{text-decoration:none;font-weight:700;font-size:14px;white-space:nowrap}
.donate-link{background:var(--gold);padding:10px 16px;border-radius:7px}

main{min-height:70vh}
.hero{
  max-width:1160px;margin:0 auto;padding:72px 24px 64px;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.65fr);gap:54px;align-items:center
}
.eyebrow{font-size:12px;letter-spacing:.18em;font-weight:900;color:var(--gold);margin:0 0 14px}
.hero h1,.page-hero h1,.donate-hero h1{
  font-family:Georgia,serif;font-weight:700;line-height:1.02;margin:0 0 22px;
  font-size:clamp(44px,5.4vw,72px);letter-spacing:-.02em
}
.hero h1 em{color:var(--gold);font-style:normal}
.lead,.big{font-size:20px;color:#45525b;max-width:760px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 18px}
.button{display:inline-block;text-decoration:none;font-weight:800;padding:13px 18px;border-radius:7px}
.primary{background:var(--gold);color:#161616}
.ghost{border:1px solid #bdb7ab;background:white}
.launch,.fine{font-size:13px;color:var(--muted)}
.logo-card{background:var(--navy);color:white;padding:34px;border-radius:16px;text-align:center;box-shadow:0 16px 40px rgba(0,0,0,.12)}
.logo-card img{width:220px;margin:0 auto 20px;background:var(--cream);border-radius:50%;padding:6px}
.logo-card h2{font-family:Georgia,serif;font-size:29px;margin:0 0 10px}
.logo-card p{color:#d3dbe0;margin:0}

.quick,.cards,.leaders{
  max-width:1160px;margin:0 auto 64px;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px
}
.quick article,.cards article,.leaders article{padding:28px;border:1px solid var(--line);background:white;border-radius:12px}
.quick span,.cards b{color:var(--gold);font-weight:900}
.quick h2,.cards h2{font-size:24px;margin:8px 0}
.quick a{font-weight:800;text-decoration:none}

.statement{background:var(--navy);color:white;text-align:center;padding:72px 24px}
.statement h2{font-family:Georgia,serif;font-size:42px;margin:8px 0 12px}
.statement p:last-child{color:#d7dde1;margin:0}

.page-hero,.donate-hero{background:var(--navy);color:white;padding:86px max(24px,calc((100% - 1000px)/2))}
.page-hero p,.donate-hero p{max-width:760px;color:#d6dde1}
.content,.story-layout{max-width:950px;margin:62px auto;padding:0 24px}
.content p{font-size:18px}
.content li{margin:9px 0}
.callout{border-left:5px solid var(--gold);background:var(--cream);padding:22px;margin:28px 0;font-size:19px;border-radius:0 8px 8px 0}
.cards{grid-template-columns:repeat(2,1fr);margin-top:52px}
.story-layout{display:grid;grid-template-columns:280px 1fr;gap:52px;align-items:center}
.story-layout img{width:100%}
blockquote{font-family:Georgia,serif;font-size:31px;border-left:4px solid var(--gold);margin:28px 0;padding-left:20px}
.leaders{grid-template-columns:repeat(4,1fr);margin-top:52px}
.leaders span{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--navy);color:var(--gold);font-weight:900}
.leaders h2{font-size:20px}
.donate-hero{text-align:center}
.donate-hero .lead{margin:0 auto;color:#d6dde1}
.zelle{max-width:620px;margin:32px auto;background:white;color:var(--ink);padding:28px;border-radius:12px}
.zelle small{display:block;color:var(--muted);font-weight:900;letter-spacing:.12em}
.zelle strong{display:block;font-size:clamp(18px,4vw,30px);margin:12px 0;word-break:break-word}
.zelle button{border:0;background:var(--gold);font-weight:800;padding:12px 16px;border-radius:7px}

footer{
  background:#10191f;color:#d8dde0;padding:38px max(24px,calc((100% - 1160px)/2));
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;font-size:13px
}

/* PHONE */
@media(max-width:800px){
  header{min-height:70px;padding:8px 14px}
  .brand img{width:46px;height:46px}
  .brand span{font-size:16px}
  .menu{display:grid;place-items:center;flex:0 0 auto}
  header nav{
    display:none; position:absolute; top:70px; left:0; right:0;
    background:var(--paper); padding:14px; flex-direction:column; align-items:stretch;
    gap:8px; border-bottom:1px solid var(--line); box-shadow:0 12px 30px rgba(0,0,0,.08)
  }
  header nav.open{display:flex}
  header nav a{font-size:16px;padding:11px 12px;border-radius:8px}
  header nav a:not(.donate-link){background:#fff}
  .donate-link{text-align:center}

  .hero{
    display:block; padding:42px 18px 36px; min-height:0
  }
  .hero h1,.page-hero h1,.donate-hero h1{
    font-size:42px; line-height:1.04; margin-bottom:18px
  }
  .lead,.big{font-size:18px}
  .actions{display:grid;grid-template-columns:1fr;gap:10px;margin:24px 0 14px}
  .button{text-align:center;width:100%}
  .logo-card{margin-top:28px;padding:24px}
  .logo-card img{width:155px;margin-bottom:16px}
  .logo-card h2{font-size:25px}

  .quick,.cards,.leaders{grid-template-columns:1fr;padding:0 18px;margin-bottom:44px}
  .quick article,.cards article,.leaders article{padding:22px}
  .statement{padding:52px 20px}
  .statement h2{font-size:34px}

  .page-hero,.donate-hero{padding:58px 20px}
  .content,.story-layout{margin:44px auto;padding:0 20px}
  .cards{margin-top:38px}
  .story-layout{display:block}
  .story-layout img{width:190px;margin:0 auto 28px}
  blockquote{font-size:27px}
  .leaders{margin-top:38px}
  footer{grid-template-columns:1fr;padding:34px 20px}
}
