/* Lerncockpit: ruhige Olivtöne, klare Navigation und direkte Lernwege.
   Die fachlichen Zustände und Fehlermeldungen bleiben in style.css definiert. */
:root {
    --portal-bg: #101512;
    --portal-surface: #181e19;
    --portal-line: #303a30;
    --portal-ink: #f0f4e9;
    --portal-muted: #a3aea5;
    --portal-lime: #d0fa75;
    --portal-sidebar-width: 216px;
}

/* Die Anwendung erbt ihre neutralen Oberflächen vom Cockpit. Semantische
   Farben wie --danger, --success und --warning werden nicht überschrieben. */
body.portal-auth {
    --bg: var(--portal-bg);
    --bg-2: #141a16;
    --panel: var(--portal-surface);
    --panel-2: #202920;
    --text: var(--portal-ink);
    --muted: var(--portal-muted);
    --primary: var(--portal-lime);
    --primary-dark: #afd45f;
    --border: var(--portal-line);
    --border-glow: #81985b;
    --sel-bg: #d0fa7512;
    --glow: 0 0 0 3px #d0fa7514;
    background: var(--portal-bg);
    color: var(--portal-ink);
    padding-left: var(--portal-sidebar-width);
}
body.portal-auth::before { background: var(--portal-bg); }
body.portal-auth::after, body.portal-auth #fx-circuit { display: none; }
body.portal-auth h1 {
    color: var(--portal-ink);
    background: none;
    -webkit-text-fill-color: currentColor;
    letter-spacing: -.04em;
}
body.portal-auth h2, body.portal-auth h3 { color: var(--portal-ink); }
body.portal-auth > .container {
    max-width: 1060px;
    min-width: 0;
    padding: 32px 38px 48px;
}
body.portal-auth:has(.dashboard-shell) > .container { max-width: 1440px; padding-top: 27px; }
body.portal-auth > .fusszeile { max-width: 1060px; margin-top: 0; padding: 20px 30px; font-size: .78rem; }
body.portal-auth .card { backdrop-filter: none; box-shadow: none; }
body.portal-auth .card::before { display: none; }
body.portal-auth .card:hover { border-color: #506149; box-shadow: none; }
body.portal-auth button.primary, body.portal-auth a.primary-btn {
    background: var(--portal-lime);
    color: #17200f;
    border-radius: 9px;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: none;
}
body.portal-auth button.primary:hover, body.portal-auth a.primary-btn:hover {
    background: #ddff96;
    box-shadow: none;
}
body.portal-auth .sekundaer-btn, body.portal-auth button.secondary { border-radius: 8px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--portal-lime);
    outline-offset: 4px;
}
.portal-skip {
    position: fixed;
    top: 10px;
    left: 14px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: 7px;
    background: var(--portal-lime);
    color: #17200f;
    font-size: 14px;
    font-weight: 650;
    transform: translateY(-160%);
}
.portal-skip:focus { transform: none; }

