:root{--dls-petrol:#0a4f5a;--dls-petrol-2:#0f6a78;--dls-teal:#2d8b92;--dls-amber:#e1a53a;--dls-soft:#f2f7f8;--dls-white:#fff;--dls-line:#d6e4e6;--dls-text:#1f2933;--dls-muted:#60717c;--dls-green:#2f7d54;--dls-red:#b83a3a;--dls-violet:#73548f;--dls-shadow:0 10px 30px rgba(10,79,90,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#edf3f4;color:var(--dls-text);font-family:Arial,Helvetica,sans-serif;font-size:17px;line-height:1.6}a{color:var(--dls-petrol-2)}img{max-width:100%;height:auto}.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.screen-reader-text:focus{clip:auto!important;width:auto;height:auto;background:#fff;padding:12px;z-index:100000}
.dls-site-header{position:sticky;top:0;z-index:100;background:var(--dls-petrol);border-bottom:5px solid var(--dls-amber);color:#fff}.dls-header-inner{max-width:1220px;margin:auto;min-height:82px;padding:10px 22px;display:flex;align-items:center;justify-content:space-between;gap:36px}.dls-brand{display:flex;align-items:center;gap:15px;color:#fff;text-decoration:none;min-width:250px;flex:0 0 auto;margin-right:10px}.dls-brand img{width:66px;height:58px;object-fit:contain;background:#fff;border-radius:10px;padding:3px}.dls-brand-copy{display:flex;flex-direction:column;line-height:1.08}.dls-domain{font-size:1.42rem;font-weight:800;letter-spacing:.01em}.dls-slogan{font-size:.78rem;color:#d8eef0;margin-top:5px}.dls-nav{margin-left:8px}.dls-nav ul{display:flex;align-items:center;gap:8px;list-style:none;margin:0;padding:0}.dls-nav a{display:block;color:#fff;text-decoration:none;padding:10px 12px;border-radius:9px;font-weight:700;font-size:.94rem}.dls-nav a:hover,.dls-nav .current-menu-item>a{background:rgba(255,255,255,.13)}.dls-menu-toggle{display:none;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;border-radius:9px;padding:10px 12px;font-weight:700}
.dls-shell{max-width:1220px;margin:auto;padding:28px 22px 64px}.dls-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:26px}.dls-content{min-width:0}.dls-sidebar{background:#fff;border:1px solid var(--dls-line);border-radius:15px;padding:17px;align-self:start;position:sticky;top:112px;max-height:calc(100vh - 140px);overflow:auto}.dls-sidebar-title{display:block;margin:0 0 10px;color:var(--dls-petrol);font-size:1.05rem}.dls-sidebar a{display:block;padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--dls-text);font-size:.92rem}.dls-sidebar a:hover,.dls-sidebar a.is-active{background:#e6f1f2;color:var(--dls-petrol);font-weight:800}.dls-sidebar-divider{border:0;border-top:1px solid var(--dls-line);margin:12px 0}
.dls-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--dls-petrol),#176c78);color:#fff;border-radius:20px;padding:42px 40px;margin-bottom:22px;box-shadow:var(--dls-shadow)}.dls-hero:after{content:"";position:absolute;width:270px;height:270px;border:1px solid rgba(255,255,255,.1);border-radius:50%;right:-90px;top:-120px}.dls-hero-brand{display:flex;align-items:center;gap:12px;margin-bottom:15px}.dls-hero-emblem{width:78px;height:68px;object-fit:contain;background:#fff;border-radius:13px;padding:4px}.dls-pill{display:inline-block;background:#e9f5f5;color:var(--dls-petrol);border-radius:999px;padding:6px 11px;font-size:.83rem;font-weight:800}.dls-eyebrow{text-transform:uppercase;letter-spacing:.09em;color:#ffdb94;font-size:.78rem;font-weight:800}.dls-hero h1{font-size:clamp(2.15rem,5vw,3.8rem);line-height:1.06;margin:8px 0 14px;max-width:900px}.dls-hero p{font-size:1.09rem;max-width:830px;margin-bottom:0}.dls-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.dls-card,.dls-lesson-content>section{background:#fff;border:1px solid var(--dls-line);border-radius:15px;padding:27px;margin-bottom:21px;box-shadow:0 7px 22px rgba(10,79,90,.045)}.dls-card h2,.dls-lesson-content h2{font-size:1.75rem;color:var(--dls-petrol);margin:0 0 17px;border-bottom:3px solid #e8f0f1;padding-bottom:10px}.dls-card h3,.dls-lesson-content h3{color:var(--dls-petrol);margin-top:24px}.dls-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.dls-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.dls-goal{background:#eef7f7;border-left:5px solid var(--dls-teal);padding:15px;border-radius:9px}.dls-notice{background:#fff7e8;border-left:5px solid var(--dls-amber);padding:15px;border-radius:9px}.dls-success{background:#e9f6ee;border-left:5px solid var(--dls-green);padding:15px;border-radius:9px}.dls-success:empty{display:none}.dls-warning{background:#faecec;border-left:5px solid var(--dls-red);padding:15px;border-radius:9px}.dls-dialogue{background:#f7fafb;border:1px solid var(--dls-line);border-radius:10px;padding:18px}.dls-exercise,.dls-matching{border:1px solid var(--dls-line);border-radius:12px;padding:20px;margin:18px 0;background:#fff}.dls-option{display:block;padding:9px 11px;margin:7px 0;background:#f5f8f9;border-radius:8px}.dls-option input{margin-right:8px}.dls-result{font-weight:800;margin-top:12px}.dls-correct{color:var(--dls-green)}.dls-incorrect{color:var(--dls-red)}.dls-button,.dls-check-quiz,.dls-check-matching,.dls-speak,.dls-speech-stop,.dls-complete-module{display:inline-block;border:0;background:var(--dls-petrol);color:#fff;text-decoration:none;padding:12px 17px;border-radius:9px;font-weight:800;cursor:pointer;font-size:.98rem;margin:4px 5px 4px 0}.dls-button:hover,.dls-check-quiz:hover,.dls-check-matching:hover,.dls-speak:hover,.dls-speech-stop:hover,.dls-complete-module:hover{background:#073f48;color:#fff}.dls-amber{background:var(--dls-amber);color:#1f2933}.dls-audio-box{background:#edf7f7;border:1px solid #cce3e5;border-radius:12px;padding:17px;margin:15px 0}.dls-speech-stop{background:#6d7d84}.dls-transcript{border:1px solid var(--dls-line);border-radius:10px;padding:12px 15px;margin:13px 0;background:#fafcfc}.dls-transcript summary,details summary{font-weight:800;color:var(--dls-petrol);cursor:pointer}.dls-matching-meanings{background:#f3f7f8;border-radius:9px;padding:14px 14px 14px 40px}.dls-matching-rows{display:grid;gap:9px}.dls-matching-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border-bottom:1px solid var(--dls-line)}.dls-matching-row select{min-width:140px;padding:8px;border:1px solid #b9cdd0;border-radius:7px;background:#fff}.dls-checklist label{display:block;margin:8px 0}table{width:100%;border-collapse:collapse;margin:17px 0;font-size:.94rem}th,td{border:1px solid var(--dls-line);padding:10px;text-align:left;vertical-align:top}th{background:#eaf2f3;color:var(--dls-petrol)}tr:nth-child(even) td{background:#fbfcfc}details{border:1px solid var(--dls-line);border-radius:10px;padding:12px 15px;margin:12px 0;background:#fafcfc}.dls-pdf-row{margin-top:19px}.dls-module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.dls-module-card{background:#fff;border:1px solid var(--dls-line);border-radius:14px;padding:20px;text-decoration:none;color:var(--dls-text);transition:.2s;box-shadow:0 5px 16px rgba(10,79,90,.04)}.dls-module-card:hover{transform:translateY(-2px);box-shadow:var(--dls-shadow)}.dls-module-number{font-size:2rem;font-weight:900;color:var(--dls-amber)}.dls-module-card h3{margin:4px 0;color:var(--dls-petrol)}.dls-module-meta{margin:5px 0;color:var(--dls-muted);font-size:.9rem}.dls-progress{height:14px;background:#dce8e9;border-radius:99px;overflow:hidden}.dls-progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--dls-teal),var(--dls-green))}.dls-dashboard-list{display:grid;gap:11px;margin-top:20px}.dls-dashboard-item{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid var(--dls-line);border-radius:11px;padding:14px;background:#fff}.dls-status-done{color:var(--dls-green);font-weight:800}.dls-status-open{color:var(--dls-muted)}.dls-contact-form{display:grid;gap:13px}.dls-contact-form label{font-weight:800}.dls-contact-form input,.dls-contact-form textarea,.dls-settings input,.dls-settings select{width:100%;padding:11px;border:1px solid #b9cdd0;border-radius:8px;background:#fff;font:inherit}.dls-contact-form textarea{min-height:150px}.dls-access-box{background:#fff;border:1px solid var(--dls-line);border-top:5px solid var(--dls-amber);border-radius:14px;padding:24px;max-width:720px;margin:40px auto}.dls-site-footer{background:#fff;border-top:1px solid var(--dls-line)}.dls-footer-inner{max-width:1220px;margin:auto;padding:26px 22px;color:var(--dls-muted);font-size:.9rem;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}.dls-footer-copy{font-weight:800;color:var(--dls-petrol)}.woocommerce .button,.woocommerce button.button,.woocommerce input.button{background:var(--dls-petrol)!important;color:#fff!important;border-radius:8px!important}.tutor-btn{border-radius:8px!important}.tutor-color-primary{color:var(--dls-petrol)!important}
@media(max-width:980px){.dls-nav{margin-left:0}.dls-brand{margin-right:0}.dls-layout{grid-template-columns:1fr}.dls-sidebar{position:static;max-height:none}.dls-module-grid{grid-template-columns:repeat(2,1fr)}.dls-grid-3{grid-template-columns:1fr}.dls-menu-toggle{display:block}.dls-nav{display:none;position:absolute;left:0;right:0;top:82px;background:var(--dls-petrol);padding:12px 20px;border-bottom:4px solid var(--dls-amber)}.dls-nav.is-open{display:block}.dls-nav ul{display:block}.dls-nav a{padding:12px}}
@media(max-width:650px){body{font-size:16px}.dls-shell{padding:14px 12px 48px}.dls-header-inner{padding:8px 12px}.dls-brand img{width:58px;height:52px}.dls-domain{font-size:1.16rem}.dls-slogan{font-size:.68rem}.dls-hero{padding:28px 21px;border-radius:14px}.dls-hero-emblem{width:66px;height:58px}.dls-card,.dls-lesson-content>section{padding:19px}.dls-grid-2,.dls-module-grid{grid-template-columns:1fr}.dls-matching-row,.dls-dashboard-item{align-items:flex-start;flex-direction:column}.dls-matching-row select{width:100%}table{font-size:.82rem;display:block;overflow-x:auto}.dls-button,.dls-check-quiz,.dls-check-matching,.dls-speak,.dls-speech-stop,.dls-complete-module{width:100%;text-align:center;margin:4px 0}}
@media print{.dls-site-header,.dls-sidebar,.dls-site-footer,.dls-check-quiz,.dls-check-matching,.dls-speak,.dls-speech-stop,.dls-complete-module,.dls-pdf-row{display:none!important}body{background:#fff;font-size:11pt}.dls-shell{max-width:none;padding:0}.dls-layout{display:block}.dls-card,.dls-lesson-content>section,.dls-hero{box-shadow:none;border-radius:0}.dls-hero{background:#fff!important;color:#000;padding:0}.dls-hero h1{font-size:24pt}.dls-hero .dls-eyebrow{color:#555}.dls-transcript{display:block}.dls-transcript>*{display:block}}

/* A1-Ausbaustufe 3.0 */
.dls-audio-cell{width:72px;text-align:center}.dls-word-audio{border:0;background:var(--dls-amber);color:#1f2933;border-radius:8px;padding:8px 10px;font-weight:800;cursor:pointer;margin:4px}.dls-word-audio:hover{background:#c98d25}.dls-word-audio[aria-busy=true]{opacity:.65;cursor:wait}.dls-audio-track{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:14px;margin:12px 0}.dls-audio-track audio,.dls-audio-inline audio{width:100%;max-width:620px}.dls-audio-inline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#edf7f7;border:1px solid #cce3e5;border-radius:10px;padding:12px;margin:12px 0}.dls-training-round{border:1px solid var(--dls-line);border-radius:13px;padding:18px;margin:18px 0;background:#fbfdfd}.dls-training-round h4{color:var(--dls-petrol);margin-top:0}.dls-input-row{display:grid;grid-template-columns:38px 48px minmax(160px,1fr);align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--dls-line)}.dls-input-row input,.dls-cloze-input,.dls-order-input,.dls-dictation-input{padding:10px 11px;border:1px solid #9db9bd;border-radius:8px;font:inherit;background:#fff}.dls-cloze-input{display:inline-block;min-width:130px;max-width:230px;margin:3px 5px}.dls-order-input,.dls-dictation-input{display:block;width:100%;margin-top:12px}.is-correct{border-color:var(--dls-green)!important;background:#edf8f1!important}.is-incorrect{border-color:var(--dls-red)!important;background:#fff2f2!important}.dls-check-cloze,.dls-check-spelling,.dls-check-order,.dls-check-dictation,.dls-reset-fields,.dls-reset-quiz{display:inline-block;border:0;border-radius:9px;padding:11px 16px;font-size:.96rem;font-weight:800;cursor:pointer;margin:8px 5px 4px 0}.dls-check-cloze,.dls-check-spelling,.dls-check-order,.dls-check-dictation{background:var(--dls-petrol);color:#fff}.dls-reset-fields,.dls-reset-quiz{background:#e6edef;color:var(--dls-text)}.dls-word-chips{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.dls-chip{display:inline-block;background:#e7f1f2;border:1px solid #c8dcde;border-radius:999px;padding:5px 10px}.dls-unit-plan li{margin:8px 0}.dls-task-summary{background:#edf7f7;border-left:5px solid var(--dls-teal);padding:12px 14px;border-radius:8px;font-weight:700}.dls-exercise>.dls-word-audio{display:block;margin:10px 0}.dls-exercise input[type=text]{width:100%}
@media(max-width:650px){.dls-audio-track{grid-template-columns:1fr}.dls-input-row{grid-template-columns:30px 44px minmax(0,1fr)}.dls-cloze-input{display:block;width:100%;max-width:none;margin:7px 0}.dls-word-audio{min-height:42px}}
@media print{.dls-word-audio,.dls-check-cloze,.dls-check-spelling,.dls-check-order,.dls-check-dictation,.dls-reset-fields,.dls-reset-quiz,audio{display:none!important}.dls-cloze-input,.dls-order-input,.dls-dictation-input,.dls-spelling-input{border:0!important;border-bottom:1px solid #333!important;border-radius:0!important;background:#fff!important;min-height:24px}.dls-training-round{break-inside:avoid-page}}


/* Schreiben und lokale Ausspracheaufnahme */
.dls-writing-area,.dls-recorder{margin-top:20px;padding:18px;border:1px solid var(--dls-line);border-radius:12px;background:#f7fbfb}.dls-writing-text{width:100%;min-height:180px;padding:13px;border:1px solid #8fb1b5;border-radius:9px;font:inherit;line-height:1.55;resize:vertical;background:#fff}.dls-writing-controls,.dls-recorder-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}.dls-writing-count{font-weight:700;color:var(--dls-petrol);margin-right:auto}.dls-clear-writing,.dls-record-start,.dls-record-stop,.dls-record-delete{border:0;border-radius:9px;padding:10px 14px;font-weight:800;cursor:pointer}.dls-clear-writing,.dls-record-delete{background:#e6edef;color:var(--dls-text)}.dls-record-start{background:var(--dls-petrol);color:#fff}.dls-record-stop{background:#b83a3a;color:#fff}.dls-record-start:disabled,.dls-record-stop:disabled,.dls-record-delete:disabled{opacity:.45;cursor:not-allowed}.dls-record-player{width:100%;margin-top:12px}.dls-recorder-status{font-weight:700;color:var(--dls-petrol)}.dls-transcripts{margin-top:18px}.dls-hint{background:#fff7e8;border-left:4px solid var(--dls-amber);padding:10px 12px}.dls-exercise table .dls-cloze-input{width:100%;max-width:none}
@media print{.dls-writing-controls,.dls-recorder{display:none!important}.dls-writing-text{min-height:180px;border:1px solid #777!important}}


/* ==============================================================
   DeutschLernSpur Theme 3.1.0
   Feste Niveauauswahl und klarer Abstand zwischen Marke und Menü
   ============================================================== */

.dls-header-inner {
    display: grid;
    grid-template-columns: minmax(305px, auto) minmax(0, 1fr);
    column-gap: 48px;
    row-gap: 12px;
    justify-content: initial;
}

.dls-brand {
    min-width: 0;
    margin-right: 0;
}

.dls-nav {
    min-width: 0;
    margin-left: 0;
    justify-self: end;
}

.dls-nav ul {
    justify-content: flex-end;
}

.dls-level-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    background: #083F48;
}

.dls-level-bar-inner {
    display: flex;
    max-width: 1220px;
    min-height: 48px;
    align-items: center;
    gap: 18px;
    margin: 0 auto;
    padding: 6px 22px;
}

.dls-level-bar-title {
    flex: 0 0 auto;
    color: #D8EEF0;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dls-level-switcher {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.dls-level-link {
    display: flex;
    min-width: 82px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 11px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 8px;
    color: #FFFFFF;
    line-height: 1.05;
    text-decoration: none;
}

.dls-level-link strong {
    font-size: 1rem;
}

.dls-level-link span {
    margin-top: 4px;
    color: #D8EEF0;
    font-size: 0.64rem;
    white-space: nowrap;
}

.dls-level-link:hover,
.dls-level-link:focus-visible,
.dls-level-link.is-current {
    border-color: #E1A53A;
    background: #FFFFFF;
    color: #0A4F5A;
}

.dls-level-link:hover span,
.dls-level-link:focus-visible span,
.dls-level-link.is-current span {
    color: #60717C;
}

.dls-level-link.is-planned:not(.is-current) {
    opacity: 0.82;
}

.dls-sidebar {
    top: 160px;
}

.dls-sidebar-level-block {
    margin-bottom: 4px;
}

.dls-level-switcher-sidebar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
}

.dls-level-switcher-sidebar .dls-level-link {
    min-width: 0;
    padding: 7px 3px;
    border-color: #BFD5D8;
    background: #F8FBFB;
    color: #0A4F5A;
}

.dls-level-switcher-sidebar .dls-level-link span {
    display: none;
}

.dls-level-switcher-sidebar .dls-level-link.is-current {
    border-color: #0F6A78;
    background: #DCEBF4;
}

@media (max-width: 1120px) {
    .dls-header-inner {
        display: flex;
        column-gap: 22px;
    }

    .dls-menu-toggle {
        display: block;
        margin-left: auto;
    }

    .dls-nav {
        display: none;
        position: absolute;
        top: 82px;
        right: 0;
        left: 0;
        padding: 12px 20px;
        border-bottom: 4px solid var(--dls-amber);
        background: var(--dls-petrol);
    }

    .dls-nav.is-open {
        display: block;
    }

    .dls-nav ul {
        display: block;
    }

    .dls-nav a {
        padding: 12px;
    }
}

@media (max-width: 650px) {
    .dls-level-bar-inner {
        align-items: flex-start;
        gap: 8px;
        padding: 6px 12px 8px;
    }

    .dls-level-bar-title {
        padding-top: 10px;
    }

    .dls-level-switcher-header {
        max-width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .dls-level-link {
        min-width: 72px;
    }
}

.dls-footer-inner nav ul{display:flex;flex-wrap:wrap;gap:10px 16px;list-style:none;margin:0;padding:0}.dls-footer-inner nav a{color:var(--dls-petrol);font-weight:700;text-decoration:none}.dls-footer-inner nav a:hover{text-decoration:underline}


/* ==============================================================
   DeutschLernSpur Theme 3.1.2
   Robuster Kopfbereich ohne Überlagerungen
   ============================================================== */

/* Auf breiten Bildschirmen darf der Kopfbereich breiter als der
   eigentliche Lerninhalt sein. Nur so passen Marke und vollständige
   Hauptnavigation nebeneinander. */
.dls-header-inner {
    max-width: 1540px;
    grid-template-columns: minmax(305px, 330px) minmax(0, 1fr);
    column-gap: 42px;
}

.dls-brand {
    position: relative;
    z-index: 2;
    overflow: visible;
}

.dls-brand-copy,
.dls-domain,
.dls-slogan {
    min-width: 0;
}

.dls-domain,
.dls-slogan {
    white-space: nowrap;
}

.dls-nav {
    max-width: 100%;
}

.dls-nav ul {
    flex-wrap: nowrap;
}

.dls-nav a {
    padding: 9px 10px;
    font-size: .9rem;
    white-space: normal;
}

/* Unterhalb dieser Breite ist eine vollständige horizontale Navigation
   nicht zuverlässig möglich. Dann wird bewusst das saubere Menü
   verwendet, statt Texte über das Logo zu schieben. */
@media (max-width: 1380px) {
    .dls-header-inner {
        display: flex;
        max-width: 1220px;
        column-gap: 22px;
    }

    .dls-brand {
        flex: 0 1 auto;
        max-width: calc(100% - 92px);
    }

    .dls-menu-toggle {
        display: block;
        flex: 0 0 auto;
        margin-left: auto;
    }

    .dls-nav {
        display: none;
        position: absolute;
        z-index: 120;
        top: 82px;
        right: 0;
        left: 0;
        max-height: calc(100vh - 82px);
        overflow-y: auto;
        padding: 12px 20px 18px;
        border-bottom: 4px solid var(--dls-amber);
        background: var(--dls-petrol);
        box-shadow: 0 14px 28px rgba(0,0,0,.18);
    }

    .dls-nav.is-open {
        display: block;
    }

    .dls-nav ul {
        display: block;
    }

    .dls-nav a {
        padding: 12px;
        font-size: .96rem;
    }
}

@media (max-width: 650px) {
    .dls-brand {
        max-width: calc(100% - 78px);
    }

    .dls-domain {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dls-slogan {
        white-space: normal;
    }
}


/* ==============================================================
   DeutschLernSpur Theme 3.2.0
   Social, Community, Weiterlernen, Dashboard und Lernlisten
   ============================================================== */

.dls-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.dls-social-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid var(--dls-line);
    border-radius: 999px;
    background: #fff;
    color: var(--dls-petrol);
    font-weight: 800;
    text-decoration: none;
    font-size: .82rem;
}
.dls-social-link:hover,
.dls-social-link:focus-visible {
    border-color: var(--dls-amber);
    background: #fff7e8;
}
.dls-social-badge,
.dls-community-platform-badge {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--dls-petrol);
    color: #fff;
    font-weight: 900;
}
.dls-social-links-footer .dls-social-link {
    padding: 5px 8px;
    font-size: .77rem;
}
.dls-community-platforms {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
}
.dls-community-platform {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 92px;
    padding: 16px;
    border: 1px solid var(--dls-line);
    border-left: 5px solid var(--dls-teal);
    border-radius: 12px;
    background: #fff;
    color: var(--dls-text);
    text-decoration: none;
}
.dls-community-platform:hover,
.dls-community-platform:focus-visible {
    border-left-color: var(--dls-amber);
    box-shadow: var(--dls-shadow);
}
.dls-community-platform-badge {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
}
.dls-community-platform strong,
.dls-community-platform small {
    display: block;
}
.dls-community-platform strong {
    color: var(--dls-petrol);
    font-size: 1.04rem;
}
.dls-community-platform small {
    margin-top: 4px;
    color: var(--dls-muted);
}
.dls-community-live {
    border-top: 5px solid var(--dls-amber);
}
.dls-continue-card {
    position: relative;
    overflow: hidden;
    border-left: 7px solid var(--dls-green);
    background: linear-gradient(135deg,#fff,#f1f8f4);
}
.dls-continue-card:after {
    content: "→";
    position: absolute;
    right: 24px;
    top: 18px;
    color: rgba(47,125,84,.16);
    font-size: 5rem;
    font-weight: 900;
    line-height: 1;
}
.dls-dashboard-quick-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 15px;
    margin-bottom: 21px;
}
.dls-dashboard-quick-card {
    display: flex;
    min-height: 145px;
    flex-direction: column;
    justify-content: center;
    padding: 19px;
    border: 1px solid var(--dls-line);
    border-top: 5px solid var(--dls-green);
    border-radius: 14px;
    background: #fff;
    color: var(--dls-text);
    text-decoration: none;
    box-shadow: 0 5px 16px rgba(10,79,90,.04);
}
.dls-dashboard-quick-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--dls-shadow);
}
.dls-dashboard-quick-number {
    color: var(--dls-green);
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 9px;
}
.dls-dashboard-quick-card strong {
    color: var(--dls-petrol);
}
.dls-dashboard-quick-card small {
    margin-top: 5px;
    color: var(--dls-muted);
}
.dls-save-learning {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 4px 0 4px 6px;
    padding: 7px 9px;
    border: 1px solid #b8cfd2;
    border-radius: 8px;
    background: #fff;
    color: var(--dls-petrol);
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
}
.dls-save-learning[aria-pressed="true"],
.dls-save-grammar[aria-pressed="true"] {
    border-color: var(--dls-amber);
    background: #fff7e8;
    color: #6d4a08;
}
.dls-saved-list {
    display: grid;
    gap: 10px;
}
.dls-saved-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 14px;
    border: 1px solid var(--dls-line);
    border-radius: 10px;
    background: #fff;
}
.dls-saved-item strong {
    color: var(--dls-petrol);
}
.dls-saved-item small {
    color: var(--dls-muted);
}
.dls-saved-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.dls-learning-message {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-weight: 700;
}
.dls-learning-message.is-ok {
    background: #e9f6ee;
    color: #23613f;
}
.dls-learning-message.is-error {
    background: #faecec;
    color: #8d2929;
}
@media(max-width:850px){
    .dls-dashboard-quick-grid,
    .dls-community-platforms {
        grid-template-columns: 1fr;
    }
}
@media(max-width:650px){
    .dls-saved-item {
        align-items: flex-start;
        flex-direction: column;
    }
    .dls-saved-actions,
    .dls-saved-actions .dls-button {
        width: 100%;
    }
}
@media print {
    .dls-social-links,
    .dls-dashboard-quick-grid,
    .dls-save-learning,
    .dls-save-grammar {
        display: none !important;
    }
}


/* ==============================================================
   DeutschLernSpur Theme 3.3.0
   Wortschatztrainer, intelligente Grammatik-Suche,
   Audiogeschwindigkeit, Modulabschluss
   ============================================================== */

.dls-vt-controls {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
    align-items: end;
}
.dls-vt-controls label {
    display: grid;
    gap: 5px;
    font-weight: 800;
    color: var(--dls-petrol);
}
.dls-vt-controls select {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--dls-line);
    border-radius: 9px;
    background: #fff;
    padding: 8px 10px;
    color: var(--dls-text);
}
.dls-vt-saved-only {
    grid-column: 1 / -1;
    display: flex !important;
    align-items: center;
    gap: 8px !important;
}
.dls-vt-stage {
    border-top: 6px solid var(--dls-teal);
}
.dls-vt-progress {
    color: var(--dls-muted);
    font-weight: 800;
    margin-bottom: 12px;
}
.dls-vt-example {
    margin: 12px 0;
    padding: 14px 16px;
    border-left: 5px solid var(--dls-amber);
    background: #fff7e8;
    font-size: 1.05rem;
}
.dls-vt-options {
    display: grid;
    gap: 9px;
    margin-top: 14px;
}
.dls-vt-option {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 13px;
    border: 1px solid var(--dls-line);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}
.dls-vt-option:hover {
    border-color: var(--dls-teal);
}
.dls-vt-option.is-correct {
    border-color: #2f7d54;
    background: #edf8f1;
}
.dls-vt-option.is-wrong {
    border-color: #b83a3a;
    background: #faeeee;
}
.dls-vt-finish {
    padding: 16px;
    border-radius: 10px;
    background: #eef7f2;
}

.dls-gt-search-suggestions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 8px 0 14px;
}
.dls-gt-suggestion-label {
    color: var(--dls-muted);
    font-size: .84rem;
    font-weight: 800;
}
.dls-gt-suggestion {
    border: 1px solid #b8cfd2;
    border-radius: 999px;
    padding: 6px 10px;
    background: #fff;
    color: var(--dls-petrol);
    font: inherit;
    font-size: .82rem;
    font-weight: 800;
    cursor: pointer;
}
.dls-gt-suggestion:hover,
.dls-gt-suggestion:focus-visible {
    border-color: var(--dls-amber);
    background: #fff7e8;
}

.dls-audio-speed {
    display: inline-flex;
    gap: 5px;
    flex-wrap: wrap;
}
.dls-audio-speed button {
    border: 1px solid #b8cfd2;
    border-radius: 7px;
    background: #fff;
    color: var(--dls-petrol);
    padding: 6px 8px;
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
}
.dls-audio-speed button.is-active {
    border-color: var(--dls-amber);
    background: #fff7e8;
    color: #694708;
}

.dls-module-completion {
    margin-top: 14px;
    padding: 17px;
    border: 1px solid #b8d8c4;
    border-left: 6px solid var(--dls-green);
    border-radius: 12px;
    background: #eef7f2;
}
.dls-module-completion h3 {
    margin-top: 0;
    color: var(--dls-green);
}
.dls-module-completion ul {
    margin: 8px 0 14px 1.2rem;
}

@media(max-width:820px) {
    .dls-vt-controls {
        grid-template-columns: 1fr;
    }
}


/* DeutschLernSpur Theme 3.4.0 */
.dls-focus-toggle{margin-top:15px;border:1px solid rgba(255,255,255,.65);border-radius:9px;background:rgba(255,255,255,.14);color:#fff;padding:9px 12px;font:inherit;font-weight:800;cursor:pointer}
body.dls-focus-mode .dls-site-header,body.dls-focus-mode .dls-site-footer,body.dls-focus-mode .dls-sidebar{display:none!important}
body.dls-focus-mode .dls-shell.dls-layout{display:block;max-width:1040px}
body.dls-focus-mode .dls-content{width:100%;max-width:none}
body.dls-focus-mode{background:#f6faf9}
body.dls-focus-mode .dls-social-links{display:none!important}
body.dls-focus-mode .dls-focus-toggle{background:#fff;color:var(--dls-petrol);border-color:#fff}
.dls-rep-stage{border-top:6px solid var(--dls-amber)}
.dls-live-calendar-list{display:grid;gap:10px}
.dls-live-calendar-item{display:grid;grid-template-columns:minmax(150px,190px) 1fr;gap:16px;padding:14px;border:1px solid var(--dls-line);border-left:5px solid var(--dls-green);border-radius:11px;background:#fff}
.dls-live-calendar-date{display:flex;flex-direction:column;gap:3px;color:var(--dls-petrol)}
.dls-live-calendar-item h3{margin:0 0 5px}.dls-live-calendar-item p{margin:0 0 7px;color:var(--dls-muted)}
.dls-privacy-note{padding:10px 12px;border-left:4px solid var(--dls-teal);background:#eef7f7;border-radius:7px;font-size:.9rem}
.dls-assessment-history-list{display:grid;gap:9px}
.dls-assessment-history-item{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px;border:1px solid var(--dls-line);border-radius:9px;background:#fff}
.dls-assessment-history-status{font-weight:800;color:var(--dls-petrol);text-align:right}
@media(max-width:700px){.dls-live-calendar-item{grid-template-columns:1fr}.dls-assessment-history-item{align-items:flex-start;flex-direction:column}.dls-assessment-history-status{text-align:left}}


/* ==============================================================
   DeutschLernSpur Theme 3.4.1
   ROBUSTER KOPFBEREICH - Navigation kann wachsen, ohne Marke
   oder Bildschirmrand zu überlagern.
   ============================================================== */

/* 1. Markenleiste */
.dls-site-header {
    overflow: visible;
}

.dls-header-inner {
    display: flex !important;
    width: 100%;
    max-width: 1680px !important;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 22px !important;
    margin: 0 auto;
    padding: 7px 24px;
}

.dls-brand {
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 1 auto;
    margin: 0 !important;
}

.dls-brand img {
    width: 54px;
    height: 48px;
}

.dls-domain {
    font-size: 1.28rem;
}

.dls-slogan {
    font-size: .74rem;
}

/* Der Menükopf bleibt auf breiten Bildschirmen ausgeblendet.
   Ältere Breakpoint-Regeln dürfen ihn nicht versehentlich einblenden. */
.dls-menu-toggle {
    display: none !important;
}

/* 2. Hauptnavigation besitzt eine eigene Zeile.
   Sie konkurriert nicht mehr mit Logo/Markentext um Platz. */
.dls-nav {
    position: static !important;
    display: block !important;
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 18px;
    border-top: 1px solid rgba(255,255,255,.13);
    border-bottom: 1px solid rgba(255,255,255,.11);
    background: #0A4F5A;
    box-shadow: none !important;
    overflow: visible !important;
}

.dls-nav > ul,
.dls-nav .menu {
    display: flex !important;
    width: 100%;
    max-width: 1680px;
    align-items: stretch;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 3px 5px;
    margin: 0 auto !important;
    padding: 5px 0 !important;
    list-style: none;
}

.dls-nav li {
    display: flex;
    min-width: 0;
    margin: 0;
}

.dls-nav a {
    display: flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 6px 9px !important;
    border-radius: 8px;
    color: #fff;
    font-size: .86rem !important;
    font-weight: 700;
    line-height: 1.18;
    text-align: center;
    white-space: normal !important;
    overflow-wrap: anywhere;
}

/* 3. Niveauleiste bleibt als klar getrennte dritte Ebene. */
.dls-level-bar {
    border-top: 0;
}

.dls-level-bar-inner {
    max-width: 1680px;
}

/* Auf normalen Notebooks/Tablets: kompaktes Menü statt
   gequetschter oder überlappender Navigation. */
@media (max-width: 1180px) {
    .dls-header-inner {
        min-height: 68px;
        padding: 8px 18px;
    }

    .dls-menu-toggle {
        display: block !important;
        flex: 0 0 auto;
        margin-left: auto;
    }

    .dls-nav {
        display: none !important;
        position: static !important;
        width: 100%;
        max-height: none !important;
        padding: 8px 16px 12px;
        border-top: 1px solid rgba(255,255,255,.13);
        border-bottom: 4px solid var(--dls-amber);
        overflow: visible !important;
    }

    .dls-nav.is-open {
        display: block !important;
    }

    .dls-nav > ul,
    .dls-nav .menu {
        display: grid !important;
        max-width: 100%;
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 5px;
        padding: 0 !important;
    }

    .dls-nav li,
    .dls-nav a {
        width: 100%;
    }

    .dls-nav a {
        min-height: 42px;
        justify-content: flex-start;
        padding: 9px 11px !important;
        text-align: left;
    }

    .dls-sidebar {
        top: 150px;
    }
}

@media (max-width: 650px) {
    .dls-header-inner {
        padding: 7px 12px;
    }

    .dls-brand img {
        width: 50px;
        height: 44px;
    }

    .dls-domain {
        font-size: 1.12rem;
    }

    .dls-slogan {
        font-size: .67rem;
        white-space: normal !important;
    }

    .dls-nav {
        padding: 7px 12px 10px;
    }

    .dls-nav > ul,
    .dls-nav .menu {
        grid-template-columns: 1fr;
    }

    .dls-level-bar-inner {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ==============================================================
   DeutschLernSpur Theme 3.6.0
   Kumulativer Website-/Theme-Standard
   - A1 und A2 exakt derselbe Kachel-/Rastermechanismus
   - A1/A2 ohne Verfügbarkeitsunterzeile
   - kompaktere Hauptnavigation
   - Lernort direkt unter der Niveauleiste
   ============================================================== */

/* Kompakte Hauptnavigation. */
.dls-nav .dls-nav-group {
    position: relative;
    display: flex;
    align-items: stretch;
}

.dls-nav .dls-nav-group-toggle {
    display: flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.18;
    cursor: pointer;
}

.dls-nav .dls-nav-group-toggle::after {
    content: "▾";
    font-size: .72em;
    opacity: .8;
}

.dls-nav .dls-nav-group-toggle:hover,
.dls-nav .dls-nav-group-toggle:focus-visible,
.dls-nav .dls-nav-group.is-open > .dls-nav-group-toggle {
    background: rgba(255,255,255,.13);
}

.dls-nav .dls-nav-group > .sub-menu {
    display: none !important;
    position: absolute;
    z-index: 500;
    top: calc(100% + 2px);
    left: 0;
    width: max-content !important;
    min-width: 220px;
    max-width: min(330px, calc(100vw - 24px));
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 7px !important;
    border: 1px solid #D6E4E6;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 26px rgba(10,49,55,.18);
}

.dls-nav .dls-nav-group:hover > .sub-menu,
.dls-nav .dls-nav-group:focus-within > .sub-menu,
.dls-nav .dls-nav-group.is-open > .sub-menu {
    display: flex !important;
}

.dls-nav .dls-nav-group > .sub-menu > li {
    display: block;
    width: 100%;
}

.dls-nav .dls-nav-group > .sub-menu a {
    display: block;
    width: 100%;
    min-height: 0;
    padding: 9px 10px !important;
    color: #1F2933;
    text-align: left;
    white-space: normal !important;
}

.dls-nav .dls-nav-group > .sub-menu a:hover,
.dls-nav .dls-nav-group > .sub-menu a:focus-visible {
    background: #F2F7F8;
    color: #0A4F5A;
}

.dls-nav .dls-nav-test > a {
    border: 1px solid rgba(225,165,58,.6);
    background: rgba(225,165,58,.12);
}

.dls-nav .dls-nav-learning-area > a {
    background: rgba(255,255,255,.13);
}

/* Veröffentlichte Niveaus haben keinen Statuszusatz. Der Core steuert is-planned. */
.dls-level-link:not(.is-planned) {
    min-height: 38px;
}

.dls-level-link-a1 > span,
.dls-level-link-a2 > span,
.dls-module-card-status.is-approved {
    display: none !important;
}

/* Aktueller Lernort direkt unter der Niveauleiste. */
.dls-course-context {
    border-bottom: 1px solid rgba(10,79,90,.08);
    background: #083F48;
    color: #D8EEF0;
}

.dls-course-context-inner {
    max-width: 1680px;
    margin: 0 auto;
    padding: 5px 24px 7px;
    font-size: .84rem;
    line-height: 1.3;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.dls-context-separator {
    opacity: .78;
    margin: 0 2px;
}

.dls-context-title {
    color: #D8EEF0;
}

.dls-course-context strong,
.dls-course-context .dls-context-arrow {
    color: #fff;
}

.dls-course-context .dls-context-arrow {
    margin-right: 5px;
    color: #E1A53A;
    font-weight: 900;
}

/* --------------------------------------------------------------
   EIN Raster für A1 bis B2.
   Der Core-Vertrag lautet: .dls-module-grid enthält ausschließlich
   .dls-module-card. Alle Niveaus werden identisch behandelt.
   -------------------------------------------------------------- */
.dls-module-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
    align-items: stretch !important;
}

/* Fremde/alte Direktkinder dürfen niemals eine leere Rasterzelle bilden. */
.dls-module-grid > :not(.dls-module-card) {
    display: none !important;
}

/* Fallback gegen tatsächlich leere Legacy-Karten. */
.dls-module-grid > .dls-module-card:empty,
.dls-module-grid > .dls-module-card.dls-empty-module-card {
    display: none !important;
}

.dls-module-grid > .dls-module-card {
    display: flex;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0;
    height: 100%;
    flex-direction: column;
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: auto !important;
    order: 0 !important;
    margin: 0 !important;
    padding: 13px 14px !important;
    border-radius: 12px;
    overflow: visible;
}

.dls-module-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 6px;
}

.dls-module-number {
    font-size: .78rem !important;
    font-weight: 800;
    line-height: 1.2;
    color: #0A4F5A !important;
}

.dls-module-card h3 {
    margin: .1rem 0 .38rem !important;
    color: #0A4F5A;
    font-size: clamp(.96rem, 1.1vw, 1.08rem);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.dls-module-meta,
.dls-module-card p {
    margin: .22rem 0;
    font-size: .82rem;
    line-height: 1.38;
}

@media (max-width: 1100px) {
    .dls-module-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 850px) {
    .dls-module-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 650px) {
    .dls-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .dls-course-context-inner {
        padding-inline: 12px;
    }

    .dls-nav .dls-nav-group {
        display: block;
        width: 100%;
    }

    .dls-nav .dls-nav-group-toggle {
        width: 100%;
        min-height: 42px;
        justify-content: flex-start;
        padding: 9px 11px;
    }

    .dls-nav .dls-nav-group > .sub-menu {
        position: static;
        width: 100% !important;
        max-width: none;
        margin: 2px 0 6px !important;
        box-shadow: none;
    }
}

@media (max-width: 345px) {
    .dls-module-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==============================================================
   DeutschLernSpur Theme 3.6.0
   Visuelle Integration des Core-4.9.4-Abschlussstands A1/A2.
   Der Core liefert Inhalte, Zugriffsstatus und Funktionslogik.
   ============================================================== */

/* Öffentliche Core-Startseite: kompakt, markenkonform, ohne Doppel-Hero. */
.dls-home-shell {
    width: 100%;
}

.dls-home-hero {
    position: relative;
    overflow: hidden;
    margin: 0 0 18px;
    padding: clamp(24px, 4vw, 48px);
    border-radius: 18px;
    background: linear-gradient(135deg, #0A4F5A 0%, #126874 100%);
    color: #fff;
    box-shadow: 0 14px 34px rgba(10,79,90,.13);
}

.dls-home-hero::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -78px;
    top: -92px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    pointer-events: none;
}

.dls-home-hero > * {
    position: relative;
    z-index: 1;
}

.dls-home-hero h1,
.dls-home-hero h2,
.dls-home-hero h3 {
    color: #fff;
    max-width: 900px;
}

.dls-home-hero h1 {
    margin: 0 0 14px;
    font-size: clamp(2rem, 5vw, 3.45rem);
    line-height: 1.08;
}

.dls-home-hero p {
    max-width: 920px;
    margin: 0 0 14px;
    color: rgba(255,255,255,.94);
    font-size: clamp(1rem, 1.7vw, 1.12rem);
}

/* CTA kann vom Core als Container oder direkt als Link/Button ausgegeben werden. */
.dls-home-cta:not(a):not(button) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

.dls-home-cta a,
.dls-home-cta button,
a.dls-home-cta,
button.dls-home-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 17px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: #E1A53A;
    color: #1F2933;
    text-decoration: none;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
}

.dls-home-cta a:hover,
.dls-home-cta button:hover,
a.dls-home-cta:hover,
button.dls-home-cta:hover {
    filter: brightness(.97);
    transform: translateY(-1px);
}

.dls-home-cta a:focus-visible,
.dls-home-cta button:focus-visible,
a.dls-home-cta:focus-visible,
button.dls-home-cta:focus-visible,
.dls-grammar-return a:focus-visible,
a.dls-grammar-return:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* Karten auf der öffentlichen Startseite: automatische Spalten, keine Leerflächen. */
.dls-home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(235px, 100%), 1fr));
    gap: 14px;
    margin: 18px 0 22px;
    align-items: stretch;
}

.dls-home-grid > * {
    min-width: 0;
    margin: 0;
}

.dls-home-grid > article,
.dls-home-grid > section,
.dls-home-grid > div,
.dls-home-grid > a {
    border: 1px solid var(--dls-line);
    border-radius: 14px;
    background: #fff;
    padding: 18px;
    color: var(--dls-text);
    text-decoration: none;
    box-shadow: 0 5px 16px rgba(10,79,90,.04);
}

.dls-home-grid h2,
.dls-home-grid h3,
.dls-home-grid h4 {
    margin-top: 0;
    color: var(--dls-petrol);
}

/* Kurszugang: Core entscheidet den Zustand, Theme macht ihn nur klar lesbar. */
.dls-access-level-card {
    min-width: 0;
    margin: 12px 0;
    padding: 18px 20px;
    border: 1px solid var(--dls-line);
    border-left: 5px solid var(--dls-teal);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(10,79,90,.04);
}

.dls-access-level-card h2,
.dls-access-level-card h3,
.dls-access-level-card h4 {
    margin: 0 0 8px;
    color: var(--dls-petrol);
}

.dls-access-level-card p:last-child {
    margin-bottom: 0;
}

.dls-access-level-card .dls-button,
.dls-access-level-card a[class*="button"] {
    margin-top: 6px;
}

/* Inline-Zugangshinweis ersetzt nur den geschützten Core-Bereich. */
.dls-inline-access-gate {
    margin: 16px 0;
    padding: 16px 18px;
    border: 1px solid #e5cf9b;
    border-left: 5px solid var(--dls-amber);
    border-radius: 11px;
    background: #fff8e9;
    color: var(--dls-text);
}

.dls-inline-access-gate > :first-child {
    margin-top: 0;
}

.dls-inline-access-gate > :last-child {
    margin-bottom: 0;
}

/* Grammatik-Rückweg: konsistent, kompakt, ohne neue Navigationslogik. */
.dls-grammar-return {
    margin: 0 0 14px;
}

a.dls-grammar-return,
.dls-grammar-return a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid #bfd4d7;
    border-radius: 9px;
    background: #f6fafb;
    color: var(--dls-petrol);
    text-decoration: none;
    font-weight: 800;
}

a.dls-grammar-return:hover,
.dls-grammar-return a:hover {
    background: #eaf3f4;
    color: #073f48;
}

/* Responsive Abschluss: keine horizontale Scrollleiste durch die neuen Core-Flächen. */
.dls-home-hero,
.dls-home-grid,
.dls-access-level-card,
.dls-inline-access-gate,
.dls-grammar-return {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 760px) {
    .dls-home-hero {
        padding: 24px 20px;
        border-radius: 14px;
    }

    .dls-home-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .dls-access-level-card,
    .dls-inline-access-gate {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .dls-home-grid {
        grid-template-columns: 1fr;
    }

    .dls-home-cta:not(a):not(button) {
        align-items: stretch;
    }

    .dls-home-cta a,
    .dls-home-cta button,
    a.dls-home-cta,
    button.dls-home-cta {
        width: 100%;
    }

    a.dls-grammar-return,
    .dls-grammar-return a {
        width: 100%;
        justify-content: center;
    }
}

/* ==============================================================
   DeutschLernSpur Theme 3.6.2
   Startseite: klare vertikale Führung – Titel, Lernhinweis, Bild, Text.
   ============================================================== */

.dls-home-hero {
    display: block;
    min-height: 0;
    padding: clamp(26px, 4vw, 48px);
}

.dls-home-hero h1 {
    max-width: 1000px;
    margin: 0 0 8px;
}

.dls-home-kicker {
    display: block;
    margin: 0 0 20px;
    color: #f4c86e;
    font-size: clamp(.92rem, 1.35vw, 1.08rem);
    font-weight: 850;
    letter-spacing: .08em;
    line-height: 1.35;
    text-transform: uppercase;
}

.dls-home-visual {
    position: relative !important;
    z-index: 1 !important;
    width: 100%;
    max-width: 1180px !important;
    margin: 22px 0 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 15px;
    background: #f2f7f8;
    box-shadow: 0 12px 28px rgba(4,42,48,.20);
}

.dls-home-visual img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Erklärung und Aktionen stehen bewusst unter dem Bild. */
.dls-home-hero p {
    max-width: 980px;
}

.dls-home-hero .dls-home-cta {
    max-width: 980px;
}

@media (max-width: 760px) {
    .dls-home-hero {
        padding: 24px 20px;
    }

    .dls-home-kicker {
        margin-bottom: 16px;
        letter-spacing: .055em;
    }

    .dls-home-visual {
        margin: 18px 0 20px;
        border-radius: 12px;
    }
}

@media (max-width: 480px) {
    .dls-home-hero h1 {
        font-size: clamp(2rem, 12vw, 2.65rem);
    }

    .dls-home-visual {
        margin: 16px 0 18px;
    }
}
/* ==============================================================
   DeutschLernSpur Theme 3.6.3
   Core 4.10.0: zentraler Medienpool – responsive Darstellung.
   Der Core liefert Inhalt, Alt-Text, srcset, Typ und Freigabestatus.
   ============================================================== */

.dls-media {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 22px 0;
    box-sizing: border-box;
}

.dls-media__image {
    display: block;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--dls-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(10,79,90,.055);
    box-sizing: border-box;
}

.dls-media__img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Schaubilder dürfen klar auf weißer Fläche stehen, ohne die Core-Daten zu verändern. */
.dls-media--chart .dls-media__image {
    padding: clamp(8px, 1.5vw, 16px);
    background: #fff;
}

/* Aufgabenbilder bleiben kompakt und visuell ruhig. */
.dls-media--task_image .dls-media__image {
    background: #f8fbfb;
}

.dls-media__caption {
    max-width: 100%;
    margin: 8px 2px 0;
    color: var(--dls-muted);
    font-size: .88rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* Robuste Absicherung für WordPress-responsive Bilder und verschachtelte Medien. */
.dls-media picture,
.dls-media source,
.dls-media__image picture {
    max-width: 100%;
}

.dls-media picture,
.dls-media__image picture {
    display: block;
}

.dls-media img,
.dls-media svg,
.dls-media canvas {
    max-width: 100%;
}

@media (max-width: 760px) {
    .dls-media {
        margin: 18px 0;
    }

    .dls-media__image {
        border-radius: 12px;
    }

    .dls-media__caption {
        margin-top: 7px;
        font-size: .84rem;
    }
}

@media (max-width: 480px) {
    .dls-media {
        margin: 16px 0;
    }

    .dls-media--chart .dls-media__image {
        padding: 7px;
    }

    .dls-media__caption {
        font-size: .82rem;
        line-height: 1.4;
    }
}

/* ==============================================================
   DeutschLernSpur Theme 3.6.4
   Lernort direkt unter dem aktiven Niveau-Button.
   Keine Änderung an Core-Modulnavigation oder Medienpool.
   ============================================================== */

.dls-level-switcher-header {
    align-items: flex-start;
}

.dls-level-switcher-header.has-course-context {
    padding-bottom: 28px;
}

.dls-level-switcher-header .dls-level-item {
    position: relative;
    display: flex;
    min-width: 82px;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
}

.dls-level-switcher-header .dls-level-item > .dls-level-link {
    width: 100%;
}

.dls-level-context {
    position: absolute;
    z-index: 3;
    top: calc(100% + 5px);
    left: 0;
    display: flex;
    width: max-content;
    max-width: min(390px, calc(100vw - 28px));
    align-items: center;
    gap: 4px;
    color: #D8EEF0;
    font-size: .77rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}

.dls-level-context-arrow {
    color: #E1A53A;
    font-weight: 900;
}

.dls-level-context-separator {
    opacity: .75;
}

.dls-level-context-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dls-level-item-b2 .dls-level-context {
    right: 0;
    left: auto;
}

/* Die frühere, volle Lernort-Zeile wird ab 3.6.4 nicht mehr gerendert. */
.dls-course-context {
    display: none;
}

@media (max-width: 650px) {
    .dls-level-switcher-header.has-course-context {
        padding-bottom: 30px !important;
    }

    .dls-level-switcher-header .dls-level-item {
        min-width: 72px;
    }

    .dls-level-context {
        top: calc(100% + 5px);
        max-width: min(320px, calc(100vw - 24px));
        font-size: .73rem;
    }
}

/* ==============================================================
   DeutschLernSpur Theme 3.6.5
   Sichtbarer aktiver Modulabschnitt für Core 4.10.1
   ============================================================== */

/*
 * Core 4.10.1 setzt .is-current und aria-current="location" auf den
 * aktuell sichtbaren Abschnitt. Das Theme stellt diesen Zustand nur dar.
 * Keine Navigations- oder Scroll-Logik im Theme.
 */
.dls-module-subnav a.is-current,
.dls-module-subnav a[aria-current="location"] {
    background: #e6f1f2;
    color: var(--dls-petrol);
    font-weight: 800;
    box-shadow: inset 4px 0 0 var(--dls-amber);
}

.dls-module-subnav a.is-current:hover,
.dls-module-subnav a.is-current:focus-visible,
.dls-module-subnav a[aria-current="location"]:hover,
.dls-module-subnav a[aria-current="location"]:focus-visible {
    background: #dcebed;
    color: var(--dls-petrol);
}

/* Dieselbe Core-Markierung im schwebenden Inhaltsverzeichnis sichtbar halten. */
.dls-module-toc a.is-current,
.dls-module-toc a[aria-current="location"] {
    color: var(--dls-petrol);
    font-weight: 800;
    text-decoration-thickness: 2px;
}

/* ==============================================================
   DeutschLernSpur Theme 3.7.0
   Generische B1-Integration aus Core 4.11.0.
   Keine B1-Sonderdarstellung; nur visuelle Zustände.
   ============================================================== */

/* Deaktivierte Core-Aktionen niveauunabhängig klar darstellen. */
.dls-button[aria-disabled="true"],
.dls-button.is-disabled,
button.dls-button:disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
    filter: grayscale(.15);
}

/* ==============================================================
   DeutschLernSpur Theme 3.8.0
   Professioneller Markenheader mit neuem vollständigem Markenlogo.
   - ersetzt nur die bisherige Header-Emblem-/Textkombination;
   - Navigation, Niveauleiste und Lernort bleiben unverändert;
   - keine Core-Logik im Theme.
   ============================================================== */

.dls-site-header {
    background: var(--dls-petrol);
}

.dls-brand-bar {
    width: 100%;
    border-bottom: 1px solid #d7e5e7;
    background: #f8fbfb;
}

.dls-brand-bar .dls-header-inner {
    display: flex !important;
    width: 100%;
    max-width: 1680px !important;
    min-height: 86px;
    align-items: center;
    justify-content: center;
    gap: 20px !important;
    margin: 0 auto;
    padding: 8px 24px;
}

.dls-brand-bar .dls-brand {
    display: block;
    width: clamp(390px, 36vw, 535px);
    min-width: 0 !important;
    max-width: calc(100% - 96px) !important;
    flex: 0 1 auto;
    margin: 0 !important;
    line-height: 0;
    text-decoration: none;
}

.dls-brand-bar .dls-brand .dls-header-logo {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
    object-position: left center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Die frühere getrennte Header-Beschriftung ist nicht mehr Bestandteil
   des Header-Markups. Diese Absicherung verhindert, dass Alt-Markup aus
   einem Cache doppelt sichtbar wird. */
.dls-site-header .dls-brand-copy,
.dls-site-header .dls-domain,
.dls-site-header .dls-slogan {
    display: none !important;
}

.dls-brand-bar .dls-menu-toggle {
    align-items: center;
    gap: 7px;
    border: 1px solid #9fbfc3;
    background: #ffffff;
    color: var(--dls-petrol);
    box-shadow: 0 4px 12px rgba(10,79,90,.08);
}

.dls-brand-bar .dls-menu-toggle:hover,
.dls-brand-bar .dls-menu-toggle:focus-visible {
    border-color: var(--dls-amber);
    background: #fffaf0;
    color: var(--dls-petrol);
}

.dls-menu-toggle-icon {
    font-size: 1.1em;
    line-height: 1;
}

/* Hauptnavigation schließt direkt an die ruhige Markenfläche an. */
.dls-site-header > .dls-nav {
    border-top: 0 !important;
}

@media (min-width: 1181px) {
    .dls-brand-bar .dls-menu-toggle {
        display: none !important;
    }
}

@media (max-width: 1180px) {
    .dls-brand-bar .dls-header-inner {
        min-height: 78px;
        justify-content: space-between;
        padding: 7px 18px;
    }

    .dls-brand-bar .dls-brand {
        width: min(500px, calc(100% - 92px));
        max-width: calc(100% - 92px) !important;
    }

    .dls-brand-bar .dls-menu-toggle {
        display: inline-flex !important;
        flex: 0 0 auto;
        margin-left: auto;
    }
}

@media (max-width: 650px) {
    .dls-brand-bar .dls-header-inner {
        min-height: 66px;
        gap: 10px !important;
        padding: 6px 12px;
    }

    .dls-brand-bar .dls-brand {
        width: calc(100% - 76px);
        max-width: calc(100% - 76px) !important;
    }

    .dls-brand-bar .dls-menu-toggle {
        min-width: 58px;
        padding: 9px 10px;
        justify-content: center;
    }

    .dls-brand-bar .dls-menu-toggle span:last-child {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
    }

    .dls-menu-toggle-icon {
        font-size: 1.35rem;
    }
}

@media (max-width: 380px) {
    .dls-brand-bar .dls-brand {
        width: calc(100% - 70px);
        max-width: calc(100% - 70px) !important;
    }

    .dls-brand-bar .dls-menu-toggle {
        min-width: 54px;
        padding: 8px 9px;
    }
}


/* ==============================================================
   DeutschLernSpur Theme 3.8.2
   Desktop-Markenheader – korrigierte professionelle Größen/Anker.
   - links bündig zur Hauptnavigation: Signet + DeutschLernSpur;
   - rechts bündig zur Hauptnavigation: deutschlernspur.de + Claim;
   - explizit höhere Selektorspezifität gegen alte 54/66-px-Logo-Regeln;
   - Tablet/Smartphone behalten die kompakte vollständige Marke aus 3.8.0.
   ============================================================== */

.dls-header-brand-split {
    display: none;
}

@media (min-width: 1181px) {
    .dls-brand-bar .dls-header-inner {
        width: 100%;
        max-width: 1480px !important;
        min-height: 150px;
        justify-content: stretch;
        padding: 7px 24px;
    }

    .dls-brand-bar .dls-brand {
        display: block;
        width: 100%;
        max-width: none !important;
        flex: 1 1 auto;
        margin: 0 !important;
    }

    .dls-brand-bar .dls-header-logo-full {
        display: none !important;
    }

    .dls-brand-bar .dls-brand .dls-header-brand-split {
        display: flex;
        width: 100%;
        min-width: 0;
        align-items: center;
        justify-content: space-between;
        gap: 56px;
    }

    /* Wichtig: Diese Selektoren sind absichtlich spezifischer als die
       historischen .dls-brand img-Regeln. So können die Desktop-Markenbilder
       nicht mehr auf 54/66 px zusammengeschrumpft werden. */
    .dls-brand-bar .dls-brand .dls-header-brand-primary,
    .dls-brand-bar .dls-brand .dls-header-brand-signoff {
        display: block;
        height: auto !important;
        max-height: none !important;
        object-fit: contain;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .dls-brand-bar .dls-brand .dls-header-brand-primary {
        width: clamp(470px, 28vw, 520px) !important;
        max-width: 58% !important;
        flex: 0 1 auto;
        object-position: left center;
    }

    .dls-brand-bar .dls-brand .dls-header-brand-signoff {
        width: clamp(285px, 17.5vw, 330px) !important;
        max-width: 34% !important;
        flex: 0 1 auto;
        margin-left: auto;
        object-position: right center;
    }
}

@media (max-width: 1180px) {
    .dls-brand-bar .dls-header-logo-full {
        display: block !important;
    }

    .dls-header-brand-split {
        display: none !important;
    }
}