/* Crazy Rubber Duck – Rechtsseiten (Impressum & Datenschutz, Datenschutz für Kinder) im Look der Website.
   Die Seiten erzeugt tool/build_legal_pages.mjs; Farben, Knöpfe und Notizzettel wie in de/index.html. */
@font-face{font-family:Komika;src:url(../assets/fonts/KOMIKAHB.ttf);font-weight:700;font-display:swap}
@font-face{font-family:Sunflower;src:url(../assets/fonts/Sunflower-Medium.ttf);font-weight:400 500;font-display:swap}
@font-face{font-family:Sunflower;src:url(../assets/fonts/Sunflower-Bold.ttf);font-weight:700;font-display:swap}

:root{--ink:#0b3a5b;--sun:#ffd822;--sun2:#ffb800;--rim:#e08600;--rim2:#b35f00;--deep:#0f5f8c;--hdr:64px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;font:18px/1.65 Sunflower,system-ui,sans-serif;color:var(--ink);background:#fff7d6}
a{color:#0f6fb0}
a:hover{color:#e0567f}
.wrap{width:min(900px,100% - 32px);margin-inline:auto;position:relative}

/* Kopfleiste mit runden 3D-Knöpfen wie in der App */
.bar{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--hdr);display:flex;align-items:center;gap:10px;padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));
  background:rgba(11,58,91,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 18px rgba(0,0,0,.25)}
.b3{border:4px solid var(--rim);border-radius:50%;cursor:pointer;padding:0;display:grid;place-items:center;flex:none;text-decoration:none;
  background:radial-gradient(circle at 35% 28%,#fff6a8,var(--sun) 55%,var(--sun2));box-shadow:0 5px 0 var(--rim2),0 10px 18px rgba(0,0,0,.25);transition:transform .1s,box-shadow .1s;-webkit-tap-highlight-color:transparent}
.b3:hover{transform:translateY(-2px)}
.b3:active{transform:translateY(4px);box-shadow:0 1px 0 var(--rim2),0 4px 8px rgba(0,0,0,.25)}
.home{width:48px;height:48px}
.home img{width:118%;height:118%;object-fit:contain;margin-top:-4px}
.lang{width:48px;height:48px;font:700 15px Komika,Sunflower,system-ui,sans-serif;color:var(--ink)}
.lnav{display:flex;gap:8px;min-width:0;overflow-x:auto;scrollbar-width:none}
.lnav::-webkit-scrollbar{display:none}
.lnav a{display:flex;align-items:center;gap:7px;text-decoration:none;font:700 15px Komika,Sunflower,system-ui,sans-serif;color:#fff;background:rgba(11,58,91,.6);padding:6px 14px;border-radius:999px;border:3px solid rgba(255,255,255,.8);white-space:nowrap}
.lnav a:hover{background:rgba(11,58,91,.95);color:#fff}
.lnav a[aria-current]{background:#fff;color:var(--ink)}
.grow{flex:1}
@media(max-width:560px){.lnav a.site,.lnav a[aria-current]{display:none}}

/* Himmel oben wie die Tag-Welt der Website (Ebenen aus assets/scene0), Welle zum Papier */
.sky{position:relative;padding:calc(var(--hdr) + 26px) 0 108px;text-align:center;overflow:hidden;
  background:url(../assets/scene0/03.webp) 50% calc(100% + max(330px, 28.08vw - 120px))/max(1600px,100%) auto no-repeat,
  url(../assets/scene0/01.webp) 82% 0/auto 125% no-repeat,linear-gradient(#54c9e3,#40b5db 55%,#2ca1d0)}
.sky .logo{width:min(220px,52vw);height:auto;display:block;margin:0 auto}
.sky .sub{max-width:640px;margin:10px auto 0;color:var(--ink);font-weight:700;font-size:clamp(17px,2vw,20px);text-shadow:0 0 3px #fff,0 0 8px #fff,0 0 16px #fff,0 0 22px rgba(255,255,255,.9)}
.sky .duck{position:absolute;right:max(2vw,8px);bottom:6px;width:clamp(84px,14vw,150px);height:auto;transform:rotate(6deg)}
.sky .wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:44px;display:block}
@media(max-width:700px){.sky .duck{display:none}}

/* Überschrift: jeder Buchstabe eine Farbe, weiß umrandet (Spannen kommen fertig aus dem Generator) */
h1,h2,h3,h4{font-family:Komika,Sunflower,system-ui,sans-serif;font-weight:700;line-height:1.15;margin:0}
.rb{font-size:clamp(34px,6vw,64px);margin:6px auto 0;letter-spacing:.01em}
.rb .w{display:inline-block;white-space:nowrap}
.rb .ch{display:inline-block;--o:max(2px,.055em);--d:calc(var(--o) * .72);
  text-shadow:var(--o) 0 #fff,calc(var(--o) * -1) 0 #fff,0 var(--o) #fff,0 calc(var(--o) * -1) #fff,var(--d) var(--d) #fff,calc(var(--d) * -1) calc(var(--d) * -1) #fff,var(--d) calc(var(--d) * -1) #fff,calc(var(--d) * -1) var(--d) #fff,0 .13em 0 rgba(11,58,91,.3)}
.rb .c0{color:#ff4d5e}.rb .c1{color:#ff9a1f}.rb .c2{color:#ffc800}.rb .c3{color:#2fbf4f}.rb .c4{color:#2fa8ff}.rb .c5{color:#9a5cf0}
.rb .ch:nth-child(odd){transform:rotate(-4deg) translateY(1px)}.rb .ch:nth-child(even){transform:rotate(3deg) translateY(-2px)}

/* Sprungmarken als Sticker */
.toc{list-style:none;margin:18px auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.toc a{display:flex;align-items:center;gap:8px;background:#fff;color:var(--ink);text-decoration:none;font:700 15px Komika,Sunflower,system-ui,sans-serif;padding:6px 16px 6px 6px;border-radius:999px;box-shadow:0 4px 0 rgba(0,0,0,.15)}
.toc a::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--tc,#2fa8ff)}
.toc a:hover{transform:translateY(-2px)}

/* Papier mit Notizzettel und Karten */
main{padding:34px 0 60px}
.note{position:relative;background:#fffdf3;border-radius:6px 6px 26px 6px;padding:40px clamp(18px,4vw,44px) 26px;transform:rotate(-.8deg);
  box-shadow:0 14px 30px rgba(0,0,0,.12);margin:0 0 30px;background-image:repeating-linear-gradient(transparent 0 33px,#e7eef6 33px 35px)}
.tape{position:absolute;top:-16px;left:50%;width:150px;height:36px;margin-left:-75px;background:rgba(255,216,34,.78);transform:rotate(3deg);box-shadow:0 2px 4px rgba(0,0,0,.1)}
.note h2{font-size:clamp(24px,3.4vw,34px);color:#e0567f;margin-bottom:12px}
.checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.checks li{position:relative;padding-left:40px;font-size:17px;line-height:1.5}
.checks li::before{content:"";position:absolute;left:0;top:1px;width:28px;height:28px;border-radius:50%;background:var(--cc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat}
@media(max-width:700px){.checks{grid-template-columns:1fr}.note{transform:rotate(-.4deg)}}

.card{background:#fff;border-radius:24px;box-shadow:0 6px 0 rgba(0,0,0,.08);padding:clamp(20px,3.4vw,36px);margin:0 0 22px}
.card h2{font-size:clamp(26px,3.6vw,38px);color:#e0567f;margin:0 0 12px}
.card h3{font-size:clamp(18px,2.1vw,22px);color:var(--ink);margin:26px 0 6px;display:flex;align-items:center;gap:10px}
.card h3::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--sun2);box-shadow:0 2px 0 var(--rim)}
.card h4{font:700 17px/1.3 Sunflower,system-ui,sans-serif;color:#0f6b47;margin:18px 0 4px}
.card p{margin:6px 0 0}
.card .lead{font-weight:700;color:#41627a}
.card .addr{font-weight:700;font-size:19px;line-height:1.55;margin-top:12px}
.card .stand{margin-top:20px;font-size:15px;color:#6a8296}
.dots{margin:8px 0 0;padding-left:1.2em}
.dots li{margin:4px 0}
.dots li::marker{color:#ff9a1f}

footer{background:#0b3a5b;color:#d8efff;padding:26px 0 max(26px,env(safe-area-inset-bottom));font-size:15px}
footer .wrap{display:flex;gap:12px 26px;flex-wrap:wrap;justify-content:space-between;align-items:center}
footer a{color:#fff}

@media print{
  .bar,.toc,.sky .duck,.sky .wave{display:none}
  .sky{padding:0;background:none}
  .sky .sub{color:var(--ink);text-shadow:none}
  body{background:#fff}
  .note,.card{box-shadow:none;transform:none;border:1px solid #ccc}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.b3,.toc a{transition:none}}