/* ================================================
   DASHBOARD — Hauptbuch & Beleg (v2)
   Streng heißt elegant, nicht kahl.
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Tokens ── */
:root {
    /* Papier & Flächen */
    --hb-paper:      #F4F1E8;   /* bevorzugter Seitengrund, warm */
    --hb-paper-alt:  #FBF8EF;   /* helleres Alternativ */
    --hb-card:       #FCFAF4;   /* leicht abgesetzte Inhaltsfläche */

    /* Tinte / Text */
    --hb-ink:        #23201B;   /* warm braun-schwarz (kein Reinschwarz) */
    --hb-ink-mid:    #6E6757;   /* Fließtext gedämpft */
    --hb-ink-muted:  #8A8273;   /* Labels, Tertiär */
    --hb-off-white:  #EDE8DB;   /* Text auf dunklem Grund */

    /* Trenner */
    --hb-border:     #DAD3C2;   /* bevorzugter warmer Trenner */
    --hb-border-ink: #23201B;   /* starker Akzent-Trenner (sparsam) */

    /* Raster */
    --hb-grid-page:  rgba(120,110,85,0.035);   /* ganzseitig — fast unsichtbar */
    --hb-grid-zone:  rgba(120,110,85,0.10);    /* nur für kleine Zonen */

    /* Bedeutungsfarben (gedämpft = Standard) */
    --hb-terra:   #B0492C;   /* Terrakotta — Primär-Akzent, Buttons */
    --hb-ocker:   #A8744D;   /* Ocker — aktiv */
    --hb-oliv:    #5E7A4F;   /* Oliv — erledigt */
    --hb-blue:    #185FA5;   /* Bilanz-Blau — Bestand */

    /* Schriften */
    --hb-serif: 'Lora', 'Source Serif 4', Georgia, serif;
    --hb-mono:  'JetBrains Mono', 'IBM Plex Mono', monospace;

    /* Linien */
    --hb-rule-warm:    1px solid #DAD3C2;
    --hb-rule-ink:     1px solid #23201B;
    --hb-rule-strong:  2px solid #23201B;
    --hb-rule-balance: 3px double #23201B;
}

/* ── Body — Override des alten Gradient-Hintergrunds ── */
.dashboard-hb-body {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1480px);
    gap: 0;
    align-items: start;
    justify-content: center;
    padding: 0 20px 64px;
    background-color: var(--hb-paper);
    background-image:
        repeating-linear-gradient(0deg,  var(--hb-grid-page) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(90deg, var(--hb-grid-page) 0 1px, transparent 1px 26px);
    color: var(--hb-ink);
    font-family: var(--hb-serif);
}

/* body::before und ::after tragen das alte Gradient-/Grid-System —
   auf dieser Seite komplett entfernen */
.dashboard-hb-body::before,
.dashboard-hb-body::after {
    display: none;
}

/* ── Navbar-Slot ── */
.dashboard-hb-body #navbar-container {
    grid-column: 1 / -1;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ── Page container ──
   Seit dem Kachelsystem (14.09.2026) schmaler: 1480px waren für neun Quadrate
   nebeneinander zu viel — geteilt durch drei ergab das 370px Kantenlänge.
   Die Breite steht bewusst HIER und nicht am Kachelraster: Sonst stünde ein
   schmales Raster linksbündig unter einer breiten Kopfzeile, und rechts
   klaffte ein Drittel der Seite leer. So teilen Begrüssung und Kacheln
   dieselbe Breite und stehen zusammen mittig. */
.dashboard-hb-body .dashboard-page {
    grid-column: 1;
    grid-row: 2;
    max-width: 960px;
    margin: 52px auto 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

.dashboard-hb-body .site-footer {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100vw;
    margin: 60px calc(50% - 50vw) -64px;
}

.dashboard-hb-body .beta-info-stack {
    position: static;
    inset: auto;
    z-index: auto;
    width: 100%;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dashboard-hb-body .feedback-cta-link {
    position: static;
    width: 100%;
}

.dashboard-hb-body .beta-info-box {
    border: 1px solid var(--hb-border);
    border-radius: 0;
    background:
        linear-gradient(90deg, rgba(94, 122, 79, 0.08), transparent 58%),
        var(--hb-paper-alt);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    overflow: hidden;
}

.dashboard-hb-body .beta-info-toggle {
    padding: 13px 14px;
    border: 0;
    background: transparent;
}

.dashboard-hb-body .beta-info-title {
    display: block;
    color: var(--hb-ocker);
    font-family: var(--hb-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.dashboard-hb-body .beta-info-meta {
    display: block;
    margin-top: 5px;
    color: var(--hb-ink-mid);
    font-family: var(--hb-serif);
    font-size: 0.78rem;
    letter-spacing: 0;
    text-transform: none;
}

.dashboard-hb-body .beta-info-icon {
    color: var(--hb-ink-muted);
}

.dashboard-hb-body .beta-info-body {
    padding: 0 14px 14px;
    border-top: var(--hb-rule-warm);
}

.dashboard-hb-body .dashboard-version-slot:empty {
    display: none;
}

.dashboard-hb-body .beta-info-body p {
    margin: 10px 0 0;
    color: var(--hb-ink-mid);
    font-family: var(--hb-serif);
    font-size: 0.86rem;
    line-height: 1.6;
}

.dashboard-hb-body .beta-info-list {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.dashboard-hb-body .beta-info-list li {
    position: relative;
    margin: 0;
    padding: 9px 0 9px 17px;
    border-top: var(--hb-rule-warm);
    color: var(--hb-ink-mid);
    font-family: var(--hb-serif);
    font-size: 0.85rem;
    line-height: 1.45;
}

.dashboard-hb-body .beta-info-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--hb-ocker);
    font-weight: 700;
}

.dashboard-hb-body .beta-info-body strong {
    color: var(--hb-ink);
    font-weight: 600;
}

/* ── Shell: Main + Aside ── */
.dashboard-hb-body .dashboard-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
    background: var(--hb-card);
    border: var(--hb-rule-warm);
}

/* ── Main ── */
.dashboard-hb-body .dashboard-main {
    padding: clamp(42px, 5vw, 68px) clamp(42px, 5vw, 72px);
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    border-right: var(--hb-rule-warm);
    min-width: 0;
}

/* ── News Panel ── */
.dashboard-hb-body .dashboard-news-panel {
    padding: clamp(34px, 4vw, 54px) clamp(28px, 3vw, 44px);
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    position: sticky;
    top: 22px;
    align-self: start;
    min-width: 0;
}

/* ── Kicker — Mono-Mikrolabel ── */
.dashboard-hb-body .dashboard-kicker {
    font-family: var(--hb-mono);
    font-size: 9px;
    letter-spacing: 2px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--hb-ink-muted);
    margin: 0 0 12px;
}

/* ── H1 — großer Serif-Titel ── */
.dashboard-hb-body .dashboard-main h1 {
    font-family: var(--hb-serif);
    font-size: clamp(2rem, 4vw, 3.1rem);
    font-weight: 600;
    line-height: 1.1;
    color: var(--hb-ink);
    max-width: 18ch;
    margin: 0;
    padding-bottom: 20px;
    border-bottom: var(--hb-rule-strong);
    letter-spacing: -0.015em;
}

/* ── Lead-Text ── */
.dashboard-hb-body .dashboard-lead {
    font-family: var(--hb-serif);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--hb-ink-mid);
    margin: 20px 0 0;
    max-width: 56ch;
}

/* ── Empfohlene Karte ── */
.dashboard-hb-body .dashboard-next-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: end;
    margin-top: 40px;
    padding: 28px;
    border: var(--hb-rule-warm);
    border-radius: 0;
    background: var(--hb-paper);
    box-shadow: none;
}

/* Mono nur für das kurze Label "EMPFOHLEN" */
.dashboard-hb-body .dashboard-next-label {
    font-family: var(--hb-mono);
    font-size: 9px;
    letter-spacing: 2px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--hb-terra);
    display: inline-block;
    margin-bottom: 10px;
}

/* Serif für Überschrift */
.dashboard-hb-body .dashboard-next-card h2 {
    font-family: var(--hb-serif);
    font-size: clamp(1.3rem, 2.4vw, 1.9rem);
    font-weight: 600;
    color: var(--hb-ink);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.dashboard-hb-body .dashboard-next-card p {
    font-family: var(--hb-serif);
    font-size: 0.96rem;
    line-height: 1.65;
    color: var(--hb-ink-mid);
    margin: 10px 0 0;
    max-width: 54ch;
}

/* ── Primär-Button — Terrakotta, Mono-Label ── */
.dashboard-hb-body .dashboard-primary-link {
    font-family: var(--hb-mono);
    font-size: 10px;
    letter-spacing: 1px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--hb-card);
    background: var(--hb-terra);
    border: 0;
    border-radius: 0;
    padding: 12px 22px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    transition: background 0.14s;
}
.dashboard-hb-body .dashboard-primary-link::after {
    content: " →";
    margin-left: 4px;
}
.dashboard-hb-body .dashboard-primary-link:hover {
    background: var(--hb-ink);
    transform: none;
}

/* ── Weitere Optionen Sektion ── */
.dashboard-hb-body .dashboard-steps {
    margin-top: 44px;
}

