/* MVP Ausbildungsbereich – eigene Ergänzungen zur gemeinsamen Stil-Datei (stil/mvp-stil.css) */

body.mvp{background-attachment:scroll}
.band{display:flex;align-items:center;justify-content:space-between;padding:22px 56px 0}
.zeichen{display:flex;align-items:center;gap:12px}
.zeichen i{width:36px;height:36px;border-radius:11px;background:var(--rot);display:grid;place-items:center;color:#fff;font:600 15px var(--serif);font-style:normal;box-shadow:var(--schatten-rot)}
.zeichen b{font:600 19px/1.1 var(--serif);color:var(--navy)} .zeichen small{display:block;font:500 12px/1.3 var(--sans);color:var(--text-3)}
.ich{display:flex;align-items:center;gap:12px;font:500 14px var(--sans);color:var(--text-2)}
main{padding:0 56px 48px;max-width:1440px;margin:0 auto}
.held{position:relative;display:grid;grid-template-columns:54% 46%;align-items:center;min-height:372px;margin-top:8px}
.held .bild{position:absolute;right:-56px;top:-70px;bottom:-30px;width:56%;background:url(/f2/haus.jpg) center/cover;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 100%),linear-gradient(180deg,#000 78%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 34%),linear-gradient(180deg,#000 78%,transparent 100%);mask-composite:intersect;z-index:0}
.held .text{position:relative;z-index:1;display:flex;flex-direction:column;gap:18px;padding:24px 0}
.held h1 em{font-style:normal;color:var(--bordeaux)}
.held .satz{font:400 20px/1.42 var(--sans);color:var(--text-2);max-width:31em}
.held .satz b{font-weight:600;color:var(--text)}
.wo{display:flex;flex-wrap:wrap;gap:10px}
.pille{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.9);box-shadow:var(--schatten-1);font:600 14px/1 var(--sans);color:var(--navy)}
.tat{display:flex;gap:12px;margin-top:6px}
.buehne .knopf{height:46px;padding:0 22px;font-size:15px}
.knopf.zu{background:rgba(255,255,255,.6);color:var(--text-2);border-style:dashed;cursor:default}
.weg{position:relative;z-index:1;margin-top:10px;padding:26px 30px 24px}
.weg-kopf{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:22px}
.weg-kopf .leise{font-size:14px}
.stationen{display:grid;grid-template-columns:repeat(8,1fr);position:relative}
.stationen::before{content:"";position:absolute;left:6.25%;right:6.25%;top:21px;height:2px;background:var(--linie-stark)}
.stationen::after{content:"";position:absolute;left:6.25%;width:var(--weit,0%);top:21px;height:2px;background:linear-gradient(90deg,var(--navy),var(--messing))}
.st{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:0 6px}
.st .kreis{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--creme);border:1.5px solid var(--linie-stark);color:var(--text-3);font:600 16px var(--serif)}
.st .kreis .symbol{width:18px;height:18px;stroke-width:2.2}
.st.fertig .kreis{background:var(--dunkel);border-color:transparent;color:#fff}
.st.test .kreis{background:var(--gold);border-color:transparent;color:#3a2c10;box-shadow:0 6px 16px rgba(150,115,60,.35)}
.st.heute .kreis{background:var(--rot);border-color:transparent;color:#fff;box-shadow:0 0 0 6px rgba(159,1,31,.12),var(--schatten-rot)}
.st b{margin-top:6px;font:600 16px/1.2 var(--serif);color:var(--navy)}
.st small{font:500 12.5px/1.35 var(--sans);color:var(--text-3)}
.st.heute small{color:var(--bordeaux);font-weight:600} .st.test small{color:#7a5c22;font-weight:600} .st.fertig small{color:var(--gut);font-weight:600}
.st.spaeter b{color:var(--text-2)}
.unten{display:grid;grid-template-columns:1.05fr 1fr;gap:22px;margin-top:22px}
.unten .karte{padding:26px 30px}
.offen{display:flex;flex-direction:column;gap:12px}
.offen h2{font-size:28px}
.offen p{font-size:16px;max-width:30em}
.offen .knopf{align-self:flex-start;background:#fff;color:var(--bordeaux-tief);border-color:transparent;margin-top:auto}
.hl .zeile{padding:13px 0}
.hl .zeile b{font:600 16px/1.25 var(--sans)} .hl .zeile small{font-size:13px}
.hl .sym{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--dunkel);color:#fff}
.hl .sym.zu{background:var(--ruhig-grund);color:var(--text-3)}
.fuss{margin-top:40px;font:400 12.5px/1.5 var(--sans);color:var(--text-3)}
@media (max-width:760px){
 .band{padding:16px 20px 0} .ich span{display:none} main{padding:0 20px 36px}
 .held{display:block;min-height:0;margin-top:0}
 .held .bild{position:relative;right:auto;top:auto;bottom:auto;width:auto;height:210px;margin:10px -20px 0;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
 .held .text{padding:0 0 8px;gap:14px;margin-top:-18px}
 .mvp.buehne{--s-h1:36px;--s-h2:26px} .held .satz{font-size:17px}
 .tat{flex-direction:column} .tat .knopf{width:100%}
 .weg{padding:22px 20px;margin-top:18px} .weg-kopf{flex-direction:column;gap:4px;margin-bottom:16px}
 .stationen{grid-template-columns:1fr;gap:0} .stationen::before{left:21px;right:auto;top:22px;bottom:22px;width:2px;height:auto} .stationen::after{left:21px;top:22px;width:2px;height:var(--weit,0%);background:linear-gradient(180deg,var(--navy),var(--messing))}
 .st{flex-direction:row;align-items:center;text-align:left;gap:14px;padding:9px 0} .st b{margin:0;flex:1} .st small{text-align:right;white-space:nowrap}
 .hl .karte-kopf{flex-direction:column;gap:2px}
 .st .kreis{flex:none}
 .unten{grid-template-columns:1fr}
}

.pruef{max-width:900px;margin:26px auto 0;display:flex;flex-direction:column;gap:22px}
.lauf{display:flex;align-items:center;gap:16px} .lauf .balken{flex:1;height:8px} .lauf span{font:600 14px var(--sans);color:var(--text-2)}
.frage{padding:36px 40px}
.frage h2{font-size:32px;line-height:1.18;margin-top:14px}
.wahl{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.w{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:16px;background:rgba(255,255,255,.7);border:1.5px solid var(--linie);font:500 17px/1.35 var(--sans);color:var(--text)}
.w i{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--linie-stark);font:600 14px var(--sans);font-style:normal;color:var(--text-2)}
.w.richtig{background:var(--gut-grund);border-color:rgba(47,125,91,.5)} .w.richtig i{background:var(--gut);border-color:transparent;color:#fff}
.w.richtig i .symbol{width:16px;height:16px;stroke-width:2.6}
.w .marke{margin-left:auto}
.w.blass{opacity:.62}
.warum{display:flex;gap:18px;align-items:flex-start;padding:22px 26px}
.warum::before{content:"";flex:none;width:6px;align-self:stretch;border-radius:6px;background:linear-gradient(180deg,#e2c58a,#a8854a)}
.warum b{display:block;font:600 19px/1.25 var(--serif);color:#fff;margin-bottom:6px} .warum p{font-size:16px;line-height:1.5}
.warum small{display:block;margin-top:8px;font-size:12.5px;color:#9aa5b1}
.fussz{display:flex;justify-content:space-between;align-items:center}



.inhalt{flex:1;min-width:0;padding:28px 32px;display:flex;flex-direction:column;gap:20px}
.oben{display:flex;align-items:center;justify-content:space-between}
.marke-mvp{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
.marke-mvp i{width:30px;height:30px;border-radius:9px;background:var(--rot);display:grid;place-items:center;color:#fff;font:600 13px var(--serif);font-style:normal;box-shadow:var(--schatten-rot)}
.marke-mvp b{font:600 16px/1.1 var(--serif);color:var(--navy)} .marke-mvp small{display:block;font-size:11px;color:var(--text-3)}
.lagek{padding:26px 30px} .lagek h1{font-size:34px;line-height:1.12}
.zahlen{display:flex;gap:34px} .zahlen .kennzahl small{color:#aab4bf;max-width:9em}
.raster{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:start}
.liste td b{font-weight:600;color:var(--navy);display:block} .liste td small{font-size:12px;color:var(--text-3)}
.liste td{padding:11px 12px} .liste td b,.liste td.rechts{white-space:nowrap}
.pk{display:flex;gap:5px}
.p{width:26px;height:22px;border-radius:6px;display:grid;place-items:center;background:var(--ruhig-grund);font:600 11px var(--sans);color:var(--text-4)}
.p.g{background:var(--gut-grund);color:var(--gut)} .p.t{background:var(--achtung-grund);color:var(--achtung)} .p.h{background:var(--kritisch-grund);color:var(--kritisch)}
.tn{padding:14px 0;border-bottom:1px solid var(--linie)} .tn:last-of-type{border-bottom:0}
.tn-kopf{display:flex;align-items:center;gap:12px;margin-bottom:10px} .tn-kopf .wachs{flex:1}
.tn-kopf b{display:block;font-weight:600;color:var(--navy)} .tn-kopf small{font-size:12px;color:var(--text-3)}
.erkl{margin-top:12px;font-size:12px;color:var(--text-3)}
.fehl{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:var(--r);background:var(--achtung-grund);margin-top:14px}
.fehl b{display:block;color:#5e4616;font-weight:600} .fehl span{font-size:13px;color:#6b5324}
/* ---- Ergänzungen zum Entwurf ---- */
.e1{--i:1}.e2{--i:2}.e3{--i:3}.e4{--i:4}.e5{--i:5}
a.zeichen{text-decoration:none}
a.st{text-decoration:none;color:inherit} .st .kreis{transition:transform var(--dauer) var(--weich)} a.st:hover .kreis{transform:translateY(-2px)}
.kopfzeile.hell{color:#f0c9cf!important}
.klein{font-size:13px}
.offen .mehr{font-size:14px;opacity:.85}
main.schmal{max-width:560px;padding-top:6vh} main.schmal .karte{display:flex;flex-direction:column;gap:16px}
.buehne .eingabe{min-height:48px;font-size:17px}
.hinweisbox{padding:16px 18px;border-radius:14px;background:var(--achtung-grund);font-size:15px;display:flex;flex-direction:column;gap:8px} .hinweisbox b{color:#5e4616}
.haken{display:flex;gap:10px;align-items:flex-start;font-size:15px;cursor:pointer} .haken input{width:20px;height:20px;margin-top:2px;accent-color:var(--bordeaux);flex:none}
main.lesen{max-width:1040px}
.lese-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:18px 0 22px;flex-wrap:wrap} .lese-kopf h1{font-size:44px}
.blaetter{display:flex;flex-direction:column;gap:22px} .blattbild{width:100%;height:auto;border-radius:14px;box-shadow:var(--schatten-2);background:#fff}
button.w{width:100%;text-align:left;cursor:pointer;font-family:var(--sans);transition:transform var(--dauer) var(--weich),border-color var(--dauer),background var(--dauer)} button.w:not(:disabled):hover{border-color:var(--bordeaux);background:#fff;transform:translateY(-1px)} button.w:disabled{cursor:default;color:var(--text)}
.w>span:first-of-type{flex:1}
.w.falsch{background:var(--kritisch-grund);border-color:rgba(159,1,31,.4)} .w.falsch i{background:var(--bordeaux);border-color:transparent;color:#fff} .w.falsch i .symbol{width:16px;height:16px;stroke-width:2.6}
#warum:empty{display:none}
.ergebnis{display:flex;flex-direction:column;gap:12px;padding:36px 40px} .mvp .zahl.gross{font-size:72px} .ergebnis .tat{margin-top:10px}
.mvp .karte.dunkel .knopf.still.hell{color:#dfe5ec}
.nach{padding:16px 0;border-bottom:1px solid var(--linie);display:flex;flex-direction:column;gap:8px;align-items:flex-start} .nach:last-child{border:0} .nach b{font:600 17px/1.3 var(--sans);color:var(--navy)} .nach p{font-size:15px;color:var(--text-2)} .mvp .nach .marke{height:auto;min-height:24px;padding:5px 12px;white-space:normal;line-height:1.3}
.mvp .leer .knopf{margin-top:10px}
body.ab{margin:0} body.ab #seite{display:flex;min-height:100vh}
.leiste .unten-link{margin-top:auto;color:var(--text-3);font-size:13px}
.ab .tat{display:flex;gap:8px;flex-wrap:wrap}
.raster.breit{grid-template-columns:1.5fr 1fr}
.stapel{display:flex;flex-direction:column;gap:20px}
.drei{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px} .drei .kopfzeile{margin-bottom:8px}
.hoch{margin-top:10px;cursor:pointer}
.formular{display:flex;flex-direction:column;gap:14px} .zwei{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tn-tat{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
b.heute{color:var(--bordeaux)} .mvp .liste td b.heute{display:inline}
.rollen{overflow-x:auto}
.quote{display:flex;gap:16px;align-items:center;padding:10px 0} .quote .wachs{flex:1;min-width:0} .quote b{display:block;font-weight:500;margin-bottom:6px;color:var(--text)}
dialog.fenster{border:0;border-radius:20px;padding:26px 28px;max-width:min(520px,92vw);width:100%;background:var(--creme);color:var(--text);box-shadow:var(--schatten-2);font:400 14px/1.5 var(--sans)} dialog.fenster.gross{max-width:min(760px,94vw)} dialog.fenster::backdrop{background:rgba(20,27,35,.45)}
dialog.fenster h3{margin-bottom:10px} dialog.fenster .tat{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.zugang{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin-top:14px;padding:16px;border-radius:14px;background:#fff} .zugang span{color:var(--text-3)} .zugang b{user-select:all;word-break:break-all}
.fragenliste{margin-top:14px;max-height:60vh;overflow:auto} .fr{padding:14px 0;border-bottom:1px solid var(--linie)} .fr ol{margin:6px 0 6px 22px;padding:0} .fr li.ri{color:var(--gut);font-weight:600}
.antw>span{display:flex;gap:6px;align-items:center}
@media (max-width:900px){ body.ab #seite{flex-direction:column} .mvp .leiste{width:auto;flex-direction:row;overflow-x:auto;border-right:0;padding:10px 12px} .marke-mvp,.leiste .unten-link{display:none!important} .leiste a{flex:none} .inhalt{padding:18px 16px} .raster,.raster.breit,.drei{grid-template-columns:1fr} .lage{flex-direction:column;align-items:flex-start} .lagek h1{font-size:26px} .zahlen{gap:20px} }
@media (max-width:760px){ .lese-kopf h1{font-size:32px} .frage{padding:24px 20px} .frage h2{font-size:24px} .w{font-size:16px;padding:14px} .ergebnis{padding:26px 22px} .pruef{margin-top:14px} .fussz{flex-direction:column-reverse;gap:10px;align-items:stretch} .fussz .knopf{width:100%} .ich .knopf.still{padding:0 8px} }
/* Handy: nichts läuft seitlich heraus */
.oben{flex-wrap:wrap;gap:10px}
@media (max-width:760px){ .band{flex-wrap:wrap;gap:8px 12px} .ich{margin-left:auto} .w{flex-wrap:wrap} .w .marke{margin-left:48px} .lauf{gap:10px} .tn-kopf{flex-wrap:wrap} .zahlen{flex-wrap:wrap} .quote{flex-wrap:wrap} }
.mvp .liste td b.heute{color:var(--bordeaux);display:inline}
.raster>*,.stapel>*,.inhalt>*{min-width:0} .inhalt{overflow-wrap:anywhere}