/* ============================================================
   home.css — Startseite Layout
   Nur page-spezifische Styles. Alle UI-Komponenten
   (nav-card, tab-bar-pills, badge, status-dot, grid-*) kommen
   aus shared.css / shared-ui.css.
   Header-Titel/Tagline: .page-header-title/.page-header-tagline
   aus shared.css — nur Deltas hier.
   ============================================================ */


/* BEGIN LAYOUT */
.home-page {
    display:        flex;
    flex-direction: column;
    height:         100vh;
    overflow:       hidden;
}

.home-header {
    padding:     36px var(--space-8) 0;
    text-align:  center;
    flex-shrink: 0;
}

.home-header .page-header-title {
    letter-spacing: -0.02em;
}

.home-header .page-header-tagline {
    font-size: 0.62rem;
}

.home-main {
    flex:           1;
    display:        flex;
    flex-direction: column;
    padding:        var(--space-8) var(--space-8) var(--space-6);
    max-width:      1100px;
    width:          100%;
    margin:         0 auto;
    min-height:     0;
}
/* END LAYOUT */


/* BEGIN TAB-ROW */
.home-tab-row {
    display:       flex;
    align-items:   center;
    gap:           var(--space-2);
    margin-bottom: var(--space-6);
    flex-shrink:   0;
}

.home-tab-row .tab-bar-pills {
    overflow-x:      auto;
    scrollbar-width: none;
}

.home-tab-row .tab-bar-pills::-webkit-scrollbar { display: none; }
.home-tab-row .tab-bar-pills.is-dragging        { cursor: grabbing; user-select: none; }

.home-tab-divider {
    flex:       1;
    height:     1px;
    background: var(--border);
}

.home-tab-status {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    font-family: var(--font-mono);
    font-size:   var(--text-2xs);
    color:       var(--color-success);
    flex-shrink: 0;
}
/* END TAB-ROW */


/* BEGIN PANES */
.home-pane {
    display: none;
    flex:    1;
}

.home-pane.is-active {
    display:        flex;
    flex-direction: column;
}
/* END PANES */


/* BEGIN RESPONSIVE */
@media (max-width: 900px) {
    .home-page        { height: auto; min-height: 100vh; min-height: 100dvh; overflow-y: auto; }
    .home-tab-divider { display: none; }
    .home-tab-status  { display: none; }
    .home-tab-row .tab-bar-pills { flex-wrap: nowrap; }
}

@media (max-width: 640px) {
    .home-main   { padding: var(--space-6) var(--space-5) var(--space-4); }
    .home-header { padding: var(--space-6) var(--space-5) 0; }
}
/* END RESPONSIVE */