/* Unterseiten von orakel.schule (Impressum, Datenschutz, Hinweise für Eltern): ruhige Textseiten im Stil des Orakels */
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Lexend";src:url(../fonts/lexend.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --papier:#ffffff; --hell:#f3f6fb; --linie:#e1e6ef; --schrift:#141a33; --grau:#5b637a; --tinte:#2342d6; --tinte-hell:#e8ecfd;
  --f-display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-text:"Lexend","Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,sans-serif;
  --gl:max(20px,env(safe-area-inset-left,0px)); --gr:max(20px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--papier)}
body{margin:0;background:var(--papier);color:var(--schrift);font:400 17px/1.65 var(--f-text);-webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column}
a{color:var(--tinte);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--tinte);outline-offset:3px;border-radius:6px}
.sprung{position:absolute;left:-9999px;top:8px;background:var(--schrift);color:#fff;padding:8px 14px;border-radius:999px;z-index:5}
.sprung:focus{left:12px}

.kopf{border-bottom:1px solid var(--linie)}
.kopf-in,.fuss-in,main{max-width:760px;margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
.kopf-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px}
.logo{display:inline-flex;align-items:center;gap:10px;font:760 1.35rem/1 var(--f-display);letter-spacing:-.035em;color:var(--schrift);
  text-decoration:none;font-variation-settings:"wdth" 92}
.logo-orb{width:24px;height:24px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.95) 0 9%,rgba(255,255,255,0) 10%),radial-gradient(circle at 66% 72%,#7f95ff 0,var(--tinte) 48%,#0f1c66 100%);
  box-shadow:inset -2px -3px 6px rgba(5,10,40,.35),0 3px 10px -2px rgba(35,66,214,.45)}
.zurueck{font-size:.92rem;color:var(--schrift);text-decoration:none;border:1px solid var(--linie);border-radius:999px;padding:8px 15px;white-space:nowrap}
.zurueck:hover{background:var(--hell)}

main{flex:1 0 auto;width:100%;padding-top:44px;padding-bottom:72px}
h1,h2,h3{font-family:var(--f-display);color:var(--schrift);text-wrap:balance}
h1{font-weight:760;font-size:clamp(2.1rem,6vw,2.8rem);line-height:1.08;letter-spacing:-.035em;margin:0 0 10px;font-variation-settings:"wdth" 94}
.unterzeile{color:var(--grau);margin:0 0 30px}
h2{font-weight:700;font-size:1.28rem;line-height:1.3;letter-spacing:-.012em;margin:38px 0 8px}
p,ul,dl{margin:0 0 12px}
ul{padding-left:1.25em}
li+li{margin-top:5px}
li::marker{color:var(--grau)}

/* Die Kinderfassung: das eine auffällige Element */
.kinder{background:var(--tinte-hell);border-radius:20px;padding:24px 26px 18px;margin:0 0 10px}
.kinder h2{margin:0 0 12px;font-size:1.4rem}
.kinder ul{list-style:none;padding:0}
.kinder li{position:relative;padding-left:30px;font-size:1.06rem;line-height:1.55}
.kinder li+li{margin-top:10px}
.kinder li::before{content:"";position:absolute;left:3px;top:.5em;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.9) 0 18%,rgba(255,255,255,0) 20%),var(--tinte)}

.angaben{display:grid;grid-template-columns:max-content 1fr;gap:6px 20px;margin-top:18px}
.angaben dt{color:var(--grau)}
.angaben dd{margin:0}

.speicher{border:1px solid var(--linie);border-radius:16px;padding:16px 18px;margin:14px 0 4px;background:var(--hell)}
.speicher p{margin:0}
.knopf{margin-top:12px;display:inline-flex;align-items:center;border:0;border-radius:999px;padding:11px 20px;background:var(--schrift);color:#fff;
  font:600 .95rem/1.1 var(--f-text);cursor:pointer}
.knopf:hover{background:#2a3360}
.knopf[hidden]{display:none}

.fuss{border-top:1px solid var(--linie)}
.fuss-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding-top:18px;
  padding-bottom:calc(22px + env(safe-area-inset-bottom,0px));font-size:.86rem;color:var(--grau)}
.fuss-in p{margin:0}
.fuss nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.fuss a{color:var(--schrift);text-decoration:none;padding:4px 0}
.fuss a:hover{text-decoration:underline}
.fuss a[aria-current]{font-weight:600}

@media (max-width:560px){
  body{font-size:16px}
  main{padding-top:30px}
  .angaben{grid-template-columns:1fr;gap:0}
  .angaben dt{margin-top:10px}
  .kinder{padding:20px 18px 14px;border-radius:16px}
}