/* ═══════════════════════════════════════════
   LichtMensch – Gold & Nacht
   Dunkel-transparente Flächen, Goldschrift mit leichtem Glühen, ausblendende Goldlinien.
   Schriften wie im BeschreibungBogen-Generator: Cinzel Decorative, Cinzel, Cormorant Garamond, Inter.
   Leistung: keine Glas-Unschärfe (backdrop-filter), Endlos-Animationen nur über transform/opacity.
   ═══════════════════════════════════════════ */

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

:root {
    --bg: #05060a;
    --gold: #d4af37;
    --gold2: #f3d77c;
    --gold3: #fff1c4;
    --gold-deep: #a8781a;
    --text: #f8f0dc;
    --text-soft: rgba(250, 242, 222, 0.95);
    --muted: #d2c295;
    --text-glow: 0 0 14px rgba(255, 207, 110, 0.3);
    --line: rgba(212, 175, 55, 0.2);
    --line-strong: rgba(212, 175, 55, 0.45);
    --panel: linear-gradient(160deg, rgba(30, 26, 14, 0.38), rgba(8, 9, 14, 0.5));
    --glow: rgba(255, 207, 90, 0.35);
    --gold-text: linear-gradient(180deg, var(--gold3) 0%, var(--gold2) 42%, var(--gold) 72%, var(--gold-deep) 100%);
    --font-deco: 'LM Deco E', 'Cinzel Decorative', 'Cinzel', Georgia, serif;
    --font-head: 'Cinzel', Georgia, serif;
    --font-body: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-ui: 'Inter', system-ui, 'Segoe UI', sans-serif;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --star: polygon(50% 0%, 61.8% 34.5%, 97.6% 34.5%, 68.5% 55.9%, 79.4% 90.5%, 50% 69.1%, 20.6% 90.5%, 31.5% 55.9%, 2.4% 34.5%, 38.2% 34.5%);

    /* ältere Namen (Admin, Lab) */
    --gold-bright: var(--gold2);
    --border: var(--line);
    --border-hover: var(--line-strong);
    --text-dim: var(--text-soft);
    --text-muted: rgba(236, 229, 211, 0.45);
}

html {
    scroll-behavior: smooth;
    font-size: 17px;
    scroll-padding-top: 72px;
    overflow-x: clip; /* Handy: nichts darf die Seite seitlich verbreitern (auch nicht kurz beim Laden von Ecwid) */
}

body {
    font-family: var(--font-body);
    font-size: 1.2rem;
    color: var(--text);
    background: var(--bg);
    line-height: 1.7;
    text-align: center;
    text-shadow: var(--text-glow); /* alle Texte mit leichtem Goldglühen */
    overflow-x: hidden;
    overflow-x: clip; /* „clip“ statt „hidden“: macht den body nicht zum Scrollbereich – sonst bleibt die Lichtarchiv-Galaxie nicht kleben */
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: rgba(212, 175, 55, 0.35);
    color: var(--gold3);
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.25) transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.22); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212, 175, 55, 0.4); }

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

a {
    color: var(--gold2);
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

a:hover {
    color: var(--gold3);
    text-shadow: 0 0 12px var(--glow);
}

img {
    max-width: 100%;
    height: auto;
}

:focus-visible {
    outline: 1px solid var(--gold2);
    outline-offset: 3px;
}

/* ── Goldene Mauszeiger (images/cursor/*.svg) ── */
html,
body {
    cursor: url('../images/cursor/pfeil.svg') 5 3, auto;
}

a,
button,
[role="button"],
label[for],
select,
summary,
[onclick],
input[type="submit"],
input[type="button"],
input[type="checkbox"],
input[type="radio"],
#ecwid-shop a,
#ecwid-shop button,
#ecwid-shop [role="button"],
#ecwid-shop label,
#ecwid-shop .form-control__button,
#ecwid-shop .details-gallery__picture {
    cursor: url('../images/cursor/hand.svg') 13 3, pointer;
}

input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
textarea,
[contenteditable="true"] {
    cursor: url('../images/cursor/text.svg') 16 16, text;
}

/* Goldschrift mit leichtem Glühen */
.gold-text,
.section-title,
.hero-subtitle,
.header-wordmark,
.footer-wordmark,
.gans-flyer-title {
    background: var(--gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Verlaufsschrift glüht über drop-shadow – ein Textschatten würde den Verlauf trüben */
.gold-text,
.section-title,
.hero-subtitle,
.header-wordmark,
.footer-wordmark,
.gans-flyer-title,
.price-title,
.price-amount,
.legal-content h1,
.legal-content > h3 {
    text-shadow: none;
}

/* Cinzel Decorative schiebt sonst per Unterschneidung z. B. das verzierte „h“ unter das „e“ („Alchemie“) */
.section-title,
.header-wordmark,
.footer-wordmark,
.gans-flyer-title,
.price-title,
.price-amount,
.legal-content h1,
.legal-content > h3 {
    font-kerning: none;
    font-variant-ligatures: none;
}

/* Ornament: Linie – Stern – Linie, nach außen ausblendend */
.ornament {
    display: flex;
    align-items: center;
    gap: 22px;
    width: min(440px, 72%);
    margin: 0 auto;
    filter: drop-shadow(0 0 4px rgba(255, 207, 90, 0.55));
}

/* Linien blenden nach außen UND zum Stern hin aus – mit Luft um den Stern */
.ornament span {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--gold) 58%, rgba(212, 175, 55, 0.3) 88%, transparent 100%);
}

.ornament span:last-child {
    background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.3) 12%, var(--gold) 42%, transparent 100%);
}

/* Video-Kategorien bekommen das Ornament unter ihrem Titel */
.carousel-ornament {
    width: min(320px, 70%);
    margin: -10px auto 22px;
}

.ornament i {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    background: var(--gold2);
    clip-path: var(--star);
}

/* ── Galaxie-Hintergrund ── */
@keyframes galaxySpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.galaxy-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: var(--bg);
}

/* sqrt(2) * 100vmax: beim Drehen bleiben die Ecken immer bedeckt */
.galaxy-spin {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 142vmax;
    height: 142vmax;
    transform: translate(-50%, -50%);
    animation: galaxySpin 600s linear infinite;
    will-change: transform;
}

/* Helligkeit/Sättigung sind ins Bild eingerechnet (kein CSS-Filter mehr) */
.galaxy-photo {
    position: absolute;
    inset: 0;
    background: url('../images/galaxy.webp') center / cover no-repeat;
}

.galaxy-stars,
.galaxy-twinkle {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.galaxy-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 35%, rgba(8, 8, 16, 0.2) 0%, rgba(5, 5, 10, 0.66) 62%, rgba(2, 2, 5, 0.9) 100%);
}

/* ── Header ── */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 64px;
}

.header-bar {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 5, 9, 0.94) 0%, rgba(5, 6, 10, 0.8) 100%);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.7s ease;
}

/* Goldlinie unten: zieht sich beim Scrollen von der Mitte nach außen auf */
.header-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.18) 14%, var(--gold) 50%, rgba(212, 175, 55, 0.18) 86%, transparent 100%);
    transform: scaleX(0);
    opacity: 0;
    transition: transform 1.2s var(--ease), opacity 0.6s ease;
}

.header-line::before {
    content: '';
    position: absolute;
    left: 25%;
    right: 25%;
    top: -4px;
    height: 9px;
    background: radial-gradient(ellipse at center, rgba(255, 207, 90, 0.45) 0%, transparent 70%);
}

/* Lichtfunke, der einmal über die Linie läuft */
.header-line::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 140px;
    height: 5px;
    background: radial-gradient(ellipse at center, var(--gold3) 0%, rgba(255, 207, 90, 0.6) 35%, transparent 70%);
    opacity: 0;
}

@keyframes lineSweep {
    0% { opacity: 0; transform: translateX(-160px); }
    15%, 80% { opacity: 1; }
    100% { opacity: 0; transform: translateX(100vw); }
}

/* Logo + Reiter bilden eine zentrierte Gruppe: beim Scrollen öffnet sich links Platz fürs Logo,
   die Reiter rücken weich zur Seite – alles bleibt mittig */
.header-inner {
    position: relative;
    height: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    max-width: 0;
    margin-right: 0;
    pointer-events: none;
    transition: max-width 1s var(--ease), margin-right 1s var(--ease);
}

.header.scrolled .header-brand {
    max-width: 280px;
    margin-right: 38px;
}

.header-brand:hover {
    text-shadow: none;
}

.header-emblem {
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
    opacity: 0;
    transform: scale(0.2) rotate(-140deg);
    transition: transform 1s cubic-bezier(0.2, 1.35, 0.35, 1), opacity 0.5s ease;
}

.header-emblem img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Aufleuchten, wenn das Emblem landet */
.header-emblem::before {
    content: '';
    position: absolute;
    inset: -26px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 241, 196, 0.9) 0%, rgba(255, 207, 90, 0.4) 30%, transparent 65%);
    opacity: 0;
    pointer-events: none;
}

@keyframes flare {
    0% { opacity: 0; transform: scale(0.3); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.9); }
}

/* Original-Schriftzug aus dem Logo (images/schriftzug.webp) */
.header-wordmark {
    display: block;
    line-height: 0;
    white-space: nowrap;
    filter: drop-shadow(0 0 6px rgba(255, 207, 90, 0.3));
    clip-path: inset(-20px calc(100% + 20px) -20px -20px);
    transition: clip-path 1.1s 0.3s var(--ease);
}

.header-wordmark img {
    display: block;
    height: 17px;
    width: auto;
}

.header.scrolled .header-bar,
.header.menu-open .header-bar { opacity: 1; }
.header.scrolled .header-line { transform: scaleX(1); opacity: 1; }
.header.scrolled .header-line::after { animation: lineSweep 2.6s 0.5s cubic-bezier(0.4, 0, 0.2, 1) both; }
.header.scrolled .header-brand { pointer-events: auto; }
.header.scrolled .header-emblem { opacity: 1; transform: none; }
.header.scrolled .header-emblem::before { animation: flare 1.2s 0.35s ease-out both; }
.header.scrolled .header-wordmark { clip-path: inset(-20px -20px -20px -20px); }

.header-brand:hover .header-emblem img {
    transform: rotate(18deg) scale(1.06);
}

.header-emblem img {
    transition: transform 0.6s var(--ease);
}

@keyframes navIn {
    from { opacity: 0; transform: translateY(-10px); }
}

.nav {
    justify-self: center;
    display: flex;
    gap: 2px;
    align-items: center;
}

.nav-link {
    position: relative;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(236, 229, 211, 0.8);
    padding: 10px 13px;
    animation: navIn 0.9s var(--ease) both;
}

.nav-link:nth-child(2) { animation-delay: 0.08s; }
.nav-link:nth-child(3) { animation-delay: 0.16s; }
.nav-link:nth-child(4) { animation-delay: 0.24s; }
.nav-link:nth-child(5) { animation-delay: 0.32s; }
.nav-link:nth-child(6) { animation-delay: 0.4s; }
.nav-link { white-space: nowrap; }

/* sechs Reiter: auf mittelbreiten Bildschirmen etwas enger, damit alles in einer Zeile bleibt */
@media (min-width: 981px) and (max-width: 1260px) {
    .nav-link { padding: 10px 9px; font-size: 0.76rem; letter-spacing: 0.11em; }
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 4px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold2), transparent);
    transform: scaleX(0);
    transition: transform 0.45s var(--ease);
}

.nav-link:hover,
.nav-link.active {
    color: var(--gold2);
    text-shadow: 0 0 12px rgba(255, 207, 90, 0.55);
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
}

.hamburger {
    display: none;
    justify-self: end;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: url('../images/cursor/hand.svg') 13 3, pointer;
    padding: 10px;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 1.5px;
    background: var(--gold2);
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(255, 207, 90, 0.5);
    transition: transform 0.35s var(--ease), opacity 0.3s ease;
}

.hamburger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Hero ── */
.hero {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 90px 0 110px;
    overflow: hidden;
}

.hero-aura {
    position: absolute;
    left: 50%;
    top: 40%;
    width: min(980px, 130vw);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 200, 90, 0.17) 0%, rgba(212, 175, 55, 0.07) 34%, transparent 64%);
    animation: auraBreath 9s ease-in-out infinite;
    pointer-events: none;
}

@keyframes auraBreath {
    0%, 100% { opacity: 0.65; transform: translate(-50%, -50%) scale(0.93); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}

.hero-content {
    position: relative;
    z-index: 2;
}

/* Schweben als echte Sinuswelle: hin und zurück (alternate) mit Sinus-Kurve, ohne Knick an den Wendepunkten.
   Die winzige Drehung verhindert, dass der Browser das Bild auf ganze Pixel einrastet (sonst „stufiges“ Gleiten). */
@keyframes float {
    from { transform: translate3d(0, 0, 0) rotate(0.01deg); }
    to { transform: translate3d(0, -10px, 0) rotate(0.01deg); }
}

@keyframes heroIn {
    from { opacity: 0; transform: scale(0.86); }
}

@keyframes riseIn {
    from { opacity: 0; transform: translateY(22px); }
}

/* Das große Logo ist die H1 der Startseite (für Suchmaschinen), es soll aussehen wie ein schlichter Behälter */
h1.hero-logo-wrap { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }

.hero-logo-wrap {
    will-change: transform;
    backface-visibility: hidden;
    animation: float 3.6s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}

/* Solange der Ladekreis zu sehen ist, warten die Einblend-Animationen – sie starten erst danach */
html.is-loading :is(.hero-logo, .hero-ornament, .hero-subtitle, .hero-text, .hero-actions, .nav-link, .hero-vortex) {
    animation-play-state: paused;
}

/* Die Scroll-Animation setzt transform/opacity direct am Bild – deshalb hier nur „backwards“, sonst blockiert die Einblendung sie */
.hero-logo {
    display: block;
    width: min(676px, 80vw); /* 11 % kleiner als zuvor (760px, 90vw) */
    height: auto;
    margin: 0 auto 6px;
    transform-origin: 50% 40%;
    will-change: transform, opacity;
    animation: heroIn 1.8s var(--ease) backwards;
}

.hero-ornament { animation: riseIn 1.2s 0.5s var(--ease) both; margin-bottom: 26px; }

.hero-subtitle {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: clamp(0.95rem, 1.9vw, 1.28rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 18px;
    filter: drop-shadow(0 0 12px rgba(255, 207, 90, 0.35));
    animation: riseIn 1.2s 0.7s var(--ease) both;
}

.hero-text {
    max-width: 640px;
    margin: 0 auto;
    font-style: italic;
    font-size: clamp(1.25rem, 2.2vw, 1.55rem);
    line-height: 1.65;
    color: rgba(236, 222, 190, 0.88);
    animation: riseIn 1.2s 0.85s var(--ease) both;
}

.hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 38px;
    animation: riseIn 1.2s 1s var(--ease) both;
}

/* ── Buttons ── */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 34px;
    border-radius: 999px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: url('../images/cursor/hand.svg') 13 3, pointer;
    border: none;
    overflow: hidden;
    transition: transform 0.35s var(--ease), box-shadow 0.35s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn-primary {
    color: #1d1505;
    background: linear-gradient(180deg, #fbe7a6 0%, var(--gold2) 35%, var(--gold) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 250, 230, 0.6), 0 8px 30px rgba(212, 175, 55, 0.25);
}

/* Glanz, der beim Darüberfahren durchläuft */
.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: translateX(-160%) skewX(-18deg);
    transition: transform 0.9s var(--ease);
}

.btn-primary:hover {
    color: #1d1505;
    text-shadow: none;
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 250, 230, 0.6), 0 10px 40px rgba(255, 207, 90, 0.45);
}

.btn-primary:hover::after {
    transform: translateX(260%) skewX(-18deg);
}

.btn-ghost {
    color: var(--gold2);
    background: rgba(5, 6, 10, 0.4);
    border: 1px solid var(--line-strong);
}

.btn-ghost:hover {
    color: var(--gold3);
    border-color: var(--gold2);
    transform: translateY(-2px);
    box-shadow: 0 0 24px rgba(255, 207, 90, 0.25);
}

/* ── Sections ── */
.section {
    position: relative;
    z-index: 1;
    padding: 120px 0;
}

/* Trennlinie oben, nach außen ausblendend */
.section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: min(1100px, 90%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.32), transparent);
}

.section-alt {
    background: linear-gradient(180deg, transparent 0%, rgba(3, 4, 8, 0.5) 18%, rgba(3, 4, 8, 0.5) 82%, transparent 100%);
}

.section-title {
    position: relative;
    text-align: center;
    font-family: var(--font-deco);
    font-weight: 700;
    font-size: clamp(1.95rem, 4.8vw, 3.1rem);
    line-height: 1.25;
    letter-spacing: 0.06em;
    padding-bottom: 30px;
    margin-bottom: 48px;
    filter: drop-shadow(0 0 18px rgba(255, 207, 90, 0.3));
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: min(560px, 82%);
    height: 1px;
    transform: translateX(-50%);
    /* zwei Linien, die zum Stern hin und nach außen ausblenden – mit Luft um den Stern */
    background: linear-gradient(90deg, transparent 0%, var(--gold) 34%, rgba(212, 175, 55, 0.35) 44%, transparent calc(50% - 22px), transparent calc(50% + 22px), rgba(212, 175, 55, 0.35) 56%, var(--gold) 66%, transparent 100%);
    transition: transform 1.4s var(--ease);
}

