/* ╔══════════════════════════════════════════════════════════════╗
   ║  HEILKUNSTRAUM.BERLIN – SPITZEN-CSS v4.1.1               ║
   ║  Mobile‑First · Dark‑Mode · Floating Toggle · Lightbox   ║
   ║  Footer‑Fix: separate Variablen für Dark‑Mode            ║
   ╚══════════════════════════════════════════════════════════════╝
   Wartung: Änderungen bitte nur mit Bewusstsein für die
   globalen Design Tokens (§1) und die Dark‑Mode‑Überschreibungen
   (§1‑Dark) vornehmen. Der Footer (§17) nutzt jetzt feste,
   vom Modus unabhängige Variablen, um hässliche Hell‑Brüche
   im Dark‑Mode zu verhindern. */

/* ═══════════════════════════════════════════════════════════════
   §1  DESIGN TOKENS (LIGHT MODE)
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* Basis: Wände & Licht */
    --plaster:        #EDE8DC;
    --plaster-warm:   #F5F1E8;
    --birkenrinde:    #F5F2ED;
    
    /* Holz & Erde */
    --oak-parkett:    #8A6535;
    --erde-dunkel:    #4A3F35;
    
    /* Gold & Licht */
    --gold:           #C9971C;
    --gold-hell:      #E8B820;
    --gold-blass:     #FDF6E0;
    --amber-licht:    #E8931A;
    
    /* Seelenfarben */
    --larimar-blau:   #7FADB8;
    --larimar-tief:   #5A8A96;
    --weiden-gruen:   #9AB68E;
    --birken-gruen:   #7B9E6B;
    --sand:           #D7C4AA;
    --ocker:          #C89D6E;
    
    /* Akzente */
    --sage-wand:      #ACC5A8;
    --foliage:        #5A8C50;
    
    /* Text */
    --text-primary:   #1E1C1A;
    --text-secondary: #544E48;
    --text-muted:     #908880;
    --text-inverse:   #FAFAF8;
    
    /* Oberflächen */
    --bg-body:        var(--birkenrinde);
    --bg-section:     var(--plaster);
    --bg-section-warm:var(--plaster-warm);
    --bg-card:        var(--birkenrinde);
    --bg-nav:         rgba(245, 242, 237, 0.82);
    
    /* Schatten */
    --shadow-soft:    0 4px 20px rgba(74, 63, 53, 0.06);
    --shadow-medium:  0 8px 30px rgba(74, 63, 53, 0.12);
    --shadow-gold:    0 0 24px rgba(201, 151, 28, 0.25);
    --shadow-modal:   0 20px 60px rgba(0, 0, 0, 0.4);
    
    /* Typografie */
    --font-display:   'Cormorant Garamond', 'Palatino Linotype', Georgia, serif;
    --font-body:      'Inter', 'Helvetica Neue', Arial, sans-serif;
    
    /* Footer (fest, unabhängig vom Modus) */
    --footer-bg:      var(--text-primary);   /* dunkel */
    --footer-text:    var(--text-inverse);   /* hell  */
    
    font-size: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   §1‑DARK  DARK MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    --plaster:        #2A2520;
    --plaster-warm:   #302B26;
    --birkenrinde:    #25211C;
    
    --text-primary:   #F5F1E8;
    --text-secondary: #C9C0B0;
    --text-muted:     #8A8070;
    --text-inverse:   #1E1C1A;
    
    --bg-body:        #1A1612;
    --bg-section:     var(--plaster);
    --bg-section-warm:var(--plaster-warm);
    --bg-card:        #2E2924;
    --bg-nav:         rgba(26, 22, 18, 0.85);
    
    --shadow-soft:    0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-medium:  0 8px 30px rgba(0, 0, 0, 0.5);
    --shadow-gold:    0 0 24px rgba(201, 151, 28, 0.4);
    --shadow-modal:   0 20px 60px rgba(0, 0, 0, 0.7);
    
    --gold-blass:     #3E3520;
    
    /* Footer im Dark‑Mode – behält einen dunklen Hintergrund */
    --footer-bg:      #1A1612;   /* noch tieferes Dunkel */
    --footer-text:    #F5F1E8;   /* hell, lesbar           */
}

/* ═══════════════════════════════════════════════════════════════
   §2  RESET & BASIS
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
    background-color: var(--bg-body);
    background-image: radial-gradient(
        ellipse at 50% 30%,
        var(--birkenrinde) 0%,
        var(--plaster) 100%
    );
    background-attachment: fixed;
    min-height: 100vh;
    font-weight: 350;
    transition: background-color 0.4s ease, color 0.4s ease;
    overflow-x: hidden;
    max-width: 100vw;
}

main {
    max-width: 100vw;
    overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   §3  TYPOGRAFIE
   ═══════════════════════════════════════════════════════════════ */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--text-primary);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