/* Feste Seitennavigation; auch bei kurzer Fensterhöhe vollständig erreichbar. */
.portal-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: var(--portal-sidebar-width);
    padding: 29px 19px 22px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #495642 #141a16;
    background: #141a16;
    border-right: 1px solid var(--portal-line);
    color: var(--portal-ink);
}
.portal-sidebar .brand {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 5px;
    margin: 0 0 34px;
    color: var(--portal-ink);
    font-size: 24px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.065em;
    text-decoration: none;
    white-space: nowrap;
}
.portal-sidebar .brand-symbol {
    display: inline-grid;
    flex: 0 0 34px;
    place-items: center;
    height: 34px;
    background: var(--portal-lime);
    color: #17200f;
    border-radius: 9px;
    font-family: var(--font-mono);
    font-size: 18px;
    letter-spacing: -.12em;
}
.portal-sidebar .brand-symbol svg { width: 24px; height: 24px; }
.portal-sidebar .brand-dot { color: var(--portal-lime); }
.portal-sidebar .domain { color: var(--portal-muted); font-weight: 400; }
.portal-sidebar .nav-label {
    margin: 0 0 11px;
    padding: 0 12px;
    color: #96a18e;
    font-size: 10px;
    letter-spacing: .12em;
    line-height: 1.5;
    text-transform: uppercase;
}
.portal-sidebar nav { display: flex; flex-direction: column; gap: 4px; }
.portal-sidebar nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 11px;
    border-radius: 8px;
    color: #b1bdaf;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
    transition: color .16s, background .16s;
}
.portal-sidebar nav a:hover { background: #ffffff07; color: var(--portal-ink); }
.portal-sidebar nav a[aria-current="page"] { background: #d0fa7513; color: var(--portal-lime); font-weight: 650; }
.portal-nav-icon { flex: 0 0 18px; width: 18px; height: 18px; }
.portal-sidebar .nav-divider { height: 1px; margin: 20px 10px; background: var(--portal-line); }
.portal-sidebar .nav-label:not(:first-child) { margin-top: 23px; }
.portal-sidebar .user-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: 28px;
    padding: 19px 10px 0;
    border-top: 1px solid var(--portal-line);
    font-size: 12px;
}
.portal-sidebar .user-info > span { width: 100%; overflow-wrap: anywhere; color: var(--portal-ink); }
.portal-sidebar .link-button { color: var(--portal-muted); font-size: 11px; border-radius: 6px; padding: 5px 10px; }
.portal-sidebar .link-button:hover { color: var(--portal-ink); border-color: #70855b; box-shadow: none; }
.portal-menu-toggle { display: none; }
.portal-menu-toggle[hidden], #portal-navigation[hidden], .dashboard-shell [hidden] { display: none !important; }

/* Kleiner Einstieg statt eines bildschirmfüllenden Werbe-Heros. */
.dashboard-shell { min-width: 0; }
.cockpit-utility {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 25px;
    color: var(--portal-muted);
    font-size: 12px;
}
.cockpit-utility > span:first-child { display: inline-flex; gap: 8px; align-items: center; }
.cockpit-utility > span:first-child::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--portal-lime); }
.cockpit-welcome { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.dashboard-shell .cockpit-welcome h1 { margin: 0; font-size: clamp(1.9rem, 3vw, 2.4rem); line-height: 1.15; font-weight: 800; letter-spacing: -.055em; }
.cockpit-welcome p { margin: 8px 0 0; color: var(--portal-muted); font-size: 13px; }
.dashboard-shell .streak-pille {
    flex-shrink: 0;
    border: 1px solid #35492b;
    border-radius: 7px;
    padding: 6px 10px;
    background: #1e281e;
    color: #c5dfb3;
    font-size: 11px;
    line-height: 1.5;
    white-space: normal;
}
.portal-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: #b8d193;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.portal-eyebrow svg { width: 16px; height: 16px; }
.portal-arrow { width: 17px; height: 17px; flex-shrink: 0; vertical-align: middle; margin-left: 12px; }
.dashboard-shell .dashboard-missions { display: grid; grid-template-columns: 1.65fr 1fr; gap: 17px; margin: 0 0 17px; }
.dashboard-missions > :only-child { grid-column: 1 / -1; }
.dashboard-shell .weiter-lernen {
    order: -1;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 18px;
    flex-wrap: nowrap;
    overflow: hidden;
    min-width: 0;
    min-height: 220px;
    padding: 25px 27px;
    margin: 0;
    border: 1px solid #56643e;
    border-radius: 15px;
    background: linear-gradient(115deg, #273322, #1b251c);
}
.dashboard-shell .weiter-lernen > div { position: relative; z-index: 1; max-width: 80%; }
.dashboard-shell .weiter-lernen h2 { margin: 0 0 10px; font-size: 29px; line-height: 1.15; font-weight: 750; letter-spacing: -.045em; }
.dashboard-shell .weiter-lernen .weiter-zahl { margin: 8px 0; font-size: 15px; }
.dashboard-shell .weiter-lernen .subtitle { max-width: 450px; color: #b9c7b3; font-size: 13px; line-height: 1.6; }
.dashboard-shell .weiter-lernen .primary-btn { position: relative; z-index: 1; margin: 0; padding: 12px 18px; font-size: 14px; line-height: 1.5; }
.signal-art { position: absolute; z-index: 0; right: 11px; top: 50%; width: 190px; height: 190px; transform: translateY(-50%); color: var(--portal-lime); opacity: .6; pointer-events: none; }
.dashboard-shell .tagesrunde-band {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 14px;
    min-width: 0;
    min-height: 220px;
    padding: 23px;
    margin: 0;
    border: 1px solid var(--portal-line);
    border-radius: 15px;
    background: var(--portal-surface);
    color: var(--portal-ink);
    text-decoration: none;
}
.dashboard-shell .tagesrunde-band:hover { border-color: #7b8f58; background: #1d261c; }
.dashboard-shell .tr-band-text { display: block; color: var(--portal-muted); font-size: 13px; line-height: 1.7; }
.dashboard-shell .tr-band-text b { display: block; color: var(--portal-ink); margin: 0 0 9px; font-size: 23px; font-weight: 700; line-height: 1.2; letter-spacing: -.035em; }
.dashboard-shell .tr-band-text .portal-eyebrow { margin-bottom: 12px; color: #b8c5ac; font-size: 10px; }
.dashboard-shell .tr-band-serie { color: #c5dfb3; font-size: 11px; }
.dashboard-shell .tr-band-cta { display: block; width: 100%; margin: auto 0 0; padding-top: 13px; border-top: 1px solid var(--portal-line); color: var(--portal-lime); font-size: 13px; font-weight: 650; text-align: right; }
.dashboard-shell .tagesrunde-band.fertig { border-color: #34d39966; background: #34d3990b; }
.dashboard-shell .tagesrunde-band.fertig .tr-band-text b, .dashboard-shell .tagesrunde-band.fertig .tr-band-cta { color: var(--success); }

/* Trainer bleiben sichtbar, ohne jeweils einen großen Aktionsblock zu bilden. */
.dashboard-shell .trainer-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    padding: 9px 13px;
    border: 1px solid var(--portal-line);
    border-radius: 10px;
    background: #141c16;
}
.dashboard-shell .trainer-leiste-titel { flex: 0 0 auto; opacity: 1; margin-right: 7px; padding-right: 12px; border-right: 1px solid var(--portal-line); color: var(--portal-muted); font-size: 11px; font-weight: 500; }
.dashboard-shell .trainer-pille, .dashboard-shell .handeln-pille {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 35px;
    padding: 6px 9px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #c7d0c1;
    font-size: 12px;
    line-height: 1.4;
}
.dashboard-shell .trainer-pille:hover, .dashboard-shell .handeln-pille:hover { border-color: #4d5d40; color: var(--portal-lime); background: #d0fa750b; }
.dashboard-shell .handeln-pille b { color: #b4d594; font-size: 11px; }
.dashboard-shell .handeln-pille-alle { border-color: #46563c; border-style: dashed; }

/* Suche und Kategorien verbessern den Zugang, die Fachseiten bleiben das Ziel. */
.dashboard-shell .uebersicht-kopf { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; margin: 28px 0 17px; }
.dashboard-shell .uebersicht-kopf h2 { margin: 0; font-size: 24px; line-height: 1.2; letter-spacing: -.035em; }
.dashboard-shell .uebersicht-kopf .subtitle { font-size: 13px; color: var(--portal-muted); }
#faecher { scroll-margin-top: 24px; }
.cockpit-search { display: flex; align-items: center; gap: 9px; min-width: 0; width: 260px; padding: 10px 13px; border: 1px solid var(--portal-line); border-radius: 8px; background: var(--portal-surface); color: var(--portal-muted); }
.cockpit-search svg { width: 17px; height: 17px; flex: 0 0 17px; }
.cockpit-search input { width: 100%; min-width: 0; padding: 0; margin: 0; border: none; border-radius: 0; background: transparent; color: var(--portal-ink); font: inherit; font-size: 13px; line-height: 1.7; }
.cockpit-search input::placeholder { color: var(--portal-muted); opacity: 1; }
.cockpit-search:focus-within { border-color: #a4c26e; outline: 2px solid #d0fa7540; outline-offset: 3px; }
.cockpit-search input:focus-visible { outline: none; box-shadow: none; }
.cockpit-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; }
.cockpit-filters button { min-height: 35px; border: 1px solid var(--portal-line); border-radius: 6px; background: transparent; color: var(--portal-muted); font: inherit; font-size: 12px; padding: 7px 13px; cursor: pointer; line-height: 1.5; }
.cockpit-filters button:hover { border-color: #829866; color: var(--portal-ink); }
.cockpit-filters button[aria-pressed="true"] { background: var(--portal-lime); border-color: var(--portal-lime); color: #17200f; font-weight: 700; }
.cockpit-search-status { color: var(--portal-muted); font-size: 12px; margin: 15px 0 22px; }
.cockpit-search-empty { padding: 25px; border: 1px dashed var(--portal-line); border-radius: 10px; color: var(--portal-muted); }

/* Drei Spalten; zusätzliche Spezifität überstimmt die alten Inline-Regeln. */
.dashboard-shell .fach-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-bottom: 15px; }
.dashboard-shell .fach-kachel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 11px;
    min-width: 0;
    min-height: 235px;
    padding: 20px;
    border: 1px solid var(--portal-line);
    border-radius: 11px;
    background: var(--portal-surface);
    color: var(--portal-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.dashboard-shell .fach-kachel::after { content: ""; width: 16px; height: 16px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19 19 5M5 5h14v14' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; position: absolute; right: 18px; top: 23px; color: #a0ae96; font-size: 19px; line-height: 1; transition: transform .16s, color .16s; }
.dashboard-shell .fach-kachel:hover { background: #20291f; border-color: #718657; box-shadow: none; transform: translateY(-2px); }
.dashboard-shell .fach-kachel:hover::after { color: var(--portal-lime); transform: translate(2px, -2px); }
.dashboard-shell .fach-kachel:focus-visible { outline: 2px solid var(--portal-lime); outline-offset: 4px; }
.dashboard-shell .kachel-titel { display: flex; align-items: flex-start; flex-direction: column; gap: 16px; }
.dashboard-shell .kachel-titel .fach-icon { box-sizing: content-box; flex: 0 0 auto; width: 22px; height: 22px; padding: 8px; margin: 0; border-radius: 9px; color: var(--fach); background: color-mix(in srgb, var(--fach) 11%, transparent); filter: none; }
.dashboard-shell .kachel-titel h2 { margin: 0; padding-right: 3px; font-size: 16px; font-weight: 650; line-height: 1.35; letter-spacing: -.025em; text-wrap: initial; }
.dashboard-shell .kachel-meta { color: var(--portal-muted); font-size: 12px; line-height: 1.5; }
.dashboard-shell .kachel-lernstand { margin: 1px 0 0; }
.dashboard-shell .stand-zeile { color: var(--portal-muted); gap: 5px; flex-wrap: wrap; font-size: 11px; line-height: 1.5; }
.dashboard-shell .stand-schiene { height: 3px; background: #303d2b; }
.dashboard-shell .kachel-faellig { padding: 3px 7px; border-radius: 5px; font-size: 11px; line-height: 1.4; }
.dashboard-shell .kachel-faellig.neu { background: color-mix(in srgb, var(--fach) 7%, transparent); border-color: color-mix(in srgb, var(--fach) 25%, transparent); color: var(--fach); }
.dashboard-shell .kachel-stand { margin-top: auto; padding-top: 11px; border-top: 1px solid var(--portal-line); }
.dashboard-shell .kachel-leer, .dashboard-shell .stand-abdeckung { color: var(--portal-muted); font-size: 11px; line-height: 1.5; }
.dashboard-shell .uebersicht-aktionen { gap: 12px; padding: 12px 0; }
.dashboard-shell .uebersicht-aktionen .primary-btn, .dashboard-shell .uebersicht-aktionen .sekundaer-btn { font-size: 13px; }
/* Der Fallback der Fachkachel darf die individuellen Fachfarben nicht ersetzen. */
.dashboard-shell .fach--digitaltechnik { --fach: var(--fach-dt); }
.dashboard-shell .fach--wiso { --fach: var(--fach-wiso); }
.dashboard-shell .fach--ihk-ap1 { --fach: var(--fach-ihk); }
.dashboard-shell .fach--netzwerktechnik { --fach: var(--fach-netz); }
.dashboard-shell .fach--hardware { --fach: var(--fach-hardware); }
.dashboard-shell .fach--windows { --fach: var(--fach-windows); }
.dashboard-shell .fach--datenbanken { --fach: var(--fach-db); }
.dashboard-shell .fach--programmierung { --fach: var(--fach-prog); }
.dashboard-shell .fach--projekt-auftrag { --fach: var(--fach-projekt); }
.dashboard-shell .fach--linux { --fach: var(--fach-linux); }
.dashboard-shell .fach--ihk-ap2 { --fach: var(--fach-ihk2); }

/* Anmeldung und Kontozugang nutzen dieselbe Palette wie das Lerncockpit.
   Die Intro-Zustände bestimmen weiterhin Position und Sichtbarkeit der Maske. */
body.portal-login {
    --bg: var(--portal-bg);
    --bg-2: #141a16;
    --panel: var(--portal-surface);
    --panel-2: #202920;
    --text: var(--portal-ink);
    --muted: var(--portal-muted);
    --primary: var(--portal-lime);
    --primary-dark: #afd45f;
    --accent: #9bc6a3;
    --border: var(--portal-line);
    --border-glow: #81985b;
    --glow: 0 0 24px #d0fa7517;
    background: var(--portal-bg);
    color: var(--portal-ink);
}
body.portal-login::before {
    background: radial-gradient(ellipse at 25% 40%, #26362080, transparent 65%), var(--portal-bg);
}
body.portal-login::after {
    background-image: linear-gradient(#a4c26e06 1px, transparent 1px), linear-gradient(90deg, #a4c26e06 1px, transparent 1px);
}
body.portal-login #fx-matrix { opacity: .9; }
body.portal-login.intro-fertig #fx-matrix,
body.portal-login.intro-fallback #fx-matrix { opacity: .85; }
body.portal-login .login-karte {
    border-color: #526444;
    background: linear-gradient(145deg, #1e281ff5, #151d17fa);
    background-size: auto;
    box-shadow: 0 24px 70px #0006, 0 0 40px #d0fa7508;
}
body.portal-login .login-karte::after { opacity: .45; }
body.portal-login .login-karte h1 {
    color: var(--portal-ink);
    -webkit-text-fill-color: currentColor;
}
body.portal-login form.stacked label { color: #c6d0c1; }
body.portal-login form.stacked input {
    color: var(--portal-ink);
    background: #111913;
    border-color: #3b4a36;
}
body.portal-login form.stacked input:focus {
    border-color: var(--portal-lime);
    box-shadow: 0 0 0 3px #d0fa7515;
}
body.portal-login .chip-face {
    background: linear-gradient(135deg, #24331f, #141d16);
    border-color: #8aa762;
    color: var(--portal-lime);
    box-shadow: inset 0 0 24px #d0fa7514, 0 0 30px #d0fa751a;
}
body.portal-login .chip-glow { background: radial-gradient(ellipse, #d0fa7530, transparent 70%); }
body.portal-login .pin { background: linear-gradient(#d0fa75, #607c47); }
@media (max-width: 1099px) {
    body.portal-login.intro-fertig .login-karte { margin-top: max(250px, 37svh); }
}
.login-karte { padding: 2rem; border-color: #425143; border-radius: 20px; background: linear-gradient(145deg, #1c271df5, #111a15f5); box-shadow: 0 25px 90px #0005; }
.login-karte h1 { color: var(--portal-ink); background: none; letter-spacing: -.04em; font-size: 2.25rem; }
.login-karte .login-status, .login-karte a { color: var(--portal-lime); }
.login-karte .login-punkt { background: var(--portal-lime); box-shadow: 0 0 12px #d0fa7555; }
.login-karte input { border-radius: 9px; }
.login-karte input:focus { border-color: var(--portal-lime); box-shadow: 0 0 0 3px #d0fa7515; }
.login-karte button.primary { width: 100%; border-radius: 9px; background: var(--portal-lime); color: #17200f; box-shadow: none; }
.login-karte button.primary:hover { background: #ddff96; }

@media (min-width: 1600px) {
    body.portal-auth:has(.dashboard-shell) > .container { padding-left: 54px; padding-right: 54px; }
}
@media (max-width: 1200px) {
    body.portal-auth > .container { padding-left: 26px; padding-right: 26px; }
    .dashboard-shell .weiter-lernen { padding: 23px; }
    .dashboard-shell .weiter-lernen > div { max-width: 100%; }
    .signal-art { right: -18px; opacity: .18; }
    .dashboard-shell .fach-kachel { padding: 17px; }
    .dashboard-shell .kachel-titel h2 { font-size: 15px; }
}
@media (max-width: 1050px) and (min-width: 901px) {
    .dashboard-shell .dashboard-missions { grid-template-columns: 1.4fr 1fr; gap: 13px; }
    .dashboard-shell .weiter-lernen, .dashboard-shell .tagesrunde-band { padding: 20px; }
    .dashboard-shell .weiter-lernen h2 { font-size: 26px; }
    .dashboard-shell .fach-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    body.portal-auth { padding-left: 0; }
    .portal-sidebar {
        position: relative;
        inset: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 18px;
        width: 100%;
        padding: 19px 24px;
        border-right: none;
        border-bottom: 1px solid var(--portal-line);
        overflow: visible;
    }
    .portal-sidebar .brand { margin: 0; padding: 0; font-size: 24px; }
    .portal-menu-toggle:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 42px; padding: 8px 12px; background: #20291f; border: 1px solid #43513b; border-radius: 8px; color: var(--portal-ink); font: inherit; font-size: 13px; cursor: pointer; }
    .portal-menu-toggle svg { width: 19px; height: 19px; }
    #portal-navigation { flex: 0 0 100%; width: 100%; padding-top: 4px; }
    .portal-sidebar nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
    .portal-sidebar nav a { min-height: 44px; }
    .portal-sidebar .nav-label { padding-left: 10px; }
    .portal-sidebar .user-info { margin-top: 16px; padding-top: 16px; flex-wrap: nowrap; justify-content: space-between; }
    .portal-sidebar .user-info > span { width: auto; }
    body.portal-auth > .container { padding: 26px 24px 38px; }
    .cockpit-utility { margin-bottom: 23px; }
    .dashboard-shell .cockpit-welcome h1 { font-size: 32px; }
    .dashboard-shell .weiter-lernen > div { max-width: 100%; }
    .signal-art { opacity: .2; }
    #faecher { scroll-margin-top: 20px; }
}
@media (max-width: 700px) {
    .dashboard-shell .fach-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-shell .dashboard-missions { grid-template-columns: 1fr; }
    .dashboard-shell .weiter-lernen { min-height: 215px; padding: 24px; }
    .dashboard-shell .weiter-lernen > div { max-width: 83%; }
    .signal-art { right: 5px; opacity: .22; }
    .dashboard-shell .tagesrunde-band { min-height: 155px; gap: 10px; padding: 20px 23px; }
    .dashboard-shell .tr-band-text b { font-size: 21px; }
    .dashboard-shell .tr-band-cta { padding-top: 10px; }
    .cockpit-welcome { align-items: flex-start; flex-direction: column; gap: 12px; }
    .cockpit-welcome .streak-pille { font-size: 10px; padding: 5px 9px; }
    .dashboard-shell .uebersicht-kopf { align-items: stretch; gap: 16px; }
    .cockpit-search { width: 100%; }
}
@media (max-width: 560px) {
    .portal-sidebar { padding: 17px 18px; gap: 16px; }
    .portal-sidebar .brand { font-size: 23px; }
    .portal-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portal-sidebar nav a { padding: 10px 9px; gap: 7px; font-size: 12px; overflow-wrap: anywhere; }
    .portal-nav-icon { width: 17px; height: 17px; flex-basis: 17px; }
    body.portal-auth > .container, body.portal-auth:has(.dashboard-shell) > .container { padding: 23px 17px 32px; }
    .cockpit-utility { margin-bottom: 22px; font-size: 11px; gap: 10px; }
    .cockpit-utility > span:last-child:not(:first-child) { font-size: 10px; text-align: right; }
    .dashboard-shell .cockpit-welcome h1 { font-size: 30px; }
    .cockpit-welcome p { font-size: 12px; line-height: 1.6; }
    .cockpit-welcome { margin-bottom: 21px; }
    .dashboard-shell .weiter-lernen { padding: 23px; gap: 18px; }
    .dashboard-shell .weiter-lernen > div { max-width: 100%; }
    .dashboard-shell .weiter-lernen h2 { font-size: 28px; }
    .dashboard-shell .weiter-lernen .subtitle { font-size: 12px; }
    .dashboard-shell .weiter-lernen .primary-btn { font-size: 13px; min-height: 44px; padding: 11px 16px; }
    .signal-art { width: 170px; height: 170px; right: -23px; opacity: .14; }
    .dashboard-shell .tr-band-text { font-size: 12px; }
    .dashboard-shell .trainer-leiste { padding: 12px; gap: 6px; }
    .dashboard-shell .trainer-leiste-titel { flex: 0 0 100%; border: 0; padding: 0 4px; margin: 0 0 3px; font-size: 11px; }
    .dashboard-shell .trainer-pille, .dashboard-shell .handeln-pille { min-height: 44px; padding: 7px 8px; font-size: 12px; flex: 1 1 42%; border-color: #2c3929; }
    .dashboard-shell .uebersicht-kopf { margin: 26px 0 17px; }
    .dashboard-shell .uebersicht-kopf h2 { font-size: 24px; }
    .dashboard-shell .uebersicht-kopf .subtitle { font-size: 12px; }
    .cockpit-filters { gap: 6px; margin-bottom: 17px; }
    .cockpit-filters button { padding: 8px 10px; font-size: 11px; min-height: 38px; }
    .dashboard-shell .fach-kacheln { gap: 10px; }
    .dashboard-shell .fach-kachel { min-height: 248px; padding: 15px; gap: 10px; }
    .dashboard-shell .fach-kachel::after { top: 20px; right: 13px; font-size: 16px; }
    .dashboard-shell .kachel-titel { gap: 15px; }
    .dashboard-shell .kachel-titel .fach-icon { width: 20px; height: 20px; padding: 7px; }
    .dashboard-shell .kachel-titel h2 { font-size: 14px; line-height: 1.4; }
    .dashboard-shell .kachel-meta, .dashboard-shell .kachel-leer, .dashboard-shell .stand-zeile, .dashboard-shell .stand-abdeckung { font-size: 11px; }
    .dashboard-shell .kachel-faellig { font-size: 10px; padding: 3px 5px; }
    .dashboard-shell .uebersicht-aktionen { align-items: stretch; }
    .dashboard-shell .uebersicht-aktionen > a { text-align: center; }
    .dashboard-shell .uebersicht-aktionen > .primary-btn { width: 100%; padding: 12px 14px; }
    .dashboard-shell .uebersicht-aktionen > .sekundaer-btn { flex: 1 1 auto; min-height: 44px; }
    body.portal-auth > .fusszeile { padding: 20px 18px; gap: 10px 16px; font-size: 12px; }
    .login-karte { padding: 1.5rem; }
}
@media (max-width: 360px) {
    .dashboard-shell .fach-kacheln { grid-template-columns: minmax(0, 1fr); }
    .dashboard-shell .fach-kachel { min-height: 220px; }
    .dashboard-shell .kachel-titel h2 { font-size: 16px; }
    .cockpit-utility > span:last-child:not(:first-child) { display: none; }
    .dashboard-shell .cockpit-welcome h1 { font-size: 28px; }
    .portal-sidebar nav { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .portal-sidebar a, .dashboard-shell a, .dashboard-shell button, .dashboard-shell .fach-kachel::after { transition: none; }
    .dashboard-shell .fach-kachel:hover, .dashboard-shell .fach-kachel:focus-visible, .dashboard-shell .fach-kachel:hover::after { transform: none; }
}