.section-title::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 13px;
    height: 13px;
    margin-left: -6.5px;
    background: var(--gold2);
    clip-path: var(--star);
    transition: transform 0.8s 0.6s var(--ease), opacity 0.8s 0.6s ease;
}

/* Linie zeichnet sich ein, sobald die Überschrift ins Bild kommt (Klasse setzt main.js) */
.section-title.reveal::after { transform: translateX(-50%) scaleX(0); }
.section-title.reveal::before { transform: scale(0) rotate(-90deg); opacity: 0; }
.section-title.reveal.visible::after { transform: translateX(-50%) scaleX(1); }
.section-title.reveal.visible::before { transform: none; opacity: 1; }

.section-intro {
    text-align: center;
    max-width: 700px;
    margin: -16px auto 54px;
    font-style: italic;
    font-size: 1.42rem;
    color: var(--text-soft);
}

/* Dunkel-transparente Fläche mit Goldlinie oben (ersetzt den Glas-Effekt) */
.panel,
.product-card,
.testimonial-card,
.philosophy-card,
.contact-item,
.quote-highlight,
.philosophy-quote {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 241, 196, 0.04);
}

.panel::before,
.product-card::before,
.testimonial-card::before,
.philosophy-card::before,
.contact-item::before,
.quote-highlight::before,
.philosophy-quote::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 14%;
    right: 14%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.75;
    transition: left 0.5s var(--ease), right 0.5s var(--ease), opacity 0.4s ease;
}

.product-card,
.testimonial-card,
.philosophy-card,
.contact-item {
    transition: transform 0.45s var(--ease), border-color 0.4s ease, box-shadow 0.4s ease, opacity 0.9s var(--ease);
}

.product-card:hover,
.testimonial-card:hover,
.philosophy-card:hover,
.contact-item:hover {
    transform: translateY(-4px);
    border-color: var(--line-strong);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 34px rgba(212, 175, 55, 0.12);
}

.product-card:hover::before,
.testimonial-card:hover::before,
.philosophy-card:hover::before,
.contact-item:hover::before {
    left: 4%;
    right: 4%;
    opacity: 1;
}

/* --- Orgonit Alchemie --- */
.about-content {
    max-width: 800px;
    margin: 0 auto;
}

.about-text > p {
    margin-bottom: 24px;
    font-size: 1.32rem;
    line-height: 1.85;
    color: var(--text-soft);
}

.quote-highlight {
    text-align: center;
    margin: 46px 0;
    padding: 44px 40px 36px;
    font-style: italic;
    font-size: 1.42rem;
    line-height: 1.75;
    color: #f1e3bd;
}

.quote-highlight::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 22%;
    right: 22%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6), transparent);
}

.quote-highlight .quote-mark {
    display: block;
    font-family: var(--font-deco);
    font-style: normal;
    font-size: 4.2rem;
    line-height: 0.6;
    margin-bottom: 14px;
    color: var(--gold);
    opacity: 0.55;
    text-shadow: 0 0 24px rgba(255, 207, 90, 0.4);
}

.quote-highlight cite,
.philosophy-quote cite {
    display: block;
    margin-top: 18px;
    font-family: var(--font-head);
    font-style: normal;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold2);
    text-shadow: 0 0 10px var(--glow);
}

.about-links {
    display: flex;
    gap: 16px;
    margin-top: 34px;
    flex-wrap: wrap;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 26px;
    border-radius: 999px;
    background: rgba(5, 6, 10, 0.45);
    border: 1px solid var(--line-strong);
    color: var(--gold2);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: transform 0.35s var(--ease), box-shadow 0.35s ease, border-color 0.3s ease, color 0.3s ease;
}

.social-link:hover {
    color: var(--gold3);
    border-color: var(--gold2);
    transform: translateY(-2px);
    box-shadow: 0 0 26px rgba(255, 207, 90, 0.25);
}

.social-link svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

/* --- Produkte --- */
.product-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-bottom: 60px;
}

.product-card {
    padding: 32px 24px;
    text-align: center;
}

.product-card h3 {
    font-family: var(--font-head);
    color: var(--gold2);
    font-size: 1.1rem;
    margin-bottom: 12px;
    text-shadow: 0 0 14px var(--glow);
}

.product-card p {
    color: var(--text-soft);
    margin-bottom: 12px;
}

.product-price {
    font-family: var(--font-head);
    font-size: 1.3rem !important;
    font-weight: 700;
    color: var(--gold2) !important;
    text-shadow: 0 0 15px var(--glow) !important;
}

.shop-container {
    padding-top: 8px;
}

/* --- Preisliste Natur-Orgonit --- */
.price-list {
    margin-top: 100px;
}

.price-head {
    text-align: center;
    margin-bottom: 46px;
}

.price-kicker {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--gold);
}

.price-title {
    display: inline-block;
    margin: 8px 0 18px;
    font-family: var(--font-deco);
    font-weight: 700;
    font-size: clamp(2rem, 4.4vw, 2.8rem);
    letter-spacing: 0.06em;
    background: var(--gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 16px rgba(255, 207, 90, 0.3));
}

.price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 30px;
    max-width: 920px;
    margin: 0 auto;
}

.price-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 46px 32px 38px;
    text-align: center;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 241, 196, 0.05);
    transition: transform 0.5s var(--ease), border-color 0.4s ease, box-shadow 0.4s ease, opacity 0.9s var(--ease);
}

/* Goldlinie oben + Lichtschimmer, der beim Einblenden einmal über die Karte zieht */
.price-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold2), transparent);
    transition: left 0.5s var(--ease), right 0.5s var(--ease);
}

.price-card::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 233, 170, 0.1), transparent);
    transform: translateX(-130%) skewX(-16deg);
    pointer-events: none;
}

.price-card.visible::after {
    animation: cardSheen 1.8s 0.4s var(--ease) both;
}

@keyframes cardSheen {
    to { transform: translateX(330%) skewX(-16deg); }
}

.price-card:hover {
    transform: translateY(-6px);
    border-color: var(--line-strong);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 40px rgba(212, 175, 55, 0.16);
}

.price-card:hover::before {
    left: 3%;
    right: 3%;
}

.price-icon {
    position: relative;
    width: 104px;
    height: 104px;
    margin: 0 auto 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: radial-gradient(circle, rgba(255, 207, 90, 0.14), transparent 70%);
    box-shadow: 0 0 34px rgba(212, 175, 55, 0.14);
    color: var(--gold2);
}

/* langsam kreisender Sternenkranz um das Symbol */
.price-icon::before {
    content: '';
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 1px dashed rgba(212, 175, 55, 0.35);
    animation: ringSpin 40s linear infinite;
}

@keyframes ringSpin {
    to { transform: rotate(360deg); }
}

.price-icon svg {
    width: 58px;
    height: 58px;
    filter: drop-shadow(0 0 6px rgba(255, 207, 90, 0.5));
}

.price-card h4 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.24rem;
    line-height: 1.45;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold2);
    text-shadow: 0 0 14px rgba(255, 207, 90, 0.4);
}

.price-sub {
    margin-top: 6px;
    font-style: italic;
    font-size: 1.45rem;
    color: #cdb88a;
}

.price-line {
    position: relative;
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 16px;
    margin: auto 0 28px; /* Preis + Button stehen in allen Karten auf gleicher Höhe */
    padding-top: 18px;
    border-top: 24px solid transparent;
    background-clip: padding-box;
    padding: 18px 0;
}

.price-line::before,
.price-line::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.45), transparent);
}

.price-line::before { top: 0; }
.price-line::after { bottom: 0; }

.price-weight {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.55rem;
    color: var(--muted);
}

.fn-unit {
    font-size: 0.8em;
    letter-spacing: 0.12em;
}

.price-amount {
    display: inline-flex;
    align-items: center;
    gap: 0.14em;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 2.9rem;
    line-height: 1;
    filter: drop-shadow(0 0 14px rgba(255, 207, 90, 0.4));
}

.price-cur {
    font-family: var(--font-deco);
    font-size: 0.9em;
    background: var(--gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.price-note {
    max-width: 760px;
    margin: 50px auto 0;
    text-align: center;
}

.price-note-lead {
    font-style: italic;
    font-size: 1.65rem;
    color: #f1e3bd;
    margin-bottom: 18px;
}

.material-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.material-list li {
    padding: 9px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(5, 6, 10, 0.5);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.02rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.material-list li::before {
    content: '\2726';
    margin-right: 8px;
    color: var(--gold);
    text-shadow: 0 0 8px var(--glow);
}

.price-hint {
    margin-top: 20px;
    font-family: var(--font-ui);
    font-size: 1.15rem;
    color: var(--muted);
}

/* --- Erfahrungsberichte --- */
/* eine breite, flache Karte pro Bericht – untereinander */
.testimonials {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 920px;
    margin: 0 auto;
}

.testimonial-card {
    padding: 58px 32px 30px;
}

.testimonial-quote {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-deco);
    font-size: 4.4rem;
    line-height: 1;
    color: var(--gold);
    opacity: 0.32;
    text-shadow: 0 0 20px var(--glow);
}

.testimonial-card .tc-preview,
.testimonial-card .tc-full {
    position: relative;
    font-size: 1.24rem;
    line-height: 1.72;
    color: var(--text-soft);
}

.tc-expand-btn {
    display: inline-block;
    margin-top: 14px;
    padding: 6px 18px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold2);
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    cursor: url('../images/cursor/hand.svg') 13 3, pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.tc-expand-btn:hover {
    color: var(--gold3);
    border-color: var(--gold2);
    box-shadow: 0 0 14px rgba(255, 207, 90, 0.25);
}

.tc-expanded {
    z-index: 10;
    border-color: var(--line-strong) !important;
}

.testimonial-author {
    display: block;
    margin-top: 20px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold2);
    text-shadow: 0 0 10px rgba(255, 207, 90, 0.3);
}

.testimonials-expand {
    text-align: center;
    margin: 44px 0 0;
}

.btn-expand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: rgba(5, 6, 10, 0.45);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--gold2);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: url('../images/cursor/hand.svg') 13 3, pointer;
    transition: transform 0.35s var(--ease), box-shadow 0.35s ease, border-color 0.3s ease, color 0.3s ease;
}

.btn-expand:hover {
    color: var(--gold3);
    border-color: var(--gold2);
    box-shadow: 0 0 24px rgba(255, 207, 90, 0.25);
    transform: translateY(-2px);
}

.expand-arrow {
    transition: transform 0.4s var(--ease);
}

.btn-expand.expanded .expand-arrow {
    transform: rotate(180deg);
}

.testimonials-hidden {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    transition: max-height 0.6s ease, opacity 0.4s ease, margin-top 0.4s ease;
}

.testimonials-hidden.shown {
    max-height: 9000px;
    opacity: 1;
    margin-top: 26px;
}

/* --- Was ist GANS --- */
.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 48px;
}

.philosophy-card {
    padding: 34px 30px;
}

.philosophy-card h3 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold2);
    margin-bottom: 14px;
    text-shadow: 0 0 14px rgba(255, 207, 90, 0.45);
}

.philosophy-card p {
    color: var(--text-soft);
    font-size: 1.2rem;
    line-height: 1.7;
}

.gans-link-card {
    cursor: url('../images/cursor/hand.svg') 13 3, pointer;
}

.gans-link-card h3::after {
    content: ' \2193';
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gans-link-card:hover h3::after {
    opacity: 0.6;
}

.philosophy-quote {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.3rem;
    font-style: italic;
    padding: 40px;
}

.gans-flyer-hidden {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.6s ease, opacity 0.4s ease;
}

.gans-flyer-hidden.shown {
    max-height: 20000px;
    opacity: 1;
}

/* breiter, schwacher Goldschein, der eine angesprungene Textstelle kurz aufleuchten lässt (main.js: glowPassage) */
.lm-passage-glow {
    position: absolute;
    pointer-events: none;
    border-radius: 48px;
    background: radial-gradient(ellipse at center, rgba(255, 214, 120, 0.15) 0%, rgba(255, 200, 90, 0.06) 45%, transparent 72%);
    mix-blend-mode: screen;
    opacity: 0;
    animation: passageGlow 2.8s ease-in-out forwards;
}

@keyframes passageGlow {
    25% { opacity: 1; }
    60% { opacity: 0.85; }
    100% { opacity: 0; }
}

.gans-flyer-content {
    position: relative;
    max-width: 780px;
    margin: 40px auto 0;
    text-align: center;
    color: var(--text-soft);
    font-size: 1.26rem;
    line-height: 1.85;
}

.gans-flyer-content p {
    margin-bottom: 18px;
}

.gans-flyer-title {
    position: relative;
    display: block;
    font-family: var(--font-deco);
    font-weight: 700;
    font-size: clamp(1.55rem, 3.4vw, 2.05rem);
    letter-spacing: 0.05em;
    margin: 56px 0 26px;
    padding-bottom: 18px;
    filter: drop-shadow(0 0 14px rgba(255, 207, 90, 0.3));
}

.gans-flyer-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 280px;
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent 0%, var(--gold) 34%, rgba(212, 175, 55, 0.35) 44%, transparent calc(50% - 18px), transparent calc(50% + 18px), rgba(212, 175, 55, 0.35) 56%, var(--gold) 66%, transparent 100%);
}

/* kleiner Stern in der Lücke */
.gans-flyer-title::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 11px;
    height: 11px;
    margin-left: -5.5px;
    background: var(--gold2);
    clip-path: var(--star);
}

.gans-flyer-content h4 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.04rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold2);
    margin: 32px 0 12px;
    text-shadow: 0 0 10px rgba(255, 207, 90, 0.35);
}

.gans-flyer-content ul {
    list-style: none;
    margin: 0 0 18px;
}

.gans-flyer-content ul li {
    padding: 9px 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

.gans-flyer-content ul li::before {
    content: '\2726';
    color: var(--gold);
    margin-right: 10px;
    text-shadow: 0 0 8px var(--glow);
}

.gans-warning {
    background: linear-gradient(160deg, rgba(60, 14, 14, 0.55), rgba(20, 6, 6, 0.7));
    border: 1px solid rgba(255, 120, 100, 0.28);
    border-radius: 14px;
    padding: 18px 24px;
    margin: 22px 0;
}

.gans-warning p {
    margin-bottom: 4px !important;
    color: rgba(255, 196, 186, 0.88);
}

.gans-warning strong {
    font-family: var(--font-head);
    letter-spacing: 0.14em;
    color: #ffb4a6;
}

/* --- Kontakt --- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;   /* Kontakt-Orbit und Formular mittig auf einer Höhe */
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-info > a,
.contact-info > a:hover {
    text-shadow: none;
}

.contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 24px 20px;
}

.contact-item svg {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    padding: 11px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--gold2);
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.15);
}

.contact-item strong {
    display: block;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold2);
    margin-bottom: 2px;
}

.contact-item span {
    font-family: var(--font-ui);
    font-size: 1.08rem;
    color: var(--text-soft);
}

/* ═══════════════════════════════════════════
   Kontakt-Orbit: E-Mail, Telegram, YouTube kreisen als Goldplaneten um das Emblem
   (alles über transform → läuft auf der Grafikkarte; Maus über einem Planeten hält den Orbit an)
   ═══════════════════════════════════════════ */
.contact-orbit {
    --dur: 480s; /* ganz langsam: eine Runde in 8 Minuten */
    position: relative;
    width: min(480px, 100%);
    aspect-ratio: 1;
    margin: 0 auto;   /* ohne Außenabstand → exakt mittig zum Formular */
}

.orbit-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.orbit-ring-main {
    inset: 11%;
    border: 1px solid rgba(212, 175, 55, 0.32);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.08), inset 0 0 40px rgba(212, 175, 55, 0.06);
}

.orbit-ring-outer {
    inset: 1%;
    border: 1px dashed rgba(212, 175, 55, 0.2);
    animation: orbitSpin 1300s linear infinite;
}

.orbit-ring-inner {
    inset: 29%;
    border: 1px dashed rgba(212, 175, 55, 0.28);
    animation: orbitSpin 800s linear infinite reverse;
}

/* Lichtkomet, der über die Umlaufbahn jagt */
.orbit-comet {
    position: absolute;
    inset: 11%;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg 250deg, rgba(255, 214, 120, 0.05) 290deg, rgba(255, 228, 160, 0.9) 356deg, transparent 360deg);
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px), #000 100%, transparent 100%);
    mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px), #000 100%, transparent 100%);
    filter: drop-shadow(0 0 6px rgba(255, 207, 90, 0.8));
    animation: orbitSpin 100s linear infinite;
    pointer-events: none;
}

.orbit-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 15%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    pointer-events: none;
}

.orbit-core::before {
    content: '';
    position: absolute;
    inset: -110%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 200, 90, 0.35) 0%, rgba(212, 175, 55, 0.08) 45%, transparent 70%);
    /* eigene Animation: auraBreath verschiebt um -50 % (für mittig gesetzte Scheine) – hier ergab das einen Fleck oben links */
    animation: coreBreath 5s ease-in-out infinite;
}

@keyframes coreBreath {
    0%, 100% { opacity: 0.7; transform: scale(0.94); }
    50% { opacity: 1; transform: scale(1.06); }
}