h2 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
}
h2::after {
    content: '';
    display: block;
    width: 50%;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
    margin-top: 0.25rem;
}

h3 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

@media (min-width: 500px) {
    h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
    h3 { font-size: clamp(1.4rem, 3vw, 2rem); }
}

p {
    max-width: 680px;
    margin-bottom: 1rem;
}

a {
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease, color 0.3s ease;
}
a:hover {
    color: var(--amber-licht);
    border-bottom-color: var(--gold);
}

/* Hilfsklassen für Text */
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-italic-muted {
    color: var(--text-secondary);
    font-style: italic;
}
.text-klein-muted {
    font-size: 0.9rem;
    color: var(--text-muted);
}
.text-secondary-intro {
    margin-bottom: 2rem;
    color: var(--text-secondary);
}

/* Credo */
.credo {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-style: italic;
    color: var(--ocker);
    border-left: 3px solid var(--gold);
    padding-left: 1.5rem;
    margin: 2rem 0;
    max-width: 720px;
}
@media (min-width: 500px) {
    .credo { font-size: clamp(1.3rem, 2.5vw, 2rem); }
}

/* Hero‑Frage */
.hero-frage {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--text-primary);
    text-align: center;
    margin: 2rem 0 1.5rem;
}
.hero-frage span {
    display: block;
    font-size: 0.5em;
    color: var(--text-secondary);
    font-style: italic;
}
@media (min-width: 500px) {
    .hero-frage { font-size: clamp(2rem, 5vw, 3.6rem); }
}

.hero-sub {
    max-width: 500px;
    margin: 0 auto 1.5rem;
    color: var(--text-secondary);
    text-align: center;
}

.hero-claim {
    max-width: 600px;
    margin: 1.5rem auto;
    color: var(--text-secondary);
    line-height: 1.8;
    text-align: center;
}
.hero-claim strong {
    color: var(--text-primary);
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   §4  LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 600px) {
    .container { padding: 0 1.5rem; }
}

.sektion {
    padding: 3rem 0;
    position: relative;
}
@media (min-width: 600px) {
    .sektion { padding: clamp(3rem, 8vw, 6rem) 0; }
}

.sektion-warm { background-color: var(--bg-section-warm); }
.sektion-erdig { background-color: var(--bg-section); }

.grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}
@media (min-width: 700px) {
    .grid-2 { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   §5  DREI KAMMERN (Hero‑Nachbereich)
   ═══════════════════════════════════════════════════════════════ */
.drei-kammern {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 0 auto;
    max-width: 1000px;
}
@media (min-width: 600px) {
    .drei-kammern {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1.5rem;
    }
}

.kammer-card {
    background: var(--bg-card);
    border: 1px solid rgba(74, 63, 53, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-soft);
    transition: all 0.3s ease;
}
.kammer-card:hover {
    box-shadow: var(--shadow-medium);
    transform: translateY(-2px);
}

.kammer-highlight {
    border-color: var(--gold);
    background: var(--gold-blass);
}

.kammer-icon {
    display: inline-block;
    color: var(--gold);
    margin-bottom: 0.5rem;
}

.kammer-card h3 {
    font-family: var(--font-display);
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
}

.kammer-card p {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

.kammer-card .btn {
    margin-top: 0.5rem;
    padding: 0.5rem 1.2rem;
    font-size: 0.8rem;
}

/* ═══════════════════════════════════════════════════════════════
   §6  NAVIGATION
   ═══════════════════════════════════════════════════════════════ */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    background: var(--bg-nav);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(74, 63, 53, 0.08);
}

.nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.75rem 1rem;
}
@media (min-width: 600px) {
    .nav-inner { padding: 0.75rem 1.5rem; }
}

.nav-logo {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: none;
}
.nav-logo span { color: var(--gold); }
@media (min-width: 400px) {
    .nav-logo { font-size: 1.5rem; }
}

/* Hamburger */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 110;
}
.hamburger span {
    width: 2rem;
    height: 2px;
    background: var(--text-primary);
    transition: all 0.3s ease;
    transform-origin: 1px;
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg); }

