/*
 * W4Y Custom CSS – Dark Luxury Edition
 * Ergänzt Tailwind CDN; stimmt auf das Wishes-Theme ab.
 */

/* ════════════════════════════════════════════════════════════════════════════
   SELF-HOSTED FONTS (kein Google-CDN, DSGVO-konform)
   ════════════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Playfair Display';
    src: url('fonts/PlayfairDisplay-Regular.ttf') format('truetype');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* ════════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ════════════════════════════════════════════════════════════════════════════ */

:root {
    /* Typografie */
    --w4y-font-serif:    "Cormorant Garamond", "Playfair Display", Georgia, serif;
    --w4y-font-sans:     Inter, system-ui, sans-serif;

    /* Dunkle Hintergründe */
    --w4y-bg-primary:    #080604;
    --w4y-bg-surface:    rgba(30, 23, 15, 0.92);
    --w4y-bg-raised:     rgba(42, 33, 20, 0.90);
    --w4y-bg-inset:      rgba(10,  7,  4, 0.80);

    /* Gold */
    --w4y-gold:          #c9a96e;
    --w4y-gold-soft:     #d9b98f;
    --w4y-gold-mid:      #c89b62;
    --w4y-gold-bright:   rgba(255, 240, 200, 0.85);

    /* Text */
    --w4y-text-main:     rgba(255, 248, 238, 0.93);
    --w4y-text-soft:     rgba(255, 248, 238, 0.62);
    --w4y-text-muted:    rgba(255, 248, 238, 0.38);
    --w4y-text-faint:    rgba(255, 248, 238, 0.22);

    /* Rahmen */
    --w4y-border-gold:   rgba(201, 169, 110, 0.18);
    --w4y-border-faint:  rgba(201, 169, 110, 0.09);
    --w4y-border-strong: rgba(201, 169, 110, 0.36);

    /* Legacy-Aliases (für nicht migrierte Stellen) */
    --w4y-cream:         #FAF7F2;
    --w4y-rose-warm:     #E8A598;
    --w4y-gold-warm:     #C9A96E;
    --w4y-gold-light:    #F0E0C0;
    --w4y-sage-warm:     #8FAF8F;
}

/* ════════════════════════════════════════════════════════════════════════════
   AMBIENT GLOW – position: fixed, immer viewport-relativ
   ════════════════════════════════════════════════════════════════════════════ */

.w4y-ambient {
    position:       fixed;
    inset:          0;
    z-index:        0;
    pointer-events: none;
    background:
        /* Großes warmes Leuchten oben links – Kerzenlicht-Qualität */
        radial-gradient(ellipse 58% 42% at -2% -4%,
            rgba(201,160,80,.14)  0%,
            rgba(201,160,80,.04) 42%,
            transparent          62%
        ),
        /* Kleiner warmer Hauch oben rechts */
        radial-gradient(ellipse 34% 24% at 102% -2%,
            rgba(240,200,130,.07) 0%,
            rgba(240,200,130,.01) 55%,
            transparent          75%
        ),
        /* Tiefen-Vignette unten */
        linear-gradient(to top,
            rgba(4,3,2,.52)  0%,
            rgba(4,3,2,.12) 26%,
            transparent     50%
        );
}

/* ════════════════════════════════════════════════════════════════════════════
   STERNE – animierter Hintergrund (wie Landing Page)
   ════════════════════════════════════════════════════════════════════════════ */

.w4y-stars {
    position:         fixed;
    inset:            0;
    background-image:
        radial-gradient(2px 2px at 20px 30px,  rgba(255,255,255,0.34), transparent),
        radial-gradient(1px 1px at 40px 70px,  rgba(255,255,255,0.22), transparent),
        radial-gradient(1px 1px at 90px 40px,  rgba(255,255,255,0.16), transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.18), transparent);
    background-size:  220px 220px;
    opacity:          0.35;
    animation:        w4y-move-stars 150s linear infinite;
    z-index:          1;   /* above .w4y-ambient (z-index: 0) */
    pointer-events:   none;
}

@keyframes w4y-move-stars {
    from { transform: translateY(0);      }
    to   { transform: translateY(-220px); }
}

/* ════════════════════════════════════════════════════════════════════════════
   TYPOGRAFIE & BASIS
   ════════════════════════════════════════════════════════════════════════════ */

#w4y-messages { scroll-behavior: smooth; }

