:root{--line:#d8dfe4;--ink:#202930;--sub:#596875;--bg:#f5f6f7;--surface:#fff;--accent:#284d49;--accent2:#3f7569;--teal:#edf4ef;--warn:#a86b11;--danger:#a02f24}
*{box-sizing:border-box}html,body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg)}body{min-width:320px}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #8db6de;outline-offset:2px}[hidden]{display:none!important}.btn{border:1px solid #c3ced6;background:#fff;border-radius:9px;padding:10px 13px;color:var(--ink);font-weight:600}.btn:hover{background:#f0f5f3}.btn.primary{background:var(--accent);border-color:var(--accent);color:white}.btn.primary:hover{background:#37665f}.btn.small{padding:7px 10px;font-size:13px}.btn.tiny{padding:6px 8px;font-size:12px}.btn.minimal{border:0;background:transparent}.btn:disabled{opacity:.4;cursor:not-allowed}.link-btn{background:none;border:none;color:#3f6964;font-weight:650;font-size:12px}.notice{background:#f4f0e4;padding:10px;border-radius:8px;font-size:12px;line-height:1.6;color:#64542b}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}.login-box{width:min(430px,100%);padding:25px;background:white;border:1px solid var(--line);border-radius:16px;display:grid;gap:15px}.login-logo{height:92px;max-width:100%;object-fit:contain}.login-box h1{margin:0;font-size:25px}.login-box p{margin:0;color:var(--sub)}label{display:grid;gap:5px;font-weight:600;font-size:14px}input,textarea{border:1px solid #c0cbd0;background:white;border-radius:8px;padding:9px 11px;min-width:0}.app-top{height:62px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:5px 21px;gap:10px}.brand{border:0;background:none;display:flex;gap:10px;align-items:center;text-align:left;color:inherit}.brand img{width:54px;height:49px;object-fit:contain}.brand strong{display:block;font-size:15px}.brand small{display:block;font-size:10px;color:var(--sub)}.top-center{font-weight:650}.top-actions{display:flex;align-items:center;gap:8px}.pilot-tag{padding:5px 9px;border:1px solid #ddd2bd;border-radius:6px;font-size:10px;color:#906219;font-weight:800}.page{padding:28px clamp(17px,4vw,62px);max-width:1500px;margin:0 auto}.pageintro h1,.course-head h1{margin:0 0 4px}.pageintro p,.course-head p{color:var(--sub);margin:0 0 22px}.courses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.course-card{border:1px solid var(--line);background:white;border-radius:13px;text-align:left;padding:24px;min-height:175px;display:flex;flex-direction:column;gap:10px;position:relative;color:var(--ink)}.course-card:not(:disabled):hover{border-color:var(--accent2);box-shadow:0 4px 15px #163f3615}.course-card:disabled{opacity:.56;cursor:default}.course-icon{font-size:28px}.course-title{font-size:20px;font-weight:750}.course-sub{color:var(--sub);font-size:13px}.course-ready{margin-top:auto;align-self:flex-end;font-size:11px;font-weight:750;color:#236d4c}.recent{margin-top:30px}.history{display:grid;gap:8px}.history button{background:#fff;border:1px solid var(--line);padding:11px;border-radius:10px;text-align:left}.back{margin:0 0 20px}.course-head{margin-bottom:15px}.course-stats{display:flex;gap:10px;flex-wrap:wrap}.course-stats span{padding:8px 10px;border:1px solid #c8d7d1;background:#e8f2ec;border-radius:8px;font-size:13px}.course-controls{display:flex;align-items:end;gap:12px;margin:20px 0}.course-controls input{width:88px}.course-slides{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.course-slides button{border:1px solid var(--line);background:white;border-radius:9px;padding:12px;text-align:left;font-size:13px}.course-slides b{display:block;color:var(--accent)}
.teacher-layout{height:calc(100vh - 62px);display:grid;grid-template-rows:48px minmax(112px,23fr) minmax(86px,13fr) minmax(260px,64fr);gap:7px;padding:7px 8px;overflow:hidden}.teacher-heading{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px}.teacher-course{display:flex;align-items:center;gap:12px;font-size:14px;min-width:0}.teacher-course span{color:#536472;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.teacher-tools{display:flex;gap:5px;align-items:center;flex-wrap:nowrap}.pane{border:1px solid var(--line);background:white;border-radius:9px;overflow:hidden;min-height:0;min-width:0}.pane-head{height:31px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 10px;font-size:12px}.pane-head span{color:var(--sub);white-space:nowrap}.element-strip,.slide-strip{display:flex;gap:9px;overflow-x:auto;overflow-y:hidden;padding:4px 10px 11px;height:calc(100% - 31px);align-items:stretch;scrollbar-width:thin}.element-choice{flex:0 0 clamp(155px,17%,255px);min-width:0;background:#f7faf7;border:1px solid #bdc7c4;border-bottom:4px solid #c5d9d1;border-radius:7px;padding:10px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;gap:6px;font-size:13px}.element-choice.active{background:#e6f0eb;border-color:#518473;border-bottom-color:#427462}.element-choice img{height:33px;max-width:100%;object-fit:contain;align-self:flex-start}.element-type{font-weight:700;color:#6c7778;font-size:10px;letter-spacing:.07em;text-transform:uppercase}.element-choice .e-title{font-weight:720;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.2}.element-choice .e-state{color:#4f7761;font-size:11px}.slide-card{flex:0 0 clamp(165px,19%,285px);font-size:12px;border:1px solid var(--line);border-bottom:4px solid #abb6ba;border-radius:7px;background:white;padding:7px;text-align:left;min-width:0}.slide-card.selected{border:2px solid var(--accent);border-bottom:4px solid var(--accent)}.slide-card small{display:block;color:#697681;margin-bottom:4px}.slide-card strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.teaching-bottom{display:grid;grid-template-columns:1fr 1fr;gap:7px;min-height:0}.presentation-pane{display:grid;grid-template-rows:31px minmax(0,1fr) 41px}.slide-board{position:relative;overflow:hidden;min-width:0;min-height:0;background:#f7f8f8;border:1px solid #d4dadd;margin:4px 8px 0;border-radius:8px;display:grid;place-items:center;cursor:crosshair;touch-action:none}.slide-paper{position:absolute;inset:1.3% 1.3%;overflow:hidden;display:flex;flex-direction:column;padding:3% 4.5%;gap:2%;font-size:clamp(12px,1.35vw,20px)}.slide-watermark{position:absolute;right:2%;bottom:0;max-width:23%;height:28%;opacity:.055;pointer-events:none}.slide-empty{margin:auto;text-align:center;font-size:16px;color:#89949b}.slide-title{font-weight:800;font-size:clamp(16px,1.7vw,29px);line-height:1.18;border-bottom:2px solid #345d53;padding-bottom:1%;margin:0}.slide-fragments{flex:1;min-height:0;display:flex;flex-wrap:wrap;align-items:stretch;gap:2%;overflow:hidden}.frag{border-radius:7px;background:#f0f4f2;border:1px solid #cfdfd5;padding:2.4%;font-weight:650;line-height:1.28;font-size:clamp(10px,1.4vw,22px);min-width:0;max-width:100%;overflow-wrap:anywhere;display:flex;align-items:center}.frag.image{padding:0;border:0;background:transparent;justify-content:center;overflow:hidden}.frag.image img{width:100%;height:100%;object-fit:contain}.frag.question{background:#f7f1e7;border-left:4px solid #b78a43}.slide-paper.layout-image .frag.image{flex:1 1 48%;max-height:100%}.slide-paper.layout-image .frag.text{flex:1 1 43%}.slide-paper.layout-image .frag.question{flex:1 1 100%}.slide-paper.layout-steps .frag.text,.slide-paper.layout-checklist .frag.text{flex:1 1 47%;border-left:5px solid #6c9783}.slide-paper.layout-columns .frag.text{flex:1 1 45%}.slide-paper.layout-text .frag.text{flex:1 1 100%;font-size:clamp(13px,1.85vw,27px)}.slide-paper.layout-diagram .frag.image{flex:1 1 60%}.slide-paper.layout-diagram .frag.text{flex:1 1 34%}.slide-paper:not(:has(.frag.image)) .frag.text{flex:1 1 46%}.slide-paper:has(.frag.image):has(.frag.text:nth-of-type(5)) .frag{font-size:clamp(10px,1.1vw,18px);padding:1%}.pointer{position:absolute;pointer-events:none;color:#d32924;font-size:clamp(24px,3.2vw,45px);line-height:1;z-index:5;text-shadow:0 2px 2px white;transform:translate(-18%,-80%)}.pause-visual{font-size:clamp(21px,3vw,48px);text-align:center;font-weight:800}.pause-visual small{font-size:.35em;display:block;font-weight:500;margin-top:9px}.slide-footer{padding:4px 7px;display:flex;justify-content:space-between;align-items:center;gap:8px}.slide-footer>div{display:flex;gap:4px}.notes-pane{display:grid;grid-template-rows:31px 35px minmax(0,1fr) 41px}.note-tabs{display:flex;padding:0 8px;gap:3px;align-items:center}.tab{border:none;background:#f2f4f4;padding:7px 9px;border-radius:6px;font-size:11px;white-space:nowrap}.tab.active{background:#dfe9e5;font-weight:700;color:#214b42}.notes-copy{overflow:hidden;padding:7px 15px 1px;min-height:0}.notes-copy h3{font-size:16px;margin:0 0 8px}.notes-copy p{font-size:clamp(11px,1vw,15px);line-height:1.45;white-space:pre-wrap;margin:0;overflow-wrap:anywhere}.notes-foot{display:flex;align-items:center;justify-content:space-around;padding:4px;gap:3px}.notes-foot span{color:var(--sub);font-size:12px}.overlay{position:fixed;inset:0;display:grid;place-items:center;z-index:50;background:#151e23a8;padding:16px}.dialog{width:min(750px,100%);max-height:92vh;overflow-y:auto;background:white;border-radius:16px;box-shadow:0 14px 40px #0003}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--line)}.dialog-header h2{margin:0;font-size:18px}#dialogBody{padding:18px 20px}.dialog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.dialog label{margin:7px 0}.dialog textarea{width:100%;min-height:70px}.dialog-qr{width:188px;max-width:100%;display:block;margin:12px auto}.dialog a{overflow-wrap:anywhere;color:#245f66}.person-line,.event-line{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:8px 0;font-size:13px}.signature{width:100%;height:140px;border:1px dashed #98a4a9;border-radius:7px;touch-action:none;background:#fff}.student-body{background:#f5f7f7}.student-header{display:flex;align-items:center;gap:16px;background:white;padding:5px 18px;height:68px;border-bottom:1px solid var(--line)}.student-header img{height:57px;width:75px;object-fit:contain}.student-header strong{margin-right:auto}.student-header span{font-size:12px;color:#536f67}.registration{max-width:660px;margin:28px auto;background:white;padding:26px;border-radius:15px;border:1px solid var(--line)}.registration h1{margin:0}.registration p{color:var(--sub)}.registration form{display:grid;gap:14px}.registration input{font-size:16px}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}.registration #masterFields{display:grid;gap:11px}.confirm{display:flex;gap:8px;align-items:flex-start}.confirm input{width:20px;height:20px}.student-screen{padding:12px;max-width:1700px;margin:auto}.student-screen-header,.student-under{display:flex;justify-content:space-between;margin-bottom:8px;color:var(--sub);font-size:12px}.student-slide{height:calc(100vh - 147px);min-height:260px;background:#fbfcfb;margin:0}.student-slide .slide-paper{font-size:clamp(14px,1.9vw,34px)}.student-slide .frag{font-size:clamp(13px,2vw,37px)}.student-slide .slide-title{font-size:clamp(21px,3vw,45px)}
@media(max-width:1250px){.teacher-tools .btn{font-size:11px;padding:6px 7px}.teacher-layout{grid-template-rows:46px minmax(100px,21fr) minmax(86px,15fr) minmax(260px,64fr)}.teacher-course span{font-size:11px}.note-tabs{gap:1px}.tab{padding:7px 6px;font-size:10px}.notes-foot .btn{font-size:10px}}
@media(max-height:740px) and (min-width:900px){.teacher-layout{grid-template-rows:42px minmax(96px,20fr) minmax(74px,13fr) minmax(255px,67fr);gap:4px;padding:4px}.teacher-heading .btn.small{padding:5px 6px}.pane-head{height:26px}.element-strip,.slide-strip{height:calc(100% - 26px)}.presentation-pane{grid-template-rows:26px minmax(0,1fr) 35px}.notes-pane{grid-template-rows:26px 30px minmax(0,1fr) 35px}.note-tabs .tab{padding:4px}}
@media(max-width:900px){.courses{grid-template-columns:repeat(2,minmax(0,1fr))}.course-slides{grid-template-columns:repeat(3,minmax(0,1fr))}.teacher-layout{height:auto;min-height:calc(100vh - 62px);grid-template-rows:auto 185px 120px minmax(340px,1fr);overflow:visible}.teacher-heading{flex-direction:column;align-items:stretch}.teacher-tools{flex-wrap:wrap}.teaching-bottom{grid-template-columns:1fr}.presentation-pane{height:380px}.notes-pane{height:320px}.top-center{display:none}}
@media(max-width:550px){.app-top{padding:5px 9px}.top-actions .pilot-tag{display:none}.courses{grid-template-columns:1fr}.course-slides{grid-template-columns:repeat(2,minmax(0,1fr))}.two-cols,.dialog-grid{grid-template-columns:1fr}.student-header{gap:7px;padding:4px}.student-header strong{font-size:11px}.registration{margin:9px;padding:18px}.teacher-layout{grid-template-rows:auto 175px 105px auto}.element-choice{flex-basis:160px}.slide-footer{flex-wrap:wrap}.note-tabs{overflow-x:auto}}


/* PZB VISUELLE FOLIEN V2 - vollständiger Inhalt, automatisches Einpassen */
.slide-board .slide-paper.pzb-composed{position:absolute;inset:0;padding:0;margin:0;display:block;overflow:hidden;background:#fbfcfb}
.slide-scene{position:absolute;left:0;top:0;width:1000px;height:max-content;min-height:500px;box-sizing:border-box;padding:32px 48px 30px;transform-origin:top left;display:flex;flex-direction:column;gap:22px;background:#fbfcfb;color:#1b2930;overflow:visible}
.scene-watermark{position:absolute;right:23px;bottom:12px;width:135px;height:100px;object-fit:contain;opacity:.045;pointer-events:none;z-index:0}
.scene-scene>*:not(.scene-watermark){position:relative;z-index:1}
.scene-title{font-size:37px;line-height:1.15;margin:0;padding:0 0 14px;border-bottom:3px solid #37675c;font-weight:800;white-space:pre-line}
.scene-main{display:grid;gap:26px;align-items:center;min-height:0}
.scene-main.with-image{grid-template-columns:minmax(0,47fr) minmax(0,53fr)}
.scene-main.with-image.image-only{grid-template-columns:1fr}
.scene-main.no-image{display:block}
.scene-visuals{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:0}
.scene-visuals img{max-width:100%;max-height:310px;width:auto;height:auto;object-fit:contain;background:white;border-radius:3px}
.scene-main.image-only .scene-visuals img{max-height:510px}
.scene-copy{display:flex;flex-direction:column;gap:12px;min-width:0}
.scene-copy.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px}
.scene-text{font-size:26px;line-height:1.32;white-space:pre-line;overflow-wrap:anywhere;min-width:0}
.scene-copy .scene-text{padding-left:15px;border-left:4px solid #7caba0}
.scene-copy.two-col .scene-text{font-size:26px}
.scene-text.scene-step{border-left-color:#d5aa5e}
.scene-question{margin-top:6px;padding:16px 22px;border-left:6px solid #c4944e;background:#f9f2e7;border-radius:6px;font-size:27px;line-height:1.3}
.scene-question-label{display:block;font-size:17px;letter-spacing:.06em;color:#805b29;text-transform:uppercase;margin-bottom:5px}
.scene-question-text{white-space:pre-line}
.scene-blank{font-size:27px;color:#87949b;text-align:center;margin:170px 0}
.scene-pause{font-size:65px;font-weight:800;text-align:center;padding-top:175px}
.scene-sub{font-size:26px;text-align:center}
/* Bilder in den auswählbaren Steuerelementen auf hellem Hintergrund zeigen. */
.element-choice img{background:white;object-fit:contain;border:1px solid #e6e6e6}

/* PZB V3 – redaktionell gestaltete Folien statt Kacheln. */
.slide-board .slide-paper.pzb-v3{background:#fff;inset:0;}
.pzb-editorial{background:#fff;color:#222d32;padding:33px 47px 30px;gap:19px;min-height:555px;}
.pzb-editorial .scene-title{border-bottom:2px solid #385d55;padding-bottom:15px;font-size:38px;line-height:1.14;letter-spacing:-.018em;}
.pzb-editorial .scene-watermark{opacity:.035;}
.pzb-editorial .pzb-main{min-width:0;position:relative;z-index:1;}
.pzb-main.pzb-text-only{display:block;padding:5px 5px 4px 3px;}
.pzb-copy{min-width:0;display:grid;gap:22px;}
.pzb-line{white-space:pre-line;font-size:29px;line-height:1.32;letter-spacing:-.008em;overflow-wrap:anywhere;padding:0;margin:0;font-weight:480;}
.pzb-copy-prose .pzb-line{padding-left:23px;position:relative;}
.pzb-copy-prose .pzb-line::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:#37675c;border-radius:50%;}
.pzb-photo-text{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:32px;align-items:center;}
.pzb-figures{display:flex;flex-direction:column;gap:10px;align-items:center;min-width:0;}
.pzb-image{max-width:100%;max-height:420px;object-fit:contain;display:block;}
.pzb-photo-only{display:flex;justify-content:center;}.pzb-photo-only .pzb-figures{width:100%;}.pzb-photo-only .pzb-image{max-height:600px;}
.pzb-photo-text .pzb-line{font-size:26px;}
.pzb-copy-columns{grid-template-columns:1fr 1fr;gap:25px 30px;}
.pzb-copy-columns .pzb-line{font-size:26px;}
.pzb-copy-steps .pzb-line{display:flex;gap:20px;align-items:baseline;border-bottom:1px solid #e0e5e5;padding:3px 0 15px;}
.pzb-num{color:#3d6c5f;font-size:22px;font-weight:800;flex:none;}
.pzb-copy-checklist .pzb-line{display:flex;gap:20px;align-items:baseline;}
.pzb-check{color:#287353;font-size:26px;font-weight:850;flex:none;}
.pzb-question{z-index:1;position:relative;border-top:2px solid #d8a75c;margin-top:8px;padding:16px 3px 0;}
.pzb-qprefix{display:block;font-weight:800;color:#86602d;letter-spacing:.06em;font-size:15px;text-transform:uppercase;margin-bottom:7px;}
.pzb-qtext{font-size:30px;line-height:1.25;font-weight:650;margin:0;white-space:pre-line;}
/* Carefully chosen photograph slides: background photo on right, text on opaque gradient left. */
.pzb-main.pzb-overlay{height:420px;display:flex;align-items:center;position:relative;background:#24322f;overflow:hidden;}
.pzb-overlay>.pzb-image{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;}
.pzb-overlay::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,29,28,.96) 0%,rgba(13,29,28,.89) 38%,rgba(13,29,28,.5) 70%,rgba(13,29,28,.03) 100%);}
.pzb-overlay .pzb-copy{position:relative;z-index:1;width:66%;padding:20px 30px;color:#fff;gap:15px;}
.pzb-overlay .pzb-copy .pzb-line{font-size:27px;line-height:1.3;}
.pzb-overlay .pzb-copy-prose .pzb-line::before{background:#f4e4bd;}

/* PZB 2026 · freundliche, wärmere Flächen, ohne starre Graukästen */
:root{--bg:#f6f3ec;--surface:#fffefb;--line:#e4ded3;--teal:#f0f3ec;--accent:#274c48;--ink:#283230;--sub:#6a6e67}
.page{background:linear-gradient(140deg,#faf7f0 0%,#f3eee5 52%,#f7f8f2 100%);border-radius:16px}
.pane{background:#fffdfa;border-color:#e6dfd4}
.course-card{background:linear-gradient(145deg,#fffefa,#f8f4ec)}
.course-slides button{background:#fffdfa}
.history-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}
.history-row button:first-child{text-align:left}
.btn.danger{color:#9c3e32;border-color:#e7c6bf}
/* larger filmstrip, still fits within the same 100vh four-section grid */
.teacher-layout{grid-template-rows:48px minmax(112px,20fr) minmax(112px,20fr) minmax(240px,60fr)}
.slide-card{flex-basis:clamp(195px,24%,340px);padding:10px;background:linear-gradient(145deg,#fffefa,#f6f2e8)}
.slide-card strong{font-size:13px;line-height:1.3;-webkit-line-clamp:3}
@media(max-height:740px) and (min-width:900px){.teacher-layout{grid-template-rows:42px minmax(90px,19fr) minmax(96px,19fr) minmax(235px,62fr)}}
.exam-page{max-width:900px;margin:26px auto;padding:20px 25px;background:#fffefb;border:1px solid #e1d9ce;border-radius:14px}
.exam-page h1{font-size:25px;margin:0}.exam-bar{display:flex;justify-content:space-between;align-items:center;gap:20px}.exam-bar p{margin-bottom:0}
.exam-question{padding:22px;margin:16px 0;border:1px solid #e2ded6;border-radius:10px;background:linear-gradient(125deg,#fffefa,#f9f6f0)}
.exam-question legend{font-weight:750;line-height:1.5;padding:0 7px}.exam-option{display:flex;align-items:flex-start;gap:11px;margin:10px 0;padding:8px;border-radius:6px;font-weight:450;cursor:pointer}
.exam-option:has(input:checked){background:#e6efe9}.exam-option input{width:20px;height:20px;accent-color:#315e53;margin:0;flex:none}
.exam-submit{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:25px 0}.exam-submit span{color:#9b4034}
.exam-person{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.exam-person b{min-width:135px}.exam-actions{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}.exam-actions a{display:inline-flex;align-items:center;text-decoration:none}
@media(max-width:900px){.teacher-layout{height:auto;grid-template-rows:auto 185px 135px minmax(340px,1fr);overflow:visible}}
@media(max-width:550px){.exam-page{padding:14px;margin:10px}.exam-question{padding:15px}.exam-bar{align-items:flex-start;flex-direction:column}}

/* PZB Pilot: Praxisprüfung und Dokumentenakte · tablet-tauglich */
.section-picker{font-size:12px;display:flex;gap:6px;align-items:center;background:#faf6ee;border-radius:7px;padding:4px 7px}
.section-picker select{min-width:120px;max-width:156px;padding:7px;border:1px solid #d0c4b6;border-radius:6px;background:white}
.pzb-actions{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0}
.pzb-people{display:grid;gap:10px}
.pzb-person{border:1px solid #dfd4c4;background:#fffefa;border-radius:9px;padding:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pzb-person strong{min-width:180px}.pzb-person small{color:#59675c;flex:1;min-width:185px}
.pzb-field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:650;min-width:0;flex:1}
.pzb-control{min-width:0;width:100%;padding:10px;border:1px solid #cfc7bc;border-radius:8px;background:#fff;color:#252c2c;font-size:16px}
textarea.pzb-control{min-height:90px;resize:vertical}
.pzb-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pzb-exercise,.pzb-grade-item{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #e8e0d5;padding:9px 0}
.pzb-exercise span,.pzb-grade-item span{font-size:14px;flex:1}
.pzb-exercise select,.pzb-grade-item select{min-width:135px;width:auto}
.pzb-grade-group{margin:12px 0;border:1px solid #ded4c5;padding:12px;border-radius:9px}
.pzb-grade-group legend{font-weight:750;padding:0 9px}
.pzb-total{display:block;font-size:20px;padding:12px 0;color:#2d554c}
.pzb-checkline{display:flex;gap:12px;align-items:center;padding:10px 4px;font-weight:650}
.pzb-checkline input{width:22px;height:22px;accent-color:#345d51}
.pzb-warning{border-left:4px solid #a74436;padding:10px;background:#f9edeb}
.pzb-video{width:100%;max-height:430px;object-fit:contain;background:#181c1d}
@media(max-width:650px){.pzb-form-grid{grid-template-columns:1fr}.pzb-grade-item,.pzb-exercise{align-items:flex-start;flex-direction:column}.pzb-grade-item select,.pzb-exercise select{width:100%}}

/* Mehr Werkzeuge: horizontale Symbolleiste statt breiter als Bildschirm */
.teacher-heading .teacher-tools{min-width:0;flex:1;justify-content:flex-end;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding:2px 0}
.teacher-heading .teacher-course{flex:0 1 300px;max-width:300px}
.teacher-heading .teacher-tools>*{flex:none}
@media(max-width:1100px){.teacher-heading .teacher-course{flex-basis:205px}.section-picker{font-size:11px}}

/* PZB 15 – easy-to-find course exams. Keep the teacher layout unchanged. */
.course-exams{margin:8px 0 24px;padding:13px 17px 17px;background:linear-gradient(120deg,#fffaf1,#f2eee5);border:1px solid #e1d7c6;border-radius:13px}
.course-exams h2{font-size:18px;margin:0 0 11px;color:#2b4038}
.course-exam-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.course-exam-link{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:left;padding:15px 18px;border:1px solid #b6c4bc;background:#fffefa}
.course-exam-link:hover{background:#f5f5ec;border-color:#547a68}
.course-exam-link strong{font-size:16px}
.course-exam-link small{font-size:12px;font-weight:450;color:#4a5a51;line-height:1.4}
.course-exam-chevron{margin-top:3px;color:#245447;font-size:12px;font-weight:750}
@media(max-width:650px){.course-exam-actions{grid-template-columns:1fr}}


/* PZB · warme, ruhigere Gesamtgestaltung (2026-10) */
:root{--bg:#f4efe7;--surface:#fffdfa;--ink:#283330;--sub:#6b716b;--line:#e7ded1;--accent:#264d4b;--accent2:#4a766b;--teal:#edf4ee;--warn:#aa7942;--danger:#9b3b31;--sand:#e7cda9}
html,body{font-family:"Avenir Next","Segoe UI",Inter,system-ui,-apple-system,Arial,sans-serif;letter-spacing:-.005em;background:#f4efe7;color:var(--ink)}
body{background:radial-gradient(circle at 92% 2%,#f4e8d8 0,transparent 35%),radial-gradient(circle at 6% 82%,#edf1e9 0,transparent 32%),#f7f2ea}
.page{border-radius:22px;background:transparent}
.app-top{background:#fffdf9;border-bottom:1px solid #eadfce}
.btn,.tab,.course-stats span,.course-card,.slide-card,.element-item,.pane,.login-box,.dialog,.registration,.exam-question,.exam-page,.course-exams,.pzb-person,.pzb-control,.pzb-grade-group{border-radius:14px}
.btn{background:#fffefa;border-color:#d6cbbb;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}
.btn:hover{background:#f5f0e7;border-color:#bfae98}
.btn.primary{background:#294f4b;border-color:#294f4b;color:#fff}
.btn.primary:hover{background:#38665d;border-color:#38665d}
.btn:focus-visible,.element-actions button:focus-visible{outline:3px solid #d3ac79;outline-offset:2px}
.course-card{background:linear-gradient(155deg,#fffdf9,#f7f0e4);border-color:#e2d8ca}
.course-card:hover,.slide-card:hover{box-shadow:0 6px 18px rgba(80,59,28,.07)}
.course-stats span{background:#f0ece0;color:#365b54;border-color:#e0d5c2}
.pane{background:#fffefa;border-color:#e8ded0}
.teacher-layout{background:linear-gradient(135deg,#f5eee3,#f5f4eb 65%,#f1eee9)}
.teacher-heading{background:#f9f5ee;border-bottom:1px solid #e9ddcb}
.teacher-layout .pane-head{color:#2d403b;background:linear-gradient(90deg,#fffcf6,#fffefa);border-radius:14px 14px 0 0}
.element-strip,.slide-strip{gap:10px}
.element-item{flex:0 0 clamp(205px,22%,305px);height:100%;background:#fffdf8;border:1px solid #ddd4c8;padding:9px 11px;display:flex;flex-direction:column;gap:4px;overflow:hidden;min-width:0}
.element-item.active{border-color:#7eab9a;background:#f1f6f0}
.element-item>.element-type{text-transform:uppercase;font-size:10px;letter-spacing:.08em;font-weight:800;color:#657268}
.element-summary{font-size:12px;font-weight:650;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:0}
.element-item img{max-height:24px;max-width:58px;object-fit:contain;background:#fff;border-radius:5px}
.element-actions{display:flex;gap:5px;margin-top:auto;align-items:center}
.element-actions .btn{font-size:10px;padding:4px 8px;border-radius:8px}
.element-actions .e-state{font-size:10px;color:#58746b}
.pzb-preview-desc{color:#67736a;font-size:13px}
.pzb-preview-text{font-size:20px;line-height:1.5;background:#f8f4eb;border:1px solid #e9dfd1;border-radius:14px;white-space:pre-line;padding:24px;margin:12px 0}
.pzb-preview-image{max-height:65vh;width:100%;object-fit:contain;background:#f7f3ed;border-radius:14px;padding:10px}
.pzb-quiz-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.pzb-quiz-picker .btn{text-align:left;white-space:normal}
.exam-sign{margin:22px 0;padding:18px;background:#f9f4eb;border:1px solid #decdb7;border-radius:18px}
.exam-sign h2{margin:0 0 8px;font-size:19px}.exam-sign p{font-size:14px;color:#525f59}
.exam-sign .signature{height:160px;border:2px dashed #b6a58e;background:#fff}
.exam-confirmed{font-size:12px;color:#23624d;font-weight:750}
.exam-warning{font-size:11px;color:#9d5036}
.notes-pane .tab{background:#f3eee6}.notes-pane .tab.active{background:#e7ece5;color:#315a4e}
.pzb-editorial{background:#fffdf9}.slide-board .slide-paper.pzb-v3{background:#fffdfa}
.pzb-editorial .scene-title{border-bottom-color:#8ea99b;color:#283631}
.pzb-copy-prose .pzb-line::before{background:#467669}
.pzb-question{border-top-color:#d8b586}
.pzb-qprefix{color:#876643}
@media(max-width:700px){.pzb-quiz-picker{grid-template-columns:1fr}.element-item{flex-basis:220px}}
@media (prefers-reduced-motion: reduce){.btn{transition:none}}

/* V17: meaningful previews directly in the upper filmstrip; entire teaching UI stays on screen. */
@media(min-width:901px){
 .teacher-layout{grid-template-rows:48px minmax(150px,26fr) minmax(108px,19fr) minmax(240px,55fr)}
}
@media(min-width:901px) and (max-height:740px){
 .teacher-layout{grid-template-rows:42px minmax(126px,25fr) minmax(99px,20fr) minmax(225px,55fr)}
}
.element-item{flex:0 0 clamp(260px,28%,385px);overflow:hidden;gap:5px;padding:8px 12px;background:#fffcf6}
.element-item .element-summary{display:block;-webkit-line-clamp:unset;overflow-wrap:break-word;white-space:pre-wrap;overflow-x:hidden;overflow-y:auto;flex:1 1 auto;min-height:20px;font-size:14px;font-weight:650;line-height:1.22;scrollbar-width:thin}
.element-item .element-summary.element-medium{font-size:12.5px;line-height:1.2}
.element-item .element-summary.element-long{font-size:11.5px;line-height:1.17}
.element-item .element-thumb{object-fit:contain;width:auto;height:auto;max-height:calc(100% - 56px);max-width:100%;align-self:flex-start;border-radius:7px;background:#fffdfa}
.element-item .element-video-thumb{width:100%;max-height:calc(100% - 56px);object-fit:contain;border-radius:7px;background:#232f2e}
.element-media-caption{font-size:12px;font-weight:600;line-height:1.25;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.element-item .element-actions{flex:none;margin-top:auto;gap:5px}
.element-strip{scrollbar-width:auto;scrollbar-color:#aaab9e #f1eadd}
.slide-strip{scrollbar-width:auto;scrollbar-color:#90a39b #eee7da;cursor:grab;overscroll-behavior-x:contain;touch-action:pan-x}
.slide-strip.is-dragging{cursor:grabbing;user-select:none}
.slide-strip.is-dragging .slide-card{pointer-events:none}
.slide-strip:focus-visible{outline:2px solid #446c61;outline-offset:-3px}
.filmstrip-controls{display:inline-flex;gap:5px;align-items:center;white-space:nowrap}
.filmstrip-controls .filmstrip-pan{border:1px solid #cdbda8;background:#faf4e9;color:#31564f;border-radius:8px;min-width:34px;min-height:28px;font-size:17px;font-weight:700;cursor:pointer}
.filmstrip-controls .filmstrip-pan:hover{background:#e8ece4}
.filmstrip-controls .filmstrip-pan:focus-visible{outline:2px solid #31564f;outline-offset:1px}
@media(max-width:1100px){.filmstrip-instruction{display:none}}
@media(max-width:900px){.element-item{flex-basis:275px}}

/* V18 installable cross-platform app */
.pzb-install-btn{border-color:#afc4be;background:#f0f6f1;color:#234d45;white-space:nowrap;font-weight:700}
.course-day-choice select{min-width:275px;max-width:min(95vw,420px);background:#fffefa;border-radius:12px;border:1px solid #d4c9b7;padding:10px 12px;font:inherit;color:#274c48}
.course-day-choice{display:flex;flex-direction:column;gap:5px}
@media(max-width:650px){.pzb-install-btn{font-size:12px;padding:8px 10px}.course-day-choice select{min-width:0;width:100%}}
@media(display-mode:standalone){.pzb-install-btn{display:none}}


/* PZB ACADEMY SOFT DESIGN V1 */

:root {
    --ink: #233e3e;
    --muted: #74817d;
    --line: #e3e8e3;
    --teal: #15575d;
    --mint: #e6efdf;
    --paper: #f5f6f1;
    --orange: #c97949;
    --shadow: 0 10px 36px rgba(34,61,58,.045);
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Arial, sans-serif;
}

button, input, select, textarea {
    font: inherit;
}

button {
    transition: background .18s ease,
                box-shadow .18s ease,
                transform .18s ease;
}

button:active:not(:disabled) {
    transform: translateY(1px);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 3px;
}

.app-top {
    background: #fcfcf9;
    border-bottom: 1px solid var(--line);
    box-shadow: none;
}

.app-top .brand,
.app-top .top-center {
    color: var(--ink);
}

.page,
.teacher-layout {
    background: var(--paper);
}

.course-head,
.teacher-heading {
    background: #fcfcf9;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
}

.teacher-heading {
    padding: 18px 22px;
}

.teacher-course strong {
    color: var(--teal);
}

.teacher-course span {
    color: var(--muted);
}

.pane,
.course-card,
.course-controls,
.course-stats {
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.pane-head {
    background: #fcfcf9;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}

.btn {
    border-radius: 10px;
    transition: background .18s ease,
                box-shadow .18s ease,
                transform .18s ease;
}

.btn:not(.minimal):not(.danger) {
    border-color: var(--line);
}

.btn.primary,
.btn.primary:not(:disabled) {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
}

.btn.primary:hover:not(:disabled) {
    background: #206970;
}

.btn.minimal {
    color: var(--teal);
}

.course-card {
    overflow: hidden;
}

.course-card:hover:not(:disabled) {
    box-shadow: 0 12px 32px rgba(21,87,93,.09);
}

select,
input,
textarea {
    border-radius: 10px;
}

select {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
}

.slide-strip {
    scrollbar-color: #c7d2c5 transparent;
}

.slide-card {
    border-radius: 11px;
    transition: background .18s ease,
                border-color .18s ease,
                box-shadow .18s ease;
}

.slide-card.selected {
    border-color: var(--teal);
    box-shadow: 0 3px 12px rgba(21,87,93,.12);
}

.filmstrip-pan {
    border-radius: 9px;
}

.course-head h1,
.teacher-heading h1 {
    color: var(--ink);
    letter-spacing: -.5px;
}

.pilot-tag {
    border-radius: 20px;
}

@media (prefers-reduced-motion: reduce) {
    button,
    .btn,
    .slide-card {
        transition: none !important;
    }
}


/* PZB DOZENTENPLATZ LAYOUT V2 */

/* Die Unterrichtsansicht wird als vertikaler Arbeitsplatz aufgebaut. */
#teacherView:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: none;
    padding: 16px 22px 32px;
    background: #f5f6f1;
}

/* Obere Unterrichts- und Werkzeugleiste */
#teacherView .teacher-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: #fcfcf9;
    border: 1px solid #e3e8e3;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(34,61,58,.04);
}

#teacherView .teacher-course {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

#teacherView .teacher-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

#teacherView .teacher-tools .btn {
    border-radius: 9px;
    white-space: nowrap;
}

/* Bereich 1: Große Live-Teilnehmeransicht */
#teacherView .teaching-top {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 260px;
    overflow: hidden;
}

#teacherView .teaching-top .pane-head {
    flex: 0 0 auto;
}

#teacherView #elementStrip {
    flex: 1 1 auto;
    min-height: 210px;
    overflow: auto;
}

/* Bereich 2: Horizontales Folienband */
#teacherView .teaching-mid {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

#teacherView .teaching-mid .pane-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#teacherView #slideStrip {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding: 14px;
    scrollbar-color: #bfcfc1 transparent;
}

/* Bereich 3: Aktuelle Folie links, Dozentenwissen rechts */
#teacherView .teaching-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr);
    gap: 16px;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

#teacherView .presentation-pane,
#teacherView .notes-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 350px;
    margin: 0;
    overflow: hidden;
}

#teacherView #teacherSlide {
    flex: 1 1 auto;
    min-height: 265px;
    width: 100%;
}

#teacherView .notes-copy {
    flex: 1 1 auto;
    min-height: 225px;
    overflow-y: auto;
}

#teacherView .notes-foot,
#teacherView .slide-footer {
    flex: 0 0 auto;
}

/* Ruhige Oberfläche nach dem PZB-Academy-Entwurf */
#teacherView .pane {
    background: #fff;
    border: 1px solid #e3e8e3;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(34,61,58,.045);
}

#teacherView .pane-head {
    background: #fcfcf9;
    border-bottom: 1px solid #e3e8e3;
    color: #233e3e;
}

#teacherView .slide-card {
    flex-shrink: 0;
    border-radius: 10px;
}

#teacherView .slide-card.selected {
    border-color: #15575d;
    box-shadow: 0 3px 12px rgba(21,87,93,.13);
}

#teacherView .tab.active {
    color: #15575d;
}

/* Kleinere Bildschirme: Dozententext unter der Folie */
@media (max-width: 1050px) {
    #teacherView .teaching-bottom {
        grid-template-columns: minmax(0, 1fr);
    }

    #teacherView .presentation-pane,
    #teacherView .notes-pane {
        min-height: 300px;
    }
}

@media (max-width: 650px) {
    #teacherView:not([hidden]) {
        padding: 12px;
        gap: 12px;
    }

    #teacherView .teacher-heading {
        padding: 12px;
    }

    #teacherView .teaching-top {
        min-height: 200px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #teacherView #slideStrip {
        scroll-behavior: auto;
    }
}

/* Verborgene Ansichten bleiben verborgen. */
#teacherView[hidden] {
    display: none !important;
}



/* MOBILE-LAYOUT-1: touch devices only. Desktop mouse layouts are unchanged. */
@media (max-width:1099px) and (pointer:coarse) {
 html body{min-width:0;-webkit-text-size-adjust:100%}
 html body #loginView.login-wrap{min-height:100svh;height:auto;padding:24px max(16px,env(safe-area-inset-right)) 24px max(16px,env(safe-area-inset-left));align-items:center;overflow:visible}
 html body #loginForm.login-box{width:min(100%,460px);max-width:100%;margin:0 auto;padding:24px;box-sizing:border-box}
 #loginForm .login-logo{width:140px;max-width:45%;height:auto;max-height:110px;object-fit:contain;margin:0 0 16px}
 #loginForm h1{font-size:clamp(25px,6vw,32px);line-height:1.15;margin:8px 0 16px;overflow-wrap:anywhere}
 #loginForm p{font-size:15px;line-height:1.5;margin:12px 0}
 #loginForm .notice{font-size:13px;line-height:1.5;padding:14px;margin-top:20px}
 html body input:not([type=checkbox]):not([type=radio]),html body select,html body textarea{font-size:16px!important;max-width:100%;box-sizing:border-box}
 html body button,html body .btn,html body input:not([type=checkbox]):not([type=radio]),html body select{min-height:44px}
 html body .dialog,html body dialog{max-width:calc(100vw - 24px);max-height:88svh;overflow:auto;box-sizing:border-box}
 html body .dialog-grid,html body .two-cols{grid-template-columns:minmax(0,1fr)}
 html body .student-header{height:auto;min-height:64px;flex-wrap:wrap;padding:8px 12px;gap:8px}
 html body .student-header img{height:44px;width:60px}
 html body .student-header strong{font-size:15px;min-width:0;overflow-wrap:anywhere}
 html body .student-header span{width:100%;font-size:12px}
 html body .registration,html body .exam-page{width:auto;max-width:760px;margin:12px;padding:18px;box-sizing:border-box}
 html body .student-screen{padding:10px;max-width:100%}
 html body .student-screen-header,html body .student-under{flex-wrap:wrap;gap:10px}
 html body .student-slide{height:62svh;min-height:300px;max-width:100%}
 html body .exam-bar{flex-wrap:wrap;gap:12px}
 html body .exam-question{padding:14px;overflow-wrap:anywhere}
 html body .exam-question label{padding:10px 4px;min-height:44px}
 html body .signature{max-width:100%;height:160px}
 html body .exam-submit,html body .pzb-actions{flex-wrap:wrap;gap:10px}
 html body .dialog-header{padding:12px;gap:8px}
 html body #dialogBody{padding:14px;overflow-x:auto}
 html body .person-line,html body .event-line{flex-wrap:wrap;overflow-wrap:anywhere}
}
@media (min-width:1100px) and (max-width:1366px) and (pointer:coarse) {
 html body button,html body .btn,html body select{min-height:44px}
 html body input:not([type=checkbox]):not([type=radio]),html body select,html body textarea{font-size:16px!important}
}
@media (max-width:1099px) and (pointer:coarse){
 select,input,textarea{max-width:100%;box-sizing:border-box;min-width:0}
}


/* MOBILE-LAYOUT-1: touch devices only. Desktop mouse layouts are unchanged. */
@media (max-width:1366px) and (pointer:coarse) {
 html body{min-width:0;-webkit-text-size-adjust:100%}
 html body #loginView.login-wrap{min-height:100svh;height:auto;padding:24px max(16px,env(safe-area-inset-right)) 24px max(16px,env(safe-area-inset-left));align-items:center;overflow:visible}
 html body #loginForm.login-box{width:min(100%,460px);max-width:100%;margin:0 auto;padding:24px;box-sizing:border-box}
 #loginForm .login-logo{width:140px;max-width:45%;height:auto;max-height:110px;object-fit:contain;margin:0 0 16px}
 #loginForm h1{font-size:clamp(25px,6vw,32px);line-height:1.15;margin:8px 0 16px;overflow-wrap:anywhere}
 #loginForm p{font-size:15px;line-height:1.5;margin:12px 0}
 #loginForm .notice{font-size:13px;line-height:1.5;padding:14px;margin-top:20px}
 html body input:not([type=checkbox]):not([type=radio]),html body select,html body textarea{font-size:16px!important;max-width:100%;box-sizing:border-box}
 html body button,html body .btn,html body input:not([type=checkbox]):not([type=radio]),html body select{min-height:44px}
 html body .dialog,html body dialog{max-width:calc(100vw - 24px);max-height:88svh;overflow:auto;box-sizing:border-box}
 html body .dialog-grid,html body .two-cols{grid-template-columns:minmax(0,1fr)}
 html body .student-header{height:auto;min-height:64px;flex-wrap:wrap;padding:8px 12px;gap:8px}
 html body .student-header img{height:44px;width:60px}
 html body .student-header strong{font-size:15px;min-width:0;overflow-wrap:anywhere}
 html body .student-header span{width:100%;font-size:12px}
 html body .registration,html body .exam-page{width:auto;max-width:760px;margin:12px;padding:18px;box-sizing:border-box}
 html body .student-screen{padding:10px;max-width:100%}
 html body .student-screen-header,html body .student-under{flex-wrap:wrap;gap:10px}
 html body .student-slide{height:62svh;min-height:300px;max-width:100%}
 html body .exam-bar{flex-wrap:wrap;gap:12px}
 html body .exam-question{padding:14px;overflow-wrap:anywhere}
 html body .exam-question label{padding:10px 4px;min-height:44px}
 html body .signature{max-width:100%;height:160px}
 html body .exam-submit,html body .pzb-actions{flex-wrap:wrap;gap:10px}
 html body .dialog-header{padding:12px;gap:8px}
 html body #dialogBody{padding:14px;overflow-x:auto}
 html body .person-line,html body .event-line{flex-wrap:wrap;overflow-wrap:anywhere}
}
@media (min-width:1100px) and (max-width:1366px) and (pointer:coarse) {
 html body button,html body .btn,html body select{min-height:44px}
 html body input:not([type=checkbox]):not([type=radio]),html body select,html body textarea{font-size:16px!important}
}
@media (max-width:1366px) and (pointer:coarse){
 select,input,textarea{max-width:100%;box-sizing:border-box;min-width:0}
}

/* MOBILE-2: all additions are limited to compact touch screens. */
@media (max-width:1366px) and (pointer:coarse){
 #overlay:not([hidden]){padding:12px;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom));box-sizing:border-box;overscroll-behavior:contain}
 html body #overlay .dialog{width:min(900px,100%);max-width:100%;max-height:calc(100svh - 24px);display:flex;flex-direction:column;overflow:hidden;margin:auto;box-sizing:border-box}
 html body #overlay .dialog-header{flex:0 0 auto;flex-wrap:wrap;padding:12px;gap:8px}
 #overlay .dialog-header h2{font-size:21px;line-height:1.25;min-width:0;overflow-wrap:anywhere;margin:0;flex:1 1 160px}
 html body #overlay #dialogBody{min-height:0;overflow:auto;overscroll-behavior:contain;padding:14px;overflow-wrap:anywhere}
 #dialogBody>*{max-width:100%;box-sizing:border-box}
 #dialogBody .dialog-grid{display:grid!important;grid-template-columns:1fr!important;gap:14px}
 #dialogBody .dialog-grid>*{min-width:0}
 #dialogBody .dialog-qr{max-width:min(240px,100%);height:auto;display:block;margin:auto}
 #dialogBody a{overflow-wrap:anywhere}
 #dialogBody .pzb-form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 #dialogBody .pzb-field,#dialogBody fieldset{min-width:0;max-width:100%;box-sizing:border-box}
 #dialogBody .pzb-actions,#dialogBody .exam-actions,#dialogBody .exam-person{display:flex;flex-wrap:wrap;gap:10px}
 #dialogBody button,#dialogBody .btn{white-space:normal;overflow-wrap:anywhere;min-height:44px;max-width:100%;box-sizing:border-box;line-height:1.35}
 #dialogBody .pzb-person,#dialogBody .person-line,#dialogBody .event-line{flex-wrap:wrap;gap:10px;min-width:0}
 #dialogBody .pzb-person strong,#dialogBody .exam-person b{min-width:0;overflow-wrap:anywhere}
 #dialogBody .pzb-exercise,#dialogBody .pzb-grade-item{gap:12px;min-width:0}
 #dialogBody .pzb-exercise span,#dialogBody .pzb-grade-item span{min-width:0;overflow-wrap:anywhere}
 #dialogBody .pzb-grade-group legend{max-width:100%;white-space:normal;box-sizing:border-box}
 #dialogBody .signature{display:block;width:100%;max-width:100%;height:160px;box-sizing:border-box;touch-action:none}
 #dialogBody .confirm,#dialogBody .pzb-checkline{min-height:44px;align-items:center;gap:12px}
 #dialogBody input[type=checkbox],#dialogBody input[type=radio]{flex:0 0 22px;width:22px;height:22px}
 #pzb-admin-register,.pzb-calendar-backdrop,#pzb-d13{padding:12px!important;box-sizing:border-box;overscroll-behavior:contain}
 #pzb-admin-register .pzb-reg-dialog{width:min(900px,100%);height:min(850px,calc(100svh - 24px));max-width:100%;max-height:calc(100svh - 24px)}
 #pzb-admin-register .pzb-reg-dialog header{padding:14px;gap:10px;flex:none}
 #pzb-admin-register h2{font-size:23px;overflow-wrap:anywhere}
 #pzb-admin-register .pzb-reg-search{padding:12px 14px;flex:none}
 #pzb-admin-register .pzb-reg-results{padding:0 14px 14px;overscroll-behavior:contain}
 #pzb-admin-register .pzb-reg-row{flex-wrap:wrap;padding:12px;gap:10px;overflow-wrap:anywhere}
 #pzb-admin-register .pzb-reg-row>div{min-width:0;flex:1 1 230px}
 #pzb-admin-register a{white-space:normal;min-height:44px;display:inline-flex;align-items:center}
 #pzb-admin-register button{min-width:44px;min-height:44px;white-space:normal}
 .pzb-calendar-backdrop .pzb-calendar-dialog{width:min(520px,100%);max-height:calc(100svh - 24px);overflow:auto;box-sizing:border-box;padding:18px}
 .pzb-calendar-dialog input{min-width:0;max-width:100%;font-size:16px}
 .pzb-calendar-dialog-actions button{min-height:44px;white-space:normal}
 #pzb-d13>section{width:min(700px,100%)!important;max-width:100%;max-height:calc(100svh - 24px)!important;padding:16px!important;box-sizing:border-box}
 #pzb-d13 article{flex-wrap:wrap;overflow-wrap:anywhere}
 #examTrainerView .pzb-exam-courses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 #examTrainerView button{white-space:normal;max-width:100%;min-width:0;min-height:44px}
 #examTrainerView .pzb-exam-results{overflow-wrap:anywhere}
 #examTrainerView .pzb-exam-results>.btn{margin:6px 6px 6px 0}
 #teacherView .slide-footer{height:auto!important;min-height:0;flex-wrap:wrap;gap:10px;padding:10px;flex-shrink:0}
 #teacherView .slide-footer>div{display:flex;flex-wrap:wrap;gap:6px;max-width:100%}
 #teacherView .slide-footer .btn,#teacherView .note-tabs .tab{min-height:44px;white-space:normal}
 #teacherView .presentation-pane{display:flex;flex-direction:column}
 #teacherView #teacherSlide{min-height:150px!important;flex:1 1 auto;min-width:0}
 #teacherView #pzb113Nav{display:flex!important;flex-direction:column;min-height:150px;max-height:360px;overflow:hidden}
 #teacherView #pzb113Nav .pzb113-list{overflow:auto;overscroll-behavior:contain}
 #teacherView .teacher-course,#teacherView .teacher-heading{min-width:0;max-width:100%;overflow-wrap:anywhere}
 #protected #pzbTeacherLanguageControl{max-width:100%;flex-wrap:wrap;margin:0!important}
 #protected .pzb-v7-menu-item{box-sizing:border-box;max-width:100%;min-height:44px}
 .pzb-dashboard-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pzb-dashboard-action-copy{min-width:0;overflow-wrap:anywhere}
 .pzb-calendar-event{flex-wrap:wrap}
 .pzb-calendar-info{flex-basis:140px;overflow-wrap:anywhere}
 .pzb-calendar-panel>h3{padding-right:0}
 .pzb-calendar-add{position:static;margin:8px 0;min-height:44px}
 .history-row{grid-template-columns:minmax(0,1fr);gap:8px}
 .course-controls,.course-exam-actions{flex-wrap:wrap;gap:10px}
 .course-exam-link{min-width:0;white-space:normal}
 .course-exam-link small{white-space:normal;overflow-wrap:anywhere}
}
@media (max-width:650px) and (pointer:coarse){
 #dialogBody .pzb-form-grid,#examTrainerView .pzb-exam-courses,.pzb-dashboard-actions{grid-template-columns:minmax(0,1fr)}
 #dialogBody .pzb-exercise,#dialogBody .pzb-grade-item{display:flex;flex-direction:column;align-items:stretch}
 #dialogBody .pzb-exercise select,#dialogBody .pzb-grade-item select{width:100%;min-width:0}
 #dialogBody .pzb-actions>*,#dialogBody .exam-actions>*{flex:1 1 180px;text-align:center;justify-content:center}
 #teacherView .presentation-pane{height:auto!important;min-height:360px!important}
 #teacherView #teacherSlide{height:52vw!important;min-height:160px!important;flex:0 0 auto}
 #teacherView .notes-pane .notes-copy{max-height:none!important}
 #teacherView .notes-foot>.btn{flex:1 1 110px}
 #teacherView .teacher-tools>label{flex:1 1 100%}
}
@media (max-width:1366px) and (pointer:coarse){
 html body #overlay:not([hidden]){position:fixed;inset:0;z-index:1000000!important}
 html body dialog{max-height:calc(100svh - 24px);max-width:calc(100vw - 24px);overflow:auto;box-sizing:border-box;overscroll-behavior:contain}
 html body #pzb28-materials{width:min(850px,calc(100vw - 24px));max-height:calc(100svh - 24px);padding:16px;overflow-wrap:anywhere}
 #pzb28-materials label{display:flex;align-items:center;gap:10px;min-height:44px}
}

@media (max-width:1366px) and (pointer:coarse){
 body:has(main>section>table) main{margin:12px auto;padding:0 12px}
 body:has(main>section>table) main>section{padding:14px;overflow:auto;max-width:100%;box-sizing:border-box}
 body:has(main>section>table) header{padding:16px}
 body:has(main>section>table) h1{font-size:24px;overflow-wrap:anywhere}
 body:has(main>section>table) table{min-width:680px}
}