/* Szenarioheld – Farbschicht „Ja mehr Farbe“ (Simon, 22.10.2026).
   Bringt die Palette der Farbstudie auf alle Seiten: lindgrüner Einstieg, kobaltblaue Produktbühne,
   eigene Farbe je Unterseite, fünf Lernfarben. Wird nach site.css/farbstudie.css/integration.css geladen.
   Farbbänder laufen über die volle Breite (box-shadow + clip-path), ohne horizontalen Überlauf. */
:root{
 --lind:#e6f4bb;--limette:#d8f58c;--lind-tief:#3d5a12;
 --kobalt:#2845e8;--kobalt-tief:#1a2fb5;--kobalt-hell:#e5edfc;
 --lavendel:#ece4ff;--violett:#5938aa;
 --himmel:#cfe3ff;--rosa:#f6d3e5;--minze:#c9ebdc;
 --graphit:#171e2a;--porzellan:#fafbf6;--magenta:#c42a67;
 --text-leise:#3f4a44
}
body{background:var(--porzellan)}
/* Vollbreites Farbband für Abschnitte im Inhaltsraster */
.unterseite main>section:first-child,
.seite-simon #oberflaechen,
.seite-lernwelt .roadmap,
.prose h1{box-shadow:0 0 0 100vmax var(--band-farbe,var(--lind));clip-path:inset(0 -100vmax);background:var(--band-farbe,var(--lind))}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline-color:var(--magenta)}

/* ---------- Kopf: aktuelle Seite sichtbar ---------- */
.site-header nav a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--kobalt);text-decoration-thickness:3px;text-underline-offset:8px}
.brandmark{background:var(--kobalt)}

