@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@600;700&family=Source+Sans+3:wght@400;600;700&family=Source+Serif+4:wght@400;600;700&display=swap');
/* Every layout override is scoped to Teil 2; the existing player styles remain the fallback. */
#lesson.sprechen-teil2{background:#eef0ec}
#lesson.sprechen-teil2 #lessonbody.dk-sp-teil2{font-family:'Source Sans 3','IBM Plex Sans Arabic',system-ui,sans-serif;background:#eef0ec;color:#10231a;overflow:hidden!important}
#lesson.sprechen-teil2 .dk-sp-main{display:grid;grid-template-columns:minmax(320px,1fr) minmax(0,2fr);gap:24px;padding:24px 32px;align-items:start;overflow:auto;overscroll-behavior:contain;scroll-padding:20px}
#lesson.sprechen-teil2 .dk-sp2-tools{padding:28px;border-radius:24px;overflow:visible;position:sticky;top:0}
#lesson.sprechen-teil2 [data-sp2-controls]{display:flex;flex-direction:column;gap:20px}
#lesson.sprechen-teil2 .dk-sp2-label{font:700 16px/1.4 'Source Sans 3',system-ui,sans-serif;color:#15994a;letter-spacing:.08em;margin:0}
#lesson.sprechen-teil2 .dk-sp2-timers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#lesson.sprechen-teil2 .dk-sp2-timer{min-width:0;padding:18px 16px;background:#f7f9f6;border:1px solid #e3e7e2;border-radius:16px;display:grid;gap:6px}
#lesson.sprechen-teil2 .dk-sp2-timer strong{font:700 clamp(24px,2.2vw,32px)/1.3 'JetBrains Mono',monospace;direction:ltr;text-align:start;font-variant-numeric:tabular-nums}
#lesson.sprechen-teil2 .dk-sp2-timer span{font-size:16px;color:#55625a;overflow-wrap:anywhere}
#lesson.sprechen-teil2 .dk-sp2-timer.preparing{background:#f1f9f3;border-color:#15994a}
#lesson.sprechen-teil2 .dk-sp2-timer.recording{background:#fdecec;border-color:#d92d20}
#lesson.sprechen-teil2 [data-sp2-controls]>.dk-sp-btn{width:100%;min-height:54px;padding:16px 14px;border-radius:14px;font-size:18px!important;white-space:normal;line-height:1.45;border-color:#dfe4de;box-shadow:none}
#lesson.sprechen-teil2 [data-sp2-controls]>.green{background:#15994a;color:#fff;border-color:#15994a}
#lesson.sprechen-teil2 [data-sp2-controls]>.red{background:#d92d20;color:#fff;border-color:#d92d20}
#lesson.sprechen-teil2 [data-sp2-controls]>.dark{background:#10231a;color:#fff;border-color:#10231a}
#lesson.sprechen-teil2 .dk-sp2-reset{align-self:center;border:0;background:transparent;text-decoration:underline;text-underline-offset:3px;color:#55625a;font-size:15px;padding:0 8px}
#lesson.sprechen-teil2 .dk-sp2-recording{padding:12px 14px;border-radius:12px;background:#fdecec;color:#b42318;display:flex;align-items:center;gap:9px;font-weight:700}
#lesson.sprechen-teil2 .dk-sp2-recording i{width:9px;height:9px;border-radius:50%;background:#d92d20;flex:none}
#lesson.sprechen-teil2 .dk-sp2-divider{height:1px;background:#e3e7e2}
#lesson.sprechen-teil2 [data-sp2-controls]>.dk-sp2-examples-button{border:1px dashed #15994a;background:#f1f9f3;color:#0e7a39}
#lesson.sprechen-teil2 .dk-sp2-privacy{color:#6b7770;font-size:14px;line-height:1.8;margin:0}
#lesson.sprechen-teil2 .dk-sp-notice{margin:0;font-size:14px}
#lesson.sprechen-teil2 .dk-sp2-task{display:flex;flex-direction:column;gap:18px;padding:36px 44px;border-radius:28px}
#lesson.sprechen-teil2 .dk-sp-eyebrow{font-size:14px;font-weight:700;letter-spacing:.16em;color:#15994a;overflow-wrap:anywhere;line-height:1.6}
#lesson.sprechen-teil2 .dk-sp2-intro{font-size:17px;line-height:1.6;color:#3c4a42}
#lesson.sprechen-teil2 .dk-sp2-situation{padding:22px 26px;border:1px solid #e3e7e2;background:#f7f9f6;border-radius:18px}
#lesson.sprechen-teil2 .dk-sp2-situation h3{font:700 13px/1.6 'Source Sans 3',system-ui,sans-serif;letter-spacing:.16em;color:#55625a;margin:0 0 12px;direction:ltr;text-align:left}
#lesson.sprechen-teil2 .dk-sp2-situation p{font:400 19px/1.65 'Source Serif 4',Georgia,serif;margin:0;white-space:pre-wrap}
#lesson.sprechen-teil2 .dk-sp-cardhead{margin:0;gap:12px}
#lesson.sprechen-teil2 .dk-sp-cardhead h3{font:700 17px/1.5 'Source Sans 3',system-ui,sans-serif;color:#15994a;letter-spacing:.08em}
#lesson.sprechen-teil2 .mono{font:700 17px/1.5 'JetBrains Mono',monospace;color:#55625a;direction:ltr}
#lesson.sprechen-teil2 .dk-sp-points{display:grid;grid-template-columns:1fr;gap:16px}
#lesson.sprechen-teil2 .dk-sp-point{padding:16px 22px;border-radius:14px;gap:16px;align-items:flex-start;border-color:#e3e7e2}
#lesson.sprechen-teil2 .dk-sp-point .de{font:400 21px/1.5 'Source Serif 4',Georgia,serif}
#lesson.sprechen-teil2 .dk-sp-point>i{width:34px;height:34px;font:700 13px/1 'JetBrains Mono',monospace;font-style:normal}
#lesson.sprechen-teil2 .dk-sp-point.active{background:#f1f9f3;border-color:#15994a}
#lesson.sprechen-teil2 .dk-sp-point.done>i{background:#15994a}
#lesson.sprechen-teil2 .dk-sp2-point-help{font-size:12px;line-height:1.7;color:#6b7770}
#lesson.sprechen-teil2 .dk-sp-stage{overflow:visible;min-height:0;border:0;border-radius:0;background:transparent}
#lesson.sprechen-teil2 .dk-sp-head{padding:12px 32px;gap:16px;min-height:88px}
#lesson.sprechen-teil2 .dk-sp-title{max-width:35%;flex:1}
#lesson.sprechen-teil2 .dk-sp-title h2{font-size:22px!important}
#lesson.sprechen-teil2 .dk-sp-meta{font-size:12px;letter-spacing:.12em}
#lesson.sprechen-teil2 .dk-sp-level{font-size:12px}
#lesson.sprechen-teil2 .dk-sp-head>.icon{width:44px;height:44px}
#lesson.sprechen-teil2 .dk-sp-steps{direction:ltr;gap:4px;flex:initial;margin-inline-start:auto}
#lesson.sprechen-teil2 .dk-sp-step{font-size:15px;padding:5px 12px;gap:7px}
#lesson.sprechen-teil2 .dk-sp-step i{width:20px;height:20px;font-size:12px}
#lesson.sprechen-teil2 .dk-sp-line{display:none}
#lesson.sprechen-teil2 .dk-sp-tools{background:transparent;padding:0}
#lesson.sprechen-teil2 .dk-sp-tools .dk-sp-btn{font-size:16px;padding:10px 16px;background:#f5f7f3}
#lesson.sprechen-teil2 .dk-sp-tools [data-sp-fullscreen]{padding:10px}
#lesson.sprechen-teil2 .study-actions{padding:8px 32px;gap:12px;flex:none;background:#eef0ec}
#lesson.sprechen-teil2 .study-actions button{font-size:16px!important;padding:6px 16px;white-space:nowrap}
#lesson.sprechen-teil2 .study-actions .ai-orb{width:24px;height:24px;flex:none}
#lesson.sprechen-teil2 .dk-sp-foot{position:sticky;bottom:0;z-index:5;min-height:0;padding:10px 32px;gap:10px;justify-content:flex-end}
#lesson.sprechen-teil2 .dk-sp-foot>div{gap:10px;flex-wrap:wrap}
#lesson.sprechen-teil2 .dk-sp-foot nav{display:flex;gap:10px}
#lesson.sprechen-teil2 .dk-sp-foot .dk-sp-btn{padding:10px 18px;border-radius:10px;font-size:17px!important}
.dk-sp2-drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(760px,100%);max-width:100%;height:100dvh;max-height:100dvh;padding:28px 32px;border:0;border-radius:0;background:#fff;color:#10231a;overflow:auto;font:16px/1.6 'Source Sans 3',system-ui,sans-serif}
.dk-sp2-drawer::backdrop{background:rgba(16,35,26,.35)}
.dk-sp2-drawer *{box-sizing:border-box;min-width:0}
.dk-sp2-drawer>header{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.dk-sp2-drawer h2{font:700 30px/1.25 'Source Serif 4',Georgia,serif;margin:10px 0 20px}
.dk-sp2-drawer .dk-sp-eyebrow{font-size:12px;letter-spacing:.12em;color:#15994a;font-weight:700}
.dk-sp2-example-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 0 18px;scrollbar-width:thin}
.dk-sp2-example-tabs button{flex:none;white-space:nowrap;padding:9px 15px;background:white;border:1px solid #dfe4de;border-radius:999px;font:600 15px/1.4 'Source Sans 3',system-ui,sans-serif;cursor:pointer}
.dk-sp2-example-tabs [aria-selected=true]{background:#10231a;border-color:#10231a;color:white}
.dk-sp2-example-legend{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 0;border-block:1px solid #e3e7e2;font-size:14px}
.dk-sp2-example-note{font-size:12px;color:#6b7770;line-height:1.6}
.dk-sp2-drawer h3{font-size:21px;margin:20px 0 10px}
.dk-sp2-example-part{border-bottom:1px solid #e3e7e2;padding:14px 0}
.dk-sp2-example-part h4{font-size:14px;color:#55625a;margin:0 0 12px}
.dk-sp2-corrections{font:400 20px/1.85 'Source Serif 4',Georgia,serif;direction:ltr;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere}
.dk-sp2-drawer del{background:#fdecec;color:#b42318;text-decoration:line-through;margin-right:4px;border-radius:4px;padding:1px 3px}
.dk-sp2-drawer ins{background:#e6f5ea;color:#0e7a39;font-weight:700;text-decoration:none;border-radius:4px;padding:1px 3px}
.dk-sp2-example-part ul{font-size:14px;color:#55625a;padding-inline-start:22px;direction:ltr;text-align:left}
.dk-sp2-feedback{background:#f1f9f3;border:1px solid #e3e7e2;border-radius:16px;padding:18px 22px;margin:22px 0}
.dk-sp2-feedback h3{margin:0 0 10px;color:#0e7a39}.dk-sp2-feedback p{margin:0}
.dk-sp2-drawer :focus-visible{outline:3px solid #72bc91;outline-offset:3px}
@media(max-width:1250px){#lesson.sprechen-teil2 .dk-sp-head{flex-wrap:wrap}#lesson.sprechen-teil2 .dk-sp-title{max-width:none;flex:1 1 50%}#lesson.sprechen-teil2 .dk-sp-steps{order:4;flex:1 1 100%;margin:0}}
@media(max-width:900px){#lesson.sprechen-teil2 .dk-sp-main{grid-template-columns:minmax(0,1fr);padding:20px;gap:20px}#lesson.sprechen-teil2 .dk-sp2-task{grid-row:1;padding:26px}#lesson.sprechen-teil2 .dk-sp2-tools{grid-row:2;position:static}#lesson.sprechen-teil2 .dk-sp-head{padding:12px 20px}#lesson.sprechen-teil2 .dk-sp-foot{padding:10px 20px}#lesson.sprechen-teil2 .dk-sp2-timer strong{font-size:28px}#lesson.sprechen-teil2 .dk-sp-foot>div{width:100%;justify-content:flex-end}#lesson.sprechen-teil2 .dk-sp-foot nav{flex-wrap:wrap}#lesson.sprechen-teil2 .study-actions{padding:8px 20px}}
@media(max-width:560px){#lesson.sprechen-teil2 .dk-sp-main{padding:14px}#lesson.sprechen-teil2 .dk-sp2-task,#lesson.sprechen-teil2 .dk-sp2-tools{padding:22px;border-radius:20px}#lesson.sprechen-teil2 .dk-sp2-situation{padding:18px}#lesson.sprechen-teil2 .dk-sp-point{padding:14px;gap:12px}#lesson.sprechen-teil2 .dk-sp-point .de{font-size:19px}#lesson.sprechen-teil2 .dk-sp-step{font-size:12px;padding:5px 7px;gap:4px}#lesson.sprechen-teil2 .dk-sp-title h2{font-size:20px!important}#lesson.sprechen-teil2 .dk-sp-meta{font-size:10px}#lesson.sprechen-teil2 .dk-sp-foot{padding:10px 12px;flex-direction:row}#lesson.sprechen-teil2 .dk-sp-foot>div{flex-wrap:wrap;justify-content:space-between}#lesson.sprechen-teil2 .dk-sp-foot nav{width:auto;flex:1;flex-wrap:nowrap}#lesson.sprechen-teil2 .dk-sp-foot .dk-sp-btn{white-space:normal;font-size:14px!important;padding:10px;min-width:0;flex:1}#lesson.sprechen-teil2 .study-actions{padding:6px 12px;gap:6px}.dk-sp2-drawer{padding:22px}.dk-sp2-drawer h2{font-size:26px}}

html[lang=de] #lesson.sprechen-teil2 [data-topic-ar]{display:none}

#lesson.sprechen-teil2 [data-sp-phase-action]{display:none}@media(max-width:900px){#lesson.sprechen-teil2 [data-sp-phase-action]:not([hidden]){display:flex;width:100%;justify-content:stretch}#lesson.sprechen-teil2 [data-sp2-stop-mobile]{width:100%}#lesson.sprechen-teil2 .dk-sp-foot{flex-wrap:wrap}}

#lesson.sprechen-teil2 .dk-sp-step i{flex:none}@media(max-width:560px){#lesson.sprechen-teil2 .dk-sp-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;white-space:normal;justify-content:stretch}#lesson.sprechen-teil2 .dk-sp-step{min-width:0;white-space:normal;line-height:1.4;padding:5px 8px}}
