/* Gemeinsames Layout der Unterseiten (Tool, Impressum, Datenschutz, Nutzungshinweise)
   im Look der Startseite: blaues Kopfband mit bunten Formen, Karopapier, Gelb/Koralle/Grün als Akzente. */
:root{
  --s-ink:#1b2440; --s-muted:#4a5576; --s-paper:#ffffff; --s-grid:#eef2fa; --s-line:#d5dcec;
  --s-blue:#2346c8; --s-blue-soft:#e6ecff; --s-yellow:#ffd93d; --s-coral:#ff6b57; --s-green:#2bb673; --s-purple:#9b87ff;
  --s-display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --s-body:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,sans-serif;
}

/* Kopfband */
.site-head{position:relative;overflow:hidden;background:var(--s-blue);color:#fff;padding-top:env(safe-area-inset-top,0px)}
.site-head .sh-shape{position:absolute;pointer-events:none}
.site-head .sh-a{width:200px;height:200px;border-radius:50%;background:var(--s-yellow);right:-70px;top:-120px}
.site-head .sh-b{width:70px;height:70px;border-radius:50%;background:var(--s-coral);left:38%;bottom:-46px}
.site-head .sh-c{width:44px;height:44px;border-radius:12px;background:var(--s-green);left:-14px;bottom:10px;transform:rotate(18deg)}
.sh-inner{position:relative;max-width:1060px;margin:0 auto;padding:16px 20px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sh-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:var(--s-display);font-weight:800;font-size:1.2rem}
.sh-brand img{width:36px;height:36px;border-radius:10px;background:#fff}
.sh-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sh-nav a{color:#fff;text-decoration:none;font-weight:700;border-radius:999px;padding:7px 14px;font-family:var(--s-body);font-size:.98rem}
.sh-nav a:hover{background:rgba(255,255,255,.15)}
.sh-nav a[aria-current="page"]{background:rgba(0,0,0,.18)}
.sh-nav .sh-donate{background:var(--s-yellow);color:var(--s-ink)}
.sh-nav .sh-donate:hover{background:#ffe370}
.site-head :focus-visible,.site-foot2 :focus-visible{outline:3px solid var(--s-yellow);outline-offset:3px}

/* Fußbereich */
.site-foot2{color:var(--s-muted);font-family:var(--s-body);font-size:.9rem;padding-bottom:env(safe-area-inset-bottom,0px)}
.sf-inner{max-width:1060px;margin:0 auto;padding:28px 20px 40px;display:flex;flex-direction:column;gap:10px}
.sf-inner p{margin:0}
.sf-inner nav{display:flex;gap:18px;flex-wrap:wrap}
.sf-inner a{color:var(--s-blue)}

/* Rechtstexte */
body.legal{margin:0;background-color:var(--s-paper);background-image:linear-gradient(var(--s-grid) 1px,transparent 1px),linear-gradient(90deg,var(--s-grid) 1px,transparent 1px);background-size:22px 22px;color:var(--s-ink);font-family:var(--s-body);font-size:17px;line-height:1.6}
.legal-main{max-width:820px;margin:0 auto;padding:32px 20px 0}
.legal-card{background:#fff;border:2px solid var(--s-line);border-radius:22px;padding:32px 34px}
.legal-card h1{font-family:var(--s-display);font-weight:800;font-size:clamp(2rem,4.5vw,2.6rem);line-height:1.1;margin:0 0 8px;text-wrap:balance}
.legal-card h1::after{content:"";display:block;width:84px;height:8px;border-radius:4px;background:var(--s-yellow);margin-top:12px}
.legal-card h2{font-family:var(--s-display);font-weight:800;font-size:1.25rem;line-height:1.25;margin:30px 0 8px;display:flex;align-items:center;gap:10px;text-wrap:balance}
.legal-card h2::before{content:"";width:14px;height:14px;border-radius:4px;background:var(--dot,var(--s-blue));flex:none}
.legal-card h2:nth-of-type(4n+1){--dot:var(--s-blue)}
.legal-card h2:nth-of-type(4n+2){--dot:var(--s-coral)}
.legal-card h2:nth-of-type(4n+3){--dot:#e8b400}
.legal-card h2:nth-of-type(4n+4){--dot:var(--s-green)}
.legal-card p{margin:0 0 10px;max-width:68ch}
.legal-card ul,.legal-card ol{margin:0 0 10px;padding-left:1.3em;max-width:68ch}
.legal-card li{margin-bottom:6px}
.legal-card a{color:var(--s-blue)}
.legal-card small{color:var(--s-muted)}
.legal-card .todo{background:#fff1e8;color:#a4400e;padding:10px 14px;border-radius:10px;font-weight:700}
@media (max-width:600px){ .legal-card{padding:22px 18px;border-radius:18px} .legal-main{padding-top:20px} }
@media (max-width:600px){
  .site-head .sh-a{width:130px;height:130px;right:-60px;top:-80px}
  .sh-nav{gap:6px}
  .sh-nav a{padding:6px 10px;font-size:.92rem}
}