/* Lernmodul (Schüler-Seite): Gestaltung der HTML-Mission, angelehnt an die Farben, Karten und Schriften von www26.bhv.at (Inter, Barlow Condensed, Satisfy liegen lokal in css/fonts.css) */

:root{--ink:#101820;--night:#090e13;--gold:#d0bd8c;--praxis:#fcebc1;--paper:#f5f9fc;--muted:#536373;--line:#dbe3e9;--cyan:#21b9ef;--teal:#00797b;--ok:#176440;--red:#b33737;--radius:20px;--font:'Inter',system-ui,sans-serif;--headline:'Barlow Condensed',Impact,sans-serif;--hand:'Satisfy',cursive}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 var(--font)}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.44}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #00797b;outline-offset:4px}a{color:#005f70}h1,h2,h3{line-height:1.1}h1,h2{font-family:var(--headline);letter-spacing:-.025em}h1{font-size:clamp(48px,7vw,90px);margin:.15em 0}h2{font-size:clamp(32px,4vw,46px);margin:.35em 0 .6em}h3{font-size:20px;line-height:1.4}p{margin:.8em 0}img{display:block;max-width:100%}code,pre,textarea.code-input{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}code{font-size:.94em}pre{tab-size:2;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;font-size:14px;line-height:1.7}input[type=checkbox],input[type=radio]{accent-color:var(--teal);width:22px;height:22px;flex:0 0 auto}input[type=text]{width:100%;padding:13px 15px;border:1px solid #abb9c4;border-radius:10px;background:white;font-size:16px}.skip-link{position:absolute;left:12px;top:-100px;background:white;padding:12px;z-index:99}.skip-link:focus{top:12px}.shell{max-width:1160px;margin:auto;padding:0 24px}.topbar{background:var(--night);color:#fff;border-bottom:1px solid #29343c}.topbar .shell{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:14px}.brand{font-size:14px;font-weight:800;letter-spacing:.04em}.brand span{color:var(--gold)}.meta{color:#aab7c1;font-size:12px;letter-spacing:.08em}.hero{background:var(--ink);color:white;overflow:hidden;position:relative;padding:36px 0 44px}.hero-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:32px;align-items:center}.eyebrow{font-size:11px;letter-spacing:.17em;font-weight:800;text-transform:uppercase;color:#776139}.hero .eyebrow{color:var(--gold)}.hero h1 .z2{color:var(--praxis)}.hero-copy{color:#cdd7de;max-width:550px}.hero-image{width:100%;height:auto;border-radius:var(--radius);aspect-ratio:16/10;object-fit:cover;box-shadow:0 22px 60px #0005}.hero-note{font-family:var(--hand);color:var(--gold);font-size:24px}.badges{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.badge{border:1px solid #53606a;border-radius:30px;padding:5px 11px;font-size:12px;color:#e2e9ed}.stages{position:sticky;top:0;z-index:20;background:#101820f5;color:white;backdrop-filter:blur(12px);box-shadow:0 8px 20px #00131f14}.stage-grid{display:flex;gap:8px;padding:12px 0;overflow-x:auto}.stage{white-space:nowrap;background:#1b2730;color:#c7d2db;border:1px solid #3b4852;border-radius:9px;min-height:44px;padding:9px 15px;font-size:13px;font-weight:700}.stage.active{color:var(--ink);background:var(--praxis);border-color:var(--praxis)}main.shell{padding-top:28px;padding-bottom:45px}.card{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,4vw,34px);box-shadow:0 14px 34px #07233408;margin:20px 0}.card.dark{background:var(--ink);color:white;border-color:#32404a}.card.dark .muted{color:#c3cfd9}.muted{font-size:13px;color:var(--muted)}.grid-two{display:grid;grid-template-columns:1fr 1fr;gap:22px}.form-row{display:grid;grid-template-columns:1.5fr 1fr;gap:18px}.form-row label{display:block;font-size:13px;font-weight:700;margin-bottom:5px}.btn{min-height:48px;padding:11px 19px;background:var(--ink);color:white;border:1px solid var(--ink);border-radius:10px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:10px}.btn.gold{background:var(--praxis);color:var(--ink);border-color:#e5d5ad}.btn.ghost{background:#eff4f6;color:var(--ink);border-color:#ced9e0}.btn.teal{background:var(--teal);border-color:var(--teal)}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:22px}.big-check{display:flex;gap:15px;align-items:flex-start;padding:22px;background:#f9f2e2;border:2px solid var(--gold);border-radius:14px;font-weight:800;font-size:clamp(18px,3vw,23px);line-height:1.5;cursor:pointer}.big-check input{margin-top:5px}.big-check small{display:block;font-size:13px;font-weight:400;margin-top:8px}.error{color:var(--red);font-weight:700}.success{color:var(--ok);font-weight:700}.feedback{padding:15px 18px;border-radius:12px;background:#eff7f4;border-left:4px solid var(--ok)}.feedback.error{background:#fff2ef;border-left-color:var(--red)}.chapter-row{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0}.chapter{border:1px solid #c8d5de;border-radius:8px;padding:5px 12px;min-width:38px;min-height:38px;background:white;color:var(--ink);font-weight:700}.chapter.active{background:var(--ink);color:var(--praxis);border-color:var(--ink)}.chapter.read:not(.active){border-color:#539879;background:#eef7f2}.progress-label{display:flex;justify-content:space-between;gap:14px;font-size:12px;color:var(--muted)}progress{width:100%;height:9px;accent-color:var(--teal);display:block;margin-top:8px}.lesson-text p{font-size:16px;line-height:1.85}.callout{border-left:4px solid var(--gold);padding:14px 18px;background:#faf6ec;margin:22px 0}.code-box{background:#101820;color:#fcebc1;border-radius:13px;padding:20px;min-width:0}.code-label{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#9fb2bf;font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}.preview{width:100%;height:270px;border:1px solid #d2dee5;border-radius:14px;background:#fff}.visual-label{margin:20px 0 8px;font-weight:700;font-size:12px;letter-spacing:.05em}.thought{font-size:15px;padding:18px;border-radius:12px;background:#eef5f9}.map{background:#f1f5f8;border:1px solid #cbd8e0;border-radius:16px;padding:15px;margin-top:22px}.map-frame{padding:12px;border:2px solid #708593;border-radius:11px;margin:9px 0}.map-frame.header-frame{border-color:#2a80ad;background:#edf8ff}.map-frame.main-frame{border-color:#288764;background:#eefaf4}.map-frame.section-frame{border-color:#8666ab;background:#f7f1fb}.map-frame.article-frame{border-color:#b99b51;background:#fff9e9}.map-frame.figure-frame{border-color:#478497;background:#eff9fc}.map-cols{display:grid;grid-template-columns:1.8fr 1fr;gap:12px}.map button{font:700 14px ui-monospace,monospace;background:#fff;border:1px solid #b5c7d0;border-radius:8px;min-height:40px;padding:7px 12px}.map button:hover,.map button.selected{background:#101820;color:#fcebc1}.map small{font-size:11px}.map-info{border:1px solid #ccdbe3;border-radius:12px;background:white;padding:15px;margin-top:14px;min-height:84px}fieldset{border:0;padding:0;margin:0;min-width:0}legend{font-weight:800;font-size:18px;line-height:1.6;width:100%;margin-bottom:16px}.option{display:flex;align-items:flex-start;gap:13px;border:1px solid #cdd8e1;border-radius:12px;padding:13px;margin:10px 0;cursor:pointer;transition:background .15s}.option:has(input:checked){background:#f8f1e0;border-color:#b6a06b}.option input{margin-top:4px}.option code{display:block;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;min-width:0;tab-size:2;line-height:1.9}.letter{display:block;font-weight:800;font-size:11px;color:#67767e;margin-bottom:4px}.option-wrap{min-width:0}.sticky-submit{position:sticky;bottom:12px;background:#fffefaf5;backdrop-filter:blur(12px);border:1px solid #d9cbaa;border-radius:16px;padding:15px;box-shadow:0 12px 30px #0719251a;z-index:10}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0}.stat{padding:20px;border:1px solid #d4dfe5;border-radius:14px;background:#fff}.stat strong{display:block;font:700 42px/1 var(--headline);color:var(--ink)}.stat span{font-size:12px;color:var(--muted)}.review-card{border-left:5px solid var(--red)}.review-card.ok{border-left-color:var(--ok)}.review-card.assist{border-left-color:#aa8138}.review-card h3{margin-top:4px}.round-intro{display:flex;gap:18px;align-items:center}.round-icon{font:700 55px/1 var(--headline);color:var(--gold)}.editor-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}.code-input{display:block;width:100%;min-height:200px;font-size:16px;line-height:1.8;padding:20px;background:#101820;color:#fff1cd;border:2px solid #52636f;border-radius:14px;resize:vertical;tab-size:2;white-space:pre-wrap;overflow-wrap:anywhere}.keybar{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.keybar button{min-width:43px;min-height:44px;font:700 19px ui-monospace,monospace;border:1px solid #afbec9;border-radius:8px;background:#fff;color:#101820}.code-label-input{display:block;font-weight:700;margin:20px 0 8px}.editor-help{font-size:12px;color:var(--muted)}.mission-step{display:flex;gap:15px;margin:15px 0}.mission-step strong{width:35px;height:35px;background:var(--praxis);border-radius:50%;display:grid;place-items:center;flex-shrink:0}.completion-img{height:auto;border-radius:16px;width:100%;max-height:420px;object-fit:cover}.finish-title{font-family:var(--hand);color:#7f673b;font-size:32px}.footer{border-top:1px solid #d6e0e7;padding:25px 0 40px;color:var(--muted);font-size:12px}.footer details{max-width:900px}.footer a{color:#005f70}summary{cursor:pointer;font-weight:700}#copyStatus{font-size:12px;min-height:20px}.lesson-heading:focus,.result-heading:focus{outline:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.coin{font-size:12px;border:1px solid #d5c18b;background:#faf3df;border-radius:20px;padding:3px 10px;color:#6d5625}#mcReview details{margin:12px 0}details pre{margin-top:12px}noscript{display:block;background:#fff1cd;padding:20px}[hidden]{display:none!important}@media(max-width:760px){.shell{padding-left:16px;padding-right:16px}.hero-grid{grid-template-columns:1fr;gap:23px}.hero{padding:24px 0 28px}.hero h1{max-width:520px}.hero-image{aspect-ratio:16/9}.hero-copy{font-size:14px}.hero-note{font-size:22px}.grid-two,.form-row{grid-template-columns:1fr}.card{padding:20px;border-radius:16px}.stage{padding:8px 11px;font-size:12px}.stage-grid{gap:6px}.map-cols{grid-template-columns:1fr}.stats{grid-template-columns:1fr}.stat{padding:14px;display:flex;align-items:center;gap:16px}.stat strong{font-size:33px}.meta{display:none}.code-input{padding:13px;min-height:190px}.actions .btn{flex-grow:1}.sticky-submit{bottom:6px}.lesson-text p{font-size:15px}.code-box{padding:14px}.progress-label{flex-wrap:wrap}.option{padding:12px 9px;gap:9px}.option code{font-size:13px}.big-check{padding:17px}.preview{height:245px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}@media print{.topbar,.hero,.stages,.footer,.actions,.keybar,#welcome,#learn,#multiple,#mcResult,#coding,.skip-link{display:none!important}body{background:white;color:black;font-size:10pt}main.shell{max-width:none;padding:0}#finish{display:block!important}.card{box-shadow:none;border:1px solid #ccc;break-inside:avoid;padding:15px}.completion-img{display:none}.stats{display:flex}.stat{flex:1}.code-box{background:#fff;color:#000;border:1px solid #ccc}pre{font-size:9pt}.finish-title{display:none}h2{font-size:25pt}h3{font-size:12pt}}
.result-archive{margin:24px 0;padding:20px;background:#f7f2e7;border:2px solid #d0bd8c;border-radius:14px;color:#101820;font:16px/1.65 system-ui,sans-serif}.result-archive h3{margin:0 0 10px;font-size:22px}.result-archive label{display:block;margin:14px 0 6px;font-size:14px}.result-archive input[type=email],.result-archive textarea{font:16px/1.7 system-ui,sans-serif;width:100%;padding:11px;border:1px solid #9aacb8;border-radius:8px;background:white;color:#101820}.result-archive input[type=email]{max-width:500px}.archive-actions{display:flex;flex-wrap:wrap;gap:10px;margin:15px 0}.archive-button{font:700 14px/1.5 system-ui,sans-serif;min-height:46px;padding:11px 17px;border:1px solid #263943;border-radius:9px;background:#101820;color:white;cursor:pointer}.archive-button:focus-visible{outline:3px solid #00797b;outline-offset:3px}.archive-status{font-size:14px;font-weight:700;min-height:24px}.result-archive .archive-ack{display:flex;align-items:flex-start;gap:12px;padding:14px;background:white;border:1px solid #d0bd8c;border-radius:9px;font-size:17px;font-weight:700;cursor:pointer}.archive-ack input{width:22px;height:22px;flex-shrink:0;margin-top:3px}.archive-overlay{position:fixed;inset:0;z-index:9999;background:#07111ccb;display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}.archive-overlay[hidden]{display:none!important}.archive-dialog{background:white;color:#101820;width:100%;max-width:650px;max-height:90dvh;overflow:auto;border-radius:16px;padding:24px;box-shadow:0 25px 90px #0005;font:16px/1.7 system-ui,sans-serif}.archive-dialog h2{font:700 28px/1.3 system-ui,sans-serif;margin:0 0 15px}.archive-dialog p{margin:10px 0}@media(max-width:600px){.archive-actions .archive-button{flex:1 1 100%}.result-archive{padding:16px}.archive-dialog{padding:20px}}@media print{.result-archive,.archive-overlay{display:none!important}}

.code-edit-row{display:grid;grid-template-columns:54px minmax(0,1fr);gap:8px;align-items:start}.code-edit-row textarea{min-width:0;width:100%}.duplicate-line{border:1px solid #abb9c4;border-radius:10px;background:#fff;color:var(--ink);min-height:60px;padding:5px 2px;line-height:1.15}.duplicate-line>span:first-child{display:block;font-size:25px}.duplicate-caption{font-size:10px;display:block;margin-top:3px}dialog.bug-popup{width:min(900px,94vw);max-height:92dvh;overflow:auto;padding:18px;border:0;border-radius:20px;color:var(--ink);background:var(--paper)}dialog.bug-popup::backdrop{background:rgba(9,14,19,.8)}.bug-popup img{width:100%;height:auto;border-radius:12px}.bug-popup h2{font-size:32px}.bug-popup .actions{justify-content:flex-end}@media(max-width:500px){dialog.bug-popup{padding:12px}}@media print{dialog.bug-popup{display:none}}.prep-playground{margin:24px 0;padding:20px;background:#f0f5f5;border:1px solid #c7d8d8;border-radius:16px}.prep-playground textarea{width:100%;min-width:0}.prep-playground h3{margin-top:0}@media(max-width:500px){.prep-playground{padding:12px}}.lesson-text{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.lesson-text p{margin:0;padding:14px;background:#eef3f4;border-radius:12px;line-height:1.85}.lesson-text strong{font-weight:800;color:#101820}@media(max-width:760px){.lesson-text{grid-template-columns:1fr;gap:10px}}.course-switch{background:#090e13;color:white;padding:12px 20px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}.course-switch button{border:1px solid #d0bd8c;border-radius:12px;padding:12px 20px;font-weight:bold;background:transparent;color:white}.course-switch button[aria-pressed="true"]{background:#d0bd8c;color:#101820}#cssCourse{display:block;width:100%;height:calc(100dvh - 90px);min-height:700px;border:0}#cssCourse[hidden],#htmlCourse[hidden]{display:none}#skipAllMC,#skipCurrentCode,#skipRestCode,.teacher-mode .teacher-only{display:none!important}.teacher-panel{margin:14px 0}.teacher-panel summary{font-weight:700}#teacherDiscussion select{border:1px solid #aab9c4;border-radius:10px}
/* ── Erweiterungen für die Anbindung an den Schulserver ── */
.topbar-rechts{display:flex;align-items:center;gap:10px}
.speicher{font-size:12px;font-weight:700;padding:4px 10px;border-radius:30px;border:1px solid #3b4852;color:#c7d2db;display:none}
.speicher.zeigen{display:inline-block}
.speicher.ok{color:#bff0d3;border-color:#2f7a53}
.speicher.warn{color:#ffe0a8;border-color:#a0874e}
.speicher.fehler{color:#ffc4be;border-color:#a8433c}
.topbar-knopf{min-height:34px;padding:4px 12px;border:1px solid #53606a;border-radius:9px;background:transparent;color:#e2e9ed;font-weight:700;font-size:12px}
.topbar-knopf:hover{background:#1b2730}
select{width:100%;padding:13px 15px;border:1px solid #abb9c4;border-radius:10px;background:white;font-size:16px;font-family:inherit}
.resume-box{margin:0 0 22px;padding:18px 20px;border:2px solid var(--gold);border-radius:14px;background:#f9f2e2}
.notice{margin-top:18px;padding:14px 18px;border-left:4px solid var(--cyan);background:#eef7fc;border-radius:0 12px 12px 0}
.notice p{margin:.4em 0 0}
.gespeichert{font-weight:800;padding:12px 16px;border-radius:12px;background:#eff7f4;border-left:4px solid var(--ok);margin:14px 0}
.gespeichert.warn{background:#fff7e6;border-left-color:#aa8138}
.gespeichert.fehler{background:#fff2ef;border-left-color:var(--red)}
.stage:disabled{opacity:.5}
.fehlerkarte .btn{margin-top:10px}
@media print{.topbar,.speicher{display:none!important}}

/* ── CSS-Einheit: Vorschau neben dem Editor, Schreibhelfer, Box-Modell-Grafik ── */
.css-layout{display:block}
body.css-modus .css-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.css-preview{height:600px}
.helfer-box{margin:14px 0;padding:14px 16px;border:1px solid #c7d8d8;border-radius:14px;background:#f0f5f5}
.helfer-box h3{margin:0 0 4px;font-size:16px}
.helfer-box .controls{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0}
.helfer-box label{font-size:13px;font-weight:700;display:grid;gap:4px}
.helfer-box select,.helfer-box input[type=color]{min-height:40px;border:1px solid #abb9c4;border-radius:8px;background:#fff}
.helfer-box input[type=color]{width:64px;padding:2px}
.helfer-box details{margin-top:10px}
.helfer-box .verlauf-vorschau{height:45px;border-radius:10px;margin:8px 0}
.css-box-margin{margin:18px 0;padding:16px;background:#fff1cf;border:2px dashed #c89a2b;border-radius:12px;font-weight:700}
.css-box-border{margin-top:10px;padding:16px;background:#e6f3ee;border:4px solid #00797b;border-radius:10px}
.css-box-content{margin-top:10px;padding:12px;background:#fff;border-radius:8px}
@media(max-width:760px){body.css-modus .css-layout{grid-template-columns:1fr}.css-preview{height:260px}}

/* Matura-Einheiten: Lernboxen mit Bildern, Lückentext statt Code-Editor */
.lesson-bilder{display:grid;gap:14px;margin:16px 0}.lesson-bilder:empty{display:none}
.lesson-bilder figure{margin:0;padding:10px;border:1px solid var(--line);border-radius:14px;background:#fff}
.lesson-bilder img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:8px}
.lesson-bilder figcaption{margin-top:8px;color:var(--muted);font-size:.9rem;line-height:1.45;text-align:center}
/* Bildnachweis (bilder[].quelle) und Personenfotos (bilder[].person): nebeneinander, Hochformat zugeschnitten */
.lesson-bilder .bild-quelle{display:block;margin-top:4px;font-size:.75rem;line-height:1.4;color:#6a7782}
.lesson-bilder .bild-quelle a{color:#005f70}
.lesson-bilder.personen{grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr))}
.lesson-bilder figure.person img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}
.lesson-bilder figure.person figcaption{font-weight:700;color:var(--ink)}
.lesson-bilder figure.person.quer{grid-column:1/-1}.lesson-bilder figure.person.quer img{width:auto;max-width:100%;max-height:320px;aspect-ratio:auto;object-fit:contain}
.lesson-bilder figure.person .bild-quelle{font-weight:400}
@media (max-width:480px){.lesson-bilder.personen{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.lesson-bilder.personen figure{padding:6px}.lesson-bilder figure.person figcaption{font-size:.82rem}}
.luecken-box{margin:14px 0}.luecken-satz{font-size:1.15rem;line-height:2.5}
#lueckenBox .luecke-feld{display:inline-block;width:11rem;max-width:100%;margin:0 4px;padding:4px 10px;border:2px solid var(--line);border-bottom:3px solid var(--teal);border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-weight:700}
#lueckenBox .luecke-feld:focus{outline:3px solid rgba(33,185,239,.35);border-color:var(--cyan)}#lueckenBox .luecke-feld:disabled{background:#eef5ee;border-color:var(--ok)}
.matura-box{margin-top:12px}.matura-frage{font-weight:800}
body.luecke-modus .code-edit-row,body.luecke-modus #duplicateStatus,body.luecke-modus #symbolKeys,body.luecke-modus #coding .keybar,body.luecke-modus #codeInputHelp,body.luecke-modus #coding .editor-help[data-ui="vorlage.hilfe"],body.luecke-modus .code-label-input,body.luecke-modus #codeProbe,body.luecke-modus #solutionWrap .visual-label,body.luecke-modus #codePreview,body.luecke-modus #codeAnswer{display:none!important}

/* Stufenfarben: HTML5 orange, HTML4 blau, CSS türkis */
:root{--html5:#d9650f;--html5-bg:#fdebd8;--html4:#1f6fb2;--html4-bg:#dcebfa;--css:#00797b;--css-bg:#d8f0f0}
.stufe-chip{display:inline-block;padding:3px 10px;border-radius:50px;font-size:.72rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:#fff;vertical-align:middle}
.stufe-chip.html5{background:var(--html5)}.stufe-chip.html4{background:var(--html4)}.stufe-chip.css{background:var(--css)}
.card.st-html5{border-top:5px solid var(--html5)}.card.st-html4{border-top:5px solid var(--html4)}.card.st-css{border-top:5px solid var(--css)}
.mc-q.st-html5{border-left:6px solid var(--html5)}.mc-q.st-html4{border-left:6px solid var(--html4)}.mc-q.st-css{border-left:6px solid var(--css)}

/* Mini-Codeinspektor (Matura Kapitel 3) */
.insp{margin:14px 0;padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff}
.insp-aufgabe{margin:0 0 10px;font-weight:700}
.insp-wahl{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:8px 10px;border:1px solid var(--line);border-radius:12px}.insp-wahl legend{padding:0 6px;font-size:.8rem;font-weight:800;color:var(--muted)}
.insp-opt{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:50px;border:2px solid var(--line);font-weight:800;font-size:.9rem;cursor:pointer}
.insp-opt.st-html5{border-color:var(--html5)}.insp-opt.st-html4{border-color:var(--html4)}.insp-opt.st-beides{border-color:var(--ink)}
.insp-opt:has(input:checked){color:#fff}.insp-opt.st-html5:has(input:checked){background:var(--html5)}.insp-opt.st-html4:has(input:checked){background:var(--html4)}.insp-opt.st-beides:has(input:checked){background:var(--ink)}
.insp-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:12px}
@media(max-width:860px){.insp-layout{grid-template-columns:1fr}}
.insp-titel{margin:0 0 6px;font-size:.78rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.insp-baum{margin:0;padding:8px 0;list-style:none;border-radius:12px;background:#0d1b26;color:#cfe3f0;font:13px/1.9 ui-monospace,Consolas,monospace;overflow:auto}
.insp-zeile{padding-right:10px;white-space:nowrap}.insp-zeile.fix{opacity:.55}
.insp-zeile.ok{background:rgba(34,160,90,.22)}.insp-zeile.falsch{background:rgba(220,70,70,.28)}
.insp-k{color:#7f9bb0}.insp-attr{color:#e6c27a}.insp-text{color:#9fb6c6}.insp-marke{font-weight:900}
.insp-tag{padding:0 6px;border:1px dashed transparent;border-radius:6px;background:rgba(255,255,255,.08);color:#ffd9b3;font:inherit;cursor:text}
.insp-zeile.st-html4 .insp-tag{color:#bcdcff}.insp-zeile.st-html5 .insp-tag{color:#ffd0a0}
.insp-tag:hover:not(:disabled){border-color:#fff;background:rgba(255,255,255,.2)}.insp-tag:disabled{cursor:default;background:transparent}
.insp-eingabe{width:6.5em;padding:0 6px;border:2px solid var(--cyan);border-radius:6px;background:#fff;color:#101820;font:inherit}
.insp-stufe{margin-left:8px;padding:0 7px;border-radius:50px;font:800 10px/1.7 var(--font);letter-spacing:.05em;color:#fff}.insp-stufe.st-html5{background:var(--html5)}.insp-stufe.st-html4{background:var(--html4)}
.insp-vorwrap{position:relative}
.insp-vorschau{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1.2fr);grid-template-areas:"kopf kopf" "inhalt rechts" "fuss fuss";gap:8px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#f4f7fa;min-height:260px}
.insp-kopf{grid-area:kopf}.insp-inhalt{grid-area:inhalt}.insp-rechts{grid-area:rechts}.insp-fuss{grid-area:fuss}
.insp-blk{position:relative;display:flex;flex-direction:column;gap:6px;padding:8px 10px;border:2px dashed #aab8c4;border-radius:10px;background:#fff;transition:background .4s,border-color .4s,box-shadow .4s}
.insp-blk .insp-chip{align-self:flex-start;padding:1px 8px;border-radius:50px;background:#6b7c8a;color:#fff;font:700 11px/1.7 ui-monospace,Consolas,monospace}
.insp-blk.st-html5 .insp-chip{background:var(--html5)}.insp-blk.st-html4 .insp-chip{background:var(--html4)}
.insp-name{font-size:.72rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:#33424d}
.insp-btext{font-size:.85rem;color:#33424d}
.insp-blk.neutral{background:#eef1f4}
.insp-blk.sem{border-style:solid;box-shadow:0 4px 14px rgba(11,55,79,.12)}
.insp-blk.sem-header{background:#dff3ff;border-color:#21b9ef}.insp-blk.sem-nav{background:#e3f6e6;border-color:#4cae5c}.insp-blk.sem-main{background:#fff6d8;border-color:#d8b02c}
.insp-blk.sem-section{background:#f3e8fb;border-color:#a066cf}.insp-blk.sem-article{background:#fde8ee;border-color:#d8506f}.insp-blk.sem-aside{background:#ece9ff;border-color:#7a6de0}
.insp-blk.sem-footer{background:#e5e9ee;border-color:#5c6b79}.insp-blk.sem-address,.insp-blk.sem-figure,.insp-blk.sem-figcaption{background:#e2f4f2;border-color:#2c9a8f}
.insp-blk.tag-h1,.insp-blk.tag-h2,.insp-blk.tag-h3,.insp-blk.tag-p,.insp-blk.tag-ul,.insp-blk.tag-li{border-style:solid;background:#f0f6fd;border-color:var(--html4);box-shadow:none}
.insp-blk.tag-h1 .insp-btext{font-size:1.3rem;font-weight:900}.insp-blk.tag-h2 .insp-btext{font-size:1.1rem;font-weight:800}.insp-blk.tag-h3 .insp-btext{font-weight:800}
.insp-blk.tag-li .insp-btext:before{content:"• "}
.insp-blk.ok{box-shadow:0 0 0 3px rgba(34,160,90,.5)}.insp-blk.falsch{box-shadow:0 0 0 3px rgba(220,70,70,.55)}
.insp-hinweis{font-size:.78rem;color:#9a2b2b}
.insp-status{margin:8px 0 0;min-height:1.4em;font-weight:700}
.insp-robo{position:absolute;left:0;top:0;z-index:3;width:42px;transition:transform .9s ease-in-out;pointer-events:none}
.insp-robo .beine .bein{transform-origin:50% 0}.insp-robo.laeuft .b1{animation:roboBein .3s infinite alternate}.insp-robo.laeuft .b2{animation:roboBein .3s infinite alternate-reverse}
@keyframes roboBein{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
.insp-robo.froh .aug{fill:#c9f7d4}.insp-robo.ratlos .pup{transform:translateX(1.5px)}.insp-robo.ratlos svg{transform:rotate(-8deg)}
.insp-robo.tanzt svg{animation:roboTanz .5s infinite alternate}@keyframes roboTanz{from{transform:rotate(-14deg) translateY(0)}to{transform:rotate(14deg) translateY(-6px)}}
.insp-sprech{position:absolute;bottom:100%;right:0;width:max-content;max-width:200px;margin-bottom:4px;padding:6px 10px;border-radius:12px 12px 2px 12px;background:#101820;color:#fff;font-size:.78rem;font-weight:700;line-height:1.35;box-shadow:0 6px 16px rgba(0,0,0,.25)}
@media(prefers-reduced-motion:reduce){.insp-robo{transition:none}.insp-robo .bein,.insp-robo svg{animation:none!important}.insp-blk{transition:none}}
.insp-ov{position:fixed;inset:0;z-index:2500;display:grid;place-items:center;padding:16px;background:rgba(7,16,25,.55)}
.insp-dlg{width:min(480px,100%);padding:20px 22px;border-radius:18px;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.4);border-top:6px solid var(--html4)}
.insp-dlg.gut{border-top-color:#22a05a}.insp-dlg.info{border-top-color:var(--html5)}
.insp-dlg-kopf{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:1.1rem}
.insp-haken{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#22a05a;color:#fff;font-weight:900}.insp-dlg.info .insp-haken{background:var(--html5)}
.insp-dlg-code{padding:8px 10px;border-radius:10px;background:#0d1b26;color:#e6c27a;font-size:.85rem;overflow:auto}.insp-dlg-code code{color:#cfe3f0}

/* CSS-Einheiten: große Vorschaufenster, damit sich Änderungen gut testen lassen */
body.css-modus .preview{height:560px;min-height:320px}
@media(max-width:760px){body.css-modus .preview,.css-preview{height:420px}}

/* Ergänzungen zum Handout (aktueller Stand, KI): auffällig markiert, damit sie leicht ins Handout übernommen werden können */
.ergaenzung{padding:2px 6px;border-radius:4px;background:#c4161c;color:#fff;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Fortschrittsbalken (oben) und Punktereihe: eine Aufgabe nach der anderen, Später-Aufgaben kommen zurück */
.fortschritt{position:sticky;top:calc(var(--stages-h,68px) + 6px);z-index:15;height:88px;margin:0 0 16px;border-radius:50px;background:#dfe9ef;border:3px solid #fff;box-shadow:0 6px 18px rgba(11,55,79,.18);overflow:hidden}
.fortschritt-fuell{height:100%;width:0;border-radius:50px;background:linear-gradient(90deg,var(--teal),#2fb66f);transition:width .6s cubic-bezier(.3,1.2,.5,1)}
.fortschritt.fertig .fortschritt-fuell{background:linear-gradient(90deg,#2fb66f,#e0b92a)}
.fortschritt-text{position:absolute;inset:0;display:grid;place-items:center;font-size:1.7rem;font-weight:900;color:#0b2733;mix-blend-mode:normal;text-shadow:0 0 3px rgba(255,255,255,.9)}
@media(prefers-reduced-motion:reduce){.fortschritt-fuell{transition:none}}
.punkte-reihe{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.punkt{min-width:34px;height:34px;padding:0 8px;border:2px solid var(--line);border-radius:50px;background:#fff;color:var(--ink);font:800 .85rem var(--font);cursor:pointer}
.punkt.erledigt{background:var(--ok);border-color:var(--ok);color:#fff}.punkt.spaeter{background:#fff4d6;border-color:#e0b92a}
.punkt.aktiv{box-shadow:0 0 0 3px rgba(33,185,239,.55);border-color:var(--cyan)}
#mcQuestions .card{display:none}#mcQuestions .card.aktiv{display:block}
.mc-ende{margin-top:10px}.mc-aktionen{margin-top:14px}
@media(max-width:760px){.fortschritt{height:60px}.fortschritt-text{font-size:1.2rem}}

a.btn{text-decoration:none}
.hero h1{font-size:clamp(34px,4.4vw,60px);margin:.1em 0 .5em;max-width:none}.hero h1 .z2{display:inline-block;max-width:1000px}.hero-grid{margin-top:4px}

/* Ergebnisseite: oben „Nächste Runde starten“, der Ergebnisblock ist eingeklappt */
.finish-oben{margin:0 0 14px}
.finish-oben .btn{font-size:1.08rem;padding:.95rem 1.6rem}
.finish-karte>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.finish-karte>summary::-webkit-details-marker{display:none}
.finish-karte>summary .result-heading{margin:.15rem 0 0}
.finish-aufklappen{font-weight:800;color:var(--teal,#0a6db5);white-space:nowrap}
.finish-aufklappen:after{content:" ▾"}
.finish-karte[open]>summary .finish-aufklappen{font-size:0;gap:0}
.finish-karte[open]>summary .finish-aufklappen:after{content:"einklappen ▴";font-size:.95rem}
.finish-karte[open]>summary{margin-bottom:12px}

/* Lernbox mit Farbkarten: Farbname in der Farbe, darunter positive und negative Eigenschaften getrennt */
.farbkarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:14px 0}
.farbkarte{border:2px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.farbkarte-name{margin:0;padding:12px 16px;font-size:1.35rem;letter-spacing:.02em}
.farbkarte-spalten{display:grid;grid-template-columns:1fr 1fr}
.farbkarte-spalten>div{padding:10px 14px 12px}
.farbkarte-spalten h4{margin:0 0 4px;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em}
.farbkarte-spalten ul{margin:0;padding-left:1.1em}.farbkarte-spalten li{margin:2px 0}
.farbkarte-pos{background:#eaf7ee}.farbkarte-pos h4{color:#176440}
.farbkarte-neg{background:#fdecea}.farbkarte-neg h4{color:#a02323}
.farbkarte-hinweis{margin:0;padding:6px 14px 10px;font-size:.9rem;font-weight:700;color:#536373}
@media(max-width:420px){.farbkarte-spalten{grid-template-columns:1fr}}
/* Lange Wörter bleiben in der Karte (Meldung 21.10.2026: „Geheimniskrämerei“ bei Violett): deutsche Silbentrennung nur in den Karten (lang="de" setzt
   js/lernen-bausteine.js), overflow-wrap als Rückfall, wenn der Browser kein Trennwörterbuch hat (sehr lange Wörter tragen deshalb in der Quelle weiche
   Trennzeichen, Test tools/lernmodul-tests/farbkarten-browser.mjs); Dateinamen und Adressen (.fk-roh) ohne Trennstrich */
.farbkarten{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.farbkarten>.farbkarte,.farbkarte-spalten>div{min-width:0}
.farbkarte-name,.farbkarte-spalten h4,.farbkarte-spalten li,.farbkarte-hinweis{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 3;overflow-wrap:break-word;overflow-wrap:anywhere}
.farbkarte .fk-roh{-webkit-hyphens:manual;hyphens:manual}
/* Spalten werden nie schmäler als 7.5rem: Karten mit drei oder vier Spalten (z. B. „Backend-User“, Persona-Karten) brechen in schmalen Karten in eine
   zweite Zeile um, die letzte Spalte nimmt dann die ganze Breite; zwei Spalten bleiben ab 260px Kartenbreite nebeneinander. Handy (≤ 560px): untereinander */
.farbkarte-spalten{display:flex;flex-wrap:wrap}
.farbkarte-spalten>div{flex:1 1 7.5rem}
@media(max-width:560px){.farbkarte-spalten>div{flex-basis:100%}}

/* Lernbox-Beispiel: Vektorfuchs gegen Pixelfuchs mit Zoom */
.zoom-beispiel{margin:16px 0;padding:16px;border:2px solid var(--line);border-radius:16px;background:#fff}
.zoom-beispiel h3{margin:0 0 6px}
.zoom-text{margin:6px 0}
.zoom-paar{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:10px 0}
.zoom-bild{margin:0;min-width:0}
.zoom-bild figcaption{margin-top:6px;font-weight:800;font-size:.9rem;text-align:center}
.zoom-rahmen{position:relative;aspect-ratio:1/1;width:100%;max-width:260px;margin:0 auto;overflow:hidden;border:3px solid #cfd9e0;border-radius:14px;background:#fff6e8}
.zoom-rahmen svg,.zoom-pixel{display:block;width:100%;height:100%}
.zoom-pixel{image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:-moz-crisp-edges}
.zoom-steuer{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:8px}
.zoom-regler{display:flex;align-items:center;gap:10px;flex:1 1 220px;font-weight:800}
.zoom-regler input{flex:1;min-width:0;accent-color:#00797b}
.zoom-wert{min-width:3.2em;font:800 1.1rem var(--font);color:#176440}
.zoom-meldung{min-height:2.6em;margin:8px 0 0;font-weight:700;color:#43584c}
@media(max-width:380px){.zoom-paar{gap:8px}}

/* Lernbausteine: Karten (auch ohne Farbe, mit Untertitel und drei Spalten), Balken, Suchergebnis-Vorschau */
.lernbausteine{margin:6px 0}
.lernbausteine>*+*{margin-top:14px}
.farbkarte-name small{display:block;margin-top:2px;font-size:.78rem;font-weight:600;opacity:.92;letter-spacing:0}
.farbkarte-name.ohne-farbe{background:#e8edf2;color:var(--ink)}
.farbkarte-spalten{grid-template-columns:repeat(var(--spalten,2),minmax(0,1fr))}
.farbkarte-info{background:#eef4fa}.farbkarte-info h4{color:#0a4f86}
.bausteine-balken,.bausteine-serp{padding:14px 16px;border:2px solid var(--line);border-radius:16px;background:#fff}
.bausteine-balken h3,.bausteine-serp h3{margin:0 0 10px}
.bb-zeile{display:grid;grid-template-columns:minmax(90px,150px) 1fr 52px;gap:10px;align-items:center;margin:6px 0}
.bb-label{font-weight:700;font-size:.92rem}
.bb-spur{height:18px;border-radius:9px;background:#e6edf2;overflow:hidden}
.bb-fuell{height:100%;border-radius:9px;background:linear-gradient(90deg,#21b9ef,#00797b)}
.bb-wert{font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.bb-fuss{margin:8px 0 0;font-size:.88rem;color:var(--muted)}
.serp-snippet{padding:12px 14px;border-radius:12px;background:#fff;border:1px solid #dadce0;box-shadow:0 1px 3px rgba(0,0,0,.08);font-family:Arial,Helvetica,sans-serif}
.serp-url{font-size:.85rem;color:#1e6b34;overflow-wrap:anywhere}
.serp-title{margin:2px 0;font-size:1.25rem;line-height:1.25;color:#1a0dab;overflow-wrap:anywhere}
.serp-beschreibung{font-size:.92rem;line-height:1.45;color:#4d5156}
.serp-legende{margin:10px 0 0;padding-left:1.3em}.serp-legende li{margin:3px 0}
@media(max-width:560px){.farbkarte-spalten{grid-template-columns:1fr}.bb-zeile{grid-template-columns:minmax(76px,110px) 1fr 46px;gap:8px}}

.pruefung-karte{text-align:center}.pruefung-prozent{font-size:clamp(2.4rem,9vw,4rem);font-weight:900;line-height:1.1;margin:.2em 0;color:var(--teal)}body.pruefung #codeBox{display:none}

.hero.hero-kompakt{padding:14px 0 16px}.hero-kompakt .eyebrow{margin:0 0 2px}.hero-kompakt h1{font-size:clamp(26px,3.2vw,38px);margin:.05em 0 .3em;max-width:none}.hero-kompakt h1 br{display:none}.hero-kompakt h1 .z2{display:inline;margin-left:.25em}.hero-kompakt .hero-image,.hero-kompakt .hero-note,.hero-kompakt .hero-copy{display:none}.hero-kompakt .hero-grid{margin-top:0}.hero-kompakt .badges{margin-top:6px}.aufbau{margin-top:18px}.aufbau .mission-step b{font-weight:700}

/* Mein Lernbereich (lernen/mein.html) */
.mein-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.mein-kopf h2{margin:.1em 0}
.mein-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px}.mein-tabs button{font:inherit;font-weight:700;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}.mein-tabs button.aktiv{background:var(--ink);color:#fff;border-color:var(--ink)}
.mein-chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}.mein-chips.klein{margin:6px 0 0}
.mein-chip{display:inline-flex;align-items:center;font:inherit;font-size:13px;font-weight:600;padding:4px 11px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink)}button.mein-chip{cursor:pointer;font-size:14px}.mein-chip.an{background:var(--praxis);border-color:var(--gold)}.mein-chip.fach{background:#eef6f9;border-color:#bcd9e2}.mein-chip.test{background:#fff1e0;border-color:#f1c997}.mein-chip.lernen{background:#e8f4ee;border-color:#b5dac6}.mein-chip.leise{color:var(--muted);font-weight:500}
.mein-fach{margin:22px 0 8px}.mein-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.mein-karte{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;display:flex;flex-direction:column;gap:8px}.mein-karte.fertig{background:#fbfcfd}
.mein-karte h3{margin:0;font-size:22px}.mein-zeit-text{margin:0;color:var(--muted);font-size:15px}.mein-grund{margin:0;font-weight:700;color:var(--teal)}
.mein-fortschritt{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.mein-balken{flex:1 1 140px;height:12px;border-radius:8px;background:#e8eef4;overflow:hidden}.mein-fuell{height:100%;background:linear-gradient(90deg,var(--teal),var(--cyan));border-radius:8px}
.mein-aktionen{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px}.mein-details{border-top:1px solid var(--line);padding-top:8px}.mein-details p{margin:.25em 0}.mein-details h4{margin:.8em 0 .2em}
.hinweis-leer{padding:24px;border:1px dashed var(--line);border-radius:var(--radius);text-align:center;color:var(--muted)}.mein-fuss{margin-top:28px;font-size:14px}
.mein-zeit{position:relative;list-style:none;margin:0;padding:0 0 0 30px;display:grid;gap:18px}.mein-zeit:before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--gold),var(--cyan))}
.mein-zeit li{position:relative}.mein-zeit li:before{content:"";position:absolute;left:-29px;top:4px;width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid var(--gold)}.mein-zeit-datum{font-weight:700;color:var(--teal);margin:0 0 6px}
@media(max-width:600px){.mein-raster{grid-template-columns:1fr}}

.mein-code{font:700 clamp(26px,5vw,40px) ui-monospace,Consolas,monospace;letter-spacing:.08em;margin:.3em 0;padding:14px 16px;background:var(--praxis);border:2px solid var(--gold);border-radius:14px;text-align:center;user-select:all}

.mein-bild{display:block;width:100%;height:clamp(190px,27vw,360px);object-fit:cover;object-position:center 62%;border-radius:var(--radius);box-shadow:0 14px 40px rgba(16,24,32,.18);margin:0 0 18px}

.mein-chip.escape{background:#111827;color:#ffe14d;border-color:#111827}

/* „So ist diese Übung aufgebaut“: eingeklappt, auf Klick aufklappen */
.aufbau>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.aufbau>summary::-webkit-details-marker{display:none}
.aufbau>summary .eyebrow{display:block}
.aufbau>summary h2{margin:.15rem 0 0}
.aufbau-aufklappen{font-weight:800;color:var(--teal,#00797b);white-space:nowrap}
.aufbau-aufklappen:after{content:" ▾"}
.aufbau[open]>summary{margin-bottom:14px}
.aufbau[open] .aufbau-aufklappen{font-size:0}
.aufbau[open] .aufbau-aufklappen:after{content:"einklappen ▴";font-size:.95rem}

/* ── Mein Lernbereich: Übungsbereich – Punkte sammeln (Punkte-Kachel, Module mit Haken „Fortschritt als Punkte mitzählen“, geschaffte Übungen) ── */
.mein-uebung{margin:34px 0 10px}
.mein-up-kopf{display:flex;gap:18px;align-items:stretch;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}
.mein-up-kopf h2{margin:.1em 0 .3em}
.mein-up-text{flex:1 1 320px}.mein-up-text p{margin:.35em 0}
.mein-up-kachel{flex:0 0 auto;min-width:200px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;text-align:center;padding:16px 24px;background:var(--praxis);border:2px solid var(--gold);border-radius:var(--radius)}
.mein-up-kachel b{font:700 clamp(44px,7vw,60px)/1 var(--headline);color:var(--ink)}
.mein-up-kachel span{font-weight:700}
.mein-up-kachel small{color:var(--muted);font-size:13px}
.mein-up-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.mein-up-modul{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.mein-up-modul.an{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);background:#fffdf6}
.mein-up-mkopf{display:flex;align-items:center;gap:10px}.mein-up-mkopf h3{margin:0;font-size:21px}
.mein-up-icon{font-size:30px;line-height:1}
.mein-up-mtext{margin:0;color:var(--muted);font-size:15px}
.mein-up-stand{margin:0;font-size:15px}
.mein-up-haken{display:flex;align-items:center;gap:10px;font-weight:700;cursor:pointer;margin:2px 0}
.mein-up-haken input{width:22px;height:22px;margin:0;accent-color:var(--teal);flex:none;cursor:pointer}
.mein-up-fehler:empty{display:none}
.mein-up-aktionen{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mein-up-spiele{list-style:none;margin:2px 0 0;padding:8px 0 0;border-top:1px solid var(--line);display:grid;gap:3px;font-size:13px;color:var(--muted)}
.mein-up-spiele li{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.mein-up-sterne{color:#a16207;letter-spacing:1px;flex:none}
.mein-up-spiele small{margin-left:auto;white-space:nowrap}
@media(max-width:600px){.mein-up-raster{grid-template-columns:1fr}.mein-up-kachel{flex:1 1 100%}}

/* „Hier geht es weiter“: Knopf wackelt kurz alle 4 Sekunden (wackeln-5: alle 5 Sekunden); bei reduzierter Bewegung aus (siehe oben) */
.wackeln{animation:wackeln 4s ease-in-out 1s infinite;transform-origin:center}.wackeln-5{animation-duration:5s}
.wackeln:hover,.wackeln:focus-visible{animation-play-state:paused}
@keyframes wackeln{0%,84%,100%{transform:none}86%{transform:rotate(-4deg) scale(1.04)}89%{transform:rotate(4deg) scale(1.04)}92%{transform:rotate(-3deg) scale(1.03)}95%{transform:rotate(2deg)}98%{transform:rotate(-1deg)}}
@media(prefers-reduced-motion:reduce){.wackeln{animation:none!important}}
a.btn.wackeln{margin:8px 4px 0 0;text-decoration:none}a.btn.wackeln:hover{color:inherit}

/* „Direkt zu den Fragen“ (Start) und „Erklär mir das“ (Theorie zur Frage als Dialog) – PO 19.10.2026, ICDL */
.direkt-box{margin:0 0 18px}
.direkt-wahl{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;background:#eef7f2;border:2px solid #539879;border-radius:14px;font-size:clamp(17px,2.6vw,20px);line-height:1.45;cursor:pointer}
.direkt-wahl input{margin-top:3px}
.direkt-wahl small{display:block;font-size:13px;font-weight:400;margin-top:6px;color:var(--muted)}
.erklaer-knopf span{font-size:18px;line-height:1}
dialog.erklaer-dialog{width:min(820px,94vw);max-height:92dvh;padding:0;border:0;border-radius:20px;color:var(--ink);background:var(--paper);overflow:auto;box-shadow:0 25px 90px #0005}
dialog.erklaer-dialog::backdrop{background:rgba(9,14,19,.72)}
.erklaer-innen{padding:22px 24px}
.erklaer-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.erklaer-kopf h2{font-size:clamp(26px,4vw,36px);margin:.2em 0 .5em}
.erklaer-kopf h2:focus{outline:none}
.erklaer-zu{flex:0 0 auto;width:44px;height:44px;border:1px solid #ced9e0;border-radius:10px;background:#fff;color:var(--ink);font-size:26px;line-height:1}
.erklaer-text{display:grid;gap:10px}
.erklaer-text p{margin:0;padding:12px 14px;background:#eef3f4;border-radius:12px;line-height:1.75}
.erklaer-bilder{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.erklaer-bilder img{max-height:220px;width:auto}
@media(max-width:600px){dialog.erklaer-dialog{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0;margin:0}.erklaer-innen{padding:16px}.erklaer-dialog .actions .btn{flex:1 1 100%}.direkt-wahl{padding:14px}}
@media print{dialog.erklaer-dialog{display:none}}
/* Werkstatt-Lernsets: Weg „In kleinen Häppchen“ / „Alles auf einmal“ (js/lernen.js, wegZeichnen) – große Wahl, danach kleiner Umschalter; „Alles auf einmal“ blendet in der Lernbox der ganzen Werkstatt die Erklärtexte aus */
.ws-weg.gross{background:#fff;border:2px solid var(--gold);border-radius:var(--radius);padding:18px 20px;margin:14px 0}
.ws-weg-titel{margin:0 0 12px;font-size:20px}
.ws-weg-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ws-weg-wahl{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;min-height:48px;padding:16px 18px;border:2px solid #c8d5de;border-radius:14px;background:#f7fafc;color:var(--ink)}
.ws-weg-wahl b{font-size:18px;line-height:1.3}
.ws-weg-wahl small{font-size:13px;color:var(--muted);line-height:1.45}
.ws-weg-wahl .ws-weg-icon{font-size:26px;line-height:1}
.ws-weg-wahl:hover{border-color:var(--teal)}
.ws-weg-wahl.an{border-color:var(--ink);background:var(--praxis)}
.ws-weg-text{font-size:13px;color:var(--muted);margin:10px 0 0}
.ws-weg.klein{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:12px 0 0;font-size:13px}
.ws-weg-label{font-weight:700;color:var(--muted)}
.ws-weg.klein .ws-weg-wahl{flex-direction:row;align-items:center;gap:6px;min-height:38px;padding:5px 12px;border-width:1px;border-radius:20px}
.ws-weg.klein .ws-weg-wahl b{font-size:13px}
.ws-weg.klein .ws-weg-wahl .ws-weg-icon{font-size:15px}
.ws-weg-erkl{min-height:38px;padding:5px 12px;border:1px dashed #9fb2bf;border-radius:20px;background:#fff;color:var(--ink);font-size:13px;font-weight:700}
body.ws-alles #lessonText,body.ws-alles #lessonFarben,body.ws-alles #lessonZoom,body.ws-alles #lessonBilder,body.ws-alles #lessonTip,body.ws-alles #lessonThink{display:none!important}
@media(max-width:600px){.ws-weg-knoepfe{grid-template-columns:1fr}.ws-weg.gross{padding:14px}}
.chapter.gesperrt.ws-frei{background:#fff;color:var(--ink);border-style:solid}.chapter.gesperrt.ws-frei.active{background:var(--ink);color:var(--praxis)}.chapter.gesperrt.ws-frei::after{content:none}