.collection-page .lesson-hero h1{font-size:clamp(54px,6.3vw,88px);line-height:1.03}
.collection-page .lesson-hero h1 .hero-last{font-size:clamp(37px,4.1vw,63px);line-height:1.16;letter-spacing:-.035em;word-spacing:.09em;max-width:700px;margin-top:15px;color:#007f70}
.collection-page .grammar-card strong{font-size:clamp(26px,3vw,43px);line-height:1.12;overflow-wrap:anywhere}
.collection-page .rule-grid h3,.collection-page .section-heading h2,.collection-page .game-heading h2,.collection-page .lesson-faq h2,.collection-page .related-lessons h2{letter-spacing:-.025em;word-spacing:.12em}
.collection-page .grammar-card.card-front small{color:#b3fa73}
.collection-page .lesson-hero-art{max-width:610px;width:100%}
.collection-page .lesson-rule{scroll-margin-top:30px}
.collection-page .game-section{scroll-margin-top:30px}
.collection-page .game-card[hidden]{display:none}
.collection-page .related-lessons{max-width:1360px;margin:auto;padding:80px 4%;border-top:1px solid #d7e7de}
.related-lessons h2{font-size:clamp(34px,4vw,57px);letter-spacing:-.055em;color:#004f43;margin:12px 0 25px}
.related-lessons>div{display:flex;gap:12px;flex-wrap:wrap}
.related-lessons a{display:inline-flex;gap:16px;justify-content:space-between;align-items:center;border:1px solid #cde3d5;background:white;color:#004f43;border-radius:15px;padding:16px 19px;font-weight:750;text-decoration:none;min-width:175px;transition:transform .2s,border-color .2s}
.related-lessons a:hover{transform:translateY(-3px);border-color:#007f70}
.hub-hero{max-width:1360px;margin:auto;padding:90px 4% 80px;background:radial-gradient(ellipse at 82% 40%,#d4f4dd,transparent 41%),radial-gradient(ellipse at 18% 80%,#efe3ff,transparent 38%)}
.hub-hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:20px;min-height:650px}
.hub-hero-copy{position:relative;z-index:2}
.hub-hero h1{font-size:clamp(55px,8vw,118px);line-height:1.02;letter-spacing:-.075em;color:#004f43;margin:20px 0}
.hub-hero h1 em{font-style:normal;color:#007f70;display:inline}
.hub-hero-copy>p:not(.eyebrow){font-size:clamp(19px,2vw,25px);line-height:1.5;color:#526c62;max-width:700px;margin-bottom:30px}
.hub-hero-art{height:450px;position:relative;perspective:850px;isolation:isolate}
.hub-orbit{position:absolute;inset:75px 0 55px;border:1px solid #80cdae80;border-radius:50%;transform:rotate(-18deg);z-index:-1}
.hub-float-card{position:absolute;width:min(80%,380px);padding:22px 25px;border-radius:22px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 40px #004f4326;transform-style:preserve-3d;backface-visibility:hidden}
.hub-float-card small{font-size:11px;letter-spacing:.16em;font-weight:800}.hub-float-card strong{font-size:clamp(24px,2.7vw,37px);line-height:1.14;letter-spacing:-.04em}.hub-float-card em{font-style:normal;color:#b3fa73}.hub-float-card span{font-size:13px;font-weight:700;opacity:.8}
.hub-float-one{top:15px;left:2%;background:#e0f8e9;color:#004f43;transform:rotate(-11deg) rotateY(9deg)}.hub-float-one em{color:#007f70}
.hub-float-two{top:150px;right:0;background:#004f43;color:white;transform:rotate(8deg) rotateY(-10deg);animation:hub-rise .75s cubic-bezier(.2,.8,.2,1) both}
.hub-float-three{bottom:0;left:0;background:#6b19ac;color:white;transform:rotate(-5deg) rotateY(5deg);animation:hub-rise .85s cubic-bezier(.2,.8,.2,1) .12s both}
@keyframes hub-rise{from{opacity:0;translate:0 35px}to{opacity:1;translate:0 0}}
.hub-group{max-width:1360px;margin:auto;padding:76px 4%;border-top:1px solid #d7e7de}
.hub-group-heading h2{font-size:clamp(38px,4.6vw,66px);line-height:1.08;letter-spacing:-.06em;color:#004f43;margin:11px 0 30px}
.hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.hub-card{display:flex;flex-direction:column;min-height:280px;padding:27px;border-radius:25px;background:#fff;border:1px solid #d1e7da;color:#004f43;text-decoration:none;box-shadow:0 12px 25px #004f4308;transition:transform .22s,box-shadow .22s,border-color .22s}
.hub-card:nth-child(3n+2){background:#ecfbe8}.hub-card:nth-child(3n){background:#f2ebfb}
.hub-card:hover{transform:translateY(-5px);box-shadow:0 20px 35px #004f4315;border-color:#a3d5bb}
.hub-card-top{display:flex;justify-content:space-between;gap:10px;color:#6d8179;text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:750}
.hub-card h3{font-size:clamp(26px,2.6vw,37px);letter-spacing:-.045em;margin:32px 0 12px}
.hub-card p{color:#526c62;line-height:1.55;margin:0 0 25px;font-size:15px}
.hub-card-link{margin-top:auto;font-weight:800;color:#007f70}
.hub-card-link span{margin-left:8px}
.hub-app{max-width:1360px;margin:50px auto 100px;padding:55px 4%;background:linear-gradient(110deg,#e1f8e9,#e9f3df 65%,#efe3fa);border-radius:30px;display:flex;justify-content:space-between;align-items:center;gap:40px}
.hub-app h2{font-size:clamp(34px,4vw,54px);letter-spacing:-.055em;color:#004f43;margin:10px 0}
.hub-app p:not(.eyebrow){max-width:680px;color:#526c62;line-height:1.6;font-size:17px}
.hub-app .lesson-button{white-space:nowrap}
@media(max-width:1000px){.hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:780px){.collection-page .lesson-hero h1{font-size:clamp(47px,11vw,65px)}.collection-page .lesson-hero h1 .hero-last{font-size:clamp(33px,8vw,48px)}.collection-page .grammar-card strong{font-size:clamp(25px,7vw,36px)}.hub-hero{padding:60px 5%;grid-template-columns:1fr;min-height:0}.hub-hero-art{height:340px;max-width:500px;width:100%;margin:18px auto 0}.hub-group{padding:60px 5%}.hub-app{margin:30px 5% 75px;padding:35px;display:block}.hub-app .lesson-button{margin-top:10px}.collection-page .related-lessons{padding:60px 5%}}
@media(max-width:570px){.hub-grid{grid-template-columns:1fr}.hub-card{min-height:220px}.hub-card h3{margin-top:22px}.hub-hero h1{font-size:55px}.hub-hero-art{height:315px}.hub-float-card{padding:15px 18px;gap:6px}.hub-float-card strong{font-size:25px}.hub-float-one{top:5px}.hub-float-two{top:105px}.hub-float-three{bottom:8px}.collection-page .lesson-hero h1 .hero-last{font-size:37px}.hub-app{padding:28px}}

/* Keep supporting lesson text readable on white, mint, and lavender cards. */
.hub-card-top{color:#465f54;font-size:13px}
.hub-card-top small{font-size:inherit}
.hub-card-link{color:#006454}
.hub-float-card small{font-size:12px}
.hub-float-card span{font-size:14px;opacity:1}
.hub-float-one em{color:#006b5e}
@media(max-width:570px){.hub-hero-art{overflow-x:clip}}
@media(max-width:570px){.lesson-personalpronomen .lesson-hero h1{font-size:clamp(35px,11vw,44px)}.lesson-plusquamperfekt .lesson-hero h1{font-size:clamp(39px,12vw,47px)}}
@media(max-width:570px){.collection-page .section-heading h2{overflow-wrap:anywhere}.lesson-personalpronomen .section-heading h2,.lesson-personalpronomen .lesson-faq h2{font-size:clamp(32px,calc(11.4vw - 4.5px),42px)}.lesson-plusquamperfekt .section-heading h2,.lesson-plusquamperfekt .lesson-faq h2{font-size:clamp(35px,10vw,42px)}}
@media(prefers-reduced-motion:reduce){.hub-card,.related-lessons a{transition:none}.hub-float-card{animation:none}}