/*
 * ==================================================
 * PURELIFEONWHEELS – DESIGN-COCKPIT
 * ==================================================
 *
 * Zentrale Einstellungen für Farben, Schriften,
 * Inhaltsbreiten, Abstände und Formen.
 *
 * Nach Änderungen: Strg + F5 im Browser.
 */

:root {

    /* ===== 1. MARKENFARBEN ===== */

    --color-primary: #85896a;
    --color-secondary: #626749;
    --color-dark: #171717;

    --color-background: #f5f4f0;
    --color-surface: #ffffff;
    --color-surface-alt: #f5f4f0;

    --color-text: #171717;
    --color-text-muted: #666666;
    --color-link: #626749;

    --color-border: #dddddd;
    --color-border-soft: #dce0d3;


    /* ===== 2. BUTTONS UND FORMULARE ===== */

    --color-button: #85896a;
    --color-button-text: #ffffff;

    --color-input-background: #ffffff;
    --color-input-text: #171717;

    --radius-button: 24px;
    --radius-input: 6px;


    /* ===== 3. BLOG UND COMMUNITY ===== */

    --color-post-share: #85896a;
    --color-post-share-hover-text: #ffffff;

    --color-post-community-background: #f5f4f0;
    --color-post-community-border: #dce0d3;
    --color-post-community-link: #85896a;

    --font-size-post-community-heading: 1.25rem;
    --font-size-post-feedback: 0.9em;

    --radius-post-button: 24px;
    --radius-post-community: 10px;

    --post-community-padding: 22px 24px;


    /* ===== 4. FOOTER ===== */

    --color-footer-text: #666666;
    --color-footer-link: #626749;
    --color-footer-border: #dce0d3;

    --color-tooltip-background: #ffffff;
    --color-tooltip-text: #444444;
    --color-tooltip-border: #dce0d3;

    --font-size-footer: 0.85em;
    --font-size-tooltip: 0.8rem;
    --font-size-social-icons: 28px;

    --radius-tooltip: 8px;


    /* ===== 5. SCHRIFTEN ===== */

    --font-main: Arial, Helvetica, sans-serif;
    --font-heading: Arial, Helvetica, sans-serif;

    --font-size-base: 17px;
    --font-size-small: 0.9rem;

    /* Dezente, aber klare Überschriften */
    --font-size-h1: 2.2rem;
    --font-size-h2: 1.65rem;
    --font-size-h3: 1.25rem;

    --font-weight-normal: 400;
    --font-weight-bold: 800;

    --line-height: 1.6;


    /* ===== 6. INHALTSBREITEN ===== */

    --width-reading: 850px;
    --width-content: 1400px;
    --width-hero: 100%;

    --page-max-width: 1050px;
    --page-padding: 24px;


    /* ===== 7. KARTEN UND FORMEN ===== */

    --radius-card: 10px;

    --spacing-small: 8px;
    --spacing-medium: 20px;
    --spacing-large: 32px;


    /* ===== 8. FOTOGALERIE ===== */

    --gallery-gap: 5px;
    --gallery-row-height: 90px;
}