/* Dark-luxury Eingabefelder (Chat) */
.w4y-input-dark {
    background:  rgba(255,248,238,.04);
    border:      1px solid rgba(201,169,110,.22);
    color:       rgba(255,248,238,.88);
    transition:  border-color .2s, box-shadow .2s;
    outline:     none;
}
.w4y-input-dark::placeholder {
    color: rgba(255,248,238,.28);
}
.w4y-input-dark:focus {
    border-color: rgba(201,169,110,.65);
    box-shadow:   0 0 0 3px rgba(201,169,110,.10);
}

/* Anlass-Buttons */
.w4y-anlass-btn {
    background:   rgba(255,248,238,.04);
    border:       1px solid rgba(201,169,110,.18);
    color:        rgba(255,248,238,.82);
    font-family:  Inter, sans-serif;
    font-size:    14px;
    text-align:   left;
    border-radius: 14px;
    padding:      14px 18px;
    min-height:   56px;
    width:        100%;
    cursor:       pointer;
    transition:   background .22s ease, border-color .22s ease;
}
.w4y-anlass-btn:hover {
    background:    rgba(201,169,110,.1);
    border-color:  rgba(201,169,110,.38);
}

/* ════════════════════════════════════════════════════════════════════════════
   ANIMATIONEN
   ════════════════════════════════════════════════════════════════════════════ */

@keyframes w4y-spin {
    to { transform: rotate(360deg); }
}
@keyframes w4y-bounce {
    0%, 80%, 100% { transform: translateY(0);    opacity: .7; }
    40%            { transform: translateY(-8px); opacity: 1;  }
}

@keyframes w4y-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}
.w4y-fade-in { animation: w4y-fade-in 0.35s ease-out both; }

@keyframes w4y-pulse {
    0%, 100% { opacity: .35; }
    50%       { opacity: .65; }
}
#w4y-messages > div { animation: w4y-fade-in 0.3s ease-out both; }


/* ── Legal Overlay – WordPress-Seiteninhalt im dunklen Stil ─────────────── */
.w4y-legal-body h1,.w4y-legal-body h2,.w4y-legal-body h3 {
    font-family:'Cormorant Garamond',Georgia,serif;
    font-weight:400;color:rgba(255,248,238,.88);margin:2em 0 .6em;line-height:1.25;
}
.w4y-legal-body h2 { font-size:1.35rem; }
.w4y-legal-body h3 { font-size:1.1rem; }
.w4y-legal-body p  { margin:0 0 1em; }
.w4y-legal-body ul,.w4y-legal-body ol { padding-left:1.4em;margin:0 0 1em; }
.w4y-legal-body li { margin-bottom:.35em; }
.w4y-legal-body strong { color:rgba(255,248,238,.9); }
.w4y-legal-body hr { border:none;border-top:1px solid rgba(255,248,238,.08);margin:2em 0; }

/* Typing-Dots */
@keyframes w4y-pulse-dot {
    0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
    40%            { transform: scale(1.0); opacity: 1.0; }
}
.w4y-typing span {
    display:       inline-block;
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    var(--w4y-gold);
    animation:     w4y-pulse-dot 1.2s infinite ease-in-out;
}
.w4y-typing span:nth-child(2) { animation-delay: 0.15s; }
.w4y-typing span:nth-child(3) { animation-delay: 0.30s; }

/* ════════════════════════════════════════════════════════════════════════════
   CHAT BUBBLES
   ════════════════════════════════════════════════════════════════════════════ */

/* Bot-Bubble Pfeil links – Farbe passend zum dunklen Surface */
.bubble-bot { position: relative; }
.bubble-bot::before {
    content:              '';
    position:             absolute;
    top:                  12px;
    left:                 -8px;
    border:               8px solid transparent;
    border-right-color:   rgba(30, 23, 15, 0.95);
    border-left:          0;
}

/* User-Bubble Pfeil rechts */
.bubble-user { position: relative; }
.bubble-user::after {
    content:            '';
    position:           absolute;
    top:                12px;
    right:              -8px;
    border:             8px solid transparent;
    border-left-color:  rgba(201, 169, 110, 0.35);
    border-right:       0;
}

/* ════════════════════════════════════════════════════════════════════════════
   BARRIEREFREIHEIT
   ════════════════════════════════════════════════════════════════════════════ */

:focus-visible {
    outline:        2px solid var(--w4y-gold);
    outline-offset: 3px;
    border-radius:  4px;
}
button, a, input[type="submit"], select { min-height: 44px; }

/* ════════════════════════════════════════════════════════════════════════════
   VORSCHAU-KARTE (Dark)
   ════════════════════════════════════════════════════════════════════════════ */

