/* 
   Seelenschaetze - Premium Custom Styles
   Colors: Ivory (#f4f0ea), Gold (#c5a880), Anthracite (#2c2a27)
*/

/* 1. Typography & Local Fonts */
@font-face {
    font-family: 'Outfit';
    src: url('../assets/fonts/outfit-300-normal.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('../assets/fonts/outfit-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('../assets/fonts/outfit-600-normal.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../assets/fonts/cormorantgaramond-300-normal.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../assets/fonts/cormorantgaramond-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../assets/fonts/cormorantgaramond-400-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../assets/fonts/cormorantgaramond-600-normal.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../assets/fonts/cormorantgaramond-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* 2. Variables & Reset */
:root {
    --bg-main: #f4f0ea;
    --bg-light: #fbfaf8;
    --text-main: #33302b;
    --text-muted: #787167;
    --gold: #b59265;
    --gold-hover: #9c7b52;
    /* Wurde 14x in dieser Datei benutzt, war aber nur in admin.css definiert.
       Auf der oeffentlichen Seite (die admin.css nicht laedt) fielen alle diese
       Raender deshalb auf die Textfarbe zurueck - dunkel statt golden. */
    --gold-border: rgba(197, 168, 128, 0.25);
    --bg-card: #ffffff;
    --danger: #c0392b;
    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'Outfit', sans-serif;
    --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ring-offset: 15px;
}

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

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

body {
    font-family: var(--font-body);
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.25;
    color: #1c1a18;
}

h1 { font-size: 3.2rem; }
h2 { font-size: 2.6rem; margin-bottom: 1.2rem; text-align: center; }
h3 { font-size: 1.8rem; margin-bottom: 0.8rem; }

p {
    margin-bottom: 1.5rem;
    color: var(--text-muted);
}

/* Hilfsklassen. index.html und main.js benutzen text-center / mt-N / mb-N wie in
   Bootstrap, es gab sie aber nie - der Kompass-Untertitel stand deshalb links. Sie
   stehen bewusst VOR den Komponenten, damit deren eigene Abstaende gewinnen. */
.text-center { text-align: center; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 3rem; }

/* Fliesstext im Blocksatz (Entscheidung 01.09.2026): nur in echten Textbloecken,
   nie in zentrierten Kopfzeilen oder Karten. Silbentrennung (lang="de") verhindert
   Loecher in schmalen Spalten; unter 3 Silbenzeichen wird nicht getrennt. */
.about-text p,
.about-text blockquote,
.faq-content,
.step-content p,
.legal-content p,
.legal-content li {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 7 3 3;
}

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

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.section-padding {
    padding: 6rem 0;
}

.bg-light {
    background-color: var(--bg-light);
}

/* 3. Buttons */
.btn {
    display: inline-block;
    padding: 0.8rem 2rem;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border: none;
    border-radius: 50px;
    transition: var(--transition);
    text-align: center;
}

.btn-primary {
    background-color: var(--gold);
    color: #fff;
}
.btn-primary:hover {
    background-color: var(--gold-hover);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(197, 168, 128, 0.3);
}

.btn-outline {
    background-color: transparent;
    border: 1px solid var(--gold);
    color: var(--gold);
}
.btn-outline:hover {
    background-color: var(--gold);
    color: #fff;
}

.btn-text {
    background-color: transparent;
    color: var(--gold);
    padding: 0;
    border-radius: 0;
    border-bottom: 1px solid transparent;
}
.btn-text:hover {
    color: var(--gold-hover);
    border-bottom: 1px solid var(--gold-hover);
}
.btn-block {
    display: block;
    width: 100%;
}

/* 4. Header & Nav */
.main-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(244, 240, 234, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(181, 146, 101, 0.28);
    padding: 0.9rem 0;
    transition: var(--transition);
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

/* Wortmarke (kein Logo): Emblem aus zwei Goldringen + Vorname kursiv in der
   Ueberschriftenschrift, darunter der Name als gesperrte Grossbuchstaben-Zeile in Gold.
   Vorher stand der Name als ein einziger fetter Schriftzug da. */
.logo {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--text-main);
    text-decoration: none;
}
.marke-emblem {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    color: var(--gold);
    transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.logo:hover .marke-emblem { transform: rotate(90deg); }
.logo-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-main);
}
.logo-text.marke {
    display: flex;
    flex-direction: column;
    line-height: 1;
    font-weight: 400;
}
.marke-vorname {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 400;
    font-size: 1.75rem;
    letter-spacing: 0.01em;
    color: var(--text-main);
}
.marke-name {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: var(--gold);
    margin-top: 0.3rem;
    /* Der Sperrabstand haengt sonst rechts als Luft ueber */
    margin-right: -0.32em;
}

/* Navigation in der Serifenschrift der Ueberschriften, gesperrt; eine feine
   Goldlinie waechst beim Ueberfahren von links, beim aktuellen Abschnitt steht sie. */
.main-nav ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    align-items: center;
}
.main-nav a:not(.btn) {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-main);
    position: relative;
    padding: 0.35rem 0;
    /* "Über mich" ist der einzige zweiteilige Punkt und brach bei knapper
       Kopfzeile auf zwei Zeilen um. */
    white-space: nowrap;
    transition: color 0.3s ease;
}
.main-nav a:not(.btn)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0.09em;
    bottom: 0;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.main-nav a:not(.btn):hover,
.main-nav a.ist-aktiv:not(.btn) {
    color: var(--gold-hover);
}
.main-nav a:not(.btn):hover::after,
.main-nav a.ist-aktiv:not(.btn)::after {
    transform: scaleX(1);
}
.main-nav a.btn {
    font-family: var(--font-body);
    letter-spacing: 0.08em;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
}
.mobile-menu-toggle span {
    display: block;
    width: 25px;
    height: 2px;
    background-color: var(--text-main);
    margin: 5px 0;
    transition: var(--transition);
}

/* 5. Hero Section */
.hero-section {
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/images/hero_background.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -2;
    transform: scale(1.05); /* Slight zoom for parallax */
}

.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(244, 240, 234, 0.95) 0%, rgba(244, 240, 234, 0.75) 50%, rgba(244, 240, 234, 0.2) 100%);
    z-index: -1;
}

.hero-content {
    max-width: 600px;
    padding-top: 5rem;
}

.hero-content h1 {
    font-size: 4.5rem;
    margin-bottom: 1.5rem;
    font-weight: 400;
    color: var(--text-main);
}

.hero-content .subtitle {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
    font-weight: 400;
    color: var(--text-main);
}

.hero-content .highlight-gold {
    color: var(--gold);
    font-weight: 700;
}

/* 6. Gold Rings Image Container (Crucial Design Element) */
.gold-ring-container {
    position: relative;
    display: inline-block;
    padding: var(--ring-offset);
    margin: 2rem;
}

.circle-image {
    width: 350px;
    height: 350px;
    object-fit: cover;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    transition: var(--transition);
}

.gold-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--gold);
    transition: var(--transition);
}

.ring-1 {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-width: 2px;
    opacity: 0.7;
    transform: rotate(15deg);
}

.ring-2 {
    top: calc(var(--ring-offset) * 2);
    left: calc(var(--ring-offset) * -1);
    width: calc(100% - var(--ring-offset));
    height: calc(100% - var(--ring-offset));
    border-width: 1px;
    opacity: 0.4;
    transform: rotate(-15deg);
}

.gold-ring-container:hover .circle-image {
    transform: scale(1.03);
}
.gold-ring-container:hover .ring-1 {
    transform: rotate(45deg) scale(1.05);
}
.gold-ring-container:hover .ring-2 {
    transform: rotate(-45deg) scale(1.02);
}

.gold-ring-container.small {
    margin: 1rem;
    padding: 10px;
}
.gold-ring-container.small .circle-image {
    width: 200px;
    height: 200px;
}

/* 7. Grid Layouts (About, Camping) */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.about-grid.reverse .about-text {
    order: 2;
}
.about-grid.reverse .about-image-wrapper {
    order: 1;
}

/* Ueberschrift im Textblock linksbuendig: der Goldstrich (::after) sitzt bei left: 0 */
.about-text h2 {
    font-size: 3rem;
    position: relative;
    padding-bottom: 1rem;
    text-align: left;
}
.about-text h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 2px;
    background-color: var(--gold);
}

.about-image-wrapper {
    text-align: center;
}

/* Schatzkiste auf dem Handy: Wischstrecke. Ausserhalb von 768 px und in der Werkstatt
   bleibt das Raster; die Navigation darunter existiert dann nur unsichtbar im DOM. */