.dashboard-hb-body .dashboard-section-head {
    display: grid;
    gap: 5px;
    margin-bottom: 0;
    padding-bottom: 14px;
    border-bottom: var(--hb-rule-warm);
}

.dashboard-hb-body .dashboard-section-head h2 {
    font-family: var(--hb-serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--hb-ink);
    margin: 0;
    line-height: 1.25;
}

/* Fortschrittszeile als Mono-Mikrolabel */
.dashboard-hb-body .dashboard-section-head p {
    font-family: var(--hb-mono);
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--hb-ink-muted);
    margin: 0;
    line-height: 1.5;
}

/* ── Action-Liste — Kontoauszug-Stil ── */
.dashboard-hb-body .dashboard-action-list {
    display: grid;
    gap: 0;
}

/* Empfohlene Aktion: linker Terrakotta-Akzent */

/* Serif für Titel und Beschreibung */

/* Mono nur für das kurze Kürzel (z.B. "ÜBUNGEN") */

/* ── News Panel ── */
.dashboard-hb-body .dashboard-news-panel .dashboard-section-head {
    border-bottom: var(--hb-rule-strong);
    margin-bottom: 24px;
    padding-bottom: 14px;
}

.dashboard-hb-body .dashboard-news-panel h2 {
    font-family: var(--hb-serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--hb-ink);
    margin: 0;
}

.dashboard-hb-body .dashboard-news-placeholder,
.dashboard-hb-body .dashboard-empty {
    font-family: var(--hb-serif);
    font-size: 0.9rem;
    color: var(--hb-ink-muted);
    line-height: 1.6;
}

.dashboard-hb-body .dashboard-news-item {
    padding: 20px 0;
    border-top: var(--hb-rule-warm);
}
.dashboard-hb-body .dashboard-news-item:first-child {
    border-top: none;
    padding-top: 0;
}
.dashboard-hb-body .dashboard-news-item:last-child {
    padding-bottom: 0;
}

/* Mono nur für das kurze Kategorie-Label */
.dashboard-hb-body .dashboard-news-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
    font-family: var(--hb-mono);
    font-size: 9px;
    letter-spacing: 1.5px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--hb-ink-muted);
}
.dashboard-hb-body .dashboard-news-meta span {
    color: var(--hb-oliv);
}

/* Serif für Titel und Text */
.dashboard-hb-body .dashboard-news-item h3 {
    font-family: var(--hb-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--hb-ink);
    margin: 0;
    line-height: 1.3;
}
.dashboard-hb-body .dashboard-news-item:first-child h3 {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.dashboard-hb-body .dashboard-news-item p {
    font-family: var(--hb-serif);
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--hb-ink-mid);
    margin: 9px 0 0;
}

/* ================================================
   DASHBOARD WORKBENCH
   ================================================ */

.dashboard-hb-body .dashboard-main {
    padding: clamp(34px, 4vw, 56px);
    border-right: none;
}

.dashboard-hb-body .dashboard-next-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-content: center;
    align-items: start;
    padding: 24px;
    border: 1px solid rgba(176, 73, 44, 0.42);
    background:
        linear-gradient(180deg, rgba(252, 250, 244, 0.96), rgba(244, 241, 232, 0.96));
}

.dashboard-hb-body .dashboard-next-card .dashboard-primary-link {
    margin-top: 10px;
    width: fit-content;
}
.dashboard-hb-body .dashboard-daily-card {
    border: var(--hb-rule-warm);
    background: var(--hb-card);
}

.dashboard-hb-body .dashboard-daily-card {
    display: grid;
    grid-template-columns: auto minmax(0, 0.82fr) minmax(340px, 1fr);
    gap: 18px;
    align-items: center;
    max-width: 1180px;
    margin: 30px auto 0;
    padding: 22px 24px;
    border-top: 4px solid rgba(94, 122, 79, 0.72);
    border-left: 1px solid rgba(94, 122, 79, 0.35);
    background:
        linear-gradient(90deg, rgba(94, 122, 79, 0.13), transparent 58%),
        var(--hb-card);
}

.dashboard-hb-body .dashboard-daily-card h2 {
    margin: 0;
    font-family: var(--hb-serif);
    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
    color: var(--hb-ink);
}

.dashboard-hb-body .dashboard-daily-card p {
    margin: 8px 0 0;
    color: var(--hb-ink-mid);
    line-height: 1.6;
}

.dashboard-hb-body .dashboard-daily-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 10px;
    align-items: end;
}

.dashboard-hb-body .dashboard-daily-form label {
    display: grid;
    gap: 6px;
    color: var(--hb-ink-muted);
    font-family: var(--hb-mono);
    font-size: 9px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.dashboard-hb-body .dashboard-daily-form select,
.dashboard-hb-body .dashboard-daily-form input {
    width: 100%;
    min-height: 42px;
    border: var(--hb-rule-warm);
    border-radius: 0;
    background: var(--hb-paper-alt);
    color: var(--hb-ink);
    font-family: var(--hb-serif);
    font-size: 0.95rem;
    padding: 8px 10px;
}

.dashboard-hb-body .dashboard-daily-form button {
    min-height: 42px;
    border: 0;
    border-radius: 0;
    background: var(--hb-ink);
    color: var(--hb-off-white);
    cursor: pointer;
    font-family: var(--hb-mono);
    font-size: 9px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    padding: 0 16px;
}

.dashboard-hb-body .dashboard-daily-form button:hover {
    background: var(--hb-terra);
}

.dashboard-hb-body .dashboard-daily-feedback {
    grid-column: 3;
    margin: -4px 0 0;
    min-height: 22px;
    font-size: 0.88rem;
}

.dashboard-hb-body .dashboard-daily-feedback.is-correct {
    color: var(--hb-oliv);
    font-weight: 600;
}

.dashboard-hb-body .dashboard-daily-feedback.is-wrong {
    color: var(--hb-terra);
    font-weight: 600;
}

/* ================================================
   NAVBAR — Hauptbuch & Beleg Override
   ================================================ */

/* Vollbreiter Tinten-Balken, kein Glasmorphismus */
.dashboard-hb-body .app-navbar {
    background: #23201B;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
    font-family: var(--hb-serif);
    color: var(--hb-off-white);
    padding: 0 28px;
}

/* Logo bleibt (lockup-light.svg passt auf dunklem Grund) */
.dashboard-hb-body .nav-logo-image {
    width: clamp(170px, 16vw, 218px);
}

/* Nav-Links in Serif (nicht Mono!) — gedämpft, klar lesbar */
.dashboard-hb-body .nav-link {
    font-family: var(--hb-serif);
    font-size: 15px;
    font-weight: 400;
    color: #C9C2B2;
    transition: color 0.15s;
}
.dashboard-hb-body .nav-link:hover {
    color: var(--hb-off-white);
    transform: none;
}
.dashboard-hb-body .nav-link.active {
    color: var(--hb-off-white);
    font-weight: 500;
}

/* Aktiv-Unterstrich: Terrakotta statt Grün-Gradient */
.dashboard-hb-body .nav-link:not(.nav-summary).active::after,
.dashboard-hb-body .nav-link:not(.nav-summary):hover::after {
    background: var(--hb-terra);
    border-radius: 0;
}

/* Dropdown — warm dunkel, keine Rundungen, kein Blur */
.dashboard-hb-body .nav-dropdown {
    background: #2E2A22;
    border: 1px solid #3D3830;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 3px 3px 0 #0E0C09;
    padding: 6px;
}
.dashboard-hb-body .nav-dropdown-link {
    font-family: var(--hb-serif);
    font-size: 14px;
    color: #C9C2B2;
    border-radius: 0;
}
.dashboard-hb-body .nav-dropdown-link:hover {
    background: #3D3830;
    color: var(--hb-off-white);
}

/* Chevron-Pfeil in gedämpftem Ton */
.dashboard-hb-body .nav-summary::after {
    border-color: #8A8273;
}

/* Logout — Mono-Mikrolabel mit dünnem Rahmen */
.dashboard-hb-body .logout-btn {
    font-family: var(--hb-mono);
    font-size: 10px;
    letter-spacing: 1px;
    font-weight: 500;
    text-transform: uppercase;
    color: #9A9385;
    background: transparent;
    border: 1px solid #4A453B;
    border-radius: 0;
    padding: 6px 12px;
    cursor: pointer;
    transition: color 0.14s, border-color 0.14s;
}
.dashboard-hb-body .logout-btn:hover {
    color: var(--hb-off-white);
    background: transparent;
    border-color: #7A7468;
}

/* Mobile Navbar */
@media (max-width: 1100px) {
    .dashboard-hb-body .app-navbar {
        padding: 12px 18px;
    }
    .dashboard-hb-body .nav-dropdown {
        background: #2E2A22;
        box-shadow: none;
        margin-top: 8px;
        border-radius: 0;
    }
}

/* ================================================
   GAMIFICATION PANEL — Hauptbuch & Beleg Override
   Kontoauszug-Stil statt weißer Glascard
   ================================================ */

/* Kopf: Avatar + Label */

/* Mono-Kicker */

/* Serif-Titel */

/* Stats — wie eine Kontoauszug-Tabelle */

/* Fortschritt — linierte Leiste, kein Gradient */

/* Oliv statt Grün-zu-Gelb-Gradient */

/* Badges */

/* Profil-Link — Sekundär-Button */

/* Support-Hinweis */

/* ================================================
   FEEDBACK CTA — Hauptbuch & Beleg Override
   ================================================ */

.dashboard-hb-body .feedback-cta-link {
    font-family: var(--hb-mono);
    font-size: 10px;
    letter-spacing: 1px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--hb-card);
    background: var(--hb-terra);
    border: 0;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    padding: 12px 16px;
    width: min(290px, calc(100vw - 36px));
}
.dashboard-hb-body .feedback-cta-link::before {
    display: none;
}
.dashboard-hb-body .feedback-cta-link:hover {
    background: var(--hb-ink);
    box-shadow: none;
}