/* Mobile‑Menü */
.nav-links {
    position: fixed;
    top: 0;
    right: -110%;
    width: 260px;
    height: 100vh;
    background: var(--bg-nav);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    list-style: none;
    display: flex;
    flex-direction: column;
    padding: 6rem 1.5rem 2rem;
    gap: 1.2rem;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 105;
}
.nav-links.active { right: 0; }

.nav-links a {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: none;
    color: var(--text-primary);
    font-weight: 400;
}
.nav-links a:hover { color: var(--gold); }

/* Desktop‑Navigation */
@media (min-width: 768px) {
    .hamburger { display: none; }
    .nav-links {
        position: static;
        width: auto;
        height: auto;
        flex-direction: row;
        background: transparent;
        backdrop-filter: none;
        padding: 0;
        gap: 2rem;
    }
    .nav-links a { font-size: 0.85rem; }
}

/* ═══════════════════════════════════════════════════════════════
   §7  FLOATING DARK‑TOGGLE
   ═══════════════════════════════════════════════════════════════ */
.floating-dark-toggle {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    z-index: 150;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 1.5px solid var(--gold);
    background: var(--bg-card);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    box-shadow: var(--shadow-medium);
    transition: all 0.3s ease;
}
.floating-dark-toggle:hover {
    box-shadow: var(--shadow-gold);
    transform: scale(1.05);
}
.floating-dark-toggle svg {
    width: 1.2rem;
    height: 1.2rem;
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
@media (min-width: 600px) {
    .floating-dark-toggle {
        bottom: 2rem;
        left: 2rem;
        width: 2.8rem;
        height: 2.8rem;
    }
    .floating-dark-toggle svg {
        width: 1.3rem;
        height: 1.3rem;
    }
}

/* Icon‑Sichtbarkeit je Modus */
[data-theme="dark"] .icon-sonne { opacity: 1; transform: rotate(0); }
[data-theme="dark"] .icon-mond  { opacity: 0; transform: rotate(-90deg); }
:root:not([data-theme="dark"]) .icon-sonne,
[data-theme="light"] .icon-sonne { opacity: 0; transform: rotate(90deg); }
:root:not([data-theme="dark"]) .icon-mond,
[data-theme="light"] .icon-mond  { opacity: 1; transform: rotate(0); }

/* ═══════════════════════════════════════════════════════════════
   §8  BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.6rem 1.5rem;
    border: 1px solid var(--text-primary);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 2px;
    text-decoration: none;
}
.btn:hover {
    background: var(--text-primary);
    color: var(--birkenrinde);
    border-color: var(--text-primary);
}

.btn-gold {
    border-color: var(--gold);
    color: var(--gold);
}
.btn-gold:hover {
    background: var(--gold);
    color: var(--birkenrinde);
    box-shadow: var(--shadow-gold);
}

@media (min-width: 600px) {
    .btn {
        font-size: clamp(0.85rem, 1.8vw, 0.95rem);
        padding: 0.75rem 2rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   §9  HERO
   ═══════════════════════════════════════════════════════════════ */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 85vh;
    padding: 5rem 1rem 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
@media (min-width: 600px) {
    .hero {
        min-height: 95vh;
        padding: 6rem 1.5rem 4rem;
    }
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(circle at 30% 45%, rgba(127, 173, 184, 0.04) 0%, transparent 55%),
        radial-gradient(circle at 70% 55%, rgba(200, 157, 110, 0.04) 0%, transparent 55%),
        radial-gradient(circle at 50% 80%, rgba(232, 147, 26, 0.03) 0%, transparent 50%);
    animation: hero-atmen 14s ease-in-out infinite alternate;
    z-index: 0;
    pointer-events: none;
}

@keyframes hero-atmen {
    0%   { opacity: 0.7; transform: scale(1); }
    100% { opacity: 1;   transform: scale(1.03); }
}

.hero > * {
    position: relative;
    z-index: 1;
}

/* ── Hero‑Slideshow (weicher Crossfade) ── */
.hero-slideshow {
    position: relative;
    width: 100%;
    max-width: 900px;
    aspect-ratio: 3 / 2;
    margin: 1.5rem 0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--shadow-medium);
    transition: box-shadow 0.6s ease;
}
.hero-slideshow:hover {
    box-shadow: var(--shadow-gold), var(--shadow-medium);
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: hero-fade 30s ease-in-out infinite;
}

.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 10s; }
.hero-slide:nth-child(3) { animation-delay: 20s; }

@keyframes hero-fade {
    0%   { opacity: 0; }
    4%   { opacity: 1; }
    30%  { opacity: 1; }
    34%  { opacity: 0; }
    100% { opacity: 0; }
}