/* ---------- Fuß: lindgrünes Schlussband, Gegenstück zum Einstieg ---------- */
.site-footer{background:var(--lind);border-top:0;color:var(--graphit);font-size:12px}
.site-footer .brand{color:var(--graphit)}
.site-footer .footer-links a{text-decoration:underline;text-decoration-color:#6f8a3a;text-underline-offset:5px}

/* ---------- Startseite ---------- */
.startseite .training-flow article{border-top:4px solid var(--kobalt)}
.startseite .training-flow article:nth-child(2){border-top-color:#7fb21f}
.startseite .training-flow article:nth-child(3){border-top-color:#7a52d6}
.startseite .number{display:inline-grid;place-items:center;min-width:34px;height:34px;border-radius:50%;background:var(--kobalt);color:#fff;font-weight:800}
.startseite .training-flow article:nth-child(2) .number{background:var(--limette);color:var(--graphit)}
.startseite .training-flow article:nth-child(3) .number{background:var(--violett)}
.startseite .modules span{background:var(--lind);border-color:#b9d27a;color:#22300f}
.startseite .modules span.voll{background:var(--lavendel);border-color:#c9b6f2;color:#3b2470}
.startseite .try:not(.hs-teaser){background:var(--kobalt);color:#fff}
.startseite .try:not(.hs-teaser) small{color:#e3e8ff}
.startseite .try:not(.hs-teaser) .button.dark{background:var(--limette);color:var(--graphit)}
.startseite .try:not(.hs-teaser) a:focus-visible{outline-color:var(--limette)}
.startseite .scope{background:linear-gradient(var(--porzellan) 0 62%,#eef6d6 62%)}
.startseite .closing{padding-bottom:95px}

/* ---------- Unterseiten: gemeinsame Grundtöne ---------- */
.unterseite h1 em,.unterseite h2 em{color:var(--kobalt)}
.unterseite main>section:first-child{padding-bottom:70px}
.unterseite .page-intro .einleitung,.unterseite .hero-lead{color:var(--text-leise)}
.unterseite main>section:first-child .eyebrow{color:#2f3a1c}
.unterseite main>section:first-child .quiet{color:var(--text-leise)}
.unterseite .knopf.sekundar{background:#ffffffb3;border-color:#8c9a75}
.unterseite .knopf.sekundar:hover{background:#fff}
.unterseite .geplant-box,.unterseite .offen{background:var(--lind);color:#2a3519}
.unterseite .geplant-box a,.unterseite .offen a,.unterseite .editorial-section p a,.unterseite .faq a,.unterseite .section-top p a,.unterseite .steps a,.prose a{text-decoration:underline;text-underline-offset:4px}
.unterseite .eyebrow .tiny-mark{background:var(--kobalt)}

/* Produktbühne auf Unterseiten: Kobalt mit Raster wie in der Startinszenierung */
.unterseite .product-stage{background:var(--kobalt);overflow:hidden;box-shadow:0 30px 60px #1a2fb533}
.unterseite .product-stage::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.14;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(transparent,#000)}
.unterseite .product-stage .stage-word{color:#4a64f0}
.unterseite .product-stage .device{position:relative;width:84%;will-change:auto}
.unterseite .product-stage .device-phone{right:5%;bottom:28px}
.unterseite .product-stage figcaption{background:var(--limette);border-color:transparent;color:var(--graphit)}
.unterseite .product-stage .stage-dot{background:var(--kobalt)}
.unterseite .product-stage .source-label{color:#e3e8ff}

/* ---------- SimOn ---------- */
.seite-simon #oberflaechen{--band-farbe:var(--kobalt);color:#fff;margin-top:0}
.seite-simon #oberflaechen .eyebrow{color:#e3e8ff}
.seite-simon #oberflaechen h2 em{color:var(--limette)}
.seite-simon #oberflaechen .role-copy>p{color:#eef1ff}
.seite-simon #oberflaechen .role-tabs{border-top-color:#6c82f2}
.seite-simon #oberflaechen .role-tabs button{color:#e3e8ff;border-bottom-color:#6c82f2}
.seite-simon #oberflaechen .role-tabs button[aria-selected=true]{color:#fff}
.seite-simon #oberflaechen .role-tabs button[aria-selected=true] span{color:var(--limette)}
.seite-simon #oberflaechen .role-panel{background:var(--kobalt-tief)}
.seite-simon #oberflaechen .role-panel figcaption{color:#e3e8ff}
.seite-simon #oberflaechen :focus-visible{outline-color:var(--limette)}
.seite-simon .steps>li{border-top:0;border-radius:16px;padding:26px 26px 30px;background:var(--lind)}
.seite-simon .steps>li:nth-child(2){background:var(--himmel)}
.seite-simon .steps>li:nth-child(3){background:var(--lavendel)}
.seite-simon .steps li>span{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--graphit);color:#fff;font-weight:800}
.seite-simon .steps h3{margin-top:22px}
.seite-simon .steps p{color:#2f3940}

/* ---------- Lernwelt: Lavendel-Einstieg, fünf Lernfarben, violetter Ausblick ---------- */
.seite-lernwelt{--band-farbe:var(--lavendel)}
.seite-lernwelt h1 em,.seite-lernwelt h2 em{color:var(--violett)}
.seite-lernwelt main>section:first-child .eyebrow{color:#3b2470}
.seite-lernwelt .knopf{background:var(--violett)}
.seite-lernwelt .knopf:hover{background:#45288c}
.seite-lernwelt .learning-sculpture .spark{font-size:35px;color:var(--violett);top:auto;right:auto}
.seite-lernwelt .learning-sculpture .s1{bottom:55px;left:35px}
.seite-lernwelt .learning-sculpture .s2{right:18px;top:135px;left:auto;bottom:auto}
.seite-lernwelt .sculpture-cube{background:linear-gradient(140deg,#c9b2fb,#8a63e0);box-shadow:7px 12px 0 #6a43c4,20px 32px 30px #4a375c20;color:#2a1650}
.seite-lernwelt .sculpture-token{background:linear-gradient(130deg,#ecfcb4,#c3e765);box-shadow:7px 7px 0 #8fb43a}
.seite-lernwelt .sculpture-pill{background:#b5d7ff;box-shadow:4px 6px 0 #6f9fe0;color:#192f5a}
.seite-lernwelt .sculpture-label{color:#3b2470}
.seite-lernwelt .game-section{padding-top:80px}
.seite-lernwelt .game-filters button{border-color:#b9acd6;color:#3b2470;background:#fff}
.seite-lernwelt .game-filters button[aria-pressed=true]{background:#252039;border-color:#252039;color:#fff}
.seite-lernwelt .game-card{--karte:#d9c5fa;--karte-tief:#c3a6f6;--karte-text:#2e1a4d;background:var(--karte);border:0;color:var(--karte-text)}
.seite-lernwelt .game-card:nth-child(2){--karte:#b5d7ff;--karte-tief:#93c2fb;--karte-text:#142a55}
.seite-lernwelt .game-card:nth-child(3){--karte:#dcf197;--karte-tief:#c6e46a;--karte-text:#22361c}
.seite-lernwelt .game-card:nth-child(4){--karte:#f3c7df;--karte-tief:#eaa8cb;--karte-text:#4c2239}
.seite-lernwelt .game-card:nth-child(5){--karte:#bfe7d6;--karte-tief:#9bd8bd;--karte-text:#1b4232}
.seite-lernwelt .game-card .game-art{margin:0;background:var(--karte-tief)}
.seite-lernwelt .game-card .game-subtitle,.seite-lernwelt .game-body>p:not(.game-subtitle){color:var(--karte-text)}
.seite-lernwelt .game-tag{background:#ffffffc7;color:var(--karte-text)}
.seite-lernwelt .game-action{border-top-color:#0000002e}
.seite-lernwelt .game-card:hover{box-shadow:0 16px 30px #2a1a4d1f}
.seite-lernwelt .quiz-card.one{background:#6a37c1;box-shadow:4px 8px 0 #ac8cde}
.seite-lernwelt .quiz-card.two{background:#f9f6ff;color:#6841a9;box-shadow:3px 6px 0 #a283d8}
.seite-lernwelt .quiz-dot{background:var(--limette)}
.seite-lernwelt .city-art img{filter:none}
.seite-lernwelt .capsule{border-color:#324b22;background:#f9ffe8;box-shadow:0 10px 0 #7fa53a}
.seite-lernwelt .capsule i{background:#4e7339}
.seite-lernwelt .orbit-pill{border-color:#4e7339}
.seite-lernwelt .tower{background:linear-gradient(90deg,#d16a9f,#9b3a6c);box-shadow:10px 12px 0 #9b3a6c33}
.seite-lernwelt .t2{background:linear-gradient(90deg,#e48bb8,#b84d84)}
.seite-lernwelt .game-grid{background-image:linear-gradient(#9b3a6c33 1px,transparent 1px),linear-gradient(90deg,#9b3a6c33 1px,transparent 1px)}
.seite-lernwelt .station{background:linear-gradient(90deg,#f4fbf7,#cfe9dc);color:#1b4232}
.seite-lernwelt .station-roof{background:#2f7a5a}
.seite-lernwelt .station-path{background:#7cc4a5}
.seite-lernwelt .roadmap{--band-farbe:var(--violett);color:#fff;border-top:0;margin-bottom:0;padding-block:80px 90px}
.seite-lernwelt .roadmap .eyebrow{color:#ece4ff}
.seite-lernwelt .roadmap h2 em{color:var(--limette)}
.seite-lernwelt .roadmap p{color:#f1ecff}
.seite-lernwelt .roadmap-label{border-color:#cdbcf5;color:#fff}
.seite-lernwelt .roadmap::after{color:var(--limette);opacity:.85}

/* ---------- Shop: Rosé-Einstieg, farbige Materialstudie ---------- */
.seite-shop{--band-farbe:var(--rosa)}
.seite-shop main>section:first-child .eyebrow{color:#4c2239}
.seite-shop .block-art i:nth-child(1){background:linear-gradient(135deg,#5d78ff,var(--kobalt))}
.seite-shop .block-art i:nth-child(2){background:linear-gradient(135deg,#f0ffc2,#b9df52)}
.seite-shop .block-art i:nth-child(3){background:linear-gradient(135deg,#fbe3ef,#e48bb8)}
.seite-shop .geplant-box{background:var(--rosa);color:#4c2239}

/* ---------- Anleitung: Himmelblau, farbige Aufklapper ---------- */
.seite-anleitung{--band-farbe:var(--himmel)}
.seite-anleitung main>section:first-child{padding-bottom:0;box-shadow:none;clip-path:none;background:none}
.seite-anleitung .page-intro{box-shadow:0 0 0 100vmax var(--himmel);clip-path:inset(0 -100vmax);background:var(--himmel);margin-bottom:60px}
.seite-anleitung main>section:first-child .eyebrow{color:#142a55}
.seite-anleitung .support-layout aside{background:var(--lind);border-radius:16px;padding:26px;align-self:start;color:#2a3519}
.seite-anleitung .faq{border-top:0;border-radius:14px;background:#fff;margin-bottom:12px;padding-inline:22px;border-left:6px solid var(--himmel)}
.seite-anleitung .faq:last-child{border-bottom:0}
.seite-anleitung .faq[open]{border-left-color:var(--kobalt);background:var(--kobalt-hell)}
.seite-anleitung .faq>div{color:#2f3940}
.seite-anleitung .faq summary span{color:var(--kobalt)}
.seite-anleitung code{background:#fff}

/* ---------- Über & Kontakt: Minze ---------- */
.seite-ueber{--band-farbe:var(--minze)}
.seite-ueber main>section:first-child{box-shadow:none;clip-path:none;background:none;padding-bottom:0}
.seite-ueber .page-intro{box-shadow:0 0 0 100vmax var(--minze);clip-path:inset(0 -100vmax);background:var(--minze);margin-bottom:30px}
.seite-ueber .page-intro .eyebrow{color:#1b4232}
.seite-ueber .editorial-section h2 em{color:#1f7a55}

/* ---------- Lesetexte (Impressum, Datenschutz): ruhiger Kopf in Lindgrün ---------- */
.unterseite main>section.prose:first-child{box-shadow:none;clip-path:none;background:none;padding-top:0}
.prose h1{padding-block:60px 50px;margin-bottom:40px}
.prose h2{padding-left:16px;border-left:5px solid var(--kobalt)}

@media(max-width:960px){
 .seite-simon .steps>li{padding:22px}
 .unterseite .product-stage .device{width:90%}
}
@media(max-width:760px){
 .startseite .number{min-width:30px;height:30px}
 .startseite .scope{background:var(--porzellan)}
 .unterseite main>section:first-child{padding-bottom:50px}
 .prose h1{padding-block:40px 34px}
 .seite-anleitung .page-intro,.seite-ueber .page-intro{margin-bottom:34px}
 .seite-anleitung .faq{padding-inline:16px}
 .seite-lernwelt .roadmap{padding-block:56px 64px}
}
@media(max-width:680px){
 .unterseite .product-stage{overflow:hidden}
 .unterseite .product-stage .device{width:92%}
}
@media(forced-colors:active){.unterseite main>section:first-child,.seite-simon #oberflaechen,.seite-lernwelt .roadmap,.prose h1{box-shadow:none}}
/* Schmale Handys: SimOn-Einstieg passte schon vorher nicht in 320 px („Möglichkeiten.“) */
.product-hero>div{min-width:0}
@media(max-width:370px){.unterseite .product-hero .page-intro h1{font-size:37px;letter-spacing:-2px}}

/* ---------- SimOn-Seite neu (22.10.2026): Sprungleiste, Set, Debriefing, Editionen ---------- */
.sim-sprung{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.sim-sprung a{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border-radius:999px;background:#ffffffb3;border:1px solid #b9d27a;color:var(--graphit);font-size:13px;font-weight:700;text-decoration:none}
.sim-sprung a:hover{background:#fff}
.seite-simon .sim-set{--band-farbe:var(--kobalt);box-shadow:0 0 0 100vmax var(--kobalt);clip-path:inset(0 -100vmax);background:var(--kobalt);color:#fff;padding-block:90px}
.sim-set .eyebrow{color:#e3e8ff}.sim-set h2 em{color:var(--limette)}.sim-set .section-top p{color:#eef1ff}
.set-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.set-karte{display:flex;flex-direction:column;background:#fff;color:var(--graphit);border-radius:18px;overflow:hidden;box-shadow:0 18px 40px #0b145333}
.set-karte figure{margin:0;aspect-ratio:16/10;background:#0e1424;overflow:hidden}
.set-karte img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block;transition:transform .5s}
.set-karte:hover img{transform:scale(1.04)}
.set-karte>div{padding:20px 22px 24px}
.set-karte h3{margin:10px 0 6px;font-size:20px}.set-karte p{margin:0;color:#3f4a44;font-size:15px;line-height:1.5}
.set-karte.gross{grid-column:span 2;flex-direction:row}.set-karte.gross figure{flex:1.5;aspect-ratio:auto;min-height:280px}.set-karte.gross>div{flex:1;align-self:center}
.set-karte.ohne-bild{flex-direction:row;align-items:flex-start;background:var(--lind)}.set-karte.ohne-bild:nth-last-child(1){background:var(--lavendel)}
.set-symbol{flex:none;width:58px;height:58px;margin:22px 0 0 22px;border-radius:16px;display:grid;place-items:center;background:var(--graphit);color:var(--limette);font-size:28px}
.set-tag{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--lind);color:#2f3a1c;font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase}
.set-tag.voll{background:var(--lavendel);color:#3b2470}
.set-karte.ohne-bild .set-tag{background:#fff}
.sim-debriefing{box-shadow:0 0 0 100vmax var(--lavendel);clip-path:inset(0 -100vmax);background:var(--lavendel);padding-block:90px}
.debriefing-raster{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.sim-debriefing h2 em{color:var(--violett)}.sim-debriefing .eyebrow{color:#3b2470}
.haken{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
.haken li{position:relative;padding-left:34px;line-height:1.5}
.haken li::before{content:'✓';position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--violett);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800}
.debriefing-bild{margin:0;background:#fff;border-radius:18px;padding:10px;box-shadow:0 24px 50px #3b247033;transform:rotate(1deg)}
.debriefing-bild img{width:100%;height:auto;border-radius:10px;display:block}
.debriefing-bild figcaption{font-size:12px;color:#5a4a7a;padding:8px 6px 2px}
.tabelle-rahmen{overflow-x:auto;border-radius:16px;background:#fff;box-shadow:0 10px 30px #171e2a14;margin-top:30px}
table.editionen{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
table.editionen th,table.editionen td{padding:13px 18px;text-align:left;border-bottom:1px solid #e6e8e1;vertical-align:top}
table.editionen thead th{background:var(--graphit);color:#fff;font-size:13px;letter-spacing:.4px;text-transform:uppercase}
table.editionen thead th:nth-child(3){background:var(--kobalt)}
table.editionen td{font-weight:700;width:22%}
table.editionen td:last-child{background:#f1f4ff;color:var(--kobalt-tief)}
.probe-block{margin-top:34px;background:var(--lind);border-radius:20px;padding:28px 30px;max-width:820px}.probe-block h3{margin:6px 0 10px;font-size:24px}.probe-block p{margin:0 0 16px}
@media(max-width:680px){.probe-block{padding:22px 18px}}
.editionen-aktion{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:28px}
.sim-anleitung{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:end;background:var(--lind);border-radius:24px;padding:48px;margin-block:30px 90px}
.sim-anleitung h2 em{color:var(--kobalt)}
@media(max-width:960px){.set-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.debriefing-raster{grid-template-columns:1fr;gap:36px}.sim-anleitung{grid-template-columns:1fr}}
@media(max-width:680px){.set-grid{grid-template-columns:1fr}.set-karte.gross{grid-column:auto;flex-direction:column}.set-karte.gross figure{aspect-ratio:16/10;min-height:0}.seite-simon .sim-set,.sim-debriefing{padding-block:60px}.sim-anleitung{padding:30px 24px}.debriefing-bild{transform:none}}

/* ---------- Lernwelt: echte Vorschaubilder (22.10.2026) ---------- */
.seite-lernwelt .game-art.vorschau-art{padding:0;aspect-ratio:16/10;height:auto;overflow:hidden;position:relative}
.seite-lernwelt .vorschau-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.seite-lernwelt .vorschau-art::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 6px var(--karte-tief);border-radius:inherit;pointer-events:none}
.seite-lernwelt .game-card:hover .vorschau-art img,.seite-lernwelt .game-card:focus-within .vorschau-art img{transform:scale(1.05)}

/* ---------- Kontakt mit Foto (22.10.2026) ---------- */
.kontakt-raster{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:56px;align-items:center;padding-block:80px}
.kontakt-bild{margin:0;position:relative}
.kontakt-bild img{width:100%;height:auto;border-radius:22px;display:block;box-shadow:14px 14px 0 var(--limette),0 24px 50px #171e2a26}
.kontakt-bild figcaption{margin-top:22px;font-size:13px;color:var(--text-leise)}
.kontakt-text h2 em{color:var(--kobalt)}
.kontakt-text p{max-width:56ch;line-height:1.6}
.mail-knopf{margin-block:12px 22px;font-size:18px}
.kontakt-text address{font-style:normal;color:var(--text-leise);line-height:1.6}
@media(max-width:760px){.kontakt-raster{grid-template-columns:1fr;gap:36px;padding-block:50px}.kontakt-bild{max-width:300px}}

/* ---------- Shop mit Sortiment (22.10.2026) ---------- */
.produkt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:34px}
.produkt{background:#fff;border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 30px #171e2a12;border-top:6px solid var(--kobalt)}
.produkt:nth-child(3n+2){border-top-color:#7fb21f}.produkt:nth-child(3n){border-top-color:var(--violett)}
.produkt h3{margin:0;font-size:20px}.produkt p{margin:0;color:#3f4a44;line-height:1.5;font-size:15px}
.produkt .preis{margin-top:auto;font-size:26px;font-weight:800;color:var(--graphit)}
.produkt .art{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--text-leise)}
.produkt.bald{background:#f6f7f2;box-shadow:none;border-top-style:dashed}
.shop-hinweis{font-size:13px;color:var(--text-leise);margin-top:18px}
@media(max-width:960px){.produkt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.produkt-grid{grid-template-columns:1fr}}

/* ---------- Eigene Motive (23.10.2026): Inline-SVG statt generischer Zeichen ---------- */
.motiv{display:block;width:100%;height:auto}
.seite-lernwelt .sculpture-cube .motiv{width:76%;transform:rotate(16deg);color:#2a1650}
.seite-lernwelt .sculpture-token .motiv{width:64%;transform:rotate(-14deg);color:#22361c}
.seite-lernwelt .sculpture-pill .motiv{width:72%;transform:rotate(-20deg);color:#192f5a}
.seite-lernwelt .roadmap::after{content:none}
.roadmap-motiv{position:absolute;right:90px;top:60px;width:150px;color:#fff;opacity:.9;transform:rotate(12deg)}
.roadmap-label[href]{text-decoration:none}.roadmap-label[href]:hover{background:#ffffff1f}
@media(max-width:760px){.roadmap-motiv{width:76px;right:22px;top:26px;opacity:.6}}

/* ---------- Lernwelt: Heldenschmiede als DAS Lerntool (Simon, 23.10.2026: „fett bewerben“, ersetzt die drei Wege) ---------- */
.hs-feature{--hs-band:#24124f;position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-block:88px 96px;color:#fff;
 background:var(--hs-band);box-shadow:0 0 0 100vmax var(--hs-band);clip-path:inset(0 -100vmax);
 background-image:radial-gradient(700px 420px at 85% 20%,#6a3fd055,transparent 70%),radial-gradient(520px 360px at 0% 100%,#c42a6740,transparent 70%)}
.hs-feature>*{min-width:0}
.hs-badge{display:inline-flex;align-items:center;gap:8px;background:var(--limette);color:#1f2a08;font-weight:900;font-size:13px;letter-spacing:.5px;text-transform:uppercase;padding:8px 14px;border-radius:999px}
.hs-badge::before{content:'';width:9px;height:9px;border-radius:50%;background:#c42a67;box-shadow:0 0 0 4px #c42a6733}
.hs-titel{white-space:nowrap;overflow-wrap:normal;margin:22px 0 0;font-size:clamp(52px,7.4vw,104px);line-height:.92;letter-spacing:-.05em;font-weight:900;color:#fff;max-width:none}
.hs-claim{margin:16px 0 0;font-size:clamp(24px,2.6vw,34px);line-height:1.2;font-weight:800;color:#e9e1ff}
.hs-claim em{color:var(--limette);font-style:normal}
.hs-punkte{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:12px;max-width:52ch}
.hs-punkte li{position:relative;padding-left:34px;font-size:16px;line-height:1.5;color:#e3dcf7}
.hs-punkte li b{color:#fff}
.hs-punkte li::before{content:'✓';position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:7px;background:var(--limette);color:#24124f;font-weight:900;font-size:14px;display:grid;place-items:center}
.hs-aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:36px}
.hs-knopf{display:inline-flex;align-items:center;gap:14px;background:var(--limette);color:#1f2a08;font-weight:900;font-size:19px;padding:18px 30px;border-radius:16px;text-decoration:none;box-shadow:0 7px 0 #7fa62a,0 18px 40px #0006;transition:transform .12s,box-shadow .12s}
.hs-knopf:hover{transform:translateY(-2px);box-shadow:0 9px 0 #7fa62a,0 22px 44px #0007}
.hs-knopf:active{transform:translateY(5px);box-shadow:0 2px 0 #7fa62a}
.hs-link{color:#e9e1ff;font-weight:700;font-size:15px;text-decoration:underline;text-underline-offset:4px}
.hs-buehne{position:relative;height:430px}
.hs-karte{position:absolute;inset:40px 30px 30px 50px;border-radius:26px;background:#fff;box-shadow:0 30px 60px #0007}
.hs-k3{transform:rotate(9deg) translate(26px,8px);background:#8e6fe0;opacity:.55}
.hs-k2{transform:rotate(4deg) translate(12px,4px);background:#d8f58c;opacity:.85}
.hs-k1{transform:rotate(-3deg);display:flex;flex-direction:column;gap:16px;padding:30px;color:var(--graphit)}
.hs-tag{align-self:flex-start;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;color:#5938aa;background:var(--lavendel);padding:6px 12px;border-radius:8px}
.hs-alarm{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:900;line-height:1.2}
.hs-alarm-motiv{width:34px;flex:none;color:#e3342f}
.hs-schritte{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hs-schritte li{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:#f3f1f8;font-weight:800;font-size:15px}
.hs-schritte li::before{content:'';width:12px;height:12px;border-radius:50%;background:#c9c2da}
.hs-schritte li.ok::before{background:#7fb21f}
.hs-schritte li.jetzt{background:#24124f;color:#fff}.hs-schritte li.jetzt::before{background:var(--limette);box-shadow:0 0 0 4px #d8f58c55}
.hs-ida{margin-top:auto;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;color:#3f4a44;background:var(--lind);border-radius:14px;padding:12px 14px}
.hs-ida-motiv{width:38px;height:38px;flex:none;padding:6px;border-radius:50%;background:#fff;color:#2a1650}
.seite-lernwelt .game-section{padding-top:70px}
@media(max-width:960px){.hs-feature{grid-template-columns:minmax(0,1fr);gap:30px;padding-block:64px 70px}.hs-buehne{height:380px;max-width:480px;width:100%}}
@media(max-width:560px){.hs-titel{font-size:clamp(30px,9.2vw,60px)}.hs-badge{font-size:11px}.hs-buehne{height:340px}.hs-karte{inset:30px 12px 20px 22px}.hs-k1{padding:22px;gap:12px}.hs-alarm{font-size:18px}.hs-knopf{font-size:17px;padding:16px 22px;width:100%;justify-content:center}.hs-punkte li{font-size:15px}}
@media(forced-colors:active){.hs-feature{box-shadow:none}}
.lw-fuer-schulen{padding-block:10px 60px}.lw-fuer-schulen p{font-size:14px;color:var(--text-leise)}.lw-fuer-schulen a{text-decoration:underline}
.brand-zusatz{font-weight:600;color:var(--violett);margin-left:2px}
.lernwelt-start .brandmark{background:var(--violett)}
.lernwelt-start .site-header nav a[aria-current=page]{text-decoration-color:var(--violett)}

/* ---------- Ultraschall (23.10.2026): Meerblau, wie SimOn aufgebaut ---------- */
:root{--meer:#0b5f6b;--meer-tief:#073f48;--meer-hell:#d4f0ee;--meer-akzent:#7fe0d4}
.seite-ultraschall{--band-farbe:var(--meer-hell)}
.seite-ultraschall h1 em,.seite-ultraschall h2 em{color:var(--meer)}
.seite-ultraschall .eyebrow .tiny-mark{background:var(--meer)}
.seite-ultraschall main>section:first-child .eyebrow{color:var(--meer-tief)}
.seite-ultraschall .knopf{background:var(--meer)}.seite-ultraschall .knopf:hover{background:var(--meer-tief)}
.seite-ultraschall .knopf.sekundar{background:#fff;color:var(--meer-tief)}
.seite-ultraschall .sim-sprung a{border-color:#8fd0c8}
.us-buehne{position:relative;margin:0;min-width:0;height:450px;border-radius:32px;background:radial-gradient(ellipse at 70% 0,#14808c 0,transparent 65%),var(--meer-tief);display:flex;align-items:center;justify-content:center;box-shadow:0 30px 60px #073f4833;overflow:hidden}
.us-schirm{position:relative;width:74%;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 0 0 8px #0e1a1f,0 24px 50px #0008}
.us-schirm img{display:block;width:100%;height:auto}
.us-ecke{position:absolute;top:10px;font:700 11px/1.2 Manrope,Arial,sans-serif;color:#e8f4f2;letter-spacing:.3px}
.us-ecke-l{left:12px}.us-ecke-r{right:12px}
.us-sonde{position:absolute;right:5%;bottom:7%;width:92px;color:#e8f4f2;transform:rotate(-14deg);filter:drop-shadow(0 8px 14px #0006)}
.us-buehne figcaption{position:absolute;left:24px;bottom:24px;display:inline-flex;align-items:center;gap:9px;background:var(--meer-akzent);color:var(--meer-tief);font-size:11px;font-weight:700;padding:9px 13px;border-radius:20px}
.us-buehne .stage-dot{background:var(--meer-tief)}
.seite-ultraschall .us-reihe{box-shadow:0 0 0 100vmax var(--meer);clip-path:inset(0 -100vmax);background:var(--meer);color:#fff;padding-block:90px}
.us-reihe .eyebrow{color:#cdeeea}.us-reihe h2 em{color:var(--meer-akzent)!important}.us-reihe .section-top p{color:#e3f6f3}
.us-reihe .set-karte{box-shadow:0 18px 40px #02242a40}
.us-platzhalter{flex:1.5;min-height:280px;display:grid;place-items:center;background:repeating-linear-gradient(135deg,#0e6f7b 0 14px,#0c6672 14px 28px)}
.us-platzhalter .motiv{width:140px;color:#e8f4f2;filter:drop-shadow(0 10px 18px #0005)}
.set-tag.bald{background:#fde3e1;color:#8c1d18}
.us-bald .text-link{display:inline-block;margin-top:14px}
.us-folgt{background:#f3f6f5!important;border:2px dashed #9cc9c3;box-shadow:none!important}
.us-folgt .set-symbol{background:#fff;padding:10px}
.seite-ultraschall .haken li::before{background:var(--meer)}
.seite-ultraschall .us-heute .debriefing-bild{transform:rotate(-1deg);box-shadow:0 24px 50px #073f4833}
.seite-ultraschall .us-heute .actions{margin-top:28px}
.seite-ultraschall .steps>li{border-top:0;border-radius:16px;padding:26px 26px 30px;background:var(--meer-hell)}
.seite-ultraschall .steps>li:nth-child(2){background:var(--himmel)}
.seite-ultraschall .steps>li:nth-child(3){background:var(--lind)}
.seite-ultraschall .steps li>span{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--meer-tief);color:#fff;font-weight:800}
.seite-ultraschall .steps h3{margin-top:22px}
.us-kontakt{background:var(--meer-hell)}.us-kontakt h2 em{color:var(--meer)}
@media(max-width:960px){.us-buehne{height:400px}}
@media(max-width:680px){.us-buehne{height:320px;border-radius:22px}.us-schirm{width:82%}.us-sonde{width:60px}.us-platzhalter{min-height:200px;flex:none}.seite-ultraschall .us-reihe{padding-block:56px}}

/* ---------- Startseite: Ultraschall-Teaser und ruhigere Lernwelt (23.10.2026) ---------- */
.us-start{padding:90px 6%;background:var(--meer-tief);color:#fff}
.us-start-innen{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.us-start h2{font-size:clamp(38px,4.2vw,68px);line-height:1.08;letter-spacing:-3px;margin:20px 0 0}
.us-start h2 span{color:var(--meer-akzent)}
.us-start .eyebrow{color:#cdeeea}
.us-start p{max-width:46ch;font-size:15px;line-height:1.7;color:#e3f6f3;margin:24px 0 30px}
.us-start-bild{position:relative;margin:0;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 0 0 8px #0e1a1f,0 30px 60px #0007;max-height:440px}
.us-start-bild img{display:block;width:100%;height:auto}
.us-start-sonde{position:absolute;right:16px;bottom:16px;width:70px;color:#e8f4f2;transform:rotate(-12deg)}
.lern-ruhig{background:#f4f2fa}
.lern-kurz{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.lern-kurz-karte{display:flex;flex-direction:column;gap:6px;background:#fff;border-radius:16px;padding:26px;color:var(--graphit);text-decoration:none;border:1px solid #e3def0;transition:box-shadow .2s}
.lern-kurz-karte:hover{box-shadow:0 14px 30px #2a1a4d1a}
.lern-kurz-motiv{width:54px;height:54px;padding:9px;border-radius:14px;background:var(--lavendel);color:#2a1650;margin-bottom:8px}
.lern-kurz-karte h3{margin:4px 0 0;font-size:22px}.lern-kurz-karte p{margin:0;font-size:14px;line-height:1.6;color:#3f4a44}
.lern-kurz-karte .eyebrow{font-size:10px;color:#5a4a7a}
@media(max-width:860px){.us-start-innen,.lern-kurz{grid-template-columns:1fr;gap:36px}.us-start{padding:60px 6%}}
.us-platzhalter{align-self:stretch!important}
.us-folgt{grid-column:1/-1}
.us-geraet{max-width:360px;justify-self:center;background:#0e1a1f}
.us-geraet figcaption{color:#cfe3e0}
/* POCUS-Simulator (23.10.2026) */
.us-pocus .debriefing-raster{grid-template-columns:1.1fr 1fr}
.us-pocus .debriefing-bild{transform:rotate(-1deg);box-shadow:0 24px 50px #073f4833;background:#0e1a1f}
.us-pocus .debriefing-bild figcaption{color:#cfe3e0}
.us-schritte{margin:24px 0 0;padding:18px 22px 18px 42px;background:var(--meer-hell);border-radius:14px;line-height:1.7}
.us-pocus .actions{margin-top:24px}.us-pocus .quiet{margin-top:16px;font-size:13px}
.seite-ultraschall .us-reihe .set-karte.gross figure{background:#0e1a1f}
@media(max-width:960px){.us-pocus .debriefing-raster{grid-template-columns:1fr}}
