/* Impressum und Datenschutz – Werte aus DESIGN.md (Sonnenuntergang am Sihlsee) */
@import url(/fonts/schriften.css);
:root{
  --logo-tief:#0070ad;
  --logo-blau:#0083c3;
  --logo-mittel:#7bc8e3;
  --blau-text:#006fa6;
  --apricot:#ffc58f;
  --abendrot:#ff8f63;
  --sonne:#ffd98f;
  --tinte:#141414;
  --grau:#555b5e;
  --hell:#eef7fb;
  --groovy:"Shrikhand",Georgia,serif;
  --sans:"Figtree",system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--tinte);font:400 18px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--blau-text);text-underline-offset:3px}
a:hover{color:var(--tinte)}
:focus-visible{outline:3px solid var(--tinte);outline-offset:3px}
.wrap{width:min(760px,100% - 40px);margin-inline:auto}

/* Kopf: nur der blaue Teil des Verlaufs, darum weisse Schrift */
.kopf{background:
    radial-gradient(45% 80% at 0% 0%,var(--logo-tief) 0%,transparent 70%),
    radial-gradient(45% 80% at 100% 0%,var(--logo-tief) 0%,transparent 70%),
    linear-gradient(180deg,var(--logo-blau) 0%,#2f9fd6 100%);
  color:#fff;padding:22px 0 clamp(48px,8vw,80px)}
.kopf .leiste{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:clamp(36px,6vw,64px)}
.kopf .logo img{width:clamp(96px,14vw,128px);height:auto;display:block}
.pille{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border:1.5px solid rgba(255,255,255,.9);border-radius:999px;color:#fff;text-decoration:none;font:500 16px var(--sans);transition:background .2s,color .2s}
.pille:hover{background:#fff;color:var(--tinte)}
h1,h2{font-family:var(--groovy);font-weight:400;margin:0;line-height:1.05}
h1{font-size:clamp(48px,8vw,88px)}
.kopf p{margin:14px 0 0;font-size:19px;max-width:34em;opacity:.95}

main{padding:clamp(40px,6vw,70px) 0 clamp(60px,9vw,100px)}
h2{font-size:clamp(26px,3.4vw,34px);color:var(--blau-text);margin:44px 0 10px}
h2:first-child{margin-top:0}
main p{margin:0 0 14px}
.karte{background:var(--hell);border-radius:22px;padding:24px 26px}
.karte p:last-child{margin-bottom:0}
.stand{color:var(--grau);font-size:15px;margin-top:40px}

footer{padding:30px 0 40px;color:var(--grau);font-size:15px;border-top:1px solid #e3eef3}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer nav{display:flex;gap:18px}
footer a{color:var(--grau)}