/* Schulhörnchen account shell. Brand faces come from ./fonts.css; every colour is a token. */
:root{--ink:#15282b;--teal:#183a40;--teal-deep:#0e2428;--teal-mid:#1f474e;--teal-line:#3e6267;--cream:#fff7ec;--white:#fff;--orange:#e8743b;--orange-deep:#d4612b;--yellow:#f2b544;--mint:#cdebe2;--mint-soft:#e7f5f0;--peach:#fad1bc;--muted:#3e5356;--muted-2:#4f6467;--line:#e6d9c6;--green:#1c5e3a;--amber-ink:#4a3810;--amber-line:#c98a12;--display:Fredoka,Nunito,ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;--text:Nunito,ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;--paper:var(--cream);--accent:var(--teal);color-scheme:light}
*{box-sizing:border-box}
body{margin:0;font:17px/1.6 var(--text);color:var(--ink);background:var(--cream);overflow-wrap:break-word}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
a{color:var(--teal);text-underline-offset:3px}
h1,h2,h3{font-family:var(--display);color:var(--teal);letter-spacing:-.01em}
h1{font-size:clamp(44px,6.4vw,82px);font-weight:700;line-height:1;margin:0;color:#fff}
h1 span{color:var(--yellow)}
h2{font-size:clamp(26px,3vw,32px);font-weight:700;line-height:1.1;margin:0 0 14px}
h3{font-size:19px;font-weight:600;line-height:1.25;margin:0 0 8px}
p{margin:10px 0}
.small{font-size:15px;line-height:1.55;color:var(--muted)}
[hidden]{display:none!important}

/* Header */
.site-header{background:var(--teal);color:#e9f0ee}
.site-header-inner{max-width:1200px;margin:0 auto;padding:16px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;min-height:44px}
.brand-mark{width:44px;height:44px;flex:none}
.brand-words{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.08em;line-height:1.1}
.brand-words span{display:block;font-size:12px;letter-spacing:.16em;color:var(--mint)}
.site-header nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.site-header nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;color:#e9f0ee;font-weight:700;font-size:16px;text-decoration:none}
.site-header nav a:hover{background:rgb(255 255 255 / .12)}
.site-header nav .nav-account{margin-left:6px;padding:0 20px;background:var(--yellow);color:var(--ink);font-weight:800;box-shadow:0 4px 0 var(--teal-deep)}
.site-header nav .nav-account:hover{background:#f6c564}
.site-header .language-picker{color:#e9f0ee;font-size:14px;font-weight:700}
.site-header .language-picker select{min-height:44px;padding:0 14px;border-radius:999px;border:2px solid var(--teal-line);background:var(--teal-mid);color:#fff;font:inherit;font-size:15px}
.site-header .language-scope{max-width:1200px;margin:0 auto;padding:0 24px 10px;color:#b9d2cc;font-size:13px;text-align:right}

/* Hero */
main{display:block}
.hero{position:relative;overflow:hidden;background:var(--teal);color:#fff;padding:48px 24px 150px}
.hero-pattern{position:absolute;inset:0;width:100%;height:100%;opacity:.07}
.hero-inner{position:relative;max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:32px;align-items:center}
.hero-copy{flex:999 1 500px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.eyebrow{display:inline-block;padding:8px 16px;border-radius:999px;background:var(--yellow);color:var(--ink);font-size:14px;font-weight:800;letter-spacing:.04em;transform:rotate(-2deg)}
.lede{max-width:540px;margin:0;font-size:21px;line-height:1.55;color:#d9e7e4}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-art{flex:1 1 340px;min-width:0;position:relative;display:flex;justify-content:center}
.hero-mascot{display:block;width:100%;max-width:420px;height:auto;overflow:visible}

/* Buttons */
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border:0;border-radius:999px;font:inherit;font-size:16px;font-weight:800;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;background:var(--orange);color:var(--ink);box-shadow:0 4px 0 var(--teal-deep)}
.button.cta{min-height:56px;padding:0 30px;font-size:18px}
.button.light{min-height:56px;padding:0 26px;font-size:18px;background:var(--cream);color:var(--teal)}
.secondary{background:#fff;color:var(--teal);box-shadow:inset 0 0 0 2.5px var(--teal),0 4px 0 var(--teal)}
button:disabled{opacity:.5;cursor:not-allowed;transform:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.site-header a:focus-visible,.site-header select:focus-visible,.hero a:focus-visible,footer a:focus-visible{outline-color:var(--yellow)}

/* Notices and cards */
#notice:not(:empty){max-width:1200px;margin:-110px auto 0;position:relative;z-index:3;width:calc(100% - 48px);padding:14px 20px;border-radius:18px;background:var(--cream);border:2px dashed var(--amber-line);color:var(--amber-ink);font-size:16px;font-weight:700}
.welcome-grid{position:relative;z-index:2;max-width:1248px;margin:-90px auto 0;padding:0 24px 96px;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-areas:"research access" "about access";gap:28px;align-items:start}
#notice:not(:empty)+.welcome-grid{margin-top:22px}
section{position:relative}
.welcome-grid>section,.access-stack>section,main>section:not(.hero){border-radius:32px;padding:36px}
#public-research{grid-area:research}.access-stack{grid-area:access}#about{grid-area:about}
#public-research{min-width:0;background:var(--mint);display:flex;flex-direction:column;gap:6px;overflow:hidden}
#public-research::after{content:"";position:absolute;right:-46px;bottom:-46px;width:170px;height:170px;border-radius:50%;border:14px solid rgb(24 58 64 / .1);pointer-events:none}
#public-research h2{font-size:clamp(32px,4vw,44px)}
#public-research>p:first-of-type{font-size:19px;line-height:1.6;color:#1f3639;max-width:600px}
#public-research .small{margin-bottom:22px}
#public-research .small{display:block;padding:16px 18px;border-radius:18px;background:var(--cream);border:2px dashed var(--amber-line);color:var(--amber-ink);max-width:600px}
#public-research .button{align-self:flex-start;margin-top:4px;background:var(--teal);color:#fff;min-height:56px;font-size:18px}
#public-research .tag{background:var(--green);color:#fff;border:0;transform:rotate(2deg)}
.access-stack{min-width:0;display:flex;flex-direction:column;gap:22px;position:relative}
#account,#guest-access{background:#fff;border:3px solid var(--teal);box-shadow:0 8px 0 var(--teal);z-index:2}
#invite-help{background:#fff;border:3px dashed var(--orange);padding:28px}
#invite-help h2,#account h2{font-size:28px}
#invite-help p{color:#2a3f42;font-size:16px;line-height:1.6;margin-bottom:0}
.section-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 14px;margin-bottom:8px}
.section-heading h2{margin:0}
.tag{display:inline-block;padding:6px 14px;border-radius:999px;background:#eef2f0;color:var(--muted-2);font-size:13px;font-weight:800;letter-spacing:.03em;white-space:nowrap}
#account-state{background:#eef2f0}
main>section:not(.hero){max-width:1200px;margin:0 auto 28px;width:calc(100% - 48px);background:#fff;border:3px solid var(--teal);box-shadow:0 8px 0 var(--teal)}

/* Forms */
label{display:block;font-size:15px;font-weight:800;min-width:0}
input,select{display:block;width:100%;min-height:52px;margin:8px 0 12px;padding:0 18px;border:2.5px solid var(--teal);border-radius:999px;background:var(--cream);color:var(--ink);font:inherit;font-size:17px}
input::placeholder{color:#6d7f80;opacity:1}
form{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end}
form label{flex:1 1 210px}
form button{margin-bottom:14px}
#email-form{flex-direction:column;align-items:stretch;gap:4px}
#email-form label{flex:none}
#email-form button{width:100%;min-height:54px;margin:0;background:var(--yellow);box-shadow:0 5px 0 var(--teal);font-size:17px}
#google-form button{width:100%}
.actions{display:flex;flex-wrap:wrap;gap:10px 12px;margin:14px 0 6px}
#who{font-family:var(--display);font-size:20px;font-weight:600;color:var(--teal);overflow-wrap:anywhere}
#signed-in .button{background:var(--orange)}
output{display:block;overflow-wrap:anywhere;margin:12px 0}
details{margin-top:12px}
summary{cursor:pointer;padding:10px 0;font-size:15px;font-weight:700;color:var(--muted)}
summary::marker{color:var(--orange)}
#dev[open]{padding:14px 18px;border-radius:20px;background:var(--cream)}

/* Admin, plans and the legacy table report */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
.plans article{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:24px;background:var(--cream);border:2px solid var(--teal)}
.plans article button{margin-top:auto;align-self:flex-start}
.plans p{font-size:15px}
.approval{display:flex;gap:14px;align-items:center;justify-content:space-between;border-top:2px dashed var(--line);padding:14px 0}
.approval>div{min-width:0;overflow-wrap:anywhere}
.approval p{margin:4px 0 0}
.approval button{flex-shrink:0;min-height:44px;padding:0 18px}
.guest-links,.output-feedback-inbox{border-top:2px dashed var(--line);margin-top:24px;padding-top:24px}
.output-feedback-inbox>label{max-width:260px}
.guest-links h2,.output-feedback-inbox h2{font-size:24px}
.controls{display:grid;grid-template-columns:3fr 1fr;gap:18px;margin:15px 0}
.filter-toggle{display:flex;align-items:center;gap:10px;min-height:44px}
.filter-toggle input{display:inline-block;width:20px;min-height:20px;height:20px;margin:0;accent-color:var(--orange)}
.school-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.school{border:2.5px solid var(--teal);border-radius:22px;padding:20px;background:#fff;box-shadow:0 5px 0 var(--teal)}
.school h3{font-size:18px;margin-top:10px}
.school p{font-size:14px;color:var(--muted)}
.range{font-family:var(--display);font-size:28px;font-weight:600;color:var(--teal)}
.range-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2)}
.band{height:10px;border-radius:999px;background:var(--mint-soft);margin:14px 0}
.band span{display:block;height:100%;border-radius:999px;background:#2f7d5b}

/* About and footer */
#about{min-width:0;display:flex;flex-wrap:wrap;gap:28px;align-items:center;background:#fff;border:3px dashed var(--orange)}
.about-mascot{flex:none;width:120px;height:120px}
.about-copy{flex:999 1 300px;min-width:0}
.about-copy h2{font-size:30px}
.about-copy>p:first-of-type{font-size:17px;line-height:1.65;color:#2a3f42}
.about-peek{top:-56px;right:64px;width:90px;height:58px}
footer{position:relative;overflow:hidden;background:var(--teal);color:#cfe0dc}
footer p{max-width:1200px;margin:0 auto;padding:56px 24px 30px;font-size:13px;font-weight:700;letter-spacing:.06em}

/* Decorative squirrels: hidden from assistive technology, still and absent for reduced motion. */
.runner-lane{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.runner{position:absolute;left:-170px;bottom:104px;display:block;width:130px;--fur:#e8743b}
.runner svg{display:block;width:100%;height:auto}
.runner-kid{width:72px;bottom:106px;--fur:#f2b544;--fur-dark:#d99a2b}
.run-left{top:-12px;bottom:auto;left:auto;right:-170px;width:110px;transform:scaleX(-1)}
.runner-ghost{top:6px;bottom:auto;width:80px;opacity:.9;--fur:#f2b544;--fur-light:#f2b544;--fur-dark:#f2b544;--legs:#f2b544;--ear:#f2b544}
.lane-left{inset:-70px 0 auto;height:60px}
.peek-lane{position:absolute;overflow:hidden;pointer-events:none;z-index:1}
.peek{display:block;width:100%;height:100%;transform:translateY(100%)}
.access-peek{top:-56px;right:48px;width:90px;height:58px}
.runner,.peek-lane{display:none}
@media (prefers-reduced-motion:no-preference){
  .runner,.peek-lane{display:block}
  .button,button,.site-header nav .nav-account{transition:transform .18s ease,box-shadow .18s ease}
  .button:hover,button:not(:disabled):hover{transform:translateY(-2px) rotate(-1deg)}
  .run-right{animation:mascot-run-right 11s linear 1s infinite}
  .run-kid{animation:mascot-run-right 11s linear 1.7s infinite}
  .run-left{animation:mascot-run-left 13s linear 4s infinite}
  .run-slow{animation:mascot-run-right 15s linear 7s infinite}
  .hop{animation:mascot-hop .32s ease-in-out infinite alternate}
  .peek{animation:mascot-peek 9s ease-in-out infinite}
  .peek-c{animation-delay:7.5s}.peek-d{animation-delay:3.5s;animation-duration:11s}
  .mascot-bob{transform-origin:200px 400px;animation:mascot-bob 4s ease-in-out infinite}
  .blink{transform-box:fill-box;transform-origin:center;animation:mascot-blink 5s infinite}
  .lens{transform-box:view-box;transform-origin:282px 276px;animation:mascot-lens 3.2s ease-in-out infinite}
  .tail{transform-box:view-box;transform-origin:190px 360px;animation:mascot-tail 2.4s ease-in-out infinite}
}
@keyframes mascot-run-right{0%{translate:0}22%,100%{translate:calc(100vw + 340px)}}
@keyframes mascot-run-left{0%{translate:0}20%,100%{translate:calc(-100vw - 340px)}}
@keyframes mascot-hop{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-9px) rotate(2deg)}}
@keyframes mascot-peek{0%,50%{transform:translateY(100%)}57%{transform:translateY(-6%)}60%,82%{transform:translateY(0)}86%{transform:translateY(-4%)}92%,100%{transform:translateY(100%)}}
@keyframes mascot-bob{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) translateY(-4px)}}
@keyframes mascot-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes mascot-lens{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
@keyframes mascot-tail{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg)}}

@media (max-width:900px){.welcome-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"research" "access" "about"}}
@media (max-width:680px){
  body{font-size:16px}
  .site-header-inner{padding:12px 16px;gap:8px 12px}
  .brand-words{font-size:15px}
  .site-header nav{order:3;width:100%;gap:2px}
  .site-header nav a{padding:0 9px;font-size:14px}
  .site-header nav .nav-account{margin-left:2px;padding:0 14px}
  .site-header .language-scope{padding:0 16px 10px;text-align:left}
  .hero{padding:32px 16px 120px}
  .hero-copy{gap:18px}
  .lede{font-size:18px}
  .hero-actions,.hero-actions .button{width:100%}
  .hero-art{flex-basis:100%}
  .hero-mascot{max-width:250px}
  .welcome-grid{padding:0 16px;gap:22px;margin-top:-80px}
  .welcome-grid>section,.access-stack>section,main>section:not(.hero){padding:24px 20px;border-radius:26px}
  main>section:not(.hero){width:calc(100% - 32px)}
  .welcome-grid{padding-bottom:72px}
  #notice:not(:empty){width:calc(100% - 32px);margin-top:-96px}
  .plans,.school-list,.controls{grid-template-columns:1fr}
  .controls{gap:0}
  .approval{align-items:flex-start;flex-wrap:wrap}
  form button{width:100%}
  #about{gap:18px}
  .about-mascot{width:84px;height:84px}
  footer p{padding:48px 16px 24px}
}

/* Keep the private-link confirmation immediately visible. */
[data-guest-landing] .hero, [data-guest-landing] #public-research, [data-guest-landing] #about {display:none}
[data-guest-landing] .welcome-grid {display:block;max-width:680px;margin-top:24px}
[data-guest-landing] #notice:not(:empty) {margin-top:24px;max-width:632px}