.schatz-nav { display: none; }
@media (max-width: 768px) {
    body:not(.is-editor) .products-grid.schatz-strecke {
        display: flex;
        gap: 0.9rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        /* Karte 78 % der Bildschirmbreite, links und rechts ragen die Nachbarn 11 % hinein
           (vw statt %, weil Prozent sich hier auf den Innenbereich ohne Polster beziehen) */
        scroll-padding-inline: 11vw;
        padding: 0.8rem 11vw 1.4rem;
        margin: 0 -2rem;          /* bis an die Bildschirmkanten, ueber den Container-Rand hinaus */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    body:not(.is-editor) .products-grid.schatz-strecke::-webkit-scrollbar { display: none; }
    body:not(.is-editor) .schatz-strecke .product-card {
        flex: 0 0 78vw;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        height: auto;
        padding: 1.6rem 1.4rem 1.7rem;
        opacity: 0.55;
        transform: scale(0.93);
        transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.45s ease,
                    box-shadow 0.45s ease, border-color 0.45s ease;
    }
    body:not(.is-editor) .schatz-strecke .product-card.ist-aktiv {
        opacity: 1;
        transform: none;
        box-shadow: 0 18px 44px rgba(60, 45, 25, 0.10);
        border-color: rgba(181, 146, 101, 0.35);
    }
    body:not(.is-editor) .schatz-strecke .product-card:hover { transform: none; }
    body:not(.is-editor) .schatz-strecke .product-card:not(.ist-aktiv):hover { transform: scale(0.93); }
    body:not(.is-editor) .schatz-strecke .card-image-mini {
        height: 210px;
        margin: -0.6rem -0.4rem 1.2rem;
        border-radius: 12px;
    }
    body:not(.is-editor) .schatz-strecke .product-card .btn-text {
        white-space: nowrap;
        font-size: 0.86rem;
        letter-spacing: 0.06em;
    }
    body:not(.is-editor) .schatz-strecke .product-card p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    body:not(.is-editor) .schatz-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        margin-top: 0.2rem;
    }
    .schatz-punkte { display: flex; align-items: center; gap: 0.45rem; }
    .schatz-punkt {
        width: 6px;
        height: 6px;
        padding: 0;
        border: 0;
        border-radius: 3px;
        background: rgba(181, 146, 101, 0.32);
        cursor: pointer;
        transition: width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.35s ease;
    }
    .schatz-punkt.ist-aktiv { width: 22px; background: var(--gold); }
    .schatz-zaehler {
        font-family: var(--font-heading);
        font-style: italic;
        font-size: 1.05rem;
        color: var(--text-muted);
        min-width: 4.2em;
    }
}
@media (prefers-reduced-motion: reduce) {
    .schatz-strecke .product-card, .schatz-punkt { transition: none; }
}

/* "Das bin ich" auf dem Handy: Stapel aus Ueberschrift, drei ueberlappenden Bildern und
   "Mehr erfahren". Ausserhalb der Handybreite existiert der Stapel nur im DOM, nie sichtbar. */
.about-stapel, .about-einklappen { display: none; }
.stapel-flug {
    position: absolute;
    z-index: 900;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--gold), 0 12px 30px rgba(0,0,0,0.12);
    transform-origin: center center;
    transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
    will-change: transform;
}
@media (max-width: 768px) {
    #about-container.ist-zu .about-grid,
    #about-container.ist-zu .about-einklappen { display: none; }
    #about-container.ist-zu .about-stapel {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.6rem;
    }
    .about-stapel h2 {
        position: relative;
        padding-bottom: 1rem;
        margin-bottom: 0;
    }
    .about-stapel h2::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 2px;
        background-color: var(--gold);
    }
    .stapel-bilder {
        display: flex;
        justify-content: center;
        padding: 0.6rem 0 0.2rem;
    }
    .stapel-bild {
        --groesse: clamp(96px, 30vw, 132px);
        width: var(--groesse);
        height: var(--groesse);
        border-radius: 50%;
        overflow: hidden;
        flex: 0 0 auto;
        box-shadow: 0 0 0 1px var(--gold), 0 0 0 5px var(--bg-main), 0 12px 28px rgba(0,0,0,0.12);
        background: var(--bg-light);
        /* ueberlappend aufgereiht, die Mitte liegt oben, die Aeusseren leicht gekippt */
        margin-left: calc(var(--groesse) * -0.22);
        transform: rotate(calc((var(--i) - 1) * 7deg)) translateY(calc((var(--i) - 1) * (var(--i) - 1) * 6px));
        z-index: calc(3 - (var(--i) - 1) * (var(--i) - 1));
        transition: transform 0.4s ease;
    }
    .stapel-bild:first-child { margin-left: 0; }
    .stapel-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .about-stapel .btn { margin-top: 0.4rem; }

    /* Aufgeklappt: "Einklappen" unter dem letzten Block */
    .about-einklappen { display: block; text-align: center; margin-top: 2.5rem; }

    /* Waehrend die Klone fliegen, sind die echten Bilder unsichtbar; der Text wartet */
    #about-container.klappt-auf .about-grid .about-image-wrapper { opacity: 0; }
    #about-container.klappt-auf .about-grid .about-text > :not(h2),
    #about-container.klappt-auf .about-einklappen { opacity: 0; transform: translateY(14px); }
    #about-container.text-kommt .about-grid .about-text > :not(h2),
    #about-container.text-kommt .about-einklappen {
        opacity: 1; transform: none;
        transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    #about-container.text-kommt .about-grid:nth-child(3) .about-text > :not(h2) { transition-delay: 0.12s; }
    #about-container.text-kommt .about-grid:nth-child(4) .about-text > :not(h2) { transition-delay: 0.24s; }
    /* Auf dem Handy steht die Ueberschrift mittig - im Stapel wie im aufgeklappten Block,
       damit sie beim Aufklappen an Ort und Stelle bleibt statt nach links zu springen */
    .about-text h2, .about-stapel h2 { text-align: center; font-size: 2.6rem; }
    .about-text h2::after { left: 50%; transform: translateX(-50%); }
    /* Bilder wieder da, sobald die Klone verschwinden - ohne Sprung */
    #about-container.text-kommt .about-grid .about-image-wrapper { opacity: 1; transition: opacity 0.15s ease; }
}
@media (prefers-reduced-motion: reduce) {
    .stapel-flug, .stapel-bild { transition: none; }
}

/* 8. Angebote / Produkte */
.section-header {
    text-align: center;
    margin-bottom: 4rem;
}
.section-header h2 {
    font-size: 3rem;
}
.section-header p {
    max-width: 600px;
    margin: 0 auto;
}



.form-group {
    margin-bottom: 1.5rem;
}
.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-main);
}
.custom-select, .inquiry-form input, .inquiry-form textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid rgba(197, 168, 128, 0.3);
    background: var(--bg-light);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-main);
    transition: var(--transition);
}
.custom-select:focus, .inquiry-form input:focus, .inquiry-form textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(197, 168, 128, 0.1);
}

.price-display {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
    padding: 1.5rem;
    background: rgba(197, 168, 128, 0.05);
    border-radius: 10px;
    border-left: 3px solid var(--gold);
}
.price-label {
    font-size: 1.1rem;
}
.price-value {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--gold);
    font-weight: 600;
}

.highlight-gold {
    color: var(--gold);
    font-weight: 600;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}
.product-card {
    background: #fff;
    border-radius: 15px;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    border: 1px solid rgba(197, 168, 128, 0.1);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    border-color: var(--gold);
}
.card-image-mini {
    height: 180px;
    margin: -1rem -1rem 1.5rem -1rem;
    border-radius: 10px;
    overflow: hidden;
}
.card-image-mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}
.product-card:hover .card-image-mini img {
    transform: scale(1.05);
}
.card-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.card-content h3 {
    font-size: 1.6rem;
    margin-bottom: 0.8rem;
}
.card-content p {
    font-size: 0.95rem;
    flex-grow: 1;
}
.product-card h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}
.price-hint {
    font-style: italic;
    color: var(--gold);
    margin: 1.5rem 0;
}

