/* Unterseiten (Impressum, Datenschutz, Datenlöschung) im Bento-Look der Startseite */
:root{
  --bg:#eeebe4; --card:#ffffff; --text:#1b1a17; --text2:#6f6a60; --line:rgba(27,26,23,.1);
  --ink:#1b1a17; --paper:#eeebe4; --pink:#ff5c8a;
  --font:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#12110f;--card:#1e1d1a;--text:#f1ede4;--text2:#a9a397;--line:rgba(241,237,228,.12);--ink:#f1ede4;--paper:#12110f;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#12110f;--card:#1e1d1a;--text:#f1ede4;--text2:#a9a397;--line:rgba(241,237,228,.12);--ink:#f1ede4;--paper:#12110f;color-scheme:dark}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased}
.page{max-width:820px;margin:0 auto;padding-inline:20px;padding-block:0 60px}
:focus-visible{outline:3px solid #5a3ff2;outline-offset:3px;border-radius:8px}

nav.top{position:sticky;top:calc(12px + env(safe-area-inset-top,0px));z-index:50;margin-top:12px}
nav.top .pill{display:flex;align-items:center;gap:6px;background:var(--ink);color:var(--paper);border-radius:999px;padding:7px 7px 7px 20px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
nav.top .brand{font-weight:800;font-size:18px;letter-spacing:-.03em;text-decoration:none;color:inherit;margin-right:auto;display:flex;align-items:center;gap:9px}
nav.top .brand i{width:22px;height:22px;border-radius:50%;background:conic-gradient(#F5245F,#5E17EB,#3945F5,#F5245F)}
nav.top .cta{background:var(--pink);color:#1b1a17;text-decoration:none;font-weight:700;font-size:14.5px;padding:10px 18px;border-radius:999px}

h1{font-size:clamp(38px,6vw,60px);font-weight:800;letter-spacing:-.045em;line-height:1;margin:40px 0 10px;text-wrap:balance}
h1 span{background:none;color:inherit}
h2{font-size:22px;font-weight:800;letter-spacing:-.025em;line-height:1.15;margin:0 0 10px}
p,li,address{font-style:normal;color:var(--text2)}
p+p{margin-top:12px}
.meta{color:var(--text2);margin-bottom:22px}
a{color:var(--text);text-decoration:none;border-bottom:2px solid var(--pink)}
nav.top a,footer a{border:0}
strong,b{color:var(--text)}

/* jeder Abschnitt wird eine Kachel */
.legal section,main > h2,.card{background:var(--card);border-radius:24px;padding:24px 26px;margin-top:12px}
.legal section{border:0}
.legal .addr,address{color:var(--text);line-height:1.75}
main{display:block}
main > h2{margin-bottom:0;border-radius:24px 24px 0 0;padding-bottom:6px}
main > h2 + p,main > h2 + address,main > h2 + ul{background:var(--card);border-radius:0 0 24px 24px;padding:0 26px 22px;margin-top:0}
main > p:first-of-type{margin-bottom:6px}
ul{padding-left:20px}main ul{padding-left:46px}
.card strong{display:block;margin-bottom:4px}
.back{display:inline-block;margin-top:26px;color:var(--text2);border:0;font-weight:600}
header{padding:0;text-align:left}

footer{max-width:820px;margin:0 auto;padding:30px 20px 50px;color:var(--text2);font-size:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border:0}
footer a{color:var(--text2)}footer a:hover{color:var(--text)}
@media (max-width:560px){.legal section,main > h2,.card{padding:20px}main > h2 + p,main > h2 + address,main > h2 + ul{padding:0 20px 20px}}

.brand .wordmark{height:22px;width:auto;display:block}
.brand .wordmark circle{transform-box:fill-box;transform-origin:center;animation:recBlink 1.1s steps(1,end) .3s 1 both,recGlow 2.8s ease-in-out 1.4s infinite}
@keyframes recBlink{0%{opacity:0}18%{opacity:1}40%{opacity:0}58%{opacity:1}80%{opacity:0}100%{opacity:1}}
@keyframes recGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,92,138,0))}50%{filter:drop-shadow(0 0 6px rgba(255,92,138,.85))}}
@media (prefers-reduced-motion:reduce){.brand .wordmark circle{animation:none}}