/* goldener Fünfzack-Stern in der Mitte, dreht sich ganz langsam */
.orbit-star {
    position: relative;
    width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 0 10px rgba(255, 207, 90, 0.85)) drop-shadow(0 0 26px rgba(255, 190, 70, 0.4));
    animation: orbitSpin 120s linear infinite;
}

@keyframes orbitSpin {
    to { transform: rotate(360deg); }
}

/* Jede Bahn dreht sich; die drei Planeten starten um je ein Drittel versetzt */
.orbit-track {
    position: absolute;
    inset: 11%;
    pointer-events: none;
    animation: orbitSpin var(--dur) linear infinite;
    animation-delay: calc(var(--i) * var(--dur) / -3);
}

/* Lichtstrahl von der Mitte zum Planeten – dreht automatisch mit */
.orbit-track::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 50%;
    margin-left: -0.5px;
    background: linear-gradient(0deg, rgba(255, 214, 120, 0) 22%, rgba(255, 214, 120, 0.45) 100%);
    opacity: 0.5;
    transition: opacity 0.4s ease, box-shadow 0.4s ease;
}

.orbit-track:has(.orbit-planet:hover)::before,
.orbit-track:has(.orbit-planet:focus-visible)::before {
    opacity: 1;
    box-shadow: 0 0 10px rgba(255, 207, 90, 0.8);
}

.orbit-arm {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
}

/* Planet dreht gegenläufig, damit Symbol und Schrift immer aufrecht bleiben */
.orbit-planet {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    pointer-events: auto;
    animation: orbitSpin var(--dur) linear infinite reverse;
    animation-delay: calc(var(--i) * var(--dur) / -3);
}

.orbit-planet:hover {
    text-shadow: none;
}

.contact-orbit:has(.orbit-planet:hover) :is(.orbit-track, .orbit-planet),
.contact-orbit:has(.orbit-planet:focus-visible) :is(.orbit-track, .orbit-planet) {
    animation-play-state: paused;
}

.planet-orb {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    color: var(--gold2);
    background: radial-gradient(circle at 34% 28%, rgba(255, 241, 196, 0.38) 0%, rgba(60, 46, 14, 0.85) 42%, rgba(10, 9, 12, 0.92) 75%);
    border: 1px solid rgba(243, 215, 124, 0.6);
    box-shadow: 0 0 26px rgba(255, 207, 90, 0.28), inset 0 0 18px rgba(255, 207, 90, 0.18);
    transition: transform 0.45s var(--ease), box-shadow 0.45s ease, color 0.3s ease;
    animation: planetPulse 4s ease-in-out infinite;
}

.orbit-track[style*="--i: 1"] .planet-orb { animation-delay: -1.3s; }
.orbit-track[style*="--i: 2"] .planet-orb { animation-delay: -2.6s; }

@keyframes planetPulse {
    0%, 100% { box-shadow: 0 0 22px rgba(255, 207, 90, 0.22), inset 0 0 16px rgba(255, 207, 90, 0.15); }
    50% { box-shadow: 0 0 40px rgba(255, 207, 90, 0.45), inset 0 0 22px rgba(255, 207, 90, 0.28); }
}

.planet-orb svg {
    filter: drop-shadow(0 0 6px rgba(255, 207, 90, 0.6));
}

/* magnetisch: Kugel + Beschriftung werden zur Maus gezogen (js/main.js setzt --gx/--gy, federnd) */
.orbit-planet .planet-orb,
.orbit-planet .planet-label {
    translate: var(--gx, 0px) var(--gy, 0px);
}

.orbit-planet:hover .planet-orb,
.orbit-planet:focus-visible .planet-orb {
    transform: scale(1.18);
    color: var(--gold3);
    box-shadow: 0 0 50px rgba(255, 207, 90, 0.65), inset 0 0 24px rgba(255, 207, 90, 0.35);
}

.planet-label {
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(-50%);
    display: grid;
    justify-items: center;
    gap: 2px;
    white-space: nowrap;
    pointer-events: none;
}

.planet-label strong {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold2);
}

.planet-label span {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    color: var(--text-soft);
}

.planet-toast {
    font-family: var(--font-ui);
    font-style: normal;
    font-size: 0.8rem;
    color: var(--gold3);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.orbit-planet.copied .planet-toast {
    opacity: 1;
    transform: none;
}

/* Touch-Geräte: Orbit steht still (kreisende Ziele lassen sich schlecht antippen) */
@media (hover: none) {
    .orbit-track,
    .orbit-planet {
        animation-play-state: paused;
    }
}

/* Handy: senkrechte Sternbild-Kette statt Kreis */
@media (max-width: 600px) {
    .contact-orbit {
        aspect-ratio: auto;
        width: 100%;
        display: grid;
        gap: 26px;
        padding: 10px 0 20px 0;
        margin-bottom: 30px;
    }

    .contact-orbit::before {
        content: '';
        position: absolute;
        left: 41px;
        top: 50px;
        bottom: 60px;
        width: 1px;
        background: linear-gradient(180deg, transparent, rgba(212, 175, 55, 0.6), transparent);
    }

    .orbit-ring,
    .orbit-comet,
    .orbit-core {
        display: none;
    }

    .orbit-track {
        position: relative;
        inset: auto;
        animation: none;
    }

    .orbit-track::before {
        display: none;
    }

    .orbit-arm {
        position: static;
        transform: none;
    }

    .orbit-planet {
        display: flex;
        align-items: center;
        gap: 18px;
        animation: none;
        text-align: left;
    }

    .planet-label {
        position: static;
        transform: none;
        justify-items: start;
        white-space: normal;
    }
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    padding: 14px 20px;
    border: 1px solid var(--line);
    border-radius: 12px;
    font-family: var(--font-ui);
    font-size: 1.08rem;
    color: var(--text);
    text-align: center;
    text-align-last: center;
    background: rgba(5, 6, 10, 0.45);
    outline: none;
    caret-color: var(--gold2);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(236, 229, 211, 0.4);
}

.contact-form select {
    color: rgba(236, 229, 211, 0.6);
}

.contact-form select option {
    background: #0b0b10;
    color: var(--text);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: var(--gold2);
    box-shadow: 0 0 0 1px rgba(243, 215, 124, 0.25), 0 0 22px rgba(212, 175, 55, 0.15);
}

.contact-form textarea {
    resize: vertical;
    min-height: 130px;
}

.contact-form .btn {
    align-self: center;
    padding: 15px 48px;
}

/* --- Videos --- */
.video-carousel {
    margin-bottom: 56px;
    position: relative;
}

.carousel-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 22px;
}

.carousel-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold2);
    text-shadow: 0 0 14px rgba(255, 207, 90, 0.4);
    text-align: center;
}

.carousel-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: rgba(5, 6, 10, 0.5);
    color: var(--gold2);
    font-family: var(--font-head);
    font-size: 18px;
    cursor: url('../images/cursor/hand.svg') 13 3, pointer;
    transition: transform 0.3s var(--ease), box-shadow 0.3s ease, border-color 0.3s ease;
}

.carousel-btn:hover {
    border-color: var(--gold2);
    transform: scale(1.08);
    box-shadow: 0 0 22px rgba(255, 207, 90, 0.35);
}

/* Die Videos starten um die Breite des Ausblend-Rands eingerückt: im Ruhezustand ist alles voll sichtbar,
   erst beim seitlichen Durchscrollen blenden Videos und Titel am Rand weich aus */
.carousel-wrapper {
    --fade: 64px;
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}

.carousel-track {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--fade);
    padding: 6px var(--fade) 10px;
    scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

/* Vorschaubild statt YouTube-Player – der Player lädt erst beim Klick */
.video-item {
    flex-shrink: 0;
    width: 340px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: center;
    cursor: url('../images/cursor/hand.svg') 13 3, pointer;
    scroll-snap-align: start;
}

.video-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #000;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.video-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.78;
    transform: scale(1.02);
    transition: transform 0.7s var(--ease), opacity 0.5s ease;
}

.video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 58px;
    height: 58px;
    margin: -29px 0 0 -29px;
    border-radius: 50%;
    border: 1px solid rgba(255, 241, 196, 0.7);
    background: rgba(5, 6, 10, 0.5);
    box-shadow: 0 0 24px rgba(255, 207, 90, 0.3);
    transition: transform 0.4s var(--ease), box-shadow 0.4s ease;
}

.video-play::after {
    content: '';
    position: absolute;
    left: 23px;
    top: 19px;
    width: 16px;
    height: 20px;
    background: var(--gold2);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.video-item:hover .video-thumb,
.video-item:focus-visible .video-thumb {
    border-color: var(--line-strong);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.18);
}

.video-item:hover .video-thumb img {
    opacity: 1;
    transform: scale(1.07);
}

.video-item:hover .video-play {
    transform: scale(1.1);
    box-shadow: 0 0 34px rgba(255, 207, 90, 0.55);
}

.video-title {
    display: block;
    margin-top: 10px;
    font-family: var(--font-ui);
    font-size: 0.98rem;
    line-height: 1.45;
    color: var(--text-soft);
}

/* Großansicht (main.js: expandVideo) – Vorschaubild morpht vom Karussell in die Mitte */
.video-expand-backdrop {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    background: radial-gradient(ellipse at center, rgba(14, 11, 6, 0) 0%, rgba(2, 2, 5, 0) 70%);
    transition: background 0.6s ease;
}

.video-expand-backdrop.active {
    background: radial-gradient(ellipse at center, rgba(24, 18, 8, 0.86) 0%, rgba(2, 2, 5, 0.95) 70%);
}

.video-expand-backdrop.closing {
    transition-duration: 0.55s;
}

/* goldener Schein hinter dem Video */
.video-expand-halo {
    position: absolute;
    width: min(1500px, 120vw);
    aspect-ratio: 16 / 9;
    background: radial-gradient(ellipse at center, rgba(255, 200, 90, 0.2) 0%, rgba(212, 175, 55, 0.07) 38%, transparent 66%);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.8s ease, transform 1.1s var(--ease);
    pointer-events: none;
}

.video-expand-backdrop.active .video-expand-halo {
    opacity: 1;
    transform: scale(1);
}

/* Lichtring, der sich beim Öffnen ausbreitet */
.video-expand-ring {
    position: absolute;
    width: min(700px, 80vw);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(255, 220, 140, 0.8);
    box-shadow: 0 0 40px rgba(255, 207, 90, 0.5), inset 0 0 40px rgba(255, 207, 90, 0.35);
    opacity: 0;
    pointer-events: none;
}

.video-expand-backdrop.active .video-expand-ring {
    animation: videoRing 1.3s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes videoRing {
    from { opacity: 0.9; transform: scale(0.25); }
    to { opacity: 0; transform: scale(2.2); }
}

.video-expand-container {
    position: relative;
    width: min(1270px, 92vw, calc(80vh * 16 / 9));
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--line-strong);
    box-shadow: 0 0 70px rgba(212, 175, 55, 0.22), 0 30px 90px rgba(0, 0, 0, 0.75);
    cursor: default;
    transform-origin: center center;
}

.video-expand-container iframe,
.video-expand-container video,
.video-expand-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-expand-poster {
    object-fit: cover;
    z-index: 1;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.video-expand-container.playing .video-expand-poster {
    opacity: 0;
}

.video-expand-container video {
    object-fit: contain;
    background: #000;
}

/* Telegram gibt das Video nicht heraus: Weg zum Beitrag in der Mitte */
.video-expand-extern {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    text-align: center;
    background: rgba(5, 6, 10, 0.55);
    color: var(--gold3);
    font-family: var(--font-head);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.video-expand-extern small {
    font-family: var(--font-body);
    font-size: 1rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text-soft);
}

/* Telegram-Video ohne Vorschaubild */
.video-thumb-leer {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 207, 90, 0.16), transparent 60%),
        linear-gradient(160deg, #0d1020, #05060a);
}

.video-expand-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(243, 215, 124, 0.75);
    color: var(--gold3);
    background: rgba(5, 6, 10, 0.7);
    box-shadow: 0 0 22px rgba(255, 207, 90, 0.35);
    opacity: 0;
    transition: transform 0.4s var(--ease), box-shadow 0.3s ease, opacity 0.5s 0.4s ease;
}

.video-expand-backdrop.active .video-expand-close {
    opacity: 1;
}

.video-expand-close:hover {
    transform: rotate(90deg) scale(1.08);
    box-shadow: 0 0 34px rgba(255, 207, 90, 0.6);
}

/* ═══════════════════════════════════════════
   Gutachten – magische Blätter-Ansicht
   ═══════════════════════════════════════════ */
.flipbook {
    /* Dokument + Bedienleiste passen immer ins Fenster (auch auf kleinen Laptops) */
    max-width: min(1040px, calc((100vh - 250px) * 1600 / 1131));
    min-width: min(100%, 320px);
    margin: 0 auto;
    outline: none;
}

.flip-stage {
    position: relative;
    aspect-ratio: 1600 / 1131;
    perspective: 2200px;
    user-select: none;
    -webkit-user-select: none;
}

/* goldener Schein hinter dem Dokument */
.flip-stage::before {
    content: '';
    position: absolute;
    inset: -8% -6%;
    background: radial-gradient(ellipse at center, rgba(255, 200, 90, 0.18) 0%, rgba(212, 175, 55, 0.06) 40%, transparent 70%);
    pointer-events: none;
}

.flip-base,
.flip-leaf {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--line-strong);
    background: #050505;
}

.flip-base {
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 50px rgba(212, 175, 55, 0.12);
}

.flip-base img,
.flip-leaf img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
}

/* Die umblätternde Seite: dreht sich um die linke Kante */
.flip-leaf {
    transform-origin: left center;
    backface-visibility: hidden;
    visibility: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.flip-leaf.active {
    visibility: visible;
    will-change: transform, opacity;
}

.flip-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
    opacity: 0;
}

/* glühende Goldkante an der freien Seitenkante */
.flip-edge {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 3px;
    background: linear-gradient(180deg, transparent, var(--gold3) 20%, var(--gold2) 50%, var(--gold3) 80%, transparent);
    box-shadow: 0 0 22px 6px rgba(255, 207, 90, 0.6);
    opacity: 0;
}

.flip-sparks {
    position: absolute;
    inset: -8%;
    width: 116%;
    height: 116%;
    pointer-events: none;
    z-index: 3;
}

/* Klickflächen: linke Hälfte zurück, rechte Hälfte weiter – mit Goldschimmer beim Darüberfahren */
.flip-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: 2;
    padding: 0;
    border: 0;
    background: none;
    cursor: url('../images/cursor/hand.svg') 13 3, pointer;
}

.flip-zone-prev { left: 0; }
.flip-zone-next { right: 0; }

.flip-zone::after {
    content: '';
    position: absolute;
    top: 8%;
    bottom: 8%;
    width: 90px;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.flip-zone-prev::after {
    left: 0;
    background: radial-gradient(ellipse at left center, rgba(255, 207, 90, 0.28), transparent 70%);
}

.flip-zone-next::after {
    right: 0;
    background: radial-gradient(ellipse at right center, rgba(255, 207, 90, 0.28), transparent 70%);
}

.flip-zone:hover::after {
    opacity: 1;
}

.flip-zone:focus-visible {
    outline-offset: -3px;
}

.flip-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 28px;
}

.flip-count {
    min-width: 110px;
    text-align: center;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.22em;
    color: var(--gold2);
    text-shadow: 0 0 12px rgba(255, 207, 90, 0.4);
    font-variant-numeric: tabular-nums;
}

.flip-sep {
    color: var(--muted);
    margin: 0 4px;
}

.flip-thumbs {
    position: relative;
    display: flex;
    justify-content: safe center;
    gap: 10px;
    overflow-x: auto;
    padding: 20px 6px 8px;
    margin-top: 8px;
    scrollbar-width: thin;
}

.flip-thumb {
    flex: 0 0 auto;
    width: 88px;
    aspect-ratio: 1600 / 1131;
    padding: 0;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: #000;
    opacity: 0.5;
    cursor: url('../images/cursor/hand.svg') 13 3, pointer;
    transition: opacity 0.35s ease, transform 0.35s var(--ease), border-color 0.35s ease, box-shadow 0.35s ease;
}

.flip-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flip-thumb:hover {
    opacity: 0.85;
}

.flip-thumb.active {
    opacity: 1;
    border-color: var(--gold2);
    box-shadow: 0 0 16px rgba(255, 207, 90, 0.4);
    transform: translateY(-4px);
}

.flip-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 22px;
}

.flip-actions .btn {
    padding: 12px 26px;
    font-size: 0.82rem;
}

/* Vollbild */
.flipbook.is-full {
    position: fixed;
    inset: 0;
    z-index: 6000;
    max-width: none;
    margin: 0;
    padding: 20px 20px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(2, 2, 5, 0.97);
}

.flipbook.is-full .flip-stage {
    width: min(100%, calc((100vh - 130px) * 1600 / 1131));
    margin: 0 auto;
}

/* im Vollbild nur Seite + Pfeile – Miniaturen und Knöpfe weg */
.flipbook.is-full .flip-thumbs,
.flipbook.is-full .flip-actions {
    display: none;
}

.flipbook.is-full .flip-controls {
    margin-top: 18px;
}

