/* =========================================================
   SECTION MONSTERS – VIP-Gruppe
   css/vip.css   (baut auf shopbriefing.css auf)
   ========================================================= */

.vip-zeiten-titel {
    font-size: 13px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted);
    margin: 0 0 12px; display: flex; align-items: center;
    justify-content: center; gap: 7px;
}
.vip-zeiten { display: flex; gap: 12px; justify-content: center; margin: 0 0 10px; flex-wrap: wrap; }
.vip-zeit {
    background: var(--panel); border: 1px solid var(--faint);
    border-radius: 13px; padding: 13px 22px; text-align: center; min-width: 150px;
}
.vip-tag { display: block; font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
           color: var(--green); font-weight: 700; margin-bottom: 3px; }
.vip-uhr { display: block; font-size: 17px; font-weight: 700; color: var(--text);
           font-variant-numeric: tabular-nums; }
.vip-zeiten-hinweis strong { color: var(--text); }
.vip-zeiten-hinweis { font-size: 12px; color: var(--muted); margin: 0 0 32px; line-height: 1.55; }

/* Der Beitrittslink ist das Ziel der ganzen Seite — er darf nicht wie ein
   gewoehnlicher Textlink aussehen. */
/* Zentriert, weil .sb-antwort auf text-align:left steht — der Knopf ist
   das Ziel der ganzen Seite und gehoert in die Mitte, nicht an den Rand.
   width:fit-content + margin:auto statt text-align, weil der Link selbst
   flex ist (Logo neben Text).
   Textfarbe bleibt dunkelgruen: Weiss auf #25D366 haette nur 1,98:1
   Kontrast, das dunkle Gruen kommt auf 8,03:1. Deshalb auch das schwarze
   Glyph statt des weissen — ein weisses Logo neben dunklem Text saehe
   aus wie ein Fehler. */
.vip-link {
    display: flex; align-items: center; justify-content: center; gap: 11px;
    width: fit-content; margin: 0 auto;
    background: #25D366; color: #06280f;
    text-decoration: none; padding: 13px 28px; border-radius: 11px;
    font-weight: 800; font-size: 16px;
    transition: filter .18s ease, transform .18s ease;
}
.vip-link img { width: 21px; height: 21px; flex-shrink: 0; }
.vip-link:hover { transform: translateY(-1px); }
.vip-link:hover { filter: brightness(1.08); }
/* Gehoert optisch zum Knopf darueber — bliebe er linksbuendig waehrend
   der Knopf mittig steht, saehe die Gruppe aus wie zwei Bausteine, die
   nichts miteinander zu tun haben. */
.vip-klein { display: block; text-align: center; font-size: 12px; color: var(--muted); }

@media (max-width: 600px) {
    .vip-zeit { flex: 1 1 100%; }
}

/* ── Rufnummern-Hinweis ───────────────────────────────────
   Abgesetzt wie .sb-check-extra beim ShopBriefing und aus demselben Grund:
   Es ist eine Tatsache, die man VOR dem Beitritt kennen muss, keine Fußnote.
   Bewusst KEINE Checkbox — die Weitergabe lässt sich nicht abwählen, also
   gäbe es nichts zuzustimmen. Wir informieren, wir holen keine Einwilligung. */
.vip-nummer {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--panel-2); border: 1px solid var(--faint);
    border-radius: 11px; padding: 13px 15px; margin: 4px 0 16px;
}
.vip-nummer-icon { font-size: 17px; line-height: 1.5; flex-shrink: 0; }
.vip-nummer p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.vip-nummer strong { color: var(--text); }
.vip-nummer a { color: var(--green); }

/* ══ WhatsApp-Zeichen und Handy-Ansicht ═══════════════════════════ */

.vip-wa-logo {
    display: block; margin: 0 auto 16px;
    filter: drop-shadow(0 0 22px rgba(37, 211, 102, .3));
}

/* Handy-Ansicht — als HTML statt Bild, damit der Text mitskaliert und
   sich später gegen einen echten Screenshot tauschen lässt. */
.vip-phone { display: flex; justify-content: center; margin: 30px 0 34px; }
.vip-phone-rahmen {
    width: 268px; border-radius: 30px; padding: 9px 9px 16px;
    background: #0b0b10; border: 1px solid rgba(242, 244, 239, .13);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
    position: relative;
}
.vip-phone-kerbe {
    width: 78px; height: 5px; border-radius: 99px;
    background: rgba(242, 244, 239, .16); margin: 0 auto 9px;
}
.vip-phone-kopf {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 10px 10px; border-bottom: 1px solid rgba(242, 244, 239, .08);
    font-size: 11.5px; font-weight: 700; color: var(--text);
}
/* Der WhatsApp-Chathintergrund ist hell — auch im dunklen Umfeld, sonst
   wirkt die Ansicht nicht wie WhatsApp, sondern wie irgendein Chat. */
.vip-phone-chat {
    background: #0d1418; border-radius: 0 0 21px 21px;
    padding: 12px 10px 14px; display: grid; gap: 8px;
}
.vip-bubble {
    background: #1f2c33; border-radius: 9px 9px 9px 2px;
    padding: 9px 11px 16px; position: relative; text-align: left;
    animation: vip-bubble-rein .5s cubic-bezier(.2, .7, .3, 1) both;
}
.vip-bubble-2 { animation-delay: .5s; background: #005c4b; border-radius: 9px 9px 2px 9px; margin-left: 34px; }
.vip-bubble-emoji { font-size: 13px; }
.vip-bubble strong { display: block; font-size: 12.5px; color: #e9edef; margin: 2px 0 4px; line-height: 1.35; }
.vip-bubble p { margin: 0; font-size: 11.5px; line-height: 1.5; color: rgba(233, 237, 239, .8); }
.vip-bubble-link {
    margin-top: 6px; font-size: 11px; color: #53bdeb;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vip-bubble-zeit {
    position: absolute; right: 9px; bottom: 5px;
    font-size: 9.5px; color: rgba(233, 237, 239, .45);
}

@keyframes vip-bubble-rein { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

@media (max-width: 480px) { .vip-phone-rahmen { width: 240px; } }

@media (prefers-reduced-motion: reduce) {
    .vip-bubble { animation: none; }
}

/* Tipp-Kasten in der Erfolgsmeldung — abgesetzt, aber ruhiger als der
   Rufnummern-Hinweis: Das hier ist ein freundlicher Rat, keine Information,
   die man vor einer Entscheidung kennen muss. */
.vip-tipp {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 18px; padding: 12px 14px;
    background: rgba(242, 244, 239, .04); border-radius: 10px;
    font-size: 12.5px; line-height: 1.6; color: var(--muted); text-align: left;
}
.vip-tipp strong { color: var(--text); }
.vip-tipp em { font-style: normal; color: var(--text); }