.home-hero { text-align: center; margin: 18px 0 24px; }
    .home-hero h1 { font-size: 28px; font-weight: 700; margin-bottom: 6px; }
    .home-hero p { color: var(--text-dim); font-size: 14px; margin: 0; }
    .home-hero a { font-weight: 600; }

    .section-title {
        font-size: 15px; font-weight: 700; color: var(--text);
        margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
    }
    .recent-docs-section { margin-bottom: 32px; }

    /* -- Featured slider: a hero banner carousel above "Zuletzt besucht", each
       slide an image, gif (also just an <img> — browsers animate those natively)
       or a muted/looping video, with a title+text overlay. Auto-advances,
       pauses on hover, and supports arrows/dots/swipe (see attachSwipe below). -- */
    .featured-slider { position: relative; border-radius: 14px; overflow: hidden; margin-bottom: 28px; height: 300px; background: var(--panel-alt); touch-action: pan-y; }
    .featured-slider-track { position: relative; width: 100%; height: 100%; }
    .featured-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
    .featured-slide.active { opacity: 1; z-index: 1; }
    /* The slides are screenshots of the app (1600×640): anchored at the top so the
       header and toolbars stay in view whatever the slider's width. */
    .featured-slide img, .featured-slide video { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
    .featured-slide-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 22px; pointer-events: none; }
    .featured-slide-box { display: inline-block; max-width: min(72%, 640px); padding: 10px 14px; border-radius: 10px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
    .featured-slide-title { font-size: 19px; font-weight: 700; margin-bottom: 3px; }
    .featured-slide-text { font-size: 13px; opacity: .92; }
    .featured-slider-arrow {
        position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
        width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
        background: rgba(0,0,0,.35); color: #fff; display: flex; align-items: center; justify-content: center;
        font-size: 18px; line-height: 1; transition: background .15s;
    }
    .featured-slider-arrow:hover { background: rgba(0,0,0,.55); }
    .featured-slider-prev { left: 12px; }
    .featured-slider-next { right: 12px; }
    .featured-slider-dots { position: absolute; z-index: 2; bottom: 14px; right: 20px; display: flex; gap: 6px; }
    .featured-slider-dots button { width: 7px; height: 7px; border-radius: 50%; border: none; background: rgba(255,255,255,.5); cursor: pointer; padding: 0; transition: background .15s, transform .15s; }
    .featured-slider-dots button.active { background: #fff; transform: scale(1.3); }

    /* -- Paged grid: once a vault/recent-doc grid would need more than two rows,
       page through the rest instead of an ever-growing list. Swipe (attachSwipe)
       and the prev/next/dots controls share the same page-state object, so
       either input method stays in sync. -- */
    /* overflow was deliberately dropped here: since renderPagedGrid replaces the
       grid's children on every page instead of keeping sibling pages around, there
       is nothing left to clip horizontally — but a hidden overflow was clipping
       the first row's folder-icon hover animation (it pops upward past the card's
       own box) against the search bar above it. touch-action alone is enough for
       the swipe gesture. */
    .paged-grid-wrap { touch-action: pan-y; }
    .paged-grid-track { animation: pagedGridIn .25s ease; }
    @keyframes pagedGridIn { from { opacity: .4; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
    .grid-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
    .grid-pager-arrow {
        width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel);
        color: var(--text); font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center;
        transition: border-color .15s, color .15s; line-height: 1;
    }
    .grid-pager-arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
    .grid-pager-arrow:disabled { opacity: .35; cursor: default; }
    .grid-pager-dots { display: flex; gap: 6px; }
    .grid-pager-dot { width: 7px; height: 7px; border-radius: 50%; border: none; background: var(--border); cursor: pointer; padding: 0; transition: background .15s, transform .15s; }
    .grid-pager-dot.active { background: var(--accent); transform: scale(1.3); }

    .vault-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 28px; }
    .vault-search-wrap { position: relative; flex: 1 1 240px; max-width: 320px; }
    .vault-search-wrap svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-dim); pointer-events: none; }
    .vault-search-wrap input {
        width: 100%; padding: 8px 12px 8px 34px; border: 1px solid var(--border); border-radius: 8px;
        background: var(--panel); color: var(--text); font-size: 13px; font-family: var(--sans); box-sizing: border-box;
    }
    .vault-search-wrap input:focus { outline: none; border-color: var(--accent); }
    .vault-filter-pills { display: flex; flex-wrap: wrap; gap: 6px; }
    .vault-filter-pill {
        padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-alt);
        color: var(--text-dim); font-size: 12px; font-weight: 600; cursor: pointer; transition: .15s; font-family: var(--sans);
    }
    .vault-filter-pill:hover { border-color: var(--accent); color: var(--text); }
    .vault-filter-pill.active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }

    .vault-grid {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px;
    }
    .vault-empty-hint {
        text-align: center; color: var(--text-dim); font-size: 13.5px;
        border: 1px dashed var(--border); border-radius: 10px; padding: 22px;
    }

    /* -- Right-click "open in…" menu for vault/recent-doc cards -- */
    .open-context-menu {
        position: fixed; z-index: 2000; min-width: 170px;
        background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
        box-shadow: 0 10px 28px rgba(0,0,0,.28); padding: 6px;
    }
    .open-context-menu button {
        display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--text);
        padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; font-family: var(--sans);
    }
    .open-context-menu button:hover { background: var(--panel-alt); }

    /* -- Vault card. position:relative + a raised z-index on hover so the info
       flyout (an absolutely positioned sibling-overlapping panel, not an actual
       grid resize) can render above neighbouring cards without the grid itself
       reflowing/jumping. -- */
    .vault-card, .recent-doc-card {
        position: relative; z-index: 1;
        display: flex; flex-direction: column; align-items: center; text-align: center;
        background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
        padding: 18px 12px 14px; cursor: pointer; font-family: var(--sans);
        transition: border-color .15s, transform .15s, box-shadow .15s;
    }
    .vault-card:hover, .recent-doc-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.12); z-index: 30; }
    .vault-card:focus-visible, .recent-doc-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .vault-card .vault-name {
        font-weight: 600; font-size: 13.5px; color: var(--text); max-width: 100%;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .vault-badges-row { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; justify-content: center; }
    .vault-badge {
        font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
        letter-spacing: .2px;
    }
    .vault-badge.badge-public { background: var(--note-bg); color: var(--accent-warm); border: 1px solid var(--note-border); }
    .vault-badge.badge-own { background: var(--panel-alt); color: var(--text-dim); border: 1px solid var(--border); }
    .vault-badge.badge-shared { background: var(--panel-alt); color: var(--accent); border: 1px solid var(--border); }
    .vault-badge.badge-category { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
    .vault-badge.badge-external { background: transparent; color: var(--accent-warm); border: 1px solid var(--note-border); }

    /* -- Info flyout: appears to the right of the card on hover, visually reading
       as the card "doubling in width" without disturbing the grid layout of
       neighbouring cards. Flips to the left near the right edge of the viewport
       (see the mouseenter handler in the script below). Shared by vault cards and
       recent-document cards. -- */
    .vault-info-flyout {
        position: absolute; top: 0; left: 100%; margin-left: 10px; width: calc(100% - 6px); height: 100%;
        background: var(--panel); border: 1px solid var(--accent); border-radius: 12px; padding: 14px;
        text-align: left; box-sizing: border-box;
        opacity: 0; pointer-events: none; transform: translateX(-6px);
        transition: opacity .18s ease, transform .18s ease;
        box-shadow: 0 12px 28px rgba(0,0,0,.2);
        display: flex; flex-direction: column; justify-content: center; gap: 10px;
    }
    .vault-card:hover .vault-info-flyout, .recent-doc-card:hover .vault-info-flyout { opacity: 1; transform: translateX(0); }
    .vault-card.flip-left .vault-info-flyout, .recent-doc-card.flip-left .vault-info-flyout {
        left: auto; right: 100%; margin-left: 0; margin-right: 10px; transform: translateX(6px);
    }
    .vault-card.flip-left:hover .vault-info-flyout, .recent-doc-card.flip-left:hover .vault-info-flyout { transform: translateX(0); }
    .vault-info-row { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .vault-info-label { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim); font-weight: 700; }
    .vault-info-value { font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    @media (max-width: 700px) {
        .vault-info-flyout {
            position: static; margin: 10px 0 0; width: 100%; height: auto;
            opacity: 1; transform: none; box-shadow: none; display: none;
        }
        .vault-card:hover .vault-info-flyout, .recent-doc-card:hover .vault-info-flyout { display: flex; }
    }


    .recent-doc-name { font-weight: 600; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
    .recent-doc-share-icon { display: inline-flex; color: var(--accent); flex-shrink: 0; }

    /* Visited public links (see renderPublicVisits): a card can be forgotten with its ×. */
    .recent-doc-card { position: relative; }
    .recent-doc-remove { position: absolute; top: 6px; right: 8px; width: 20px; height: 20px; line-height: 18px; text-align: center; border-radius: 50%; color: var(--text-dim); font-size: 15px; opacity: 0; transition: opacity .15s; }
    .recent-doc-card:hover .recent-doc-remove { opacity: .8; }
    .recent-doc-remove:hover { background: var(--panel-alt); color: var(--text); opacity: 1 !important; }
    @media (hover: none) { .recent-doc-remove { opacity: .6; } }