/* Ersatz-Vollbild (ohne Vollbild-Erlaubnis, z. B. iPhone): der Bereich bildet eine eigene Ebene –
   deshalb den ganzen Abschnitt über Kopfleiste und Footer heben */
body.lm-flip-open #gutachten {
    z-index: 7000;
}

/* echter Vollbildmodus des Bildschirms */
.flipbook:fullscreen {
    background: #030305;
}

/* ── Große, satte Goldpfeile mit pulsierendem Schein ── */
.flip-arrow {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(243, 215, 124, 0.75);
    color: var(--gold3);
    background: radial-gradient(circle at 34% 28%, rgba(255, 241, 196, 0.55) 0%, rgba(212, 175, 55, 0.35) 38%, rgba(48, 36, 12, 0.92) 78%);
    box-shadow: 0 0 24px rgba(255, 207, 90, 0.4), inset 0 0 14px rgba(255, 207, 90, 0.3);
    animation: arrowGlow 3s ease-in-out infinite;
    transition: transform 0.4s var(--ease), border-color 0.3s ease;
}

.flip-arrow svg {
    filter: drop-shadow(0 0 6px rgba(255, 230, 160, 0.9));
    transition: transform 0.4s var(--ease);
}

.flip-arrow:hover,
.flip-arrow:focus-visible {
    transform: scale(1.12);
    border-color: var(--gold3);
    animation-duration: 1.2s;
}

.flip-prev:hover svg { transform: translateX(-4px); }
.flip-next:hover svg { transform: translateX(4px); }

.flip-arrow:active {
    transform: scale(0.94);
}

@keyframes arrowGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 207, 90, 0.35), inset 0 0 12px rgba(255, 207, 90, 0.25); }
    50% { box-shadow: 0 0 40px rgba(255, 207, 90, 0.65), inset 0 0 20px rgba(255, 207, 90, 0.45); }
}

.flip-controls {
    gap: 30px;
}

/* im normalen Modus vergrößern die Klickflächen – kein Seiten-Schimmer links/rechts */
.flipbook:not(.is-full) .flip-zone::after {
    display: none;
}

/* Schließen-Knopf (nur im Vollbild) */
.flip-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;
    display: none;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(243, 215, 124, 0.7);
    color: var(--gold3);
    background: rgba(5, 6, 10, 0.7);
    box-shadow: 0 0 22px rgba(255, 207, 90, 0.35);
    transition: transform 0.4s var(--ease), box-shadow 0.3s ease;
}

.flipbook.is-full .flip-close {
    display: grid;
}

.flip-close:hover {
    transform: rotate(90deg) scale(1.08);
    box-shadow: 0 0 34px rgba(255, 207, 90, 0.6);
}

.price-doc-link {
    display: inline-block;
    margin-top: 14px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════
   Ecwid-Shop – dunkel & gold
   ═══════════════════════════════════════════ */
/* Ecwid übernimmt sonst die dunkle Seitenfarbe als eigene schwarze Fläche */
#ecwid-shop .ecwid-productBrowser,
#ecwid-shop .details-gallery__images-zoom,
#ecwid-shop .ec-store .details-gallery,
.ec-store,
.ec-wrapper,
.ec-store__content-wrapper,
.ec-storefront-v3 {
    background: transparent !important;
    color: var(--text-soft) !important;
    font-family: var(--font-ui) !important;
}

.grid-product__wrap {
    background: var(--panel) !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    overflow: hidden;
    transition: border-color 0.4s ease, box-shadow 0.4s ease !important;
}

.grid-product__wrap:hover {
    border-color: var(--line-strong) !important;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.14), 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}

.grid-product__shadow,
.grid-product__shadow-inner {
    display: none !important;
}

.grid-product__image {
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden;
}

.grid-product__bg {
    background: rgba(5, 6, 10, 0.4) !important;
}

.grid-product__title {
    text-align: center !important;
}

.grid-product__title-inner {
    color: var(--text) !important;
    font-family: var(--font-head) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.06em !important;
    text-align: center !important;
}

.grid-product__price {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    padding: 8px 0 !important;
}

.grid-product__price-value,
.ec-price-item {
    color: var(--gold2) !important;
    font-family: var(--font-head) !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    text-shadow: 0 0 15px rgba(255, 207, 90, 0.45) !important;
    text-align: center !important;
}

.grid-product__price-amount {
    text-align: center !important;
    width: 100% !important;
}

.grid-product__tax,
.grid-product__included-taxes {
    display: none !important;
}

.ec-label,
.label--highlight {
    background: linear-gradient(180deg, var(--gold2), var(--gold)) !important;
    color: #1d1505 !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
}

.label__text {
    color: #1d1505 !important;
}

.form-control__button,
.ec-store .form-control--button .form-control__button {
    background: linear-gradient(180deg, #fbe7a6 0%, var(--gold2) 35%, var(--gold) 100%) !important;
    color: #1d1505 !important;
    border: none !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 22px rgba(212, 175, 55, 0.25) !important;
    transition: box-shadow 0.3s ease !important;
}

.form-control__button:hover {
    box-shadow: 0 8px 30px rgba(255, 207, 90, 0.45) !important;
}

/* ── Shop-Buttons episch: Lichtglanz zieht regelmäßig durch, Goldaura pulsiert, beim Drücken federt er ein ── */
#ecwid-shop .form-control__button {
    position: relative !important;
    overflow: hidden !important;
    font-family: var(--font-head) !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    background:
        linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.75) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat,
        linear-gradient(180deg, #fbe7a6 0%, var(--gold2) 35%, var(--gold) 100%) !important;
    animation: ecShine 5.5s ease-in-out infinite, ecGlow 2.8s ease-in-out infinite;
    transition: transform 0.35s var(--ease), filter 0.3s ease !important;
}

#ecwid-shop .form-control__button:hover {
    transform: translateY(-2px) scale(1.025);
    filter: brightness(1.08);
    animation: ecShine 1.2s ease-out infinite, ecGlow 1.3s ease-in-out infinite;
}

#ecwid-shop .form-control__button:active {
    transform: scale(0.95);
    filter: brightness(1.22);
    transition-duration: 0.08s !important;
}

/* Neben-Knöpfe (z. B. „Weiter einkaufen“): goldener Rahmen statt Goldfläche */
#ecwid-shop .form-control--secondary .form-control__button {
    background:
        linear-gradient(105deg, transparent 38%, rgba(255, 233, 170, 0.35) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat,
        rgba(5, 6, 10, 0.45) !important;
    border: 1px solid var(--line-strong) !important;
    box-shadow: none !important;
    animation: ecShine 6.5s ease-in-out infinite;
}

#ecwid-shop .form-control--secondary .form-control__button,
#ecwid-shop .form-control--secondary .form-control__button * {
    color: var(--gold2) !important;
}

@keyframes ecShine {
    0%, 62% { background-position: 160% 0, 0 0; }
    100% { background-position: -60% 0, 0 0; }
}

@keyframes ecGlow {
    0%, 100% { box-shadow: 0 6px 22px rgba(212, 175, 55, 0.25), 0 0 0 0 rgba(255, 207, 90, 0); }
    50% { box-shadow: 0 8px 32px rgba(255, 207, 90, 0.5), 0 0 0 5px rgba(255, 207, 90, 0.12); }
}

/* ── Eigene Shop-Leiste unter „In den Warenkorb“ (js/erlebnis.js) – Ecwids Fußzeile dafür auf der Produktseite aus ── */
#ecwid-shop .ecwid-productBrowser-ProductPage .ec-footer {
    display: none !important;
}

/* auf den übrigen Shop-Seiten (Warenkorb, Kasse …) Ecwids Fußzeile wenigstens golden */
#ecwid-shop .ec-footer__link,
#ecwid-shop .ec-footer__link * {
    color: var(--gold2) !important;
    font-family: var(--font-head) !important;
    letter-spacing: 0.08em;
}

#ecwid-shop .lm-shopnav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 12px;   /* kleiner Abstand unter „Weitere hinzufügen“ / „Zur Kasse“ */
}

#ecwid-shop .lm-shopnav-item {
    position: relative;
    display: grid;
    grid-template-columns: 24px 1fr auto auto;
    align-items: center;
    justify-items: start;
    gap: 12px;
    padding: 11px 16px;
    text-align: left;
    border-radius: 14px;
    border: 1px solid var(--line);
    background:
        linear-gradient(105deg, transparent 38%, rgba(255, 233, 170, 0.22) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat,
        linear-gradient(160deg, rgba(30, 26, 14, 0.55), rgba(8, 9, 14, 0.6));
    color: var(--gold2) !important;
    text-decoration: none !important;
    transition: transform 0.4s var(--ease), border-color 0.35s ease, box-shadow 0.35s ease, color 0.3s ease;
}

#ecwid-shop .lm-shopnav-item::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 22%;
    right: 22%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold2), transparent);
    opacity: 0.7;
    transition: left 0.45s var(--ease), right 0.45s var(--ease), opacity 0.3s ease;
}

#ecwid-shop .lm-shopnav-item svg {
    filter: drop-shadow(0 0 6px rgba(255, 207, 90, 0.45));
    transition: transform 0.45s var(--ease);
}

#ecwid-shop .lm-shopnav-item span {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    line-height: 1.2;
}

#ecwid-shop .lm-shopnav-item:hover,
#ecwid-shop .lm-shopnav-item:focus-visible {
    transform: translateX(4px);
    color: var(--gold3) !important;
    border-color: var(--line-strong);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 26px rgba(255, 207, 90, 0.2);
    text-shadow: 0 0 12px rgba(255, 207, 90, 0.55);
    animation: ecShine 1.1s ease-out;
}

#ecwid-shop .lm-shopnav-item:hover::before {
    left: 6%;
    right: 6%;
    opacity: 1;
}

#ecwid-shop .lm-shopnav-item:hover svg {
    transform: scale(1.15);
}

/* Pfeil gleitet beim Darüberfahren nach rechts */
#ecwid-shop .lm-shopnav-item .lm-chev {
    grid-column: 4;
    justify-self: end;
    opacity: 0.6;
    filter: none;
    transition: transform 0.4s var(--ease), opacity 0.3s ease;
}

#ecwid-shop .lm-shopnav-item:hover .lm-chev {
    transform: translateX(4px);
    opacity: 1;
}

#ecwid-shop .lm-shopnav-item:active {
    transform: scale(0.96);
}

/* Anzahl im Warenkorb */
#ecwid-shop .lm-cart-count {
    justify-self: end;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-family: var(--font-head);
    font-size: 0.7rem;
    font-weight: 700;
    color: #1d1505;
    background: linear-gradient(180deg, #fbe7a6, var(--gold));
    box-shadow: 0 0 12px rgba(255, 207, 90, 0.7);
    text-shadow: none;
}

#ecwid-shop .lm-cart-count[hidden] {
    display: none;
}

#ecwid-shop .lm-cart-count.pop {
    animation: cartPulse 0.8s var(--ease);
}

/* Goldkugel, die vom Kaufen-Knopf zum Warenkorb fliegt (js/erlebnis.js) */
.lm-orb {
    position: fixed;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    background: radial-gradient(circle, #fffbe8 0%, #ffd27a 35%, rgba(255, 190, 70, 0.55) 60%, transparent 72%);
    box-shadow: 0 0 26px 9px rgba(255, 200, 90, 0.6);
    z-index: 6500;
    pointer-events: none;
}

.lm-cart-pulse {
    animation: cartPulse 1s var(--ease);
}

@keyframes cartPulse {
    30% { transform: scale(1.3); filter: drop-shadow(0 0 14px rgba(255, 207, 90, 0.95)); }
}

/* Morph-Überblendung zwischen Shop-Ansichten (js/erlebnis.js):
   eingefrorene Kopie der alten Ansicht löst sich auf, die neue morpht von unscharf zu scharf herein */
#ecwid-shop .lm-morph-ghost {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    animation: morphGhost 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes morphGhost {
    to { opacity: 0; filter: blur(12px); transform: scale(1.025); }
}

#ecwid-shop .lm-morph-hidden {
    opacity: 0 !important;
}

#ecwid-shop .lm-morph-in {
    animation: morphIn 0.9s var(--ease) both;
}

@keyframes morphIn {
    from { opacity: 0; filter: blur(14px); transform: scale(0.985); }
}

/* ── Geheimnis (js/erlebnis.js): 3× auf den Stern im Kontakt-Orbit ── */
.orbit-core.is-secret {
    pointer-events: auto;
    cursor: url('../images/cursor/hand.svg') 13 3, pointer;
}

/* Emblem oben dreht sich einmal mit Aufleuchten */
.header-emblem.lm-flare img {
    animation: emblemFlare 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes emblemFlare {
    0% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 0 rgba(255, 207, 90, 0)); }
    40% { transform: rotate(200deg) scale(1.35); filter: drop-shadow(0 0 18px rgba(255, 220, 140, 1)); }
    100% { transform: rotate(360deg) scale(1); filter: drop-shadow(0 0 0 rgba(255, 207, 90, 0)); }
}

.lm-star-rain {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 6200;
    pointer-events: none;
}

.lm-secret-toast {
    position: fixed;
    left: 50%;
    top: 96px;
    z-index: 6300;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 28px;
    border-radius: 999px;
    border: 1px solid rgba(243, 215, 124, 0.6);
    background: rgba(5, 6, 10, 0.78);
    box-shadow: 0 0 40px rgba(255, 207, 90, 0.35);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold2);
    text-shadow: 0 0 14px rgba(255, 207, 90, 0.7);
    white-space: nowrap;
    pointer-events: none;
    animation: secretToast 4.5s var(--ease) forwards;
}

.lm-secret-star {
    width: 12px;
    height: 12px;
    background: var(--gold2);
    clip-path: var(--star);
}

@keyframes secretToast {
    0% { opacity: 0; transform: translate(-50%, -14px) scale(0.92); filter: blur(6px); }
    12% { opacity: 1; transform: translate(-50%, 0) scale(1); filter: blur(0); }
    80% { opacity: 1; transform: translate(-50%, 0) scale(1); filter: blur(0); }
    100% { opacity: 0; transform: translate(-50%, -8px) scale(0.98); filter: blur(4px); }
}

@media (max-width: 600px) {
    .lm-secret-toast {
        font-size: 0.72rem;
        letter-spacing: 0.12em;
        padding: 12px 18px;
    }
}

/* Ton-Schalter unten rechts */
.sound-toggle {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1200;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: rgba(5, 6, 10, 0.6);
    color: var(--gold2);
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.18);
    transition: transform 0.3s var(--ease), box-shadow 0.3s ease, opacity 0.3s ease;
}

.sound-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 0 26px rgba(255, 207, 90, 0.4);
}

.sound-toggle[aria-pressed="false"] {
    opacity: 0.6;
}

.ec-link,
.ec-link--muted {
    color: var(--gold2) !important;
}

.ec-link:hover {
    color: var(--gold3) !important;
    text-shadow: 0 0 8px var(--glow) !important;
}

.ec-header-h2,
.ec-header-h3,
.ec-header-h4 {
    color: var(--gold2) !important;
    font-family: var(--font-head) !important;
    text-shadow: 0 0 12px rgba(255, 207, 90, 0.3) !important;
}

.ec-filters {
    background: transparent !important;
}

.ec-filters__title,
.ec-filter__name {
    color: var(--gold2) !important;
}

.grid-sort,
.grid-sort__item,
.form-control--select-inline {
    display: none !important;
}

.ec-text-muted {
    color: rgba(236, 229, 211, 0.45) !important;
}

.footer__link--shopping-cart {
    color: var(--gold2) !important;
}

.ec-store .product-details__product-title {
    color: var(--text) !important;
    font-family: var(--font-head) !important;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.2) !important;
}

.ec-store .product-details__product-price .ec-price-item {
    color: var(--gold2) !important;
    text-shadow: 0 0 20px rgba(255, 207, 90, 0.55) !important;
    font-size: 1.5rem !important;
}

.ec-store .product-details__product-description {
    color: var(--text-soft) !important;
}

/* ── Produktseite, rechte Spalte: alles mittig, Gold statt Ecwid-Blau, Menge ohne weißen Kasten (Wunsch 12.11.2026) ──
   Ecwid schreibt seine eigenen Regeln mit !important auf html#ecwid_html body#ecwid_body. Darum steht das hier davor, sonst gewinnt Ecwid. */
html#ecwid_html body#ecwid_body #ecwid-shop .product-details__sidebar,
html#ecwid_html body#ecwid_body #ecwid-shop .product-details__sidebar .product-details-module__content {
    text-align: center !important;
}

html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__controls,
html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__bag-controls,
html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__add-buttons {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Menge, Warenkorb-Knopf und die Leiste darunter: als Block mittig in der Spalte, auf derselben Achse wie der Preis */
html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__qty,
html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__controls,
html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__bag-controls,
html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__add-buttons,
html#ecwid_html body#ecwid_body #ecwid-shop .lm-shopnav {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* „lieferbar“ etwas höher, näher am Preis; der Abstand nach unten wächst gleich mit, so bleibt die Menge an ihrem Platz */
html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__place {
    margin-top: -16px !important;
    margin-bottom: 21px !important;
}

/* „lieferbar“ und ähnliche Hinweise */
html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__place,
html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__place * {
    color: var(--gold2) !important;
    font-family: var(--font-head) !important;
    font-size: 13px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
    text-align: center !important;
    text-shadow: 0 0 10px rgba(255, 207, 110, 0.45);
}

/* Links im Shop (sonst Ecwid-Blau) */
html#ecwid_html body#ecwid_body #ecwid-shop .ec-store a:not(.form-control__button):not(.lm-shopnav-item),
html#ecwid_html body#ecwid_body #ecwid-shop .ec-link,
html#ecwid_html body#ecwid_body #ecwid-shop .ec-link * {
    color: var(--gold2) !important;
}