/* ================================================
   FOOTER — Hauptbuch & Beleg Override
   ================================================ */

.dashboard-hb-body .site-footer {
    background: var(--hb-paper);
    border-top: 2px solid var(--hb-ink);
    padding: 44px 28px 32px;
    margin-top: 60px;
}

/* Logo: dark filter für hellen Papiergrund */
.dashboard-hb-body .site-footer-logo img {
    filter: brightness(0) opacity(0.82);
    width: min(210px, 100%);
}

/* Beschreibungstext */
.dashboard-hb-body .site-footer-copy {
    font-family: var(--hb-serif);
    font-size: 14px;
    line-height: 1.7;
    color: var(--hb-ink-mid);
}

.dashboard-hb-body .site-footer-support {
    font-family: var(--hb-serif);
    font-size: 13px;
    color: var(--hb-ink-mid);
}
.dashboard-hb-body .site-footer-support a {
    color: var(--hb-ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.dashboard-hb-body .site-footer-support a:hover {
    color: var(--hb-terra);
}

/* Spaltenüberschriften: Mono-Label in Ocker */
.dashboard-hb-body .site-footer-column h2 {
    font-family: var(--hb-mono);
    font-size: 9px;
    letter-spacing: 2px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--hb-ocker);
    margin: 0 0 14px;
}

/* Links: Serif, gedämpfte Tinte — kein altes Grün, kein Mono */
.dashboard-hb-body .site-footer-column a {
    font-family: var(--hb-serif);
    font-size: 14px;
    color: #3d3830;
    text-decoration: none;
    line-height: 2.05;
    display: block;
    transition: color 0.14s;
}
.dashboard-hb-body .site-footer-column a:hover {
    color: var(--hb-terra);
    text-decoration: none;
}

/* Subzeile: ruhigstes Element, mono, 1px Trenner */
.dashboard-hb-body .site-footer-bottom {
    border-top: 1px solid var(--hb-border);
    margin-top: 24px;
    padding-top: 18px;
    font-family: var(--hb-mono);
    font-size: 10px;
    letter-spacing: 0.5px;
    color: #9A9385;
}
.dashboard-hb-body .site-footer-bottom a {
    font-family: var(--hb-mono);
    color: #9A9385;
    text-decoration: none;
    transition: color 0.14s;
}
.dashboard-hb-body .site-footer-bottom a:hover {
    color: var(--hb-ink);
}

/* ── Responsive ── */
@media (max-width: 1080px) {
    .dashboard-hb-body {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 18px 52px;
    }

    .dashboard-hb-body #navbar-container,
    .dashboard-hb-body .site-footer {
        grid-column: 1;
        width: calc(100% + 36px);
        margin-left: -18px;
        margin-right: -18px;
    }

    .dashboard-hb-body .dashboard-page {
        grid-column: 1;
        grid-row: 2;
        max-width: 860px;
    }

    .dashboard-hb-body .beta-info-stack {
        position: static;
        width: 100%;
        margin: 0 0 22px;
    }

    .dashboard-hb-body .site-footer {
        grid-row: 5;
        margin-top: 48px;
        margin-bottom: -52px;
    }

    .dashboard-hb-body .dashboard-shell {
        grid-template-columns: 1fr;
    }
    .dashboard-hb-body .dashboard-main {
        border-right: none;
        border-bottom: var(--hb-rule-warm);
    }
    .dashboard-hb-body .dashboard-news-panel {
        position: static;
    }
}

@media (max-width: 720px) {
    .dashboard-hb-body .dashboard-next-card {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .dashboard-hb-body .dashboard-primary-link {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 560px) {
    .dashboard-hb-body .dashboard-page {
        padding: 0 14px;
        margin-top: 28px;
    }
    .dashboard-hb-body .dashboard-main {
        padding: 28px 20px;
    }
    .dashboard-hb-body .dashboard-news-panel {
        padding: 24px 20px;
    }
}

@media (max-width: 1520px) and (min-width: 1081px) {
    .dashboard-hb-body {
        grid-template-columns: minmax(0, 1fr);
        padding-inline: 18px;
    }

    .dashboard-hb-body .dashboard-page {
        margin-top: 36px;
    }

}

@media (max-width: 1240px) and (min-width: 1081px) {
    .dashboard-hb-body .dashboard-page {
        grid-column: 1;
    }

    .dashboard-hb-body .dashboard-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-hb-body .dashboard-main {
        border-right: none;
        border-bottom: var(--hb-rule-warm);
    }

    .dashboard-hb-body .dashboard-news-panel {
        position: static;
    }
}

@media (max-width: 1180px) {

    .dashboard-hb-body .dashboard-daily-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .dashboard-hb-body .dashboard-daily-form {
        grid-column: 1 / -1;
    }

    .dashboard-hb-body .dashboard-daily-feedback {
        grid-column: 1 / -1;
        margin-top: 0;
    }
}

@media (max-width: 760px) {

    .dashboard-hb-body .dashboard-daily-card {
        grid-template-columns: 1fr;
    }

    .dashboard-hb-body .dashboard-daily-form {
        grid-template-columns: 1fr;
    }

    .dashboard-hb-body .dashboard-daily-form button {
        width: 100%;
    }
}

/* ============================================================
   Dashboard: Karten mit farbiger Kopfleiste
   Jede Karte sagt in der Kopfleiste, was sie ist. Die Farbe ist
   die Zuordnung, nicht Dekoration — Terrakotta führt (nächster
   Schritt), Oliv steht für Erledigtes, Ocker für Neuigkeiten,
   Blau für das tägliche Üben. Alle vier Töne sind bereits im
   Farbschema; es kommt keiner dazu.
   ============================================================ */

.dashboard-hb-body .dashboard-shell {
    background: transparent;
    border: 0;
    gap: 20px;
    padding: 0;
}

.dashboard-hb-body .dashboard-intro {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 2px;
}

.dashboard-hb-body .dashboard-standing {
    margin: 0;
    font-family: var(--hb-mono);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    color: var(--hb-ink-mid);
}

.dashboard-hb-body .dashboard-row {
    display: grid;
    gap: 20px;
    align-items: start;
}

.dashboard-hb-body .dashboard-row-progress {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
}

.dashboard-hb-body .dashboard-row-practice {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

/* ── Karte ───────────────────────────────────────────────── */

.dashboard-hb-body .dash-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    border: var(--hb-rule-warm);
    background: var(--hb-card);
}

.dashboard-hb-body .dash-card-head {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    align-items: baseline;
    justify-content: space-between;
    padding: 9px 18px;
    background: var(--hb-ink);
}

.dashboard-hb-body .dash-card-kicker,
.dashboard-hb-body .dash-card-where {
    margin: 0;
    font-family: var(--hb-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dashboard-hb-body .dash-card-kicker {
    color: #FCFAF4;
    font-weight: 700;
}

.dashboard-hb-body .dash-card-where {
    color: rgba(252, 250, 244, 0.76);
}

.dashboard-hb-body .dash-card-where:empty {
    display: none;
}

.dashboard-hb-body .dash-card-body {
    padding: 20px 22px 22px;
}

.dashboard-hb-body .dash-card-next .dash-card-head    { background: var(--hb-terra); }
.dashboard-hb-body .dash-card-done .dash-card-head    { background: var(--hb-oliv); }
.dashboard-hb-body .dash-card-path .dash-card-head    { background: var(--hb-oliv); }
.dashboard-hb-body .dash-card-news .dash-card-head    { background: var(--hb-ocker); }
.dashboard-hb-body .dash-card-daily .dash-card-head   { background: var(--hb-blue); }
.dashboard-hb-body .dash-card-knowledge .dash-card-head { background: var(--hb-blue); }

/* ── Nächster Schritt: die führende Karte ────────────────── */

.dashboard-hb-body .dash-card-next {
    border: 2px solid var(--hb-terra);
}

.dashboard-hb-body .dashboard-next-topic {
    margin: 0 0 4px;
    font-family: var(--hb-mono);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hb-terra);
}

.dashboard-hb-body .dashboard-next-topic:empty {
    display: none;
}

.dashboard-hb-body .dash-card-next h2 {
    margin: 0 0 8px;
    font-family: var(--hb-serif);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--hb-ink);
}

.dashboard-hb-body .dash-card-next p {
    margin: 0 0 18px;
    max-width: 62ch;
    color: var(--hb-ink-mid);
}

/* ── Das hast du geschafft ───────────────────────────────── */

.dashboard-hb-body .dashboard-stats {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.dashboard-hb-body .dashboard-stats li {
    display: grid;
    gap: 1px;
}

.dashboard-hb-body .dashboard-stats strong {
    font-family: var(--hb-serif);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--hb-oliv);
    line-height: 1.1;
}

.dashboard-hb-body .dashboard-stats span {
    color: var(--hb-ink-mid);
    font-size: 0.86rem;
}

.dashboard-hb-body .dashboard-recent {
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--hb-border);
    color: var(--hb-ink-muted);
    font-size: 0.82rem;
}

/* ── Dein Weg ────────────────────────────────────────────── */

.dashboard-hb-body .dashboard-rail {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1px;
    background: var(--hb-border);
    border: 1px solid var(--hb-border);
}

.dashboard-hb-body .dashboard-rail-row > a {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(80px, 1.1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 12px 14px;
    background: var(--hb-card);
    color: var(--hb-ink);
    text-decoration: none;
}

.dashboard-hb-body .dashboard-rail-row > a:hover {
    background: var(--hb-paper);
}

.dashboard-hb-body .dashboard-rail-label {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.dashboard-hb-body .dashboard-rail-label b {
    font-family: var(--hb-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hb-ink-muted);
}

.dashboard-hb-body .dashboard-rail-label small {
    font-family: var(--hb-serif);
    font-size: 0.94rem;
    color: var(--hb-ink);
}

.dashboard-hb-body .dashboard-rail-bar {
    height: 8px;
    background: var(--hb-border);
}

.dashboard-hb-body .dashboard-rail-bar > span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--hb-oliv);
}

.dashboard-hb-body .dashboard-rail-row.is-done .dashboard-rail-bar > span {
    background: var(--hb-terra);
}

.dashboard-hb-body .dashboard-rail-row.is-planned .dashboard-rail-bar {
    visibility: hidden;
}

.dashboard-hb-body .dashboard-rail-count {
    font-family: var(--hb-mono);
    font-size: 0.76rem;
    color: var(--hb-ink-mid);
    white-space: nowrap;
}

/* ── Neu & Updates ───────────────────────────────────────── */

.dashboard-hb-body .dash-card-news .dashboard-version-slot {
    font-family: var(--hb-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: rgba(252, 250, 244, 0.86);
}

.dashboard-hb-body .dashboard-news-list {
    display: grid;
    gap: 1px;
    background: var(--hb-border);
    border: 1px solid var(--hb-border);
}

.dashboard-hb-body .dashboard-news-item {
    padding: 14px 16px;
    background: var(--hb-card);
}

.dashboard-hb-body .dashboard-news-meta {
    display: flex;
    gap: 12px;
    margin-bottom: 4px;
    font-family: var(--hb-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hb-ocker);
}

.dashboard-hb-body .dashboard-news-item h3,
.dashboard-hb-body .dashboard-news-item h4 {
    margin: 0 0 4px;
    font-family: var(--hb-serif);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--hb-ink);
}

.dashboard-hb-body .dashboard-news-item p {
    margin: 0;
    color: var(--hb-ink-mid);
    font-size: 0.9rem;
    line-height: 1.55;
}

/* ── Aufgabe des Tages ───────────────────────────────────── */

.dashboard-hb-body .dash-card-daily .dash-card-body {
    display: grid;
    gap: 14px;
}

.dashboard-hb-body .dashboard-daily-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 10px;
    align-items: end;
}

.dashboard-hb-body .dashboard-daily-form label {
    display: grid;
    gap: 4px;
    font-family: var(--hb-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hb-ink-muted);
}

.dashboard-hb-body .dashboard-daily-form select,
.dashboard-hb-body .dashboard-daily-form input {
    width: 100%;
    padding: 8px 9px;
    border: 1px solid var(--hb-border);
    border-radius: 0;
    background: var(--hb-paper-alt);
    color: var(--hb-ink);
    font-family: var(--hb-serif);
    font-size: 0.92rem;
}

.dashboard-hb-body .dashboard-daily-form button {
    padding: 9px 14px;
    border: 0;
    background: var(--hb-ink);
    color: #FCFAF4;
    font-family: var(--hb-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}

.dashboard-hb-body .dashboard-daily-form button:hover {
    background: var(--hb-terra);
}

.dashboard-hb-body .dashboard-daily-feedback:empty {
    display: none;
}

/* ── Wissen des Tages ────────────────────────────────────── */

.dashboard-hb-body .dash-card-knowledge .dash-card-body {
    display: grid;
    align-content: start;
    gap: 8px;
}

.dashboard-hb-body .dashboard-tip-title {
    margin: 0;
    font-family: var(--hb-serif);
    font-size: 1.14rem;
    font-weight: 600;
    color: var(--hb-ink);
}

.dashboard-hb-body .dash-card-knowledge p {
    margin: 0;
    color: var(--hb-ink-mid);
    font-size: 0.9rem;
    line-height: 1.55;
}

.dashboard-hb-body .dashboard-tip-link {
    justify-self: start;
    margin-top: 6px;
    font-family: var(--hb-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hb-blue);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

/* ── Werkzeuge ───────────────────────────────────────────── */

.dashboard-hb-body .dash-card-tools .dash-card-head {
    background: var(--hb-ink);
}

.dashboard-hb-body .dashboard-tool-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    background: var(--hb-border);
    border: 1px solid var(--hb-border);
}

.dashboard-hb-body .dashboard-tool-list a {
    display: grid;
    gap: 1px;
    height: 100%;
    padding: 11px 14px;
    background: var(--hb-card);
    color: var(--hb-ink);
    text-decoration: none;
}

.dashboard-hb-body .dashboard-tool-list a:hover {
    background: var(--hb-paper);
}

.dashboard-hb-body .dashboard-tool-list strong {
    font-family: var(--hb-serif);
    font-size: 0.96rem;
    font-weight: 600;
}

.dashboard-hb-body .dashboard-tool-list small {
    color: var(--hb-ink-muted);
    font-size: 0.8rem;
}

@media (max-width: 1080px) {
    .dashboard-hb-body .dashboard-row-progress,
    .dashboard-hb-body .dashboard-row-practice {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Der einladende Hebel
   Die Karte "nächster Schritt" ist der einzige Ort, an dem die
   Seite laut wird: großer Titel, Maskottchen als Blickfang,
   ein sichtbar nahes Ziel und ein Knopf, der wie einer aussieht.
   Alles andere bleibt ruhig — sonst gibt es keinen Vordergrund.
   ============================================================ */

.dashboard-hb-body .dashboard-standing {
    display: grid;
    justify-items: end;
    gap: 5px;
    min-width: 190px;
}

.dashboard-hb-body .dashboard-standing-line {
    margin: 0;
    font-family: var(--hb-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--hb-ink-mid);
}

.dashboard-hb-body .dashboard-level-track {
    width: 100%;
    height: 5px;
    background: var(--hb-border);
}

.dashboard-hb-body .dashboard-level-track > span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--hb-terra);
    transition: width 0.6s ease;
}

.dashboard-hb-body .dashboard-level-rest {
    margin: 0;
    font-family: var(--hb-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: var(--hb-ink-muted);
}

/* Kopfleisten waren zu leise: kleiner Grad, dünn, viel Sperrung. */
.dashboard-hb-body .dash-card-kicker {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

/* ── Die Hero-Karte ──────────────────────────────────────── */

.dashboard-hb-body .dashboard-next-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: 26px 26px 28px;
    background:
        radial-gradient(circle at 88% 40%, rgba(176, 73, 44, 0.09), transparent 58%),
        var(--hb-card);
}

.dashboard-hb-body .dashboard-next-copy {
    min-width: 0;
}

.dashboard-hb-body .dash-card-next h2 {
    margin: 0 0 10px;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.08;
}

.dashboard-hb-body .dashboard-next-text {
    margin: 0 0 14px;
    max-width: 56ch;
    font-size: 1rem;
    line-height: 1.55;
}

/* Zwei kurze Marken statt eines Fließtexts: Was für eine Übung ist das,
   und an welcher Stelle des Levels stehe ich. */
.dashboard-hb-body .dashboard-next-marks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.dashboard-hb-body .dashboard-next-marks li {
    padding: 4px 11px;
    border: 1px solid var(--hb-border);
    background: var(--hb-paper);
    font-family: var(--hb-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hb-ink-mid);
}

.dashboard-hb-body .dashboard-next-marks li:empty {
    display: none;
}

.dashboard-hb-body .dashboard-next-action {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
}

.dashboard-hb-body .dash-card-next .dashboard-primary-link {
    display: inline-block;
    padding: 13px 26px;
    border: 0;
    background: var(--hb-terra);
    color: #FCFAF4;
    font-family: var(--hb-mono);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 4px 4px 0 rgba(35, 32, 27, 0.22);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.dashboard-hb-body .dash-card-next .dashboard-primary-link:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 rgba(35, 32, 27, 0.26);
}

.dashboard-hb-body .dash-card-next .dashboard-primary-link:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 rgba(35, 32, 27, 0.2);
}

/* Das nahe Ziel: "Noch 5 Übungen, dann steht Level 5." Ein erreichbarer
   Abstand zieht stärker als ein Gesamtprozentsatz. */
.dashboard-hb-body .dashboard-next-goal {
    margin: 0;
    font-family: var(--hb-serif);
    font-size: 0.94rem;
    font-style: italic;
    color: var(--hb-terra);
}

.dashboard-hb-body .dashboard-next-goal:empty {
    display: none;
}

.dashboard-hb-body .dashboard-next-mascot {
    margin: 0;
    width: clamp(120px, 14vw, 176px);
}

.dashboard-hb-body .dashboard-next-mascot img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 760px) {
    .dashboard-hb-body .dashboard-next-body {
        grid-template-columns: 1fr;
    }

    .dashboard-hb-body .dashboard-next-mascot {
        display: none;
    }

    .dashboard-hb-body .dashboard-intro,
    .dashboard-hb-body .dashboard-standing {
        justify-items: start;
    }
}

/* ── Einmalige Werbe-Erinnerung ────────────────────────────────────────────
   Ein Hinweis, kein Sperrfenster. Er steht oben, ist deutlich sichtbar und
   lässt sich mit einem Klick beenden — in beide Richtungen gleich leicht.
   Beide Knöpfe haben deshalb dasselbe Gewicht: Ein grosses „Ja" neben einem
   blassen „Nein" wäre eine gelenkte Entscheidung, und eine gelenkte
   Einwilligung ist angreifbar.                                              */

.dashboard-hb-body .dash-einwilligung {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 26px;
  margin-bottom: 22px;
  padding: 20px 46px 20px 22px;
  border: 1px solid var(--hb-border);
  border-left: 5px solid var(--hb-blue);
  background: var(--hb-card);
}

.dashboard-hb-body .dash-einwilligung-inhalt { flex: 1 1 min(420px, 100%); }

.dashboard-hb-body .dash-einwilligung-marke {
  margin: 0 0 6px;
  font-family: var(--hb-mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* #185FA5 auf #FCFAF4 ergibt 6,25:1. */
  color: var(--hb-blue);
}

.dashboard-hb-body .dash-einwilligung h2 {
  margin: 0 0 8px;
  font-family: var(--hb-serif);
  font-size: 1.24rem;
  line-height: 1.3;
  color: var(--hb-ink);
}

.dashboard-hb-body .dash-einwilligung p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--hb-ink-mid);
}

