:root{
    --brand:#5a6ca8;
    --brand-dark:#48588c;
    --tint:#eef0f7;
    --ink:#3d4a70;
    --paper:#ffffff;
    --max:44rem;
  }
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:"Segoe UI",Tahoma,Verdana,system-ui,sans-serif;
    font-size:clamp(1rem,.95rem + .3vw,1.125rem);
    line-height:1.65;
  }
  .wrap{max-width:var(--max);margin-inline:auto;padding-inline:1.5rem}

  /* ---------- Hero (Flyer-Vorderseite) ---------- */
  .hero{
    position:relative;
    overflow:hidden;
    text-align:center;
    padding-top:3.5rem;
    background:var(--paper);
  }
  /* blasser Kreis oben links, wie auf dem Flyer */
  .hero::before{
    content:"";
    position:absolute;
    top:1.5rem;
    left:calc(50% - min(18rem, 42vw));
    width:min(11rem,30vw);
    height:min(11rem,30vw);
    background:var(--tint);
    border-radius:50%;
    z-index:0;
  }
  .hero > *{position:relative;z-index:1}
  .eyebrow{
    margin:0 0 1.75rem;
    font-size:clamp(1.15rem,1rem + 1.4vw,1.9rem);
    font-weight:800;
    letter-spacing:.02em;
    color:var(--brand);
    text-transform:uppercase;
  }
  .logo{width:min(15rem,55vw);height:auto;display:block;margin:0 auto}
  .org{
    margin:1.75rem 0 0;
    font-size:clamp(1rem,.9rem + .8vw,1.4rem);
    font-weight:700;
    letter-spacing:.03em;
    color:var(--brand);
    text-transform:uppercase;
  }
  .claim-band{
    position:relative;
    margin-top:3.5rem;
    padding:0 0 3rem;
    background:var(--tint);
  }
  .claim-band .wave{
    display:block;
    width:100%;
    height:clamp(3rem,9vw,6rem);
    background:var(--paper);
    fill:var(--tint);
  }
  .claim-band .wrap{padding-top:.5rem}
  .claim{
    margin:0;
    font-size:clamp(1.15rem,1rem + 1.4vw,1.9rem);
    font-weight:800;
    letter-spacing:.02em;
    color:var(--brand);
    text-transform:uppercase;
  }

  /* ---------- Inhalt (Flyer-Rückseite) ---------- */
  .content{
    position:relative;
    color:#fff;
    background:
      linear-gradient(180deg,rgba(90,108,168,.94) 0%,rgba(90,108,168,.70) 35%,rgba(72,88,140,.80) 70%,rgba(72,88,140,.96) 100%),
      url("haende.jpg") center/cover no-repeat;
    padding:4rem 0 3.5rem;
  }
  .content p{margin:0 0 1.5rem;text-align:justify;hyphens:auto}
  .content strong{font-weight:700;letter-spacing:.02em}
  .content h2{
    margin:2.5rem 0;
    font-size:clamp(1.15rem,1rem + 1.4vw,1.9rem);
    font-weight:800;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:#fff;
  }

  /* ---------- Fuß: Kontakt & Spendenkonto ---------- */
  .facts{
    display:grid;
    gap:2rem;
    margin-top:3rem;
    padding-top:2rem;
    border-top:1px solid rgba(255,255,255,.35);
    font-size:.9rem;
    line-height:1.7;
  }
  @media (min-width:34rem){
    .facts{grid-template-columns:1fr 1fr;gap:2.5rem}
    .facts .contact{text-align:right;border-right:1px solid rgba(255,255,255,.35);padding-right:2.5rem}
  }
  .facts h3{
    margin:0 0 .5rem;
    font-size:.9rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .facts p{margin:0;text-align:inherit}
  .facts a{color:#fff}
  .mail{cursor:pointer}

  footer{padding:1.5rem 0;text-align:center;font-size:.8rem;color:var(--brand)}
  footer nav{margin-top:.5rem}
  footer a{color:var(--brand);margin:0 .5rem}

  /* ---------- Rechtsseiten (Impressum, Datenschutz) ---------- */
  .legal-head{
    background:var(--tint);
    padding:2rem 0 1.75rem;
    border-bottom:1px solid rgba(90,108,168,.2);
  }
  .legal-head .wrap{display:flex;align-items:center;gap:1rem}
  .legal-head img{width:3.25rem;height:auto}
  .legal-head a{color:var(--brand);text-decoration:none;font-weight:700;letter-spacing:.03em;
    text-transform:uppercase;font-size:.95rem;line-height:1.3}
  .legal{padding:3rem 0 1rem}
  .legal h1{
    margin:0 0 2rem;
    font-size:clamp(1.4rem,1.2rem + 1.2vw,2rem);
    font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--brand);
  }
  .legal h2{
    margin:2.5rem 0 .75rem;
    font-size:clamp(1.05rem,1rem + .4vw,1.25rem);
    font-weight:700;color:var(--brand);
  }
  .legal h3{margin:1.75rem 0 .5rem;font-size:1rem;font-weight:700;color:var(--brand)}
  .legal p,.legal li{margin:0 0 1rem}
  .legal ul{padding-left:1.25rem}
  .legal a{color:var(--brand-dark)}
  .legal address{font-style:normal;margin:0 0 1rem}
  .legal .note{
    margin:2.5rem 0 0;padding:1rem 1.25rem;
    background:var(--tint);border-left:4px solid var(--brand);
    font-size:.9rem;
  }

  @media (prefers-reduced-motion:no-preference){
    html{scroll-behavior:smooth}
  }