/* 9. Modal */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(44, 42, 39, 0.6);
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.modal-content {
    background-color: var(--bg-main);
    padding: 3rem;
    border-radius: 15px;
    max-width: 500px;
    width: 90%;
    position: relative;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
    box-shadow: 0 30px 60px rgba(0,0,0,0.2);
    max-height: 90vh;
    overflow-y: auto;
}
.catalog-modal-content {
    max-width: 900px;
    padding: 0;
    overflow: hidden;
}
.catalog-flex {
    display: flex;
    flex-wrap: wrap;
    min-height: 500px;
}
.catalog-image-side {
    flex: 1 1 350px;
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.catalog-data-side {
    flex: 1 1 400px;
    padding: 4rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.catalog-data-side h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}
.modal.show .modal-content {
    transform: translateY(0);
}

.close-modal {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 2rem;
    cursor: pointer;
    color: var(--text-muted);
    transition: var(--transition);
    line-height: 1;
    z-index: 10;
}
.close-modal:hover {
    color: var(--gold);
}

.checkbox-group {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.checkbox-group input {
    width: auto;
    margin-top: 5px;
}
.checkbox-group label {
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: normal;
}
.checkbox-group a {
    color: var(--gold);
    text-decoration: underline;
}

/* 10. Footer */
.main-footer {
    background-color: var(--text-main);
    color: #fff;
    padding: 5rem 0 2rem;
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-bottom: 4rem;
}
.footer-col h3, .footer-col .logo-text {
    color: var(--gold);
    margin-bottom: 1.5rem;
}
.footer-col .logo-text {
    font-size: 2rem;
}
.footer-col p {
    color: #b0aba4;
}
.footer-col a {
    color: #b0aba4;
}
.footer-col a:hover {
    color: var(--gold);
}
.footer-col ul {
    list-style: none;
}
.footer-col ul li {
    margin-bottom: 0.8rem;
}
.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    color: #8c867f;
    font-size: 0.85rem;
}
/* 10.5 Premium Value-Add Sections */

/* Kompass */
.kompass-grid {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.kompass-btn {
    min-width: 180px;
    /* Einblenden per CSS, gestaffelt ueber den .fade-up-Container (IntersectionObserver in
       main.js). Vorher setzte ein GSAP-ScrollTrigger die Knoepfe auf opacity 0 und blendete
       sie nicht verlaesslich wieder ein - leere Flaeche unter dem Untertitel. Hover-Uebergaenge
       bleiben ohne Verzoegerung, nur Einblenden und Hochgleiten sind gestaffelt. */
    opacity: 0;
    transform: translateY(24px);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease,
                opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fade-up.visible .kompass-btn,
body.is-editor .kompass-btn {
    opacity: 1;
    transform: none;
}
.fade-up.visible .kompass-btn:nth-child(2) { transition-delay: 0s, 0s, 0s, 0.15s, 0.15s; }
.fade-up.visible .kompass-btn:nth-child(3) { transition-delay: 0s, 0s, 0s, 0.3s, 0.3s; }
@media (prefers-reduced-motion: reduce) {
    .kompass-btn { opacity: 1; transform: none; transition: none; }
}
.kompass-btn:hover {
    background-color: var(--gold);
    color: #fff;
    border-color: var(--gold);
}
.kompass-result {
    transition: opacity 0.5s ease, transform 0.5s ease;
    padding: 2rem;
    border: 1px solid rgba(197, 168, 128, 0.3);
    border-radius: 8px;
    background-color: #fff;
    max-width: 600px;
    margin: 0 auto;
}
/* Ergebnis: Produktbild im Goldring, Sehnsucht als Kapitaelchen, Titel, Begleittext, Produkttext */
.kompass-result-bild {
    display: block;
    width: 132px;
    height: 132px;
    margin: 0 auto 1.1rem;
    box-shadow: 0 0 0 1px var(--gold), 0 0 0 6px var(--bg-card), 0 0 0 7px rgba(181, 146, 101, 0.35);
}
.kompass-result-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kompass-result-wahl {
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.4rem;
}
.kompass-result h3 { margin-bottom: 0.6rem; }
.kompass-result-intro {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--text-main);
    margin-bottom: 0.8rem;
}
.kompass-result-produkt { margin-bottom: 0.4rem; }
.kompass-result-produkt:empty { display: none; }
.kompass-result.wechselt .kompass-result-bild,
.kompass-result.wechselt h3,
.kompass-result.wechselt .kompass-result-intro,
.kompass-result.wechselt .kompass-result-produkt { opacity: 0; transform: translateY(6px); }
.kompass-result .kompass-result-bild, .kompass-result h3, .kompass-result .kompass-result-intro, .kompass-result .kompass-result-produkt {
    transition: opacity 0.22s ease, transform 0.22s ease;
}
body.is-editor .kompass-editor-info { display: block; color: var(--text-muted); font-size: 0.85rem; margin-top: 0.4rem; line-height: 1.5; }
.kompass-result.hidden {
    display: none;
    opacity: 0;
    transform: translateY(20px);
}
.kompass-result.blendet-aus {
    opacity: 0;
    transform: translateY(-10px);
}

/* Die Wahlknoepfe blenden weich aus, statt schlagartig zu verschwinden */
#kompass-options {
    transition: opacity 0.26s ease, transform 0.26s ease;
}
#kompass-options.ist-weg {
    opacity: 0;
    transform: translateY(-8px);
}

/* Editor-Block: Ergebnistexte des Kompasses (nur in der Seelenwerkstatt) */
body.is-editor .kompass-editor {
    flex: 1 1 100%;
    margin-top: 1.6rem;
    padding: 1.2rem 1.4rem;
    text-align: left;
    border: 2px dashed var(--gold-border);
    border-radius: 12px;
    background: rgba(197, 168, 128, 0.05);
}
body.is-editor .kompass-editor-hinweis {
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.9rem;
}
body.is-editor .kompass-editor-zeile {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 0.6rem 1rem;
    align-items: start;
    padding: 0.7rem 0;
    border-top: 1px solid var(--gold-border);
}
body.is-editor .kompass-editor-wahl {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--gold);
    padding-top: 0.2rem;
}
body.is-editor .kompass-editor-felder label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
body.is-editor .kompass-editor-felder label > span,
body.is-editor .kompass-editor-felder select {
    display: block;
    width: 100%;
    margin-top: 0.2rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.92rem;
    font-family: var(--font-body);
    color: var(--text-main);
    background: #fff;
    border: 1px solid var(--gold-border);
    border-radius: 6px;
}
@media (max-width: 600px) {
    body.is-editor .kompass-editor-zeile { grid-template-columns: 1fr; }
}

/* Prozess Timeline */
.prozess-timeline {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}
.prozess-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 24px;
    width: 2px;
    background-color: rgba(197, 168, 128, 0.3);
}
.prozess-step {
    display: flex;
    margin-bottom: 3rem;
    position: relative;
}
.step-number {
    width: 50px;
    height: 50px;
    background-color: var(--gold);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.step-content {
    margin-left: 2rem;
    padding-top: 0.5rem;
}
.step-content h3 {
    margin-bottom: 0.5rem;
}

/* Kundenstimmen Slider */
.testimonial-slider {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    min-height: 400px;
}
.testimonial {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(20px);
    transition: var(--transition);
    pointer-events: none;
}
.testimonial.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
    position: relative;
}
.testimonial blockquote {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-style: italic;
    color: var(--text-main);
    line-height: 1.4;
    margin-bottom: 1.5rem;
    position: relative;
}
.testimonial cite {
    font-size: 1.1rem;
    color: var(--gold);
    font-style: normal;
    font-weight: 600;
}
.testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}
.testimonial-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gold);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.slider-controls {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
}
.slider-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(197, 168, 128, 0.3);
    border: none;
    cursor: pointer;
    transition: var(--transition);
    margin: 0 5px;
}
.slider-dot.active {
    background-color: var(--gold);
    transform: scale(1.2);
}

/* FAQ Accordion */
.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
}
.faq-item {
    border-bottom: 1px solid rgba(197, 168, 128, 0.2);
    margin-bottom: 1rem;
}
.faq-item summary {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    padding: 1rem 0;
    list-style: none;
    position: relative;
    padding-right: 2rem;
    transition: var(--transition);
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.8rem;
    color: var(--gold);
    transition: transform 0.3s ease;
}
.faq-item[open] summary::after {
    content: '×';
    transform: translateY(-50%) rotate(90deg);
}
.faq-content {
    padding-bottom: 1.5rem;
    color: var(--text-muted);
    animation: slideDown 0.4s ease-out forwards;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 11. Animations (Intersection Observer) */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}
.fade-up.delay-1 { transition-delay: 0.2s; }
.fade-up.delay-2 { transition-delay: 0.4s; }

/* 12. Responsive Design */
@media (max-width: 1150px) {
    .main-nav ul { gap: 1.25rem; }
    .main-nav a { font-size: 0.88rem; }
}

/* Kompakte Desktop-Navigation, bis das Klappmenue uebernimmt */
@media (max-width: 1260px) {
    .main-nav ul { gap: 1rem; }
    .main-nav a:not(.btn) { font-size: 0.82rem; letter-spacing: 0.05em; }
    .main-nav a.btn { padding-left: 1.2rem; padding-right: 1.2rem; }
    .marke-vorname { font-size: 1.55rem; }
}
@media (max-width: 1100px) {
    /* Klappmenue schon ab Tablet-Breite (auch quer): die gesperrte Serifen-Navigation passt
       zwischen 769 und 1100 px nicht mehr neben Wortmarke und Warenkorb. */
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: var(--bg-main);
        border-left: 1px solid rgba(197, 168, 128, 0.2);
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
        padding: 6rem 2rem 2rem 2rem;
        display: flex;
        flex-direction: column;
        transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 999;
    }
    
    .main-nav.active {
        right: 0;
    }

    .main-nav ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        width: 100%;
    }

    .main-nav ul li {
        width: 100%;
    }

    .main-nav ul li a {
        display: block;
        padding: 0.8rem 0;
        font-size: 1.1rem;
        border-bottom: 1px solid rgba(197, 168, 128, 0.1);
        color: var(--text-main);
    }
    
    .main-nav ul li a.btn {
        text-align: center;
        border-bottom: none;
        margin-top: 1rem;
    }
    
    .mobile-menu-toggle {
        display: block;
        z-index: 1000;
        position: relative;
    }
    .marke-emblem { width: 34px; height: 34px; }
    .marke-vorname { font-size: 1.5rem; }
    .marke-name { font-size: 0.56rem; letter-spacing: 0.28em; margin-right: -0.28em; }
    .main-nav a:not(.btn) { font-size: 1.15rem; padding: 0.9rem 0; }
    .main-nav a:not(.btn)::after { display: none; }
    
    /* Hamburger to X animation */
    .mobile-menu-toggle.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    .mobile-menu-toggle.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

@media (max-width: 992px) {
    .about-grid, .calc-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .about-grid.reverse .about-text {
        order: 1;
    }
    .about-grid.reverse .about-image-wrapper {
        order: 2;
    }
    .hero-content h1 {
        font-size: 3.5rem;
    }

}

