body{background:#142d50;color:#fff8ea;min-height:100svh}
.header,.families,.foot{border-color:#ffffff2b}
.intro .eyebrow{color:#ffda70;font-size:clamp(20px,2.4vw,28px);font-weight:750;letter-spacing:.12em;line-height:1.25}
.intro p,.hint,.families p,.foot{color:#dbe6f3}
.category,.offers,.adults,.links a,.skip{color:#234e45}
.category{box-shadow:0 5px 0 #07193140}
.category[aria-expanded=true]{border-color:#234e45;box-shadow:0 5px 0 #07193170}
.adults summary,.adult-menu,.links a{border-color:#d3dfd6}
.welcome-star{filter:drop-shadow(0 3px 5px #07193140)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline-color:#f7c95c}
.offers{border:2px solid #d8778b;background:#f4bac9 url("angebote-kariert-pastell-v1.png") repeat;background-size:416px 416px}
.offers h2,.offers .category-selection,.offers .guide-note{background:#fff9eff5;border-radius:12px;color:#234e45}
.offers h2{padding:8px 12px;min-width:0}
.offers .category-selection,.offers .guide-note{width:fit-content;max-width:100%;padding:6px 10px}
.foot a:hover{color:#f7d98c}

.tool[data-area=foerdern] .icon{background:#f4df9b}

/* Der ganze Stern einschließlich Händen und Füßen bleibt gut erkennbar. */
.intro{grid-template-columns:154px minmax(0,1fr)}
.welcome-star{width:154px;height:154px;object-fit:contain}
@media(max-width:500px){.intro{grid-template-columns:104px minmax(0,1fr);gap:14px}.welcome-star{width:104px;height:116px}}
@media(max-width:360px){.intro{grid-template-columns:94px minmax(0,1fr);gap:10px}.welcome-star{width:94px;height:106px}}

/* Die Karos liegen hinter dem gesamten Kopfbereich. */
.header{
 width:100%;
 padding-inline:max(20px,calc((100% - 1120px)/2));
 background:#bfd4bd url("kopf-kariert-gruen-blau-pastell-v3.png") repeat;
 background-size:320px 320px;
 border-bottom-color:#b3c8b5;
}
@media(max-width:500px){
 .header{padding-inline:14px;background-size:250px 250px}
}
@media(max-width:360px){
 .header{gap:10px}
 .header .brand img{width:144px}
}

/* Ausgewählter Papierfetzen mit Klebeband, Schatten und neuer Wortmarke. */
.header{gap:24px;padding-block:14px}
.header .brand{display:block;flex:0 1 420px;width:420px;min-width:0;padding:0}
.header .brand img{display:block;width:100%;height:auto}
.header .adults{flex-shrink:0;margin-left:auto}
@media(max-width:500px){
 .header{gap:12px;padding-block:12px}
 .header .brand{flex-basis:260px;width:260px}
}
@media(max-width:360px){
 .header{gap:10px}
 .adults summary{font-size:11px;padding-inline:10px}
}

/* Größere Papierzettel mit Beschreibung und Pfeil als kompakte Einheit. */
.categories{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:22px 24px}
.category.paper-category{flex:0 1 calc((100% - 48px)/3);display:grid;grid-template-columns:minmax(0,1fr) 28px;grid-template-rows:auto auto;gap:8px 10px;align-items:center;min-width:0;padding:6px 0 8px;text-align:left;background:transparent;border-color:transparent;box-shadow:none;color:#fff8ea}
.category.paper-category[aria-expanded=true]{background:transparent;border-color:transparent;box-shadow:none}
.category.paper-category .picture{grid-column:1/-1;grid-row:1;width:100%;height:auto;aspect-ratio:2022/778;display:block;margin:0}
.category.paper-category .paper-label{display:block;width:100%;max-width:100%;height:auto;object-fit:contain;filter:none}
.category.paper-category .paper-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.category.paper-category .description{grid-column:1;grid-row:2;align-self:center;margin:0;font-size:14px;line-height:1.35}
.category.paper-category .arrow{grid-column:2;grid-row:2;justify-self:end;align-self:center;flex-shrink:0;color:#234e45;width:28px;height:28px;margin:0}
.intro{padding-block:26px 18px}
.hint{margin:18px 0 30px}
@media(max-width:900px){.category.paper-category{flex-basis:calc((100% - 24px)/2)}}
@media(max-width:560px){
 .categories{gap:22px}
 .category.paper-category{flex-basis:100%;max-width:420px;padding-block:0}
 .intro{padding-block:24px 18px}
}

/* Lernfreude endet bündig mit der Überschrift darunter. */
.intro-text{min-width:0}
.intro-heading{display:flex;flex-direction:column;width:max-content;max-width:100%;min-width:0}
.intro-heading h1{min-width:0}
.intro .eyebrow{display:flex;justify-content:space-between;align-items:baseline;width:100%;letter-spacing:0}
.intro .eyebrow-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Die gespreizte Zeile endet jetzt über dem Wort du. */
.intro .eyebrow{width:62%;max-width:100%}
#introTitleLead{white-space:nowrap}
@media(max-width:360px){.intro-heading h1{font-size:24px}}

/* Classroom tools show their original scenes, without exercise-only guidance. */
.offers[data-selected-area=klassenraum] :is(.category-selection,.guide-note){display:none}
.offers .tool[data-area=klassenraum]{grid-template-columns:92px minmax(0,1fr) 20px}
.offers .tool[data-area=klassenraum] .tool-preview{width:92px;height:68px;padding:0;background:transparent;border-radius:12px;overflow:hidden}
.offers .tool-preview img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:600px){.offers .tool[data-area=klassenraum]{grid-template-columns:76px minmax(0,1fr) 15px}.offers .tool[data-area=klassenraum] .tool-preview{width:76px;height:58px}}

.offers button.tool:disabled{width:100%;font:inherit;color:inherit;text-align:left;cursor:default;opacity:1}
.offers button.tool:disabled:hover{border-color:#d9e2d4;background:white}
.offers .tool-lock{font:18px/1 system-ui,sans-serif;text-align:center}

/* New homepage introduction, with a readable width for the complete copy. */
.homepage-intro{align-items:start;max-width:1000px;grid-template-columns:132px minmax(0,1fr);gap:28px;padding-block:32px}
.homepage-intro .welcome-star{width:132px;height:132px;margin-top:8px}
.homepage-intro .intro-heading{width:100%}
.homepage-intro .eyebrow{width:min(100%,310px);margin-bottom:14px}
.homepage-intro h1{font-size:clamp(27px,3.2vw,39px);line-height:1.2;margin:0;letter-spacing:-.5px;hyphens:auto;overflow-wrap:break-word}
.homepage-intro .intro-description{font-size:clamp(16px,1.8vw,19px);line-height:1.55;max-width:760px;margin:18px 0 0}
.homepage-intro .intro-browser{font-size:16px;line-height:1.5;margin:14px 0 0;font-weight:650;color:#ffda70}
@media(max-width:600px){.homepage-intro{grid-template-columns:1fr;gap:12px;padding-block:24px}.homepage-intro .welcome-star{width:92px;height:92px;margin:0}.homepage-intro .eyebrow{width:min(100%,280px)}.homepage-intro h1{font-size:28px}.homepage-intro .intro-description{font-size:17px;line-height:1.5;margin-top:16px}.homepage-intro .intro-browser{font-size:16px;margin-top:12px}}

.offers button.tool[data-plus-locked]{width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer}
.plus-hint{width:min(540px,calc(100% - 32px));max-height:calc(100svh - 36px);overflow:auto;padding:36px 28px 22px;border:2px solid #8fa997;border-radius:25px 29px 23px 27px;background:#fff9ef;color:#234e45;box-shadow:0 12px 45px #07193160;font:17px/1.55 system-ui,sans-serif}
.plus-hint::backdrop{background:#071931ad}
.plus-hint h2{font-size:clamp(22px,4.5vw,28px);line-height:1.25;margin:4px 24px 20px 0}
.plus-hint p{margin:0 0 16px}
.plus-hint-close{position:absolute;right:8px;top:8px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:#234e45;font-size:30px;cursor:pointer}
.plus-hint-upgrade{width:100%;min-height:50px;padding:12px 16px;border:1px solid #bdcabd;border-radius:17px;background:#dfe9dd;color:#526858;font:650 17px/1.4 system-ui,sans-serif;cursor:default}
.plus-hint .plus-availability{font-size:14px;line-height:1.4;text-align:center;margin:10px 0 0;color:#61736c}
@media(max-width:500px){.plus-hint{padding:34px 20px 20px;font-size:16px}}