/* ============================================================
   App-Übersicht (/start) + Fälle-Übersicht (/faelle)
   ------------------------------------------------------------
   Die Kacheln der App-Übersicht nutzen die Glaskacheln der
   Mindmap-Übersicht in app.html (.dashboard-card in style.css: Glas,
   Glanzkante, Titel-Leiste, Cursor-Kontur, Dark mode). Hier kommen nur
   Größe, Icon + Farbpunkt, "Bald verfügbar" und der Seitenhintergrund
   dazu. Hover "Glow + Anheben": Farbpunkt wächst, Icon hebt sich.
   ============================================================ */

body.hub-page {
    --hub-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Gleiche Farbschleier wie .dashboard-container in app.html — ohne sie
       wirkt das Glas der Kacheln flach */
    background-color: #f8fafc;
    background-image:
        radial-gradient(at 10% 10%, rgba(99, 102, 241, 0.12) 0px, transparent 50%),
        radial-gradient(at 90% 10%, rgba(20, 184, 166, 0.1) 0px, transparent 50%),
        radial-gradient(at 90% 90%, rgba(251, 113, 133, 0.1) 0px, transparent 50%),
        radial-gradient(at 10% 90%, rgba(139, 92, 246, 0.12) 0px, transparent 50%),
        radial-gradient(at 50% 50%, rgba(255, 255, 255, 0.5) 0px, transparent 80%);
    background-attachment: fixed;
}

body.glass-theme.hub-page {
    background-image:
        radial-gradient(ellipse 55% 45% at 15% 85%, rgba(124, 58, 237, 0.28) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 55% 5%, rgba(139, 92, 246, 0.2) 0%, transparent 70%),
        radial-gradient(ellipse 45% 42% at 92% 25%, rgba(45, 212, 191, 0.15) 0%, transparent 70%),
        radial-gradient(ellipse 33% 28% at 8% 18%, rgba(245, 230, 200, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 40% 35% at 80% 85%, rgba(34, 211, 238, 0.1) 0%, transparent 70%) !important;
}

.hub-page-content {
    box-sizing: border-box;
    min-height: 100vh;
    padding: 112px 24px 96px;
}

.hub-container {
    max-width: 920px;
    margin: 0 auto;
}

.hub-head {
    text-align: center;
    margin: 8px 0 28px;
}

.hub-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--slate-900, #0f172a);
    margin: 0 0 8px;
}

.hub-sub {
    margin: 0;
    font-size: 0.98rem;
    color: var(--slate-500, #64748b);
}

/* ---------- Level, XP-Leiste, Daily Streak ----------
   Flache Glasleiste zwischen Überschrift und Kacheln. Bewusst niedrig,
   damit auf einem 13"-MacBook weiterhin alle sechs Kacheln ohne Scrollen
   sichtbar bleiben; dafür rückt die Überschrift etwas näher. */

body.hub-has-progress .hub-head {
    margin-bottom: 18px;
}

.hub-progress[hidden],
.hub-streak[hidden] {
    display: none;
}

.hub-progress {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 560px;
    margin: 0 auto 22px;
    padding: 9px 16px 9px 10px;
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.07);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: transform 0.25s var(--hub-ease), box-shadow 0.25s var(--hub-ease);
    animation: hubProgressIn 0.45s var(--hub-ease) both;
}

@media (hover: hover) {
    .hub-progress:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.11);
    }
}