.dashboard-hb-body .dash-einwilligung-klein {
  margin-top: 8px !important;
  font-size: .82rem !important;
  color: var(--hb-ink-muted) !important;
}

.dashboard-hb-body .dash-einwilligung-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Gleiche Grösse, gleiche Form. Nur die Füllung unterscheidet sie, damit man
   sie auseinanderhält — nicht, um eine davon zu bevorzugen. */
.dashboard-hb-body .dash-einwilligung-ja,
.dashboard-hb-body .dash-einwilligung-nein {
  min-width: 132px;
  padding: 11px 18px;
  border: 1px solid var(--hb-blue);
  font-family: var(--hb-mono);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
}

.dashboard-hb-body .dash-einwilligung-ja {
  background: var(--hb-blue);
  color: #FCFAF4;                /* 6,25:1 */
}

.dashboard-hb-body .dash-einwilligung-nein {
  background: transparent;
  color: var(--hb-blue);         /* 6,25:1 auf der Karte */
}

.dashboard-hb-body .dash-einwilligung-ja:hover,
.dashboard-hb-body .dash-einwilligung-nein:hover { opacity: .88; }

.dashboard-hb-body :is(.dash-einwilligung-ja, .dash-einwilligung-nein, .dash-einwilligung-schliessen):focus-visible {
  outline: 2px solid var(--hb-terra);
  outline-offset: 2px;
}