.w4y-preview-card {
    background:    linear-gradient(180deg, rgba(30,23,15,0.96) 0%, rgba(14,11,8,0.98) 100%);
    border:        1px solid var(--w4y-border-gold);
    border-radius: 1.5rem;
    padding:       2rem;
    font-family:   var(--w4y-font-serif);
    line-height:   1.8;
    color:         var(--w4y-text-main);
    box-shadow:    0 8px 40px rgba(0, 0, 0, 0.45),
                   inset 0 1px 0 rgba(255, 240, 200, 0.04);
}

/* ════════════════════════════════════════════════════════════════════════════
   WASSERZEICHEN
   ════════════════════════════════════════════════════════════════════════════ */

.w4y-preview-wrapper { position: relative; isolation: isolate; }

.w4y-wm-shield {
    position:       absolute;
    inset:          0;
    z-index:        10;
    pointer-events: none;
    user-select:    none;
    overflow:       hidden;
    border-radius:  inherit;
}
.w4y-wm-grid {
    position:        absolute;
    inset:           -20%;
    display:         flex;
    flex-direction:  column;
    justify-content: space-around;
    transform:       rotate(-35deg);
    transform-origin: center center;
}
.w4y-wm-row {
    display:         flex;
    justify-content: space-around;
    white-space:     nowrap;
}
.w4y-wm-text {
    font-family:    Inter, system-ui, sans-serif;
    font-size:      clamp(0.75rem, 2.5vw, 1.25rem);
    font-weight:    600;
    color:          rgba(255, 255, 255, 0.06);
    letter-spacing: 0.05em;
    padding:        0 1.5rem;
}
.w4y-wm-light { color: rgba(255, 255, 255, 0.08); }

/* ════════════════════════════════════════════════════════════════════════════
   PRODUKT / MOTIV AUSWAHL – Dark Luxury
   ════════════════════════════════════════════════════════════════════════════ */

.w4y-pick {
    border:     1px solid var(--w4y-border-gold);
    background: var(--w4y-bg-surface);
    cursor:     pointer;
    transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
    color:      var(--w4y-text-main);
    box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.03);
}

/* Sichtbarer Fokusring für alle per Tastatur bedienbaren Auswahl-Kacheln
   (Produkt/Format/Motiv/Stimme/Musik – .w4y-pick und die frei gestalteten
   Motiv-Thumbnails tragen beide role="radio"). */
.w4y-pick:focus-visible,
[role="radio"]:focus-visible,
[role="button"]:focus-visible {
    outline:        2px solid #C9A96E;
    outline-offset: 2px;
}
.w4y-pick:hover:not(.w4y-pick--on) {
    border-color: rgba(201, 169, 110, 0.40);
    background:   var(--w4y-bg-raised);
    box-shadow:   inset 0 1px 0 rgba(255,240,200,0.05),
                  0 0 24px rgba(201, 169, 110, 0.08);
    transform:    translateY(-1px);
}
.w4y-pick--on {
    border-color: rgba(201, 169, 110, 0.55) !important;
    background:   linear-gradient(
                      135deg,
                      rgba(201, 169, 110, 0.22) 0%,
                      rgba(201, 169, 110, 0.12) 100%
                  ) !important;
    box-shadow:   0 6px 28px rgba(201, 169, 110, 0.22),
                  inset 0 1px 0 rgba(255, 240, 200, 0.08) !important;
    color:        var(--w4y-text-main) !important;
}

/* Texte – neutral */
.w4y-pick-label { color: var(--w4y-text-main);  }
.w4y-pick-price { color: var(--w4y-gold-soft);  font-weight: 700; }
.w4y-pick-desc  { color: var(--w4y-text-muted); }
.w4y-pick-check { opacity: 0; }