.hub-progress-level {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #a78bfa, #6366f1);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

.hub-progress-main {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.hub-progress-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
    min-width: 0;
}

.hub-progress-rank {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--slate-800, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hub-progress-xp {
    flex: 0 0 auto;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--slate-500, #64748b);
    white-space: nowrap;
}

.hub-progress-track {
    display: block;
    height: 6px;
    border-radius: 99px;
    background: rgba(100, 116, 139, 0.18);
    overflow: hidden;
}

.hub-progress-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #6366f1, #a855f7 60%, #FF2399);
    transition: width 0.9s var(--hub-ease);
}

.hub-streak {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding-left: 14px;
    border-left: 1px solid rgba(100, 116, 139, 0.22);
}

.hub-streak-flame {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    filter: drop-shadow(0 0 6px rgba(251, 146, 60, 0.5));
}

.hub-streak-flame path {
    fill: url(#hubFlameGrad);
}

.hub-streak-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.hub-streak-text b {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--slate-800, #1e293b);
    white-space: nowrap;
}

.hub-streak-text small {
    font-size: 11px;
    color: var(--slate-500, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Heute noch nicht gelernt: Flamme grau, sie "zündet" erst mit dem Lerntag */
.hub-streak.is-open .hub-streak-flame {
    filter: none;
}

.hub-streak.is-open .hub-streak-flame path {
    fill: rgba(100, 116, 139, 0.45);
}

@keyframes hubProgressIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 520px) {
    .hub-progress {
        gap: 10px;
        padding: 8px 12px 8px 8px;
        border-radius: 22px;
    }

    .hub-progress-level {
        width: 32px;
        height: 32px;
        font-size: 13.5px;
    }

    .hub-progress-rank {
        font-size: 12.5px;
    }

    .hub-progress-xp {
        font-size: 11px;
    }

    .hub-streak {
        gap: 5px;
        padding-left: 10px;
    }

    .hub-streak-flame {
        width: 22px;
        height: 22px;
    }

    .hub-streak-text b {
        font-size: 12.5px;
    }

    /* Auf schmalen Screens zeigt schon die Flamme (grau vs. farbig), ob heute
       gelernt wurde — die lange Unterzeile würde sonst Rang und XP zusammenschieben */
    .hub-streak-text small {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hub-progress {
        animation: none;
    }

    .hub-progress-fill {
        transition: none;
    }
}

/* ---------- Kachel-Grid ---------- */

.hub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.dashboard-card.hub-tile {
    height: 190px;
    color: inherit;
    text-decoration: none;
}

.dashboard-card.hub-tile h3 {
    height: 44px;
    font-size: 15px;
}

/* Bereich über der Titel-Leiste: Farbpunkt + Icon zentriert.
   minmax(0, 1fr) fixiert Zeile und Spalte auf die Größe des Bildbereichs.
   Ohne das richtet sich die Rasterzeile nach dem Inhalt, und die
   Prozentmaße der Motive (max-height usw.) beziehen sich auf die zu große
   Zeile — das Motiv ragte dann in die Titel-Leiste. */
.hub-tile-visual {
    position: absolute;
    inset: 0 0 44px 0;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    place-items: center;
    pointer-events: none;
}

/* Farbpunkt: Kachelfarbe in der Mitte, nach außen transparent */
.hub-tile-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;
    border-radius: 50%;
    background: radial-gradient(circle closest-side, var(--tile-c2) 0%, transparent 100%);
    /* Mehr Zwischenstopps statt eines einzigen Sprungs von der Mischfarbe
       (früher bei 50%) auf transparent (100%) — der große letzte Schritt
       wirkte wie ein Rand. Der Abfall läuft jetzt über drei Stufen aus,
       dazu ein leichter Weichzeichner gegen die letzte Kreiskontur (die
       Kachel hat overflow:hidden, das Ausbluten stört also nicht). */
    background: radial-gradient(circle closest-side,
            var(--tile-c2) 0%,
            color-mix(in srgb, var(--tile-c2) 75%, transparent) 30%,
            color-mix(in srgb, var(--tile-c1) 45%, transparent) 62%,
            color-mix(in srgb, var(--tile-c1) 15%, transparent) 85%,
            transparent 100%);
    filter: blur(10px);
    /* Bleibt beim Hover bewusst gleich stark (User-Vorgabe) */
    opacity: 0.78;
}

/* Platzhalter-Icon im Kachel-Verlauf (wie .card-center-icon in app.js) */
.hub-tile-icon {
    position: relative;
    width: 56px;
    height: 56px;
    background: var(--tile-color);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
    transition: transform 0.3s var(--hub-ease);
}

/* Spätere eigene Bilder (transparente WebP) */
.hub-tile-img {
    position: relative;
    max-width: 72%;
    max-height: 82%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 0.3s var(--hub-ease);
}

/* Motiv läuft vom linken Kachelrand herein (z. B. Mindmap-Zweige):
   volle Höhe des Bildbereichs, links bündig */
.hub-tile-img.hub-tile-img--left {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: auto;
    max-width: none;
    max-height: none;
    transform-origin: left center;
}

/* Größeres Motiv (Fälle): füllt den Bildbereich fast ganz aus */
.hub-tile-img.hub-tile-img--lg {
    max-width: 96%;
    max-height: 96%;
}

/* ---------- Inline-SVG-Motive (Mindmaps, Dashboard) ---------- */

/* Fester Rahmen im Bildbereich, das SVG skaliert sich über sein viewBox
   hinein (preserveAspectRatio). Zwei Fallen vermieden:
   - nur eine Höhe: Das breite Motiv lief auf schmalen Kacheln (Handy) über
     den Rand hinaus;
   - Prozentmaße als Grid-Kind: Die Rasterzeile richtet sich nach dem Inhalt,
     die Prozente bezogen sich dann auf die zu große Zeile statt auf den
     Bildbereich (das Motiv ragte in die Titel-Leiste). */
.hub-tile-svg {
    position: absolute;
    inset: 11% 6%;
    /* Achsen im Dashboard-Chart nutzen currentColor */
    color: #cbd5e1;
    transition: transform 0.3s var(--hub-ease);
}

.hub-tile-svg svg,
.hub-tile-svg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Motiv läuft vom linken Kachelrand herein: volle Höhe, links bündig */
.hub-tile-svg.hub-tile-svg--left {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

/* Mindmaps: im Ruhezustand vollständig. Beim Hover wachsen die Zweige
   gestaffelt neu aus dem Knoten (pathLength="1" → dashoffset 1..0), die
   End-Knoten ploppen danach auf. --d (Verzögerung) steht je Element im SVG. */
.hub-tile-svg.hub-svg-mindmaps {
    inset: 5% 2%;
}

.hub-svg-mindmaps .mm-branch {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

.hub-svg-mindmaps .mm-leaf {
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes hub-mm-grow {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

@keyframes hub-pop {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.18); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Dashboard: Kennzahl-Kacheln ploppen auf, die Haken werden nacheinander
   gesetzt, das Kreisdiagramm dreht sich mit leichtem Nachfedern ein */
.hub-svg-dashboard .chart-check-mark {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

.hub-svg-dashboard .chart-pie,
.hub-svg-dashboard .chart-card,
.hub-svg-dashboard .chart-check {
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes hub-chart-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

@keyframes hub-pie-spin {
    from { transform: rotate(-120deg) scale(0.8); }
    70% { transform: rotate(8deg) scale(1.03); }
    to { transform: rotate(0deg) scale(1); }
}

@media (hover: hover) {
    .hub-tile:not(.is-soon):hover .hub-svg-mindmaps .mm-branch {
        animation: hub-mm-grow 0.5s cubic-bezier(0.3, 0.7, 0.2, 1) var(--d, 0s) both;
    }

    .hub-tile:not(.is-soon):hover .hub-svg-mindmaps .mm-leaf {
        animation: hub-pop 0.35s ease-out calc(var(--d, 0s) + 0.4s) both;
    }

    .hub-tile:not(.is-soon):hover .hub-svg-dashboard .chart-check {
        animation: hub-pop 0.4s ease-out calc(var(--d, 0s) + 0.15s) both;
    }

    .hub-tile:not(.is-soon):hover .hub-svg-dashboard .chart-check-mark {
        animation: hub-chart-draw 0.3s ease-out calc(var(--d, 0s) + 0.3s) both;
    }

    .hub-tile:not(.is-soon):hover .hub-svg-dashboard .chart-pie {
        animation: hub-pie-spin 0.8s cubic-bezier(0.3, 0.7, 0.2, 1) both;
    }

    .hub-tile:not(.is-soon):hover .hub-svg-dashboard .chart-card {
        animation: hub-pop 0.4s ease-out both;
    }

    .hub-tile:not(.is-soon):hover .hub-svg-dashboard .chart-card:nth-of-type(2) {
        animation-delay: 0.08s;
    }
}

body.glass-theme .hub-tile-svg {
    color: rgba(255, 255, 255, 0.28);
}

/* Helle Konturen im Dark mode dunkel, sonst leuchten sie wie Rahmen */
body.glass-theme .hub-svg-dashboard .chart-halo {
    stroke: #111827;
}

/* Kennzahl-Kacheln und Checkliste im Dark mode */
body.glass-theme .hub-svg-dashboard .chart-card-bg {
    fill: #111827;
    stroke: rgba(255, 255, 255, 0.12);
}

body.glass-theme .hub-svg-dashboard .chart-card-bar,
body.glass-theme .hub-svg-dashboard .chart-check-bar {
    fill: rgba(255, 255, 255, 0.16);
}

@media (prefers-reduced-motion: reduce) {
    .hub-tile .hub-tile-svg *,
    .hub-tile .hub-tile-img,
    .hub-tile .hub-tile-fx::before,
    .hub-tile .hub-tile-fx::after {
        animation: none !important;
    }
}

/* ---------- Zoom (Fälle): beim Hover auf Köpfe und Oberkörper ----------
   Der Bildbereich beschneidet das vergrößerte Bild an der Titel-Leiste;
   der Drehpunkt liegt auf Kopfhöhe, damit die Gesichter im Bild bleiben. */
.hub-tile-visual--clip {
    overflow: hidden;
}

.hub-tile-img--zoom {
    transform-origin: 50% 22%;
    transition: transform 0.55s var(--hub-ease);
}

/* ---------- Hover-Ebenen (auch auf „Bald verfügbar“-Kacheln) ----------
   Beide Ebenen liegen hinter dem Bild, laufen nur beim Hover und
   wiederholen sich, solange der Zeiger auf der Kachel steht. */
.hub-tile-fx {
    position: absolute;
    inset: 0;
    /* Hinter Bild und Icon (beide sind position: relative) */
    z-index: 0;
    pointer-events: none;
}

.hub-tile-img,
.hub-tile-icon,
.hub-tile-svg {
    z-index: 1;
}

/* Energiewelle (Crashkurse): leuchtender Ring, der von innen nach außen
   läuft. Zwei Ringe versetzt, damit die Welle nicht abreißt. */
.hub-fx-wave::before,
.hub-fx-wave::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 78%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle closest-side,
            transparent 42%,
            var(--tile-c1) 62%,
            transparent 80%);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
}

@keyframes hub-wave {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    18% { opacity: 0.75; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
}

/* Zeitring (Klausurtraining): Ein Bogen läuft wie ein Uhrzeiger um das
   Motiv — Klausur heißt Zeit. Ring über eine Maske aus dem Kegelverlauf. */
.hub-fx-timer::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
            transparent 0 52%,
            color-mix(in srgb, var(--tile-c1) 70%, transparent) 78%,
            var(--tile-c2) 100%);
    -webkit-mask: radial-gradient(circle closest-side, transparent 76%, #000 79%);
    mask: radial-gradient(circle closest-side, transparent 76%, #000 79%);
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg);
    transition: opacity 0.3s var(--hub-ease);
}

@keyframes hub-timer {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (hover: hover) {
    .hub-tile:hover .hub-fx-wave::before {
        animation: hub-wave 1.8s ease-out infinite;
    }

    .hub-tile:hover .hub-fx-wave::after {
        animation: hub-wave 1.8s ease-out 0.9s infinite;
    }

    .hub-tile:hover .hub-fx-timer::before {
        opacity: 0.95;
        animation: hub-timer 1.6s linear infinite;
    }
}

/* ---------- Schreiben (Klausurtraining): Zeilen auf dem leeren Blatt ----------
   Ein SVG liegt deckungsgleich ÜBER dem Motiv (gleiche Größe wie das per
   max-width/max-height eingepasste Bild, Seitenverhältnis 1000:667) und
   macht dessen Hover-Bewegung mit. Die Maße kommen aus Container-Einheiten
   des Bildbereichs, deshalb ist dieser hier ein Größen-Container. */
.hub-tile-visual--write {
    container-type: size;
}

.hub-write {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: min(72cqw, 82cqh * 1000 / 667);
    aspect-ratio: 1000 / 667;
    translate: -50% -50%;
    overflow: visible;
    transition: transform 0.3s var(--hub-ease);
}

/* pathLength="1": Der Strich wird über den Versatz von links aufgezogen.
   Ohne Hover laufen alle Zeilen gleichzeitig und schnell zurück. */
.hub-write-line {
    fill: none;
    stroke: color-mix(in srgb, var(--tile-c2) 70%, #1e293b);
    stroke-width: 9;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
    transition: stroke-dashoffset 0.2s ease-in, opacity 0.2s ease-in;
}

@media (hover: hover) {
    .hub-tile:hover .hub-write {
        transform: translateY(-4px) scale(1.06);
    }

    .hub-tile:hover .hub-write-line {
        stroke-dashoffset: 0;
        opacity: 0.8;
        transition: stroke-dashoffset 0.38s ease-out calc(0.15s + var(--i) * 0.2s),
            opacity 0.01s linear calc(0.15s + var(--i) * 0.2s);
    }
}

.hub-tile:focus-visible .hub-write {
    transform: translateY(-4px) scale(1.06);
}

.hub-tile:focus-visible .hub-write-line {
    stroke-dashoffset: 0;
    opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
    .hub-tile .hub-write-line {
        transition: none !important;
    }
}

/* ---------- Flip (Gesetze): eine Drehung um die Hochachse ---------- */

@keyframes hub-flip {
    from { transform: perspective(600px) rotateY(0deg) translateY(-4px) scale(1.06); }
    to { transform: perspective(600px) rotateY(360deg) translateY(-4px) scale(1.06); }
}

/* ---------- Hover "Glow + Anheben" ---------- */

@media (hover: hover) {
    .hub-tile:hover .hub-tile-icon,
    .hub-tile:hover .hub-tile-img {
        /* Bei geteilten Bildern hebt das zugleich den translateX auf: die
           Hälften rücken zusammen */
        transform: translateY(-4px) scale(1.06);
    }

    .hub-tile:not(.is-soon):hover .hub-tile-img--flip {
        animation: hub-flip 0.75s cubic-bezier(0.4, 0, 0.2, 1) both;
    }

    .hub-tile:not(.is-soon):hover .hub-tile-img--zoom {
        transform: scale(1.7);
    }
}

.hub-tile:focus-visible .hub-tile-img--zoom {
    transform: scale(1.7);
}

.dashboard-card.hub-tile:focus-visible {
    outline: none;
    transform: translateY(-4px);
}

.dashboard-card.hub-tile:focus-visible::after {
    opacity: 1;
}

.hub-tile:focus-visible .hub-tile-icon,
.hub-tile:focus-visible .hub-tile-img {
    transform: translateY(-4px) scale(1.06);
}

/* ---------- Bald verfügbar ---------- */

/* „Bald verfügbar“: Die Kacheln sehen als Vorschau aus wie die übrigen
   (Bild und Titel in Farbe), sind aber kein Link. Nur der Mauszeiger und
   die Badge zeigen, dass hier noch nichts zu holen ist. */
.dashboard-card.hub-tile.is-soon {
    cursor: default;
}

/* Ausgegraut (Klausurtraining): Bild, Titel und Farbpunkt gedämpft, keine
   Hover-Reaktion — nur die Badge bleibt farbig */
.dashboard-card.hub-tile.is-dim:hover {
    transform: none;
    border-color: var(--tile-outline);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
}

body.glass-theme .dashboard-card.hub-tile.is-dim:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.dashboard-card.hub-tile.is-dim::after {
    display: none;
}

.hub-tile.is-dim .hub-tile-img,
.hub-tile.is-dim .hub-tile-icon {
    filter: grayscale(1);
    opacity: 0.4;
    transform: none !important;
}

.hub-tile.is-dim .hub-tile-glow {
    filter: grayscale(1);
    opacity: 0.18;
}

.hub-tile.is-dim h3 .card-title-text,
body.glass-theme .hub-tile.is-dim h3 .card-title-text {
    filter: grayscale(1);
    opacity: 0.55;
}

/* Badge im Stil von .free-badge ("Kostenlos") in app.html */
.hub-soon-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    padding: 4px 8px;
    border-radius: 4px;
    background: linear-gradient(135deg, #fb923c, #f97316);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(249, 115, 22, 0.25);
}

/* ---------- Dock: Theme-Schalter auch mobil rechts ---------- */

body.hub-page .bottom-right-dock {
    left: auto;
    right: 24px;
    align-items: flex-end;
}

/* ---------- Mobil ---------- */

@media (max-width: 768px) {
    .hub-page-content {
        padding: 96px 16px 96px;
    }

    .hub-head {
        margin: 4px 0 20px;
    }

    .hub-sub {
        font-size: 0.92rem;
    }

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

    .dashboard-card.hub-tile {
        height: 150px;
    }

    .dashboard-card.hub-tile h3 {
        height: 40px;
        font-size: 13px;
    }

    .hub-tile-visual {
        bottom: 40px;
    }

    .hub-tile-icon {
        width: 44px;
        height: 44px;
    }

    .hub-tile-glow {
        width: 156px;
        height: 156px;
        margin: -78px 0 0 -78px;
    }

    .hub-soon-badge {
        top: 8px;
        right: 8px;
        padding: 3px 6px;
        font-size: 0.6rem;
    }

    body.hub-page .bottom-right-dock {
        right: 16px;
        bottom: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hub-tile-glow,
    .hub-tile-icon,
    .hub-tile-img,
    .case-map-tile,
    .case-map-dot::before,
    .case-map-bar-fill {
        transition: none !important;
    }

    .hub-tile .hub-tile-icon,
    .hub-tile .hub-tile-img,
    .dashboard-card.hub-tile,
    .case-map-tile {
        transform: none !important;
    }
}

/* ============================================================
   Fälle-Übersicht (/faelle)
   ============================================================ */

/* Der "App-Menü"-Link (.hub-back) steht in style.css — er wird auch auf
   Seiten gebraucht, die start.css nicht laden. */

.cases-summary b {
    color: var(--slate-800, #1e293b);
}

.cases-demo-note {
    width: fit-content;
    margin: -12px auto 24px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid #fed7aa;
    background: #fff7ed;
    color: #c2410c;
    font-size: 0.8rem;
    font-weight: 600;
}

.cases-area {
    --c: #6366f1;
    margin-bottom: 32px;
}

.cases-area-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--slate-900, #0f172a);
}

.cases-area-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 18%, transparent);
}

.cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

/* Glaskarte wie .dashboard-card */
.case-map-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px 14px;
    border-radius: 16px;
    border: 1px solid #fff;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    color: inherit;
    text-decoration: none;
    transition: transform 0.3s var(--hub-ease), box-shadow 0.3s var(--hub-ease), border-color 0.3s;
    -webkit-tap-highlight-color: transparent;
}

.case-map-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Kleiner Farbpunkt mit Glow links neben dem Namen */
.case-map-dot {
    position: relative;
    flex: none;
    width: 14px;
    height: 14px;
}

.case-map-dot::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle closest-side, var(--c) 0%, transparent 100%);
    /* Bleibt beim Hover bewusst gleich stark (User-Vorgabe) */
    opacity: 0.7;
}

.case-map-dot::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--c);
}

.case-map-name {
    flex: 1;
    min-width: 0;
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--slate-800, #1e293b);
}

.case-map-count {
    font-size: 0.85rem;
    color: var(--slate-500, #64748b);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.case-map-bar {
    height: 6px;
    border-radius: 99px;
    background: rgba(15, 23, 42, 0.06);
    background: color-mix(in srgb, var(--c) 14%, transparent);
    overflow: hidden;
}

.case-map-bar-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--c);
    transition: width 0.6s var(--hub-ease);
}

.case-map-lock {
    flex: none;
    width: 14px;
    height: 14px;
    background: var(--slate-400, #94a3b8);
    -webkit-mask: url('/images/icons/lock.svg') center / contain no-repeat;
    mask: url('/images/icons/lock.svg') center / contain no-repeat;
}

.case-map-tile.locked .case-map-name {
    color: var(--slate-500, #64748b);
}

@media (hover: hover) {
    .case-map-tile:hover {
        transform: translateY(-4px);
        border-color: color-mix(in srgb, var(--c) 45%, #fff);
        box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -5px rgba(0, 0, 0, 0.05);
    }}

.case-map-tile:focus-visible {
    outline: 2px solid var(--c);
    outline-offset: 2px;
}

.cases-area-empty,
.cases-state {
    margin: 0;
    color: var(--slate-500, #64748b);
    font-size: 0.95rem;
}

.cases-state {
    text-align: center;
    padding: 40px 0;
}

/* ============================================================
   Dark mode (body.glass-theme) — Glaskacheln bringt style.css mit
   ============================================================ */

body.glass-theme .hub-title,
body.glass-theme .cases-area-title,
body.glass-theme .cases-summary b {
    color: #f8fafc;
}

body.glass-theme .hub-sub,
body.glass-theme .hub-back,
body.glass-theme .cases-area-empty,
body.glass-theme .cases-state,
body.glass-theme .case-map-count {
    color: rgba(255, 255, 255, 0.62);
}

body.glass-theme .hub-progress {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.25);
}

body.glass-theme .hub-progress-rank,
body.glass-theme .hub-streak-text b {
    color: #f8fafc;
}

body.glass-theme .hub-progress-xp,
body.glass-theme .hub-streak-text small {
    color: rgba(255, 255, 255, 0.62);
}

body.glass-theme .hub-progress-track {
    background: rgba(255, 255, 255, 0.14);
}

body.glass-theme .hub-streak {
    border-left-color: rgba(255, 255, 255, 0.16);
}

body.glass-theme .hub-streak.is-open .hub-streak-flame path {
    fill: rgba(255, 255, 255, 0.3);
}

body.glass-theme .hub-back:hover {
    color: var(--vibrant-primary, #818cf8);
}

body.glass-theme .hub-tile-glow {
    opacity: 0.85;
}

body.glass-theme .cases-demo-note {
    background: rgba(251, 146, 60, 0.15);
    border-color: rgba(251, 146, 60, 0.35);
    color: #fdba74;
}

body.glass-theme .case-map-tile {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

@media (hover: hover) {
    body.glass-theme .case-map-tile:hover {
        border-color: color-mix(in srgb, var(--c) 50%, transparent);
        box-shadow: 0 14px 26px -8px rgba(0, 0, 0, 0.6);
    }
}

body.glass-theme .case-map-name {
    color: #e2e8f0;
}

body.glass-theme .case-map-tile.locked .case-map-name {
    color: rgba(255, 255, 255, 0.5);
}

body.glass-theme .case-map-bar {
    background: rgba(255, 255, 255, 0.08);
    background: color-mix(in srgb, var(--c) 22%, transparent);
}

/* ============================================================
   Crashkurs-Übersicht (/crashkurse)
   ------------------------------------------------------------
   Alle Rechtsgebiete auf einen Blick: vier Gruppen als Spalten, je Map
   eine schmale Glaszeile mit Play-Button. Am Desktop ohne Scrollen.
   ============================================================ */

.hub-container--wide {
    max-width: 1180px;
}

/* Kompakt, damit alle 17 Gebiete am Desktop ohne Scrollen sichtbar sind */
body.ck-page .hub-page-content {
    padding-top: 92px;
}

body.ck-page .cases-demo-note {
    margin: -6px auto 14px;
}

.ck-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.ck-area {
    margin-bottom: 0;
}

.ck-area .cases-area-title {
    font-size: 1rem;
    margin-bottom: 8px;
}

.ck-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Zeile: Häkchen · Name · Status · Play */
.ck-map {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px 5px 10px;
    border-radius: 12px;
    border: 1px solid #fff;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03);
    color: inherit;
    text-decoration: none;
    transition: transform 0.3s var(--hub-ease), box-shadow 0.3s var(--hub-ease), border-color 0.3s;
    -webkit-tap-highlight-color: transparent;
}

/* Häkchen links: grau, solange der Kurs nicht abgeschlossen ist */
.ck-check {
    flex: none;
    width: 17px;
    height: 17px;
    background: var(--slate-300, #cbd5e1);
    -webkit-mask: url('/images/icons/circle-check.svg') center / contain no-repeat;
    mask: url('/images/icons/circle-check.svg') center / contain no-repeat;
}

/* Kompakter Seitenkopf ohne Lexi (Fälle-Übersicht) */
.hub-head--compact {
    margin: 0 0 14px;
}

.hub-head--compact .hub-title {
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    margin-bottom: 4px;
}

.hub-head--compact .hub-sub {
    font-size: 0.9rem;
}

.ck-map--done .ck-check {
    background: #15803d;
}

.ck-map-name {
    flex: 1;
    min-width: 0;
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--slate-800, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ck-map-meta {
    flex: none;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--slate-500, #64748b);
}

/* Play-Button: Icon als Maske in der Gebietsfarbe. Die Farbe bleibt auch
   nach Abschluss gleich — den Fortschritt zeigt allein das Häkchen links. */
.ck-play {
    flex: none;
    width: 28px;
    height: 28px;
    background: var(--c);
    -webkit-mask: url('/images/icons/circle-play.svg') center / contain no-repeat;
    mask: url('/images/icons/circle-play.svg') center / contain no-repeat;
    transition: transform 0.3s var(--hub-ease), opacity 0.3s;
}

/* Fälle-Übersicht: Pfeil statt Play, Fortschritt als feine Linie am
   unteren Zeilenrand (die Zeile bleibt so flach wie auf /crashkurse) */
.ck-play.ck-play--arrow {
    -webkit-mask-image: url('/images/icons/circle-arrow-right.svg');
    mask-image: url('/images/icons/circle-arrow-right.svg');
}

.fx-map {
    position: relative;
    overflow: hidden;
    padding-left: 12px;
}

.fx-map .ck-map-meta {
    font-variant-numeric: tabular-nums;
}

.fx-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(15, 23, 42, 0.06);
    background: color-mix(in srgb, var(--c) 14%, transparent);
}

.fx-bar-fill {
    display: block;
    height: 100%;
    background: var(--c);
    border-radius: 0 2px 2px 0;
    transition: width 0.6s var(--hub-ease);
}

body.glass-theme .fx-bar {
    background: rgba(255, 255, 255, 0.08);
    background: color-mix(in srgb, var(--c) 22%, transparent);
}

/* Noch kein Drehbuch: Zeile gedämpft, Play grau */
.ck-map--soon {
    cursor: default;
}

.ck-map--soon .ck-map-name {
    color: var(--slate-500, #64748b);
}

.ck-map--soon .ck-play {
    background: var(--slate-300, #cbd5e1);
}

/* Gesperrt: Schloss statt Play, Klick öffnet den Sperr-Hinweis */
.ck-map--locked {
    cursor: pointer;
}

.ck-map--locked .ck-map-name {
    color: var(--slate-500, #64748b);
}

.ck-map--locked .ck-play {
    width: 16px;
    height: 16px;
    margin: 0 6px;
    background: var(--slate-400, #94a3b8);
    -webkit-mask-image: url('/images/icons/lock.svg');
    mask-image: url('/images/icons/lock.svg');
}

@media (hover: hover) {
    a.ck-map:hover,
    .ck-map--locked:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--c) 45%, #fff);
        box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -5px rgba(0, 0, 0, 0.05);
    }

    a.ck-map:hover .ck-play {
        transform: scale(1.15);
    }
}

a.ck-map:focus-visible,
.ck-map--locked:focus-visible {
    outline: 2px solid var(--c);
    outline-offset: 2px;
}

/* ---------- Deko (nur im 4-Spalten-Layout) ---------- */

.ck-deco-lexi {
    display: none;
}

@media (min-width: 1101px) {
    /* Lexi: im freien Raum unter der Strafrecht-Spalte, ohne die Spalte zu verlängern */
    .ck-area {
        position: relative;
    }

    .ck-deco-lexi {
        display: block;
        position: absolute;
        top: calc(100% + 44px);
        left: 50%;
        width: min(78%, 220px);
        height: auto;
        margin-left: calc(min(78%, 220px) / -2);
        filter: drop-shadow(0 14px 18px rgba(15, 23, 42, 0.16));
        animation: ck-deco-float 3.6s ease-in-out infinite;
    }

    /* Nur auf und ab, ohne die leichte Drehung von bento-lexi-float */
    @keyframes ck-deco-float {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-10px); }
    }

}

@media (max-width: 1100px) {
    .ck-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .ck-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ck-deco-lexi {
        animation: none;
    }
}

/* Dark mode */
body.glass-theme .ck-map {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

@media (hover: hover) {
    body.glass-theme a.ck-map:hover,
    body.glass-theme .ck-map--locked:hover {
        border-color: color-mix(in srgb, var(--c) 50%, transparent);
        box-shadow: 0 14px 26px -8px rgba(0, 0, 0, 0.6);
    }
}

body.glass-theme .ck-map-name {
    color: #e2e8f0;
}

body.glass-theme .ck-map--soon .ck-map-name,
body.glass-theme .ck-map--locked .ck-map-name,
body.glass-theme .ck-map-meta {
    color: rgba(255, 255, 255, 0.55);
}

body.glass-theme .ck-check {
    background: rgba(255, 255, 255, 0.22);
}

body.glass-theme .ck-map--done .ck-check {
    background: #4ade80;
}

body.glass-theme .ck-map--soon .ck-play {
    background: rgba(255, 255, 255, 0.22);
}

body.glass-theme .ck-deco-lexi {
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.5));
}


/* ---- Kostenlose Einführungen (nur ohne bezahlten Tarif sichtbar) ---- */
.hub-free {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 900px;
    margin: 0 auto 20px;
}

.hub-free[hidden] {
    display: none;
}

.hub-free-label {
    font-size: 13px;
    font-weight: 700;
    color: #059669;
    margin-right: 4px;
}

.hub-free-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hub-free-link::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c, #6366f1);
}

.hub-free-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
}

body.glass-theme .hub-free-link {
    background: rgba(15, 23, 42, 0.4);
    border-color: rgba(255, 255, 255, 0.12);
}

body.glass-theme .hub-free-label {
    color: #34d399;
}

/* Fallbild am Zeiger (/faelle): Basis-Stil .rg-cursor kommt aus style.css
   (Rechtsgebiete-Section der Startseite). Hier nur Breite, die Easing-
   Variable (style.css hält sie im .rg-section-Scope) und die Dunkel-Variante
   der Beschriftung. Positionierung und Inhalt: faelle.js. */
.ck-cursor {
    --rg-ease: cubic-bezier(0.22, 1, 0.36, 1);
    width: 280px;
    z-index: 1000;
}

.ck-cursor .rg-dot {
    display: inline-block;
    flex: none;
    border-radius: 50%;
    background: var(--c, #6366f1);
}

body.glass-theme .ck-cursor .rg-cursor__cap {
    background: rgba(15, 23, 42, 0.78);
    color: #e2e8f0;
}

/* ---------- Erste Schritte (first-steps.js) ----------
   Onboarding-Checkliste über den Kacheln; seit 2026-10-15 hier statt in der
   Mindmap-Kachelübersicht. Stile der Karte (.first-steps) in style.css. */
.hub-first-steps {
    margin: 0 0 14px;
}

.hub-first-steps[hidden] {
    display: none;
}


/* ---------- Fall des Tages auf /start ----------
   Textzeile (.daily-line in style.css) zwischen Level-Leiste und
   Checkliste bzw. Kacheln, zentriert. */
.hub-daily {
    margin: 0 0 16px;
    text-align: center;
}

.hub-progress:has(+ .hub-daily[style*="block"]) {
    margin-bottom: 12px;
}

.daily-line > span {
    flex-shrink: 0;
    white-space: nowrap;
}

.daily-line b {
    min-width: 0;
}

/* Mit sichtbarer Checkliste ist der Fall des Tages dort schon Aufgabe 5 */
body.hub-has-first-steps .hub-daily {
    /* !important: daily-case.js setzt display:block inline */
    display: none !important;
}

body.hub-has-first-steps .hub-progress {
    margin-bottom: 14px;
}

/* Checkliste kompakt (13"-MacBook: Kacheln sollen ohne Scrollen sichtbar
   bleiben): Kopfzeile einzeilig ohne Untertitel, weniger Innenabstand. */
.hub-first-steps .first-steps {
    padding: 10px 16px 12px;
    margin-bottom: 0;
}

.hub-first-steps .first-steps-head {
    margin-bottom: 8px;
}

.hub-first-steps .first-steps-head h3 {
    font-size: 15px;
}

.hub-first-steps .first-steps-head p {
    display: none;
}


/* ---------- Gesetze: Gesetzesseite mit KI-Orb (buildLawMock) ----------
   Kleine weiße Seite mit § 433 BGB. Ohne Hover: der KI-Orb pulsiert, ein
   zarter Lesebalken wandert über den Text. Hover: Seite hebt sich, die
   Passage „frei von Sach- und Rechtsmängeln“ markiert sich und rechts
   oben erscheint „Lexi fragen“. Farben: KI-Verlauf aus ai-chat.css. */
.hub-law {
    --law-a: #445ff2;
    --law-b: #cb50f7;
    position: relative;
    z-index: 1;
    display: block;
    /* Breit genug, dass Absatz 1 in fünf Zeilen passt; die Seite muss in den
       Bildbereich der Kachel (~144px hoch auf 13") passen */
    width: min(74%, 210px);
    transition: transform 0.3s var(--hub-ease);
}

.hub-law-page {
    position: relative;
    display: block;
    /* unten Platz für den Orb */
    padding: 8px 10px 20px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.28), 0 2px 6px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    font-family: var(--font-family);
    color: #475569;
    text-align: left;
}

.hub-law-head {
    display: block;
    margin-bottom: 5px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 7.5px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hub-law-head b {
    color: var(--law-a);
    margin-right: 3px;
}

.hub-law-text {
    display: block;
    font-size: 6.8px;
    line-height: 1.4;
    margin: 0;
}

/* Markierung füllt sich beim Hover von links */
.hub-law-mark {
    color: inherit;
    background-color: transparent;
    background-image: linear-gradient(color-mix(in srgb, var(--law-a) 26%, transparent), color-mix(in srgb, var(--law-a) 26%, transparent));
    background-repeat: no-repeat;
    background-size: 0% 100%;
    border-radius: 2px;
    transition: background-size 0.45s ease-out;
}

/* Lesebalken: zarter Schimmer, der von oben nach unten über den Text läuft */
.hub-law-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--law-a) 10%, transparent), transparent);
    animation: hub-law-scan 4.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes hub-law-scan {
    0%, 15% { top: -14px; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    85%, 100% { top: 100%; opacity: 0; }
}

/* KI-Orb rechts unten auf der Seite */
.hub-law-orb {
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--law-a), var(--law-b));
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--law-b) 45%, transparent);
    animation: hub-law-pulse 2.4s ease-out infinite;
}

