/*
 * EloriaTale — Magic Theme Overlay
 * Märchenbuch-Redesign: warme Papier-Töne, goldenes Licht, Storybook-Feeling
 * Wird nach style.css und custom.css geladen (höchste Priorität)
 */

/* ==========================================================================
   MAGISCHE FARBPALETTE (überschreibt CSS-Variablen)
   ========================================================================== */

:root {
    --magic-cream:        #F9F3E8;
    --magic-cream-deep:   #F0E6CC;
    --magic-parchment:    #EDD9A3;
    --magic-gold:         #C8973A;
    --magic-gold-light:   #E8C06A;
    --magic-gold-glow:    rgba(232, 192, 106, 0.35);
    --magic-gold-shine:   rgba(212, 170, 80, 0.15);
    --magic-forest:       #2D4A3E;
    --magic-forest-mid:   #3D6655;
    --magic-brown:        #6B4226;
    --magic-brown-light:  #8B5E3C;
    --magic-text-dark:    #2A1F14;
    --magic-text-mid:     #5C4033;
    --magic-text-soft:    #7A5C48;
    --magic-night:        #1A1228;
    --magic-night-mid:    #221833;
    --magic-particle:     rgba(255, 220, 120, 0.6);

    /* Magische Schatten */
    --magic-shadow-warm:  0 8px 32px rgba(100, 60, 20, 0.18);
    --magic-shadow-gold:  0 4px 24px rgba(200, 151, 58, 0.30);
    --magic-glow-soft:    0 0 60px rgba(232, 192, 106, 0.20);

    /* Radien */
    --magic-radius:       20px;
    --magic-radius-lg:    32px;
}

/* ==========================================================================
   BODY / GLOBALER HINTERGRUND — ganzseitiges Märchenbild
   ========================================================================== */

body {
    background-color: #1a1208 !important;
    background-image: var(--mzb-full-bg-image, none) !important;
    background-size: cover !important;
    background-position: center top !important;
    background-attachment: fixed !important;
    color: var(--magic-text-dark) !important;
}

/* Minimaler Overlay — Bild soll klar sichtbar sein */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(249, 243, 232, 0.18);
    pointer-events: none;
    z-index: 0;
}

/* ==========================================================================
   ALLE SEKTIONEN TRANSPARENT — Hintergrundbild scheint durch
   ========================================================================== */

.mzb-section,
.mzb-section-sm,
.mzb-showcase,
.mzb-versions,
.mzb-steps,
.mzb-reviews,
.mzb-story-section,
.mzb-copyright-notice-section,
.mzb-no-preview-section {
    background: transparent !important;
    position: relative;
    z-index: 1;
}

/* Inline-Style Überschreibungen aus front-page.php */
.mzb-section[style*="background"],
section[style*="background:var(--mzb-white)"],
section[style*="background: var(--mzb-white)"] {
    background: transparent !important;
}

/* ==========================================================================
   HEADER — Pergament-Stil
   ========================================================================== */

.mzb-header {
    background: rgba(249, 243, 232, 0.96) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 20px rgba(100, 60, 20, 0.10) !important;
    border-bottom: 1px solid rgba(200, 151, 58, 0.20);
}

.mzb-nav a {
    color: var(--magic-text-dark) !important;
    font-family: 'Playfair Display', 'Georgia', serif;
}

.mzb-nav a:hover {
    color: var(--magic-gold) !important;
    background: rgba(200, 151, 58, 0.08) !important;
}