.dashboard-hb-body .dash-einwilligung-schliessen {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 4px 8px;
  border: 0;
  background: none;
  color: var(--hb-ink-muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.dashboard-hb-body .dash-einwilligung-schliessen:hover { color: var(--hb-ink); }

.dashboard-hb-body .dash-einwilligung.ist-beantwortet {
  border-left-color: var(--hb-oliv);
  padding: 16px 22px;
}

.dashboard-hb-body .dash-einwilligung-danke {
  margin: 0;
  font-size: .92rem;
  color: var(--hb-ink-mid);
}

@media (max-width: 620px) {
  .dashboard-hb-body .dash-einwilligung { padding: 18px 40px 18px 16px; }
  .dashboard-hb-body .dash-einwilligung-knoepfe { width: 100%; }
  .dashboard-hb-body :is(.dash-einwilligung-ja, .dash-einwilligung-nein) { flex: 1 1 auto; }
}

/* ══════════════════════════════════════════════════════════════════
   KACHELSYSTEM (Dashboard, ab 14.09.2026)

   Ersetzt die frühere Kartenfolge. Der Aufbau folgt der Reihenfolge, in der
   jemand das Dashboard liest: Was ist neu — was gibt es zum Mitnehmen — wo
   war ich — wohin kann ich. Rechts, dauerhaft sichtbar, das freie Üben.

   FORMEN, und zwar absichtlich zwei:
     Auswahlkacheln sind QUADRATE (aspect-ratio: 1). Ein Quadrat ist ein
     Knopf — gleiches Gewicht in beide Richtungen, nichts drängt.
     Beschriftung und freies Üben sind HOCHKANT. Sie sind keine Auswahl,
     sondern Rahmen und Dauerangebot; die andere Form sagt das ohne Worte.

   FARBE: Verläufe aus der Hausfamilie — Oliv, Petrol, Bilanz-Blau, Ocker,
   Terrakotta. Die Semesterfolge läuft von Grün nach Terrakotta und bildet
   damit den Weg vom Anfang zum Fortgeschrittenen ab.

   WEISS AUF FARBE, NACHGERECHNET. Jeder Verlauf wurde am HELLSTEN Punkt
   geprüft, nicht am Durchschnitt: Genau dort steht im Zweifel die Schrift.
   Zwei Verläufe (Grün, Ocker) mussten dafür nachgedunkelt werden, alle
   liegen jetzt über 4,5 : 1.

   SCHRIFT: Outfit für Beschriftungen, Lora bleibt Fliesstext der Seite.
   Eine geometrische Grotesk trägt auf farbigem Grund besser als eine
   Serife — und gibt den Kacheln das, was eine Tabelle nicht braucht.
   ══════════════════════════════════════════════════════════════════ */

.dashboard-hb-body .kachel-raster {
    --kachel-luft: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 290px);
    gap: var(--kachel-luft);
    /* KEINE EIGENE BREITE MEHR. Der erste Versuch zäumte nur das Raster auf
       980px — dann stand es linksbündig unter einer 1480px breiten Kopfzeile,
       und rechts klaffte ein Drittel der Seite leer. Die Breite gehört der
       ganzen Seite, nicht einem Block darin: dashboard-page ist schmaler
       gesetzt, Kopf und Kacheln teilen sie sich und stehen zusammen mittig. */
    margin-top: 22px;
}

/* PLATZIERUNG VON HAND, nicht dem Automatismus überlassen:
   Zeile 1  Meldung, über beide Spalten
   Zeile 2  Themenheft links  ·  freies Üben rechts, über zwei Zeilen
   Zeile 3  die Kachelreihen links

   Das Themenheft sass zuerst über die volle Breite und war damit der grösste
   Block der Seite — für eine Beilage zu viel Gewicht. In der Hauptspalte ist
   es schmaler, und seine rechte Kante steht auf derselben Rasterlinie wie die
   Kacheln darunter. Der frei werdende Platz rechts geht nicht verloren: Die
   hohe Kachel beginnt jetzt eine Zeile früher. */
.dashboard-hb-body .kachel-news { grid-column: 1 / -1; grid-row: 1; }
.dashboard-hb-body .kachel-heft { grid-column: 1; grid-row: 3; }
.dashboard-hb-body .kachel-hauptspalte { grid-column: 1; grid-row: 4; }
/* Bis zum 25.09.2026 spannte die Kachel über beide Zeilen (2 / 4) und war
   darunter zur Hälfte leer — eine dunkle Fläche ohne Inhalt. Jetzt endet
   sie mit der Themenheft-Zeile und trägt stattdessen den Expert-Hinweis. */
.dashboard-hb-body .kachel-buchungssaetze { grid-column: 2; grid-row: 3; }
/* Die Arbeitsblätter füllen die rechte Spalte neben den Kachelreihen.
   `align-self: start`, damit sie nicht auf die Höhe der Hauptspalte
   gestreckt werden. */
.dashboard-hb-body .kachel-blaetter { grid-column: 2; grid-row: 4; align-self: start; }
/* Zeile 2, über beide Spalten — direkt unter der Meldungszeile. */
.dashboard-hb-body .kachel-expertband { grid-column: 1 / -1; grid-row: 2; }

.dashboard-hb-body .kachel-hauptspalte {
    display: grid;
    gap: var(--kachel-luft);
    min-width: 0;
}

.dashboard-hb-body .kachel-reihe {
    display: grid;
    gap: var(--kachel-luft);
    min-width: 0;
}
.dashboard-hb-body .kachel-reihe-drei {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* ÜBERSCHRIFT STATT SPALTE.
   „Anfänger" und „Fortgeschritten" standen zuerst als schmale Kachel VOR der
   Reihe. Das rückte beide Semesterreihen gegenüber der Reihe darüber ein —
   im Bild sofort zu sehen: Die Aktionskacheln begannen links, die Semester
   erst ein Stück weiter rechts. Als Überschrift über der Reihe stehen alle
   Kanten wieder untereinander.

   Wenig Farbe, aber klar eine Überschrift: Versalien, weiter Sperrung, ein
   kurzer Strich in der Farbe der Reihe darunter. */
.dashboard-hb-body .kachel-ueberschrift {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 6px 0 -4px;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.dashboard-hb-body .kachel-ueberschrift::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: .28;
}
/* Gedunkelte Töne: Oliv in Hausstärke läge bei 4,25 : 1 und damit unter der
   Schwelle — für 11px zu wenig. */
.dashboard-hb-body .kachel-ueberschrift.ist-anfang          { color: #4A6440; }
.dashboard-hb-body .kachel-ueberschrift.ist-fortgeschritten { color: #93321C; }

/* ── Grundform ────────────────────────────────────────────────── */

.dashboard-hb-body .kachel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    margin: 0;
    padding: 15px 16px;
    border: var(--hb-rule-warm);
    border-radius: 0;
    background: var(--hb-card);
    color: var(--hb-ink);
    text-decoration: none;
    overflow: hidden;
}

.dashboard-hb-body a.kachel { transition: transform .14s, box-shadow .14s, filter .14s; }
.dashboard-hb-body a.kachel:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(35, 32, 27, .16);
}
.dashboard-hb-body a.kachel:focus-visible {
    outline: 3px solid var(--hb-ink);
    outline-offset: 3px;
}
.dashboard-hb-body a.kachel:hover .kachel-pfeil { transform: translateX(4px); }

.dashboard-hb-body .kachel-marke {
    display: flex;
    gap: 8px;
    align-items: baseline;
    justify-content: space-between;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hb-ink-mid);
}

.dashboard-hb-body .kachel-titel {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.18;
    color: var(--hb-ink);
}

.dashboard-hb-body .kachel-unter {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--hb-ink-mid);
}