/* Menge: groß, golden, mittig, ohne weißen Kasten. Oben die Beschriftung, darunter Minus · Feld · Plus */
html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__qty {
    display: grid !important;
    grid-template-columns: auto auto auto;
    justify-content: center !important;
    align-items: center !important;
    column-gap: 14px;
    row-gap: 10px;
    width: 100%;
    margin: 4px auto 16px !important;
}

html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__qty > label,
html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__qty > :not(.lm-menge):not(.details-product-purchase__qty-field) {
    grid-column: 1 / -1;
    display: flex !important;
    justify-content: center !important;
    margin: 0 !important;
}

/* Minus und Plus: runde Goldknöpfe, Zeichen als feine Leuchtstriche */
html#ecwid_html body#ecwid_body #ecwid-shop .lm-menge {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: 50% !important;
    background: rgba(5, 6, 10, 0.45) !important;
    box-shadow: inset 0 0 12px rgba(212, 175, 55, 0.12), 0 0 14px rgba(212, 175, 55, 0.1) !important;
    cursor: pointer;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease, opacity 0.25s ease;
}

html#ecwid_html body#ecwid_body #ecwid-shop .lm-menge::before,
html#ecwid_html body#ecwid_body #ecwid-shop .lm-menge--plus::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 2px;
    margin: -1px 0 0 -8px;
    border-radius: 2px;
    background: var(--gold2);
    box-shadow: 0 0 8px rgba(255, 207, 110, 0.6);
}

html#ecwid_html body#ecwid_body #ecwid-shop .lm-menge--plus::after {
    transform: rotate(90deg);
}

html#ecwid_html body#ecwid_body #ecwid-shop .lm-menge:hover:not(:disabled) {
    border-color: var(--gold2) !important;
    box-shadow: inset 0 0 14px rgba(212, 175, 55, 0.18), 0 0 22px rgba(255, 207, 90, 0.35) !important;
    transform: scale(1.06);
}

html#ecwid_html body#ecwid_body #ecwid-shop .lm-menge:active:not(:disabled) {
    transform: scale(0.95);
}

html#ecwid_html body#ecwid_body #ecwid-shop .lm-menge:focus-visible {
    outline: 2px solid var(--gold2) !important;
    outline-offset: 3px;
}

html#ecwid_html body#ecwid_body #ecwid-shop .lm-menge:disabled {
    opacity: 0.35;
    cursor: default;
}

html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__qty-label {
    color: var(--gold2) !important;
    font-family: var(--font-head) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(255, 207, 110, 0.4);
}

html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__qty .form-control,
html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__qty .form-control::before,
html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__qty .form-control::after,
html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__qty .form-control__text,
html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__qty .form-control__placeholder {
    background: transparent !important;
    box-shadow: none !important;
}

html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__qty .form-control {
    width: 118px !important;
    min-width: 0 !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: 999px !important;
    background: rgba(5, 6, 10, 0.45) !important;
    box-shadow: inset 0 0 14px rgba(212, 175, 55, 0.12), 0 0 18px rgba(212, 175, 55, 0.12) !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__qty .form-control:focus-within {
    border-color: var(--gold2) !important;
    box-shadow: inset 0 0 14px rgba(212, 175, 55, 0.18), 0 0 26px rgba(255, 207, 90, 0.35) !important;
}

html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__qty input {
    width: 100% !important;
    height: 52px !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--gold2) !important;
    font-family: var(--font-head) !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    text-align: center !important;
    caret-color: var(--gold2);
    text-shadow: 0 0 12px rgba(255, 207, 110, 0.5);
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Ecwid zeigt die „1“ als Platzhalter über dem leeren Feld: genauso groß und golden wie eine eingegebene Zahl */
html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__qty .form-control__placeholder {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    color: var(--gold2) !important;
    font-family: var(--font-head) !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-shadow: 0 0 12px rgba(255, 207, 110, 0.5);
    pointer-events: none;
}

html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__qty .form-control__placeholder-inner {
    width: auto !important;
    padding: 0 !important;
    text-align: center !important;
}

html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__qty .form-control {
    position: relative !important;
}

html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__qty input::-webkit-inner-spin-button,
html#ecwid_html body#ecwid_body #ecwid-shop .details-product-purchase__qty input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* PayPal-Hinweis „Später bezahlen“ auf der Produktseite: auf Wunsch ganz raus (Bezahlen mit PayPal an der Kasse bleibt) */
html#ecwid_html body#ecwid_body #ecwid-shop .ec-paypal-pay-later-message {
    display: none !important;
}

/* Preis über die ganze Spaltenbreite mittig */
html#ecwid_html body#ecwid_body #ecwid-shop .product-details__product-price-row,
html#ecwid_html body#ecwid_body #ecwid-shop .product-details__product-price-row .product-details-module__content,
html#ecwid_html body#ecwid_body #ecwid-shop .product-details__product-price {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    justify-content: center !important;
}

html#ecwid_html body#ecwid_body #ecwid-shop .product-details__product-price {
    display: flex !important;
    flex-wrap: wrap;
}

/* Rabatt-Hinweis über dem Preis (nur Produkte aus AKTION in js/main.js) */
html#ecwid_html body#ecwid_body #ecwid-shop.lm-rabatt .product-details__product-price-row .product-details-module__content {
    display: flex !important;
    flex-wrap: wrap !important;
}

html#ecwid_html body#ecwid_body #ecwid-shop.lm-rabatt .product-details__product-price-row .product-details-module__content::before {
    content: '✦ Rabattaktion von 50 Prozent ✦';
    display: block;
    flex: 0 0 100%;
    width: 100%;
    margin: 0 0 8px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    text-align: center;
    color: #f3d77c;
    filter: drop-shadow(0 0 10px rgba(255, 207, 90, 0.35));
}

@media (max-width: 480px) {
    html#ecwid_html body#ecwid_body #ecwid-shop.lm-rabatt .product-details__product-price-row .product-details-module__content::before {
        font-size: 13px;
        letter-spacing: 0.16em;
    }
}

/* „zzgl. Versand“ unter dem Preis: Pflichtangabe nach der Preisangabenverordnung. Das alte Theme im Ecwid-Konto blendet sie aus */
html#ecwid_html body#ecwid_body #ecwid-shop .product-details__product-price-taxes {
    display: block !important;
    width: 100%;
    margin: 6px 0 0 !important;
    text-align: center !important;
}

html#ecwid_html body#ecwid_body #ecwid-shop .product-details__product-price-taxes > * {
    display: block !important;
    color: rgba(236, 229, 211, 0.62) !important;
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    font-style: italic;
    letter-spacing: 0.02em !important;
    text-align: center !important;
}

/* Großer Bildschirm: rechte Spalte senkrecht mittig zum Produktbild (Ecwid stellt beide sonst oben bündig per float) */
@media (min-width: 900px) {
    html#ecwid_html body#ecwid_body #ecwid-shop .product-details.product-details--layout-sidebar-right {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
    }
    html#ecwid_html body#ecwid_body #ecwid-shop .product-details--layout-sidebar-right > .product-details__gallery,
    html#ecwid_html body#ecwid_body #ecwid-shop .product-details--layout-sidebar-right > .product-details__sidebar {
        float: none !important;
        flex: 0 0 auto;
    }
    html#ecwid_html body#ecwid_body #ecwid-shop .product-details--layout-sidebar-right > .product-details__description {
        float: none !important;
        flex: 1 0 100%;
    }
    html#ecwid_html body#ecwid_body #ecwid-shop .product-details--layout-sidebar-right > .clearboth {
        display: none;
    }
}

/* Farbiges Leuchten hinter dem Produktbild: weichgezeichnete Kopie des Bildes (main.js platziert sie) */
#ecwid-shop {
    position: relative;
}

#ecwid-shop > [id^="my-store-"] {
    position: relative;
    z-index: 1;
}

/* drei Lichtschichten, die sehr langsam gegeneinander morphen; main.js verschiebt sie per „translate“ zur Maus */
.product-glow {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    --boost: 0;
    opacity: calc(0.64 + var(--boost) * 0.25);
}

.pg-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 42%;
    will-change: transform;
}

.pg-a {
    filter: blur(42px) saturate(1.75) brightness(1.18);
    animation: pgMorphA 26s ease-in-out infinite;
}

.pg-b {
    opacity: 0.62;
    filter: blur(56px) saturate(2) brightness(1.1) hue-rotate(28deg);
    animation: pgMorphB 34s ease-in-out infinite;
}

.pg-c {
    opacity: 0.4;
    filter: blur(30px) saturate(1.5) brightness(1.2) hue-rotate(-32deg);
    mix-blend-mode: screen;
    animation: pgMorphC 19s ease-in-out infinite;
}

/* nicht-gleichmäßiges Strecken + Drehen der weichen Lichtflächen = organisches Wabern (dezent, knapp ums Bild) */
@keyframes pgMorphA {
    0%, 100% { transform: rotate(0deg) scale(1.05, 1.03); }
    33% { transform: rotate(3deg) scale(1.08, 0.98) translate(1.5%, -2%); }
    66% { transform: rotate(-2.5deg) scale(0.98, 1.08) translate(-2%, 1.5%); }
}

@keyframes pgMorphB {
    0%, 100% { transform: rotate(0deg) scale(1.07, 1.06); }
    25% { transform: rotate(-5deg) scale(0.98, 1.1) translate(-2.5%, 1%); }
    50% { transform: rotate(4deg) scale(1.1, 0.99) translate(2%, 2.5%); }
    75% { transform: rotate(6deg) scale(1.02, 1.08) translate(2.5%, -2%); }
}

@keyframes pgMorphC {
    0%, 100% { transform: rotate(0deg) scale(0.96, 0.98) translate(0, 0); }
    40% { transform: rotate(8deg) scale(1.06, 0.94) translate(-3%, -2.5%); }
    70% { transform: rotate(-6deg) scale(0.95, 1.07) translate(3%, 2%); }
}

/* Nur ein Produkt direkt auf der Startseite: „Zurück zum Katalog“ und Teilen-Knöpfe ausblenden */
.ec-store .product-details__top,
.ec-store .product-details__product-share {
    display: none !important;
}

/* ── Footer ── */
.footer {
    position: relative;
    z-index: 1;
    padding: 96px 0 30px;
    margin-top: 40px;
    /* Schwarz setzt erst weiter unten an und erreicht 100 % genau an der unteren Kante */
    background: linear-gradient(180deg, transparent 0%, transparent 38%, rgba(2, 2, 4, 0.22) 55%, rgba(2, 2, 4, 0.55) 75%, rgba(2, 2, 4, 0.85) 90%, #020204 100%);
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.2) 18%, var(--gold) 50%, rgba(212, 175, 55, 0.2) 82%, transparent 100%);
}

.footer-glow {
    position: absolute;
    left: 50%;
    top: -170px;
    width: min(960px, 140vw);
    height: 340px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(255, 200, 90, 0.14) 0%, transparent 66%);
    pointer-events: none;
}

.footer-crest {
    text-align: center;
    margin-bottom: 56px;
}

/* Original-Logo (Emblem + Schriftzug) mit atmendem Lichtschein */
.footer-logo-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 8px;
}

.footer-logo-wrap::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 42%;
    width: 70%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 200, 90, 0.22) 0%, transparent 65%);
    animation: auraBreath 7s ease-in-out infinite;
    pointer-events: none;
}

.footer-logo {
    position: relative;
    display: block;
    width: min(440px, 82vw);
    height: auto;
    animation: emblemBreath 7s ease-in-out infinite;
}

@keyframes emblemBreath {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

.footer-ornament {
    width: min(520px, 84%);
    margin-bottom: 14px;
}

.footer-wordmark {
    display: inline-block;
    font-family: var(--font-deco);
    font-weight: 700;
    font-size: clamp(1.8rem, 4.4vw, 2.7rem);
    letter-spacing: 0.1em;
    line-height: 1.2;
    filter: drop-shadow(0 0 16px rgba(255, 207, 90, 0.32));
}

.footer-tagline {
    margin-top: 6px;
    font-style: italic;
    font-size: 1.35rem;
    color: #cdb88a;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.footer-col h4 {
    position: relative;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gold);
    padding-bottom: 14px;
    margin-bottom: 16px;
}

/* Spaltenüberschrift: zwei ausblendende Linien mit kleinem Stern in der Lücke */
.footer-col h4::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 120px;
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent 0%, var(--gold) 30%, transparent calc(50% - 10px), transparent calc(50% + 10px), var(--gold) 70%, transparent 100%);
}

.footer-col h4::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    background: var(--gold2);
    clip-path: var(--star);
    filter: drop-shadow(0 0 4px rgba(255, 207, 90, 0.8));
}

/* Links: Lichtglanz zieht durch die Schrift, Sterne links/rechts, Goldlinie zeichnet sich von der Mitte */
.footer-col a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    margin: 0 auto;
    padding: 6px 4px;
    font-size: 1.24rem;
    color: var(--gold);
    text-shadow: none;
}

.footer-col a span {
    position: relative;
    background: linear-gradient(100deg, var(--text-soft) 0%, var(--text-soft) 42%, #fffaf0 50%, var(--text-soft) 58%, var(--text-soft) 100%) 100% 0 / 260% 100% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    transition: filter 0.4s ease;
}

.footer-col a:hover span,
.footer-col a:focus-visible span {
    background-image: linear-gradient(100deg, var(--gold2) 0%, var(--gold2) 40%, #fffaf0 50%, var(--gold2) 60%, var(--gold2) 100%);
    filter: drop-shadow(0 0 10px rgba(255, 207, 90, 0.55));
    animation: footShine 1.2s var(--ease) forwards;
}

@keyframes footShine {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

/* Sterne links und rechts, die beim Darüberfahren hereinfunkeln */
.footer-col a::before,
.footer-col a span::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    background: var(--gold2);
    clip-path: var(--star);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.55s var(--ease);
}

.footer-col a::before {
    left: -20px;
    transform: translate(8px, -50%) scale(0.3) rotate(-90deg);
}

.footer-col a span::after {
    right: -22px;
    transform: translate(-8px, -50%) scale(0.3) rotate(90deg);
}

.footer-col a:hover::before,
.footer-col a:focus-visible::before {
    opacity: 1;
    transform: translate(0, -50%) scale(1) rotate(0deg);
}

.footer-col a:hover span::after,
.footer-col a:focus-visible span::after {
    opacity: 1;
    transform: translate(0, -50%) scale(1) rotate(0deg);
}

/* Goldlinie darunter, von der Mitte aus */
.footer-col a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold2), transparent);
    transform: scaleX(0);
    transition: transform 0.55s var(--ease);
}

.footer-col a:hover::after,
.footer-col a:focus-visible::after {
    transform: scaleX(1);
}

.footer-col a svg {
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(255, 207, 90, 0.4));
    transition: transform 0.5s var(--ease), filter 0.4s ease, color 0.3s ease;
}

.footer-col a:hover svg {
    color: var(--gold3);
    transform: scale(1.2) rotate(-8deg);
    filter: drop-shadow(0 0 10px rgba(255, 207, 90, 0.85));
}

/* Footer-Logo leuchtet beim Darüberfahren auf */
.footer-logo {
    transition: filter 0.6s ease;
}

.footer-logo-wrap:hover .footer-logo {
    filter: drop-shadow(0 0 26px rgba(255, 207, 90, 0.55)) brightness(1.08);
}

/* Lichtfunke, der gelegentlich über die obere Goldkante des Footers läuft */
.footer::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 160px;
    height: 5px;
    background: radial-gradient(ellipse at center, var(--gold3) 0%, rgba(255, 207, 90, 0.6) 35%, transparent 70%);
    opacity: 0;
    animation: footerSweep 9s 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes footerSweep {
    0% { opacity: 0; transform: translateX(-180px); }
    8%, 30% { opacity: 1; }
    40%, 100% { opacity: 0; transform: translateX(100vw); }
}

.footer-bottom {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    max-width: 880px;
    margin: 60px auto 0;
    padding-top: 22px;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    color: var(--muted);
}

.footer-bottom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
}

/* „Nach oben“: goldener Ring-Knopf, der beim Darüberfahren anhebt und aufleuchtet */
.to-top {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.86rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold2);
    text-shadow: none;
}

.to-top-ring {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: radial-gradient(circle at 35% 30%, rgba(255, 241, 196, 0.2), rgba(10, 9, 12, 0.6) 70%);
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.15);
    transition: transform 0.45s var(--ease), box-shadow 0.4s ease, border-color 0.4s ease;
}

.to-top-ring svg {
    transition: transform 0.45s var(--ease);
}

.to-top:hover .to-top-ring,
.to-top:focus-visible .to-top-ring {
    transform: translateY(-4px);
    border-color: var(--gold2);
    box-shadow: 0 0 28px rgba(255, 207, 90, 0.5);
}

