/* Aus dem Relaunch-Stylesheet uebernommen (Phase 8, B4/B5).
   Aufgeteilt an den Abschnittsgrenzen der Quelle, weil das
   Regelwerk CSS auf 400 Zeilen begrenzt. */

/**
 * Lisa Sundermeyer - Stylesheet
 */

/* ==========================================================================
   Fonts (lokal)
   ========================================================================== */

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

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

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
    /* Colors - Farben von prod.lisa-sundermeyer.de */
    --color-primary: #BB939c;
    --color-primary-dark: #87686f;
    /* Fuer weisse Schrift auf farbigem Grund: #bb939c traegt nur 2.70,
       dieser Ton 4.50. Nur dort einsetzen, wo Text darauf steht. */
    --color-primary-deep: #9f6774;
    --color-primary-light: #EBD9DE;

    --color-secondary: #c99e67;
    --color-secondary-dark: #a8845a;
    /* Schrift, Rahmen und Fokus auf hellem Grund: derselbe Farbton, nur
       dunkel genug fuer den Kontrastwert 4.5 (gemessen 4.52 auf #fdf7f1,
       4.80 gegen Weiss). #c99e67 selbst erreicht nur 2.30 und bleibt
       deshalb der dekorative Wert fuer Fuellungen und Striche. */
    --color-secondary-text: #946a35;

    /* Der Ton der Überschriften, derselbe Wert wie auf prod. Ein
       Zwischenstand stand hier auf einem Fastschwarz mit höherem
       Kontrast; das ist auf Wunsch zurückgenommen. Das Token bleibt, weil
       sechs Stildateien es nutzen und weil damit Überschrift und Akzent
       getrennt bleiben -- nur mit dem ursprünglichen Ton. */
    --color-heading: #87686f;

    --color-text: #666666;
    /* Beide Werte waren zu hell: #888888 erreichte 3.33, #999999 nur 2.68.
       Jetzt 5.01 und 4.52 auf #fdf7f1 - die Abstufung bleibt erhalten. */
    --color-text-light: #6b6b6b;
    --color-text-muted: #727272;

    --color-bg: #fdf7f1;
    --color-bg-alt: #f5f0eb;
    --color-bg-dark: #e3ccaf;

    --color-white: #ffffff;
    --color-black: #1a1a1a;

    --color-success: #4caf50;
    --color-error: #e53935;
    --color-warning: #ff9800;

    /* Typography - Fonts von prod */
    /* Dieselbe Kette wie auf prod (assets/css/style.css, Regel für h1, h2
       und h2 a). Ein Zwischenstand hat hier eine selbst gehostete
       Displayserife davorgesetzt; das ist auf Wunsch zurückgenommen. */
    --font-heading: 'Charter', 'Bitstream Charter', 'Sitka Text', Cambria, serif;
    --font-body: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Schriftgroessen wachsen zwischen 22rem und 100rem Fensterbreite mit.
       Ohne das aendert sich ab der Containerbreite nichts mehr und der
       Zuwachs geht vollstaendig in den Aussenrand. */
    --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
    --font-size-sm: clamp(0.85rem, 0.82rem + 0.15vw, 0.95rem);
    --font-size-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.4rem);
    --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
    --font-size-2xl: clamp(1.6rem, 1.3rem + 1.5vw, 2.6rem);
    --font-size-3xl: clamp(2rem, 1.5rem + 2.5vw, 3.6rem);
    /* Eine Stufe über 3xl, nur für die h1 einer Titelseite. Der Abstand
       zwischen den beiden größten Stufen war zu klein, um Rang zu zeigen.
       Gerechnet mit rem = 19px (siehe html): 390px Fenster ergibt 44px,
       1440px ergibt 91px, darüber hält der Deckel bei 91px. Damit bleibt
       das Telefon ohne Umbruch mitten im Wort. */
    --font-size-4xl: clamp(2.3rem, 1.4rem + 4.5vw, 4.8rem);

    --line-height-base: 1.65;
    --line-height-heading: 1.2;

    /* Abstaende wachsen ebenfalls mit, damit der Weissraum im Verhaeltnis
       zur Schrift bleibt. */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: clamp(1.25rem, 1rem + 0.8vw, 2rem);
    --space-xl: clamp(1.75rem, 1.4rem + 1.2vw, 3rem);
    --space-2xl: clamp(2.5rem, 1.8rem + 2.5vw, 5rem);
    --space-3xl: clamp(3.5rem, 2.2rem + 4vw, 8rem);

    /* Layout: die Lesebreite steht in ch, damit die Zeilenlaenge unabhaengig
       von der Schriftgroesse bei angenehmen 66 Zeichen bleibt. */
    --container-max: clamp(60rem, 88vw, 96rem);
    --container-narrow: 66ch;
    --container-breit: clamp(60rem, 92vw, 110rem);

    /* Borders */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
}