/* Texte – ausgewählt */
.w4y-pick--on .w4y-pick-label { color: rgba(255, 248, 238, 0.96)  !important; }
.w4y-pick--on .w4y-pick-price { color: #fde68a                    !important; }
.w4y-pick--on .w4y-pick-desc  { color: rgba(255, 248, 238, 0.62)  !important; }
.w4y-pick--on .w4y-pick-check { opacity: 1 !important; color: #fde68a !important; }

/* Motiv-Buttons */
.w4y-motif-btn {
    cursor:        pointer;
    transition:    box-shadow 200ms ease, border-color 200ms ease;
    border:        2px solid transparent;
    border-radius: 0.75rem;
    overflow:      hidden;
}
.w4y-motif-btn--on {
    border-color: rgba(201, 169, 110, 0.70) !important;
    box-shadow:   0 0 0 3px rgba(201, 169, 110, 0.15),
                  0 0 20px rgba(201, 169, 110, 0.12) !important;
}
.w4y-motif-check {
    display:         none;
    position:        absolute;
    top:             4px;
    right:           4px;
    width:           18px;
    height:          18px;
    border-radius:   50%;
    background:      rgba(0, 0, 0, 0.65);
    align-items:     center;
    justify-content: center;
    font-size:       10px;
    color:           #fde68a;
}
.w4y-motif-btn--on .w4y-motif-check { display: flex; }

/* ════════════════════════════════════════════════════════════════════════════
   SCROLLBAR
   ════════════════════════════════════════════════════════════════════════════ */

#w4y-messages::-webkit-scrollbar        { width: 3px; }
#w4y-messages::-webkit-scrollbar-track  { background: transparent; }
#w4y-messages::-webkit-scrollbar-thumb  {
    background:    rgba(201, 169, 110, 0.22);
    border-radius: 2px;
}

/* ════════════════════════════════════════════════════════════════════════════
   LANDING PAGE – Hintergrund, Hero, Blobs
   ════════════════════════════════════════════════════════════════════════════ */

.lp-scene {
    position:   fixed;
    inset:      0;
    z-index:    1;
    overflow:   hidden;
    background: #0D0A07;
}
.lp-scene::after {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     rgba(8, 5, 2, 0);
    z-index:        2;
    transition:     background 600ms ease;
    pointer-events: none;
}

.lp-bg {
    position:   absolute;
    inset:      0;
    z-index:    0;
    transition: filter 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

.lp-blob {
    position:      absolute;
    border-radius: 50%;
    filter:        blur(80px);
    opacity:       0.18;
    will-change:   transform;
}
.lp-blob--1 {
    width: 60vw; height: 60vw; top: -15%; left: -10%;
    background: radial-gradient(circle, #C9A96E 0%, #8B6914 60%, transparent 100%);
    animation:  lp-drift-1 22s ease-in-out infinite alternate;
}
.lp-blob--2 {
    width: 50vw; height: 50vw; bottom: -10%; right: -5%;
    background: radial-gradient(circle, #E8A598 0%, #C06060 50%, transparent 100%);
    animation:  lp-drift-2 18s ease-in-out infinite alternate;
}
.lp-blob--3 {
    width: 40vw; height: 40vw; top: 30%; left: 30%;
    background: radial-gradient(circle, #D4A853 0%, transparent 70%);
    opacity:    0.10;
    animation:  lp-drift-3 28s ease-in-out infinite alternate;
}
.lp-blob--4 {
    width: 35vw; height: 35vw; top: -5%; right: 10%;
    background: radial-gradient(circle, #FAF7F2 0%, transparent 70%);
    opacity:    0.06;
    animation:  lp-drift-4 15s ease-in-out infinite alternate;
}
.lp-grid-overlay {
    position:         absolute;
    inset:            0;
    background-image: linear-gradient(rgba(201,169,110,0.04) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(201,169,110,0.04) 1px, transparent 1px);
    background-size:  60px 60px;
}
@keyframes lp-drift-1 { from { transform: translate(0,0) scale(1);     } to { transform: translate(5%,8%)   scale(1.08); } }
@keyframes lp-drift-2 { from { transform: translate(0,0) scale(1);     } to { transform: translate(-8%,-5%) scale(1.12); } }
@keyframes lp-drift-3 { from { transform: translate(0,0) scale(1);     } to { transform: translate(-5%,6%)  scale(0.9);  } }
@keyframes lp-drift-4 { from { transform: translate(0,0) scale(1);     } to { transform: translate(4%,10%)  scale(1.05); } }

.lp-hero {
    position:        relative;
    z-index:         3;
    height:          100dvh;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         2rem 1.5rem;
    text-align:      center;
    transition:      opacity 350ms ease, transform 350ms cubic-bezier(0.4,0,1,1);
    will-change:     opacity, transform;
}

.lp-wordmark { position: absolute; top: 2rem; left: 50%; transform: translateX(-50%); }
.lp-wordmark__text {
    font-family:    var(--w4y-font-serif);
    font-size:      0.85rem;
    color:          rgba(201, 169, 110, 0.6);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.lp-hero__content { display: flex; flex-direction: column; align-items: center; gap: 2rem; max-width: 680px; }

.lp-quote {
    display:   flex;
    align-items: center;
    gap:       1.25rem;
    opacity:   0;
    animation: lp-fade-up 1s 0.4s ease-out forwards;
}
.lp-quote__line {
    width: 3rem; height: 1px; flex-shrink: 0;
    background: linear-gradient(90deg, transparent, rgba(201,169,110,0.5));
}
.lp-quote__line:last-child { background: linear-gradient(90deg, rgba(201,169,110,0.5), transparent); }
.lp-quote__text {
    font-family:    var(--w4y-font-serif);
    font-size:      clamp(0.85rem, 2vw, 1rem);
    font-style:     italic;
    color:          rgba(201, 169, 110, 0.75);
    letter-spacing: 0.01em;
    line-height:    1.6;
    white-space:    nowrap;
}

.lp-headline {
    font-family:    var(--w4y-font-serif);
    font-size:      clamp(2.25rem, 6vw, 4rem);
    font-weight:    400;
    line-height:    1.2;
    color:          #FAF7F2;
    letter-spacing: -0.01em;
    opacity:        0;
    animation:      lp-fade-up 1s 0.7s ease-out forwards;
}
.lp-headline em {
    font-style: italic;
    background: linear-gradient(135deg, #C9A96E, #E8A598);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lp-subtext {
    font-family:    var(--w4y-font-sans);
    font-size:      clamp(0.875rem, 2vw, 1rem);
    font-weight:    300;
    color:          rgba(250, 247, 242, 0.45);
    line-height:    1.75;
    letter-spacing: 0.01em;
    opacity:        0;
    animation:      lp-fade-up 1s 1s ease-out forwards;
}

.lp-cta-wrapper {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            1rem;
    opacity:        0;
    animation:      lp-fade-up 1s 1.3s ease-out forwards;
}
.lp-cta {
    display:         inline-flex;
    align-items:     center;
    gap:             0.75rem;
    padding:         1rem 2.25rem;
    border:          none;
    border-radius:   999px;
    cursor:          pointer;
    font-family:     var(--w4y-font-sans);
    font-size:       1rem;
    font-weight:     500;
    color:           #1A1108;
    text-decoration: none;
    background:      linear-gradient(135deg, #C9A96E 0%, #E8C068 50%, #C9A96E 100%);
    background-size: 200% 200%;
    box-shadow:      0 0 40px rgba(201,169,110,0.25), 0 4px 20px rgba(0,0,0,0.3);
    transition:      box-shadow 300ms ease, transform 200ms ease, background-position 600ms ease;
    min-height:      56px;
}
.lp-cta:hover {
    box-shadow:          0 0 60px rgba(201,169,110,0.45), 0 8px 32px rgba(0,0,0,0.4);
    transform:           translateY(-2px);
    background-position: right center;
}
.lp-cta:active { transform: translateY(0) scale(0.98); }
.lp-cta__text   { letter-spacing: 0.02em; }
.lp-cta__icon   { display: flex; align-items: center; transition: transform 300ms ease; }
.lp-cta__icon svg { width: 1.1rem; height: 1.1rem; }
.lp-cta:hover .lp-cta__icon { transform: translateX(3px); }
.lp-cta__hint {
    font-family:    var(--w4y-font-sans);
    font-size:      0.75rem;
    color:          rgba(250, 247, 242, 0.3);
    letter-spacing: 0.01em;
}

.lp-scroll-hint {
    position:  absolute;
    bottom:    2rem;
    left:      50%;
    transform: translateX(-50%);
    opacity:   0;
    animation: lp-fade-up 1s 2s ease-out forwards;
}
.lp-scroll-hint__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(201, 169, 110, 0.4);
    animation:  lp-scroll-pulse 2.5s 2.5s ease-in-out infinite;
}
@keyframes lp-scroll-pulse {
    0%, 100% { opacity: 0.4; transform: translateY(0);   }
    50%       { opacity: 0.9; transform: translateY(6px); }
}
@keyframes lp-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0);    }
}



/* ── Bottom Sheet Transition ────────────────────────────────────────────── */
.w4y-sheet-enter-active { transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1), opacity 0.28s ease; }
.w4y-sheet-leave-active { transition: transform 0.22s ease-in, opacity 0.22s ease-in; }
.w4y-sheet-enter-from,
.w4y-sheet-leave-to     { transform: translateY(100%); opacity: 0; }
.w4y-sheet-enter-to,
.w4y-sheet-leave-from   { transform: translateY(0);    opacity: 1; }

/* ── Inline-Banner Fade Transition ──────────────────────────────────────── */
.w4y-banner-enter-active { transition: opacity 0.3s ease, max-height 0.3s ease; }
.w4y-banner-leave-active { transition: opacity 0.2s ease, max-height 0.2s ease; }
.w4y-banner-enter-from,
.w4y-banner-leave-to     { opacity: 0; max-height: 0;   }
.w4y-banner-enter-to,
.w4y-banner-leave-from   { opacity: 1; max-height: 80px; }