@media (max-width: 600px) {
    .hero-slideshow {
        max-width: 100%;
        aspect-ratio: 4 / 3;
    }
}
/* ═══════════════════════════════════════════════════════════════
   §10  ATMOSPHÄRE‑PODEST & PLATZHALTER
   ═══════════════════════════════════════════════════════════════ */
.atmosphaere-podest {
    margin: 2rem 0;
    padding: 1rem;
    border-left: 3px solid var(--gold);
    background: var(--gold-blass);
    border-radius: 0 4px 4px 0;
    max-width: 500px;
    font-style: italic;
    color: var(--text-secondary);
}
@media (min-width: 500px) {
    .atmosphaere-podest { padding: 1.25rem 1.5rem; }
}

.enroute-platzhalter {
    margin: 2rem 0;
    padding: 1.2rem;
    background: var(--bg-card);
    border: 1px dashed var(--gold);
    border-radius: 6px;
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}

.platzhalter-icon {
    font-style: normal;
    margin-right: 0.3rem;
    vertical-align: middle;
    display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════
   §11  GALERIE & LIGHTBOX
   ═══════════════════════════════════════════════════════════════ */
.raum-galerie,
.impressionen-galerie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
}
@media (min-width: 500px) {
    .raum-galerie,
    .impressionen-galerie {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 0.75rem;
    }
}

.galerie-bild {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-soft);
}
@media (min-width: 500px) {
    .galerie-bild { height: 160px; }
}
.galerie-bild:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-medium);
}

/* ── Lightbox Overlay ── */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.94);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.lightbox.active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox img {
    max-width: 98vw;
    max-height: 70vh;
    border-radius: 6px;
    box-shadow: 0 12px 60px rgba(0, 0, 0, 0.7);
    transform: scale(0.95);
    transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}
@media (min-width: 600px) {
    .lightbox img {
        max-width: 95vw;
        max-height: 85vh;
    }
}
.lightbox.active img { transform: scale(1); }

.lightbox-caption {
    position: absolute;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.85rem;
    font-style: italic;
    text-align: center;
    max-width: 85%;
    opacity: 0.9;
}
@media (min-width: 600px) {
    .lightbox-caption {
        bottom: 4rem;
        font-size: 1rem;
    }
}

.lightbox-counter {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

.lightbox-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 2.2rem;
    cursor: pointer;
    z-index: 210;
    line-height: 1;
}
.lightbox-close:hover { color: var(--gold); }
@media (min-width: 600px) {
    .lightbox-close {
        top: 1.25rem;
        right: 1.5rem;
        font-size: 3rem;
    }
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 2.8rem;
    cursor: pointer;
    z-index: 210;
    padding: 0.8rem;
}
.lightbox-nav:hover { color: var(--gold); }
@media (min-width: 600px) {
    .lightbox-nav {
        font-size: 4rem;
        padding: 1.5rem;
    }
}
.lightbox-prev { left: 0.3rem; }
.lightbox-next { right: 0.3rem; }
@media (min-width: 600px) {
    .lightbox-prev { left: 0.5rem; }
    .lightbox-next { right: 0.5rem; }
}

/* Lightbox‑Elemente im Dark‑Mode immer hell */
.lightbox .lightbox-close,
.lightbox .lightbox-caption,
.lightbox .lightbox-counter,
.lightbox .lightbox-nav {
    color: #FAFAF8 !important;
}

/* ═══════════════════════════════════════════════════════════════
   §12  MODALE (Impressum & Datenschutz)
   ═══════════════════════════════════════════════════════════════ */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.modal.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 1.5rem;
    border-radius: 8px;
    max-width: 700px;
    width: 92%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--shadow-modal);
    z-index: 310;
    border: 1px solid rgba(201, 151, 28, 0.3);
}
@media (min-width: 600px) {
    .modal-content { padding: 2.5rem; }
}

.modal-content h2 { margin-bottom: 1.5rem; }
.modal-content p {
    max-width: 100%;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

.modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--text-primary);
    cursor: pointer;
}
.modal-close:hover { color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════
   §13  CARDS & TABELLE
   ═══════════════════════════════════════════════════════════════ */
.card {
    background: var(--bg-card);
    border: 1px solid rgba(74, 63, 53, 0.1);
    border-radius: 6px;
    padding: 1.5rem;
    box-shadow: var(--shadow-soft);
    transition: all 0.4s ease;
}
.card:hover {
    box-shadow: var(--shadow-medium);
    border-color: var(--larimar-blau);
    transform: translateY(-3px);
}

.card h3 {
    font-family: var(--font-display);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.preis {
    font-size: 1.1rem;
    color: var(--gold);
    margin-bottom: 0.5rem;
    font-weight: 450;
}

/* Tabelle – mobil scrollbar */
.tabelle-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.5rem 0;
}

.tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    min-width: 500px;
}
@media (min-width: 600px) {
    .tabelle { font-size: clamp(0.8rem, 1.8vw, 1rem); }
}

