/* ============================================================
   ETF-Kompass – main.css  v2.0
   Shared Business Service UG · sbs-ug.de
   ============================================================ */

/* ── Schriften (lokal, kein Google CDN) ──────────────────── */
body {
    font-family: 'SourceSerif4', Georgia, serif;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .font-display {
    font-family: 'Syne', sans-serif;
}

/* ── Trend-Farben ─────────────────────────────────────────── */
.trend-up      { color: #16a34a; font-weight: 600; }
.trend-down    { color: #dc2626; font-weight: 600; }
.trend-neutral { color: #64748b; }

/* ── Kurstabellen ─────────────────────────────────────────── */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.data-table th {
    background: #0f1923;
    color: white;
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 16px;
    text-align: left;
}
.data-table th:not(:first-child) { text-align: right; }
.data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.data-table td:not(:first-child) { text-align: right; }
.data-table .quote-row { transition: background 0.1s; }
.data-table .quote-row:hover { background: #f8fafc; }
.data-table .quote-row:focus { outline: 2px solid #2563eb; outline-offset: -2px; }

/* ── Artikel / Ratgeber ───────────────────────────────────── */
.article-body p        { margin-bottom: 1rem; line-height: 1.85; }
.article-body h2       { font-family: 'Syne', sans-serif; font-size: 1.4rem; font-weight: 700; margin: 2rem 0 0.75rem; scroll-margin-top: 80px; }
.article-body h3       { font-family: 'Syne', sans-serif; font-size: 1.15rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
.article-body ul       { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.article-body li       { margin-bottom: 0.4rem; }
.article-body strong   { font-weight: 600; }

/* ── Infoboxen ────────────────────────────────────────────── */
.infobox {
    border-left: 4px solid #2563eb;
    background: #eff6ff;
    padding: 1rem 1.25rem;
    border-radius: 0 8px 8px 0;
    margin: 1.5rem 0;
    font-size: 0.9rem;
    line-height: 1.7;
}
.infobox.warn {
    border-color: #d97706;
    background: #fffbeb;
}

/* ── AdSense-Platzhalter (Development) ───────────────────── */
.adsense-placeholder {
    background: #f0f4f8;
    border: 1px dashed #aab;
    padding: 16px;
    text-align: center;
    color: #888;
    font-size: 12px;
    margin: 8px 0;
    border-radius: 4px;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
    .data-table th,
    .data-table td { padding: 8px 10px; font-size: 0.8rem; }
    .hide-mobile   { display: none; }
}

/* ── Tailwind-Ergänzungen (falls kein vorkompiliertes CSS) ── */
.bg-paper  { background-color: #faf8f4; }
.bg-ink    { background-color: #0f1923; }
.text-ink  { color: #0f1923; }
.text-muted { color: #64748b; }
.text-accent { color: #2563eb; }
.font-body { font-family: 'SourceSerif4', Georgia, serif; }