/* ============================================================
   XRechnungen – Layout: Main Container, Typography, Footer
   ============================================================ */

/* ── Main container ──────────────────────────────────────── */
main.container {
    max-width: 1060px;
    margin: 32px auto;
    padding: 0 20px;
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;   /* allows flex children to shrink */
}
main.container.wide { max-width: 1200px; }

/* ── Headings ────────────────────────────────────────────── */
h1 { margin: 0 0 6px; font-size: 1.75em; letter-spacing: -0.01em; }
h2 {
    margin: 0 0 12px; font-size: 1.05em; color: var(--muted);
    letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
}
h3 { margin: 18px 0 6px; font-size: 1em; }

.lead { color: var(--muted); font-size: 1.05em; margin: 6px 0 26px; max-width: 640px; }

/* ── Table scroll wrapper ───────────────────────────────── */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Page header row (h1 + layman-toggle side by side) ──── */
.page-header-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; margin-bottom: 4px;
}

/* ── Footer ──────────────────────────────────────────────── */
.footer {
    text-align: center; padding: 20px;
    color: var(--muted); font-size: 0.85em;
    border-top: 1px solid var(--border);
    background: var(--surface);
}
.footer a {
    color: var(--fg);
    text-decoration: underline;
    opacity: 0.75;
}
.footer a:hover { opacity: 1; color: var(--primary); }