@media (max-width: 768px) {


    /* Mobile Backdrop Overlay */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(20, 20, 20, 0.4);
        backdrop-filter: blur(4px);
        z-index: 998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .hero-content h1 {
        font-size: 2.8rem;
    }
    /* Handy: Kreis darf nie breiter sein als der Bildschirm minus Rand. Vorher war
       250 px + Ring-Abstand + 2 x 2 rem Aussenabstand = 344 px die Mindestbreite der
       Rasterspalte (375 px Bildschirm, 311 px Raster) - der Text lief bis an den
       rechten Rand. minmax(0, 1fr) laesst die Spalte nicht mehr ueber das Raster wachsen. */
    .about-grid, .calc-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .about-grid .gold-ring-container {
        margin: 2rem 0;
        max-width: 100%;
    }
    .circle-image {
        width: min(250px, calc(100vw - 7rem));
        height: min(250px, calc(100vw - 7rem));
    }
    .calculator-card {
        padding: 2rem;
    }

    /* Mobile Modal Enhancements */
    .modal-content {
        padding: 2.5rem 1.5rem 1.5rem 1.5rem;
        width: 95%;
        max-height: 95vh;
    }

    .catalog-modal-content {
        overflow-y: auto;
    }

    .catalog-flex {
        flex-direction: column;
        min-height: auto;
    }

    .catalog-image-side {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        min-height: 220px;
        padding: 1.5rem;
    }

    .catalog-image-side .gold-ring-container.small {
        margin: 0.5rem;
    }

    .catalog-image-side .gold-ring-container.small .circle-image {
        width: 150px;
        height: 150px;
    }

    .catalog-data-side {
        flex: 1 1 auto;
        width: 100%;
        padding: 2rem 1.5rem;
    }

    .catalog-data-side h2 {
        font-size: 1.8rem;
    }
}

/* 13. Schatzkisten-Übergang
   Ablauf beim Klick auf „Schatzkiste öffnen":
   0.00 s  Dunkel legt sich über die Seite, die Truhe kommt mit leichtem Überschwingen heran
   0.30 s  Sie atmet kurz an, das Schloss lädt sich leuchtend auf
   0.40 s  Deckel klappt federnd auf, Licht bricht aus dem Inneren
   0.55 s  Lichtkegel steigt auf, Strahlen drehen sich heraus
   0.60 s  Goldmünzen, Edelsteine und Sterne fliegen im Bogen nach außen
   1.00 s  Warmes Gold wäscht das Bild aus, danach sitzt man in der Schatzkiste
   Alles nur SVG und CSS — kein Video, keine externe Datei, keine fremden Server. */
.epic-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    background: radial-gradient(circle at 50% 50%, rgba(46, 34, 22, 0) 0%, rgba(18, 14, 11, 0) 100%);
    transition: background 0.45s ease;
}

.epic-overlay.active {
    pointer-events: all;
    visibility: visible;
    background: radial-gradient(circle at 50% 48%, rgba(52, 38, 24, 0.95) 0%, rgba(13, 10, 8, 0.99) 100%);
}

.epic-overlay.fade-out {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.epic-chest-wrapper {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.epic-overlay.active .epic-chest-wrapper {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.12s;
}

.epic-chest-icon {
    position: relative;
    z-index: 3;
    overflow: visible;
    filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.55));
}

/* Die Truhe zittert erwartungsvoll, bevor sie aufspringt … */
.epic-overlay.active .epic-chest-icon {
    animation: chestAnticipation 0.6s ease-in-out 0.3s both;
}