/* Header CTA Button — goldener Akzent */
.mzb-header-cta .mzb-btn-primary {
    background: linear-gradient(135deg, #C4A484 0%, #B09070 100%) !important;
    border-color: var(--magic-gold) !important;
    box-shadow: 0 4px 16px rgba(200, 151, 58, 0.40) !important;
    border-radius: 100px !important;
    font-family: 'Playfair Display', 'Georgia', serif !important;
    font-size: 1.425rem !important;
    padding: 0.9rem 2.25rem !important;
    letter-spacing: 0.3px;
}

.mzb-header-cta .mzb-btn-primary:hover {
    background: linear-gradient(135deg, #D4B898 0%, #C4A484 100%) !important;
    box-shadow: 0 6px 24px rgba(200, 151, 58, 0.55) !important;
}

/* ==========================================================================
   TYPOGRAFIE — Märchenbuch-Stil
   Alle Texte auf dem Waldhintergrund: schwarz, fett, faktor ×1.5 größer
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', 'Georgia', 'Times New Roman', serif !important;
    color: #000000 !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    line-height: 1.25 !important;
}

p, li, td, th, label, span:not(.mzb-badge):not(.mzb-faq-icon):not(.mzb-step-number) {
    color: #000000 !important;
    font-weight: 600 !important;
    line-height: 1.85 !important;
}

/* Basis-Schriftgrößen ×1.5 */
body {
    font-size: 1.05rem !important;
}

h1 { font-size: clamp(2.1rem, 4vw, 3.3rem) !important; }
h2 { font-size: clamp(1.65rem, 3vw, 2.55rem) !important; }
h3 { font-size: clamp(1.35rem, 2.5vw, 1.95rem) !important; }
h4 { font-size: clamp(1.1rem, 2vw, 1.5rem) !important; }
p, li { font-size: clamp(1rem, 1.6vw, 1.2rem) !important; }

/* Kleinere helper-Texte auch anheben */
small, .small, [style*="font-size:0.8"], [style*="font-size:0.9"],
[style*="font-size: 0.8"], [style*="font-size: 0.9"] {
    font-size: 1rem !important;
    color: #000000 !important;
    font-weight: 600 !important;
}

/* Buttons — Text schützen vor globalem Schwarz-Override */
.mzb-btn-primary,
.mzb-btn-primary p,
.mzb-btn-primary span,
.mzb-btn-secondary,
.mzb-btn-secondary p,
.mzb-btn-secondary span,
a.mzb-btn {
    color: inherit !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   LEGAL / CONTACT / ABOUT — Weiße Karten damit Texte immer lesbar
   ========================================================================== */

/* Rechtliche Seiten — Wrapper direkt targeten (keine body-class nötig) */
.mzb-legal-page {
    background: rgba(255, 252, 245, 0.96) !important;
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 2.5rem !important;
    max-width: 900px;
    margin: 2rem auto !important;
}

/* Rechtliche Texte — kompakte, gut lesbare Größe auf hellem Hintergrund */
.mzb-legal-page p,
.mzb-legal-page li,
.mzb-legal-page td,
.mzb-legal-page th {
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    color: #2A1A0A !important;
}

.mzb-legal-page h1 { font-size: 1.75rem !important; color: #1A0E06 !important; }
.mzb-legal-page h2 { font-size: 1.25rem !important; color: #1A0E06 !important; }
.mzb-legal-page h3 { font-size: 1.05rem !important; color: #1A0E06 !important; }

/* Kontakt-Seite */
.mzb-contact-grid {
    background: rgba(255, 252, 245, 0.96) !important;
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 2.5rem !important;
}

/* Über-uns-Seite — Sections mit weißem bg */
.mzb-about-hero + .mzb-section,
.page-template-page-ueber-uns .mzb-section {
    background: rgba(255, 252, 245, 0.96) !important;
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 3rem !important;
}

/* Vorlagen-Seite */
.page-template-page-geschichten-vorlagen .mzb-section,
.mzb-templates-hero + .mzb-section {
    background: rgba(255, 252, 245, 0.96) !important;
    backdrop-filter: blur(10px);
    border-radius: 16px;
}

/* Hero-Bereiche der Unterseiten — dunkler Streifen für weiße Überschriften */
.mzb-page-hero,
.mzb-about-hero,
.mzb-templates-hero,
.mzb-contact-hero {
    background: rgba(10, 6, 2, 0.50) !important;
    padding: 3rem 0 !important;
}

.mzb-page-hero h1,
.mzb-about-hero h1,
.mzb-templates-hero h1,
.mzb-contact-hero h1 {
    color: #FFFFFF !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}

.mzb-page-hero p,
.mzb-about-hero p,
.mzb-templates-hero p,
.mzb-contact-hero p {
    color: #F5E8C8 !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.6);
    font-weight: 600 !important;
}

/* Vorlagen Hinweis-Box inline-ol Texte */
.mzb-section ol li,
.mzb-section ol li * {
    color: #000000 !important;
    font-weight: 600 !important;
    font-size: clamp(1rem, 1.6vw, 1.2rem) !important;
}

/* Vorlagen Altersbereiche-Karten */
.mzb-age-group-header h3,
.mzb-age-group-header p,
.mzb-template-card h3,
.mzb-template-card p {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* Stats (500+ Familien etc.) */
.mzb-stat-number, .mzb-stat-label,
.mzb-about-stat, .mzb-about-stats * {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* Werte-Abschnittstitel auf der Über-uns-Seite schwarz
   (weißer Section-Hintergrund → .mzb-section-title erbt schwarz) */
.mzb-about-hero + .mzb-section .mzb-section-title h2,
.mzb-about-hero + .mzb-section .mzb-section-title p {
    color: #000000 !important;
}

.mzb-value-card h3,
.mzb-value-card p,
.mzb-values-grid * {
    color: #000000 !important;
    font-weight: 600 !important;
}

/* Über-uns Stats-Divs (inline-style Farben überschreiben) */
.mzb-section div[style*="color:var(--mzb-primary)"],
.mzb-section div[style*="color: var(--mzb-primary)"],
.mzb-section div[style*="color:var(--mzb-text"],
.mzb-section div[style*="color: var(--mzb-text"] {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   HERO SECTION — Das Herzstück
   ========================================================================== */

.mzb-hero {
    background: transparent !important;
    padding: 4rem 0 5rem !important;
    position: relative;
    overflow: hidden;
}

/* Goldene Partikel-Animation im Hero */
.mzb-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle 2px at 15% 25%, rgba(232, 192, 106, 0.7) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 28% 60%, rgba(232, 192, 106, 0.5) 0%, transparent 100%),
        radial-gradient(circle 2px at 42% 15%, rgba(255, 220, 140, 0.6) 0%, transparent 100%),
        radial-gradient(circle 1px at 55% 75%, rgba(232, 192, 106, 0.4) 0%, transparent 100%),
        radial-gradient(circle 2px at 70% 35%, rgba(255, 200, 80, 0.5) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 82% 20%, rgba(232, 192, 106, 0.6) 0%, transparent 100%),
        radial-gradient(circle 1px at 90% 65%, rgba(255, 220, 140, 0.4) 0%, transparent 100%),
        radial-gradient(circle 2px at 5% 50%, rgba(200, 151, 58, 0.4) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 35% 85%, rgba(232, 192, 106, 0.5) 0%, transparent 100%),
        radial-gradient(circle 2px at 60% 5%, rgba(255, 220, 120, 0.5) 0%, transparent 100%),
        radial-gradient(circle 1px at 75% 90%, rgba(232, 192, 106, 0.35) 0%, transparent 100%),
        radial-gradient(circle 2px at 20% 90%, rgba(200, 151, 58, 0.45) 0%, transparent 100%);
    pointer-events: none;
    animation: magic-particles 8s ease-in-out infinite alternate;
    z-index: 0;
}

/* Unterer Hero-Übergang — deaktiviert, kein Strich */
.mzb-hero::after {
    display: none;
    content: '';
    pointer-events: none;
}

@keyframes magic-particles {
    0%   { opacity: 0.4; transform: translateY(0px); }
    50%  { opacity: 0.8; transform: translateY(-6px); }
    100% { opacity: 0.5; transform: translateY(-12px); }
}

/* ── NEBEL-GLOW hinter dem Hero-Text ─────────────────────────────────────
   Organisch, kein Box, kein Rectangle — wie Licht durch Morgennebel
   ────────────────────────────────────────────────────────────────────── */
.mzb-hero-text {
    position: relative;
    z-index: 2;
}

.mzb-hero-text::before {
    content: '';
    position: absolute;
    /* Größer als der Text-Bereich, organisch überstehend */
    top: -60px;
    left: -80px;
    right: -40px;
    bottom: -60px;
    /* Mehrschichtige radiale Gradienten = organische Nebelform */
    background:
        radial-gradient(ellipse 75% 65% at 42% 48%,
            rgba(255, 230, 160, 0.22) 0%,
            rgba(255, 220, 140, 0.14) 35%,
            rgba(255, 210, 120, 0.06) 60%,
            transparent 100%
        ),
        radial-gradient(ellipse 55% 45% at 30% 55%,
            rgba(255, 240, 180, 0.16) 0%,
            rgba(255, 225, 150, 0.08) 50%,
            transparent 100%
        ),
        radial-gradient(ellipse 40% 55% at 60% 35%,
            rgba(255, 235, 170, 0.12) 0%,
            transparent 70%
        );
    filter: blur(38px);
    pointer-events: none;
    z-index: -1;
    /* Keine harten Kanten dank blur */
}

/* Hero Text — auf dunklem Foto-Hintergrund: alles weiß/gold */
.mzb-hero-text .badge {
    background: rgba(255, 220, 120, 0.18) !important;
    border: 1px solid rgba(255, 220, 120, 0.45) !important;
    color: rgba(255, 235, 180, 0.95) !important;
    font-family: 'Playfair Display', serif !important;
    font-style: italic;
    border-radius: 100px !important;
    padding: 0.5rem 1.25rem !important;
    font-size: 0.9rem !important;
    backdrop-filter: blur(6px);
}

.mzb-hero-text h1 {
    font-size: clamp(1.68rem, 3.024vw, 1.932rem) !important;
    color: rgba(255, 240, 210, 0.88) !important;
	font-style: italic; 
    font-weight: 700 !important;
    line-height: 1.18 !important;
    margin-bottom: 1.25rem !important;
    text-shadow:
        0 2px 16px rgba(0, 0, 0, 0.55),
        0 1px 4px rgba(0, 0, 0, 0.35);
}

.mzb-hero-text h1 span {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #FFFFFF !important;
    color: #FFFFFF !important;
    filter: none;
}

.mzb-hero-tagline {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45) !important;
}

/* Senkrechter Strich — komplett entfernt */
.mzb-hero-inner {
    position: relative;
}

.mzb-hero-inner::after {
    display: none;
}

.mzb-hero-text .subtitle {
    font-size: clamp(1.68rem, 3.024vw, 1.932rem) !important;
    color: rgba(255, 240, 210, 0.88) !important;
    line-height: 1.18 !important;
    font-style: italic !important;
    font-weight: 700 !important;
    margin-bottom: 1.25rem !important;
    text-shadow:
        0 2px 16px rgba(0, 0, 0, 0.55),
        0 1px 4px rgba(0, 0, 0, 0.35);
}

.mzb-hero-proof span {
    color: #FFF0D2 !important;
    font-size: clamp(1rem, 1.5vw, 1.15rem) !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.40);
}

/* Hero CTA Button */
.mzb-hero-ctas .mzb-btn-primary {
    background: linear-gradient(135deg, var(--magic-gold) 0%, #9A6820 100%) !important;
    border: none !important;
    border-radius: 100px !important;
    box-shadow: 0 6px 28px rgba(200, 151, 58, 0.45), 0 2px 8px rgba(100, 60, 20, 0.20) !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 1.05rem !important;
    padding: 0.9rem 2.2rem !important;
    min-height: 52px !important;
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
}

.mzb-hero-ctas .mzb-btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 230, 150, 0.3) 0%, transparent 60%);
    border-radius: inherit;
}

.mzb-hero-ctas .mzb-btn-primary:hover {
    background: linear-gradient(135deg, #D4A84A 0%, var(--magic-gold) 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 40px rgba(200, 151, 58, 0.55), 0 4px 12px rgba(100, 60, 20, 0.25) !important;
}

.mzb-hero-ctas .mzb-btn-secondary {
    border-color: rgba(200, 151, 58, 0.50) !important;
    color: var(--magic-brown) !important;
    background: rgba(249, 243, 232, 0.6) !important;
    border-radius: 100px !important;
    font-family: 'Playfair Display', serif !important;
    backdrop-filter: blur(4px);
}

.mzb-hero-ctas .mzb-btn-secondary:hover {
    background: rgba(200, 151, 58, 0.15) !important;
    color: var(--magic-brown) !important;
    border-color: var(--magic-gold) !important;
    transform: translateY(-2px) !important;
}

.mzb-hero-proof span {
    color: #FFF0D2 !important;
    font-size: clamp(1rem, 1.5vw, 1.15rem) !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.40);
}

/* Hero Buch — goldener Glow */
.mzb-hero-book-3d {
    filter: drop-shadow(0 20px 50px rgba(200, 151, 58, 0.35)) drop-shadow(0 8px 20px rgba(100, 60, 20, 0.20));
    max-width: 450px !important;
}

.mzb-video-book--hero {
    max-width: 450px !important;
}

.mzb-float-badge {
    background: rgba(249, 243, 232, 0.92) !important;
    border: 1px solid rgba(200, 151, 58, 0.30) !important;
    color: var(--magic-text-dark) !important;
    backdrop-filter: blur(8px);
    border-radius: 100px !important;
    box-shadow: 0 4px 16px rgba(100, 60, 20, 0.12) !important;
}

/* Schwebende Animation für Hero-Buch */
.mzb-hero-image {
    animation: hero-float 6s ease-in-out infinite;
}

@keyframes hero-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-12px); }
}

/* ==========================================================================
   DATENSCHUTZ-HINWEIS (kompakt)
   ========================================================================== */

/* Datenschutz-Hinweis — kein Banner, fließt natürlich in die Seite */
.mzb-no-preview-section {
    background: transparent !important;
    border: none !important;
    padding: 1rem 0 !important;
}

.mzb-no-preview-box {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.mzb-no-preview-section h3,
.mzb-no-preview-content h3 {
    color: #FFF0D2 !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 700 !important;
    font-size: clamp(1.2rem, 2vw, 1.5rem) !important;
}

.mzb-no-preview-content p {
    color: #FFF0D2 !important;
    font-weight: 600 !important;
    font-size: clamp(1rem, 1.6vw, 1.2rem) !important;
}

.mzb-no-preview-content a {
    color: #FFF0D2 !important;
    font-weight: 700 !important;
    font-size: clamp(1rem, 1.6vw, 1.2rem) !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   SHOWCASE — Buch-Galerie (Polaroid-Stil)
   ========================================================================== */

.mzb-showcase {
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(232, 192, 106, 0.12) 0%, transparent 70%),
        rgba(249, 243, 232, 0.5) !important;
    position: relative;
}

.mzb-section-title h2 {
    color: #6B4226 !important;
    font-family: 'Playfair Display', 'Georgia', serif !important;
    font-weight: 700 !important;
    font-size: clamp(1.65rem, 3vw, 2.55rem) !important;
}

.mzb-section-title p {
    color: #6B4226 !important;
    font-weight: 700 !important;
    font-style: italic;
    font-size: clamp(1.05rem, 1.8vw, 1.3rem) !important;
}

/* Schwebende Animation — identisch mit hero-float */
@keyframes book-float-1 { 0%, 100% { transform: translateY(0px);  } 50% { transform: translateY(-10px); } }
@keyframes book-float-2 { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(-13px); } }
@keyframes book-float-3 { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(-11px); } }
@keyframes book-float-4 { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(-14px); } }

