/*
Theme Name: Altstadtfest Lingen Design
Description: Theme für das Altstadtfest Lingen. Inhalte kommen aus dem Plugin "Altstadtfest Lingen Logik".
Author: CyberForge GmbH
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: altstadtfest
*/

/* ===================================================================
 * Schrift
 *
 * Ziel-Font ist Frutiger. Bis Lizenz und Font-Dateien geklärt sind,
 * läuft die Seite auf Source Sans 3 (SIL Open Font License, frei für
 * Web-Einsatz, lokal gehostet – kein CDN, DSGVO-unkritisch).
 *
 * Source Sans 3 ist wie Frutiger eine humanistische Grotesk mit offenen
 * Punzen und ähnlichen Proportionen – die Anmutung bleibt also erhalten.
 *
 * Umstellung auf Frutiger später:
 *   1. Font-Dateien nach assets/fonts/ legen
 *   2. Den auskommentierten @font-face-Block unten aktivieren
 *   3. Fertig – "Frutiger" steht im Stack bereits an erster Stelle.
 * ================================================================= */

@font-face {
    font-family: 'Source Sans 3';
    src: url('assets/fonts/source-sans-3-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('assets/fonts/source-sans-3-latin-600-normal.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('assets/fonts/source-sans-3-latin-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: 'Frutiger';
    src: url('assets/fonts/frutiger-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
*/

/* ===================================================================
 * Design-Tokens
 * ================================================================= */

:root {
    --af-rot:   rgb(219, 57, 49);
    --af-weiss: #ffffff;

    --af-font: 'Frutiger', 'Source Sans 3', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ===================================================================
 * Basis
 * ================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--af-font);
    font-weight: 400;
    line-height: 1.5;
    color: var(--af-weiss);
    background-color: var(--af-rot);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===================================================================
 * Platzhalter-Startseite
 * ================================================================= */

.af-platzhalter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 8vmin 6vw;
    background-color: var(--af-rot);
    text-align: center;
}

.af-platzhalter__wortmarke {
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    /* skaliert stufenlos von Handy bis Desktop */
    font-size: clamp(2.25rem, 9vw, 7.5rem);
    line-height: 1.02;
    letter-spacing: 0.02em;
    text-wrap: balance;
    hyphens: none;
}

.af-platzhalter__zeile {
    display: block;
}

/* dritte Zeile (Jahreszahl) etwas ruhiger gesetzt */
.af-platzhalter__jahr {
    font-weight: 400;
    letter-spacing: 0.14em;
    margin-left: 0.14em; /* gleicht das Sperren optisch aus */
}

.af-platzhalter__hinweis {
    margin: clamp(1.5rem, 4vh, 3rem) 0 0;
    font-size: clamp(0.875rem, 1.6vw, 1.0625rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
}

@media (prefers-reduced-motion: no-preference) {
    .af-platzhalter__wortmarke {
        animation: af-einblenden 0.7s ease-out both;
    }
}

@keyframes af-einblenden {
    from { opacity: 0; transform: translateY(0.4rem); }
    to   { opacity: 1; transform: none; }
}