/* ============================================
   MOND-LAMPEN Custom Theme
   Farben: Blau-Palette basierend auf Logo + Verpackung
   ============================================ */

/* --- Buttons (z.B. "In den Warenkorb") --- */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
    background-color: #1a237e !important;
    border-color: #1a237e !important;
    color: #ffffff !important;
    border-radius: 30px !important;
    padding: 12px 28px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}
.btn-primary:hover {
    background-color: #4fc3f7 !important;
    border-color: #4fc3f7 !important;
    color: #1a237e !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79, 195, 247, 0.4) !important;
}

/* --- Header komplett weiß --- */
#header,
#header-top-bar,
header,
.navbar,
nav.navbar,
header .navbar {
    background-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* --- Navigationslinks dunkelblau --- */
#header a,
#header .nav-link,
.navbar a,
.navbar .nav-link,
header a:not(.btn) {
    color: #1a237e !important;
}
#header a:hover,
#header .nav-link:hover,
.navbar a:hover,
.navbar .nav-link:hover {
    color: #4fc3f7 !important;
}

/* --- Gelbe Hover-Linie Navigation entfernen --- */
header a:hover:not(.dropdown-item):not(.btn) {
    color: #4fc3f7 !important;
    border-bottom-color: #4fc3f7 !important;
}
header .navbar-nav > .nav-item > .nav-link::before {
    border-color: #4fc3f7 !important;
}

/* --- Preise --- */
.product-price,
.price,
span.price {
    color: #1a237e !important;
    font-weight: 700 !important;
}

/* --- Links --- */
a {
    color: #1a237e !important;
}
a:hover {
    color: #4fc3f7 !important;
}

/* --- "Jetzt kaufen" Button grün → blau --- */
.btn-success,
.btn-success:not(:disabled):not(.disabled) {
    background-color: #1a237e !important;
    border-color: #1a237e !important;
    color: #ffffff !important;
    border-radius: 30px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}
.btn-success:hover {
    background-color: #4fc3f7 !important;
    border-color: #4fc3f7 !important;
    color: #1a237e !important;
}

/* --- "Auf Lager" Badge grün → blau --- */
.badge-success,
.badge.badge-success,
span.badge-success {
    background-color: #1a237e !important;
    color: #ffffff !important;
}

/* --- "Auf Lager" Ribbon --- */
.ribbon {
    background-color: #4fc3f7 !important;
    color: #1a237e !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
}
.ribbon::before,
.ribbon::after {
    display: none !important;
}

/* --- Shine-Effekt auf alle Buttons --- */
.btn-success {
    overflow: hidden !important;
    position: relative !important;
}

.btn-success::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(
        to right,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.3) 50%,
        rgba(255,255,255,0) 100%
    ) !important;
    transform: skewX(-25deg) !important;
    transition: left 0.5s ease !important;
}

.btn-success:hover::before {
    left: 150% !important;
}

/* Trust-Leiste nur auf Desktop */
.trust-leiste-wrapper {
    display: none;
}
@media (min-width: 768px) {
    .trust-leiste-wrapper {
        display: block;
    }
}

/* --- Banner Buttons Hover Fix --- */
a[href*="mondlampen.com/mondlampen"]:hover {
    color: #ffffff !important;
}

a[href*="schwebende-mondlampen"]:hover {
    color: #4fc3f7 !important;
}

/* --- FAQ Akkordeon --- */
.faq-item {
    background: #f8f9ff;
    border: 1px solid #e8eaf6;
    border-radius: 10px;
    padding: 0.2rem 1.2rem;
    margin-bottom: 0.8rem;
}
.faq-item summary {
    cursor: pointer;
    font-weight: 700;
    color: #1a237e;
    padding: 0.9rem 0;
    list-style: none;
    position: relative;
    padding-right: 30px;
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 0.9rem;
    color: #4fc3f7;
    font-size: 1.3rem;
    font-weight: 700;
}
.faq-item[open] summary::after {
    content: '–';
}
.faq-item p {
    color: #555;
    line-height: 1.7;
    padding-bottom: 1rem;
}

/* Widerrufsbutton im Footer auf Höhe der Service-Links ziehen */
@media (min-width: 992px) {
    .withdrawal-link {
        margin-top: -7rem !important;
    }
}

/* ============================================================
   Schwebende Mondlampe – Produktseite
   Anhängen an: templates/MeinShopTemplate26/themes/my-nova/custom.css
   Alle Klassen mit Präfix "ml-" – keine Kollision mit NOVA/Bootstrap.
   ============================================================ */