/* Buch-Karten als Polaroid */
.mzb-book-grid-item {
    background: rgba(251, 246, 237, 0.75) !important;
    backdrop-filter: blur(4px);
    border: none !important;
    border-radius: 4px !important;
    box-shadow:
        0 4px 16px rgba(100, 60, 20, 0.14),
        0 1px 4px rgba(100, 60, 20, 0.08),
        inset 0 0 0 1px rgba(200, 151, 58, 0.12) !important;
    padding: 12px 12px 28px !important;
    transition: box-shadow 0.4s ease !important;
    position: relative;
    transform: scale(0.9);
    transform-origin: top center;
}

.mzb-book-grid-item .mzb-book-3d-wrap {
    will-change: transform;
}

/* Floating-Animation auf dem inneren Wrap (nicht Grid-Item) damit Grid-Layout nicht stört */
.mzb-book-grid-item:nth-child(1) .mzb-book-3d-wrap { animation: book-float-1 6.0s ease-in-out infinite; animation-delay:  0.0s; }
.mzb-book-grid-item:nth-child(2) .mzb-book-3d-wrap { animation: book-float-2 7.2s ease-in-out infinite; animation-delay: -1.8s; }
.mzb-book-grid-item:nth-child(3) .mzb-book-3d-wrap { animation: book-float-3 5.6s ease-in-out infinite; animation-delay: -3.2s; }
.mzb-book-grid-item:nth-child(4) .mzb-book-3d-wrap { animation: book-float-4 6.8s ease-in-out infinite; animation-delay: -0.9s; }
.mzb-book-grid-item:nth-child(5) .mzb-book-3d-wrap { animation: book-float-2 6.4s ease-in-out infinite; animation-delay: -2.5s; }
.mzb-book-grid-item:nth-child(6) .mzb-book-3d-wrap { animation: book-float-1 7.0s ease-in-out infinite; animation-delay: -4.1s; }
.mzb-book-grid-item:nth-child(7) .mzb-book-3d-wrap { animation: book-float-4 5.8s ease-in-out infinite; animation-delay: -1.3s; }
.mzb-book-grid-item:nth-child(8) .mzb-book-3d-wrap { animation: book-float-3 6.6s ease-in-out infinite; animation-delay: -3.7s; }

/* Beim Hover: Animation pausieren + stärkerer Schatten */
.mzb-book-grid-item:hover {
    animation-play-state: paused !important;
    box-shadow:
        0 20px 50px rgba(100, 60, 20, 0.24),
        0 6px 16px rgba(100, 60, 20, 0.14) !important;
}

.mzb-book-grid-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(200, 151, 58, 0.25), transparent);
    border-radius: 0 0 4px 4px;
}

.mzb-book-grid-item:hover {
    transform: translateY(-10px) !important;
    box-shadow:
        0 20px 48px rgba(100, 60, 20, 0.22),
        0 6px 16px rgba(100, 60, 20, 0.12) !important;
}

.book-label {
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    color: var(--magic-text-soft) !important;
    background: transparent !important;
    border: none !important;
    font-size: 0.82rem !important;
}

/* ==========================================================================
   VERSIONEN — Produkt-Karten (storybook-style)
   ========================================================================== */

.mzb-versions {
    background:
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(45, 74, 62, 0.06) 0%, transparent 70%),
        linear-gradient(180deg, var(--magic-cream) 0%, #F4EAD4 100%) !important;
}

.mzb-version-card {
    background: rgba(255, 253, 247, 0.65) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(200, 151, 58, 0.20) !important;
    border-radius: var(--magic-radius-lg) !important;
    box-shadow: 0 4px 24px rgba(100, 60, 20, 0.08) !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease !important;
    overflow: hidden;
    position: relative;
}

.mzb-version-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(200, 151, 58, 0.50), transparent);
}

.mzb-version-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 48px rgba(100, 60, 20, 0.16), var(--magic-shadow-gold) !important;
}