/* … und federt beim Aufspringen kurz in die Knie. */
.epic-overlay.open .epic-chest-icon {
    animation: chestRecoil 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes chestAnticipation {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    22%      { transform: translateY(3px) rotate(-1.8deg); }
    55%      { transform: translateY(-2px) rotate(1.8deg); }
    82%      { transform: translateY(1px) rotate(-0.9deg); }
}

@keyframes chestRecoil {
    0%   { transform: translateY(0) scale(1, 1); }
    18%  { transform: translateY(7px) scale(1.07, 0.93); }
    45%  { transform: translateY(-4px) scale(0.98, 1.03); }
    100% { transform: translateY(0) scale(1, 1); }
}

/* Deckel: klappt nach hinten weg und federt am Ende leicht nach. */
.chest-lid-group {
    transform-origin: 100px 101px;
    transition: transform 0.85s cubic-bezier(0.34, 1.42, 0.5, 1);
}

.epic-overlay.open .chest-lid-group {
    transform: perspective(520px) rotateX(112deg);
}

/* Schloss: lädt sich auf und springt beim Öffnen weg. */
.chest-lock {
    transform-origin: 100px 105px;
}

.epic-overlay.active .chest-lock {
    animation: lockCharge 0.8s ease-in 0.2s both;
}

.epic-overlay.open .chest-lock {
    animation: lockBurst 0.55s cubic-bezier(0.4, 0, 0.9, 0.6) both;
}

@keyframes lockCharge {
    0%   { filter: none; transform: scale(1); }
    65%  { filter: drop-shadow(0 0 10px #f3d79a); transform: scale(1.3); }
    100% { filter: drop-shadow(0 0 20px #fff3d6); transform: scale(1.12); }
}

@keyframes lockBurst {
    0%   { opacity: 1; transform: scale(1.12) translateY(0) rotate(0deg); }
    100% { opacity: 0; transform: scale(0.5) translateY(52px) rotate(38deg); }
}

/* Die Öffnung wird erst sichtbar, wenn der Deckel weggeklappt ist. */
.chest-mouth {
    opacity: 0;
    transform-origin: 100px 100px;
}

.epic-overlay.open .chest-mouth {
    animation: mouthOpen 0.5s ease-out 0.16s both;
}

@keyframes mouthOpen {
    0%   { opacity: 0; transform: scaleY(0.2); }
    100% { opacity: 1; transform: scaleY(1); }
}

/* Inneres Leuchten der geöffneten Truhe */
.chest-inner-glow {
    opacity: 0;
    transform-origin: 100px 130px;
}

.epic-overlay.open .chest-inner-glow {
    animation: innerGlow 1.1s ease-out 0.2s both;
}

@keyframes innerGlow {
    0%   { opacity: 0; transform: scaleY(0.15); }
    40%  { opacity: 1; transform: scaleY(1.05); }
    100% { opacity: 0.85; transform: scaleY(0.95); }
}

/* Lichthof hinter der Truhe */
.epic-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 420px;
    height: 420px;
    margin: -210px 0 0 -210px;
    border-radius: 50%;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(circle,
        rgba(255, 232, 176, 0.55) 0%,
        rgba(226, 176, 88, 0.25) 38%,
        rgba(226, 176, 88, 0) 68%);
}

.epic-overlay.open .epic-halo {
    animation: haloBloom 1.4s ease-out 0.2s both;
}

@keyframes haloBloom {
    0%   { opacity: 0; transform: scale(0.3); }
    35%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.55); }
}

/* Lichtstrahlen, die sich langsam mitdrehen */
.epic-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 560px;
    height: 560px;
    margin: -280px 0 0 -280px;
    border-radius: 50%;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    background: repeating-conic-gradient(from 0deg,
        rgba(255, 233, 182, 0.34) 0deg 2.5deg,
        rgba(255, 233, 182, 0) 2.5deg 17deg);
    -webkit-mask-image: radial-gradient(circle, transparent 12%, rgba(0, 0, 0, 0.55) 30%, transparent 64%);
            mask-image: radial-gradient(circle, transparent 12%, rgba(0, 0, 0, 0.55) 30%, transparent 64%);
    filter: blur(1.5px);
}

.epic-overlay.open .epic-rays {
    animation: raysOut 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

@keyframes raysOut {
    0%   { opacity: 0; transform: scale(0.2) rotate(0deg); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: scale(1.5) rotate(42deg); }
}

/* Lichtkegel aus der offenen Truhe nach oben */
.epic-beam {
    position: absolute;
    left: 50%;
    bottom: 50%;
    width: 170px;
    height: 320px;
    margin-left: -85px;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transform-origin: 50% 100%;
    background: linear-gradient(to top,
        rgba(255, 244, 214, 0.85) 0%,
        rgba(255, 224, 158, 0.4) 42%,
        rgba(255, 224, 158, 0) 100%);
    clip-path: polygon(40% 100%, 60% 100%, 96% 0%, 4% 0%);
    filter: blur(9px);
}

.epic-overlay.open .epic-beam {
    animation: beamRise 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

@keyframes beamRise {
    0%   { opacity: 0; transform: scaleY(0.1) scaleX(0.6); }
    35%  { opacity: 1; transform: scaleY(1) scaleX(1); }
    100% { opacity: 0; transform: scaleY(1.15) scaleX(1.2); }
}

/* --- Goldmünzen und Edelsteine ---
   Jedes Stück fliegt in seinem eigenen Winkel (--a) und seiner eigenen Weite (--w)
   nach außen und sinkt am Ende leicht ab, als falle es zurück. */
.epic-treasure,
.epic-sparks {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.epic-treasure i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 17px;
    height: 17px;
    margin: -8.5px 0 0 -8.5px;
    opacity: 0;
    will-change: transform, opacity;
}

.epic-treasure .muenze {
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #fff6dc 0%, #f0d190 38%, #c49a4c 72%, #8f6a2c 100%);
    box-shadow: 0 0 10px rgba(240, 209, 144, 0.75), inset 0 -2px 3px rgba(120, 88, 34, 0.5);
}

.epic-treasure .edelstein {
    border-radius: 3px;
    transform-origin: center;
    box-shadow: 0 0 12px currentColor;
}

.epic-treasure .edelstein.gruen { background: linear-gradient(135deg, #d8ffe9, #4fbf87 55%, #1f7a52); color: rgba(79, 191, 135, 0.8); }
.epic-treasure .edelstein.rosa  { background: linear-gradient(135deg, #ffe4f2, #e07aa8 55%, #a13c69); color: rgba(224, 122, 168, 0.8); }
.epic-treasure .edelstein.blau  { background: linear-gradient(135deg, #dcefff, #5aa6dd 55%, #2a5f92); color: rgba(90, 166, 221, 0.8); }

.epic-overlay.open .epic-treasure i {
    animation: schatzFlug 1.5s cubic-bezier(0.12, 0.72, 0.3, 1) both;
    animation-delay: calc(0.34s + var(--d, 0s));
}

@keyframes schatzFlug {
    0% {
        opacity: 0;
        transform: rotate(var(--a)) translateX(8px) rotate(calc(-1 * var(--a)))
                   scale(calc(var(--s, 1) * 0.3));
    }
    14% { opacity: 1; }
    62% {
        opacity: 1;
        transform: rotate(var(--a)) translateX(var(--w, 140px)) rotate(calc(-1 * var(--a) + 220deg))
                   scale(var(--s, 1));
    }
    100% {
        opacity: 0;
        transform: rotate(var(--a)) translateX(calc(var(--w, 140px) * 1.12))
                   translateY(70px) rotate(calc(-1 * var(--a) + 400deg))
                   scale(calc(var(--s, 1) * 0.7));
    }
}

/* --- Funkelnde Sterne (Vierstrahler statt schlichter Punkte) --- */
.epic-sparks i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--gr, 14px);
    height: var(--gr, 14px);
    margin: calc(var(--gr, 14px) / -2) 0 0 calc(var(--gr, 14px) / -2);
    opacity: 0;
    background: #fff8e6;
    /* Vierzackiger Stern: zwischen den Spitzen zur Mitte hin eingezogen */
    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%,
                       50% 100%, 40% 60%, 0% 50%, 40% 40%);
    filter: drop-shadow(0 0 6px #ffdf9e);
    will-change: transform, opacity;
}

.epic-overlay.open .epic-sparks i {
    animation: sternFlug 1.35s cubic-bezier(0.15, 0.85, 0.3, 1) both;
    animation-delay: calc(0.28s + var(--d, 0s));
}

@keyframes sternFlug {
    0%   { opacity: 0; transform: rotate(var(--a)) translateX(10px) rotate(calc(-1 * var(--a))) scale(0.2); }
    16%  { opacity: 1; transform: rotate(var(--a)) translateX(calc(var(--w, 160px) * 0.35)) rotate(calc(-1 * var(--a) + 90deg)) scale(1.15); }
    58%  { opacity: 0.9; }
    100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--w, 160px)) rotate(calc(-1 * var(--a) + 260deg)) scale(0.25); }
}

/* Abschließender Lichtblitz, der ins Warmgold überblendet */
.epic-light-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 14px;
    z-index: 5;
    background-color: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    box-shadow: 0 0 24px 12px #e9c680;
}

.epic-overlay.open .epic-light-burst {
    animation: chestLightBurst 1.3s cubic-bezier(0.7, 0, 0.25, 1) 0.72s forwards;
}

@keyframes chestLightBurst {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
    16% {
        transform: translate(-50%, -50%) scale(2.4);
        opacity: 1;
        box-shadow: 0 0 50px 25px #f0d191, 0 0 80px 50px #fff4dc;
    }
    68% {
        transform: translate(-50%, -50%) scale(110);
        opacity: 1;
        background-color: #fff6e4;
        box-shadow: 0 0 120px 60px #fff6e4;
    }
    100% {
        transform: translate(-50%, -50%) scale(110);
        opacity: 1;
        background-color: #fff6e4;
    }
}

@media (max-width: 768px) {
    .epic-chest-wrapper { width: 200px; height: 200px; }
    .epic-chest-icon { width: 200px; height: 200px; }
    .epic-halo { width: 320px; height: 320px; margin: -160px 0 0 -160px; }
    .epic-rays { width: 420px; height: 420px; margin: -210px 0 0 -210px; }
    .epic-beam { width: 110px; height: 220px; margin-left: -55px; }
}

/* Wer im Betriebssystem „Bewegung reduzieren" eingestellt hat, bekommt eine ruhige
   Überblendung statt der Animation. */
@media (prefers-reduced-motion: reduce) {
    .epic-overlay.active .epic-chest-icon,
    .epic-overlay.open .epic-chest-icon,
    .epic-overlay.active .chest-lock,
    .epic-overlay.open .chest-lock,
    .epic-overlay.open .chest-inner-glow,
    .epic-overlay.open .epic-halo,
    .epic-overlay.open .epic-rays,
    .epic-overlay.open .epic-beam,
    .epic-overlay.open .epic-treasure i,
    .epic-overlay.open .epic-sparks i {
        animation: none !important;
    }
    .epic-overlay.open .chest-lid-group { transform: perspective(520px) rotateX(112deg); }
    .epic-overlay.open .chest-inner-glow { opacity: 1; }
    .epic-overlay.open .epic-light-burst {
        animation: none !important;
        opacity: 1;
        transform: translate(-50%, -50%) scale(110);
        background-color: #fff6e4;
    }
}

/* In-Line Editor Styles */
body.is-editor [data-edit] { transition: all 0.2s ease; cursor: pointer; }
body.is-editor [data-edit]:hover { box-shadow: 0 0 0 2px var(--gold) inset, 0 4px 12px rgba(197,168,128,0.2) !important; background: rgba(197,168,128,0.05); }

body.is-editor .admin-add-btn { display: inline-block; margin-top: 10px; padding: 10px 20px; background: rgba(197,168,128,0.1); border: 2px dashed var(--gold); color: var(--gold); border-radius: 8px; cursor: pointer; font-family: var(--font-heading); font-size: 1rem; transition: all 0.3s; }
body.is-editor .admin-add-btn:hover { background: var(--gold); color: white; }


h1, h2, h3, h4 { font-style: italic; }


/* --- Shopping Cart --- */
.cart-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; position: relative; padding: 0.5rem; color: var(--gold-hover); display: inline-flex; align-items: center; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease; }
.cart-btn .cart-icon { width: 26px; height: 26px; display: block; }
.cart-btn:hover { color: var(--gold); }
.cart-btn:hover { transform: scale(1.1); }
.cart-btn.pop { transform: scale(1.4) rotate(-10deg); filter: drop-shadow(0 0 8px rgba(197, 168, 128, 0.8)); }
.cart-badge { position: absolute; top: 0; right: 0; background: var(--gold); color: white; font-size: 0.7rem; font-family: var(--font-body); padding: 0.1rem 0.4rem; border-radius: 50px; font-weight: 600; border: 2px solid var(--bg-card); transform: translate(20%, -20%); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.cart-badge.pop { transform: translate(20%, -20%) scale(2.2); background: #d41e1e; }
.cart-sidebar { position: fixed; top: 0; right: -400px; width: 100%; max-width: 400px; height: 100vh; background: var(--bg-light); box-shadow: -5px 0 30px rgba(0,0,0,0.1); z-index: 10000; transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); display: flex; flex-direction: column; }
.cart-sidebar.active { right: 0; }
.cart-header { padding: 2rem; border-bottom: 1px solid var(--gold-border); display: flex; justify-content: space-between; align-items: center; }
.cart-header h2 { margin: 0; font-size: 1.8rem; }
.close-cart-btn { background: none; border: none; font-size: 2rem; color: var(--text-muted); cursor: pointer; }
.cart-items { flex: 1; overflow-y: auto; padding: 2rem; }
.cart-item { display: flex; align-items: center; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(197, 168, 128, 0.1); margin-bottom: 1rem; }
.cart-item img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; }
.cart-item-details { flex: 1; }
.cart-item-title { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; }
.cart-item-remove { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 0.8rem; text-decoration: underline; }
.cart-footer { padding: 2rem; border-top: 1px solid var(--gold-border); background: #fff; }
.cart-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.4); z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.3s; backdrop-filter: blur(2px); }
.cart-overlay.active { opacity: 1; visibility: visible; }
/* Fly Animation */
.fly-to-cart { position: fixed; z-index: 99999; border-radius: 50%; pointer-events: none; transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }


/* --- Testimonial-Medaillons (Initialen statt Foto) --- */
.testimonial-avatar { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); margin-bottom: 1.5rem; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.testimonial-initial { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 2rem; color: var(--gold); margin-bottom: 1.5rem; background: rgba(201,169,97,0.08); }

/* --- Honeypot (für Menschen unsichtbar) --- */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Toast-Bestätigung --- */
#site-toast { position: fixed; left: 50%; bottom: 2rem; transform: translate(-50%, 150%); background: var(--text-main, #3a3631); color: #fff; padding: 1rem 1.6rem; border-radius: 999px; font-size: 0.95rem; box-shadow: 0 10px 30px rgba(0,0,0,0.2); z-index: 5000; max-width: 90vw; text-align: center; transition: transform 0.45s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
#site-toast.show { transform: translate(-50%, 0); }

/* --- Scroll-Animationen (GSAP) --- */
.timeline-progress { position: absolute; top: 0; bottom: 0; left: 24px; width: 2px; background: linear-gradient(to bottom, var(--gold), #d8bf96); transform-origin: top center; transform: scaleY(0); z-index: 1; box-shadow: 0 0 12px rgba(181,146,101,0.5); }
.main-header { transition: padding 0.35s ease, box-shadow 0.35s ease; }
.main-header.scrolled { padding: 0.5rem 0; box-shadow: 0 6px 24px rgba(60,45,25,0.08); }
.hero-bg { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
    .fade-up { opacity: 1; transform: none; transition: none; }
    .timeline-progress { transform: none; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* --- Scroll-Bühne „Hinter den Kulissen" (aktiv nur mit .stage-active) --- */
.prozess-stage { display: none; }
.prozess-section.stage-active { padding: 0; position: relative; background: #1d1612; color: #f4f0ea; }
.prozess-section.stage-active .prozess-stage { display: block; position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, rgba(29,22,18,0.15) 0%, rgba(29,22,18,0.55) 70%, rgba(29,22,18,0.8) 100%); pointer-events: none; }
.stage-progress { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); width: 140px; height: 2px; background: rgba(244,240,234,0.25); border-radius: 2px; overflow: hidden; }
.stage-progress span { display: block; height: 100%; width: 0; background: var(--gold); }
.prozess-section.stage-active .prozess-inner { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; pointer-events: none; padding: 0 1.5rem; }
.prozess-section.stage-active #process-header { position: absolute; top: 7vh; left: 0; right: 0; margin: 0; opacity: 1; transform: none; }
.prozess-section.stage-active #process-header h2 { color: #f4f0ea; }
.prozess-section.stage-active #process-header p { color: rgba(244,240,234,0.75); }
.prozess-section.stage-active .prozess-timeline { max-width: 640px; width: 100%; position: relative; height: 260px; }
.prozess-section.stage-active .prozess-timeline::before, .prozess-section.stage-active .timeline-progress { display: none; }
.prozess-section.stage-active .prozess-step { position: absolute; inset: 0; margin: 0; opacity: 0; transform: none; display: flex; align-items: flex-start; gap: 1.5rem; background: rgba(29,22,18,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(181,146,101,0.35); border-radius: 18px; padding: 1.8rem 2rem; box-shadow: 0 30px 60px rgba(0,0,0,0.35); transition: none; }
.prozess-section.stage-active .prozess-step .step-number { opacity: 1 !important; transform: none !important; box-shadow: 0 0 0 8px rgba(181,146,101,0.15) !important; }
.prozess-section.stage-active .step-content { margin-left: 0; padding-top: 0.2rem; opacity: 1 !important; transform: none !important; }
.prozess-section.stage-active .step-content h3 { color: #f4f0ea; }
.prozess-section.stage-active .step-content p { color: rgba(244,240,234,0.85); }
@media (max-width: 768px) {
    .prozess-section.stage-active .prozess-timeline { height: 320px; }
    .prozess-section.stage-active .prozess-step { padding: 1.3rem 1.3rem; gap: 1rem; }
    .prozess-section.stage-active #process-header { top: 5vh; }
    .prozess-section.stage-active #process-header h2 { font-size: 2rem; }
}

/* --- Seelenwerkstatt: Griffe zum Hinzufügen und Löschen ---
   Alles hier wird nur im Bearbeiten-Modus sichtbar (body.is-editor), also nie
   auf der öffentlichen Seite. */
body.is-editor .admin-add-btn--small {
    font-size: 0.85rem;
    padding: 6px 14px;
    margin-top: 0.75rem;
}

body.is-editor .admin-del-btn {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 6px 14px;
    background: rgba(190, 60, 60, 0.07);
    border: 1px dashed rgba(190, 60, 60, 0.5);
    color: #a63d3d;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.82rem;
    transition: background 0.25s ease, color 0.25s ease;
}

body.is-editor .admin-del-btn:hover {
    background: #a63d3d;
    border-color: #a63d3d;
    color: #fff;
}

body.is-editor .admin-del-btn--inline {
    margin: 0;
    padding: 4px 9px;
    font-size: 0.95rem;
    line-height: 1;
    flex: 0 0 auto;
}

/* Platzhalterkarte "Neues Produkt anlegen" in der Schatzkiste */
body.is-editor .product-card--add {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    background: rgba(197, 168, 128, 0.05);
    border: 2px dashed var(--gold-border);
    box-shadow: none;
}

/* --- Preise und Ausführungen im Produktfenster --- */
#catalog-variant-editor { margin-top: 1.5rem; }

#catalog-variant-editor .variant-editor-title {
    font-size: 1.35rem;
    margin: 0 0 0.35rem;
}

#catalog-variant-editor .variant-editor-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

#catalog-variant-editor .variant-row {
    border: 1px solid var(--gold-border);
    border-left: 4px solid var(--gold);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    margin-bottom: 0.9rem;
    background: var(--bg-main);
}

#catalog-variant-editor .variant-row-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

#catalog-variant-editor .variant-nr {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#catalog-variant-editor .variant-name {
    flex: 1 1 auto;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 40px;
}

#catalog-variant-editor .variant-details {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0.45rem 0 0.7rem;
    line-height: 1.5;
}

#catalog-variant-editor .variant-price-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

#catalog-variant-editor .variant-price-row label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

#catalog-variant-editor .variant-price {
    min-width: 70px;
    padding: 3px 10px;
    border: 1px solid var(--gold-border);
    border-radius: 6px;
    background: #fff;
    font-weight: 600;
    color: var(--gold);
}

/* --- Kontakt & Impressum: Pflichtangaben ohne eigene Stelle auf der Seite --- */
.stammdaten-panel {
    max-width: 900px;
    margin: 2.5rem auto 0;
    padding: 1.8rem;
    border: 2px dashed var(--gold-border);
    border-radius: 14px;
    background: rgba(197, 168, 128, 0.06);
    text-align: left;
}

.stammdaten-panel h3 {
    margin: 0 0 0.4rem;
    font-size: 1.35rem;
}

.stammdaten-hinweis {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--gold-border);
    border-radius: 20px;
    padding: 3px 10px;
    margin-left: 0.6rem;
    vertical-align: middle;
    white-space: nowrap;
}