.tabelle th,
.tabelle td {
    padding: 0.6rem 0.8rem;
    text-align: left;
    border-bottom: 1px solid rgba(74, 63, 53, 0.1);
}

.tabelle th {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--text-primary);
}

.tabelle tr:hover td { background-color: var(--gold-blass); }
.tabelle .preis-spalte {
    text-align: right;
    font-weight: 500;
    color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════════
   §14  STATEMENT‑BLOCK & KERAMIK
   ═══════════════════════════════════════════════════════════════ */
.statement-block {
    margin-top: 1.5rem;
    padding: 1.2rem;
    background: var(--bg-card);
    border-radius: 6px;
    box-shadow: var(--shadow-soft);
    text-align: center;
}
.statement-block p {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}
@media (min-width: 500px) {
    .statement-block p { font-size: 1.3rem; }
}

.statement-signatur {
    font-size: 0.8rem;
    color: var(--gold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.keramik-vignette {
    background: var(--bg-card);
    border: 1px solid rgba(74, 63, 53, 0.08);
    border-radius: 8px;
    padding: 1.2rem;
    text-align: center;
    box-shadow: var(--shadow-soft);
    transition: all 0.4s ease;
    margin-top: 1rem;
}
.keramik-vignette:hover {
    box-shadow: var(--shadow-gold);
    border-color: var(--gold);
}

.keramik-vignette img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.keramik-vignette p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
}

.keramik-vignette a {
    color: var(--gold);
    border-bottom: 1px solid transparent;
}

.logo-bild {
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-soft);
    border-radius: 4px;
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   §15  ANIMATIONEN
   ═══════════════════════════════════════════════════════════════ */
@keyframes enthuelle {
    from { opacity: 0; translate: 0 24px; }
    to   { opacity: 1; translate: 0 0; }
}

.enthuelle {
    animation: enthuelle 0.9s cubic-bezier(0.19, 1, 0.22, 1) both;
    animation-timeline: view();
    animation-range: entry 5% cover 25%;
}

/* Fallback für Browser ohne Scroll‑Animationen */
@supports not (animation-timeline: view()) {
    .enthuelle {
        opacity: 1;
        translate: 0;
        animation: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   §16  FOOTER (mit festen Dark‑Mode‑Variablen)
   ═══════════════════════════════════════════════════════════════ */
footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    padding: 3rem 1rem;
    text-align: center;
    font-size: 0.9rem;
}
@media (min-width: 600px) {
    footer { padding: 4rem 1.5rem; }
}

footer a {
    color: var(--sand);
    border-bottom: 1px solid transparent;
}
footer a:hover {
    color: var(--gold-hell);
    border-bottom-color: var(--gold-hell);
}

.footer-titel {
    color: var(--sand);
}

.footer-mantra {
    font-family: var(--font-display);
    font-size: 1rem;
    font-style: italic;
    color: var(--sand);
    margin: 1.5rem 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 500px) {
    .footer-mantra { font-size: 1.2rem; }
}

.footer-address {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 1rem 0;
}

.footer-recht {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Goldene Linie im Footer */
footer hr {
    border-color: rgba(255, 255, 255, 0.15);
}

/* ═══════════════════════════════════════════════════════════════
   §17  FEINE DETAILS
   ═══════════════════════════════════════════════════════════════ */
::selection {
    background-color: var(--ocker);
    color: var(--birkenrinde);
}

img {
    max-width: 100%;
    height: auto;
    border-radius: 3px;
}

hr {
    border: none;
    border-top: 1px solid rgba(74, 63, 53, 0.12);
    margin: 2rem 0;
    max-width: 300px;
}

/* Screen‑Reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Skip‑Link für Tastatur‑Navigation */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--gold);
    color: #000;
    padding: 8px;
    z-index: 200;
}
.skip-link:focus { top: 0; }

/* ═══════════════════════════════════════════════════════════════
   §18  RESPONSIVE (globale Korrekturen)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .hero { min-height: 80vh; padding-top: 4rem; }
    .sektion { padding: 3rem 0; }
    .container { padding: 0 1rem; }
    .grid-2 { grid-template-columns: 1fr; }
}