.to-top:hover .to-top-ring svg {
    animation: arrowLift 0.9s var(--ease) infinite;
}

@keyframes arrowLift {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.to-top:hover .to-top-text {
    color: var(--gold3);
    text-shadow: 0 0 12px rgba(255, 207, 90, 0.6);
}

/* ── Rechtliche Seiten (Impressum) ── */
.legal-page {
    position: relative;
    z-index: 1;
    padding: 130px 24px 60px;
}

.legal-logo {
    display: block;
    width: min(420px, 80vw);
    margin: 0 auto 34px;
}

.legal-content {
    max-width: 720px;
    margin: 0 auto;
    padding: 44px 44px 30px;
    font-size: 1.24rem;
    line-height: 1.8;
    color: var(--text-soft);
}

.legal-content h1,
.legal-content > h3 {
    font-family: var(--font-deco);
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: 0.06em;
    text-align: center;
    margin-bottom: 28px;
    background: var(--gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 14px rgba(255, 207, 90, 0.3));
}

.legal-content p {
    margin-bottom: 16px;
}

/* ── AGB und Widerrufsbelehrung: längere Rechtsseite ── */
.legal-content--lang {
    max-width: 860px;
    font-size: 1.16rem;
    line-height: 1.75;
    text-align: left;
}

.legal-content h1 {
    margin-bottom: 6px;
    font-size: clamp(1.05rem, 4.9vw, 2.2rem);
    line-height: 1.25;
    text-align: center;
    overflow-wrap: break-word;
}

.legal-stand {
    text-align: center;
    font-family: var(--font-head);
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(236, 229, 211, 0.5);
    margin-bottom: 30px !important;
}

.legal-inhalt {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 4px 22px;
    margin: 0 0 38px;
    padding: 20px 24px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(5, 6, 10, 0.35);
}

.legal-inhalt a {
    font-family: var(--font-head);
    font-size: 0.86rem;
    letter-spacing: 0.04em;
    color: var(--text-soft);
    text-decoration: none;
    transition: color 0.25s ease;
}

.legal-inhalt a:hover,
.legal-inhalt a:focus-visible {
    color: var(--gold2);
}

.legal-content h2 {
    margin: 38px 0 14px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.18rem;
    letter-spacing: 0.08em;
    color: var(--gold2);
    text-shadow: 0 0 12px rgba(255, 207, 110, 0.3);
}

.legal-content h2,
.legal-content .legal-block {
    scroll-margin-top: 96px;
}

.legal-h3 {
    margin: 24px 0 10px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold3);
}

.legal-content a:not(.legal-inhalt a) {
    color: var(--gold2);
}

.legal-liste {
    margin: 0 0 16px;
    padding-left: 1.5em;
}

.legal-liste li {
    margin-bottom: 8px;
    padding-left: 4px;
}

.legal-liste li::marker {
    color: var(--gold2);
    font-family: var(--font-head);
}

.legal-adresse {
    padding-left: 16px;
    border-left: 2px solid var(--line-strong);
}

.legal-block {
    margin-top: 46px;
    padding: 28px 30px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    background: rgba(5, 6, 10, 0.4);
    box-shadow: inset 0 0 30px rgba(212, 175, 55, 0.06);
}

.legal-block > h2:first-child {
    margin-top: 0;
    text-align: center;
}

.legal-ende {
    font-family: var(--font-head);
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(236, 229, 211, 0.5);
}

.legal-formular {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.legal-formular li {
    position: relative;
    margin-bottom: 12px;
    padding: 0 0 12px 22px;
    border-bottom: 1px dashed rgba(212, 175, 55, 0.22);
}

.legal-formular li::before {
    content: "–";
    position: absolute;
    left: 0;
    color: var(--gold2);
}

.legal-klein {
    font-size: 0.92em;
    color: rgba(236, 229, 211, 0.6);
}

/* Stellen, die der Inhaber noch ausfüllen muss: unübersehbar */
mark.offen {
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(255, 120, 60, 0.18);
    outline: 1px dashed rgba(255, 150, 90, 0.7);
    color: #ffc9a8;
    font-style: normal;
}

.legal-content strong {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.9em;
    letter-spacing: 0.06em;
    color: var(--gold2);
}

.admin-link {
    display: table;
    margin: 50px auto 0;
    padding: 8px 20px;
    font-family: var(--font-head);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: rgba(236, 229, 211, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 999px;
}

/* Ganz unten auf der Startseite: kleiner, leiser Weg zum Dashboard (/arbeit/) */
.footer-admin {
    margin-top: 6px;
    font-family: var(--font-ui);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-shadow: none;
    color: rgba(236, 229, 211, 0.28);
    text-decoration: none;
    transition: color 0.25s ease;
}
.footer-admin:hover, .footer-admin:focus-visible { color: var(--gold2); }

.admin-link:hover {
    color: var(--gold2);
    border-color: var(--line-strong);
}

/* --- Einblenden beim Scrollen (Klassen setzt main.js) --- */
.fade-in { opacity: 0; transform: translateY(34px); }
.fade-left { opacity: 0; transform: translateX(-46px); }
.fade-right { opacity: 0; transform: translateX(46px); }
.fade-zoom { opacity: 0; transform: scale(0.9); }

.fade-in.visible,
.fade-left.visible,
.fade-right.visible,
.fade-zoom.visible {
    opacity: 1;
    transform: none;
}

:is(.fade-in, .fade-left, .fade-right, .fade-zoom):not(.product-card):not(.testimonial-card):not(.philosophy-card):not(.contact-item):not(.price-card) {
    transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}

/* ═══════════════════════════════════════════
   Epische Effekte
   ═══════════════════════════════════════════ */

/* Lesefortschritt: goldene Linie ganz oben füllt sich beim Scrollen */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 1100;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.2), var(--gold2) 70%, var(--gold3));
    box-shadow: 0 0 12px rgba(255, 207, 90, 0.7);
    pointer-events: none;
}

/* Wirbelfeld hinter dem großen Logo (js/vortex.js) – verläuft nach außen weich ins Universum */
.hero-vortex {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* nur ein weicher Rand; das Ein-/Ausblenden nach Abstand macht vortex.js selbst */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    animation: vortexIn 2.4s 0.3s var(--ease) backwards; /* nicht „both“ – sonst blockiert sie das Ausblenden beim Scrollen */
}

@keyframes vortexIn {
    from { opacity: 0; }
}

/* Überschriften: Lichtglanz zieht beim Erscheinen einmal durch die Goldschrift (und beim Darüberfahren) */
.section-title,
.price-title,
.gans-flyer-title {
    background-image:
        linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.9) 50%, transparent 62%),
        var(--gold-text);
    background-size: 260% 100%, 100% 100%;
    background-repeat: no-repeat;
    background-position: 160% 0, 0 0;
}

.section-title.visible,
.price-title.shine,
.gans-flyer-title.shine {
    animation: titleShine 2.2s 0.5s var(--ease) both;
}

.section-title:hover {
    animation: titleShine 1.6s var(--ease);
}

@keyframes titleShine {
    from { background-position: 160% 0, 0 0; }
    to { background-position: -60% 0, 0 0; }
}

/* Abschnitts-Trennlinie zieht sich beim Hineinscrollen von der Mitte auf */
.section.line-ready::before {
    transform: translateX(-50%) scaleX(0);
    transition: transform 1.8s var(--ease);
}

.section.line-ready.in-view::before {
    transform: translateX(-50%) scaleX(1);
}

/* Goldenes Licht folgt der Maus über den Karten */
.testimonial-card,
.philosophy-card,
.contact-item,
.price-card,
.quote-highlight {
    background-image:
        radial-gradient(420px circle at var(--mx, 50%) var(--my, -300px), rgba(255, 207, 90, 0.11), transparent 60%),
        var(--panel);
}

