/* === Stadt und Gemeinschaft Wien — Startseite ===
   Type scale: Hero h1 → text-2xl serif. Description → text-base sans.
   Card titles → text-lg sans 600. Stats/meta → text-sm sans muted.
   Spacing: kompakt, alles auf einen Screen ohne Scroll. */

/* ── Buehne ──────────────────────────────────────────────────
   Die Startseite zentriert ihre Bloecke etwas enger als der
   Wide-Container (90 rem), damit der Stack auf gaengigen
   Viewports nicht randlos wirkt und mehr Atem am Seitenrand
   bekommt. Vertikal wird der Hero von der Topbar weggerueckt,
   so dass der Inhalt insgesamt mittiger sitzt. */
.start-page {
    max-width: 76rem;
    margin: 0 auto;
    padding-top: var(--space-xl);
}

/* ── Hero ───────────────────────────────────────────────────── */
.start-hero {
    text-align: center;
    max-width: var(--max-width);
    margin: 0 auto var(--space-lg);
    padding-bottom: var(--space-md);
}

.start-hero h1 {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 var(--space-xs);
}

.start-hero-desc {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-text-muted);
    max-width: 44rem;
    margin: 0 auto;
    line-height: var(--leading-body, 1.45);
}


/* ── Entry cards ────────────────────────────────────────────── */
.start-entry-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

/* Card surface: base look from components.css; here we control inner layout. */
.start-entry-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
    color: var(--color-text);
    /* Anker für Provenance-Popover, damit sie sich an der Card und nicht
       am schmalen Zahl-Trigger ausrichten. */
    position: relative;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.start-entry-card:hover,
.start-entry-card:focus-within {
    border-color: var(--anno-person);
    box-shadow: var(--shadow-md);
}

/* Hauptlink innerhalb der Card (Icon + Titel) */
.start-entry-card-main {
    display: block;
    text-decoration: none;
    color: inherit;
}
.start-entry-card-main:hover .start-entry-card-title,
.start-entry-card-main:focus-visible .start-entry-card-title {
    color: var(--anno-person);
}

.start-entry-card-icon {
    color: var(--anno-person);
    margin-bottom: var(--space-xs);
    line-height: 0;
}
.start-entry-card-icon svg { width: 28px; height: 28px; }

.start-entry-card-title {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

/* Spalten-Header in der Korpus-Matrix sind Tooltip-Trigger; gleiche
   visuelle Sprache wie inline-Zahlen, nur konsistent zentriert/rechts. */
.start-card-matrix thead th .tip-trigger {
    text-transform: inherit;
    letter-spacing: inherit;
    color: inherit;
}

/* ── Card-Listen (Korpora, Personen-Aufschlüsselung) ──────────────── */
.start-card-corpora {
    list-style: none;
    margin: var(--space-xs) 0 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.start-card-corpora li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-md);
    padding: 0.2rem 0;
    line-height: 1.3;
}
.start-card-corpora-label {
    flex: 1;
    min-width: 0;
    /* Erlaubt natürlichen Umbruch bei langen Korpus-Labels */
    overflow-wrap: anywhere;
}
.start-card-corpora-count {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.start-card-corpora-total {
    border-top: 1px solid var(--color-border-light);
    margin-top: 0.2rem;
    padding-top: 0.4rem;
    color: var(--color-text);
    font-weight: 600;
}
.start-card-corpora-total strong { font-weight: 600; }

/* ── Korpus-Matrix (Card 1: Quellen/Nennungen/Events pro Korpus) ───── */
.start-card-matrix {
    width: 100%;
    margin: var(--space-xs) 0 0;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    table-layout: fixed;
}
.start-card-matrix thead th {
    /* Kleinere Kopfschrift ohne Sperrung, damit auch das lange Label
       "Gesamtnennungen" auf einer Zeile bleibt und alle Spaltentitel
       buendig stehen. Umbruch nur als Sicherheitsnetz auf sehr schmalen
       Screens, dann unten ausgerichtet. */
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--color-text-light);
    padding: 0 0 0.3rem;
    text-align: right;
    vertical-align: bottom;
    overflow-wrap: anywhere;
    hyphens: auto;
    border-bottom: 1px solid var(--color-border-light);
}
.start-card-matrix thead th:first-child {
    text-align: left;
    width: 34%;
}
/* Zahlenspalten: Quellen/Events schmal, Gesamtnennungen breiter, damit das
   lange Label auf eine Zeile passt. Der Platz kommt aus der Korpus-Spalte. */
