/* ============================================================
   Isoheimet — Zentrales Basis-Stylesheet
   ============================================================
   Enthaelt die auf (fast) allen Seiten identische CSS-Basis:
   Reset, Farb-/Design-Tokens, Navigation, Mobile-Menue, Footer,
   Content-Hero (Wurf-Detailseiten).

   WICHTIG: Wo eine einzelne Seite bewusst abweicht (z.B. index.html
   mit transparenter Hero-Nav, oder Seiten mit eigenem Nav-Verhalten),
   behaelt diese Seite ihre eigene Regel im lokalen <style>-Block —
   die lokale Regel steht im Markup NACH diesem Stylesheet-Link und
   gewinnt daher die Kaskade fuer genau diesen Selektor. Nichts wurde
   an diesen abweichenden Seiten veraendert.

   Automatisch aus den zuvor duplizierten Seiten-<style>-Bloecken
   extrahiert (Juli 2026) — Ziel: eine globale Aenderung nur noch an
   EINER Stelle statt in 28 Dateien einzeln.
   ============================================================ */

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

/* Nur fuer Screenreader sichtbar (SEO/A11y: H1 vorhanden, ohne das
   Design zu veraendern — z.B. wenn der Titel bereits im Hero-Bild steht). */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body {
            font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--color-bg);
            color: var(--color-text);
            line-height: 1.6;
        }

:root {
            --color-primary: #FF0000;
            --color-primary-light: #FF5252;
            --color-secondary: #1A1A1A;
            --color-bg: #FAFAFA;
            --color-surface: #FFFFFF;
            --color-accent: #D4A574;
            --color-text: #333333;
            --color-text-light: #444444;
            --shadow: 0 2px 8px rgba(0,0,0,0.1);
            --shadow-hover: 0 4px 16px rgba(0,0,0,0.15);
        }

nav {
            background: var(--color-surface);
            padding: 1rem 2rem;
            box-shadow: var(--shadow);
            position: sticky;
            top: 0;
            z-index: 100;
        }

.nav-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.logo { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; font-weight: 700; color: var(--color-primary); }

.nav-links {
            display: flex;
            gap: 2rem;
            list-style: none;
        }

.nav-links a {
            text-decoration: none;
            color: var(--color-text);
            font-weight: 500;
            transition: color 0.3s;
        }

.nav-links a:hover, .nav-links a.active { color: var(--color-primary); }

/* Mobile menu toggle (hamburger) — jetzt ein <button> statt <div> (Tastaturbedienbarkeit),
   daher native Button-Optik zuruecksetzen, damit das Aussehen exakt gleich bleibt. */
        .menu-toggle {
            display: none;
            flex-direction: column;
            justify-content: space-between;
            width: 30px;
            height: 21px;
            cursor: pointer;
            z-index: 1000;
            position: relative; /* Positionierungskontext fuer die vergroesserte Klickflaeche unten */
            background: none;
            border: none;
            padding: 0;
            font: inherit;
            color: inherit;
            -webkit-appearance: none;
            appearance: none;
        }

/* Sichtbarer Fokus-Indikator fuer Tastaturnutzer (WCAG 2.4.7) */
.menu-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Vergroessert die tatsaechliche Klickflaeche auf 44x44px (WCAG-Touch-Target),
   ohne das sichtbare Hamburger-Icon oder die X-Transform-Animation beim
   Oeffnen zu veraendern (unsichtbarer, zentrierter Hit-Bereich). */
.menu-toggle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

.menu-toggle span {
            display: block;
            width: 100%;
            height: 3px;
            background: var(--color-secondary);
            border-radius: 3px;
            transition: all 0.3s ease;
        }

.mobile-nav {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: var(--color-surface);
            z-index: 999;
            padding: 6rem 2rem 2rem;
            transform: translateX(100%);
            transition: transform 0.3s ease;
        }

.mobile-nav.active { transform: translateX(0); }

.mobile-nav ul { list-style: none; }

.mobile-nav li { margin-bottom: 1.5rem; }

.mobile-nav a { text-decoration: none; color: var(--color-secondary); font-size: 1.5rem; font-weight: 600; }

footer {
            background: var(--color-secondary);
            color: white;
            padding: 3rem 2rem 2rem;
        }

.footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 3rem;
        }

.footer-brand h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; margin-bottom: 1rem; color: var(--color-primary-light); }

.footer-brand p { color: rgba(255,255,255,0.7); margin-bottom: 1.5rem; }

.footer-links h3 {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: var(--color-primary-light);
        }

.footer-links h4 {
            font-size: 1rem;
            margin-bottom: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

.footer-links ul {
            list-style: none;
        }

.footer-links li {
            margin-bottom: 0.5rem;
        }

.footer-links a {
            color: rgba(255,255,255,0.7);
            text-decoration: none;
        }

.footer-links a:hover { color: var(--color-primary-light); }

.footer-logos { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }

.footer-logos img { height: 50px; width: auto; opacity: 0.9; transition: opacity 0.3s ease; }

.footer-logos img:hover { opacity: 1; }

.footer-bottom {
            max-width: 1200px;
            margin: 3rem auto 0;
            padding-top: 2rem;
            border-top: 1px solid rgba(255,255,255,0.1);
            text-align: center;
            opacity: 0.6;
            font-size: 0.875rem;
        }

.footer-bottom a { color: inherit; text-decoration: none; }

.content-hero { width: 100%; height: 320px; background: #f0ece6; display: flex; align-items: center; justify-content: center; text-align: center; color: white; margin-bottom: 2rem; border-radius: 16px; overflow: hidden; position: relative; }

.content-hero img { width: 100%; height: 100%; object-fit: contain; display: block; position: absolute; inset: 0; }

.content-hero::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.35); }

.content-hero .hero-text { position: relative; z-index: 1; padding: 2rem; }

.content-hero .hero-text h1 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.5rem, 6vw, 4rem); margin-bottom: 1rem; }

.content-hero .hero-text p { font-size: 1.2rem; opacity: 0.9; }