.hub-law-orb i {
    width: 9px;
    height: 9px;
    color: #fff;
}

@keyframes hub-law-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--law-b) 45%, transparent); }
    70% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--law-b) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--law-b) 0%, transparent); }
}

/* Sprechblase „Lexi fragen“ über dem Orb (innerhalb der Kachel, die
   Kachel schneidet mit overflow:hidden ab), erscheint beim Hover */
.hub-law-bubble {
    position: absolute;
    right: 4px;
    bottom: 26px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--law-a), var(--law-b));
    color: #fff;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(99, 102, 241, 0.35);
    opacity: 0;
    transform: translateY(6px) scale(0.92);
    transition: opacity 0.25s ease, transform 0.3s var(--hub-ease);
}

.hub-law-bubble i {
    width: 10px;
    height: 10px;
    color: #fff;
}

@media (hover: hover) {
    .hub-tile:hover .hub-law {
        transform: translateY(-4px) scale(1.05);
    }

    .hub-tile:hover .hub-law-mark {
        background-size: 100% 100%;
        transition-delay: 0.15s;
    }

    .hub-tile:hover .hub-law-bubble {
        opacity: 1;
        transform: translateY(0) scale(1);
        transition-delay: 0.5s;
    }
}

.hub-tile:focus-visible .hub-law-mark {
    background-size: 100% 100%;
}

.hub-tile:focus-visible .hub-law-bubble {
    opacity: 1;
    transform: none;
}

body.glass-theme .hub-law-page {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.72);
}

body.glass-theme .hub-law-head {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

@media (prefers-reduced-motion: reduce) {
    .hub-law-scan,
    .hub-law-orb {
        animation: none;
    }

    .hub-law-scan {
        display: none;
    }
}