/* Dark Mode */
/* Im Dunkelmodus tragen die Farben von sich aus genug Kontrast (gemessen
   5.45 bis 13.18 gegen #1a1a1a); dort ist der dekorative Wert auch als
   Schriftfarbe tragfaehig. */
@media (prefers-color-scheme: dark) {
    :root {
        --color-secondary-text: #d4b080;
        --color-primary: #d4aab3;
        --color-primary-dark: #c49aa3;
        /* Im Dunkelmodus ist die Schrift darauf dunkel; der helle Ton
           traegt 8.45 gegen #1a1a1a. */
        --color-primary-deep: #d4aab3;
        --color-primary-light: #4a3a3d;

        --color-secondary: #d4b080;
        --color-secondary-dark: #c9a570;

        /* Im Dunkelmodus derselbe Wert wie --color-primary-dark dort. */
        --color-heading: #c49aa3;

        --color-text: #e0e0e0;
        --color-text-light: #b0b0b0;
        --color-text-muted: #909090;

        --color-bg: #1a1a1a;
        --color-bg-alt: #242424;
        --color-bg-dark: #2d2d2d;

        --color-white: #1a1a1a;
        --color-black: #f5f5f5;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5);
    }

    .site-header {
        background: #242424;
    }

    .logo img {
        filter: brightness(0.9);
    }

    img {
        opacity: 0.9;
    }
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */

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

html {
    font-size: 19px;
    scroll-behavior: smooth;
}

body {
    /* Ein flaechiges Bild ist so breit wie das Fenster. 100vw zaehlt dabei
       die Bildlaufleiste mit, die Nutzflaeche aber nicht - der Ueberstand
       liess die Seite seitlich schieben. clip schneidet ihn ab, ohne einen
       Rollbereich zu erzeugen; hidden wuerde einen erzeugen und damit das
       Rollverhalten der Seite an dieses Element binden. */
    overflow-x: clip;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: 1.58;
    letter-spacing: -0.003em;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Ein sichtbarer Fokus fuer alles, was den Fokus bekommen kann. Der Umriss
   des Browsers uebernahm die Schriftfarbe und lag damit bei 2.30; verlangt
   sind 3.0 fuer den Fokusanzeiger. */
:focus-visible {
    outline: 3px solid var(--color-secondary-text);
    outline-offset: 2px;
}

/* Wer Bewegung abbestellt hat, bekommt keine. Uebergaenge liegen an Karten,
   Schaltflaechen, Schieber und Editorleiste. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

a {
    color: var(--color-primary-dark);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-text);
}

/* HTML-hidden bleibt auch gegenüber Grid- und Flex-Regeln wirksam. */
[hidden]:not([hidden="until-found"]) {
    display: none !important;
}

/* Fließtextverweise sind dauerhaft auch ohne Farbunterscheidung erkennbar. */
.lesebereich :where(p, li, dd, td, figcaption) a:not(.knopf):not(.karte) {
    text-decoration: underline;
    text-underline-offset: 0.15em;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    /* 100 wie auf prod. */
    font-weight: 100;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-heading);
    margin-bottom: var(--space-md);
    hyphens: auto;
    overflow-wrap: anywhere;
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); margin-top: var(--space-xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }

p {
    margin-bottom: var(--space-md);
}