.stammdaten-intro {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1.4rem;
}

.stammdaten-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem 1.5rem;
}

.stammdaten-feld label {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}

.stammdaten-wert {
    min-height: 2.4rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--gold-border);
    border-radius: 8px;
    background: #fff;
    font-size: 0.95rem;
    line-height: 1.4;
    word-break: break-word;
}

/* Leere Pflichtfelder zeigen einen Beispieltext, damit klar ist, was hineingehört.
   Ueber :empty statt einer Klasse, damit der Hinweis beim Tippen von selbst
   verschwindet und beim Leeren wieder erscheint. */
.stammdaten-wert:empty::before {
    content: attr(data-beispiel);
    color: #b9aa93;
    font-style: italic;
    pointer-events: none;
}

@media (max-width: 768px) {
    .stammdaten-panel { padding: 1.2rem; }
    .stammdaten-hinweis { display: block; margin: 0.5rem 0 0; }
}

/* ==========================================================================
   14. Werkschau — Stöbern in einzelnen Arbeiten
   Bewusst kein eigener Seitenabschnitt: Der Einstieg ist ein schmales Band am
   Fuß der Schatzkiste, alles Weitere passiert in einer Überlagerung. So bleibt
   die Startseite kurz und der Weg führt vom Shop ins freie Stöbern.
   ========================================================================== */

/* --- Einstiegsband unter dem Produktraster --- */
.werkschau-band {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    margin-top: 3.5rem;
    padding: 1.4rem 2rem;
    background: linear-gradient(100deg, rgba(197, 168, 128, 0.09), rgba(197, 168, 128, 0.02));
    border: 1px solid var(--gold-border);
    border-radius: 15px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: var(--transition);
}

.werkschau-band:hover {
    border-color: var(--gold);
    box-shadow: 0 12px 30px rgba(197, 168, 128, 0.18);
    transform: translateY(-2px);
}

.werkschau-band-text {
    flex: 1 1 auto;
    min-width: 0;
}

.werkschau-band-titel {
    display: block;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.6rem;
    color: var(--text-main);
    line-height: 1.2;
}

.werkschau-band-zeile {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* Drei runde Vorschaubilder — dieselbe Kreisform wie überall auf der Seite */
.werkschau-band-vorschau {
    flex: 0 0 auto;
    display: flex;
}

.werkschau-band-vorschau img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--bg-main);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.werkschau-band-vorschau img + img { margin-left: -18px; }

.werkschau-band-pfeil {
    flex: 0 0 auto;
    font-size: 1.5rem;
    color: var(--gold);
    transition: transform 0.3s ease;
}

.werkschau-band:hover .werkschau-band-pfeil { transform: translateX(5px); }

@media (max-width: 600px) {
    .werkschau-band { flex-wrap: wrap; padding: 1.2rem 1.3rem; gap: 1rem; }
    .werkschau-band-titel { font-size: 1.35rem; }
    .werkschau-band-vorschau img { width: 44px; height: 44px; }
}

/* --- Die Überlagerung selbst --- */
.werkschau-modal-content {
    max-width: 1180px;
    width: 94%;
    max-height: 92vh;
    padding: 2.5rem 2.5rem 3rem;
}