.start-card-matrix thead th[data-col="sources"],
.start-card-matrix thead th[data-col="events"] {
    width: 16%;
}
.start-card-matrix thead th[data-col="mentions"] {
    width: 34%;
}
.start-card-matrix tbody th,
.start-card-matrix tfoot th {
    font-weight: 400;
    text-align: left;
    padding: 0.25rem 0.5rem 0.25rem 0;
    overflow-wrap: anywhere;
}
.start-card-matrix tbody th .corpus-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}
.start-card-matrix tbody th .corpus-link:hover,
.start-card-matrix tbody th .corpus-link:focus-visible {
    color: var(--anno-person);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.start-card-matrix tbody td,
.start-card-matrix tfoot td {
    text-align: right;
    padding: 0.25rem 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.start-card-matrix tfoot th,
.start-card-matrix tfoot td {
    border-top: 1px solid var(--color-border-light);
    padding-top: 0.45rem;
    color: var(--color-text);
    font-weight: 600;
}
.start-card-matrix tfoot th { font-weight: 600; }
.start-card-matrix--dense {
    font-size: var(--text-xs);
}
.start-card-matrix--dense thead th,
.start-card-matrix--dense tbody th,
.start-card-matrix--dense tbody td,
.start-card-matrix--dense tfoot th,
.start-card-matrix--dense tfoot td {
    padding: 0.15rem 0.3rem 0.15rem 0;
}

/* ── Zwei Wege: Exploration und Analyse als gleichberechtigte Säulen ───
   Abstand nach oben deutlich grösser, damit die Section sich klar
   von den Entry-Cards löst. */
.start-twoways {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
}

.start-twoways-column {
    display: flex;
    flex-direction: column;
}

.start-twoways-heading {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--space-md);
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-align: center;
}

.start-twoways-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: var(--space-sm);
    flex: 1;
    align-content: start;
}

/* Kompaktere Explore-Hub-Cards auf der Startseite. grid-auto-rows: 1fr
   zwingt alle Cards einer Zeile auf gleiche Hoehe; min-height haelt
   die Mindest-Hoehe, falls eine Spalte fuer sich alleine steht. */
.start-twoways-grid .explore-hub-card {
    padding: var(--space-md);
    min-height: 12rem;
    height: 100%;
}
.start-twoways-grid .explore-hub-card-icon { margin-bottom: var(--space-xs); }
.start-twoways-grid .explore-hub-card-icon svg { width: 28px; height: 28px; }
.start-twoways-grid .explore-hub-card-title { font-size: var(--text-base); }
.start-twoways-grid .explore-hub-card-desc { font-size: var(--text-sm); margin-bottom: var(--space-xs); }

/* Responsive */
@media (max-width: 900px) {
    .start-entry-grid { grid-template-columns: 1fr; }
    .start-twoways { grid-template-columns: 1fr; gap: var(--space-lg); }
}

@media (max-width: 768px) {
    .start-entry-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .start-twoways-grid { grid-template-columns: 1fr; }
}


/* ── Open-Beta-Begrüßung ─────────────────────────────────────── */
.start-beta-note {
    max-width: var(--max-width);
    margin: var(--space-lg) auto 0;
    padding: var(--space-md);
    background: var(--color-bg-warm);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-lg);
}

.start-beta-note-title {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 600;
    margin: 0 0 var(--space-xs);
    color: var(--color-text);
}

.start-beta-note p {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: var(--leading-body);
    margin: 0;
    max-width: 46rem;
}

.start-beta-note a {
    color: var(--color-accent);
    font-weight: 600;
}