/* Hauptknopf atmet sanft golden */
.btn-primary::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    box-shadow: 0 0 34px 6px rgba(255, 207, 90, 0.45);
    opacity: 0;
    animation: ctaPulse 3.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ctaPulse {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* Stern der Überschriften dreht sich sachte weiter */
.section-title.reveal.visible::before {
    animation: starTurn 12s linear 1.4s infinite;
}

@keyframes starTurn {
    to { transform: rotate(360deg); }
}

/* Video-Karten tauchen nacheinander auf */
.video-item {
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.carousel-wrapper.pending .video-item {
    opacity: 0;
    transform: translateY(26px) scale(0.96);
}

/* Beim Hochscrollen kommen die Inhalte von oben herein */
.fade-in.from-above { transform: translateY(-34px); }

/* „soft“: Text materialisiert sich aus der Unschärfe */
.soft {
    filter: blur(7px);
}

.soft.visible {
    filter: blur(0);
}

:is(.fade-in, .fade-left, .fade-right, .fade-zoom).soft:not(.testimonial-card) {
    transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.2s var(--ease);
}

/* „fade-flip“: Karte klappt in 3D auf (Keyframes, damit der Hover-Effekt danach sofort reagiert) */
.fade-flip {
    opacity: 0;
}

.fade-flip.visible {
    opacity: 1;
    animation: flipIn 1.15s var(--ease) backwards;
}

.fade-flip.from-above.visible {
    animation-name: flipInFromAbove;
}

@keyframes flipIn {
    from { opacity: 0; transform: perspective(900px) translateY(46px) rotateX(-32deg) scale(0.94); }
}

@keyframes flipInFromAbove {
    from { opacity: 0; transform: perspective(900px) translateY(-46px) rotateX(32deg) scale(0.94); }
}

/* Überschriften materialisieren sich: aus Unschärfe, leicht größer → scharf */
.section-title.reveal {
    opacity: 0;
    transform: translateY(16px) scale(1.05);
    filter: blur(12px) drop-shadow(0 0 18px rgba(255, 207, 90, 0.3));
    transition: opacity 1.2s var(--ease), transform 1.4s var(--ease), filter 1.4s var(--ease);
}

.section-title.reveal.visible {
    opacity: 1;
    transform: none;
    filter: blur(0) drop-shadow(0 0 18px rgba(255, 207, 90, 0.3));
}

/* 3D-Neigung zur Maus (main.js setzt „rotate“) */
.price-grid,
.stats {
    perspective: 1100px;
}

.price-card,
.stat {
    transition-property: transform, border-color, box-shadow, opacity, rotate;
    transition-duration: 0.5s, 0.4s, 0.4s, 0.9s, 0.35s;
    transition-timing-function: var(--ease), ease, ease, var(--ease), ease-out;
}

/* ── Fallblatt-Ziffern (FlipCounter in main.js) ── */
.flipnum {
    display: inline-flex;
    align-items: center;
    gap: 0.07em;
    vertical-align: middle;
}

/* ohne Kärtchen: nur die goldenen Ziffern klappen um (obere Hälfte klappt weg, neue untere klappt herunter) */
.fd {
    position: relative;
    display: inline-block;
    width: 0.66em;
    height: 1.16em;
    perspective: 320px;
    font-family: var(--font-head);
    font-weight: 700;
}

.fd > span {
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    overflow: hidden;
    backface-visibility: hidden;
}

.fd-top,
.fd-flap-top {
    top: 0;
}

.fd-bottom,
.fd-flap-bottom {
    bottom: 0;
}

.fd-flap-top {
    z-index: 2;
    transform-origin: 50% 100%;
}

.fd-flap-bottom {
    z-index: 2;
    transform-origin: 50% 0;
    transform: rotateX(90deg);
}

/* die Ziffer ist doppelt so hoch wie eine Hälfte – oben sieht man ihre obere, unten ihre untere Hälfte */
.fd b {
    position: absolute;
    left: 0;
    right: 0;
    height: 200%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-weight: 700;
    background: var(--gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.fd-top b,
.fd-flap-top b { top: 0; }

.fd-bottom b,
.fd-flap-bottom b { bottom: 0; }

.fn-sep {
    align-self: flex-end;
    padding: 0 0.02em;
    background: var(--gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

/* ── Zahlenleiste „Orgonit in Zahlen“ ── */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 48px 0 12px;
}

.stat {
    position: relative;
    padding: 28px 12px 22px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -300px), rgba(255, 207, 90, 0.12), transparent 60%), var(--panel);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.stat::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 18%;
    right: 18%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold2), transparent);
}

.stat:hover {
    border-color: var(--line-strong);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 34px rgba(212, 175, 55, 0.16);
}

.stat-num {
    display: inline-flex;
    align-items: center;
    gap: 0.12em;
    font-size: 2.2rem;
    filter: drop-shadow(0 0 12px rgba(255, 207, 90, 0.35));
}

.stat-unit {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.8em;
    background: var(--gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.stat-label {
    display: block;
    margin-top: 14px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.86rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold2);
}

/* Kästchen mit zwei Zahlen: GANS-Plasma blau und violett */
.stat-paare {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
}

.stat-paar {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
}

.stat-paar + .stat-paar {
    border-left: 1px solid var(--line);
}

.stat-doppelt .stat-num {
    font-size: 1.45rem;
}

.stat-farbe {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.stat-farbe::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

.stat-farbe--blau { color: #9cc2ff; }
.stat-farbe--violett { color: #c9a6ff; }

.stat-doppelt .stat-label {
    margin-top: 12px;
}

/* Seitenzahl im Gutachten als Fallblatt */
.flip-count {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
}

.flip-count .flip-sep,
.flip-total {
    font-family: var(--font-head);
    font-size: 0.75em;
}

/* --- Responsive --- */
/* Schriftzug nur, wenn Logo + Schriftzug + Reiter nebeneinander Luft haben */
@media (max-width: 1140px) {
    .header-wordmark { display: none; }
}

@media (max-width: 980px) {
    .header-wordmark { display: inline-block; }

    /* Handy: Logo links, Menü-Knopf rechts */
    .header-inner {
        justify-content: space-between;
    }

    .header.scrolled .header-brand {
        margin-right: 0;
    }

    .hamburger {
        display: flex;
    }

    .nav {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        justify-self: stretch; /* sonst schrumpft das feste Menü auf Inhaltsbreite */
        flex-direction: column;
        gap: 6px;
        padding: 22px 0 28px;
        background: linear-gradient(180deg, rgba(5, 6, 10, 0.97), rgba(4, 5, 8, 0.98));
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.35s ease, transform 0.35s var(--ease), visibility 0s 0.35s;
    }

    .nav::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--gold), transparent);
    }

    .nav.open {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity 0.35s ease, transform 0.35s var(--ease), visibility 0s;
    }

    .nav-link {
        font-size: 0.82rem;
        padding: 12px 20px;
        animation: none;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 16px;
    }

    .stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .stat-num {
        font-size: 1.75rem;
    }

    .stat-doppelt .stat-num {
        font-size: 1.15rem;
    }

    .stat-farbe {
        font-size: 0.62rem;
        letter-spacing: 0.08em;
    }

    .stat-label {
        font-size: 0.74rem;
        letter-spacing: 0.1em;
    }

    .section {
        padding: 86px 0;
    }

    .hero {
        padding-top: 84px;
    }

    .header-wordmark img {
        height: 15px;
    }

    .about-links {
        justify-content: center;
    }

    .quote-highlight {
        padding: 36px 22px 30px;
        font-size: 1.25rem;
    }

    .video-item {
        width: 280px;
    }

    .carousel-wrapper {
        --fade: 30px;
    }

    .flip-thumb {
        width: 68px;
    }

    .flip-arrow {
        width: 52px;
        height: 52px;
    }

    .flip-controls {
        gap: 18px;
    }

    .flip-zone::after {
        display: none;
    }

    /* „Himmelsbeobachtungen“ ist ein langes Wort – muss zwischen die Pfeile passen */
    .carousel-header {
        gap: 10px;
    }

    .carousel-title {
        min-width: 0;
        font-size: 0.8rem;
        letter-spacing: 0.08em;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .contact-form .btn {
        align-self: stretch;
    }

    .legal-content {
        padding: 34px 22px 24px;
    }

    /* AGB am Handy: mehr Platz für den Text */
    .legal-content--lang {
        padding: 30px 16px 20px;
        font-size: 1.08rem;
    }

    .legal-inhalt {
        padding: 16px;
    }

    .legal-block {
        padding: 22px 14px 8px;
    }
}

@media (max-width: 480px) {
    .legal-page:has(.legal-content--lang) {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

    .header-inner {
        padding: 0 16px;
    }

    .testimonials,
    .philosophy-grid,
    .product-categories {
        grid-template-columns: 1fr;
    }

    .testimonial-card {
        padding: 40px 22px 26px;
    }

    .btn {
        padding: 14px 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .galaxy-spin,
    .hero-aura,
    .hero-logo-wrap,
    .price-icon::before,
    .footer::after,
    .pg-layer,
    .flip-arrow,
    .hero-vortex,
    #ecwid-shop .form-control__button,
    #ecwid-shop .lm-morph-ghost,
    #ecwid-shop .lm-morph-in,
    .orbit-track,
    .orbit-planet,
    .orbit-ring,
    .orbit-comet,
    .orbit-star,
    .footer-logo,
    .footer-logo-wrap::before { animation: none; }
    .header.scrolled .header-line::after,
    .header.scrolled .header-emblem::before { animation: none; }
}

/* ═══════════════════════════════════════════
   Lichtarchiv – Wissensgalaxie aus dem Telegram-Kanal (js/galaxie.js)
   Der Abschnitt ist mehrere Bildschirme hoch; die Bühne bleibt kleben, und das Scrollen fliegt in die Galaxie hinein.
   ═══════════════════════════════════════════ */
.lichtarchiv {
    position: relative;
    z-index: 1;
    height: 430vh;
}

.gx-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100lvh;
    overflow: hidden;
    touch-action: pan-y;          /* senkrecht wischen = scrollen (Reise), zur Seite ziehen = drehen */
    -webkit-user-select: none;
    user-select: none;
    text-shadow: none;
}

.gx-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.gx-stage.gx-zeigt { cursor: url('../images/cursor/hand.svg') 13 3, pointer; }
/* goldene Greif-Hand beim Drehen */
.gx-stage.gx-dreht,
.gx-stage.gx-dreht * { cursor: url('../images/cursor/greifen.svg') 16 16, grabbing !important; }
/* Über der Galaxie zeichnet die Seite den goldenen Zeiger selbst (js/galaxie.js) – der echte ist dort ausgeblendet */
.gx-stage.gx-eigen,
.gx-stage.gx-eigen .gx-canvas,
.gx-stage.gx-eigen .gx-labels,
.gx-stage.gx-eigen .gx-labels * { cursor: none !important; }
.gx-zeiger {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    will-change: transform;
}
.gx-zeiger.on { opacity: 1; }
.gx-zeiger img { position: absolute; width: 32px; height: 32px; max-width: none; display: none; }
.gx-zeiger[data-art="pfeil"] img[data-art="pfeil"],
.gx-zeiger[data-art="hand"] img[data-art="hand"],
.gx-zeiger[data-art="greifen"] img[data-art="greifen"] { display: block; }

/* ── Beschriftungen an den Sternen ── */
.gx-labels {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.gx-emo,
.gx-tit,
.gx-card,
.gx-ring {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    will-change: transform;
}

/* Smiley-Schild = Reaktionen der Community. Feste Größe, nur per transform skaliert → gleitet so ruhig wie die Schrift */
.gx-emo {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 26px;
    line-height: 1;
    white-space: nowrap;
    transform-origin: 50% 100%;
    filter: drop-shadow(0 0 6px rgba(255, 214, 120, 0.6));
    backface-visibility: hidden;
    transition: opacity 0.45s ease;
}
.gx-emo small {
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    color: #fff1c4;
    text-shadow: 0 0 6px rgba(255, 200, 90, 0.8);
}
.gx-emo.on { opacity: 0.95; }
/* Smileys und Titel reagieren auf die Maus (Vorschau), Karten sowieso */
.gx-emo.on,
.gx-tit.on {
    pointer-events: auto;
    cursor: url('../images/cursor/hand.svg') 13 3, pointer;
}

/* Lichtpunkt in Themenfarbe, wo (noch) keine Reaktion vergeben wurde */
.gx-punkt {
    flex: 0 0 auto;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 3px;
    border-radius: 50%;
    background: var(--gx-c, #f3d77c);
    box-shadow: 0 0 8px var(--gx-c, #f3d77c);
    vertical-align: middle;
}

/* Reaktionen mit Anzahl, z. B. ❤️ 12  🙏 3 */
.gx-reak { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; letter-spacing: 0; text-transform: none; }
.gx-reak-1 { display: inline-flex; align-items: baseline; gap: 3px; font-size: 15px; line-height: 1.2; }
.gx-reak-1 small { font-family: var(--font-head); font-size: 11px; font-weight: 700; color: #fff1c4; }

/* Vorschau neben dem Stern unter der Maus */
.gx-vorschau {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 320px;
    padding: 13px 16px 14px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--gx-c, #f3d77c) 60%, rgba(243, 215, 124, 0.3));
    background: rgba(8, 9, 22, 0.94);
    box-shadow: 0 0 34px color-mix(in srgb, var(--gx-c, #f3d77c) 30%, transparent), 0 18px 40px rgba(0, 0, 0, 0.45);
    text-align: left;
    opacity: 0;
    pointer-events: none;
    will-change: transform;
    transition: opacity 0.22s ease;
}
.gx-vorschau.on { opacity: 1; }
.gx-vorschau .gx-reak { margin: 8px 0 2px; }
.gx-vorschau .gx-card-title { -webkit-line-clamp: 3; font-size: 14.5px; margin-top: 8px; }
.gx-vorschau .gx-card-media { height: 150px; margin: 10px 0 4px; }
.gx-vorschau-thema { color: var(--gx-c, #f3d77c); }
.gx-vorschau-text {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 7px 0 0;
    font-size: 15px;
    line-height: 1.42;
    color: rgba(236, 229, 211, 0.85);
}

/* Emojis als Bilder (gleiten so fein wie die Schrift) */
.gx-ej { display: inline-block; width: 1.08em; height: 1.08em; vertical-align: -0.2em; }
.gx-emo .gx-ej { width: 26px; height: 26px; }
.gx-tit-emo { display: inline-flex; }
.gx-tit-emo .gx-ej { width: 15px; height: 15px; vertical-align: 0; }
.gx-reak-1 .gx-ej { align-self: center; }


/* „Seite weiter scrollen“ – immer unten, solange man in der Galaxie ist */
.gx-weiter {
    position: absolute;
    left: 50%;
    bottom: 22px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 999px;
    border: 1px solid rgba(243, 215, 124, 0.55);
    background: rgba(6, 7, 18, 0.82);
    color: #fff1c4;
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 0 22px rgba(255, 200, 90, 0.22);
    transform: translateX(-50%);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.gx-weiter:hover,
.gx-weiter:focus-visible {
    outline: none;
    border-color: #fff1c4;
    background: rgba(20, 16, 8, 0.9);
    box-shadow: 0 0 34px rgba(255, 200, 90, 0.5);
}
.gx-weiter svg { animation: gxWeiter 1.8s ease-in-out infinite; }
@keyframes gxWeiter { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }

.gx-tit {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 270px;
    padding: 3px 12px 3px 8px;
    border-radius: 999px;
    background: rgba(6, 7, 18, 0.66);
    border: 1px solid color-mix(in srgb, var(--gx-c, #f3d77c) 45%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--gx-c, #f3d77c) 28%, transparent);
    font-family: var(--font-head);
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: #f8ecd2;
    white-space: nowrap;
    text-shadow: 0 0 8px rgba(255, 210, 120, 0.35);
    transition: opacity 0.45s ease;
}
.gx-tit span:last-child { overflow: hidden; text-overflow: ellipsis; }
.gx-tit-emo { flex: 0 0 auto; font-size: 13px; }
.gx-tit.on { opacity: 1; }

.gx-card {
    width: 248px;
    padding: 11px 14px 12px;
    border-radius: 14px;
    background: rgba(8, 9, 22, 0.9);
    border: 1px solid color-mix(in srgb, var(--gx-c, #f3d77c) 50%, rgba(243, 215, 124, 0.25));
    box-shadow: 0 0 26px color-mix(in srgb, var(--gx-c, #f3d77c) 22%, transparent), inset 0 0 18px rgba(255, 210, 120, 0.04);
    text-align: left;
    pointer-events: none;
    cursor: url('../images/cursor/hand.svg') 13 3, pointer;
    transition: opacity 0.5s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.gx-card.on { opacity: 1; pointer-events: auto; }
.gx-card:hover,
.gx-card:focus-visible {
    outline: none;
    border-color: var(--gx-c, #f3d77c);
    box-shadow: 0 0 36px color-mix(in srgb, var(--gx-c, #f3d77c) 45%, transparent), inset 0 0 18px rgba(255, 210, 120, 0.08);
}
/* feine Lichtlinie von der Karte zu ihrem Stern */
.gx-card::before {
    content: '';
    position: absolute;
    top: 33px;
    left: -14px;
    width: 14px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gx-c, #f3d77c));
}
.gx-card.links::before { left: auto; right: -14px; transform: scaleX(-1); }

.gx-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: var(--font-head);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(243, 215, 124, 0.78);
}
.gx-card-emo { font-size: 15px; letter-spacing: 0; text-transform: none; }

.gx-card-media {
    position: relative;
    height: 92px;
    margin: 8px 0 2px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.04) center / cover no-repeat;
}
.gx-card-media[hidden] { display: none; }
.gx-card-media[data-wait] {
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0.02) 30%, rgba(255, 220, 140, 0.1) 50%, rgba(255, 255, 255, 0.02) 70%);
    background-size: 220% 100%;
    animation: gxSchimmer 1.5s linear infinite;
}
.gx-card-media.is-video::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    background: rgba(6, 7, 18, 0.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23f3d77c'/%3E%3C/svg%3E") center / 20px no-repeat;
    box-shadow: 0 0 0 1px rgba(243, 215, 124, 0.5), 0 0 16px rgba(255, 200, 90, 0.4);
}

.gx-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 6px;
    font-family: var(--font-head);
    font-size: 13.5px;
    line-height: 1.32;
    color: #fbefd2;
}
.gx-card-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 5px 0 0;
    font-size: 14.5px;
    line-height: 1.38;
    color: rgba(236, 229, 211, 0.78);
}
.gx-card-text[hidden] { display: none; }
.gx-card-more {
    display: inline-block;
    margin-top: 7px;
    font-family: var(--font-head);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gx-c, #f3d77c);
}

.gx-ring {
    border-radius: 50%;
    border: 1.5px solid rgba(255, 232, 170, 0.85);
    box-shadow: 0 0 14px rgba(255, 210, 120, 0.6), inset 0 0 10px rgba(255, 210, 120, 0.35);
    transition: opacity 0.25s ease;
}
.gx-ring.on { opacity: 1; }
.gx-ring-sel.on { animation: gxRing 1.6s ease-in-out infinite; }


/* ── Kopf: Titel, Suche, Themen ── */
.gx-hud {
    position: absolute;
    left: 0;
    right: 0;
    top: 78px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    pointer-events: none;
    transform: translateY(calc((var(--gx-intro, 1) - 1) * var(--gx-intro-h, 120px)));
}
.gx-search,
.gx-chips { pointer-events: auto; }

.gx-intro {
    opacity: var(--gx-intro, 1);
    transform: scale(calc(0.92 + 0.08 * var(--gx-intro, 1)));
}
.gx-title {
    margin: 0;
    font-family: var(--font-deco);
    font-weight: 700;
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    line-height: 1.2;
    letter-spacing: 0.06em;
    font-kerning: none;
    font-variant-ligatures: none;
    background: var(--gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 18px rgba(255, 207, 90, 0.35));
}
.gx-sub {
    margin: 4px 0 0;
    font-family: var(--font-head);
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(243, 215, 124, 0.85);
}
.gx-count {
    font-weight: 700;
    color: #fff1c4;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 12px rgba(255, 210, 120, 0.6);
}
.gx-status {
    margin: 2px 0 0;
    min-height: 1.5em;
    font-size: 0.9rem;
    font-style: italic;
    color: rgba(236, 229, 211, 0.6);
}

.gx-search {
    position: relative;
    width: min(520px, 100%);
}
.gx-search svg {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(243, 215, 124, 0.85);
    pointer-events: none;
}
.gx-search input {
    width: 100%;
    height: 46px;
    padding: 0 96px 0 46px;
    border-radius: 999px;
    border: 1px solid rgba(243, 215, 124, 0.38);
    background: rgba(6, 7, 18, 0.8);
    color: #fbefd2;
    font-family: var(--font-body);
    font-size: 1.12rem;
    outline: none;
    box-shadow: 0 0 22px rgba(255, 200, 90, 0.12), inset 0 0 14px rgba(255, 210, 120, 0.05);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
}
.gx-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.gx-search input::placeholder { color: rgba(236, 229, 211, 0.45); font-style: italic; }
.gx-search input:focus {
    border-color: rgba(255, 228, 160, 0.85);
    box-shadow: 0 0 32px rgba(255, 200, 90, 0.32), inset 0 0 14px rgba(255, 210, 120, 0.08);
}
.gx-found {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-head);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: rgba(243, 215, 124, 0.9);
    pointer-events: none;
}

.gx-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    max-width: 780px;
}
.gx-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(243, 215, 124, 0.25);
    background: rgba(6, 7, 18, 0.62);
    color: rgba(246, 234, 208, 0.86);
    font-family: var(--font-head);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    white-space: nowrap;
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.gx-chip::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gx-c, var(--gold2));
    box-shadow: 0 0 8px var(--gx-c, var(--gold2));
}
.gx-chip small { font-size: 10px; opacity: 0.55; }
.gx-chip:hover { border-color: var(--gx-c, var(--gold2)); color: #fff6dc; }
.gx-chip.on {
    border-color: var(--gx-c, var(--gold2));
    background: color-mix(in srgb, var(--gx-c, #f3d77c) 16%, rgba(6, 7, 18, 0.72));
    color: #fff6dc;
    box-shadow: 0 0 16px color-mix(in srgb, var(--gx-c, #f3d77c) 35%, transparent);
}

/* ── Trefferliste ── */
.gx-results {
    position: absolute;
    right: 22px;
    top: 230px;
    bottom: 64px;
    z-index: 3;
    width: 330px;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    border: 1px solid rgba(243, 215, 124, 0.3);
    background: rgba(7, 8, 20, 0.9);
    box-shadow: 0 0 30px rgba(255, 200, 90, 0.12);
    overflow: hidden;
    text-align: left;
    animation: gxEin 0.4s var(--ease) both;
}
.gx-results[hidden] { display: none; }
.gx-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px 10px 16px;
    border-bottom: 1px solid rgba(243, 215, 124, 0.15);
    font-family: var(--font-head);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold2);
}
.gx-results-close {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(243, 215, 124, 0.3);
    background: transparent;
    color: var(--gold2);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.gx-results-close:hover { border-color: var(--gold2); box-shadow: 0 0 12px rgba(255, 210, 120, 0.4); }
.gx-results-list {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(243, 215, 124, 0.35) transparent;
}
.gx-hit {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #f6ead0;
    text-align: left;
    transition: background 0.2s ease;
}
.gx-hit:hover,
.gx-hit:focus-visible { outline: none; background: color-mix(in srgb, var(--gx-c, #f3d77c) 13%, transparent); }
.gx-hit-emo { flex: 0 0 auto; min-width: 1.5em; font-size: 16px; line-height: 1.4; text-align: center; }
.gx-hit-emo .gx-punkt { margin-top: 6px; }
.gx-hit-main strong {
    display: block;
    font-family: var(--font-head);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    color: #fbefd2;
}
.gx-hit-main time { font-family: var(--font-body); font-style: italic; font-size: 14px; color: var(--gx-c, #f3d77c); opacity: 0.85; }

.gx-hint {
    position: absolute;
    left: 50%;
    bottom: 76px;
    z-index: 2;
    margin: 0;
    padding: 7px 18px;
    border-radius: 999px;
    border: 1px solid rgba(243, 215, 124, 0.22);
    background: rgba(6, 7, 18, 0.62);
    transform: translateX(-50%);
    font-family: var(--font-head);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(243, 215, 124, 0.85);
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.7s ease;
    animation: gxHinweis 2.8s ease-in-out infinite;
}
.gx-hint.weg { opacity: 0; }
.gx-hint-touch { display: none; }
@media (pointer: coarse) {
    .gx-hint-maus { display: none; }
    .gx-hint-touch { display: inline; }
}

/* ohne WebGL: nur Suche und Trefferliste */
.gx-stage.gx-ohne-3d { position: relative; height: auto; min-height: 90vh; padding-bottom: 40px; }
.lichtarchiv:has(.gx-ohne-3d) { height: auto; }
.gx-ohne-3d .gx-canvas,
.gx-ohne-3d .gx-hint { display: none; }
.gx-ohne-3d .gx-results { position: relative; inset: auto; width: min(640px, calc(100% - 32px)); height: 60vh; margin: 330px auto 0; }

/* ── geöffneter Beitrag ── */
.gx-modal {
    position: fixed;
    inset: 0;
    z-index: 7600;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: rgba(2, 3, 10, 0.74);
    text-shadow: none;
}
.gx-modal.on { display: flex; animation: gxEin 0.35s ease both; }
.gx-modal.schliesst { animation: gxAus 0.3s ease both; }
.gx-modal-card {
    position: relative;
    width: min(720px, 100%);
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 28px 32px 22px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--gx-c, #f3d77c) 55%, rgba(243, 215, 124, 0.3));
    background: rgba(9, 10, 24, 0.97);
    box-shadow: 0 0 60px color-mix(in srgb, var(--gx-c, #f3d77c) 22%, transparent), 0 30px 80px rgba(0, 0, 0, 0.6);
    text-align: left;
    scrollbar-width: thin;
    scrollbar-color: rgba(243, 215, 124, 0.35) transparent;
}
.gx-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(243, 215, 124, 0.35);
    background: rgba(6, 7, 18, 0.7);
    color: var(--gold2);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.gx-modal-close:hover { border-color: var(--gold2); box-shadow: 0 0 16px rgba(255, 210, 120, 0.45); transform: rotate(90deg); }
.gx-modal-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding-right: 46px;
    font-family: var(--font-head);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(243, 215, 124, 0.8);
}
.gx-modal-emo { letter-spacing: 0; }
.gx-modal-emo .gx-reak-1 { font-size: 18px; }
.gx-modal-thema { color: var(--gx-c, #f3d77c); }
.gx-modal-title {
    margin: 12px 0 16px;
    font-family: var(--font-head);
    font-size: clamp(1.2rem, 2.6vw, 1.55rem);
    line-height: 1.3;
    color: #fff3d6;
    text-shadow: 0 0 14px rgba(255, 210, 120, 0.25);
}
.gx-modal-media { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
.gx-modal-media[hidden],
.gx-modal-text[hidden] { display: none; }
.gx-modal-media.laedt {
    min-height: 220px;
    border-radius: 12px;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0.02) 30%, rgba(255, 220, 140, 0.09) 50%, rgba(255, 255, 255, 0.02) 70%);
    background-size: 220% 100%;
    animation: gxSchimmer 1.5s linear infinite;
}
.gx-modal-media video,
.gx-foto {
    display: block;
    width: 100%;
    max-height: 62vh;
    border-radius: 12px;
    background: #000;
    object-fit: contain;
}
.gx-fotos { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.gx-foto-mini {
    flex: 0 0 64px;
    height: 64px;
    border-radius: 8px;
    border: 1px solid rgba(243, 215, 124, 0.25);
    background: #000 center / cover no-repeat;
    opacity: 0.55;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}
.gx-foto-mini:hover,
.gx-foto-mini.on { opacity: 1; border-color: var(--gold2); }
.gx-video-extern {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    background: #000 center / cover no-repeat;
    text-decoration: none;
}
.gx-video-extern span {
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid var(--gold2);
    background: rgba(6, 7, 18, 0.82);
    font-family: var(--font-head);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: #fff3d6;
    box-shadow: 0 0 20px rgba(255, 200, 90, 0.35);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.gx-video-extern:hover span { box-shadow: 0 0 30px rgba(255, 200, 90, 0.6); transform: scale(1.04); }
.gx-video-extern { align-content: center; gap: 10px; }
.gx-video-extern small { max-width: 34ch; padding: 0 14px; font-family: var(--font-ui); font-size: 12px; line-height: 1.45; color: rgba(255, 243, 214, 0.86); text-shadow: 0 1px 6px #000; text-align: center; }
.gx-video-extern.ohne-bild { aspect-ratio: auto; padding: 26px 16px; background: radial-gradient(ellipse at 50% 40%, rgba(212, 175, 55, 0.16), transparent 70%), rgba(6, 7, 18, 0.6); border: 1px solid rgba(212, 175, 55, 0.25); }
.gx-linkvorschau {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(243, 215, 124, 0.25);
    color: #f6ead0;
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.35;
}
.gx-linkvorschau img { flex: 0 0 96px; width: 96px; height: 64px; border-radius: 8px; object-fit: cover; }
.gx-modal-text {
    font-size: 1.12rem;
    line-height: 1.65;
    color: rgba(240, 233, 216, 0.93);
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.gx-modal-text a { color: var(--gold2); }
.gx-modal-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(243, 215, 124, 0.15);
}
.gx-modal-btn {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(243, 215, 124, 0.35);
    background: transparent;
    color: var(--gold2);
    font-family: var(--font-head);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.gx-modal-btn:hover:not(:disabled) { border-color: var(--gold2); box-shadow: 0 0 16px rgba(255, 210, 120, 0.35); }
.gx-modal-btn:disabled { opacity: 0.3; }
.gx-modal-btn.gx-tg {
    background: linear-gradient(180deg, #fff1c4, #f3d77c 45%, #d4af37);
    border-color: transparent;
    color: #1a1206;
    font-weight: 700;
}

@keyframes gxSchimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes gxRing { 0%, 100% { box-shadow: 0 0 14px rgba(255, 210, 120, 0.6), inset 0 0 10px rgba(255, 210, 120, 0.35); } 50% { box-shadow: 0 0 26px rgba(255, 210, 120, 0.95), inset 0 0 14px rgba(255, 210, 120, 0.55); } }
@keyframes gxHinweis { 0%, 100% { box-shadow: 0 0 0 rgba(255, 210, 120, 0); } 50% { box-shadow: 0 0 22px rgba(255, 210, 120, 0.35); } }
@keyframes gxEin { from { opacity: 0; } }
@keyframes gxAus { to { opacity: 0; } }

@media (max-width: 760px) {
    .lichtarchiv { height: 340vh; }
    .gx-hud { top: 70px; gap: 9px; }
    .gx-sub { font-size: 0.68rem; letter-spacing: 0.12em; }
    .gx-status { font-size: 0.8rem; }
    .gx-search input { height: 42px; font-size: 1.05rem; padding-right: 84px; }
    /* alle Themen auf einen Blick: kompakt und umbrechend statt seitlich wischen */
    .gx-chips { gap: 5px; max-width: 100%; }
    .gx-chip { gap: 5px; padding: 4px 9px; font-size: 10.5px; letter-spacing: 0.03em; }
    .gx-chip::before { width: 6px; height: 6px; }
    .gx-chip small { display: none; }
    .gx-results { left: 10px; right: 10px; top: auto; bottom: 12px; width: auto; height: 40vh; }
    .gx-card { width: 196px; padding: 10px 12px; }
    .gx-card-media { height: 78px; }
    .gx-hint { bottom: 66px; width: max-content; max-width: calc(100% - 24px); font-size: 9.5px; letter-spacing: 0.06em; white-space: normal; text-align: center; border-radius: 14px; }
    .gx-weiter { bottom: 16px; padding: 9px 18px; font-size: 11px; }
    .gx-vorschau { width: 270px; }
    .gx-modal { padding: 10px; }
    .gx-modal-card { padding: 22px 18px 18px; max-height: calc(100dvh - 20px); }
}

@media (prefers-reduced-motion: reduce) {
    .gx-hint,
    .gx-weiter svg,
    .gx-ring-sel.on,
    .gx-card-media[data-wait],
    .gx-modal-media.laedt { animation: none; }
}

/* ═══ Lab-Bausteine ═══
   Fertige Bausteine aus dem Lab im Dashboard (Klasse „baustein“, arbeit/public/designer.js). Sie nutzen die Teile der Seite
   (section-title, section-intro, philosophy-card, stat, quote-highlight, material-list, btn, ornament); hier steht nur,
   was sie als eigener Baustein zusätzlich brauchen. */
.baustein {
    display: block;
    position: relative;
    margin-block: clamp(22px, 3vw, 40px);
}

.baustein > :first-child { margin-top: 0; }
.baustein > :last-child { margin-bottom: 0; }

.baustein .section-title { margin-bottom: 40px; }
.baustein .quote-highlight { margin: 0; }

.baustein--kopf { text-align: center; }
.baustein--kopf .price-title { margin-bottom: 14px; }

.baustein__text,
.baustein__hinweis {
    max-width: 760px;
    margin-inline: auto;
    font-size: 1.3rem;
    line-height: 1.8;
    color: var(--text-soft);
}

.baustein__hinweis { padding: 22px 28px; }

.baustein__hinweis b {
    font-family: var(--font-head);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--gold2);
}

/* Liste mit goldenen Sternen statt Punkten */
.baustein__liste {
    list-style: none;
    display: grid;
    gap: 12px;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    text-align: left;
    font-size: 1.25rem;
    color: var(--text-soft);
}

.baustein__liste li {
    position: relative;
    padding-left: 32px;
}

.baustein__liste li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 15px;
    height: 15px;
    background: var(--gold2);
    clip-path: var(--star);
}

/* Bild und Text nebeneinander */
.baustein--zwei {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    text-align: left;
}

.baustein--links { grid-template-columns: 0.9fr 1.1fr; }

.baustein__titel {
    margin-bottom: 12px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold2);
    text-shadow: 0 0 14px rgba(255, 207, 90, 0.45);
}

.baustein--zwei p {
    font-size: 1.25rem;
    line-height: 1.75;
    color: var(--text-soft);
}

.baustein--zwei img,
.baustein__bild img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    border: 1px solid var(--line);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 34px rgba(212, 175, 55, 0.12);
}

.baustein__bild { margin: 0; }

.baustein__bild figcaption {
    margin-top: 12px;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--muted);
}

/* Karten und Zahlen */
.baustein > .baustein__karte {
    max-width: 560px;
    margin-inline: auto;
}

.baustein__raster { margin-bottom: 0; }

.baustein__zahlen {
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
}

.baustein--knoepfe {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

@media (max-width: 760px) {
    .baustein--zwei,
    .baustein--links { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .baustein__zahlen { grid-template-columns: 1fr; }
}

/* ── Hinweis vor externen Videos (YouTube, Telegram): erst nach Klick laden (Datenschutz) ── */
.medien-frage {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    padding: 18px;
    background: radial-gradient(ellipse at 50% 45%, rgba(5, 6, 10, 0.72), rgba(5, 6, 10, 0.9));
    animation: medienFrageEin 0.35s ease both;
}

@keyframes medienFrageEin {
    from { opacity: 0; }
    to { opacity: 1; }
}

.medien-frage__innen {
    max-width: 520px;
    text-align: center;
    color: var(--text-soft);
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 2.2vw, 1.12rem);
    line-height: 1.5;
}

.medien-frage__innen strong {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.95em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold2);
    text-shadow: 0 0 12px rgba(255, 207, 110, 0.4);
}

.medien-frage__innen p {
    margin: 0 0 14px;
}

.medien-frage__innen a {
    color: var(--gold2);
}

.medien-frage__ja {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 26px;
    border: 1px solid var(--gold2);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 214, 120, 0.95), rgba(212, 160, 55, 0.95));
    color: #1a1205;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    box-shadow: 0 0 24px rgba(255, 200, 90, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.medien-frage__ja::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent currentColor;
}

.medien-frage__ja:hover,
.medien-frage__ja:focus-visible {
    transform: scale(1.04);
    box-shadow: 0 0 34px rgba(255, 200, 90, 0.6);
}

.medien-frage__immer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: rgba(236, 229, 211, 0.75);
    cursor: pointer;
}

.medien-frage__immer input {
    accent-color: var(--gold2);
}

/* Platz für ein Telegram-Video im Lichtarchiv, bis es abgespielt werden darf */
.gx-video-frage {
    position: relative;
    aspect-ratio: 16 / 9;
    min-height: 240px;
    border-radius: 12px;
    overflow: hidden;
    background: #000 center / cover no-repeat;
}

.gx-video-frage.ohne-bild {
    background: radial-gradient(ellipse at 50% 40%, rgba(212, 175, 55, 0.16), transparent 70%), rgba(6, 7, 18, 0.8);
}

@media (max-width: 560px) {
    .medien-frage { padding: 10px; }
    .medien-frage__innen p { font-size: 0.9rem; margin-bottom: 10px; }
    .medien-frage__ja { padding: 9px 20px; font-size: 0.85rem; }
    .gx-video-frage { min-height: 300px; }
}

/* ── „Vertrag widerrufen“ (§ 356a BGB): auf jeder Seite, deutlich abgesetzt von Impressum und AGB ── */
.footer-col a.vertrag-widerrufen,
.footer-recht a.vertrag-widerrufen {
    margin-top: 12px;
    padding: 8px 20px;
    border: 1px solid var(--gold2);
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.1);
    box-shadow: 0 0 18px rgba(255, 207, 90, 0.22);
    transition: box-shadow 0.3s ease, background 0.3s ease;
}

.footer-col a.vertrag-widerrufen span {
    background: none;
    color: var(--gold2);
    font-family: var(--font-head);
    font-size: 0.86em;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.footer-col a.vertrag-widerrufen::before,
.footer-col a.vertrag-widerrufen::after,
.footer-col a.vertrag-widerrufen span::after {
    display: none;
}

.footer-col a.vertrag-widerrufen:hover,
.footer-col a.vertrag-widerrufen:focus-visible,
.footer-recht a.vertrag-widerrufen:hover,
.footer-recht a.vertrag-widerrufen:focus-visible {
    background: rgba(212, 175, 55, 0.2);
    box-shadow: 0 0 28px rgba(255, 207, 90, 0.45);
}

.footer-col a.vertrag-widerrufen:hover span {
    animation: none;
    filter: none;
}

/* Unterseiten: Rechtliches als Leiste im Fuß */
.footer-recht {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 26px;
    margin: 26px 0 6px;
}

.footer-recht a {
    font-family: var(--font-head);
    font-size: 0.88rem;
    letter-spacing: 0.06em;
    color: var(--text-soft);
    text-decoration: none;
    transition: color 0.25s ease;
}

.footer-recht a:hover,
.footer-recht a:focus-visible {
    color: var(--gold2);
}

.footer-recht a.vertrag-widerrufen {
    margin-top: 0;
    color: var(--gold2);
    font-weight: 600;
}

/* ── Formular „Vertrag widerrufen“ ── */
.widerruf-form {
    display: grid;
    gap: 18px;
    margin-top: 26px;
}

.wf-zeile {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 18px;
}

.wf-feld {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.wf-feld label,
.wf-feld legend {
    font-family: var(--font-head);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--gold2);
}

.wf-feld legend {
    margin-bottom: 6px;
}

.wf-frei {
    font-family: var(--font-body);
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0;
    color: rgba(236, 229, 211, 0.6);
}

.wf-feld input[type="text"],
.wf-feld input[type="email"],
.wf-feld input[type="date"],
.wf-feld textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: rgba(5, 6, 10, 0.55);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1.08rem;
    color-scheme: dark;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.wf-feld input:focus,
.wf-feld textarea:focus {
    outline: none;
    border-color: var(--gold2);
    box-shadow: 0 0 18px rgba(255, 207, 90, 0.25);
}

.wf-feld small {
    font-size: 0.92rem;
    color: rgba(236, 229, 211, 0.6);
}

.wf-umfang label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.08rem;
    letter-spacing: 0;
    color: var(--text-soft);
    cursor: pointer;
}

.wf-umfang input[type="radio"] {
    accent-color: var(--gold2);
    width: 18px;
    height: 18px;
}

.wf-umfang textarea {
    margin-top: 6px;
}

/* Unsichtbares Feld gegen Spam-Programme */
.wf-falle {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.wf-fehler {
    margin: 0 !important;
    padding: 10px 14px;
    border: 1px solid rgba(255, 140, 90, 0.6);
    border-radius: 10px;
    background: rgba(255, 120, 60, 0.12);
    color: #ffd2b8;
}

.wf-senden,
.wf-drucken {
    justify-self: center;
    padding: 14px 36px;
    border: 1px solid var(--gold2);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 214, 120, 0.96), rgba(212, 160, 55, 0.96));
    color: #1a1205;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    box-shadow: 0 0 26px rgba(255, 200, 90, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.wf-senden:hover:not(:disabled),
.wf-senden:focus-visible,
.wf-drucken:hover,
.wf-drucken:focus-visible {
    transform: scale(1.03);
    box-shadow: 0 0 36px rgba(255, 200, 90, 0.6);
}

.wf-senden:disabled {
    opacity: 0.6;
    cursor: wait;
}

.wf-drucken {
    display: block;
    margin: 22px auto 0;
    padding: 11px 26px;
    font-size: 0.9rem;
}

.widerruf-ok h2 {
    text-align: center;
}

.widerruf-inhalt {
    margin: 0 0 18px;
    padding: 18px 20px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: rgba(5, 6, 10, 0.5);
    color: var(--text-soft);
    font-family: var(--font-body);
    font-size: 1.04rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .wf-zeile {
        grid-template-columns: 1fr;
    }
    .wf-senden {
        justify-self: stretch;
    }
}

@media print {
    .header, .footer, .galaxy-bg, .admin-link, .legal-logo, .wf-drucken { display: none !important; }
    body, .legal-content { background: #fff !important; color: #000 !important; box-shadow: none !important; }
    .legal-content h1, .legal-content h2, .legal-stand, .widerruf-inhalt { color: #000 !important; -webkit-text-fill-color: #000; background: none !important; filter: none !important; }
}

/* Datenschutzseite: Einstellungen für Videos */
.medien-einstellung {
    margin: 6px 0 18px;
    padding: 18px 22px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: rgba(5, 6, 10, 0.4);
}

.medien-einstellung p {
    margin-bottom: 8px !important;
}

.medien-einstellung .wf-drucken {
    margin: 12px 0 4px;
}

.legal-content code {
    padding: 1px 6px;
    border-radius: 5px;
    background: rgba(212, 175, 55, 0.1);
    font-size: 0.85em;
    overflow-wrap: anywhere;
}

/* ── Übernommen aus dem Lab (12.11.2026) ── */
p {
    color: #fff1c4;
}

.price-head .price-kicker {
    font-size: 22px;
    color: #f3d77c;
    text-align: center;
}

/* Cinzel hat höchstens 700 – ein feiner Umriss in Schriftfarbe macht die Buchstaben kräftiger */
.hero-actions .btn-primary {
    -webkit-text-stroke: 0.6px currentColor;
}

.price-head .price-title {
    color: #f3d77c;
    -webkit-text-fill-color: #f3d77c;
    background-image: none;
    text-align: center;
}

@media (min-width: 761px) {
    #hero {
        padding-bottom: 0;
        min-height: 991px;
    }

    #erfahrungen {
        padding-bottom: 0;
        min-height: 1985px;
    }

    #produkte {
        padding-top: 106px;
    }

    #ueber-mich {
        padding-bottom: 69px;
        min-height: 1438px;
    }

    .price-head .price-title {
        font-size: 52px;
    }
}