.werkschau-kopf {
    position: sticky;
    top: -2.5rem;                 /* gleicht das Innenmass des Fensters aus */
    z-index: 3;
    text-align: center;
    margin: -2.5rem -2.5rem 2rem;
    padding: 2.5rem 2.5rem 1.5rem;
    background: linear-gradient(to bottom, var(--bg-main) 78%, rgba(244, 240, 234, 0));
}

.werkschau-kopf h2 { font-size: 2.6rem; margin-bottom: 0.4rem; }

.werkschau-kopf p {
    max-width: 620px;
    margin: 0 auto;
    color: var(--text-muted);
}

/* Filter als feine Textschalter mit Goldunterstrich — keine klobigen Knöpfe,
   damit die Bilder die Aufmerksamkeit behalten. */
.werkschau-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.6rem;
    margin-top: 1.8rem;
}

.werkschau-filter button {
    background: none;
    border: none;
    padding: 0.35rem 0;
    font-family: var(--font-body);
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
    transition: color 0.25s ease;
}

.werkschau-filter button::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.werkschau-filter button:hover { color: var(--text-main); }
.werkschau-filter button:hover::after,
.werkschau-filter button.aktiv::after { transform: scaleX(1); }
.werkschau-filter button.aktiv { color: var(--gold); }

/* Mauerwerk statt Kachelraster: Ihre Stücke haben sehr verschiedene Formate
   (hohes Makramee, runde Schale, breites Fell). Spalten lassen jedem Foto
   seine eigene Höhe, statt alles auf ein Quadrat zu beschneiden. */
.werkschau-mauerwerk {
    columns: 4 240px;
    column-gap: 1.2rem;
    padding: 0.3rem;
}

.werk-kachel {
    break-inside: avoid;
    margin-bottom: 1.2rem;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.werk-kachel:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.13);
}

.werk-kachel img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.werk-kachel:hover img { transform: scale(1.05); }