.ml-desc, .ml-kurz { --ml-ink:#171a22; --ml-muted:#5c6070; --ml-line:#e4e1da; --ml-surface:#fff; --ml-soft:#fbf3dc; --ml-night:#1a237e; --ml-warn:#b26a00; --ml-warn-soft:#fff4e0; }

/* --- Kurzbeschreibung (Kaufbereich) --- */
.ml-trust { list-style:none; padding:0; margin:12px 0 0; display:grid; gap:6px; font-size:.92rem; color:var(--ml-muted); }
.ml-trust li { position:relative; padding-left:24px; }
.ml-trust li::before { content:""; position:absolute; left:2px; top:.35em; width:12px; height:7px; border-left:2px solid var(--ml-night); border-bottom:2px solid var(--ml-night); transform:rotate(-45deg); }
.ml-quick { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:14px 0 4px; }
.ml-qf { background:var(--ml-soft); border-radius:10px; padding:8px 12px; }
.ml-qf b { display:block; font-size:1rem; font-weight:800; color:var(--ml-ink); }
.ml-qf span { font-size:.8rem; color:var(--ml-muted); }

/* --- Langbeschreibung --- */
.ml-desc { color:var(--ml-ink); font-size:1.04rem; line-height:1.55; }
.ml-desc h2 { font-size:clamp(1.35rem,3.2vw,1.85rem); font-weight:800; line-height:1.15; letter-spacing:-.01em; margin:0 0 .5em; }
.ml-desc h3 { font-size:1.1rem; font-weight:700; margin:0 0 .5em; }
.ml-desc p { margin:0 0 .9em; max-width:68ch; }
.ml-desc img { max-width:100%; height:auto; display:block; }
.ml-lede { font-size:1.12rem; }
.ml-eyebrow { font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ml-muted); margin:0 0 .5rem !important; }
.ml-block { padding:32px 0; }
@media (min-width:900px){ .ml-block { padding:48px 0; } }

.ml-figure { margin:0; border-radius:14px; overflow:hidden; background:#0b0c10; box-shadow:0 10px 30px rgba(23,26,34,.10); }
.ml-split { display:grid; gap:24px; align-items:center; }
@media (min-width:900px){ .ml-split { grid-template-columns:1fr 1fr; gap:48px; } .ml-rev > .ml-figure { order:2; } }

.ml-modes { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.ml-mode { text-align:center; border:1px solid var(--ml-line); border-radius:12px; padding:12px 8px; background:var(--ml-surface); }
.ml-mode i { display:block; width:34px; height:34px; border-radius:50%; margin:0 auto 8px; box-shadow:0 0 18px 4px var(--g); }
.ml-mode b { display:block; font-size:.95rem; }
.ml-mode span { font-size:.8rem; color:var(--ml-muted); }

.ml-steps { display:grid; gap:18px; }
@media (min-width:720px){ .ml-steps { grid-template-columns:repeat(3,1fr); } }
.ml-step { background:var(--ml-surface); border:1px solid var(--ml-line); border-radius:14px; overflow:hidden; }
.ml-step img { aspect-ratio:1; object-fit:cover; width:100%; }
.ml-step-t { padding:14px 16px 18px; }
.ml-step-t b { display:block; font-size:1rem; margin-bottom:4px; }
.ml-step-t p { margin:0; font-size:.95rem; color:var(--ml-muted); }
.ml-tip { margin-top:18px; background:var(--ml-soft); border-radius:12px; padding:14px 16px; font-size:.95rem; max-width:none !important; }

.ml-twocol { display:grid; gap:24px; }
@media (min-width:900px){ .ml-twocol { grid-template-columns:3fr 2fr; gap:40px; } }
.ml-specs { width:100%; table-layout:fixed; border-collapse:collapse; font-size:.97rem; background:var(--ml-surface); border:1px solid var(--ml-line); border-radius:14px; overflow:hidden; }
.ml-specs th, .ml-specs td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--ml-line); vertical-align:top; overflow-wrap:anywhere; }
.ml-specs tr:last-child td, .ml-specs tr:last-child th { border-bottom:0; }
.ml-specs th { width:42%; font-weight:600; color:var(--ml-muted); }
.ml-box { background:var(--ml-surface); border:1px solid var(--ml-line); border-radius:14px; padding:18px 20px; }
.ml-box + .ml-box { margin-top:14px; }
.ml-box ul { margin:.4em 0 0; padding-left:1.2em; }
.ml-box li { margin:.3em 0; }
.ml-box b { display:block; margin-bottom:4px; }
.ml-box p { margin:0; font-size:.95rem; color:var(--ml-muted); }
.ml-safety { border-left:4px solid var(--ml-warn); background:var(--ml-warn-soft); }
.ml-safety h3 { color:var(--ml-warn); }

.ml-gift { display:grid; gap:14px; }
@media (min-width:720px){ .ml-gift { grid-template-columns:repeat(3,1fr); } }
.ml-why { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:8px; }
@media (min-width:720px){ .ml-why { grid-template-columns:repeat(4,1fr); } }
.ml-why .ml-box { padding:16px; }

.ml-faq { max-width:780px; }
.ml-faq details { border-bottom:1px solid var(--ml-line); }
.ml-faq summary { list-style:none; cursor:pointer; padding:16px 36px 16px 0; position:relative; }
.ml-faq summary::-webkit-details-marker { display:none; }
.ml-faq summary h3 { margin:0; font-size:1.02rem; }
.ml-faq summary::after { content:"+"; position:absolute; right:4px; top:10px; font-size:1.5rem; font-weight:500; color:var(--ml-night); }
.ml-faq details[open] summary::after { content:"–"; }
.ml-a { padding:0 0 18px; }
.ml-a p:last-child { margin-bottom:0; }

/* Vom Editor eingefügte Umbrüche/Leerabsätze im Beschreibungsbereich neutralisieren */
.ml-desc br, .ml-kurz br { display:none !important; }
.ml-desc p:empty, .ml-kurz p:empty { display:none !important; }
.ml-split > p, .ml-modes > p, .ml-steps > p, .ml-twocol > p,
.ml-gift > p, .ml-why > p, .ml-quick > p { display:none !important; }