.dashboard-hb-body .kachel-pfeil {
    margin-top: auto;
    padding-top: 6px;
    font-size: 15px;
    line-height: 1;
    color: var(--hb-ink-mid);
    transition: transform .14s;
}

/* ── Farbige Kacheln: alles darin wird weiss ──────────────────── */

.dashboard-hb-body .kachel.ist-farbig,
.dashboard-hb-body .kachel.ist-farbig .kachel-titel,
.dashboard-hb-body .kachel.ist-farbig .kachel-unter,
.dashboard-hb-body .kachel.ist-farbig .kachel-marke,
.dashboard-hb-body .kachel.ist-farbig .kachel-pfeil,
.dashboard-hb-body .kachel.ist-farbig .kachel-semester-nr,
.dashboard-hb-body .kachel.ist-farbig .kachel-semester-titel,
.dashboard-hb-body .kachel.ist-farbig .kachel-semester-stand {
    color: #FFFFFF;
    border-color: transparent;
}
/* KEINE DECKKRAFT UNTER 1 auf farbigem Grund. Der erste Entwurf dämpfte den
   Unterton auf 0.88 — nachgerechnet fiel er damit auf fünf von acht Verläufen
   unter 4,5 : 1, am schlimmsten auf Petrol (3,88). Weiss bleibt Weiss; die
   Abstufung macht Schriftgrad und -stärke, nicht Transparenz. */
.dashboard-hb-body .kachel.ist-farbig .kachel-unter,
.dashboard-hb-body .kachel.ist-farbig .kachel-semester-stand { font-weight: 400; }

/* ── Kopfkachel: die jüngste Meldung ──────────────────────────── */