.mzb-version-card.featured {
    background: rgba(251, 247, 238, 0.60) !important;
    backdrop-filter: blur(8px);
    border: 1.5px solid rgba(200, 151, 58, 0.45) !important;
    box-shadow: 0 8px 40px rgba(200, 151, 58, 0.20), 0 4px 16px rgba(100, 60, 20, 0.12) !important;
}

.mzb-version-card.featured::before {
    background: linear-gradient(90deg, transparent, var(--magic-gold), transparent);
    height: 4px;
}

.badge-popular,
.mzb-version-card .badge-popular {
    background: linear-gradient(135deg, var(--magic-gold), #9A6820) !important;
    color: #FFF8E7 !important;
    font-family: 'Playfair Display', serif !important;
    font-style: italic;
    border-radius: 100px !important;
    box-shadow: 0 4px 16px rgba(200, 151, 58, 0.40) !important;
    /* Tiefer positionieren damit es nicht abgeschnitten wird */
    top: 0.6rem !important;
    font-size: 0.72rem !important;
    padding: 0.25rem 0.85rem !important;
    white-space: nowrap !important;
}

.mzb-version-card h3 {
    font-family: 'Playfair Display', serif !important;
    color: var(--magic-text-dark) !important;
}

.mzb-version-card p,
.mzb-version-card .version-desc {
    color: var(--magic-text-soft) !important;
    font-style: italic;
    line-height: 1.75 !important;
}

.mzb-version-features li {
    color: var(--magic-text-mid) !important;
}

.mzb-version-features li::before {
    color: var(--magic-gold) !important;
}

.mzb-price-main {
    color: var(--magic-text-dark) !important;
}

.mzb-version-card .mzb-btn-primary {
    background: linear-gradient(135deg, var(--magic-gold) 0%, #9A6820 100%) !important;
    border: none !important;
    border-radius: 100px !important;
    box-shadow: 0 4px 20px rgba(200, 151, 58, 0.40) !important;
    font-family: 'Playfair Display', serif !important;
}

.mzb-version-card .mzb-btn-secondary {
    border-color: rgba(200, 151, 58, 0.45) !important;
    color: var(--magic-brown) !important;
    border-radius: 100px !important;
    font-family: 'Playfair Display', serif !important;
}

.mzb-version-card .mzb-btn-secondary:hover {
    background: rgba(200, 151, 58, 0.12) !important;
    color: var(--magic-brown) !important;
}

/* ==========================================================================
   SCHRITTE — So funktioniert's
   ========================================================================== */

.mzb-steps {
    background:
        linear-gradient(180deg, #F4EAD4 0%, var(--magic-cream) 100%) !important;
    position: relative;
}

.mzb-step-number {
    background: linear-gradient(135deg, var(--magic-gold) 0%, #9A6820 100%) !important;
    color: #FFF8E7 !important;
    box-shadow: 0 4px 16px rgba(200, 151, 58, 0.40) !important;
    font-family: 'Playfair Display', serif !important;
    font-style: italic;
}

.mzb-step h3 {
    color: #000000 !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 700 !important;
}

.mzb-step p {
    color: #000000 !important;
    font-weight: 600 !important;
    font-style: italic;
}

.mzb-step-img-icon {
    filter: drop-shadow(0 8px 20px rgba(200, 151, 58, 0.30));
    transition: transform 0.4s ease, filter 0.4s ease;
}

.mzb-step:hover .mzb-step-img-icon {
    transform: translateY(-6px) scale(1.04);
    filter: drop-shadow(0 14px 30px rgba(200, 151, 58, 0.45));
}

/* Verbindungslinie zwischen Schritten */
.mzb-steps-grid {
    position: relative;
}

.mzb-steps-grid::before {
    content: '';
    position: absolute;
    top: 80px;
    left: calc(16.66% + 80px);
    right: calc(16.66% + 80px);
    height: 2px;
    background: linear-gradient(90deg, rgba(200, 151, 58, 0.15), rgba(200, 151, 58, 0.50), rgba(200, 151, 58, 0.15));
    pointer-events: none;
}

@media (max-width: 768px) {
    .mzb-steps-grid::before { display: none; }
}

.mzb-steps .mzb-btn-primary {
    background: linear-gradient(135deg, var(--magic-gold) 0%, #9A6820 100%) !important;
    border: none !important;
    border-radius: 100px !important;
    box-shadow: 0 6px 28px rgba(200, 151, 58, 0.45) !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 1.1rem !important;
    padding: 1rem 2.5rem !important;
}

/* ==========================================================================
   DATENSCHUTZ-SEKTION
   ========================================================================== */

.mzb-section[aria-labelledby="privacy-section-title"] {
    background:
        radial-gradient(ellipse 70% 50% at 50% 50%, rgba(45, 74, 62, 0.06) 0%, transparent 70%),
        linear-gradient(180deg, var(--magic-cream) 0%, #EEE4CC 100%) !important;
}

.mzb-embedding-visual {
    background: #FFFFFF !important;
    border: 1px solid rgba(180, 140, 90, 0.30) !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    border-radius: var(--magic-radius) !important;
}

.mzb-embedding-header {
    border-bottom: 1px solid rgba(200, 151, 58, 0.15) !important;
}

/* .mzb-embedding-title color: siehe finale Regeln am Ende */

.mzb-privacy-statement {
    background: rgba(255, 253, 247, 0.65) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(200, 151, 58, 0.20) !important;
    border-radius: var(--magic-radius) !important;
    box-shadow: 0 4px 20px rgba(100, 60, 20, 0.08) !important;
}

.mzb-privacy-statement h4 {
    color: #1A0E06 !important;
}

.mzb-privacy-statement p,
.mzb-privacy-statement li,
.mzb-privacy-statement span:not(.check) {
    color: #2A1A0A !important;
}

.mzb-privacy-check-list .check {
    color: var(--magic-gold) !important;
}

.mzb-privacy-card h4 {
    color: #1A0E06 !important;
}

.mzb-privacy-card p {
    color: #2A1A0A !important;
}

.mzb-privacy-card {
    background: rgba(255, 253, 247, 0.60) !important;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(200, 151, 58, 0.18) !important;
    border-radius: var(--magic-radius) !important;
    box-shadow: 0 2px 12px rgba(100, 60, 20, 0.07) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.mzb-privacy-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 28px rgba(100, 60, 20, 0.14) !important;
}

.mzb-privacy-card h4 {
    color: #1A0E06 !important;
    font-family: 'Playfair Display', serif !important;
}

/* ==========================================================================
   BEWERTUNGEN — Emotionale Testimonials
   ========================================================================== */

.mzb-reviews {
    background:
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(200, 151, 58, 0.10) 0%, transparent 70%),
        linear-gradient(180deg, #EEE4CC 0%, var(--magic-cream) 100%) !important;
    position: relative;
}

/* Subtiles ornamentales Trennzeichen oben */
.mzb-reviews::before {
    content: '✦  ✦  ✦';
    display: block;
    text-align: center;
    color: rgba(200, 151, 58, 0.50);
    font-size: 1.2rem;
    letter-spacing: 1.5rem;
    margin-bottom: 3rem;
    padding-top: 1rem;
}

.mzb-review-card {
    background: rgba(255, 253, 248, 0.65) !important;
    backdrop-filter: blur(6px);
    border: none !important;
    border-radius: var(--magic-radius-lg) !important;
    box-shadow:
        0 4px 24px rgba(100, 60, 20, 0.10),
        inset 0 0 0 1px rgba(200, 151, 58, 0.12) !important;
    padding: 2rem !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease !important;
    position: relative;
    overflow: visible;
}

/* Anführungszeichen-Dekor */
.mzb-review-card::before {
    content: '\201C';
    position: absolute;
    top: -10px;
    left: 20px;
    font-size: 5rem;
    font-family: 'Playfair Display', Georgia, serif;
    color: rgba(200, 151, 58, 0.20);
    line-height: 1;
    pointer-events: none;
}

.mzb-review-card:hover {
    transform: translateY(-6px) !important;
    box-shadow:
        0 12px 40px rgba(100, 60, 20, 0.16),
        inset 0 0 0 1px rgba(200, 151, 58, 0.22) !important;
}

.mzb-review-stars {
    color: var(--magic-gold) !important;
    font-size: 1.1rem;
    letter-spacing: 2px;
}

.mzb-review-text {
    color: var(--magic-text-mid) !important;
    font-style: italic !important;
    line-height: 1.85 !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 1rem !important;
}

.mzb-reviewer-avatar {
    background: linear-gradient(135deg, var(--magic-gold) 0%, #9A6820 100%) !important;
    color: #FFF8E7 !important;
    box-shadow: 0 4px 12px rgba(200, 151, 58, 0.35) !important;
    font-family: 'Playfair Display', serif !important;
}

.mzb-reviewer-info strong {
    color: var(--magic-text-dark) !important;
    font-family: 'Playfair Display', serif !important;
}

.mzb-reviewer-info span {
    color: var(--magic-text-soft) !important;
    font-style: italic;
}

/* ==========================================================================
   URHEBERRECHT-HINWEIS
   ========================================================================== */

.mzb-copyright-notice-section {
    background:
        linear-gradient(135deg, rgba(45, 74, 62, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, var(--magic-cream) 0%, #EFE6CF 100%) !important;
}

.mzb-copyright-notice-box {
    background: rgba(255, 253, 247, 0.60) !important;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(200, 151, 58, 0.20) !important;
    border-radius: var(--magic-radius-lg) !important;
    box-shadow: 0 4px 24px rgba(100, 60, 20, 0.10) !important;
}

.mzb-copyright-notice-section h3 {
    color: var(--magic-text-dark) !important;
}

.mzb-copyright-notice-section .mzb-btn-secondary {
    border-color: rgba(200, 151, 58, 0.45) !important;
    color: var(--magic-brown) !important;
    border-radius: 100px !important;
    font-family: 'Playfair Display', serif !important;
}

/* ==========================================================================
   FINALER CTA
   ========================================================================== */

.mzb-section[aria-labelledby="final-cta-title"] {
    background:
        radial-gradient(ellipse 70% 60% at 50% 50%, rgba(232, 192, 106, 0.18) 0%, transparent 70%),
        linear-gradient(160deg, #EFE6CF 0%, #F9F3E8 50%, #EFE6CF 100%) !important;
    position: relative;
    overflow: hidden;
}

/* Goldener Schimmer-Effekt */
.mzb-section[aria-labelledby="final-cta-title"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(200, 151, 58, 0.12) 0%, transparent 65%);
    pointer-events: none;
    animation: cta-glow 4s ease-in-out infinite alternate;
}

@keyframes cta-glow {
    0%   { opacity: 0.5; transform: translate(-50%, -50%) scale(0.95); }
    100% { opacity: 1.0; transform: translate(-50%, -50%) scale(1.05); }
}

.mzb-emotional-text {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    color: var(--magic-text-dark) !important;
    font-style: italic !important;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 12px rgba(200, 151, 58, 0.15);
}

.mzb-final-cta-intro {
    color: var(--magic-text-mid) !important;
    font-style: italic !important;
    line-height: 1.85 !important;
}

.mzb-section[aria-labelledby="final-cta-title"] .mzb-btn-primary {
    background: linear-gradient(135deg, var(--magic-gold) 0%, #9A6820 100%) !important;
    border: none !important;
    border-radius: 100px !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 1.15rem !important;
    padding: 1.1rem 3rem !important;
    box-shadow: 0 8px 36px rgba(200, 151, 58, 0.50), 0 4px 14px rgba(100, 60, 20, 0.22) !important;
    position: relative;
    overflow: hidden;
}

.mzb-section[aria-labelledby="final-cta-title"] .mzb-btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 235, 160, 0.25) 0%, transparent 55%);
    border-radius: inherit;
    pointer-events: none;
}

.mzb-section[aria-labelledby="final-cta-title"] .mzb-btn-primary:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 50px rgba(200, 151, 58, 0.60), 0 6px 20px rgba(100, 60, 20, 0.28) !important;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.mzb-footer {
    background: rgba(180, 140, 90, 0.40) !important;
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(200, 151, 58, 0.4);
    position: relative;
    z-index: 2;
}

.mzb-footer::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, rgba(200, 151, 58, 0.70) 40%, rgba(200, 151, 58, 0.70) 60%, transparent 100%);
}

.mzb-footer-bottom {
    border-top: 1px solid rgba(200, 151, 58, 0.18) !important;
}

/* Footer Text — klar lesbar, #FFF0D2, ×1.5 größer */
.mzb-footer h4 {
    color: #FFF0D2 !important;
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(1.2rem, 2vw, 1.5rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
}

.mzb-footer p,
.mzb-footer-brand p {
    color: #FFF0D2 !important;
    font-size: clamp(1rem, 1.6vw, 1.2rem) !important;
    font-weight: 500 !important;
}

.mzb-footer ul li,
.mzb-footer ul a {
    color: #FFF0D2 !important;
    font-size: clamp(1rem, 1.6vw, 1.2rem) !important;
    font-weight: 500 !important;
}

.mzb-footer ul a:hover {
    color: #FFFFFF !important;
}

.mzb-footer-bottom,
.mzb-footer-bottom a,
.mzb-footer-bottom p,
.mzb-footer-bottom span {
    color: #FFF0D2 !important;
    font-size: clamp(0.9rem, 1.4vw, 1.05rem) !important;
}

.mzb-trust-badge {
    font-size: clamp(1rem, 1.6vw, 1.2rem) !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   ALLGEMEINE BUTTONS (global)
   ========================================================================== */

.mzb-btn-primary {
    background: linear-gradient(135deg, var(--magic-gold) 0%, #9A6820 100%) !important;
    border-color: var(--magic-gold) !important;
    font-family: 'Playfair Display', serif !important;
    border-radius: 100px !important;
}

.mzb-btn-secondary {
    color: var(--magic-brown) !important;
    border-color: rgba(200, 151, 58, 0.45) !important;
    font-family: 'Playfair Display', serif !important;
    border-radius: 100px !important;
}

/* ==========================================================================
   SEKTIONS-TRENNUNGEN — sanfte Wellenlinien
   ========================================================================== */

.mzb-section + .mzb-section,
.mzb-section-sm + .mzb-section {
    border-top: 1px solid rgba(200, 151, 58, 0.10);
}

/* ==========================================================================
   SCROLL-REVEAL — Sanftes Einblenden
   ========================================================================== */

.mzb-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.mzb-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   LOGO — passend zum neuen Stil
   ========================================================================== */

.mzb-logo {
    border-color: rgba(200, 151, 58, 0.35) !important;
    background: rgba(249, 243, 232, 0.95) !important;
    box-shadow: 0 4px 14px rgba(200, 151, 58, 0.20), 0 1px 3px rgba(0,0,0,0.06) !important;
    background-image: linear-gradient(115deg, #C8973A 0%, #A06820 40%, #8B5E3C 70%, #C8973A 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-style: italic;
}

.mzb-footer-brand .mzb-logo {
    font-size: 3.15rem !important;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #5C3A1E !important;
    color: #5C3A1E !important;
    border-color: rgba(139, 94, 60, 0.6) !important;
    box-shadow: 0 4px 14px rgba(92, 58, 30, 0.25), 0 1px 3px rgba(0,0,0,0.10) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.mzb-footer-brand .mzb-logo span {
    -webkit-text-fill-color: #A06820 !important;
    color: #A06820 !important;
}

.mzb-footer-brand .mzb-logo:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(200, 151, 58, 0.45), 0 2px 5px rgba(0,0,0,0.12) !important;
}

.mzb-footer-brand .mzb-logo:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(200, 151, 58, 0.45), 0 2px 5px rgba(0,0,0,0.12) !important;
}

/* ==========================================================================
   MOBILE ANPASSUNGEN
   ========================================================================== */

@media (max-width: 768px) {
    .mzb-hero {
        padding: 3rem 0 4rem !important;
    }

    .mzb-hero::after {
        height: 50px;
    }

    .mzb-hero-image {
        animation-duration: 8s;
    }

    .mzb-review-card::before {
        font-size: 3.5rem;
    }

    .mzb-reviews::before {
        letter-spacing: 0.8rem;
        font-size: 1rem;
    }
}

/* ==========================================================================
   HERO EMOTIONALER UNTERTITEL (neue Klasse für PHP-Ergänzung)
   ========================================================================== */

.mzb-hero-tagline {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--magic-text-soft);
    font-style: italic;
    font-weight: 400;
    margin-bottom: 0.75rem;
    opacity: 0.85;
    line-height: 1.4;
}

/* ==========================================================================
   STORYTELLING-SEKTION (neu einzufügen)
   ========================================================================== */

.mzb-story-section {
    background:
        radial-gradient(ellipse 80% 60% at 20% 50%, rgba(45, 74, 62, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 50%, rgba(200, 151, 58, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, #F4EAD4 0%, #F9F3E8 100%);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.mzb-story-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle 1.5px at 8% 30%, rgba(200, 151, 58, 0.5) 0%, transparent 100%),
        radial-gradient(circle 1px at 20% 70%, rgba(200, 151, 58, 0.35) 0%, transparent 100%),
        radial-gradient(circle 2px at 75% 25%, rgba(200, 151, 58, 0.4) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 90% 65%, rgba(200, 151, 58, 0.45) 0%, transparent 100%),
        radial-gradient(circle 1px at 50% 10%, rgba(255, 220, 120, 0.4) 0%, transparent 100%);
    pointer-events: none;
    animation: magic-particles 10s ease-in-out infinite alternate;
}

.mzb-story-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 5rem;
    align-items: center;
}

.mzb-story-text h2 {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: clamp(2rem, 3.5vw, 3rem) !important;
    color: #FFF0D2 !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin-bottom: 1.5rem !important;
}

.mzb-story-text p {
    font-style: italic;
    color: #FFF0D2 !important;
    font-weight: 700 !important;
    font-size: clamp(1.1rem, 1.8vw, 1.35rem) !important;
    line-height: 1.9 !important;
    margin-bottom: 1.25rem;
}

.mzb-story-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    position: relative;
}

.mzb-story-photo-frame {
    background: #FBF6ED;
    padding: 10px 10px 28px;
    box-shadow: 0 6px 24px rgba(100, 60, 20, 0.16), 0 2px 6px rgba(100, 60, 20, 0.10);
    border-radius: 3px;
    position: relative;
    transition: transform 0.4s ease;
}

.mzb-story-photo-frame:nth-child(1) { transform: rotate(-2deg); }
.mzb-story-photo-frame:nth-child(2) { transform: rotate(1.5deg) translateY(10px); }
.mzb-story-photo-frame:nth-child(3) { transform: rotate(1deg) translateY(-5px); }
.mzb-story-photo-frame:nth-child(4) { transform: rotate(-1.5deg) translateY(8px); }

.mzb-story-photo-frame:hover {
    transform: rotate(0deg) translateY(-6px) scale(1.04) !important;
    box-shadow: 0 14px 40px rgba(100, 60, 20, 0.24) !important;
    z-index: 2;
}

.mzb-story-photo-inner {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 1px;
    overflow: hidden;
    background: var(--magic-cream-deep);
}

.mzb-story-photo-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mzb-story-photo-caption {
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: 'Caveat', cursive;
    font-size: 0.85rem;
    color: var(--magic-text-soft);
}

/* Fallback wenn keine Bilder: Gradient-Platzhalter */
.mzb-story-photo-placeholder {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}

.mzb-story-photo-placeholder.p1 {
    background: linear-gradient(160deg, #F5D9B0 0%, #E8BA7A 100%);
}
.mzb-story-photo-placeholder.p2 {
    background: linear-gradient(160deg, #D4E8D0 0%, #A8D4A0 100%);
}
.mzb-story-photo-placeholder.p3 {
    background: linear-gradient(160deg, #D0DCEE 0%, #A0B8D8 100%);
}
.mzb-story-photo-placeholder.p4 {
    background: linear-gradient(160deg, #EED4CC 0%, #D8A090 100%);
}

@media (max-width: 768px) {
    .mzb-story-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .mzb-story-photos {
        max-width: 100%;
        margin: 0 auto;
    }
}

/* ==========================================================================
   FAQ-SEITE — Texte schwarz, größer
   ========================================================================== */

.mzb-faq-item {
    background: rgba(255, 252, 245, 0.92) !important;
    backdrop-filter: blur(6px);
    border-radius: 12px;
    margin-bottom: 0.75rem !important;
}

.mzb-faq-question {
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: clamp(1rem, 1.8vw, 1.2rem) !important;
}

.mzb-faq-answer p,
.mzb-faq-answer li,
.mzb-faq-answer-inner p,
.mzb-faq-answer-inner li {
    color: #000000 !important;
    font-weight: 600 !important;
    font-size: clamp(1rem, 1.6vw, 1.15rem) !important;
}

/* FAQ Urheberrecht-Box — nur der Header-Bereich (erste div, kein FAQ-Item) */
#urheberrecht > div:first-child h2 {
    color: #FFF0D2 !important;
    font-weight: 700 !important;
    font-size: clamp(1.5rem, 2.5vw, 1.9rem) !important;
}

#urheberrecht > div:first-child p {
    color: #FFF0D2 !important;
    font-weight: 600 !important;
    font-size: clamp(1rem, 1.6vw, 1.2rem) !important;
}

/* FAQ-Antworten im Urheberrecht-Bereich → dunkel (heller Kartenhintergrund) */
#urheberrecht .mzb-faq-answer-inner p,
#urheberrecht .mzb-faq-answer-inner li,
#urheberrecht .mzb-faq-answer-inner strong,
#urheberrecht .mzb-faq-answer-inner h4 {
    color: #1A0E06 !important;
}

/* FAQ Seiten-Hero */
.mzb-faq-hero,
.page-template-page-faq .mzb-page-hero {
    background: rgba(10, 6, 2, 0.50) !important;
}

.mzb-faq-hero h1,
.page-template-page-faq .mzb-page-hero h1 {
    color: #FFFFFF !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}

/* FAQ Kategorien-Container */
.mzb-faq-section,
.mzb-faq-container {
    background: rgba(255, 252, 245, 0.88) !important;
    backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 2rem !important;
}

/* ==========================================================================
   BUCH-ERSTELLEN-SEITE — Texte schwarz
   ========================================================================== */

.mzb-configurator-hero h1,
.mzb-step-title,
.mzb-config-step h2,
.mzb-config-step h3 {
    color: #000000 !important;
    font-weight: 700 !important;
}

.mzb-configurator-hero p,
.mzb-config-step p,
.mzb-config-step label,
.mzb-format-card h3,
.mzb-format-card p {
    color: #000000 !important;
    font-weight: 600 !important;
    font-size: clamp(1rem, 1.6vw, 1.15rem) !important;
}

/* ==========================================================================
   VORLAGEN-SEITE — Altersgruppen-Karten schwarz
   ========================================================================== */

.mzb-age-group-section {
    background: rgba(255, 252, 245, 0.92) !important;
    backdrop-filter: blur(6px);
    border-radius: 16px;
    padding: 2rem !important;
    margin-bottom: 2rem !important;
}

.mzb-age-group-header,
.mzb-template-card {
    background: rgba(255, 252, 245, 0.95) !important;
}

.mzb-age-group-header h2,
.mzb-age-group-header h3,
.mzb-age-group-header p,
.mzb-template-card h3,
.mzb-template-card p,
.mzb-template-card strong,
.mzb-template-number {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* Vorlagen Hinweis-Box h3 */
.mzb-section h3[style],
.mzb-section h3 {
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: clamp(1.2rem, 2vw, 1.5rem) !important;
}

/* ==========================================================================
   GLOBALE LINKS AUF TRANSPARENTEN HINTERGRÜNDEN
   ========================================================================== */

.mzb-section a:not(.mzb-btn),
.mzb-showcase a:not(.mzb-btn) {
    color: #7A4A10 !important;
    font-weight: 700 !important;
}

.mzb-section a:not(.mzb-btn):hover {
    color: #000000 !important;
}

/* ==========================================================================
   STEPS / WIE ES FUNKTIONIERT — Abschnittstitel + Schritt-Texte schwarz
   ========================================================================== */

/* Abschnittstitel "In 3 Schritten zum Zauberbuch" */
.mzb-steps .mzb-section-title h2,
.mzb-steps .mzb-section-title p {
    color: #000000 !important;
}

.mzb-step-card h3,
.mzb-step-card p,
.mzb-steps-grid p,
.mzb-steps-grid h3 {
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: clamp(1rem, 1.6vw, 1.2rem) !important;
}

/* ==========================================================================
   BEWERTUNGEN / REVIEWS — Abschnittstitel + Karten schwarz
   ========================================================================== */

/* Abschnittstitel "Was Familien über EloriaTale sagen …" */
.mzb-reviews .mzb-section-title h2,
.mzb-reviews .mzb-section-title p {
    color: #000000 !important;
}

.mzb-review-card p,
.mzb-review-card span,
.mzb-review-card strong,
.mzb-review-author {
    color: #000000 !important;
    font-weight: 600 !important;
    font-size: clamp(1rem, 1.5vw, 1.1rem) !important;
}

/* ==========================================================================
   HERO — Texte HELL (weiß/gold) auf dunklem Hintergrund — OVERRIDE
   Muss nach den globalen Regeln stehen
   ========================================================================== */

.mzb-hero h1,
.mzb-hero-text h1 {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 16px rgba(0,0,0,0.6), 0 0 40px rgba(200,151,58,0.4) !important;
}

.mzb-hero-tagline {
    font-size: clamp(1.4rem, 2.52vw, 1.61rem) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-style: italic !important;
    font-weight: 700 !important;
    line-height: 1.8 !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45) !important;
}

.mzb-hero-subtitle,
.mzb-hero-text p {
    color: #F0E8D0 !important;
	font-style: italic; 
    font-weight: 500 !important;
}

/* ==========================================================================
   FINALE TEXTFARBEN — einmalig, keine Duplikate
   ========================================================================== */

/* ================================================================
   DUNKLER HINTERGRUND (Waldbild/Footer) → HELLE SCHRIFT
   ================================================================ */

/* Hero-Badges oben (DSGVO-konform · Made in Germany) */
.mzb-hero-proof,
.mzb-hero-proof span,
.mzb-hero-proof * {
    color: #FFF0D2 !important;
    -webkit-text-fill-color: #FFF0D2 !important;
}

/* Footer komplett — alle Trust-Badges + Footer-Bottom-Text */
.mzb-trust-badge,
.mzb-trust-badges span,
.mzb-trust-badges * {
    color: #FFF0D2 !important;
}

.mzb-footer-bottom,
.mzb-footer-bottom *  {
    color: #FFF0D2 !important;
}

/* Story-Sektion (transparenter Hintergrund = Waldbild) */
.mzb-story-text h2,
.mzb-story-text p {
    color: #FFF0D2 !important;
}

/* Datenschutz-Box (transparenter Hintergrund = Waldbild) */
.mzb-no-preview-section h3,
.mzb-no-preview-content h3 {
    color: #FFFFFF !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.6) !important;
}
.mzb-no-preview-content p,
.mzb-no-preview-content strong,
.mzb-no-preview-content a {
    color: #FFFFFF !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
}

/* FAQ Urheberrecht-Box + dunkler Hintergrund */
#urheberrecht > div:first-child {
    background: rgba(20, 12, 4, 0.75) !important;
    border-color: rgba(255, 240, 210, 0.25) !important;
    backdrop-filter: blur(6px);
}

#urheberrecht h2,
#urheberrecht p {
    color: #FFFFFF !important;
}

/* ================================================================
   HELLER HINTERGRUND (Creme/Weiß) → DUNKLE SCHRIFT
   ================================================================ */

/* Showcase: helles Cream-Hintergrund */
.mzb-showcase .mzb-section-title h2,
.mzb-showcase .mzb-section-title p {
    color: #6B4226 !important;
}

/* Versionen: helles Cream-Hintergrund */
.mzb-versions .mzb-section-title h2,
.mzb-versions .mzb-section-title p {
    color: #6B4226 !important;
}

/* Datenschutz-Abschnitt (Maximaler Datenschutz): heller Hintergrund */
[aria-labelledby="privacy-section-title"] .mzb-section-title h2,
[aria-labelledby="privacy-section-title"] .mzb-section-title p {
    color: #1A0E06 !important;
}

/* Beispiele-Seite Abschnittstitel */
.mzb-gallery-hero + .mzb-section .mzb-section-title h2,
.mzb-gallery-hero + .mzb-section .mzb-section-title p {
    color: #2A1408 !important;
}

/* ================================================================
   TERMINAL-BOX (schwarzer Hintergrund) → ALLE TEXTE WEISS/HELL
   ================================================================ */

.mzb-embedding-visual,
.mzb-embedding-visual *,
.mzb-embedding-row,
.mzb-embedding-row * {
    color: #2A1A0A !important;
}

.mzb-embedding-title {
    color: #B07A10 !important;
}

.mzb-embedding-visual .bracket,
.mzb-embedding-row .bracket {
    color: #B07A10 !important;
}

.mzb-embedding-visual .num-pos,
.mzb-embedding-row .num-pos {
    color: #1A7A3C !important;
}

.mzb-embedding-visual .num-neg,
.mzb-embedding-row .num-neg {
    color: #C0392B !important;
}

.mzb-embedding-label {
    color: #2A1A0A !important;
    font-weight: 700 !important;
}

/* ================================================================
   FAQ DROPDOWN-TEXTE → SCHWARZ
   ================================================================ */

.mzb-faq-question,
.mzb-faq-question * {
    color: #000000 !important;
    font-weight: 700 !important;
}

.mzb-faq-answer,
.mzb-faq-answer *,
.mzb-faq-answer-inner,
.mzb-faq-answer-inner * {
    color: #000000 !important;
    font-weight: 500 !important;
}

/* ================================================================
   RECHTLICHE SEITEN (heller Card-Hintergrund) → DUNKLE SCHRIFT
   ================================================================ */

.mzb-legal-page {
    background: rgba(255, 252, 245, 0.97) !important;
}

.mzb-legal-page h1,
.mzb-legal-page h2,
.mzb-legal-page h3,
.mzb-legal-page h4 {
    color: #1A0E06 !important;
    font-size: revert !important;
}

.mzb-legal-page p,
.mzb-legal-page li,
.mzb-legal-page td,
.mzb-legal-page th,
.mzb-legal-page span,
.mzb-legal-page strong,
.mzb-legal-page em {
    color: #2A1A0A !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
}

.mzb-legal-page a {
    color: #7A4A10 !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}

/* ================================================================
   KONTAKTFORMULAR (heller Hintergrund) → DUNKLE SCHRIFT + SICHTBAR
   ================================================================ */

.mzb-form-control,
input.mzb-form-control,
textarea.mzb-form-control,
select.mzb-form-control {
    color: #2A1A0A !important;
    background-color: rgba(255, 252, 245, 0.95) !important;
    border: 1.5px solid rgba(100, 60, 20, 0.35) !important;
}

.mzb-form-control::placeholder {
    color: rgba(80, 50, 20, 0.55) !important;
}

select.mzb-form-control option {
    background-color: #faf4e8 !important;
    color: #2A1A0A !important;
}

/* ================================================================
   KONTAKT / ÜBER UNS / VORLAGEN (heller Container) → DUNKLE SCHRIFT
   ================================================================ */

.mzb-contact-grid h3, .mzb-contact-grid h4,
.mzb-contact-grid p, .mzb-contact-grid a,
.mzb-contact-grid li, .mzb-contact-info h3,
.mzb-contact-info p {
    color: #1A0E06 !important;
}

.mzb-about-hero + .mzb-section h2,
.mzb-about-hero + .mzb-section h3,
.mzb-about-hero + .mzb-section p,
.mzb-about-hero + .mzb-section li,
.mzb-about-hero + .mzb-section strong {
    color: #1A0E06 !important;
}

.mzb-templates-hero + .mzb-section h2,
.mzb-templates-hero + .mzb-section h3,
.mzb-templates-hero + .mzb-section p,
.mzb-templates-hero + .mzb-section li,
.mzb-templates-hero + .mzb-section ol li {
    color: #1A0E06 !important;
}

/* ==========================================================================
   COOKIE-BANNER — Text und Hintergrund sicherstellen
   ========================================================================== */
#mzb-cookie-banner {
    background: #2C1A0A !important;
}
#mzb-cookie-banner p,
#mzb-cookie-banner .mzb-cookie-text p,
#mzb-cookie-banner * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}
#mzb-cookie-banner a,
#mzb-cookie-banner .mzb-cookie-text a {
    color: #FFD87A !important;
    -webkit-text-fill-color: #FFD87A !important;
}

/* ==========================================================================
   RESPONSIVE — Tablet (max 900px)
   ========================================================================== */
@media (max-width: 900px) {

    /* Hero: untereinander */
    .mzb-hero-inner {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 2rem !important;
    }
    .mzb-hero-book-3d {
        max-width: 360px !important;
        margin: 0 auto !important;
    }
    .mzb-hero-ctas {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    /* Datenschutz-Bereich: 2-spaltig → 1-spaltig */
    .mzb-privacy-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .mzb-privacy-section {
        padding: 2rem 1.5rem !important;
    }

    /* Embedding-Box: volle Breite, kein Überlaufen */
    .mzb-embedding-visual {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        font-size: 0.65rem !important;
    }
    .mzb-privacy-cards {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   RESPONSIVE — Tablet & Smartphone (max 768px)
   Nur Anpassungen für kleine Bildschirme. PC-Ansicht bleibt unverändert.
   ========================================================================== */
@media (max-width: 768px) {

    /* Verhindert horizontales Scrollen global */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    .mzb-container {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
    }

    /* Alle Elemente nie breiter als Bildschirm */
    img, iframe, video, .mzb-embedding-visual {
        max-width: 100% !important;
    }
    img { height: auto !important; }

    /* --- Story-Section: Text + Fotos untereinander --- */
    .mzb-story-inner {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .mzb-story-photos {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
        max-width: 100% !important;
    }

    /* --- Book-Grid (8 Showcase-Bücher): 2 Spalten, kein scale auf Mobile --- */
    .mzb-book-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
    }
    .mzb-book-grid-item {
        transform: scale(1) !important;
    }

    /* --- Versions-Grid (3 Buchversionen): 1 Spalte --- */
    .mzb-grid-3 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* --- Steps-Grid (3 Schritte): 1 Spalte --- */
    .mzb-steps-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* --- 3 Vorschaubilder über "3 Schritte": untereinander --- */
    .mzb-steps div[style*="grid-template-columns:1fr 1fr 1fr"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    .mzb-steps div[style*="grid-template-columns:1fr 1fr 1fr"] > div {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --- Galerie-Seite: 2 Spalten statt 3 --- */
    .mzb-gallery-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
    }
    .mzb-gallery-filters {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    /* --- Statistiken (4 Zahlen): 2×2 --- */
    div[style*="grid-template-columns:repeat(4,1fr)"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1.5rem !important;
    }

    /* --- Werte-Grid (4 Karten): 2 Spalten --- */
    .mzb-values-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
    }

    /* --- Über uns: alle Bild-Grids untereinander --- */
    .mzb-about-hero + .mzb-section .mzb-container > div[style*="grid-template-columns:1fr 1fr 1fr"],
    .mzb-about-hero + .mzb-section .mzb-container > div[style*="grid-template-columns:1fr 1fr"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    .mzb-about-hero + .mzb-section .mzb-container > div[style*="grid-template-columns:1fr 1fr 1fr"] > div,
    .mzb-about-hero + .mzb-section .mzb-container > div[style*="grid-template-columns:1fr 1fr"] > div {
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    /* --- Embedding/Datenschutz-Box: Schrift kleiner, kein seitlicher Überlauf --- */
    .mzb-embedding-visual {
        font-size: 0.6rem !important;
        padding: 1rem !important;
        overflow-x: auto !important;
    }
    .mzb-embedding-row {
        white-space: nowrap !important;
    }

    /* --- Privacy-Section Padding --- */
    .mzb-privacy-section {
        padding: 1.5rem 1rem !important;
        border-radius: var(--mzb-radius) !important;
    }

    /* --- Hero CTA Buttons: umbrechen --- */
    .mzb-hero-ctas {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.75rem !important;
    }
    .mzb-hero-book-3d {
        max-width: 320px !important;
        margin: 0 auto !important;
    }

    /* --- Header CTA Button kleiner --- */
    .mzb-header-cta .mzb-btn {
        font-size: 0.9rem !important;
        padding: 0.5rem 0.9rem !important;
        white-space: nowrap !important;
    }

    /* --- Alle section Paddings reduzieren --- */
    .mzb-section {
        padding: 3rem 0 !important;
    }

    /* --- Texte zentrieren in bestimmten Bereichen --- */
    .mzb-story-text {
        text-align: center !important;
    }
    .mzb-step {
        text-align: center !important;
    }

    /* --- Individuelle Geschichte Box --- */
    div[style*="max-width:780px"] {
        padding: 1.5rem 1.25rem !important;
    }
    div[style*="max-width:780px"] ul {
        text-align: left !important;
    }
}

/* ==========================================================================
   RESPONSIVE — Smartphone (max 480px)
   ========================================================================== */
@media (max-width: 480px) {

    /* Galerie und Book-Grid: 1 Spalte */
    .mzb-gallery-grid,
    .mzb-book-grid {
        grid-template-columns: 1fr !important;
    }

    /* Werte-Grid und Story-Photos: 1 Spalte */
    .mzb-values-grid,
    .mzb-story-photos {
        grid-template-columns: 1fr !important;
    }

    /* Statistiken: 2 Spalten bleiben auch auf kleinen Phones */
    div[style*="grid-template-columns:repeat(4,1fr)"] {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Über uns Bilder: volle Breite */
    .mzb-about-hero + .mzb-section .mzb-container > div > div {
        width: 100% !important;
    }

    /* Hero-Buch kleiner */
    .mzb-hero-book-3d,
    .mzb-video-book--hero {
        max-width: 280px !important;
    }

    /* Buttons umbrechen */
    .mzb-btn {
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Abstand oben/unten für Sections */
    .mzb-section {
        padding: 2rem 0 !important;
    }

    /* Footer Grid: 1 Spalte */
    .mzb-footer-grid {
        grid-template-columns: 1fr !important;
    }
}