/* 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/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/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;
    --color-primary-light: #EBD9DE;

    --color-secondary: #c99e67;
    --color-secondary-dark: #a8845a;

    --color-text: #666666;
    --color-text-light: #888888;
    --color-text-muted: #999999;

    --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 */
    --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);

    --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 */
@media (prefers-color-scheme: dark) {
    :root {
        --color-primary: #d4aab3;
        --color-primary-dark: #c49aa3;
        --color-primary-light: #4a3a3d;

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

        --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);
    }

    .hero {
        background: linear-gradient(135deg, #2d2528 0%, #1a1a1a 100%);
    }

    .btn-primary {
        background: #d4aab3;
        color: #2a1e20;
    }

    .btn-primary:hover {
        background: #c49aa3;
        color: #1a1a1a;
    }

    .btn-outline {
        border-color: #c49aa3;
        color: #d4aab3;
    }

    .btn-outline:hover {
        background: rgba(196, 154, 163, 0.15);
    }

    img {
        opacity: 0.9;
    }
}

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

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

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

body {
    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;
}

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

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

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

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 100;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-primary-dark);
    margin-bottom: var(--space-md);
}

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);
}

.lead {
    font-size: var(--font-size-xl);
    color: var(--color-text-light);
}

.text-center { text-align: center; }

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 480px) {
    .hero h1 {
        font-size: 1.75rem;
    }

    .hero-small h1 {
        font-size: 2rem;
    }

    .btn-lg {
        padding: var(--space-sm) var(--space-lg);
    }

    .booking-widget {
        padding: var(--space-lg);
    }

    .service-item {
        padding: var(--space-lg);
    }
}