.dashboard-hb-body .kachel-news {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 15px 18px;
    background: linear-gradient(100deg, #FBF8EF 0%, #F4F1E8 100%);
    border-left: 4px solid var(--hb-terra);
}
.dashboard-hb-body .kachel-news .kachel-marke {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
.dashboard-hb-body .kachel-news-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.dashboard-hb-body .kachel-news-text strong {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
}
/* Einzeilig: Die Kopfkachel ist ein Hinweis, kein Beitrag. */
.dashboard-hb-body .kachel-news-text span {
    overflow: hidden;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--hb-ink-mid);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dashboard-hb-body .kachel-news .kachel-pfeil { margin: 0 0 0 auto; padding: 0; }

/* ── Themenheft: bringt seinen eigenen Rahmen mit ─────────────── */

/* Die Beilage wird kleiner — aber NUR hier. heft-download.css gilt auch auf
   der Lernübersicht; eine Änderung dort träfe eine Seite mit, die niemand
   angesehen hat. */
.dashboard-hb-body .kachel-heft { min-width: 0; }

.dashboard-hb-body .kachel-heft .heft-block {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 15px;
    padding: 14px;
    border-radius: 0;
}
.dashboard-hb-body .kachel-heft .heft-umschlag { box-shadow: 0 4px 12px rgba(35, 32, 27, .16); }
.dashboard-hb-body .kachel-heft .heft-marke  { margin-bottom: 4px; font-size: .62rem; }
.dashboard-hb-body .kachel-heft .heft-titel  { margin-bottom: 5px; font-size: 1.05rem; }
.dashboard-hb-body .kachel-heft .heft-text {
    margin-bottom: 10px;
    font-size: .84rem;
    line-height: 1.45;
    /* Drei Zeilen reichen: Der Werbetext soll neugierig machen, nicht
       das Heft ersetzen. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dashboard-hb-body .kachel-heft .heft-aktion { margin-bottom: 8px; }

/* ── Auswahlkacheln: Quadrate ─────────────────────────────────── */

.dashboard-hb-body .kachel-gross,
.dashboard-hb-body .kachel-semester {
    aspect-ratio: 1 / 1;
    justify-content: flex-start;
}

.dashboard-hb-body .kachel-weiter    { background: linear-gradient(150deg, #8F3A22 0%, #B0492C 100%); }
.dashboard-hb-body .kachel-lernen    { background: linear-gradient(150deg, #12497E 0%, #185FA5 100%); }
.dashboard-hb-body .kachel-ueben     { background: linear-gradient(150deg, #3F5636 0%, #5E7A4F 100%); }

.dashboard-hb-body .kachel-gross .kachel-titel { font-size: 18px; }

/* ABSCHNEIDEN STATT ÜBERLAUFEN. Ein Quadrat hat eine feste Höhe, der Titel
   des Speicherpunkts kommt aber aus getNextStep und kann lang sein
   („Die Grundlagen an Fällen anwenden"). Ohne Begrenzung schnitte
   overflow: hidden ihn mitten im Wort ab; so endet er auf einer Zeile mit
   Auslassungspunkten. */
.dashboard-hb-body .kachel-gross .kachel-titel,
.dashboard-hb-body .kachel-semester-titel,
.dashboard-hb-body .kachel.ist-farbig .kachel-unter {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dashboard-hb-body .kachel-gross .kachel-titel { -webkit-line-clamp: 2; }
.dashboard-hb-body .kachel-semester-titel      { -webkit-line-clamp: 2; }
.dashboard-hb-body .kachel.ist-farbig .kachel-unter { -webkit-line-clamp: 2; }
/* Die hohe Kachel hat Platz genug und braucht keine Begrenzung. */
.dashboard-hb-body .kachel-buchungssaetze .kachel-titel,
.dashboard-hb-body .kachel-buchungssaetze .kachel-unter {
    display: block;
    overflow: visible;
}


/* ── Semesterkacheln ──────────────────────────────────────────── */

.dashboard-hb-body .kachel-semester { gap: 5px; }

.dashboard-hb-body .kachel-semester-nr {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hb-ink-mid);
}
.dashboard-hb-body .kachel-semester-titel {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1.22;
    color: var(--hb-ink);
}
.dashboard-hb-body .kachel-semester-balken {
    height: 5px;
    margin-top: auto;
    background: rgba(255, 255, 255, .28);
}
.dashboard-hb-body .kachel-semester-balken > span {
    display: block;
    width: 0;
    height: 100%;
    background: #FFFFFF;
}
.dashboard-hb-body .kachel-semester-stand {
    margin-top: 6px;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--hb-ink-mid);
}

/* Die Folge von Grün nach Terrakotta: der Weg vom Anfang zum
   Fortgeschrittenen, in Farbe erzählt. */
.dashboard-hb-body .kachel-semester-1 { background: linear-gradient(150deg, #2C6144 0%, #3F7A57 100%); }
.dashboard-hb-body .kachel-semester-2 { background: linear-gradient(150deg, #1C5A5E 0%, #2F8286 100%); }
.dashboard-hb-body .kachel-semester-3 { background: linear-gradient(150deg, #174E86 0%, #2A72B4 100%); }
.dashboard-hb-body .kachel-semester-4 { background: linear-gradient(150deg, #8A5C38 0%, #96663F 100%); }
.dashboard-hb-body .kachel-semester-5 { background: linear-gradient(150deg, #8F3A22 0%, #B0492C 100%); }

/* Geplant: sichtbar, aber erkennbar noch ohne Inhalt. Gedämpft statt
   versteckt — wer wissen will, was kommt, soll es sehen. */
.dashboard-hb-body .kachel-semester.ist-geplant {
    background: linear-gradient(150deg, #F4F1E8 0%, #EDE8DB 100%);
    border-style: dashed;
    border-color: var(--hb-border);
    cursor: default;
}
.dashboard-hb-body .kachel-semester.ist-geplant .kachel-semester-nr,
.dashboard-hb-body .kachel-semester.ist-geplant .kachel-semester-titel,
.dashboard-hb-body .kachel-semester.ist-geplant .kachel-semester-stand {
    color: var(--hb-ink-mid);
}

/* ── Freies Üben: hochkant, die dunkelste Fläche der Seite ────── */

.dashboard-hb-body .kachel-buchungssaetze {
    gap: 12px;
    justify-content: flex-start;
    padding: 20px 20px 18px;
    background: linear-gradient(165deg, #241F1A 0%, #5E2A1A 55%, #8F3A22 100%);
    border-color: transparent;
}
.dashboard-hb-body .kachel-buchungssaetze .kachel-titel {
    font-size: 27px;
    font-weight: 700;
    line-height: 1.1;
}

/* ── Schmaler ─────────────────────────────────────────────────── */

@media (max-width: 1040px) {
    /* Eine Spalte: Die Handplatzierung muss dann weg, sonst bleiben die
       zugewiesenen Zeilen und Spalten stehen und reissen Löcher. */
    .dashboard-hb-body .kachel-raster { grid-template-columns: minmax(0, 1fr); }
    .dashboard-hb-body .kachel-news,
    .dashboard-hb-body .kachel-expertband,
    .dashboard-hb-body .kachel-heft,
    .dashboard-hb-body .kachel-hauptspalte,
    .dashboard-hb-body .kachel-buchungssaetze,
    .dashboard-hb-body .kachel-blaetter {
        grid-column: 1;
        grid-row: auto;
    }
    .dashboard-hb-body .kachel-buchungssaetze { min-height: 190px; }
}

@media (max-width: 760px) {
    .dashboard-hb-body .kachel-raster { --kachel-luft: 13px; }
    /* Quadrate zu zweit statt zu dritt: Drei Quadrate nebeneinander sind auf
       dem Telefon so klein, dass die Beschriftung nicht mehr hineinpasst. */
    .dashboard-hb-body .kachel-reihe-drei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-hb-body .kachel-gross .kachel-titel { font-size: 22px; }
    .dashboard-hb-body .kachel-semester-titel { font-size: 15px; }
    .dashboard-hb-body .kachel-news { flex-wrap: wrap; gap: 12px; }
    .dashboard-hb-body .kachel-news-text span { white-space: normal; }
}

@media (max-width: 430px) {
    /* Unter 430px wird aus dem Quadrat ein flaches Rechteck: Ein Quadrat über
       die volle Breite wäre einen halben Bildschirm hoch. */
    .dashboard-hb-body .kachel-reihe-drei { grid-template-columns: minmax(0, 1fr); }
    .dashboard-hb-body .kachel-gross,
    .dashboard-hb-body .kachel-semester { aspect-ratio: auto; min-height: 118px; }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-hb-body a.kachel,
    .dashboard-hb-body .kachel-pfeil { transition: none; }
    .dashboard-hb-body a.kachel:hover { transform: none; }
}

/* ── Kachel mit Fähnchen „In Arbeit" ──────────────────────────────
   Das Fenster dazu kommt aus js/main.js (LEARNAPP_TEMP_DISABLED_TARGETS);
   hier steht nur, wie die Kachel es VOR dem Klick ankündigt. Ein eigener
   Dialog samt Knopf-Kachel stand hier bis zum 16.09.2026 und tat dasselbe
   ein zweites Mal. */
.dashboard-hb-body .kachel.ist-in-arbeit .kachel-pfeil { opacity: .55; }
.dashboard-hb-body .kachel.ist-in-arbeit .kachel-marke span:last-child {
    padding: 2px 7px;
    border: 1px solid currentColor;
    font-size: 9.5px;
    letter-spacing: .1em;
}


/* ══════════════════════════════════════════════════════════════════
   WERBUNG FÜR EXPERT — links neben der Kachelzone
   ══════════════════════════════════════════════════════════════════

   ZWEI DARSTELLUNGEN, EIN BAUSTEIN.

   Ab 1360px steht sie im linken Rand: Der Seitenkörper misst höchstens
   1480px, die Inhaltsspalte 960px — es bleiben also gut 250px je Seite,
   und davon nimmt die Werbung 210px. Darunter gäbe es diesen Rand nicht
   mehr, und statt sie auszublenden fällt sie in den Fluss zurück und
   legt sich quer über die Kachelzone. Ausblenden wäre das Naheliegende
   und das Falsche: Auf einem 1280er-Laptop sitzt genau die Zielgruppe.

   Warum absolut und nicht als Rasterspalte: Die Kachelzone ist ein
   gewachsenes zweispaltiges Raster mit festen Zeilenzuweisungen. Eine
   dritte Spalte einzuziehen hiesse, jede dieser Zuweisungen anzufassen —
   für ein Element, das auf den meisten Schirmen gar nicht dort steht.
   ────────────────────────────────────────────────────────────────── */






/* ── Breit: in den linken Rand, oben bündig mit der Themenheft-Karte ──

   NUR `top: 0`, KEIN `bottom`. Zwischendurch stand hier beides, damit die
   Werbung exakt so hoch würde wie die Karte daneben — das Ergebnis war,
   dass das Bild auf einen Streifen zusammengedrückt wurde, weil der Text
   darunter seinen Platz behielt. Jetzt bestimmt der Inhalt die Höhe: Das
   Bild bleibt gross, und der Kasten reicht von der Themenheft-Karte bis
   etwa ans Ende der ersten Kachelreihe.

   Bezug ist .kachel-heft, nicht das Raster — deshalb steht die Werbung im
   DOM auch dort drin. Am Raster hinge ihr oberer Rand an der Höhe der
   Meldungszeile, und die ändert sich mit jeder neuen Meldung. */
@media (min-width: 1360px) {
    .dashboard-hb-body .kachel-heft { position: relative; }
}

/* ── Quer über der Zone: Bild links, Text rechts ── */
@media (min-width: 620px) and (max-width: 1359px) {
}


/* ── Expert-Hinweis in der Kachel „Buchungssätze üben" ───────────────

   Auf der dunkelsten Fläche der Seite, also mit hellen Werten. Der obere
   Strich trennt ihn vom Werbetext darüber, ohne einen zweiten Kasten
   aufzumachen — dritte Kernregel: Hierarchie aus Linien, nicht aus
   Rahmen.

   `margin-top: auto` schiebt ihn an den unteren Rand: Die Kachel ist ein
   Flex-Element, und der Hinweis soll unten stehen, egal wie lang der Text
   darüber umbricht.

   WAPPEN OBEN, ZEILE DARUNTER — seit dem 26.09.2026. Vorher stand hier
   das Hörnchen im Talar neben einer vierteiligen Aufzählung. Beides ist
   raus: Das Hörnchen ist eine Figur und zog mehr Aufmerksamkeit auf sich
   als die Kachel selbst, und die Aufzählung war in einem Feld, das schon
   Marke, Titel und Werbetext trägt, die vierte Textebene. Das Wappen
   sagt dasselbe in einem Bild. */
.dashboard-hb-body .kachel-expert {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}
/* 86px, nicht grösser: Es ist ein Hinweis in einer Kachel, die schon eine
   Überschrift hat. Bei 86px bleiben rund 60px für sechs Versalien — die
   Untergrenze, unter der „EXPERT" zu einem goldenen Strich wird. */
.dashboard-hb-body .kachel-expert img {
    width: 86px;
    height: auto;
    display: block;
}
.dashboard-hb-body .kachel-expert strong {
    font-family: var(--hb-serif);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #FFF;
}

/* Die Bestätigung für Käufer trägt dieselbe Form, aber einen ruhigeren
   Ton: Oliv statt Weiss, weil es eine Feststellung ist und kein Angebot.

   GERECHNET WIRD AM HELLEN ENDE DES VERLAUFS, nicht am dunklen. Der
   Verlauf geht von #241F1A oben nach #8F3A22 unten, und dieser Block
   sitzt am Fuss der Kachel — also auf dem hellsten Rostton. Mein erster
   Wert (#A9C49A) kam dort auf 3,95:1 und wäre durchgefallen, obwohl er
   oben mit 8,59:1 glänzend dastand. #C6DBB9 trägt beide Enden: 11,07
   oben, 5,09 unten. */
.dashboard-hb-body .kachel-expert-hat strong { color: #C6DBB9; }

/* Die frühere Regel blendete hier auf schmalen Geräten das Bild aus —
   sie galt der alten Anordnung mit Bild links und vier Angaben rechts.
   Untereinander braucht es das nicht mehr: Ein 86px-Wappen über einer
   Zeile passt auf jedes Telefon. */


/* ── Arbeitsblätter: Werbekachel in der rechten Spalte ────────────────

   Helles Papier mit kräftigem Tinte-Rahmen statt Verlauf: Sie steht direkt
   unter der dunkelsten Fläche der Seite und soll sich davon absetzen, nicht
   mit ihr wetteifern. Der Blickfang ist der kleine Stapel aus den beiden
   echten ersten Seiten — man sieht, was man bekommt.

   Die Schilder oben rechts sind `hidden`, bis /api/me antwortet. Vorher
   steht dort nichts, und das ist richtig: lieber kein Schild als ein
   falsches. */
.dashboard-hb-body .kachel-blaetter {
    gap: 8px;
    padding: 16px 16px 18px;
    border: 2px solid var(--hb-ink);
    background: var(--hb-card);
}
.dashboard-hb-body .kachel-blaetter .kachel-marke { color: #8F3A22; }
/* Hier stand bis `26.09.2026` eine umrandete Kleinschrift in 9px. Sie
   erfüllte ihren Zweck nicht: Dass die Karte einen bezahlten Inhalt
   ankündigt, war beim Überfliegen nicht zu sehen. Jetzt trägt sie das
   Wappen, das in der Leiste und im Adminbereich dasselbe bedeutet. */
.dashboard-hb-body .kachel-blaetter-schild {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.dashboard-hb-body .kachel-blaetter-schild img {
    height: 19px;
    width: auto;
    display: block;
}
/* Das grüne Wort nur für die, die den Pass haben. Es steht NEBEN dem
   Wappen, nicht an seiner Stelle: Das Wappen kennzeichnet den Inhalt,
   das Wort den eigenen Zustand — zwei Auskünfte, nicht eine. */
.dashboard-hb-body .kachel-blaetter-schild.ist-frei small {
    font-family: var(--hb-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #4A6440;   /* 5.9:1 auf der Karte */
}

/* Die Preiszeile direkt über dem Knopf. Ocker, weil sie eine Bedingung
   nennt und keine Warnung — Saldo-Rot wäre hier zu laut, es trägt auf
   dieser Seite die falsche Antwort. #8F5F3C kommt auf 4,8:1. */
.dashboard-hb-body .kachel-blaetter-hinweis {
    margin-top: 2px;
    font-family: var(--hb-mono);
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 0.3px;
    color: #8F5F3C;
}

/* Zwei Blätter, leicht versetzt übereinander. Kein Drehen — das bleibt dem
   Stempel vorbehalten. Der harte Druckschatten gibt den Blättern Papier-
   dicke; er ist die einzige Schattenform des Hauses. */
.dashboard-hb-body .kachel-blaetter-stapel {
    position: relative;
    display: block;
    height: 150px;
    margin: 6px 0 6px;
}
.dashboard-hb-body .kachel-blaetter-stapel img {
    position: absolute;
    top: 0;
    left: 0;
    width: 96px;
    height: auto;
    border: 1px solid var(--hb-ink);
    background: #FFF;
    box-shadow: 3px 3px 0 var(--hb-ink);
}
.dashboard-hb-body .kachel-blaetter-stapel img + img {
    top: 12px;
    left: 58px;
}
.dashboard-hb-body .kachel-blaetter .kachel-titel { font-size: 20px; }
.dashboard-hb-body .kachel-blaetter-knopf {
    align-self: flex-start;
    margin-top: 8px;
    padding: 8px 14px;
    border: 1px solid var(--hb-ink);
    background: var(--hb-terra);
    color: #FFF;
    font-family: var(--hb-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.dashboard-hb-body a.kachel-blaetter:hover .kachel-blaetter-knopf { background: #9C4027; }

/* ── Expert-Band am Fuss des Rasters ──────────────────────────────
   Seit `06.10.2026`. Es ersetzt den Werbekasten, der bis dahin in der linken
   Randspalte stand und in sieben Tagen bei 79 Kachelklicks auf derselben
   Seite NULL Klicks bekam.

   GEBAUT WIE DIE MELDUNGSZEILE OBEN, mit Absicht: Dieselbe waagrechte Form
   an derselben Rasterbreite liest sich als zweite Zeile derselben Art —
   eine Mitteilung, kein Aushang. Ein Kasten in eigener Gestalt wäre wieder
   das, was gerade weggeräumt wurde.

   UNTERSCHIED ZUR MELDUNG: Der Streifen links ist nicht Terrakotta, sondern
   Ocker. Terrakotta heisst in diesem Haus „jetzt handeln"; dieses Band bittet
   um nichts, es erzählt, was es noch gibt. */
.dashboard-hb-body .kachel-expertband {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 13px 18px;
    /* WÄRMER ALS DIE MELDUNGSZEILE, mit Absicht. Deren Verlauf endet auf
       #F4F1E8 — also genau dem Seitengrund, womit sie flach aufliegt. Dieses
       Band soll sich abheben, und der Weg dahin ist Wärme, nicht Helligkeit:
       von Papier nach Sand, in derselben Familie wie der Ockerstreifen links.

       #F2E7D5 IST DAS DUNKELSTE ENDE, DAS GEHT. Die Unterzeile steht in
       --hb-ink-mid und käme auf #EEE0CA nur noch auf 4,32 — unter der Grenze
       für 13,5px-Text. Auf #F2E7D5 sind es 4,59. Wer den Verlauf kräftiger
       haben will, muss zuerst die Unterzeile dunkler machen. */
    background: linear-gradient(100deg, #FDFBF5 0%, #F2E7D5 100%);
    border-left: 4px solid var(--hb-ocker);
}

/* Das Wappen quer, nicht quadratisch: Die Vorlage ist 440×293, und in einem
   52er-Quadrat mit `contain` bliebe der Schriftzug 35px hoch und unlesbar. */
.dashboard-hb-body .kachel-expertband-bild {
    flex: 0 0 auto;
    width: 78px;
    height: auto;
}

.dashboard-hb-body .kachel-expertband-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.dashboard-hb-body .kachel-expertband-text strong {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--hb-ink);
}
/* Einzeilig wie die Meldung: Das Band ist ein Hinweis, kein Verkaufstext. */
.dashboard-hb-body .kachel-expertband-text > span:last-child {
    overflow: hidden;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--hb-ink-mid);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dashboard-hb-body .kachel-expertband .kachel-pfeil { margin: 0 0 0 auto; padding: 0; }

/* Auf schmalen Schirmen darf die Zeile umbrechen — sonst schneidet die
   Ellipse den Satz schon nach vier Wörtern ab. */
@media (max-width: 760px) {
    .dashboard-hb-body .kachel-expertband { flex-wrap: wrap; gap: 12px; }
    .dashboard-hb-body .kachel-expertband-text > span:last-child { white-space: normal; }
}

/* ── Der Expert-Hinweis in der Übungskachel ───────────────────────
   Er trägt jetzt drei Angaben statt einer: dass Üben frei bleibt, was Expert
   dazugibt, und was es kostet. Die Preiszeile steht NEBEN dem Wappen und
   nicht darunter — so bleibt es bei zwei Textzeilen, und die dritte Ebene,
   die hier am 26.09. schon einmal niemand gelesen hat, entsteht nicht neu. */
.dashboard-hb-body .kachel-expert-kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Umrandet, nicht gefüllt: Eine gefüllte Preispille auf farbigem Kachelgrund
   wäre ein dritter Farbblock in einer Kachel, die schon zwei hat. */
.dashboard-hb-body .kachel-expert-preis {
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    font-family: var(--hb-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #FFF;
    white-space: nowrap;
}

.dashboard-hb-body .kachel-expert-satz {
    font-size: 12.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.86);
}

/* ── Die Lücke unter dem Themenheft ───────────────────────────────
   Seit dem 06.10.2026 trägt die Übungskachel rechts drei Textzeilen statt
   einer. Damit ist sie höher als die Themenheft-Karte links — und weil beide
   in derselben Rasterzeile stehen, bekommt die Zeile die Höhe der höheren.
   Die Karte endete auf ihrer natürlichen Höhe, darunter klaffte Papier.

   DIE KETTE MUSS DURCHREICHEN, sonst hilft es nichts: Die Rasterzelle dehnt
   sich von selbst (align-self: stretch), ihr Kind `[data-heft]` ist aber ein
   gewöhnlicher Block und bleibt inhaltshoch — und die Karte darin erst recht.
   Beide Hüllen werden deshalb selbst zu Rastern; dann dehnt sich jedes Kind
   ohne eine einzige Höhenangabe.

   DER GEWONNENE PLATZ WIRD NICHT VERSCHENKT: Die Merkzeile rutscht mit
   `margin-top: auto` an den Fuss der Karte. Ohne das stünde der Text oben und
   die Lücke wäre nur von aussen nach innen gewandert.

   NUR AUF DEM DASHBOARD. Dieselbe Karte steht auch auf dem Kontenplan und auf
   den Wissensseiten, wo neben ihr nichts Höheres sitzt — dort gedehnt zu
   werden wäre falsch. Deshalb hängt alles an .dashboard-hb-body. */
.dashboard-hb-body .kachel-heft,
.dashboard-hb-body .kachel-heft > [data-heft] { display: grid; }

/* `align-items: start` am .heft-block hält das Umschlagbild oben — das soll
   so bleiben. Gedehnt wird nur die Textspalte. */
.dashboard-hb-body .kachel-heft .heft-inhalt {
    align-self: stretch;
    display: flex;
    flex-direction: column;
}
.dashboard-hb-body .kachel-heft .heft-melden { margin-top: auto; }