/* Florivio Web-Fonts — DSGVO-konform selbst gehostet (Issue #87 Cluster D)
 *
 * Fonts: Newsreader (Headings) + IBM Plex Sans (Body)
 * Quelle: Bunny Fonts (DSGVO-konformer Spiegel von Google Fonts ohne Tracking).
 * Lizenz: Open Font License (OFL)
 *
 * font-display: swap = sofortiger Render mit System-Font, dann Swap wenn Font geladen.
 * Verhindert FOIT (Flash of Invisible Text). Akzeptiert kurzzeitige FOUT (Flash of Unstyled Text).
 */

@font-face {
    font-family: 'Newsreader';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/newsreader-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Newsreader';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/newsreader-600.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/ibmplexsans-400.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/ibmplexsans-500.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/ibmplexsans-600.woff2') format('woff2');
}

/* Anwendung — IBM Plex Sans als Body, Newsreader fuer Ueberschriften */
body,
.modal-body,
.dropdown-menu,
input, textarea, select, button {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
    /* Newsreader ist eine Serif-Font — minimaler Letterspacing fuer bessere Lesbarkeit */
    letter-spacing: -0.005em;
}

/* Card-Header H5 sollen NICHT Serif sein (passt nicht zur kompakten UI-Aesthetik) */
.card-header h5,
.card-header h6,
.card-title,
.modal-title {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

/* Mobile Hyphenation (Issue #87 F.1) — verhindert hassliche Wortbrueche
 * wie "Fuehrerscheinpruefun-g" auf schmalen Card-Titles.
 * Greift NUR auf Mobile (<768px) und in Card-Titles, sonst kann es Body-Text
 * unschoen aufbrechen. */
@media (max-width: 767.98px) {
    .card-title,
    .card-header h5,
    .card-header h6 {
        hyphens: auto;
        word-break: normal;
        overflow-wrap: break-word;
    }
}