/*
 * BPM Ratgeber Theme
 * Farbpalette aus der Live-Shop-CSS (admorris.css) extrahiert.
 * Headline-Font 'Speed' ist eine im Shop-Template lizenzierte Font und wird
 * hier durch 'Anton' (Google Font, frei) als optisch ähnliche, kräftige
 * Display-Schrift ersetzt. Austausch in :root --font-heading möglich.
 */

:root {
    /* Farben — Petrol & Orange 1:1 aus der Live-Shop-CSS geprüft (bpmproshop.de) */
    --color-primary: #12272f;
    --color-primary-deep: #08272f;
    --color-accent: #b4633c;
    --color-accent-dark: #8a5a3b;
    --color-olive: #65734f;
    --color-olive-dark: #4d5940;
    --color-accent-light: #dd9868;
    --color-slate: #607785;
    --color-sand: #f2ede4;
    --color-text: #233943;
    --color-border: #e4dfd4;
    --color-bg: #ffffff;
    /* Link-/CTA-Blau 1:1 aus der Live-Shop-CSS (a, a:hover in admorris.css). */
    --color-link: #06c;
    --color-link-hover: #004080;
    --color-cta-hover: #004c99;
    --color-white: #ffffff;

    /* Typografie */
    --font-body: 'Assistant', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-heading: 'Anton', Arial, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.85rem;
    --font-size-md: 0.9rem;
    --font-size-lg: 1.1rem;

    /* Containerbreite — an .container der Live-Shop-Seite (~1160px) angelehnt */
    --max-width: 1160px;

    /* Abstände — deckt die im Theme tatsächlich verwendeten Werte ab */
    --space-04: 0.4rem;
    --space-05: 0.5rem;
    --space-06: 0.6rem;
    --space-075: 0.75rem;
    --space-1: 1rem;
    --space-125: 1.25rem;
    --space-15: 1.5rem;
    --space-175: 1.75rem;
    --space-2: 2rem;
    --space-25: 2.5rem;
    --space-3: 3rem;
    --space-35: 3.5rem;

    /* Höhe der Wellen-Dekoration im Hauptmenü (site-header, .menu-decoration) —
       eigene Variable statt zweimal derselbe Pixelwert, siehe layout.css */
    --nav-decoration-height: 16px;

    /* Radius — an gemessenen Shop-Werten (Panel-Ecken 8px / 18px) ausgerichtet */
    --radius: 8px;
    --radius-lg: 18px;
    --radius-pill: 999px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--color-primary);
    line-height: 1.15;
    text-wrap: balance;
}

h1 { font-size: 2.4rem; margin: 0 0 1rem; letter-spacing: -0.01em; }
h2 { font-size: 1.5rem; margin: 0 0 0.5rem; }

p {
    text-wrap: pretty;
}

a {
    color: var(--color-link);
    text-decoration: none;
}

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

/* Fließtext-Links: zusätzlich zur Farbe auch unterstrichen, für ein
   zweites, farbunabhängiges Erkennungsmerkmal im Content. */
.page__content a,
.sidebar-box__text a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Accessibility: focus + skip link */

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -3rem;
    background: var(--color-white);
    color: var(--color-primary);
    padding: var(--space-06) var(--space-1);
    border-radius: var(--radius);
    font-weight: 700;
    font-size: var(--font-size-md);
    z-index: 200;
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: 1rem;
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
    }
}

@media (max-width: 640px) {
    h1 { font-size: 1.9rem; }
}