/* Beschriftung steigt beim Überfahren aus dem unteren Rand auf */
.werk-kachel-schild {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.4rem 1rem 0.9rem;
    background: linear-gradient(to top, rgba(38, 30, 20, 0.88) 25%, rgba(38, 30, 20, 0));
    color: #fdf9f1;
    transform: translateY(28%);
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.werk-kachel:hover .werk-kachel-schild,
.werk-kachel:focus-within .werk-kachel-schild {
    transform: translateY(0);
    opacity: 1;
}

.werk-kachel-titel {
    display: block;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.25;
}

.werk-kachel-preis {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.85rem;
    color: #e8cf9c;
    letter-spacing: 0.03em;
}

/* Statusschild: Bei Einzelstücken ist „verkauft" kein Makel, sondern Beleg. */
.werk-schild {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    z-index: 2;
    padding: 0.25rem 0.7rem;
    border-radius: 40px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}

.werk-schild.verkauft {
    background: rgba(38, 30, 20, 0.75);
    color: #f0dcb4;
    border: 1px solid rgba(240, 220, 180, 0.45);
}

.werk-schild.unikat {
    background: rgba(255, 253, 247, 0.85);
    color: #9c7736;
    border: 1px solid var(--gold-border);
}

.werk-schild.kunstdruck {
    background: rgba(87, 71, 49, 0.78);
    color: #f4e6c7;
    border: 1px solid rgba(244, 230, 199, 0.45);
}

.werkschau-leer {
    text-align: center;
    color: var(--text-muted);
    padding: 2.5rem 0;
    column-span: all;
}

/* --- Großansicht eines einzelnen Werks --- */
.werk-modal-content {
    max-width: 940px;
    width: 94%;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.werk-bild-seite {
    flex: 1 1 420px;
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}

.werk-bild-seite img {
    width: 100%;
    height: 100%;
    max-height: 74vh;
    object-fit: contain;
}

.werk-daten-seite {
    flex: 1 1 320px;
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.werk-daten-seite h2 { font-size: 2.1rem; margin-bottom: 0.6rem; }
.werk-daten-seite p { color: var(--text-muted); }

.werk-status {
    align-self: flex-start;
    margin-bottom: 0.9rem;
    padding: 0.25rem 0.8rem;
    border-radius: 40px;
    border: 1px solid var(--gold-border);
    color: var(--gold);
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.werk-kategorie {
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

.werk-preis {
    margin: 1.4rem 0 1.8rem;
    font-family: var(--font-heading);
    font-size: 1.9rem;
    color: var(--gold);
}

.werk-preis .auf-anfrage {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--text-muted);
}

/* Pfeile zum Blättern */
.werk-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--gold-border);
    background: rgba(255, 253, 247, 0.9);
    color: var(--gold);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition);
}

.werk-nav:hover { background: var(--gold); color: #fff; }
.werk-nav-zurueck { left: 1rem; }
.werk-nav-vor { right: 1rem; }

@media (max-width: 768px) {
    .werkschau-modal-content { padding: 2rem 1.2rem 2.2rem; }
    .werkschau-kopf { top: -2rem; margin: -2rem -1.2rem 1.5rem; padding: 2rem 1.2rem 1.2rem; }
    .werkschau-kopf h2 { font-size: 2rem; }
    .werkschau-mauerwerk { columns: 2 140px; column-gap: 0.8rem; }
    .werk-kachel { margin-bottom: 0.8rem; }
    .werk-daten-seite { padding: 2rem 1.5rem; }
    .werk-nav { width: 36px; height: 36px; font-size: 1.4rem; }
    .werk-nav-zurueck { left: 0.4rem; }
    .werk-nav-vor { right: 0.4rem; }
}

/* --- Nur in der Seelenwerkstatt: Werke anlegen, ändern, löschen --- */
body.is-editor .werk-kachel-schild {
    transform: translateY(0);
    opacity: 1;
    position: static;
    background: none;
    color: inherit;
    padding: 0.8rem 1rem 1rem;
}

body.is-editor .werk-kachel-titel { color: var(--text-main); }
body.is-editor .werk-kachel-preis { color: var(--gold); }
body.is-editor .werk-kachel:hover img { transform: none; }

body.is-editor .werk-kachel-felder {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

body.is-editor .werk-kachel-felder select {
    flex: 1 1 auto;
    min-width: 90px;
    padding: 4px 6px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--text-muted);
    background: var(--bg-main);
    border: 1px solid var(--gold-border);
    border-radius: 6px;
}

body.is-editor .werk-kachel-hinweis {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-style: italic;
}

body.is-editor .werk-kachel-neu {
    break-inside: avoid;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 190px;
    border: 2px dashed var(--gold-border);
    border-radius: 12px;
    background: rgba(197, 168, 128, 0.05);
}

/* --- Seelenwerkstatt: Darstellung fürs Bearbeiten ---
   Auf der Seite laufen die Kundenstimmen als Schieber, immer nur eine sichtbar.
   Zum Bearbeiten wäre das untauglich: Nicole käme an die übrigen gar nicht heran
   (und vor dem Stillstellen rutschte ihr die Stimme nach 6 Sekunden weg).
   Deshalb stehen sie hier alle untereinander. */
body.is-editor .testimonial-slider { min-height: 0; }

body.is-editor .testimonial {
    position: relative;
    opacity: 1;
    transform: none;
    pointer-events: all;
    padding-bottom: 2.2rem;
    margin-bottom: 2.2rem;
    border-bottom: 1px dashed var(--gold-border);
}

body.is-editor .testimonial:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

body.is-editor .slider-controls { display: none; }

/* Leere Textfelder müssen anklickbar bleiben, ohne dass ein unsichtbares
   Zeichen im Inhalt landet. */
body.is-editor [data-edit].ist-leer {
    display: inline-block;
    min-width: 7rem;
    min-height: 1.4em;
    border-bottom: 1px dashed var(--gold);
}

/* Bildbeschreibung — steht nur im Bearbeiten-Modus über dem Bild */
.alt-text-feld {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
    text-align: left;
}

.alt-text-feld span {
    display: inline-block;
    min-width: 8rem;
    padding: 2px 6px;
    border: 1px solid var(--gold-border);
    border-radius: 6px;
    background: #fff;
    color: var(--text-main);
}

/* --- Warmer Platzhalter hinter den Bildern ---
   Bis ein Bild geladen ist, stand vorher ein weisses Loch im Layout. Jetzt liegt
   ein warmer Goldton im Rahmen, in den sich das Bild einfuegt — das Erscheinen
   wirkt dadurch ruhig statt wie ein Ruckler.

   Eine zusaetzliche Einblendung per JavaScript (Bild erst unsichtbar, dann
   weich sichtbar) war gebaut und wurde wieder entfernt: Sie liess sich in der
   Vorschau nicht verlaesslich pruefen, und ihr Fehlerfall waere ein dauerhaft
   unsichtbares Bild gewesen. Das waegt schwerer als der Gewinn. */
.about-image-wrapper .gold-ring-container,
.card-image-mini,
.werk-kachel,
.werkschau-band-vorschau img {
    background-color: rgba(197, 168, 128, 0.13);
}

/* --- Beschneidendes Bildfenster ---
   Runde Bilder („Über mich", Kundenstimmen, Produktfenster) sind Bilder mit
   border-radius. Vergrößert man sie zum Zuschneiden, liefen sie ohne dieses
   Fenster über ihren Rahmen hinaus. Das Fenster schrumpft von selbst auf die
   Größe des Bildes (inline-block), deshalb müssen die Maße nicht doppelt
   gepflegt werden. */
.bild-fenster {
    display: inline-block;
    overflow: hidden;
    line-height: 0;
    vertical-align: top;
    max-width: 100%;
}

.bild-fenster--rund { border-radius: 50%; }

/* Die Ringe liegen absolut im selben Container - das Fenster darf sie nicht
   verschieben. */
.gold-ring-container .bild-fenster { position: relative; z-index: 1; }

/* ==========================================================================
   Camper-Fahrt über der Camping-Überschrift
   Ein kleiner Wagen rollt die Strecke entlang, wendet am Ende und kommt zurück.
   Die Fahrt beginnt erst, wenn der Abschnitt in den Blick kommt (Klasse
   .faehrt), und läuft dann ruhig weiter — sie hängt bewusst nicht am Scrollrad.
   ========================================================================== */
.camper-strecke {
    position: relative;
    height: 76px;
    max-width: 780px;
    margin: 0 auto 1.4rem;
    pointer-events: none;
}

/* Die Straße: eine haarfeine Linie, die an beiden Enden weich ausläuft. */
.camper-strecke::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    height: 1px;
    background: linear-gradient(to right,
        rgba(197, 168, 128, 0) 0%,
        rgba(197, 168, 128, 0.55) 14%,
        rgba(197, 168, 128, 0.55) 86%,
        rgba(197, 168, 128, 0) 100%);
}

/* --- Bäumchen am Wegesrand --- */
.camper-baum {
    position: absolute;
    bottom: 16px;
    line-height: 0;
    transform-origin: 50% 100%;
}

.camper-baum--1 { left: 14%; }
.camper-baum--2 { left: 42%; }
/* Nicht weiter nach rechts: Ab etwa 79 % wendet der Camper, dahinter liegt der
   Zeltplatz. Der dritte Baum wuerde dem Wagen sonst im Weg stehen. */
.camper-baum--3 { left: 64%; }

.camper-strecke.faehrt .camper-baum {
    animation: baumWiegen 7s ease-in-out infinite alternate;
}

.camper-strecke.faehrt .camper-baum--2 { animation-duration: 9s; animation-delay: -2s; }
.camper-strecke.faehrt .camper-baum--3 { animation-duration: 8s; animation-delay: -4s; }

@keyframes baumWiegen {
    from { transform: rotate(-1.1deg); }
    to   { transform: rotate(1.1deg); }
}

/* --- Zeltplatz am Ende der Strecke ---
   Die Zelte stehen nicht mehr verstreut am Weg, sondern bilden rechts, wo die
   Strecke ausläuft, einen kleinen Platz. Damit bekommt die Fahrt ein Ziel: Der
   Camper rollt hin, wendet davor und fährt zurück. */
.camper-zeltplatz {
    position: absolute;
    right: 0;
    bottom: 16px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    line-height: 0;
}

.camper-zelt {
    line-height: 0;
    transform-origin: 50% 100%;
}

/* Das hintere Zelt etwas kleiner und leicht angehoben - das staffelt die Tiefe. */
.camper-zelt--2 { transform: translateY(-3px) scale(0.86); opacity: 0.9; }

/* Zelte stehen ruhiger als die Baeume - nur ein Hauch Bewegung. */
.camper-strecke.faehrt .camper-zelt {
    animation: zeltAtmen 11s ease-in-out infinite alternate;
}

.camper-strecke.faehrt .camper-zelt--2 { animation-duration: 13s; animation-delay: -5s; }

@keyframes zeltAtmen {
    from { transform: scale(1) rotate(-0.45deg); }
    to   { transform: scale(1.02) rotate(0.45deg); }
}

/* Das hintere Zelt behaelt beim Atmen seinen Versatz. */
@keyframes zeltAtmenHinten {
    from { transform: translateY(-3px) scale(0.86) rotate(-0.4deg); }
    to   { transform: translateY(-3px) scale(0.88) rotate(0.4deg); }
}

.camper-strecke.faehrt .camper-zelt--2 { animation-name: zeltAtmenHinten; }

/* --- Der Camper --- */
.camper-fahrzeug {
    position: absolute;
    bottom: 14px;
    left: 0;
    line-height: 0;
}

.camper-wende { display: inline-block; line-height: 0; transform-origin: 50% 60%; }
.camper-bild  { display: block; }

/* Vor dem Start steht der Wagen ruhig am linken Rand. */
.camper-strecke.faehrt .camper-fahrzeug {
    animation: camperWeg 26s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* Hin- und Rückweg: Position und Wenden laufen auf derselben Zeitachse. */
@keyframes camperWeg {
    0%,   4%  { left: 0%;  transform: translateX(0); }
    /* Haelt vor dem Zeltplatz - er faehrt hin, nicht hindurch. */
    46%, 54%  { left: 79%; transform: translateX(-100%); }
    96%, 100% { left: 0%;  transform: translateX(0); }
}

.camper-strecke.faehrt .camper-wende {
    animation: camperWende 26s ease-in-out infinite;
}

/* Der Durchgang durch scaleX(0) liest sich als kurzes Wenden. */
@keyframes camperWende {
    0%,  44%  { transform: scaleX(1); }
    50%, 94%  { transform: scaleX(-1); }
    100%      { transform: scaleX(1); }
}

/* Leichtes Wippen über die Unebenheiten. */
.camper-strecke.faehrt .camper-bild {
    animation: camperWippen 1.6s ease-in-out infinite alternate;
}

@keyframes camperWippen {
    from { transform: translateY(0) rotate(-0.35deg); }
    to   { transform: translateY(1.2px) rotate(0.35deg); }
}

/* Die Räder drehen nur, solange gefahren wird — an den Wendepunkten stehen sie. */
.camper-rad { transform-box: fill-box; transform-origin: 50% 50%; }

.camper-strecke.faehrt .camper-rad {
    animation: radRollen 26s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes radRollen {
    0%,   4%  { transform: rotate(0deg); }
    46%, 54%  { transform: rotate(900deg); }
    96%, 100% { transform: rotate(1800deg); }
}

@media (max-width: 768px) {
    .camper-strecke { height: 62px; max-width: 100%; }
    .camper-zeltplatz { gap: 4px; }
    .camper-bild { width: 56px; height: 28px; }
    .camper-baum--1 { left: 12%; }
    .camper-baum--2 { left: 55%; }
    .camper-baum--3 { display: none; }
}

/* Wer weniger Bewegung eingestellt hat, sieht die Szene als ruhiges Bild:
   Strecke, Bäumchen und ein geparkter Camper. */
@media (prefers-reduced-motion: reduce) {
    .camper-strecke.faehrt .camper-fahrzeug,
    .camper-strecke.faehrt .camper-wende,
    .camper-strecke.faehrt .camper-bild,
    .camper-strecke.faehrt .camper-rad,
    .camper-strecke.faehrt .camper-baum,
    .camper-strecke.faehrt .camper-zelt {
        animation: none !important;
    }
    .camper-fahrzeug { left: 8%; }
}

/* --- Livegang-Prüfung in der Seelenwerkstatt --- */
.livecheck {
    margin-top: 1.6rem;
    padding: 1rem 1.2rem;
    border-radius: 10px;
    background: rgba(192, 57, 43, 0.06);
    border: 1px solid rgba(192, 57, 43, 0.28);
    text-align: left;
}

.livecheck h4 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    font-style: normal;
    color: #a03528;
}

.livecheck p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
    line-height: 1.5;
}

.livecheck ul {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.85rem;
    line-height: 1.6;
}

.livecheck--gut {
    background: rgba(120, 160, 110, 0.08);
    border-color: rgba(120, 160, 110, 0.35);
}

.livecheck--gut h4 { color: #4d7a44; margin: 0; }

/* Repair 2026-09-19: no fragmented multi-column cards or hover reflow. */
.werkschau-mauerwerk { columns: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1.2rem; align-items: start; }
.werk-kachel { margin: 0; min-width: 0; }
.werk-kachel img { height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
body.is-editor .werk-kachel:hover { transform: none; }
body.is-editor [data-edit] { transition: box-shadow .2s, background-color .2s; }
body.is-editor .fade-up { opacity: 1; transform: none; }
.variant-picture { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .6rem 0; font-size: .8rem; }
.variant-picture img { width: 120px; height: 90px; object-fit: contain; background: rgba(197,168,128,.13); border-radius: 8px; }
.werkschau-filter button { min-height: 44px; }
#werkschau-mehr { display: block; margin: 1.5rem auto; }
@media (max-width: 600px) {
    body.is-editor .werkschau-kopf { position: static; }
    .werkschau-mauerwerk { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
    body.is-editor .werkschau-mauerwerk { grid-template-columns: 1fr; }
    .werk-kachel-schild { opacity: 1; transform: none; }
}

/* Long variant lists must scroll on desktop too; keep controls reachable. */
.catalog-modal-content { overflow-y: auto; }
body.is-editor .catalog-image-side { align-items: flex-start; }
body.is-editor .werkschau-modal-content { padding-bottom: 100px; }
body.is-editor .catalog-data-side { padding-bottom: 100px; }
@media (max-width: 700px) {
    body.is-editor .werkschau-modal-content,
    body.is-editor .catalog-data-side { padding-bottom: 155px; }
}